diff --git a/auth-app/templates/base.html b/auth-app/templates/base.html index dcdd844..380d238 100644 --- a/auth-app/templates/base.html +++ b/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; } diff --git a/auth-app/templates/images.html b/auth-app/templates/images.html index 8b10390..bdc2ce5 100644 --- a/auth-app/templates/images.html +++ b/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='') %} +
+ + +
+{% 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 @@
- + {{ pw_field(prefix ~ 'src_password') }}
@@ -36,8 +57,7 @@ {% 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');