From 53625776cb491910aede1ca08366e5dc2a49309d Mon Sep 17 00:00:00 2001 From: Dionisio Date: Fri, 13 Feb 2026 19:59:13 +0100 Subject: [PATCH] Fix: Add OIDC/SSO login button and hide password form when OIDC-only - Added SSO login button on login page that appears when OIDC is configured - Button shows provider name (e.g. 'Sign in with Authentik') - When 'Disable password login' is enabled, hides password form and shows only the SSO button - Added auth divider between password and SSO sections - Added i18n keys (or, sso_login, sso_login_provider) for all 8 locales - Fixed missing comma in it.json locale file Fixes #88, Fixes #89 --- static/css/auth.css | 44 ++++++++++++++++++++++++++++++++++++ static/js/auth.js | 51 ++++++++++++++++++++++++++++++++++++++++++ static/locales/de.json | 5 ++++- static/locales/en.json | 5 ++++- static/locales/es.json | 5 ++++- static/locales/fa.json | 5 ++++- static/locales/fr.json | 5 ++++- static/locales/it.json | 7 ++++-- static/locales/pt.json | 5 ++++- static/locales/zh.json | 5 ++++- static/login.html | 11 +++++++++ 11 files changed, 139 insertions(+), 9 deletions(-) diff --git a/static/css/auth.css b/static/css/auth.css index aa70c65b..37c40891 100644 --- a/static/css/auth.css +++ b/static/css/auth.css @@ -126,6 +126,50 @@ cursor: not-allowed; } +/* SSO / OIDC button */ +.auth-button-oidc { + background: linear-gradient(135deg, #2d3748 0%, #4a5568 100%); + box-shadow: 0 4px 12px rgba(45, 55, 72, 0.3); + display: flex; + align-items: center; + justify-content: center; + gap: 10px; +} + +.auth-button-oidc:hover { + box-shadow: 0 6px 20px rgba(45, 55, 72, 0.4); +} + +.auth-button-oidc i { + font-size: 14px; +} + +/* Divider between password and SSO login */ +.auth-divider { + display: flex; + align-items: center; + margin: 20px 0; + color: #a0aec0; + font-size: 13px; +} + +.auth-divider::before, +.auth-divider::after { + content: ''; + flex: 1; + height: 1px; + background: #e2e8f0; +} + +.auth-divider span { + padding: 0 12px; +} + +/* OIDC-only mode: hide password form */ +.auth-form.hidden { + display: none; +} + .auth-toggle { margin-top: 20px; font-size: 14px; diff --git a/static/js/auth.js b/static/js/auth.js index 79f1c2a2..2aefdcbd 100644 --- a/static/js/auth.js +++ b/static/js/auth.js @@ -282,6 +282,8 @@ function initLanguageSelector() { } } else { document.getElementById('login-panel').style.display = 'block'; + // Configure OIDC login UI if SSO is enabled + await configureOidcLoginUI(); } // Translate the page with new locale @@ -358,6 +360,55 @@ async function showInitialPanel() { if (showAdminSetupLink && systemStatus.admin_count > 0) { showAdminSetupLink.parentElement.style.display = 'none'; } + + // Check for OIDC/SSO configuration and update login panel accordingly + await configureOidcLoginUI(); +} + +// Fetch OIDC provider info and configure the login UI +async function configureOidcLoginUI() { + try { + const response = await fetch('/api/auth/oidc/providers'); + if (!response.ok) return; + + const oidcInfo = await response.json(); + if (!oidcInfo.enabled) return; + + const oidcSection = document.getElementById('oidc-login-section'); + const oidcBtn = document.getElementById('oidc-login-btn'); + const loginForm = document.getElementById('login-form'); + const authDivider = document.getElementById('auth-divider'); + const showRegisterToggle = document.getElementById('show-register'); + + if (!oidcSection || !oidcBtn) return; + + // Update button text with provider name + const btnTextEl = oidcBtn.querySelector('span'); + if (btnTextEl && oidcInfo.provider_name) { + const template = (window.i18n && window.i18n.t) + ? window.i18n.t('auth.sso_login_provider') + : 'Sign in with {{provider}}'; + btnTextEl.textContent = template.replace('{{provider}}', oidcInfo.provider_name); + } + + // Redirect to OIDC authorize endpoint on click + oidcBtn.addEventListener('click', () => { + window.location.href = oidcInfo.authorize_endpoint; + }); + + if (!oidcInfo.password_login_enabled) { + // OIDC-only mode: hide password form and divider, show only SSO button + if (loginForm) loginForm.style.display = 'none'; + if (authDivider) authDivider.style.display = 'none'; + if (showRegisterToggle) showRegisterToggle.parentElement.style.display = 'none'; + oidcSection.style.display = 'block'; + } else { + // Both password and OIDC enabled: show divider + SSO button + oidcSection.style.display = 'block'; + } + } catch (err) { + console.error('Failed to fetch OIDC provider info:', err); + } } // DOM elements diff --git a/static/locales/de.json b/static/locales/de.json index 8814b7cb..9531453b 100644 --- a/static/locales/de.json +++ b/static/locales/de.json @@ -283,7 +283,10 @@ "admin_success": "Administratorkonto erfolgreich erstellt! Sie können sich jetzt anmelden.", "account_success": "Konto erfolgreich erstellt! Sie können sich jetzt anmelden.", "passwords_mismatch": "Die Passwörter stimmen nicht überein", - "admin_create_error": "Fehler beim Erstellen des Administratorkontos" + "admin_create_error": "Fehler beim Erstellen des Administratorkontos", + "or": "oder", + "sso_login": "Mit SSO anmelden", + "sso_login_provider": "Mit {{provider}} anmelden" }, "storage": { "title": "Speicher", diff --git a/static/locales/en.json b/static/locales/en.json index 4b425316..9d20c490 100644 --- a/static/locales/en.json +++ b/static/locales/en.json @@ -283,7 +283,10 @@ "admin_success": "Administrator account created successfully! You can now sign in.", "account_success": "Account created successfully! You can now sign in.", "passwords_mismatch": "Passwords do not match", - "admin_create_error": "Error creating administrator account" + "admin_create_error": "Error creating administrator account", + "or": "or", + "sso_login": "Sign in with SSO", + "sso_login_provider": "Sign in with {{provider}}" }, "storage": { "title": "Storage", diff --git a/static/locales/es.json b/static/locales/es.json index 442b945f..7b7b04a4 100644 --- a/static/locales/es.json +++ b/static/locales/es.json @@ -283,7 +283,10 @@ "admin_success": "¡Cuenta de administrador creada con éxito! Ahora puedes iniciar sesión.", "account_success": "¡Cuenta creada con éxito! Ahora puedes iniciar sesión.", "passwords_mismatch": "Las contraseñas no coinciden", - "admin_create_error": "Error al crear cuenta de administrador" + "admin_create_error": "Error al crear cuenta de administrador", + "or": "o", + "sso_login": "Iniciar sesión con SSO", + "sso_login_provider": "Iniciar sesión con {{provider}}" }, "storage": { "title": "Almacenamiento", diff --git a/static/locales/fa.json b/static/locales/fa.json index 9991b97d..52365fc7 100644 --- a/static/locales/fa.json +++ b/static/locales/fa.json @@ -269,7 +269,10 @@ "admin_success": "حساب کاربری مدیر با موفقیت ایجاد شد! اکنون می‌توانید وارد شوید.", "account_success": "حساب کاربری با موفقیت ایجاد شد! اکنون می‌توانید وارد شوید.", "passwords_mismatch": "گذرواژه‌ها مطابقت ندارند", - "admin_create_error": "خطا در ایجاد حساب کاربری مدیر" + "admin_create_error": "خطا در ایجاد حساب کاربری مدیر", + "or": "یا", + "sso_login": "ورود با SSO", + "sso_login_provider": "ورود با {{provider}}" }, "storage": { "title": "فضای ذخیره‌سازی", diff --git a/static/locales/fr.json b/static/locales/fr.json index 2950866a..2c520b0d 100644 --- a/static/locales/fr.json +++ b/static/locales/fr.json @@ -283,7 +283,10 @@ "admin_success": "Compte administrateur créé avec succès ! Vous pouvez maintenant vous connecter.", "account_success": "Compte créé avec succès ! Vous pouvez maintenant vous connecter.", "passwords_mismatch": "Les mots de passe ne correspondent pas", - "admin_create_error": "Erreur lors de la création du compte administrateur" + "admin_create_error": "Erreur lors de la création du compte administrateur", + "or": "ou", + "sso_login": "Se connecter avec SSO", + "sso_login_provider": "Se connecter avec {{provider}}" }, "storage": { "title": "Stockage", diff --git a/static/locales/it.json b/static/locales/it.json index fd285765..892b6e38 100644 --- a/static/locales/it.json +++ b/static/locales/it.json @@ -283,7 +283,10 @@ "admin_success": "Account amministratore creato con successo! Ora puoi accedere.", "account_success": "Account creato con successo! Ora puoi accedere.", "passwords_mismatch": "Le password non corrispondono", - "admin_create_error": "Errore durante la creazione dell'account amministratore" + "admin_create_error": "Errore durante la creazione dell'account amministratore", + "or": "o", + "sso_login": "Accedi con SSO", + "sso_login_provider": "Accedi con {{provider}}" }, "storage": { "title": "Archiviazione", @@ -308,7 +311,7 @@ "fa": "Persiano", "fr": "Francese", "de": "Tedesco", - "pt": "Portoghese" + "pt": "Portoghese", "it": "Italiano" } }, diff --git a/static/locales/pt.json b/static/locales/pt.json index 6c3c852f..86b27e92 100644 --- a/static/locales/pt.json +++ b/static/locales/pt.json @@ -283,7 +283,10 @@ "admin_success": "Conta de administrador criada com sucesso! Agora você pode entrar.", "account_success": "Conta criada com sucesso! Agora você pode entrar.", "passwords_mismatch": "As senhas não coincidem", - "admin_create_error": "Erro ao criar conta de administrador" + "admin_create_error": "Erro ao criar conta de administrador", + "or": "ou", + "sso_login": "Entrar com SSO", + "sso_login_provider": "Entrar com {{provider}}" }, "storage": { "title": "Armazenamento", diff --git a/static/locales/zh.json b/static/locales/zh.json index 860235d1..5a769ad5 100644 --- a/static/locales/zh.json +++ b/static/locales/zh.json @@ -231,7 +231,10 @@ "admin_success": "管理员账号创建成功！您现在可以登录。", "account_success": "账号创建成功！您现在可以登录。", "passwords_mismatch": "密码不匹配", - "admin_create_error": "创建管理员账号时出错" + "admin_create_error": "创建管理员账号时出错", + "or": "或", + "sso_login": "使用 SSO 登录", + "sso_login_provider": "使用 {{provider}} 登录" }, "storage": { "title": "存储空间", diff --git a/static/login.html b/static/login.html index ecfd0435..f577c0f6 100644 --- a/static/login.html +++ b/static/login.html @@ -94,6 +94,17 @@ + + +
Don't have an account? Sign up