diff --git a/CopyToKeycloak/theme/kusche-desktop/login/login.ftl b/CopyToKeycloak/theme/kusche-desktop/login/login.ftl index 58da9fd1..507c46ae 100644 --- a/CopyToKeycloak/theme/kusche-desktop/login/login.ftl +++ b/CopyToKeycloak/theme/kusche-desktop/login/login.ftl @@ -48,11 +48,9 @@ placeholder="Passwort eingeben" /> + data-label-show="${msg('showPassword')}" data-label-hide="${msg('hidePassword')}"> <#if usernameHidden?? && messagesPerField.existsError('username','password')> @@ -67,9 +65,9 @@ <#if !usernameHidden??> @@ -77,18 +75,18 @@
- +
value="${auth.selectedCredential}"/> - +
- +
diff --git a/CopyToKeycloak/theme/kusche-desktop/login/resources/css/desktop-kusche.css b/CopyToKeycloak/theme/kusche-desktop/login/resources/css/desktop-kusche.css index 5df0bd18..099353c6 100644 --- a/CopyToKeycloak/theme/kusche-desktop/login/resources/css/desktop-kusche.css +++ b/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 { diff --git a/CopyToKeycloak/theme/kusche-desktop/login/resources/img/eye-closed.png b/CopyToKeycloak/theme/kusche-desktop/login/resources/img/eye-closed.png new file mode 100644 index 00000000..543bd67e Binary files /dev/null and b/CopyToKeycloak/theme/kusche-desktop/login/resources/img/eye-closed.png differ diff --git a/CopyToKeycloak/theme/kusche-desktop/login/resources/img/eye-open.png b/CopyToKeycloak/theme/kusche-desktop/login/resources/img/eye-open.png new file mode 100644 index 00000000..92cccbb7 Binary files /dev/null and b/CopyToKeycloak/theme/kusche-desktop/login/resources/img/eye-open.png differ diff --git a/CopyToKeycloak/theme/kusche-desktop/login/resources/js/passwordVisibility.js b/CopyToKeycloak/theme/kusche-desktop/login/resources/js/passwordVisibility.js new file mode 100644 index 00000000..91d95b5c --- /dev/null +++ b/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); + }); + }); +}()); diff --git a/public/assets/auth/icons/eye-closed.png b/public/assets/auth/icons/eye-closed.png new file mode 100644 index 00000000..543bd67e Binary files /dev/null and b/public/assets/auth/icons/eye-closed.png differ diff --git a/public/assets/auth/icons/eye-open.png b/public/assets/auth/icons/eye-open.png new file mode 100644 index 00000000..92cccbb7 Binary files /dev/null and b/public/assets/auth/icons/eye-open.png differ diff --git a/public/assets/auth/login.css b/public/assets/auth/login.css index 459d56b8..ccda60ba 100644 --- a/public/assets/auth/login.css +++ b/public/assets/auth/login.css @@ -212,43 +212,24 @@ body { display: inline-flex; align-items: center; justify-content: center; - width: 34px; - height: 34px; - border: 1px solid rgba(15, 23, 42, 0.16); + width: 28px; + height: 28px; + border: 0; border-radius: 999px; - background: rgba(15, 23, 42, 0.78); - color: rgba(255, 255, 255, 0.96); - box-shadow: 0 8px 18px rgba(15, 23, 42, 0.18); + background: center center / 22px 22px no-repeat url("/assets/auth/icons/eye-open.png"); + box-shadow: none; cursor: pointer; - transition: background-color 160ms ease, transform 160ms ease, box-shadow 160ms ease; + transition: transform 160ms ease, opacity 160ms ease; + opacity: 0.92; } .login-password-toggle:hover { - background: rgba(15, 23, 42, 0.92); - transform: translateY(-50%) scale(1.03); + transform: translateY(-50%) scale(1.04); + opacity: 1; } -.login-password-toggle:focus-visible { - outline: 2px solid rgba(14, 165, 233, 0.55); - outline-offset: 2px; -} - -.login-password-icon { - width: 17px; - height: 17px; - display: block; -} - -.login-password-icon-hide { - display: none; -} - -.login-password-toggle.is-visible .login-password-icon-show { - display: none; -} - -.login-password-toggle.is-visible .login-password-icon-hide { - display: block; +.login-password-toggle.is-visible { + background-image: url("/assets/auth/icons/eye-closed.png"); } .login-field textarea { diff --git a/public/auth/inactive/index.php b/public/auth/inactive/index.php index 54d52c4b..4c3c7a06 100644 --- a/public/auth/inactive/index.php +++ b/public/auth/inactive/index.php @@ -27,7 +27,7 @@ if ($message === '') {
- Zum Login + Zum Login
diff --git a/public/auth/logout/index.php b/public/auth/logout/index.php index 094edc27..fa8aef1d 100644 --- a/public/auth/logout/index.php +++ b/public/auth/logout/index.php @@ -13,7 +13,7 @@ $projectRoot = dirname(__DIR__, 3); $auth = new KeycloakAuth(ConfigLoader::load($projectRoot, 'keycloak')); $logoutUrl = null; -if ($auth->isConfigured() && $auth->isAuthenticated()) { +if ($auth->isConfigured()) { $logoutUrl = $auth->logoutUrl(); } diff --git a/public/auth/pending/index.php b/public/auth/pending/index.php index 5e546511..3dc88a27 100644 --- a/public/auth/pending/index.php +++ b/public/auth/pending/index.php @@ -64,7 +64,7 @@ $view = $statusMap[$status] ?? [
- Zum Login + Zum Login
diff --git a/public/auth/register/index.php b/public/auth/register/index.php index b8c1c008..e8395ffc 100644 --- a/public/auth/register/index.php +++ b/public/auth/register/index.php @@ -144,17 +144,7 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') { Passwort
- +
@@ -162,17 +152,7 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') { Passwort wiederholen
- +