adasd

public/assets/auth/login.css

@@ -144,6 +144,16 @@ body {
     gap: 16px;
 }
 
+.login-honeypot {
+    position: absolute;
+    left: -9999px;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    opacity: 0;
+    pointer-events: none;
+}
+
 .login-form-grid {
     display: grid;
     gap: 14px;
@@ -175,6 +185,31 @@ body {
     outline: none;
 }
 
+.login-password-row {
+    position: relative;
+}
+
+.login-password-row input {
+    padding-right: 56px;
+}
+
+.login-password-toggle {
+    position: absolute;
+    top: 50%;
+    right: 10px;
+    transform: translateY(-50%);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 36px;
+    height: 36px;
+    border: 0;
+    border-radius: 999px;
+    background: transparent;
+    color: rgba(15, 23, 42, 0.56);
+    cursor: pointer;
+}
+
 .login-field textarea {
     min-height: 120px;
     resize: vertical;

public/assets/auth/password-visibility.js

@@ -0,0 +1,18 @@
+document.addEventListener('DOMContentLoaded', () => {
+    const rows = document.querySelectorAll('.login-password-row');
+
+    rows.forEach((row) => {
+        const input = row.querySelector('[data-password-field]');
+        const toggle = row.querySelector('[data-password-toggle]');
+
+        if (!(input instanceof HTMLInputElement) || !(toggle instanceof HTMLButtonElement)) {
+            return;
+        }
+
+        toggle.addEventListener('click', () => {
+            const isHidden = input.type === 'password';
+            input.type = isHidden ? 'text' : 'password';
+            toggle.setAttribute('aria-label', isHidden ? 'Passwort verbergen' : 'Passwort anzeigen');
+        });
+    });
+});