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

logut
Some checks failed
Deploy / deploy-staging (push) Failing after 48s
Details
Deploy / deploy-production (push) Has been skipped
Details

Browse Source
This commit is contained in:
Lars Gebhardt-Kusche
2026-06-09 00:37:25 +02:00
parent dc2fbbc496
commit a90fd62c8c
13 changed files with 488 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

140
CopyToKeycloak/theme/kusche-desktop/login/login.ftl Normal file
View File

@@ -0,0 +1,140 @@
<#import "template.ftl" as layout>
<#import "passkeys.ftl" as passkeys>
<@layout.registrationLayout displayMessage=!messagesPerField.existsError('username','password') displayInfo=realm.password && realm.registrationAllowed && !registrationDisabled??; section>
<#if section = "header">
${msg("loginAccountTitle")}
<#elseif section = "form">
<section class="kb-login-shell">
<div class="kb-login-ambient" aria-hidden="true"></div>
<div class="kb-login-panel">
<div class="kb-login-copy">
<p class="kb-login-kicker">Kusche.Berlin</p>
<h1 class="kb-login-title">${msg("kbDesktopLoginHeadline")}</h1>
<p class="kb-login-subtitle">${msg("kbDesktopLoginSubheadline")}</p>
</div>
<div id="kc-form" class="kb-login-form-shell">
<div id="kc-form-wrapper">
<#if realm.password>
<form id="kc-form-login" onsubmit="login.disabled = true; return true;" action="${url.loginAction}" method="post">
<#if !usernameHidden??>
<div class="${properties.kcFormGroupClass!}">
<label for="username" class="${properties.kcLabelClass!}">
<#if !realm.loginWithEmailAllowed>
${msg("username")}
<#elseif !realm.registrationEmailAsUsername>
${msg("usernameOrEmail")}
<#else>
${msg("email")}
</#if>
</label>
<input tabindex="2" id="username" class="${properties.kcInputClass!}" name="username" value="${(login.username!'')}" type="text"
autofocus autocomplete="${(enableWebAuthnConditionalUI?has_content)?then('username webauthn', 'username')}"
aria-invalid="<#if messagesPerField.existsError('username','password')>true</#if>"
dir="ltr" />
<#if messagesPerField.existsError('username','password')>
<span id="input-error" class="${properties.kcInputErrorMessageClass!}" aria-live="polite">
${kcSanitize(messagesPerField.getFirstError('username','password'))?no_esc}
</span>
</#if>
</div>
</#if>
<div class="${properties.kcFormGroupClass!}">
<label for="password" class="${properties.kcLabelClass!}">${msg("password")}</label>
<div class="${properties.kcInputGroup!}" dir="ltr">
<input tabindex="3" id="password" class="${properties.kcInputClass!}" name="password" type="password" autocomplete="current-password"
aria-invalid="<#if messagesPerField.existsError('username','password')>true</#if>" />
<button class="${properties.kcFormPasswordVisibilityButtonClass!}" type="button" aria-label="${msg("showPassword")}"
aria-controls="password" data-password-toggle tabindex="4"
data-icon-show="${properties.kcFormPasswordVisibilityIconShow!}" data-icon-hide="${properties.kcFormPasswordVisibilityIconHide!}"
data-label-show="${msg('showPassword')}" data-label-hide="${msg('hidePassword')}">
<i class="${properties.kcFormPasswordVisibilityIconShow!}" aria-hidden="true"></i>
</button>
</div>
<#if usernameHidden?? && messagesPerField.existsError('username','password')>
<span id="input-error" class="${properties.kcInputErrorMessageClass!}" aria-live="polite">
${kcSanitize(messagesPerField.getFirstError('username','password'))?no_esc}
</span>
</#if>
</div>
<div class="${properties.kcFormGroupClass!} ${properties.kcFormSettingClass!}">
<div id="kc-form-options">
<#if realm.rememberMe && !usernameHidden??>
<div class="checkbox">
<label>
<#if login.rememberMe??>
<input tabindex="5" id="rememberMe" name="rememberMe" type="checkbox" checked> ${msg("rememberMe")}
<#else>
<input tabindex="5" id="rememberMe" name="rememberMe" type="checkbox"> ${msg("rememberMe")}
</#if>
</label>
</div>
</#if>
</div>
<div class="${properties.kcFormOptionsWrapperClass!}">
<#if realm.resetPasswordAllowed>
<span><a tabindex="6" href="${url.loginResetCredentialsUrl}">${msg("doForgotPassword")}</a></span>
</#if>
</div>
</div>
<div id="kc-form-buttons" class="${properties.kcFormGroupClass!}">
<input type="hidden" id="id-hidden-input" name="credentialId" <#if auth.selectedCredential?has_content>value="${auth.selectedCredential}"</#if>/>
<input tabindex="7" class="${properties.kcButtonClass!} ${properties.kcButtonPrimaryClass!} ${properties.kcButtonBlockClass!} ${properties.kcButtonLargeClass!}" name="login" id="kc-login" type="submit" value="${msg("doLogIn")}"/>
</div>
</form>
</#if>
</div>
</div>
</div>
</section>
<@passkeys.conditionalUIData />
<script type="module" src="${url.resourcesPath}/js/passwordVisibility.js"></script>
<#elseif section = "info" >
<#if realm.password && realm.registrationAllowed && !registrationDisabled??>
<div id="kc-registration-container">
<div id="kc-registration">
<span>${msg("noAccount")} <a tabindex="8" href="${url.registrationUrl}">${msg("doRegister")}</a></span>
</div>
</div>
</#if>
<#elseif section = "socialProviders" >
<#if realm.password && social?? && social.providers?has_content>
<div id="kc-social-providers" class="${properties.kcFormSocialAccountSectionClass!}">
<hr/>
<h2>${msg("identity-provider-login-label")}</h2>
<ul class="${properties.kcFormSocialAccountListClass!} <#if social.providers?size gt 3>${properties.kcFormSocialAccountListGridClass!}</#if>">
<#list social.providers as p>
<li>
<a data-once-link data-disabled-class="${properties.kcFormSocialAccountListButtonDisabledClass!}" id="social-${p.alias}"
class="${properties.kcFormSocialAccountListButtonClass!} <#if social.providers?size gt 3>${properties.kcFormSocialAccountGridItem!}</#if>"
type="button" href="${p.loginUrl}">
<#if p.iconClasses?has_content>
<i class="${properties.kcCommonLogoIdP!} ${p.iconClasses!}" aria-hidden="true"></i>
<span class="${properties.kcFormSocialAccountNameClass!} kc-social-icon-text">${p.displayName!}</span>
<#else>
<span class="${properties.kcFormSocialAccountNameClass!}">${p.displayName!}</span>
</#if>
</a>
</li>
</#list>
</ul>
</div>
</#if>
</#if>
</@layout.registrationLayout>

