69 lines
No EOL
2.4 KiB
JavaScript
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) |