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
2026-03-24 12:23:50 +00:00
parent 69e14afedf
commit 4e313392d0
5 changed files with 29 additions and 94 deletions
@@ -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();
 });
@@ -11,9 +11,13 @@

    <!-- External Libraries -->
    <script src="https://unpkg.com/htmx.org@1.9.10"></script>
-    <script src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
+    <script src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
    <script src="https://cdn.plyr.io/3.7.8/plyr.polyfilled.js"></script>

+    <style>
+        [x-cloak] { display: none !important; }
+    </style>
+
    <!-- Legacy JavaScript (To be refactored) -->
    <script src="/static/js/auth.js?v=1.10" defer></script>
    <script src="/static/js/api.js?v=1.11" defer></script>
@@ -29,10 +33,10 @@
 </head>
 <body x-data="{ 
    activeTab: 'home', 
-    isAuthenticated: false,
+    isAuthenticated: true,
    username: ''
 }" @set-tab.window="activeTab = $event.detail.tab"
-   @auth-success.window="isAuthenticated = true; username = $event.detail.username; activeTab = 'home'">
+   @auth-success.window="isAuthenticated = true; username = $event.detail.username">
    {% include "components/toast_container.html" %}
    <div class="container">
        {% block content %}{% endblock %}
@@ -26,8 +26,9 @@
    <p style="color: #00d9ff; margin: 0 0 10px 0;">👋 Bienvenue! <a href="/login" style="color: #00d9ff; text-decoration: underline;">Connectez-vous</a> pour télécharger des vidéos</p>
 </div>

-<div id="mainTabs" class="tabs" x-show="isAuthenticated" x-cloak style="visibility: visible; display: flex;">
-    <button class="tab" :class="{ 'active': activeTab === 'home' }" @click="activeTab = 'home'; if (typeof loadHomeContent === 'function') loadHomeContent()">
+<!-- Tabs - Simple and direct -->
+<div id="mainTabs" class="tabs" style="display: flex !important; visibility: visible !important;">
+    <button class="tab" :class="{ 'active': activeTab === 'home' }" @click="activeTab = 'home'">
        <svg style="width:16px;height:16px;vertical-align:middle;margin-right:5px" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
        </svg>
@@ -58,10 +59,4 @@
        </svg>
        Téléchargements
    </button>
-    <button class="tab" :class="{ 'active': activeTab === 'providers' }" @click="activeTab = 'providers'">
-        <svg style="width:16px;height:16px;vertical-align:middle;margin-right:5px" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"></path>
-        </svg>
-        Fournisseurs
-    </button>
 </div>
@@ -1,5 +1,8 @@
 <!-- Home Section: Recommendations & Latest Releases -->
-<div id="tab-home" class="tab-content" x-show="activeTab === 'home'" x-init="if (activeTab === 'home') loadHomeContent()">
+<div id="tab-home" class="tab-content" 
+     x-show="activeTab === 'home'" 
+     x-init="if (activeTab === 'home') setTimeout(() => loadHomeContent(), 500)"
+     @set-tab.window="if ($event.detail.tab === 'home') loadHomeContent()">
    <!-- Loading State -->
    <div id="homeLoading" class="loading-spinner">Chargement des recommandations...</div>

@@ -4,7 +4,7 @@
 {% include "components/header.html" %}

 <!-- Main content - Shown only when authenticated -->
-<div id="main-content" x-show="isAuthenticated" x-cloak>
+<div id="main-content">

 {% include "components/home_section.html" %}