PWA-Login: Passwort-Sichtbar-Toggle (Auge-Icon)
All checks were successful
Deploy baustelle-pwa / deploy (push) Successful in 13s
All checks were successful
Deploy baustelle-pwa / deploy (push) Successful in 13s
Auge-Button im Passwort-Feld schaltet zwischen Klartext und Punkten um. Hilft Tippfehler zu vermeiden (z.B. bei EN-Tastaturlayout via Remote-Desktop). [deploy]
This commit is contained in:
parent
17575f38e4
commit
b8ed5f2276
1 changed files with 13 additions and 1 deletions
14
app.js
14
app.js
|
|
@ -345,10 +345,22 @@ router.on('/login', async () => {
|
||||||
<form class="login-form" id="login-form">
|
<form class="login-form" id="login-form">
|
||||||
<h2>🔧 Baustelle</h2>
|
<h2>🔧 Baustelle</h2>
|
||||||
<input type="text" name="login" placeholder="Benutzername" autocomplete="username" required>
|
<input type="text" name="login" placeholder="Benutzername" autocomplete="username" required>
|
||||||
<input type="password" name="password" placeholder="Passwort" autocomplete="current-password" required>
|
<div style="position:relative;">
|
||||||
|
<input type="password" id="bl-pass" name="password" placeholder="Passwort" autocomplete="current-password" required style="padding-right:46px;">
|
||||||
|
<button type="button" id="bl-pass-toggle" tabindex="-1" aria-label="Passwort anzeigen" style="position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:0;color:#f0f0f0;opacity:0.5;cursor:pointer;padding:6px;line-height:0;">
|
||||||
|
<svg viewBox="0 0 24 24" width="22" height="22" fill="currentColor"><path d="M12 5c-5 0-9.3 3.1-11 7 1.7 3.9 6 7 11 7s9.3-3.1 11-7c-1.7-3.9-6-7-11-7zm0 12a5 5 0 110-10 5 5 0 010 10zm0-8a3 3 0 100 6 3 3 0 000-6z"/></svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
<button type="submit" class="btn btn-large">Anmelden</button>
|
<button type="submit" class="btn btn-large">Anmelden</button>
|
||||||
</form>
|
</form>
|
||||||
`;
|
`;
|
||||||
|
const _blPass = document.getElementById('bl-pass');
|
||||||
|
const _blToggle = document.getElementById('bl-pass-toggle');
|
||||||
|
if (_blToggle && _blPass) _blToggle.addEventListener('click', () => {
|
||||||
|
const show = _blPass.type === 'password';
|
||||||
|
_blPass.type = show ? 'text' : 'password';
|
||||||
|
_blToggle.style.opacity = show ? '1' : '0.5';
|
||||||
|
});
|
||||||
document.getElementById('login-form').addEventListener('submit', async (e) => {
|
document.getElementById('login-form').addEventListener('submit', async (e) => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
const fd = new FormData(e.target);
|
const fd = new FormData(e.target);
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue