Login integrated

frontend/src/App.tsx

@@ -1,7 +1,7 @@
 import "./App.scss";
 import "@fontsource/lexend";
-import { ReactElement } from "react";
-import { Route, Routes } from "react-router-dom";
+import { ReactElement, useContext } from "react";
+import { Navigate, Route, Routes } from "react-router-dom";
 import Home from "./pages/Home/Home";
 import SignUp from "./pages/SignUp/SignUp";
 import Login from "./pages/Login/Login";
@@ -10,7 +10,7 @@ import AccountSettings from "./pages/AccountSettings/AccountSettings";
 import { createTheme, ThemeProvider } from "@mui/material";
 import { MainDialogContextProvider } from "./contexts/MainDialogContext";
 import { ConfirmationDialogContextProvider } from "./contexts/ConfirmationDialogContext";
-import { UserContextProvider } from "./contexts/UserContext";
+import { UserContext, UserContextProvider } from "./contexts/UserContext";
 
 const theme = createTheme({
   typography: {
@@ -60,13 +60,14 @@ const theme = createTheme({
 });
 
 const App = (): ReactElement => {
+  const { user, setUser } = useContext(UserContext);
   return (
     <ThemeProvider theme={theme}>
       <UserContextProvider>
         <MainDialogContextProvider>
           <ConfirmationDialogContextProvider>
             <Routes>
-              <Route path="/" element={<Home />} />
+              <Route path="/" element={user ? <Home /> : <Navigate to={"/login"} />} />
               <Route path="/signup" element={<SignUp />} />
               <Route path="/login" element={<Login />} />
               <Route path="/settings" element={<AccountSettings />} />

frontend/src/contexts/UserContext.tsx

@@ -1,4 +1,3 @@
-import { guestUser } from "../constants/guest_user";
 import { User } from "../models/user.model";
 import UserService from "../services/user.service";
 import { UserProfile } from "../types/user.profile";
@@ -22,14 +21,14 @@ export const UserContextProvider: React.FC<{ children: React.ReactNode }> = ({ c
       const response: User | null = await UserService.refreshToken();
       if (response) {
         setUser({
+          id: response.id,
           username: response.username,
           email: response.email,
-          name: response.name,
           role: response.isAdmin ? "admin" : "user",
           avatar: "https://www.gravatar.com/avatar/",
         });
       } else {
-        setUser(guestUser);
+        setUser(null);
       }
     }
     fetchUser();

frontend/src/models/user.model.ts

@@ -1,4 +1,5 @@
 export interface User {
+  id: String;
   username: String;
   email: String;
   name: String;

frontend/src/pages/Home/Home.tsx

@@ -1,4 +1,6 @@
 import { ReactElement } from "react";
+import { useContext } from "react";
+import { UserContext } from "../../contexts/UserContext";
 //import { useNavigate } from "react-router-dom";
 import "./Home.scss";
 import Navbar from "../../components/Navbar/Navbar";
@@ -8,6 +10,8 @@ import Footer from "../../components/Footer/Footer";
 import QuestionList from "../../components/QuestionList/QuestionList";
 
 const Home = (): ReactElement => {
+  const { user, setUser } = useContext(UserContext);
+  console.log(user);
   return (
     <Box className="Home">
       <Navbar />

frontend/src/pages/Login/Login.tsx

@@ -58,13 +58,18 @@ const Login = (): ReactElement => {
     // Simulate login process
     try {
       const response = await UserService.login(email, password);
-      setUser({
-        username: response.username,
-        email: response.email,
-        name: response.name,
-        role: response.isAdmin ? "admin" : "user",
-        avatar: "https://www.gravatar.com/avatar/",
-      });
+      if (response) {
+        setUser({
+          id: response.id,
+          username: response.username,
+          email: response.email,
+          role: response.isAdmin ? "admin" : "user",
+          avatar: "https://www.gravatar.com/avatar/",
+        });
+        navigate("/");
+      } else {
+        setLoginError("Invalid email or password. Please try again.");
+      }
       //navigate("/settings");
     } catch (error) {
       setLoginError("An unexpected error occurred. Please try again.");

frontend/src/services/user.service.ts

@@ -11,28 +11,25 @@ export default class UserService {
     },
   });
 
-  static async login(email: string, password: string): Promise<User> {
+  static async login(email: string, password: string): Promise<User | null> {
     try {
       console.log("Attempting to log in with email:", email);
       const response = await UserService.client.post("/auth/login", { email, password });
-      console.log("Login response:", response.data);
-      const token = response.data.accessToken as string;
+      const token = response.data.data.accessToken as string;
       localStorage.setItem(JWT_TOKEN_KEY, `Bearer ${token}`);
       return response.data;
-    } catch (error) {
-      console.error("Login error:", error);
-      throw error;
+    } catch (error: any) {
+      return error.response.data;
     }
   }
 
   static async refreshToken(): Promise<User | null> {
     try {
-      console.log("Attempting to refresh token");
       const response = await UserService.client.get("/auth/verify-token");
-      console.log("Token refresh response:", response.data);
-      return response.data;
-    } catch (error) {
-      console.error("Token refresh error:", error);
+      console.log(response.data);
+      return response.data.data;
+    } catch (error: any) {
+      console.clear();
       return null;
     }
   }

frontend/src/types/user.profile.ts

@@ -1,7 +1,7 @@
 export interface UserProfile {
+  id: String;
   username: String;
   email: String;
-  name: String;
   avatar: String;
   role: String;
 }