Auge zum Ein-/Ausblenden bei Kennwort und Access Token

Kennwort- und Access-Token-Feld haben jetzt ein Augen-Symbol, mit dem
die Eingabe sichtbar gemacht und kontrolliert werden kann. Umgesetzt
ueber ein wiederverwendbares pw_field-Macro (gilt fuer Einzel- und
Bulk-Formular).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

auth-app/templates/base.html

@@ -25,6 +25,10 @@
         input:focus { outline: none; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,0.1); }
         textarea { padding: 0.5rem 0.75rem; border: 1px solid #d1d5db; border-radius: 6px; font-size: 0.85rem; width: 100%; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; resize: vertical; }
         textarea:focus { outline: none; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,0.1); }
+        .pw-wrap { position: relative; }
+        .pw-wrap input { padding-right: 2.5rem; }
+        .pw-toggle { position: absolute; top: 50%; right: 0.5rem; transform: translateY(-50%); background: none; border: none; padding: 0.25rem; cursor: pointer; color: #6b7280; display: flex; align-items: center; }
+        .pw-toggle:hover { color: #374151; }
         .btn { padding: 0.5rem 1rem; border: none; border-radius: 6px; font-size: 0.85rem; cursor: pointer; font-weight: 500; }
         .btn-primary { background: #2563eb; color: #fff; }
         .btn-primary:hover { background: #1d4ed8; }

auth-app/templates/images.html

@@ -1,6 +1,27 @@
 {% extends "base.html" %}
 {% block title %}Images - Docker Registry{% endblock %}
 
+{# Passwort-Feld mit Auge zum Ein-/Ausblenden der Eingabe. #}
+{% macro pw_field(fid, ph='') %}
+    <div class="pw-wrap">
+        <input type="password" id="{{ fid }}" name="{{ fid }}" autocomplete="new-password"
+               {% if ph %}placeholder="{{ ph }}"{% endif %}>
+        <button type="button" class="pw-toggle" onclick="togglePw('{{ fid }}', this)"
+                title="Anzeigen/Verbergen" aria-label="Eingabe anzeigen oder verbergen">
+            <svg class="eye-on" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+                 stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
+                <circle cx="12" cy="12" r="3"></circle>
+            </svg>
+            <svg class="eye-off" style="display: none;" width="16" height="16" viewBox="0 0 24 24" fill="none"
+                 stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"></path>
+                <line x1="1" y1="1" x2="23" y2="23"></line>
+            </svg>
+        </button>
+    </div>
+{% endmacro %}
+
 {# Wiederverwendbarer Zugangsdaten-Block (Benutzername/Kennwort ODER Access Token).
    prefix unterscheidet die Felder von Einzel- und Bulk-Formular. #}
 {% macro cred_fields(prefix) %}
@@ -22,7 +43,7 @@
             </div>
             <div class="form-group">
                 <label for="{{ prefix }}src_password">Kennwort</label>
-                <input type="password" id="{{ prefix }}src_password" name="{{ prefix }}src_password" autocomplete="new-password">
+                {{ pw_field(prefix ~ 'src_password') }}
             </div>
         </div>
     </div>
@@ -36,8 +57,7 @@
     <div id="{{ prefix }}token_box" style="display: none;">
         <div class="form-group" style="margin-top: 0.5rem;">
             <label for="{{ prefix }}src_token">Access Token</label>
-            <input type="password" id="{{ prefix }}src_token" name="{{ prefix }}src_token" autocomplete="new-password"
+            {{ pw_field(prefix ~ 'src_token', 'Bearer-Token der Quell-Registry') }}
-                   placeholder="Bearer-Token der Quell-Registry">
         </div>
     </div>
 {% endmacro %}
@@ -216,6 +236,15 @@
         return true;
     }
 
+    // Auge: Eingabe ein-/ausblenden.
+    function togglePw(id, btn) {
+        var inp = document.getElementById(id);
+        var show = inp.type === 'password';
+        inp.type = show ? 'text' : 'password';
+        btn.querySelector('.eye-on').style.display = show ? 'none' : '';
+        btn.querySelector('.eye-off').style.display = show ? '' : 'none';
+    }
+
     // Benutzername/Kennwort und Access Token schliessen sich gegenseitig aus.
     function toggleCredMode(prefix, mode) {
         var creds = document.getElementById(prefix + 'use_creds');