fix(auth): Integrate user menu with GBAuth service

- Use GBAuth service events for user profile updates
- Use correct storage keys (gb-access-token, gb-user-data)
- Listen to userUpdated, login, logout events
- Store tokens using AuthService.storeTokens() method
- Add fallback for when GBAuth is not immediately available
This commit is contained in:
Rodrigo Rodriguez (Pragmatismo) 2026-01-07 07:03:07 -03:00
parent d8e52bf330
commit a4b9d013e1
2 changed files with 73 additions and 38 deletions

View file

@ -334,13 +334,32 @@ function initHtmxHandlers() {
return; return;
} }
// Save token on successful login // Save token using GBAuth service if available
if (response.access_token) { if (response.access_token) {
const rememberMe = document.getElementById("remember"); const rememberMe = document.getElementById("remember");
if (rememberMe && rememberMe.checked) { const remember = rememberMe && rememberMe.checked;
localStorage.setItem("access_token", response.access_token);
if (window.AuthService && window.AuthService.storeTokens) {
window.AuthService.storeTokens(
response.access_token,
response.refresh_token,
response.expires_in,
remember,
);
if (response.user_id) {
window.AuthService.currentUser = { id: response.user_id };
}
} else { } else {
sessionStorage.setItem("access_token", response.access_token); // Fallback to direct storage with correct keys
const storage = remember ? localStorage : sessionStorage;
storage.setItem("gb-access-token", response.access_token);
if (response.refresh_token) {
storage.setItem("gb-refresh-token", response.refresh_token);
}
if (response.expires_in) {
const expiresAt = Date.now() + response.expires_in * 1000;
storage.setItem("gb-token-expires", expiresAt.toString());
}
} }
} }

View file

@ -2918,12 +2918,8 @@
}); });
}); });
// User Profile Loading // User Profile Loading - Integrates with GBAuth service
(function () { (function () {
const token =
localStorage.getItem("access_token") ||
sessionStorage.getItem("access_token");
function updateUserUI(user) { function updateUserUI(user) {
const userName = document.getElementById("userName"); const userName = document.getElementById("userName");
const userEmail = document.getElementById("userEmail"); const userEmail = document.getElementById("userEmail");
@ -2934,7 +2930,7 @@
const authText = document.getElementById("authText"); const authText = document.getElementById("authText");
const authIcon = document.getElementById("authIcon"); const authIcon = document.getElementById("authIcon");
if (user) { if (user && user.email) {
const displayName = const displayName =
user.display_name || user.display_name ||
user.first_name || user.first_name ||
@ -2947,9 +2943,10 @@
if (userName) userName.textContent = displayName; if (userName) userName.textContent = displayName;
if (userEmail) userEmail.textContent = email; if (userEmail) userEmail.textContent = email;
if (userAvatar) if (userAvatar) {
userAvatar.querySelector("span").textContent = const avatarSpan = userAvatar.querySelector("span");
initial; if (avatarSpan) avatarSpan.textContent = initial;
}
if (userAvatarLarge) if (userAvatarLarge)
userAvatarLarge.textContent = initial; userAvatarLarge.textContent = initial;
@ -2957,7 +2954,9 @@
authAction.href = "#"; authAction.href = "#";
authAction.onclick = function (e) { authAction.onclick = function (e) {
e.preventDefault(); e.preventDefault();
logout(); if (window.GBAuth) {
window.GBAuth.logout();
}
}; };
authAction.style.color = "var(--error)"; authAction.style.color = "var(--error)";
} }
@ -2969,31 +2968,48 @@
} }
} }
function logout() { // Listen for auth service events
fetch("/api/auth/logout", { method: "POST" }).finally( if (window.GBAuth) {
() => { window.GBAuth.on("userUpdated", updateUserUI);
localStorage.removeItem("access_token"); window.GBAuth.on("login", function () {
sessionStorage.removeItem("access_token"); const user = window.GBAuth.getCurrentUser();
window.location.href = "/auth/login.html"; if (user) updateUserUI(user);
}, });
); window.GBAuth.on("logout", function () {
} window.location.href = "/auth/login.html";
});
if (token) { // Load current user on page load
fetch("/api/auth/me", { if (window.GBAuth.isAuthenticated()) {
headers: { Authorization: "Bearer " + token }, const user = window.GBAuth.getCurrentUser();
}) if (user && user.email) {
.then((res) => updateUserUI(user);
res.ok } else {
? res.json() // Fetch from API if not cached
: Promise.reject("Not authenticated"), window.AuthService.fetchCurrentUser().then(
) updateUserUI,
.then((user) => updateUserUI(user)) );
.catch((err) => { }
console.log("Not authenticated:", err); }
localStorage.removeItem("access_token"); } else {
sessionStorage.removeItem("access_token"); // Fallback: wait for GBAuth to be available
}); document.addEventListener("DOMContentLoaded", function () {
setTimeout(function () {
if (
window.GBAuth &&
window.GBAuth.isAuthenticated()
) {
const user = window.GBAuth.getCurrentUser();
if (user) {
updateUserUI(user);
} else {
window.AuthService.fetchCurrentUser().then(
updateUserUI,
);
}
}
}, 100);
});
} }
})(); })();
</script> </script>