From 8fdca1f211b4aec0918651d37e5083be3ee797de Mon Sep 17 00:00:00 2001
From: rene <mail@motocamp.de>
Date: Sat, 18 Apr 2026 13:34:21 +0200
Subject: [PATCH] Feature: Passwort-Sichtbarkeits-Toggle in Login- und
 Registrier-Formular

Eye/Eye-Slash-Button neben Passwort-Felder (Phosphor Icons), schaltet type password/text um. SW by-v199, APP_VER 167.
---
 backend/static/js/app.js            |  2 +-
 backend/static/js/pages/settings.js | 44 +++++++++++++++++++++++++----
 backend/static/sw.js                |  2 +-
 3 files changed, 41 insertions(+), 7 deletions(-)

diff --git a/backend/static/js/app.js b/backend/static/js/app.js
index c5f5ce9..6e844cd 100644
--- a/backend/static/js/app.js
+++ b/backend/static/js/app.js
@@ -3,7 +3,7 @@
    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 = (() => {
 
diff --git a/backend/static/js/pages/settings.js b/backend/static/js/pages/settings.js
index a865984..8478bca 100644
--- a/backend/static/js/pages/settings.js
+++ b/backend/static/js/pages/settings.js
@@ -490,8 +490,18 @@ window.Page_settings = (() => {
         </div>
         <div class="form-group">
           <label class="form-label">Passwort</label>
-          <input class="form-control" type="password" name="password"
-                 placeholder="Passwort" autocomplete="current-password" required>
+          <div style="position:relative">
+            <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>
         <button type="submit" class="btn btn-primary w-full" style="margin-top:var(--space-2)">
           Anmelden
@@ -515,9 +525,18 @@ window.Page_settings = (() => {
         </div>
         <div class="form-group">
           <label class="form-label">Passwort</label>
-          <input class="form-control" type="password" name="password"
-                 placeholder="Mindestens 8 Zeichen" autocomplete="new-password"
-                 minlength="8" required>
+          <div style="position:relative">
+            <input class="form-control" type="password" name="password" id="register-pw"
+                   placeholder="Mindestens 8 Zeichen" autocomplete="new-password"
+                   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>
         <button type="submit" class="btn btn-primary w-full" style="margin-top:var(--space-2)">
           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() {
+    _bindPwToggle('login-pw', 'login-pw-toggle');
     document.getElementById('auth-form')?.addEventListener('submit', async e => {
       e.preventDefault();
       const btn = e.target.querySelector('[type="submit"]');
@@ -569,6 +602,7 @@ window.Page_settings = (() => {
   }
 
   function _bindRegisterForm() {
+    _bindPwToggle('register-pw', 'register-pw-toggle');
     document.getElementById('auth-form')?.addEventListener('submit', async e => {
       e.preventDefault();
       const btn = e.target.querySelector('[type="submit"]');
diff --git a/backend/static/sw.js b/backend/static/sw.js
index 12369fd..f0234d9 100644
--- a/backend/static/sw.js
+++ b/backend/static/sw.js
@@ -3,7 +3,7 @@
    Offline-Cache + Push Notifications + Tile-Cache
    ============================================================ */
 
-const CACHE_VERSION = 'by-v198';
+const CACHE_VERSION = 'by-v199';
 const CACHE_STATIC  = `${CACHE_VERSION}-static`;
 const CACHE_TILES   = 'ban-yaro-tiles-v1';  // bleibt über SW-Updates erhalten