From 83e0cdc15895404cba7544e6c73360779a15b12e Mon Sep 17 00:00:00 2001
From: Jonas Leder <jonas@jonasled.de>
Date: Fri, 28 Jan 2022 23:09:38 +0100
Subject: [PATCH] add password generator
---
js/customElements/pwgen.js | 55 ++++++++++++++++++++++++++++++++++++++
js/script.js | 3 ++-
public/API/mainMenu.json | 5 ++++
public/passwordgen.html | 23 ++++++++++++++++
styl/lib/_pwgen.styl | 15 +++++++++++
styl/style.styl | 3 ++-
6 files changed, 102 insertions(+), 2 deletions(-)
create mode 100644 js/customElements/pwgen.js
create mode 100644 public/passwordgen.html
create mode 100644 styl/lib/_pwgen.styl
diff --git a/js/customElements/pwgen.js b/js/customElements/pwgen.js
new file mode 100644
index 0000000..c8d1980
--- /dev/null
+++ b/js/customElements/pwgen.js
@@ -0,0 +1,55 @@
+class PasswordGenerator extends HTMLElement {
+ constructor() {
+ super();
+ this.innerHTML = `
+ <input type="text" disabled id="pwgen-out"><br>
+ <input type="range" min="8" max="128" value="32" id="pwgen-len"><span id="pwgen-len-num">32</span><br>
+ <input type="checkbox" id="pwgen-inc-num" checked> Zahlen<br>
+ <input type="checkbox" id="pwgen-inc-big-char" checked> Großbuchstaben<br>
+ <input type="checkbox" id="pwgen-inc-small-char" checked> Kleinbuchstaben<br>
+ <input type="checkbox" id="pwgen-inc-special-char" checked> Sonderzeichen<br>
+ <button>Generieren</button>
+ `;
+
+ const outValue = this.querySelector("#pwgen-out");
+ const pwlen = this.querySelector("#pwgen-len");
+ const pwlenSpan = this.querySelector("#pwgen-len-num");
+ const includeNum = this.querySelector("#pwgen-inc-num");
+ const includeBigChar = this.querySelector("#pwgen-inc-big-char");
+ const includeSmallChar = this.querySelector("#pwgen-inc-small-char");
+ const includeSpecialChat = this.querySelector("#pwgen-inc-special-char");
+ const button = this.querySelector("button");
+
+ pwlen.oninput = () => {
+ pwlenSpan.innerText = pwlen.value;
+ }
+
+ button.onclick = () => {
+ let possibleChar = "";
+ let password = "";
+
+ if(includeNum.checked) {
+ possibleChar += "1234567890";
+ }
+ if(includeBigChar.checked) {
+ possibleChar += "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
+ }
+ if(includeSmallChar.checked) {
+ possibleChar += "abcdefghijklmnopqrstuvwxyz";
+ }
+ if(includeSpecialChat.checked) {
+ possibleChar += ",;.:-_#'+*?=)(/&%$§\"!°{[]}<>|~"
+ }
+
+ for(let i = 0; i < pwlen.value; i++) {
+ password += possibleChar[Math.floor(Math.random() * possibleChar.length)];
+ }
+
+ outValue.value = password;
+ }
+
+ button.click();
+ }
+}
+
+customElements.define("jl-pwgen", PasswordGenerator)
\ No newline at end of file
diff --git a/js/script.js b/js/script.js
index f9ec471..cd0b466 100644
--- a/js/script.js
+++ b/js/script.js
@@ -18,4 +18,5 @@ require("./customElements/mainMenu");
require("./customElements/footer");
require("./customElements/ebkBanner");
require("./customElements/sellingTable");
-require("./customElements/skills");
\ No newline at end of file
+require("./customElements/skills");
+require("./customElements/pwgen");
\ No newline at end of file
diff --git a/public/API/mainMenu.json b/public/API/mainMenu.json
index 51538ca..a04035b 100644
--- a/public/API/mainMenu.json
+++ b/public/API/mainMenu.json
@@ -174,6 +174,11 @@
"name": "Matrix",
"url": "//chat.jonasled.de",
"type": "link"
+ },
+ {
+ "name": "Passwort Generator",
+ "url": "/passwordgen.html",
+ "type": "link"
}
]
},
diff --git a/public/passwordgen.html b/public/passwordgen.html
new file mode 100644
index 0000000..2220113
--- /dev/null
+++ b/public/passwordgen.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="de">
+
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <link href="/css/style.css" rel="stylesheet">
+ <title></title>
+</head>
+
+<body>
+ <jl-header data-title="Passwort Generator"></jl-header>
+ <div id="content">
+ <h3>Alle Passwörter werden nur auf dem Lokalen Computer generiert und werden in keiner Weise an den Server
+ übertragen, daher habe ich keinerlei Möglichkeit diese mitzulesen und der Passwortmanager kann ohne bedenken
+ verwendet werden.</h3>
+ <jl-pwgen></jl-pwgen>
+ </div>
+ <jl-footer></jl-footer>
+ <script src="/js/script.js"></script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/styl/lib/_pwgen.styl b/styl/lib/_pwgen.styl
new file mode 100644
index 0000000..57d6357
--- /dev/null
+++ b/styl/lib/_pwgen.styl
@@ -0,0 +1,15 @@
+jl-pwgen {
+ input[type="text"] {
+ background-color: #1a2332;
+ color: #b3b3b3;
+ border: solid #111721;
+ border-radius: 5px;
+ padding: 5px;
+ width: 100%
+ }
+
+ input, button {
+ margin-top: 5px;
+ }
+
+}
\ No newline at end of file
diff --git a/styl/style.styl b/styl/style.styl
index d31d4da..30042e5 100644
--- a/styl/style.styl
+++ b/styl/style.styl
@@ -16,4 +16,5 @@
@import "lib/_prism";
@import "lib/_sellingTable";
@import "lib/_skills";
-@import "lib/_basicLightbox"
\ No newline at end of file
+@import "lib/_basicLightbox"
+@import "lib/_pwgen";
\ No newline at end of file
--
GitLab