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

@@ -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) {
+    if (cookieToken) return cookieToken;
-        return cookieToken;
-    }
-    
-    // Fallback to localStorage
     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) === ' ') {
+        while (cookie.charAt(0) === ' ') cookie = cookie.substring(1);
-            cookie = cookie.substring(1);
+        if (cookie.indexOf(name) === 0) return cookie.substring(name.length, cookie.length);
-        }
-        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
+        console.log('No token found');
-        redirectToLogin();
         return false;
     }
 
-    // Verify token with server
     try {
         const response = await fetch(`${AUTH_API_BASE}/auth/me`, {
-            headers: {
+            headers: { 'Authorization': `Bearer ${token}` }
-                'Authorization': `Bearer ${token}`
-            }
         });
 
         if (response.ok) {
             const data = await response.json();
+            console.log('Auth success:', data.user.username);
             
-            // Log for debugging
+            // Dispatch for Alpine
-            console.log('Auth check successful for:', data.user.username);
-
-            // Dispatch event for Alpine.js global state
             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 {
- else {
+            console.log('Token invalid');
-            // Token invalid, remove it and redirect
-            removeToken();
-            redirectToLogin();
             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?')) {
+    if (!confirm('Êtes-vous sûr de vouloir vous déconnecter?')) return;
-        return;
-    }
-
-    // Remove token from localStorage and cookie
     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();
 });

templates/base.html

@@ -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 %}

templates/components/header.html

@@ -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;">
+<!-- Tabs - Simple and direct -->
-    <button class="tab" :class="{ 'active': activeTab === 'home' }" @click="activeTab = 'home'; if (typeof loadHomeContent === 'function') loadHomeContent()">
+<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>

templates/components/home_section.html

@@ -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>
 

templates/index.html

@@ -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" %}