added with bugs

frontend_admin/src/App.tsx

@@ -1,28 +1,47 @@
 import "./App.css";
 import Layout from "./layout/Layout";
 import UserTable from "./components/UserTable";
-import { useContext, useEffect } from "react";
+import LoginCard from "./components/LoginCard";
+import { useEffect, useState } from "react";
 import { loadTheme } from "./utils/frontendService";
 import "react-toastify/dist/ReactToastify.css";
-import { AuthContext } from "./utils/context";
+import Cookies from "js-cookie";
 
 function App() {
   useEffect(() => {
     loadTheme();
   }, []);
 
-  const auth = useContext(AuthContext);
+  // Track authentication state
+  const [isAuthenticated, setIsAuthenticated] = useState(
+    !!Cookies.get("token")
+  );
+  const [showLogin, setShowLogin] = useState(false);
 
   return (
     <Layout>
-      {auth ? (
-        <UserTable />
+      {isAuthenticated ? (
+        <UserTable isAuthenticated={isAuthenticated} />
       ) : (
+        <>
           <div className="flex items-center justify-center h-full">
             <h2 className="text-2xl font-bold text-gray-700 dark:text-gray-300">
               Please log in to view the user table.
             </h2>
+            <button
+              className="ml-4 px-4 py-2 bg-blue-600 text-white rounded"
+              onClick={() => setShowLogin(true)}
+            >
+              Login
+            </button>
           </div>
+          {showLogin && (
+            <LoginCard
+              onClose={() => setShowLogin(false)}
+              changeAuth={(loggedIn) => setIsAuthenticated(loggedIn)}
+            />
+          )}
+        </>
       )}
     </Layout>
   );

frontend_admin/src/components/LoginCard.tsx

@@ -24,11 +24,11 @@ const LoginCard: React.FC<LoginCardProps> = ({ onClose, changeAuth }) => {
           onSubmit={async (event) => {
             event.preventDefault();
             const formData = new FormData(event.currentTarget);
-            const username = formData.get("username");
-            const password = formData.get("password");
-            loginUser(username as string, password as string);
-            if (changeAuth) {
-              changeAuth(true);
+            const username = formData.get("username") as string;
+            const password = formData.get("password") as string;
+            const success = await loginUser(username, password); // Make loginUser return true/false
+            if (success) {
+              changeAuth?.(true);
               onClose();
             }
           }}

frontend_admin/src/components/UserTable.tsx

@@ -1,7 +1,6 @@
 import { MoreVertical } from "lucide-react";
-import { useContext, useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { useUsers } from "../utils/useUsers.ts";
-import { AuthContext } from "../utils/context.tsx";
 
 interface User {
   id: number;
@@ -14,7 +13,11 @@ interface User {
   role: string;
 }
 
-const UserTable = () => {
+interface UserTableProps {
+  isAuthenticated: boolean;
+}
+
+const UserTable: React.FC<UserTableProps> = ({ isAuthenticated }) => {
   const [openMenu, setOpenMenu] = useState<number | null>(null);
 
   const {
@@ -25,21 +28,16 @@ const UserTable = () => {
     updateUser: updateUserFunc,
   } = useUsers();
 
-  const refresh = () => {
-    refreshUsers();
-  };
-
-  const auth = useContext(AuthContext);
-
   useEffect(() => {
-    refresh();
-  }, [auth]);
+    if (isAuthenticated) {
+      refreshUsers();
+    }
+  }, [isAuthenticated]);
 
   const handleMenuClick = (userId: number) => {
     setOpenMenu(openMenu === userId ? null : userId);
   };
 
-
   const handleMenuClose = () => setOpenMenu(null);
 
   const handleInputChange = (id: number, field: keyof User, value: string) => {

frontend_admin/src/utils/userHandler.ts

@@ -1,27 +1,26 @@
 import Cookies from "js-cookie";
 import { myToast } from "./frontendService";
 
-export const loginUser = (username: string, password: string) => {
-  fetch("http://localhost:5002/api/login", {
+export const loginUser = async (
+  username: string,
+  password: string
+): Promise<boolean> => {
+  try {
+    const response = await fetch("http://localhost:5002/api/login", {
       method: "POST",
       headers: { "Content-Type": "application/json" },
       body: JSON.stringify({ username, password }),
-  })
-    .then(async (response) => {
+    });
     if (response.ok) {
       const data = await response.json();
-        Cookies.set("token", data.token, { expires: 7 });
-        Cookies.set("name", data.user.first_name, { expires: 7 });
-        myToast("Logged in successfully!", "success");
-      } else if (response.status === 401) {
-        myToast("Invalid username or password!", "error");
-      } else if (response.status === 403) {
-        myToast("You are not an Admin!", "error");
+      Cookies.set("token", data.token); // Set cookie here
+      Cookies.set("name", data.name);
+      return true;
+    }
+    return false;
+  } catch {
+    return false;
   }
-    })
-    .catch((error) => {
-      console.log("Login failed: ", error);
-    });
 };
 
 export const logout = () => {