preparing for keycloak authentication

2026-06-29 11:31:53 +02:00
parent cecaf26c85
commit 9bd9d9653c
8 changed files with 540 additions and 82 deletions
--- a/website/css/style.css
+++ b/website/css/style.css
@ -1091,7 +1091,7 @@ body.login-active .main-content {
    align-items: center;
    justify-content: center;
    min-height: 100vh;
-    padding: 28px 32px;
+    padding: 48px 32px;
    overflow: hidden;
    isolation: isolate;
 }
@ -1101,8 +1101,7 @@ body.login-active .main-content {
    inset: 0;
    z-index: 0;
    background:
-        radial-gradient(ellipse 80% 60% at 30% 40%, rgba(37, 99, 235, 0.12), transparent 65%),
-        radial-gradient(ellipse 55% 45% at 75% 65%, rgba(79, 70, 229, 0.08), transparent 55%),
+        linear-gradient(135deg, rgba(219, 234, 254, 0.78) 0%, rgba(248, 250, 252, 0.96) 48%, rgba(238, 242, 255, 0.72) 100%),
        var(--bg);
 }

@ -1110,56 +1109,28 @@ body.login-active .main-content {
    position: absolute;
    inset: 0;
    background-image:
-        linear-gradient(var(--grid-line) 1px, transparent 1px),
-        linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
-    background-size: 56px 56px;
-    mask-image: radial-gradient(ellipse 90% 80% at 50% 45%, #000 25%, transparent 80%);
-}
-
-.login-orb {
-    position: absolute;
-    border-radius: 50%;
-    filter: blur(72px);
-    opacity: 0.35;
-    animation: login-orb-drift 22s ease-in-out infinite;
-}
-.login-orb--a {
-    width: 420px;
-    height: 420px;
-    background: rgba(37, 99, 235, 0.15);
-    top: 10%;
-    left: 15%;
-}
-.login-orb--b {
-    width: 300px;
-    height: 300px;
-    background: rgba(79, 70, 229, 0.1);
-    bottom: 10%;
-    right: 20%;
-    animation-delay: -9s;
-}
-
-@keyframes login-orb-drift {
-    0%, 100% { transform: translate(0, 0); }
-    50% { transform: translate(18px, -12px); }
+        linear-gradient(rgba(100, 116, 139, 0.08) 1px, transparent 1px),
+        linear-gradient(90deg, rgba(100, 116, 139, 0.08) 1px, transparent 1px);
+    background-size: 48px 48px;
+    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.85), transparent 92%);
 }

 .login-screen__content {
    position: relative;
    z-index: 1;
    width: 100%;
-    max-width: 400px;
+    max-width: 980px;
 }

 .login-brand {
-    margin-bottom: 28px;
+    margin-bottom: 26px;
 }

 .login-brand__title {
-    font-size: 1.5rem;
-    font-weight: 700;
+    font-size: 1.75rem;
+    font-weight: 750;
    line-height: 1.25;
-    letter-spacing: -0.02em;
+    letter-spacing: 0;
    margin-bottom: 6px;
 }

