fix: emergency restore of frontend navigation and tab functionality
CI / Test (Python 3.11) (push) Has been cancelled
CI / Test (Python 3.12) (push) Has been cancelled
CI / Lint (push) Has been cancelled
CI / Type Check (push) Has been cancelled
CI / Summary (push) Has been cancelled

- 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
This commit is contained in:
root
2026-03-24 12:23:50 +00:00
parent 69e14afedf
commit 4e313392d0
5 changed files with 29 additions and 94 deletions
+14 -81
View File
@@ -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();
});