logut

.gitea/workflows/deploy.yml

@@ -56,6 +56,8 @@ jobs:
             --exclude=".ci_config_deploy/***" \
             --exclude="docs/***" \
             --exclude="temp/***" \
+            --exclude="CopyToKeycloak/***" \
+            --exclude="Umsetzungsanweisung/***
             --exclude="Umsetzungsanweisung/***" \
             --exclude="config/staging/***" \
             --exclude="config/prod/***" \
@@ -137,6 +139,7 @@ jobs:
             --exclude=".ci_config_deploy/***" \
             --exclude="docs/***" \
             --exclude="temp/***" \
+            --exclude="CopyToKeycloak/***" \
             --exclude="Umsetzungsanweisung/***" \
             --exclude="config/staging/***" \
             --exclude="config/prod/***" \

CopyToKeycloak/README.md

@@ -0,0 +1,24 @@
+# CopyToKeycloak
+
+Dieser Ordner enthaelt ein kopierbares Keycloak-Login-Theme fuer `desktop.kusche.berlin`.
+
+## Inhalt
+
+- `theme/kusche-desktop/login/theme.properties`
+- `theme/kusche-desktop/login/login.ftl`
+- `theme/kusche-desktop/login/resources/css/desktop-kusche.css`
+- `theme/kusche-desktop/login/resources/img/desktop-glow.svg`
+- `theme/kusche-desktop/login/messages/messages_de.properties`
+- `theme/kusche-desktop/login/messages/messages_en.properties`
+- `WAS_DU_TUN_MUSST.md`
+
+## Zweck
+
+Dieses Theme ist fuer den Client `desktop-kusche-berlin` gedacht.
+
+Damit gilt die angepasste Login-Seite nur fuer:
+
+- `desktop.kusche.berlin`
+- `staging.desktop.kusche.berlin`
+
+und nicht automatisch fuer andere Clients im selben Realm.

CopyToKeycloak/WAS_DU_TUN_MUSST.md

@@ -0,0 +1,92 @@
+# Was Du Tun Musst
+
+## 1. Theme nach Keycloak kopieren
+
+Den Ordner
+
+- `CopyToKeycloak/theme/kusche-desktop`
+
+in das Keycloak-Themes-Verzeichnis kopieren.
+
+Typische Ziele:
+
+- Container: `/opt/keycloak/themes/`
+- VM/Bare Metal: `<KEYCLOAK_HOME>/themes/`
+
+Danach muss dort existieren:
+
+- `/opt/keycloak/themes/kusche-desktop/login/theme.properties`
+
+## 2. Keycloak neu laden
+
+Wenn du in Entwicklung arbeitest:
+
+- Keycloak neu starten
+
+Wenn du in Produktion Theme-Caches aktiv hast:
+
+1. Keycloak stoppen oder neu starten
+2. falls noetig Theme-Cache loeschen:
+   - `data/tmp/kc-gzip-cache`
+
+## 3. Theme nur fuer den Desktop-Client setzen
+
+In Keycloak:
+
+1. Realm `KuscheBerlin` oeffnen
+2. Client `desktop-kusche-berlin` oeffnen
+3. Die Login-Theme-Override fuer den Client auf `kusche-desktop` setzen
+
+Wichtig:
+
+- Das Theme soll **nicht** pauschal als Realm-Login-Theme fuer alle Clients gesetzt werden, wenn andere Clients das Standard-Keycloak-Login behalten sollen.
+
+Falls deine Keycloak-Version im Client-UI keine direkte Login-Theme-Auswahl anzeigt:
+
+- pruefen, ob die Client-spezifische Login-Theme-Option in den Client-Einstellungen / Advanced Settings vorhanden ist
+- falls nicht vorhanden, bleibt als saubere Alternative nur:
+  - eigener Realm fuer Desktop
+  - oder spaeter ein Theme Selector SPI
+
+## 4. Testen
+
+Danach testen:
+
+1. `https://staging.desktop.kusche.berlin`
+2. `https://desktop.kusche.berlin`
+
+Erwartung:
+
+- fuer den Client `desktop-kusche-berlin` erscheint das neue Desktop-Login-Theme
+- nach erfolgreichem Login geht es zur Desktop-Shell zurueck
+
+## 5. Falls das Theme nicht erscheint
+
+Dann diese Punkte pruefen:
+
+- Theme-Ordner liegt wirklich im Keycloak-`themes/`-Verzeichnis
+- Verzeichnisname ist exakt `kusche-desktop`
+- `theme.properties` liegt unter `kusche-desktop/login/`
+- Keycloak wurde nach dem Kopieren neu gestartet
+- Cache wurde geleert
+- wirklich der Client `desktop-kusche-berlin` wird verwendet
+
+## 6. Welche Datei du spaeter bei Aenderungen ersetzt
+
+Wenn du nur Styling aendern willst, reicht meist:
+
+- `theme/kusche-desktop/login/resources/css/desktop-kusche.css`
+
+Wenn du die Struktur aendern willst:
+
+- `theme/kusche-desktop/login/login.ftl`
+
+## 7. Was ich bewusst nicht fuer dich serverseitig tue
+
+Diese Schritte musst du selbst auf dem Keycloak-System machen:
+
+- Dateien nach Keycloak kopieren
+- Keycloak neu starten
+- Client-Theme-Override setzen
+
+Das Projekt hier erzeugt nur den fertigen Theme-Ordner.

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

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

