Feature Request: Passwortfelder mit "Augensymbol" um Passwörter temporär anzuzeigen

[DanielR92]

Wird realisiert. Rückfrage, soll nur das aktuelle Feld auf den Toggle reagieren? Oder auch andere Passwort-Felder in Zukunft?

Welche Felder sind zu behandeln?

[rmayergfx]

Aus meiner Sicht wäre eine funktionierende Sicherheitsabfrage mit Passwortwiederholung wesentlich sinnvoller als ein "Auge" um das eingegebene Passwort anzusehen. Das Auge darf aus Sicherheitsgründen auch nur temporär angezeigt werden, d.h. nach dem Speichern müssten auf jeden Fall alle Werte gelöscht sein, damit niemand nach einem Reboot darauf zugreifen kann.

Aktuell gibt man das Kennwort einmal ein und drückt auf speichern, dumm wenn man sich vertippt hat.

[lumapu]

die Felder enthalten auch jetzt schon einen Platzhalter und nicht das 'echte' Passwort. Gibt es diese Funktion noch nicht als html-Feld?

[DanielR92]

Eine Passwortwiederholung ist schnell eingebaut. Das mit dem "Auge" ist ja klar. Da kann man einiges noch einbauen. Gern dürfen auch andere sich dazu gesellen. :)

[lumapu]

finde die checkbox ganz gut, ist quick'n'dirty. Wir könnten auch per CSS versuchen die Checkbox in dieses Auge zu wandeln und hinten ans Feld anzuhängen - habe dafür mal nach "bootstrap password eye" gesucht, ein bisschen was findet man da. Mir wäre es ganz lieb, wenn dieses Feature nicht den Rahmen des ESPs sprenge würde, also KISS 😉

[stefan123t]

@DanielR92 hier ist ein Beispiel für eine Checkbox / SVG Augensymbol welche das Passwort im Eingabefeld sichtbar / unsichtbar stellt.

How To - Toggle Password Visibility https://www.w3schools.com/howto/howto_js_toggle_password.asp

Hide/show toggle inside password input https://stackoverflow.com/questions/70711865/hide-show-toggle-inside-password-input

var x = document.getElementById("login-form-password");   // Input
var s = document.getElementById("Layer_1");               // Show pass
var h = document.getElementById("Layer_2");               // Hide pass

function togglePass() {
    if (x.type === "password") {
        x.type = 'text';
        s.style.display = 'none';
        h.style.display = 'inline';
    } else {
        x.type = 'password';
        s.style.display = 'inline';
        h.style.display = 'none';
    }   
}

#inputcontainer {
    display: flex;
}
#inputcontainer > svg {
  margin-left: 5px;
}

<p class="signin_title">Sign in</p>
<input type="text" id="login-form-username" name="os_username"  placeholder="Username" required><br><br>

<div id='inputcontainer'>
  <input type="password" id="login-form-password" name="os_password" placeholder="Password" required></input>

  <svg id="Layer_1" onclick="togglePass()" data-name="Layer 1" width="25" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><title>eye-glyph</title><path d="M320,256a64,64,0,1,1-64-64A64.07,64.07,0,0,1,320,256Zm189.81,9.42C460.86,364.89,363.6,426.67,256,426.67S51.14,364.89,2.19,265.42a21.33,21.33,0,0,1,0-18.83C51.14,147.11,148.4,85.33,256,85.33s204.86,61.78,253.81,161.25A21.33,21.33,0,0,1,509.81,265.42ZM362.67,256A106.67,106.67,0,1,0,256,362.67,106.79,106.79,0,0,0,362.67,256Z"/></svg>
  <svg id="Layer_2" onclick="togglePass()" data-name="Layer 2" width="25" xmlns="http://www.w3.org/2000/svg" style='display: none' viewBox="0 0 512 512"><title>eye-disabled-glyph</title><path d="M409.84,132.33l95.91-95.91A21.33,21.33,0,1,0,475.58,6.25L6.25,475.58a21.33,21.33,0,1,0,30.17,30.17L140.77,401.4A275.84,275.84,0,0,0,256,426.67c107.6,0,204.85-61.78,253.81-161.25a21.33,21.33,0,0,0,0-18.83A291,291,0,0,0,409.84,132.33ZM256,362.67a105.78,105.78,0,0,1-58.7-17.8l31.21-31.21A63.29,63.29,0,0,0,256,320a64.07,64.07,0,0,0,64-64,63.28,63.28,0,0,0-6.34-27.49l31.21-31.21A106.45,106.45,0,0,1,256,362.67ZM2.19,265.42a21.33,21.33,0,0,1,0-18.83C51.15,147.11,148.4,85.33,256,85.33a277,277,0,0,1,70.4,9.22l-55.88,55.88A105.9,105.9,0,0,0,150.44,270.52L67.88,353.08A295.2,295.2,0,0,1,2.19,265.42Z"/></svg>
</div>