2
CopyToKeycloak/theme/kusche-desktop/login/messages/messages_de.properties Normal file
View File

@@ -0,0 +1,2 @@
kbDesktopLoginHeadline=Desktop Login
kbDesktopLoginSubheadline=Geschuetzter Zugang zur Desktop-Shell und kuenftigen Modulen.

2
CopyToKeycloak/theme/kusche-desktop/login/messages/messages_en.properties Normal file
View File

@@ -0,0 +1,2 @@
kbDesktopLoginHeadline=Desktop Login
kbDesktopLoginSubheadline=Protected access to the desktop shell and upcoming modules.

179
CopyToKeycloak/theme/kusche-desktop/login/resources/css/desktop-kusche.css Normal file
View File

@@ -0,0 +1,179 @@
html,
body {
min-height: 100%;
}
body {
background:
radial-gradient(circle at top, rgba(255, 221, 177, 0.30), transparent 26%),
radial-gradient(circle at 80% 18%, rgba(132, 216, 166, 0.18), transparent 20%),
linear-gradient(145deg, #101827 0%, #18253d 52%, #0f172a 100%) !important;
color: #f8fafc;
}
#kc-header-wrapper,
#kc-header,
.login-pf-header,
#kc-page-title {
display: none !important;
}
#kc-content,
#kc-content-wrapper,
#kc-locale {
position: relative;
z-index: 2;
}
#kc-content-wrapper {
padding-top: 48px;
}
#kc-form-login .pf-v5-c-form__label-text,
#kc-form-login label,
#kc-form-options,
#kc-form-options a,
#kc-registration,
#kc-registration a,
#kc-social-providers h2,
#kc-social-providers a {
color: #e2e8f0 !important;
}
.kb-login-shell {
position: relative;
display: grid;
place-items: center;
min-height: calc(100vh - 80px);
padding: 24px;
}
.kb-login-ambient {
position: absolute;
inset: 0;
background:
radial-gradient(circle at 50% 10%, rgba(255, 255, 255, 0.12), transparent 30%),
url("../img/desktop-glow.svg") center/cover no-repeat;
opacity: 0.9;
pointer-events: none;
}
.kb-login-panel {
position: relative;
z-index: 1;
display: grid;
gap: 22px;
width: min(540px, 100%);
padding: 28px;
border-radius: 28px;
background: rgba(15, 23, 42, 0.62);
border: 1px solid rgba(255, 255, 255, 0.12);
box-shadow: 0 24px 80px rgba(2, 6, 23, 0.42);
backdrop-filter: blur(24px);
}
.kb-login-copy {
display: grid;
gap: 12px;
}
.kb-login-kicker {
margin: 0;
font-size: 12px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: #cbd5e1;
}
.kb-login-title {
margin: 0;
font-size: clamp(30px, 4vw, 40px);
line-height: 1.04;
color: #f8fafc;
}
.kb-login-subtitle {
margin: 0;
color: #dbe5f1;
line-height: 1.55;
}
.kb-login-form-shell {
margin: 0;
}
#kc-form-wrapper {
padding: 0 !important;
}
#kc-form-login input[type="text"],
#kc-form-login input[type="password"] {
min-height: 48px;
border-radius: 14px !important;
border: 1px solid rgba(255, 255, 255, 0.12) !important;
background: rgba(255, 255, 255, 0.08) !important;
color: #f8fafc !important;
box-shadow: none !important;
}
#kc-form-login input::placeholder {
color: rgba(226, 232, 240, 0.72);
}
#kc-form-login .pf-v5-c-button,
#kc-login {
min-height: 50px;
border: 0 !important;
border-radius: 14px !important;
background: linear-gradient(180deg, #a7f3d0, #6ee7b7) !important;
color: #082032 !important;
font-weight: 700;
box-shadow: none !important;
}
#kc-form-login .pf-v5-c-button:hover,
#kc-login:hover {
filter: brightness(1.03);
}
#kc-form-options {
padding-top: 4px;
}
#kc-form-options .checkbox label {
display: inline-flex;
align-items: center;
gap: 8px;
}
#kc-social-providers {
margin-top: 10px;
}
#kc-social-providers hr {
border-color: rgba(255, 255, 255, 0.12);
}
#kc-registration {
margin-top: 18px;
}
.pf-v5-c-alert {
border-radius: 14px !important;
}
@media (max-width: 640px) {
#kc-content-wrapper {
padding-top: 20px;
}
.kb-login-shell {
min-height: auto;
padding: 16px;
}
.kb-login-panel {
padding: 22px 18px;
border-radius: 22px;
}
}

