user icon to navbar

src/api/user/user.controller.ts

@@ -1,15 +1,37 @@
 import { FastifyReply, FastifyRequest } from 'fastify';
 import * as userService from './user.service';
+import {queryOne} from '../../shared/database';
 import jwt from "jsonwebtoken";
 
-interface UserIdBody { userId: number; }
 interface UserIdParams { id: string; }
 interface CreateUserBody { username: string; profilePictureUrl?: string; }
 interface UpdateUserBody { username?: string; profilePictureUrl?: string | null; password?: string; }
-interface ConnectBody { accessToken: string; anilistUserId: number; expiresIn: number; }
 
 interface DBRunResult { changes: number; lastID: number; }
 
+export async function getMe(req: any, reply: any) {
+    const userId = req.user?.id;
+
+    if (!userId) {
+        return reply.code(401).send({ error: "Unauthorized" });
+    }
+
+    const user = await queryOne(
+        `SELECT username, profile_picture_url FROM User WHERE id = ?`,
+        [userId],
+        'userdata' // ✅ DB correcta
+    );
+
+    if (!user) {
+        return reply.code(404).send({ error: "User not found" });
+    }
+
+    return reply.send({
+        username: user.username,
+        avatar: user.profile_picture_url
+    });
+}
+
 export async function login(req: FastifyRequest, reply: FastifyReply) {
     const { userId } = req.body as { userId: number };
 

src/api/user/user.routes.ts

@@ -2,6 +2,7 @@ import { FastifyInstance } from 'fastify';
 import * as controller from './user.controller';
 
 async function userRoutes(fastify: FastifyInstance) {
+    fastify.get('/me',controller.getMe);
     fastify.post("/login", controller.login);
     fastify.get('/users', controller.getAllUsers);
     fastify.post('/users', controller.createUser);

src/scripts/auth-guard.js

@@ -1,7 +1,81 @@
-(function () {
-    const token = localStorage.getItem("token");
+;(() => {
+    const token = localStorage.getItem("token")
 
     if (!token && window.location.pathname !== "/") {
-        window.location.href = "/";
+        window.location.href = "/"
     }
-})();
+})()
+
+async function loadMeUI() {
+    const token = localStorage.getItem("token")
+    if (!token) return
+
+    try {
+        const res = await fetch("/api/me", {
+            headers: {
+                Authorization: `Bearer ${token}`,
+            },
+        })
+
+        if (!res.ok) return
+
+        const user = await res.json()
+
+        const navUser = document.getElementById("nav-user")
+        const navUsername = document.getElementById("nav-username")
+        const navAvatar = document.getElementById("nav-avatar")
+        const dropdownAvatar = document.getElementById("dropdown-avatar")
+
+        if (!navUser || !navUsername || !navAvatar) return
+
+        navUser.style.display = "flex"
+        navUsername.textContent = user.username
+
+        const avatarUrl = user.avatar || "/public/assets/default-avatar.png"
+        navAvatar.src = avatarUrl
+        if (dropdownAvatar) {
+            dropdownAvatar.src = avatarUrl
+        }
+
+        setupDropdown()
+    } catch (e) {
+        console.error("Failed to load user UI:", e)
+    }
+}
+
+function setupDropdown() {
+    const userAvatarBtn = document.querySelector(".user-avatar-btn")
+    const navDropdown = document.getElementById("nav-dropdown")
+    const navLogout = document.getElementById("nav-logout")
+
+    if (!userAvatarBtn || !navDropdown || !navLogout) return
+
+    userAvatarBtn.addEventListener("click", (e) => {
+        e.stopPropagation()
+        navDropdown.classList.toggle("active")
+    })
+
+    document.addEventListener("click", (e) => {
+        if (!navDropdown.contains(e.target)) {
+            navDropdown.classList.remove("active")
+        }
+    })
+
+    navDropdown.addEventListener("click", (e) => {
+        e.stopPropagation()
+    })
+
+    navLogout.addEventListener("click", () => {
+        localStorage.removeItem("token")
+        window.location.href = "/"
+    })
+
+    const dropdownLinks = navDropdown.querySelectorAll("a.dropdown-item")
+    dropdownLinks.forEach((link) => {
+        link.addEventListener("click", () => {
+            navDropdown.classList.remove("active")
+        })
+    })
+}
+
+loadMeUI()