@ -1171,7 +1142,12 @@ body.login-active .main-content {
 .login-card {
    position: relative;
    overflow: hidden;
-    box-shadow: var(--shadow-lg), var(--accent-glow), var(--shadow-inset);
+    min-height: 360px;
+    padding: 30px 32px 32px;
+    border-color: rgba(148, 163, 184, 0.34);
+    border-radius: 16px;
+    background: rgba(255, 255, 255, 0.94);
+    box-shadow: 0 18px 50px rgba(15, 23, 42, 0.10), 0 2px 8px rgba(15, 23, 42, 0.06);
 }
 .login-card::before {
    content: '';
@ -1179,23 +1155,101 @@ body.login-active .main-content {
    inset: 0 0 auto 0;
    height: 2px;
    background: var(--accent-gradient);
-    opacity: 0.85;
+    opacity: 0.75;
 }

 .login-card__heading {
-    font-size: 1.15rem;
-    font-weight: 700;
-    margin-bottom: 4px;
+    font-size: 1.25rem;
+    font-weight: 750;
+    margin-bottom: 6px;
 }

 .login-card__lead {
-    font-size: 0.875rem;
+    font-size: 0.925rem;
    color: var(--text-secondary);
-    margin-bottom: 20px;
+    margin-bottom: 26px;
+}
+
+.login-options {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 20px;
+    align-items: stretch;
+}
+
+.login-options .login-card {
+    min-width: 0;
+}
+
+.login-options .login-card[hidden] {
+    display: none;
+}
+
+.login-card--sso {
+    display: flex;
+    flex-direction: column;
+}
+
+.login-card--sso .login-sso {
+    margin-top: 28px;
+}
+
+.login-sso__logo {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 96px;
+    margin-bottom: 16px;
+    padding: 0 8px;
+}
+
+.login-sso__logo img {
+    display: block;
+    max-width: 100%;
+    max-height: 90px;
+    object-fit: contain;
+}
+
+.login-sso__logo span {
+    display: none;
+    color: var(--text);
+    font-size: 1rem;
+    font-weight: 700;
+    text-align: center;
+}
+
+.login-sso__logo--fallback span {
+    display: block;
 }

 .login-form .form-group {
-    margin-bottom: 16px;
+    margin-bottom: 18px;
+}
+
+.login-sso {
+    margin-top: 0;
+}
+
+.login-sso__button {
+    min-height: 50px;
+    background: #ffffff;
+    border-color: rgba(37, 99, 235, 0.34);
+    color: var(--primary-text);
+    font-weight: 600;
+}
+
+.login-sso__button:disabled {
+    background: #f8fafc;
+    border-color: rgba(148, 163, 184, 0.36);
+    color: #64748b;
+    cursor: default;
+    box-shadow: none;
+}
+
+.login-form .btn-primary {
+    min-height: 50px;
+    margin-top: 4px;
+    font-size: 0.95rem;
 }

 .login-alert {
@ -1212,9 +1266,8 @@ body.login-active .main-content {
 }

 .login-card__footnote {
-    margin-top: 20px;
-    padding-top: 16px;
-    border-top: 1px solid var(--border);
+    margin-top: 22px;
+    text-align: center;
    font-size: 0.8rem;
    color: var(--text-secondary);
 }
@ -1227,10 +1280,23 @@ body.login-active .main-content {
        align-items: flex-start;
        padding-top: 48px;
    }
+
+    .login-options {
+        grid-template-columns: 1fr;
+    }
+
+    .login-card {
+        min-height: 0;
+        padding: 26px 22px;
+    }
+
+    .login-brand__title {
+        font-size: 1.45rem;
+    }
+
 }

@media (prefers-reduced-motion: reduce) {
-    .login-orb,
    .spinner {
        animation: none;
    }
--- a/website/js/pages/login.js
+++ b/website/js/pages/login.js
@ -17,6 +17,15 @@ function setFormBusy(formId, busy, busyLabel) {
    form.querySelectorAll('input').forEach((el) => { el.disabled = busy; });
 }

+function setButtonBusy(button, busy, busyLabel) {
+    if (!button) return;
+    if (!button.dataset.defaultLabel) {
+        button.dataset.defaultLabel = button.textContent.trim();
+    }
+    button.disabled = busy;
+    button.textContent = busy ? busyLabel : button.dataset.defaultLabel;
+}
+
 export async function loginPage() {
    if (isLoggedIn()) {
        try {
@ -40,8 +49,6 @@ export async function loginPage() {
    app.innerHTML = `
        <div class="login-screen" role="main">
            <div class="login-screen__backdrop" aria-hidden="true">
-                <div class="login-orb login-orb--a"></div>
-                <div class="login-orb login-orb--b"></div>
                <div class="login-grid"></div>
            </div>

@ -51,42 +58,63 @@ export async function loginPage() {
                    <p class="login-brand__subtitle">Questionnaire Management</p>
                </header>

-                <div class="login-card card">
-                    <h2 id="login-panel-title" class="login-card__heading">Sign in</h2>
-                    <p id="loginPanelSubtitle" class="login-card__lead">Admin or supervisor account.</p>
+                <div id="loginOptions" class="login-options">
+                    <section class="login-card login-card--local card" aria-labelledby="login-panel-title">
+                        <h2 id="login-panel-title" class="login-card__heading">Local account</h2>
+                        <p id="loginPanelSubtitle" class="login-card__lead">Admin or supervisor account.</p>

-                    <form id="loginForm" class="login-form" autocomplete="on">
-                        <div class="form-group">
-                            <label for="username">Username</label>
-                            <input type="text" id="username" name="username" autocomplete="username" required>
-                        </div>
-                        <div class="form-group">
-                            <label for="password">Password</label>
-                            <input type="password" id="password" name="password" autocomplete="current-password" required>
-                        </div>
-                        <button type="submit" class="btn btn-primary btn-block">Log in</button>
-                        <p id="loginError" class="login-alert login-alert--error" role="alert" hidden></p>
-                    </form>
-
-                    <div id="changePwSection" class="login-change" hidden>
-                        <hr>
-                        <p>You must change your password before continuing.</p>
-                        <form id="changePwForm" class="login-form">
+                        <form id="loginForm" class="login-form" autocomplete="on">
                            <div class="form-group">
-                                <label for="newPw">New password</label>
-                                <input type="password" id="newPw" autocomplete="new-password" required minlength="6">
+                                <label for="username">Username</label>
+                                <input type="text" id="username" name="username" autocomplete="username" required>
                            </div>
                            <div class="form-group">
-                                <label for="newPwConfirm">Confirm password</label>
-                                <input type="password" id="newPwConfirm" autocomplete="new-password" required minlength="6">
+                                <label for="password">Password</label>
+                                <input type="password" id="password" name="password" autocomplete="current-password" required>
                            </div>
-                            <button type="submit" class="btn btn-primary btn-block">Change and continue</button>
-                            <p id="changePwError" class="login-alert login-alert--error" role="alert" hidden></p>
+                            <button type="submit" class="btn btn-primary btn-block">Log in</button>
+                            <p id="loginError" class="login-alert login-alert--error" role="alert" hidden></p>
                        </form>
-                    </div>

-                    <p class="login-card__footnote">Counselors use the mobile app.</p>
+                        <div id="changePwSection" class="login-change" hidden>
+                            <hr>
+                            <p>You must change your password before continuing.</p>
+                            <form id="changePwForm" class="login-form">
+                                <div class="form-group">
+                                    <label for="newPw">New password</label>
+                                    <input type="password" id="newPw" autocomplete="new-password" required minlength="6">
+                                </div>
+                                <div class="form-group">
+                                    <label for="newPwConfirm">Confirm password</label>
+                                    <input type="password" id="newPwConfirm" autocomplete="new-password" required minlength="6">
+                                </div>
+                                <button type="submit" class="btn btn-primary btn-block">Change and continue</button>
+                                <p id="changePwError" class="login-alert login-alert--error" role="alert" hidden></p>
+                            </form>
+                        </div>
+                    </section>
+
+                    <section id="keycloakLoginSection" class="login-card login-card--sso card" aria-labelledby="keycloak-panel-title">
+                        <h2 id="keycloak-panel-title" class="login-card__heading">University login</h2>
+                        <p id="keycloakPanelSubtitle" class="login-card__lead">Use your University Konstanz credentials.</p>
+                        <div class="login-sso">
+                            <div class="login-sso__logo" aria-hidden="true">
+                                <img
+                                    src="media/uni-logo.png"
+                                    alt=""
+                                    onerror="this.hidden=true; this.parentElement.classList.add('login-sso__logo--fallback');"
+                                >
+                                <span>Universit&auml;t Konstanz</span>
+                            </div>
+                            <button id="keycloakLoginBtn" type="button" class="btn btn-block login-sso__button" disabled>
+                                Log in with University Konstanz
+                            </button>
+                            <p id="keycloakLoginError" class="login-alert login-alert--error" role="alert" hidden></p>
+                        </div>
+                    </section>
                </div>
+
+                <p class="login-card__footnote">Counselors use the mobile app.</p>
            </div>
        </div>
    `;
@ -94,6 +122,36 @@ export async function loginPage() {
    let pendingUsername = '';
    let pendingTempToken = '';

+    const keycloakSection = document.getElementById('keycloakLoginSection');
+    const keycloakBtn = document.getElementById('keycloakLoginBtn');
+    const keycloakErr = document.getElementById('keycloakLoginError');
+    let keycloakLoginUrl = '';
+
+    apiGet('auth/keycloak-config')
+        .then((data) => {
+            if (!data.success || !data.enabled) {
+                keycloakBtn.textContent = 'University login unavailable';
+                return;
+            }
+            keycloakLoginUrl = data.loginUrl ? apiUrl(data.loginUrl) : apiUrl('auth/keycloak-login');
+            keycloakBtn.textContent = `Log in with ${data.displayName || 'University Konstanz'}`;
+            keycloakBtn.disabled = false;
+        })
+        .catch(() => {
+            keycloakBtn.textContent = 'University login unavailable';
+        });
+
+    keycloakBtn.addEventListener('click', () => {
+        keycloakErr.hidden = true;
+        if (!keycloakLoginUrl) {
+            keycloakErr.textContent = 'University login is not available.';
+            keycloakErr.hidden = false;
+            return;
+        }
+        setButtonBusy(keycloakBtn, true, 'Redirecting...');
+        window.location.assign(keycloakLoginUrl);
+    });
+
    document.getElementById('loginForm').addEventListener('submit', async (e) => {
        e.preventDefault();
        const errEl = document.getElementById('loginError');
@ -136,6 +194,7 @@ export async function loginPage() {
                pendingTempToken = d.token;
                document.getElementById('loginForm').hidden = true;
                document.getElementById('changePwSection').hidden = false;
+                keycloakSection.hidden = true;
                document.getElementById('login-panel-title').textContent = 'New password';
                document.getElementById('loginPanelSubtitle').textContent = pendingUsername;
                document.getElementById('newPw').focus();
--- a/website/media/UniKonstanz_Logo_Optimum_RGB.eps
+++ b/website/media/UniKonstanz_Logo_Optimum_RGB.eps
--- a/website/media/uni-logo.png
+++ b/website/media/uni-logo.png