Hacker-Software/docker-repo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Auge zum Ein-/Ausblenden bei Kennwort und Access Token

Browse Source 
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>
This commit is contained in:
duffyduck
2026-06-09 11:30:37 +02:00
parent 4a11aabdf3
commit cd9e33bdfe
2 changed files with 36 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
auth-app/templates/base.html
+4
View File
@@ -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
+32 -3
View File
@@ -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"
placeholder="Bearer-Token der Quell-Registry">
{{ pw_field(prefix ~ 'src_token', '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');