Fixes: #302 (#389)

Added user avatar bubble referring the already written api for screenshot and the backend code of User.

Author: tanish-7869

frontend/__tests__/Navbar/Navbar.test.tsx

@@ -151,4 +151,29 @@ describe("GlobalNavbar", () => {
     await user.click(brandLogo);
     expect(mockPush).toHaveBeenCalledWith("/");
   });
+
+    it("renders default avatar when authorized and no profileImage", () => {
+        (useAuth as MockedFunction<typeof useAuth>).mockReturnValue({
+            status: AuthStatus.Authorized,
+            userId: 1,
+            profileImage: "",
+        });
+        render(<GlobalNavbar />);
+        const avatar = screen.getByAltText("Profile") as HTMLImageElement;
+        expect(avatar).toBeInTheDocument();
+        expect(avatar.src).toContain("/img_avatar.png");
+    });
+
+    it("renders user avatar when authorized and profileImage exists", () => {
+        (useAuth as MockedFunction<typeof useAuth>).mockReturnValue({
+            status: AuthStatus.Authorized,
+            userId: 1,
+            profileImage: "avatars/1.png",
+        });
+        render(<GlobalNavbar />);
+        const avatar = screen.getByAltText("Profile") as HTMLImageElement;
+        expect(avatar).toBeInTheDocument();
+        expect(avatar.src).toContain("/api/user/avatar?userId=1");
+    });
+
 });

frontend/components/Navbar/Navbar.tsx

