diff --git a/js/customElements/pwgen.js b/js/customElements/pwgen.js
new file mode 100644
index 0000000000000000000000000000000000000000..c8d198049a0d453472d5a7add6de9894b52022ee
--- /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 f9ec471c212f1174807209bacc89980c01277b74..cd0b46684e64d4bb7ceb0325a87c36c295c42ac4 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 51538cacdae9035390b0285638741f8d0df36d81..a04035b048e27af1fd0a97516bab76d63aae2e92 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 0000000000000000000000000000000000000000..222011367e13be0e64a5a4de433a19d5c3baa439
--- /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 0000000000000000000000000000000000000000..57d6357263f91f9eab22566deebe0900c0e8ab6c
--- /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 d31d4da3f2da352e1879afb46d224f2817919354..30042e5a6b1fb707896a5ad4d88f5d36c66a2f96 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