private/desktop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

adasd
All checks were successful
Deploy / deploy-staging (push) Successful in 23s
Details
Deploy / deploy-production (push) Has been skipped
Details

Browse Source
This commit is contained in:
Lars Gebhardt-Kusche
2026-06-15 23:38:30 +02:00
parent 2c3c84e66f
commit 84a367bdc9
12 changed files with 64 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
CopyToKeycloak/theme/kusche-desktop/login/login.ftl
View File

@@ -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>

20
CopyToKeycloak/theme/kusche-desktop/login/resources/css/desktop-kusche.css
View File

@@ -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 {

BIN
CopyToKeycloak/theme/kusche-desktop/login/resources/img/eye-closed.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.1 KiB

BIN
CopyToKeycloak/theme/kusche-desktop/login/resources/img/eye-open.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.0 KiB

26
CopyToKeycloak/theme/kusche-desktop/login/resources/js/passwordVisibility.js Normal file
View File

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

BIN
public/assets/auth/icons/eye-closed.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.1 KiB

BIN
public/assets/auth/icons/eye-open.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.0 KiB

41
public/assets/auth/login.css
View File

@@ -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 {

2
public/auth/inactive/index.php
View File

@@ -27,7 +27,7 @@ if ($message === '') {
</div>
<div class="login-actions">
<a class="login-button login-button-primary" href="/auth/keycloak">Zum Login</a>
<a class="login-button login-button-primary" href="/auth/logout">Zum Login</a>
</div>
</section>
</main>

2
public/auth/logout/index.php
View File

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

2
public/auth/pending/index.php
View File

@@ -64,7 +64,7 @@ $view = $statusMap[$status] ?? [
</div>
<div class="login-actions">
<a class="login-button login-button-primary" href="/auth/keycloak">Zum Login</a>
<a class="login-button login-button-primary" href="/auth/logout">Zum Login</a>
</div>
</section>
</main>

24
public/auth/register/index.php
View File

@@ -144,17 +144,7 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
<span>Passwort</span>
<div class="login-password-row">
<input type="password" name="password" value="<?= htmlspecialchars($form['password'], ENT_QUOTES) ?>" required data-password-field>
<button class="login-password-toggle" type="button" data-password-toggle aria-label="Passwort anzeigen">
<svg class="login-password-icon login-password-icon-show" viewBox="0 0 24 24" aria-hidden="true">
<path d="M2 12s3.6-6 10-6 10 6 10 6-3.6 6-10 6-10-6-10-6Z" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
<circle cx="12" cy="12" r="3" fill="none" stroke="currentColor" stroke-width="1.8"/>
</svg>
<svg class="login-password-icon login-password-icon-hide" viewBox="0 0 24 24" aria-hidden="true">
<path d="M3 3l18 18" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
<path d="M10.6 5.2A11 11 0 0 1 12 5c6.4 0 10 7 10 7a18.8 18.8 0 0 1-3.1 3.8M6.7 6.7C4 8.5 2 12 2 12a18.4 18.4 0 0 0 10 6 10.8 10.8 0 0 0 4.1-.8" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M9.9 9.9A3 3 0 0 0 14.1 14.1" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
</svg>
</button>
<button class="login-password-toggle" type="button" tabindex="-1" data-password-toggle aria-label="Passwort anzeigen"></button>
</div>
</label>
@@ -162,17 +152,7 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
<span>Passwort wiederholen</span>
<div class="login-password-row">
<input type="password" name="password_confirm" value="<?= htmlspecialchars($form['password_confirm'], ENT_QUOTES) ?>" required data-password-field>
<button class="login-password-toggle" type="button" data-password-toggle aria-label="Passwort anzeigen">
<svg class="login-password-icon login-password-icon-show" viewBox="0 0 24 24" aria-hidden="true">
<path d="M2 12s3.6-6 10-6 10 6 10 6-3.6 6-10 6-10-6-10-6Z" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
<circle cx="12" cy="12" r="3" fill="none" stroke="currentColor" stroke-width="1.8"/>
</svg>
<svg class="login-password-icon login-password-icon-hide" viewBox="0 0 24 24" aria-hidden="true">
<path d="M3 3l18 18" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
<path d="M10.6 5.2A11 11 0 0 1 12 5c6.4 0 10 7 10 7a18.8 18.8 0 0 1-3.1 3.8M6.7 6.7C4 8.5 2 12 2 12a18.4 18.4 0 0 0 10 6 10.8 10.8 0 0 0 4.1-.8" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M9.9 9.9A3 3 0 0 0 14.1 14.1" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
</svg>
</button>
<button class="login-password-toggle" type="button" tabindex="-1" data-password-toggle aria-label="Passwort anzeigen"></button>
</div>
</label>
</div>