adasd

CopyToKeycloak/theme/kusche-desktop/login/resources/css/desktop-kusche.css

@@ -208,7 +208,7 @@ body > main {
 }
 
 .kb-text-input-password {
-    padding-right: 56px;
+    padding-right: 64px;
 }
 
 .kb-password-toggle {
@@ -219,13 +219,23 @@ body > main {
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    width: 36px;
-    height: 36px;
+    width: 28px;
+    height: 28px;
     border: 0;
     border-radius: 999px;
-    background: transparent;
-    color: rgba(248, 250, 252, 0.88);
+    background: center center / 22px 22px no-repeat url("../img/eye-open.png");
     cursor: pointer;
+    opacity: 0.92;
+    transition: transform 160ms ease, opacity 160ms ease;
+}
+
+.kb-password-toggle:hover {
+    transform: translateY(-50%) scale(1.04);
+    opacity: 1;
+}
+
+.kb-password-toggle.is-visible {
+    background-image: url("../img/eye-closed.png");
 }
 
 .kb-input-error {

CopyToKeycloak/theme/kusche-desktop/login/resources/js/passwordVisibility.js

@@ -0,0 +1,26 @@
+(function () {
+    const toggles = document.querySelectorAll('[data-password-toggle]');
+
+    toggles.forEach((toggle) => {
+        if (!(toggle instanceof HTMLButtonElement)) {
+            return;
+        }
+
+        const controlId = toggle.getAttribute('aria-controls');
+        const input = controlId ? document.getElementById(controlId) : toggle.parentElement?.querySelector('input[type="password"], input[type="text"]');
+
+        if (!(input instanceof HTMLInputElement)) {
+            return;
+        }
+
+        const showLabel = toggle.getAttribute('data-label-show') || 'Passwort anzeigen';
+        const hideLabel = toggle.getAttribute('data-label-hide') || 'Passwort verbergen';
+
+        toggle.addEventListener('click', () => {
+            const isHidden = input.type === 'password';
+            input.type = isHidden ? 'text' : 'password';
+            toggle.classList.toggle('is-visible', isHidden);
+            toggle.setAttribute('aria-label', isHidden ? hideLabel : showLabel);
+        });
+    });
+}());