@@ -15,7 +15,7 @@ const GlobalNavbar: React.FC = () => {
 
   const router = useRouter();
   function authButton() {
-    if (userAuth == AuthStatus.Unauthorized || userAuth === undefined) {
+    if (userAuth.status === AuthStatus.Unauthorized || userAuth.status === undefined) {
       return (
         <ButtonGroup>
           <Button
@@ -69,20 +69,33 @@ const GlobalNavbar: React.FC = () => {
           />
           FindFirst
         </Navbar.Brand>
-        {userAuth === AuthStatus.Authorized ? <Searchbar /> : null}
+        {userAuth.status === AuthStatus.Authorized ? <Searchbar /> : null}
         <div className={`btn-group  ${navbarView.navBtns}`}>
-          {userAuth === AuthStatus.Authorized ? (
+          {userAuth.status === AuthStatus.Authorized ? (
             <ImportModal
               file={undefined}
               show={false}
               data-testid="import-modal"
             />
           ) : null}
-          {userAuth === AuthStatus.Authorized ? (
+          {userAuth.status === AuthStatus.Authorized ? (
             <Export data-testid="export-component" />
           ) : null}
           <LightDarkToggle />
           {authButton()}
+            {userAuth.status === AuthStatus.Authorized && (
+            <Image
+                src={
+                    userAuth.profileImage && userAuth.profileImage.trim() !== ""
+                        ? `/api/user/avatar?userId=${userAuth.userId}`
+                        : "/img_avatar.png"
+                }
+                alt="Profile"
+                width={36}
+                height={36}
+                className="rounded-circle ms-6"
+            />
+            )}
         </div>
       </Container>
     </Navbar>

frontend/components/UseAuth.tsx

@@ -1,21 +1,37 @@
-import authService, { AuthObserver, AuthStatus } from "@services/auth.service";
+"use client";
 import { useEffect, useState } from "react";
+import authService, { AuthStatus } from "@services/auth.service";
 
-export default function UseAuth() {
-  const [authorized, setAuthorized] = useState<AuthStatus>();
+interface UserAuth {
+    status: AuthStatus;
+    userId?: number | null;
+    profileImage?: string | null;
+}
+
+export default function useAuth(): UserAuth {
+    const [auth, setAuth] = useState<UserAuth>({
+        status: AuthStatus.Unauthorized,
+        userId: null,
+        profileImage: null,
+    });
+
+    useEffect(() => {
+        async function checkAuth() {
+            const status = authService.getAuthorized();
+            let userId: number | null = null;
+            let profileImage: string | null = null;
 
-  const onAuthUpdated: AuthObserver = (authState: AuthStatus) => {
-    setAuthorized(authState);
-  };
+            if (status === AuthStatus.Authorized) {
+                const user = authService.getUser(); // your backend returns { id, profileImage }
+                userId = user?.id || null;
+                profileImage = user?.profileImage || null;
+            }
 
-  useEffect(() => {
-    authService.attach(onAuthUpdated);
-    return () => authService.detach(onAuthUpdated);
-  }, []);
+            setAuth({ status, userId, profileImage });
+        }
 
-  useEffect(() => {
-    setAuthorized(authService.getAuthorized());
-  }, []);
+        checkAuth();
+    }, []);
 
-  return authorized;
+    return auth;
 }

frontend/pages/api/user/avatar.ts

@@ -0,0 +1,36 @@
+import type { NextApiRequest, NextApiResponse } from "next";
+import axios from "axios";
+import fs from "fs";
+import path from "path";
+
+export default async function handler(req: NextApiRequest, res: NextApiResponse) {
+    const { userId } = req.query;
+
+    if (!userId) {
+        return res.status(400).json({ error: "Missing userId" });
+    }
+
+    try {
+        const backendUrl = `${process.env.NEXT_PUBLIC_SERVER_URL}/user/profile-picture?userId=${userId}`;
+
+        const response = await axios.get(backendUrl, {
+            responseType: "arraybuffer",
+        });
+
+        res.setHeader("Content-Type", response.headers["content-type"] || "image/png");
+        res.setHeader("Cache-Control", "public, max-age=3600");
+        res.end(Buffer.from(response.data), "binary");
+
+    } catch (err: any) {
+        if (err.response?.status === 404) {
+            // fallback to default avatar
+            const fallbackPath = path.join(process.cwd(), "public", "img_avatar.png");
+            const imageBuffer = fs.readFileSync(fallbackPath);
+            res.setHeader("Content-Type", "image/png");
+            res.setHeader("Cache-Control", "public, max-age=3600");
+            res.end(imageBuffer);
+            return;
+        }
+        res.status(err.response?.status || 500).json({ error: "Unable to fetch avatar" });
+    }
+}

frontend/public/img_avatar.png

@@ -3,8 +3,10 @@ import axios from "axios";
 import { Credentials } from "../app/account/login/page";
 import userApi from "@api/userApi";
 export interface User {
-  username: string;
-  refreshToken: string;
+    id: number;
+    username: string;
+    refreshToken: string;
+    profileImage?: string | null;
 }
 
 const SIGNIN_URL = process.env.NEXT_PUBLIC_SERVER_URL + "/user/signin";
@@ -46,19 +48,28 @@ class AuthService {
 
   // Gets the user info implicitly using the cookie 
   // and sets the user info.
-  public async getUserInfoOauth2(): Promise<User | null> {
-    let cookieuser = (await userApi.userInfo() as unknown) as User;
-    if (cookieuser) {
-      this.setUser(cookieuser);
+    public async getUserInfoOauth2(): Promise<User | null> {
+        const backendUser = (await userApi.userInfo()) as any; // the response from backend
+
+        if (backendUser) {
+            const user: User = {
+                id: backendUser.userId,
+                username: backendUser.username,
+                refreshToken: "",
+                profileImage: backendUser.userPhoto || null,
+            };
+
+            this.setUser(user);
+            localStorage.setItem("user", JSON.stringify(user));
+            this.authorizedState = AuthStatus.Authorized;
+            this.notify(this.authorizedState);
+
+            return user;
+        }
+        return null;
     }
-    localStorage.setItem("user", JSON.stringify(cookieuser));
-    this.authorizedState = AuthStatus.Authorized;
-    this.notify(this.authorizedState);
-
-    return cookieuser;
-  }
 
-  public getAuthorized(): AuthStatus {
+    public getAuthorized(): AuthStatus {
     return this.getUser() ? AuthStatus.Authorized : AuthStatus.Unauthorized;
   }
 
@@ -75,12 +86,14 @@ class AuthService {
     })
       .then((response) => {
         if (response.status == 200) {
-          let signedinUser: User = {
-            username: credentials.username,
-            refreshToken: response.data.refreshToken,
-          };
-          localStorage.setItem("user", JSON.stringify(signedinUser));
-          this.user = signedinUser;
+            let signedInUser: User = {
+                id: response.data.id,
+                username: credentials.username,
+                refreshToken: response.data.refreshToken,
+                profileImage: response.data.profileImage || null,
+            };
+            localStorage.setItem("user", JSON.stringify(signedInUser));
+          this.user = signedInUser;
           this.authorizedState = AuthStatus.Authorized;
           this.notify(this.authorizedState);
           success = true;