adasd

CopyToKeycloak/theme/kusche-desktop/login/login.ftl

@@ -48,11 +48,9 @@
                                                placeholder="Passwort eingeben" />
 
                                         <button class="kb-password-toggle" type="button" aria-label="${msg("showPassword")}"
-                                                aria-controls="password" data-password-toggle tabindex="4"
+                                                aria-controls="password" data-password-toggle tabindex="-1"
                                                 data-icon-show="${properties.kcFormPasswordVisibilityIconShow!}" data-icon-hide="${properties.kcFormPasswordVisibilityIconHide!}"
-                                                data-label-show="${msg('showPassword')}" data-label-hide="${msg('hidePassword')}">
-                                            <span aria-hidden="true">◉</span>
-                                        </button>
+                                                data-label-show="${msg('showPassword')}" data-label-hide="${msg('hidePassword')}"></button>
                                     </div>
 
                                     <#if usernameHidden?? && messagesPerField.existsError('username','password')>
@@ -67,9 +65,9 @@
                                         <#if !usernameHidden??>
                                             <label class="kb-remember">
                                                 <#if login.rememberMe??>
-                                                    <input tabindex="5" id="rememberMe" name="rememberMe" type="checkbox" checked>
+                                                    <input tabindex="4" id="rememberMe" name="rememberMe" type="checkbox" checked>
                                                 <#else>
-                                                    <input tabindex="5" id="rememberMe" name="rememberMe" type="checkbox">
+                                                    <input tabindex="4" id="rememberMe" name="rememberMe" type="checkbox">
                                                 </#if>
                                                 <span>Angemeldet bleiben</span>
                                             </label>
@@ -77,18 +75,18 @@
                                     </div>
 
                                     <div class="kb-form-links">
-                                        <a tabindex="6" id="kb-forgot-password-link" href="#" hidden>Passwort vergessen?</a>
+                                        <a tabindex="5" id="kb-forgot-password-link" href="#" hidden>Passwort vergessen?</a>
                                     </div>
                                 </div>
 
                                 <div id="kc-form-buttons" class="kb-form-submit">
                                     <input type="hidden" id="id-hidden-input" name="credentialId" <#if auth.selectedCredential?has_content>value="${auth.selectedCredential}"</#if>/>
-                                    <input tabindex="7" class="kb-submit-button" name="login" id="kc-login" type="submit" value="Anmelden"/>
+                                    <input tabindex="6" class="kb-submit-button" name="login" id="kc-login" type="submit" value="Anmelden"/>
                                 </div>
 
                                 <div id="kc-registration-container" class="kb-registration">
                                     <div id="kc-registration">
-                                        <a class="kb-register-button" id="kb-register-button" tabindex="8" href="#" hidden>Neue Benutzer</a>
+                                        <a class="kb-register-button" id="kb-register-button" tabindex="7" href="#" hidden>Neue Benutzer</a>
                                     </div>
                                 </div>
                             </form>

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);
+        });
+    });
+}());