website/js/customElements/pwgen.js

69 lines
No EOL
2.4 KiB
JavaScript

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.click();
}
includeNum.onchange = () => {
button.click();
}
includeBigChar.onchange = () => {
button.click();
}
includeSmallChar.onchange = () => {
button.click();
}
includeSpecialChat.onchange = () => {
button.click();
}
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)