CopyToKeycloak/theme/kusche-desktop/login/messages/messages_de.properties

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

CopyToKeycloak/theme/kusche-desktop/login/messages/messages_en.properties

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

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

@@ -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;
+    }
+}

CopyToKeycloak/theme/kusche-desktop/login/resources/img/desktop-glow.svg

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

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

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

partials/desktop/shell.php

@@ -110,8 +110,11 @@ $renderStartIcon = static function (array $profile): string {
                 <div class="taskbar-apps" id="taskbar-apps"></div>
                 <div class="tray">
                     <?php foreach ($desktopPayload['tray'] as $trayItem): ?>
-                        <span class="tray-pill"><?= htmlspecialchars($trayItem['label'], ENT_QUOTES) ?></span>
+                        <span class="tray-pill" data-tray-id="<?= htmlspecialchars((string) $trayItem['id'], ENT_QUOTES) ?>"><?= htmlspecialchars($trayItem['label'], ENT_QUOTES) ?></span>
                     <?php endforeach; ?>
+                    <?php if (($desktopPayload['session']['authenticated'] ?? false) === true && !empty($desktopPayload['session']['logout_url'])): ?>
+                        <a class="tray-action" href="<?= htmlspecialchars((string) $desktopPayload['session']['logout_url'], ENT_QUOTES) ?>">Logout</a>
+                    <?php endif; ?>
                     <div class="tray-skins" id="tray-skins"></div>
                     <time id="clock"></time>
                 </div>

public/assets/desktop/desktop.css

@@ -691,6 +691,24 @@ h1 {
     font-size: 13px;
 }
 
+.tray-action {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 8px 12px;
+    border-radius: 999px;
+    background: rgba(255, 255, 255, 0.08);
+    color: inherit;
+    font-size: 13px;
+    text-decoration: none;
+    transition: background-color 140ms ease, transform 140ms ease;
+}
+
+.tray-action:hover {
+    background: rgba(255, 255, 255, 0.16);
+    transform: translateY(-1px);
+}
+
 .window-content p:last-child {
     margin-bottom: 0;
 }

public/assets/desktop/desktop.js

@@ -46,7 +46,7 @@ if (payloadNode) {
     };
 
     const updateSessionDisplay = () => {
-        const accountNode = document.querySelector('.tray-pill:last-of-type');
+        const accountNode = document.querySelector('.tray-pill[data-tray-id="account"]');
 
         if (!accountNode) {
             return;

src/App/App.php

@@ -23,6 +23,8 @@ final class App
      */
     public function desktopPayload(): array
     {
+        $keycloakConfig = ConfigLoader::load($this->projectRoot, 'keycloak');
+        $auth = new KeycloakAuth($keycloakConfig);
         $registry = new AppRegistry($this->projectRoot . '/config/apps.php');
         $widgetRegistry = new WidgetRegistry($this->projectRoot . '/config/widgets.php');
         $skins = SkinResolver::all();
@@ -70,6 +72,8 @@ final class App
             'tray' => DesktopState::trayItems(),
             'session' => [
                 'display_name' => $displayName,
+                'authenticated' => $isAuthenticated,
+                'logout_url' => $isAuthenticated && $auth->isConfigured() ? '/auth/logout' : null,
             ],
             'menu' => [
                 'quick_actions' => DesktopState::quickActions(),