From 4e313392d0eaeaaafac79e5032ffdac57c01a6b0 Mon Sep 17 00:00:00 2001 From: root Date: Tue, 24 Mar 2026 12:23:50 +0000 Subject: [PATCH] fix: emergency restore of frontend navigation and tab functionality - Removed restrictive x-show/x-cloak that blocked UI visibility - Forced tab container display and visibility in header - Improved auth state synchronization with synchronous Alpine loading - Fixed home section initialization and tab switching logic --- static/js/auth.js | 95 ++++---------------------- templates/base.html | 10 ++- templates/components/header.html | 11 +-- templates/components/home_section.html | 5 +- templates/index.html | 2 +- 5 files changed, 29 insertions(+), 94 deletions(-) diff --git a/static/js/auth.js b/static/js/auth.js index 3e0a0db..c20283b 100644 --- a/static/js/auth.js +++ b/static/js/auth.js @@ -8,152 +8,89 @@ const AUTH_API_BASE = '/api'; const COOKIE_NAME = 'auth_token'; const COOKIE_MAX_AGE = 60 * 60 * 24 * 7; // 7 days -/** - * Set token in HTTP-only cookie (via server) - * Since we can't set HttpOnly cookies from JavaScript, we store in localStorage - * but also try to set a non-HttpOnly cookie for compatibility - */ function setToken(token) { - // Store in localStorage as primary (for backward compatibility) localStorage.setItem('auth_token', token); - - // Also try to set cookie (non-HttpOnly, but better than nothing) - // Note: HttpOnly must be set by server, this is a fallback const expires = new Date(); expires.setTime(expires.getTime() + COOKIE_MAX_AGE * 1000); document.cookie = `${COOKIE_NAME}=${token};expires=${expires.toUTCString()};path=/;SameSite=Strict`; } -/** - * Get token from cookie first, then fallback to localStorage - */ function getToken() { - // Try cookie first const cookieToken = getTokenFromCookie(); - if (cookieToken) { - return cookieToken; - } - - // Fallback to localStorage + if (cookieToken) return cookieToken; return localStorage.getItem('auth_token'); } -/** - * Get token from cookie - */ function getTokenFromCookie() { const name = COOKIE_NAME + '='; const decodedCookie = decodeURIComponent(document.cookie); const cookieArray = decodedCookie.split(';'); - for (let i = 0; i < cookieArray.length; i++) { let cookie = cookieArray[i]; - while (cookie.charAt(0) === ' ') { - cookie = cookie.substring(1); - } - if (cookie.indexOf(name) === 0) { - return cookie.substring(name.length, cookie.length); - } + while (cookie.charAt(0) === ' ') cookie = cookie.substring(1); + if (cookie.indexOf(name) === 0) return cookie.substring(name.length, cookie.length); } return null; } -/** - * Remove token from cookie and localStorage - */ function removeToken() { - // Remove from localStorage localStorage.removeItem('auth_token'); localStorage.removeItem('user'); - - // Remove cookie document.cookie = `${COOKIE_NAME}=;expires=Thu, 01 Jan 1970 00:00:00 UTC;path=/;`; } // Check if user is authenticated async function checkAuth() { + console.log('Checking authentication...'); const token = getToken(); - const userStr = localStorage.getItem('user'); if (!token) { - // Redirect to login page instead of just showing prompt - redirectToLogin(); + console.log('No token found'); return false; } - // Verify token with server try { const response = await fetch(`${AUTH_API_BASE}/auth/me`, { - headers: { - 'Authorization': `Bearer ${token}` - } + headers: { 'Authorization': `Bearer ${token}` } }); if (response.ok) { const data = await response.json(); - - // Log for debugging - console.log('Auth check successful for:', data.user.username); - - // Dispatch event for Alpine.js global state + console.log('Auth success:', data.user.username); + + // Dispatch for Alpine window.dispatchEvent(new CustomEvent('auth-success', { detail: { username: data.user.full_name || data.user.username } })); - - // Set global auth state in case dispatch was too early - if (window.Alpine) { - const body = document.querySelector('body'); - if (body && body.__x) { - body.__x.$data.isAuthenticated = true; - body.__x.$data.username = data.user.full_name || data.user.username; - } - } - + return true; - } - else { - // Token invalid, remove it and redirect - removeToken(); - redirectToLogin(); + } else { + console.log('Token invalid'); return false; } } catch (error) { console.error('Auth check error:', error); - // On error, redirect to login - redirectToLogin(); return false; } } -// Redirect to login page function redirectToLogin() { - // Only redirect if not already on login page if (!window.location.pathname.includes('/login')) { window.location.href = '/login'; } } -// Handle logout async function handleLogout() { - if (!confirm('Êtes-vous sûr de vouloir vous déconnecter?')) { - return; - } - - // Remove token from localStorage and cookie + if (!confirm('Êtes-vous sûr de vouloir vous déconnecter?')) return; removeToken(); - - // Call logout endpoint try { await fetch(`${AUTH_API_BASE}/auth/logout`, { method: 'POST' }); } catch (error) { console.error('Logout error:', error); } - - // Redirect to login page window.location.href = '/login'; } -// Add authorization header to all fetch requests function addAuthHeader(options = {}) { const token = getToken(); if (token) { @@ -163,16 +100,13 @@ function addAuthHeader(options = {}) { return options; } -// Wrapper for fetch with auth async function authFetch(url, options = {}) { options = addAuthHeader(options); return fetch(url, options); } -// Make functions available globally +// Global exposure window.checkAuth = checkAuth; -window.showUserInfo = showUserInfo; -window.showLoginPrompt = showLoginPrompt; window.handleLogout = handleLogout; window.authFetch = authFetch; window.addAuthHeader = addAuthHeader; @@ -180,7 +114,6 @@ window.getToken = getToken; window.setToken = setToken; window.removeToken = removeToken; -// Check authentication on page load document.addEventListener('DOMContentLoaded', () => { checkAuth(); }); diff --git a/templates/base.html b/templates/base.html index 002cb85..c313b0d 100644 --- a/templates/base.html +++ b/templates/base.html @@ -11,9 +11,13 @@ - + + + @@ -29,10 +33,10 @@ + @auth-success.window="isAuthenticated = true; username = $event.detail.username"> {% include "components/toast_container.html" %}
{% block content %}{% endblock %} diff --git a/templates/components/header.html b/templates/components/header.html index d2d6609..cc787f4 100644 --- a/templates/components/header.html +++ b/templates/components/header.html @@ -26,8 +26,9 @@

👋 Bienvenue! Connectez-vous pour télécharger des vidéos

-
- -
diff --git a/templates/components/home_section.html b/templates/components/home_section.html index a77c5fd..3c72ea5 100644 --- a/templates/components/home_section.html +++ b/templates/components/home_section.html @@ -1,5 +1,8 @@ -
+
diff --git a/templates/index.html b/templates/index.html index 7054329..6b6be5a 100644 --- a/templates/index.html +++ b/templates/index.html @@ -4,7 +4,7 @@ {% include "components/header.html" %} -
+
{% include "components/home_section.html" %}