rene/banyaro
1
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Feature: Passwort-Sichtbarkeits-Toggle in Login- und Registrier-Formular

Browse source 
Eye/Eye-Slash-Button neben Passwort-Felder (Phosphor Icons), schaltet type password/text um. SW by-v199, APP_VER 167.
This commit is contained in:
rene 2026-04-18 13:34:21 +02:00
parent 370ae52138
commit 8fdca1f211
3 changed files with 41 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

2
backend/static/js/app.js
View file

@ -3,7 +3,7 @@
Router, State-Management, Navigation, Initialisierung. Router, State-Management, Navigation, Initialisierung.
============================================================ */ ============================================================ */
const APP_VER = '166'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen const APP_VER = '167'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen
const App = (() => { const App = (() => {

42
backend/static/js/pages/settings.js
View file

@ -490,8 +490,18 @@ window.Page_settings = (() => {
</div> </div>
<div class="form-group"> <div class="form-group">
<label class="form-label">Passwort</label> <label class="form-label">Passwort</label>
<input class="form-control" type="password" name="password" <div style="position:relative">
placeholder="Passwort" autocomplete="current-password" required> <input class="form-control" type="password" name="password" id="login-pw"
placeholder="Passwort" autocomplete="current-password" required
style="padding-right:var(--space-10)">
<button type="button" id="login-pw-toggle"
class="btn btn-ghost btn-icon"
aria-label="Passwort anzeigen"
style="position:absolute;right:var(--space-1);top:50%;transform:translateY(-50%);
color:var(--c-text-muted);padding:var(--space-2)">
<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#eye"></use></svg>
</button>
</div>
</div> </div>
<button type="submit" class="btn btn-primary w-full" style="margin-top:var(--space-2)"> <button type="submit" class="btn btn-primary w-full" style="margin-top:var(--space-2)">
Anmelden Anmelden
@ -515,9 +525,18 @@ window.Page_settings = (() => {
</div> </div>
<div class="form-group"> <div class="form-group">
<label class="form-label">Passwort</label> <label class="form-label">Passwort</label>
<input class="form-control" type="password" name="password" <div style="position:relative">
<input class="form-control" type="password" name="password" id="register-pw"
placeholder="Mindestens 8 Zeichen" autocomplete="new-password" placeholder="Mindestens 8 Zeichen" autocomplete="new-password"
minlength="8" required> minlength="8" required style="padding-right:var(--space-10)">
<button type="button" id="register-pw-toggle"
class="btn btn-ghost btn-icon"
aria-label="Passwort anzeigen"
style="position:absolute;right:var(--space-1);top:50%;transform:translateY(-50%);
color:var(--c-text-muted);padding:var(--space-2)">
<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#eye"></use></svg>
</button>
</div>
</div> </div>
<button type="submit" class="btn btn-primary w-full" style="margin-top:var(--space-2)"> <button type="submit" class="btn btn-primary w-full" style="margin-top:var(--space-2)">
Konto erstellen Konto erstellen
@ -531,7 +550,21 @@ window.Page_settings = (() => {
`; `;
} }
function _bindPwToggle(inputId, btnId) {
const input = document.getElementById(inputId);
const btn = document.getElementById(btnId);
if (!input || !btn) return;
btn.addEventListener('click', () => {
const visible = input.type === 'text';
input.type = visible ? 'password' : 'text';
btn.setAttribute('aria-label', visible ? 'Passwort anzeigen' : 'Passwort verbergen');
btn.querySelector('use').setAttribute('href',
visible ? '/icons/phosphor.svg#eye' : '/icons/phosphor.svg#eye-slash');
});
}
function _bindLoginForm() { function _bindLoginForm() {
_bindPwToggle('login-pw', 'login-pw-toggle');
document.getElementById('auth-form')?.addEventListener('submit', async e => { document.getElementById('auth-form')?.addEventListener('submit', async e => {
e.preventDefault(); e.preventDefault();
const btn = e.target.querySelector('[type="submit"]'); const btn = e.target.querySelector('[type="submit"]');
@ -569,6 +602,7 @@ window.Page_settings = (() => {
} }
function _bindRegisterForm() { function _bindRegisterForm() {
_bindPwToggle('register-pw', 'register-pw-toggle');
document.getElementById('auth-form')?.addEventListener('submit', async e => { document.getElementById('auth-form')?.addEventListener('submit', async e => {
e.preventDefault(); e.preventDefault();
const btn = e.target.querySelector('[type="submit"]'); const btn = e.target.querySelector('[type="submit"]');

2
backend/static/sw.js
View file

@ -3,7 +3,7 @@
Offline-Cache + Push Notifications + Tile-Cache Offline-Cache + Push Notifications + Tile-Cache
============================================================ */ ============================================================ */
const CACHE_VERSION = 'by-v198'; const CACHE_VERSION = 'by-v199';
const CACHE_STATIC = `${CACHE_VERSION}-static`; const CACHE_STATIC = `${CACHE_VERSION}-static`;
const CACHE_TILES = 'ban-yaro-tiles-v1'; // bleibt über SW-Updates erhalten const CACHE_TILES = 'ban-yaro-tiles-v1'; // bleibt über SW-Updates erhalten