diff --git a/static/css/components/buttons.css b/static/css/components/buttons.css index e7c1308e..42eca0ab 100644 --- a/static/css/components/buttons.css +++ b/static/css/components/buttons.css @@ -69,10 +69,10 @@ /* View Toggle Buttons */ .view-toggle { display: flex; - gap: 6px; - padding: 4px; + gap: 2px; + padding: 3px; background-color: #f0f3f7; - border-radius: 12px; + border-radius: 10px; border: 1px solid #e2e8f0; } @@ -80,26 +80,26 @@ display: flex; align-items: center; justify-content: center; - width: 40px; - height: 36px; + width: 36px; + height: 32px; background-color: transparent; border: none; border-radius: 8px; cursor: pointer; - color: #64748b; - font-size: 16px; + color: #94a3b8; + font-size: 14px; transition: all 0.2s ease; } .toggle-btn:hover { background-color: #e2e8f0; - color: #4a5568; + color: #64748b; } .toggle-btn.active { background-color: white; color: #ff5e3a; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); } .toggle-btn i { diff --git a/static/css/views/auth.css b/static/css/views/auth.css index c7d52315..0b685db1 100644 --- a/static/css/views/auth.css +++ b/static/css/views/auth.css @@ -240,10 +240,7 @@ display: none; } -/* Admin setup panel styles */ -.admin-setup-panel { - display: none; -} +/* Admin setup panel styles — visibility controlled via .hidden class */ .setup-steps { margin-bottom: 28px; diff --git a/static/js/app/userMenu.js b/static/js/app/userMenu.js index 4572847e..d32ffe02 100644 --- a/static/js/app/userMenu.js +++ b/static/js/app/userMenu.js @@ -31,9 +31,9 @@ function setupUserMenu() { const USER_DATA_KEY = 'oxicloud_user'; const userData = JSON.parse(localStorage.getItem(USER_DATA_KEY) || '{}'); const isAdmin = userData.role === 'admin'; - if (adminBtn) adminBtn.style.display = isAdmin ? 'flex' : 'none'; - if (adminDivider) adminDivider.style.display = isAdmin ? 'block' : 'none'; - if (roleBadge) roleBadge.style.display = isAdmin ? 'block' : 'none'; + if (adminBtn) { isAdmin ? adminBtn.classList.remove('hidden') : adminBtn.classList.add('hidden'); } + if (adminDivider) { isAdmin ? adminDivider.classList.remove('hidden') : adminDivider.classList.add('hidden'); } + if (roleBadge) { isAdmin ? roleBadge.classList.remove('hidden') : roleBadge.classList.add('hidden'); } } }); diff --git a/static/js/features/auth/auth.js b/static/js/features/auth/auth.js index 06cb2845..8c7f9049 100644 --- a/static/js/features/auth/auth.js +++ b/static/js/features/auth/auth.js @@ -148,6 +148,12 @@ const ALL_LANGUAGES = [ { code: 'gl', name: 'Galician', nativeName: 'Galego', flag: '🏴', popular: false }, ]; +// --- Panel visibility helpers --- +// The `.hidden` CSS class uses `display: none !important`, so inline +// `style.display` can never override it. Always toggle the class instead. +function showPanel(el) { if (el) el.classList.remove('hidden'); } +function hidePanel(el) { if (el) el.classList.add('hidden'); } + // Check if this is a first run (no locale saved) function isFirstRun() { return !localStorage.getItem(LOCALE_KEY); @@ -316,7 +322,7 @@ function initLanguageSelector() { } // Hide language panel - languagePanel.style.display = 'none'; + hidePanel(languagePanel); // Check system status to determine which panel to show const systemStatus = await checkSystemStatus(); @@ -324,16 +330,16 @@ function initLanguageSelector() { if (!systemStatus.initialized) { console.log('No admin exists, showing admin setup panel'); - document.getElementById('login-panel').style.display = 'none'; - document.getElementById('register-panel').style.display = 'none'; - document.getElementById('admin-setup-panel').style.display = 'block'; + hidePanel(document.getElementById('login-panel')); + hidePanel(document.getElementById('register-panel')); + showPanel(document.getElementById('admin-setup-panel')); const backToLoginLink = document.getElementById('back-to-login'); if (backToLoginLink) { backToLoginLink.parentElement.style.display = 'none'; } } else { - document.getElementById('login-panel').style.display = 'block'; + showPanel(document.getElementById('login-panel')); // Configure OIDC login UI if SSO is enabled await configureOidcLoginUI(); } @@ -371,10 +377,10 @@ async function showInitialPanel() { // First run - show language selector first // After language is selected, the continue button handler will check system status console.log('First run - showing language selector'); - languagePanel.style.display = 'block'; - loginPanel.style.display = 'none'; - registerPanel.style.display = 'none'; - adminSetupPanel.style.display = 'none'; + showPanel(languagePanel); + hidePanel(loginPanel); + hidePanel(registerPanel); + hidePanel(adminSetupPanel); return; } @@ -385,10 +391,10 @@ async function showInitialPanel() { if (!systemStatus.initialized) { // No admin exists - this is a fresh install, show admin setup console.log('Fresh install detected - showing admin setup'); - languagePanel.style.display = 'none'; - loginPanel.style.display = 'none'; - registerPanel.style.display = 'none'; - adminSetupPanel.style.display = 'block'; + hidePanel(languagePanel); + hidePanel(loginPanel); + hidePanel(registerPanel); + showPanel(adminSetupPanel); // Hide the "Already set up? Sign in" link since there's no admin yet const backToLoginLink = document.getElementById('back-to-login'); @@ -399,10 +405,10 @@ async function showInitialPanel() { } // System is initialized - show login panel - languagePanel.style.display = 'none'; - loginPanel.style.display = 'block'; - registerPanel.style.display = 'none'; - adminSetupPanel.style.display = 'none'; + hidePanel(languagePanel); + showPanel(loginPanel); + hidePanel(registerPanel); + hidePanel(adminSetupPanel); // Hide the admin setup link if admin already exists const showAdminSetupLink = document.getElementById('show-admin-setup'); @@ -450,10 +456,10 @@ async function configureOidcLoginUI() { if (loginForm) loginForm.style.display = 'none'; if (authDivider) authDivider.style.display = 'none'; if (showRegisterToggle) showRegisterToggle.parentElement.style.display = 'none'; - oidcSection.style.display = 'block'; + showPanel(oidcSection); } else { // Both password and OIDC enabled: show divider + SSO button - oidcSection.style.display = 'block'; + showPanel(oidcSection); } } catch (err) { console.error('Failed to fetch OIDC provider info:', err); @@ -492,27 +498,27 @@ function initLoginElements() { // Panel toggles document.getElementById('show-register').addEventListener('click', () => { - loginPanel.style.display = 'none'; - registerPanel.style.display = 'block'; - adminSetupPanel.style.display = 'none'; + hidePanel(loginPanel); + showPanel(registerPanel); + hidePanel(adminSetupPanel); }); document.getElementById('show-login').addEventListener('click', () => { - loginPanel.style.display = 'block'; - registerPanel.style.display = 'none'; - adminSetupPanel.style.display = 'none'; + showPanel(loginPanel); + hidePanel(registerPanel); + hidePanel(adminSetupPanel); }); document.getElementById('show-admin-setup').addEventListener('click', () => { - loginPanel.style.display = 'none'; - registerPanel.style.display = 'none'; - adminSetupPanel.style.display = 'block'; + hidePanel(loginPanel); + hidePanel(registerPanel); + showPanel(adminSetupPanel); }); document.getElementById('back-to-login').addEventListener('click', () => { - loginPanel.style.display = 'block'; - registerPanel.style.display = 'none'; - adminSetupPanel.style.display = 'none'; + showPanel(loginPanel); + hidePanel(registerPanel); + hidePanel(adminSetupPanel); }); return true; @@ -660,9 +666,9 @@ document.addEventListener('DOMContentLoaded', () => { // Check if admin account exists (customize this as needed) const isFirstRun = await checkFirstRun(); if (isFirstRun) { - loginPanel.style.display = 'none'; - registerPanel.style.display = 'none'; - adminSetupPanel.style.display = 'block'; + hidePanel(loginPanel); + hidePanel(registerPanel); + showPanel(adminSetupPanel); } } catch (error) { console.error('Authentication check failed:', error); @@ -740,8 +746,8 @@ if (isLoginPage && registerForm) { // Switch to login panel after 2 seconds setTimeout(() => { - loginPanel.style.display = 'block'; - registerPanel.style.display = 'none'; + showPanel(loginPanel); + hidePanel(registerPanel); }, 2000); } catch (error) { const errorMsg = window.i18n ? window.i18n.t('auth.admin_create_error') : 'Error registering account'; @@ -801,8 +807,8 @@ if (isLoginPage && adminSetupForm) { // Wait 2 seconds then switch to login panel setTimeout(() => { - loginPanel.style.display = 'block'; - adminSetupPanel.style.display = 'none'; + showPanel(loginPanel); + hidePanel(adminSetupPanel); if (adminSetupSuccess) adminSetupSuccess.style.display = 'none'; }, 2000); diff --git a/static/js/views/profile/profile.js b/static/js/views/profile/profile.js index 4b334df5..e79f0956 100644 --- a/static/js/views/profile/profile.js +++ b/static/js/views/profile/profile.js @@ -84,8 +84,8 @@ async function init() { } catch (oidcErr) { } - document.getElementById('loading').style.display = 'none'; - document.getElementById('main-content').style.display = 'block'; + document.getElementById('loading').classList.add('hidden'); + document.getElementById('main-content').classList.remove('hidden'); } catch (e) { console.error(e); showError(); @@ -93,8 +93,8 @@ async function init() { } function showError() { - document.getElementById('loading').style.display = 'none'; - document.getElementById('auth-error').style.display = 'block'; + document.getElementById('loading').classList.add('hidden'); + document.getElementById('auth-error').classList.remove('hidden'); } async function changePassword(e) { diff --git a/static/login.html b/static/login.html index e26b4550..7d8235d0 100644 --- a/static/login.html +++ b/static/login.html @@ -194,7 +194,7 @@ -
+