jonasled2/website
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

add password generator

Browse source
This commit is contained in:
Jonas Leder 2022-01-28 23:09:38 +01:00
parent 229175a482
commit 83e0cdc158
6 changed files with 102 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

55
js/customElements/pwgen.js Normal file
View file

@ -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)

3
js/script.js
View file

@ -18,4 +18,5 @@ require("./customElements/mainMenu");
require("./customElements/footer");
require("./customElements/ebkBanner");
require("./customElements/sellingTable");
require("./customElements/skills");
require("./customElements/skills");
require("./customElements/pwgen");

5
public/API/mainMenu.json
View file

@ -174,6 +174,11 @@
"name": "Matrix",
"url": "//chat.jonasled.de",
"type": "link"
},
{
"name": "Passwort Generator",
"url": "/passwordgen.html",
"type": "link"
}
]
},

23
public/passwordgen.html Normal file
View file

@ -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>

15
styl/lib/_pwgen.styl Normal file
View file

@ -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;
}
}

3
styl/style.styl
View file

@ -16,4 +16,5 @@
@import "lib/_prism";
@import "lib/_sellingTable";
@import "lib/_skills";
@import "lib/_basicLightbox"
@import "lib/_basicLightbox"
@import "lib/_pwgen";