website/js/customElements/pwgen.js

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)