15
CopyToKeycloak/theme/kusche-desktop/login/resources/img/desktop-glow.svg Normal file
View File

@@ -0,0 +1,15 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 900" fill="none">
<defs>
<radialGradient id="a" cx="0" cy="0" r="1" gradientTransform="translate(720 180) rotate(90) scale(280 560)" gradientUnits="userSpaceOnUse">
<stop stop-color="#FFE7BA" stop-opacity=".9"/>
<stop offset=".45" stop-color="#8AD8A6" stop-opacity=".35"/>
<stop offset="1" stop-color="#0F172A" stop-opacity="0"/>
</radialGradient>
<radialGradient id="b" cx="0" cy="0" r="1" gradientTransform="translate(1160 220) rotate(90) scale(220 360)" gradientUnits="userSpaceOnUse">
<stop stop-color="#7DD3FC" stop-opacity=".22"/>
<stop offset="1" stop-color="#7DD3FC" stop-opacity="0"/>
</radialGradient>
</defs>
<rect width="1440" height="900" fill="url(#a)"/>
<rect width="1440" height="900" fill="url(#b)"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 837 B

4
CopyToKeycloak/theme/kusche-desktop/login/theme.properties Normal file
View File

@@ -0,0 +1,4 @@
parent=keycloak
import=common/keycloak
styles=css/desktop-kusche.css
locales=de,en