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

remove raw html

Browse source
This commit is contained in:
Jonas Leder 2022-03-25 10:38:01 +01:00
parent 8e990911c1
commit bae04c21cf
No known key found for this signature in database
GPG key ID: CC3C488E27DFF5CA
1 changed files with 71 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

91
js/customElements/pwgen.js
View file

@ -1,24 +1,75 @@
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>
`;
super();
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");
const outValue = document.createElement("input");
outValue.type = "text";
this.appendChild(outValue);
const lineBreak = document.createElement("br");
this.appendChild(lineBreak);
const pwlen = document.createElement("input");
pwlen.type = "range";
pwlen.min = "8";
pwlen.max = "128";
pwlen.value = "32";
this.appendChild(pwlen);
const pwlenSpan = document.createElement("span");
pwlenSpan.innerText = "32";
this.appendChild(pwlenSpan);
const lineBreak2 = document.createElement("br");
this.appendChild(lineBreak2);
const includeNum = document.createElement("input");
includeNum.type = "checkbox";
includeNum.checked = true;
this.appendChild(includeNum);
const includeNumText = document.createTextNode(" Zahlen");
this.appendChild(includeNumText);
const lineBreak3 = document.createElement("br");
this.appendChild(lineBreak3);
const includeBigChar = document.createElement("input");
includeBigChar.type = "checkbox";
includeBigChar.checked = true;
this.appendChild(includeBigChar);
const bigCharText = document.createTextNode(" Großbuchstaben");
this.appendChild(bigCharText);
const lineBreak4 = document.createElement("br");
this.appendChild(lineBreak4);
const includeSmallChar = document.createElement("input");
includeSmallChar.type = "checkbox";
includeSmallChar.checked = true;
this.appendChild(includeSmallChar);
const includeSmallCharText = document.createTextNode(" Kleinbuchstaben");
this.appendChild(includeSmallCharText);
const lineBreak5 = document.createElement("br");
this.appendChild(lineBreak5);
const includeSpecialChar = document.createElement("input");
includeSpecialChar.type = "checkbox";
includeSpecialChar.checked = true;
this.appendChild(includeSpecialChar);
const inclideSpecialCharText = document.createTextNode(" Sonderzeichen");
this.appendChild(inclideSpecialCharText);
const lineBreak6 = document.createElement("br");
this.appendChild(lineBreak6);
const button = document.createElement("button");
button.innerText = "Generieren";
this.appendChild(button);
pwlen.oninput = () => {
pwlenSpan.innerText = pwlen.value;
@ -34,7 +85,7 @@ class PasswordGenerator extends HTMLElement {
includeSmallChar.onchange = () => {
button.click();
}
includeSpecialChat.onchange = () => {
includeSpecialChar.onchange = () => {
button.click();
}
@ -51,7 +102,7 @@ class PasswordGenerator extends HTMLElement {
if(includeSmallChar.checked) {
possibleChar += "abcdefghijklmnopqrstuvwxyz";
}
if(includeSpecialChat.checked) {
if(includeSpecialChar.checked) {
possibleChar += ",;.:-_#'+*?=)(/&%$§\"!°{[]}<>|~"
}