implement user authentication with login functionality and database integration

frontend/src/App.tsx

@@ -1,41 +1,28 @@
 import "./App.css";
 import Layout from "./layout/Layout";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import Form1 from "./components/Form1";
 import Form2 from "./components/Form2";
 import Form3 from "./components/Form3";
+import LoginForm from "./components/LoginForm";
+import Cookies from "js-cookie";
+import { ToastContainer } from "react-toastify";
 
 function App() {
-  const Items = [
-    {
-      id: 1,
-      title: "Mock Book 1",
-      author: "Author 1",
-      description: "Description for Mock Book 1",
-    },
-    {
-      id: 2,
-      title: "Mock Book 2",
-      author: "Author 2",
-      description: "Description for Mock Book 2",
-    },
-    {
-      id: 3,
-      title: "Mock Book 3",
-      author: "Author 3",
-      description: "Description for Mock Book 3",
-    },
-  ];
+  const [isLoggedIn, setIsLoggedIn] = useState(false);
 
   useEffect(() => {
-    localStorage.setItem("allItems", JSON.stringify(Items));
-    localStorage.setItem("borrowableItems", JSON.stringify(Items));
+    if (Cookies.get("token")) {
+      setIsLoggedIn(true);
+    }
+
+    localStorage.setItem("borrowableItems", JSON.stringify([]));
     localStorage.setItem("borrowCode", "123456");
   }, []);
 
-  return (
+  // Mock flow without real logic: show the three sections stacked for design preview
+  return isLoggedIn ? (
     <Layout>
-      {/* Mock flow without real logic: show the three sections stacked for design preview */}
       <div className="space-y-10">
         <Form1 />
         <div className="h-px bg-blue-100" />
@@ -44,6 +31,23 @@ function App() {
         <Form3 />
       </div>
     </Layout>
+  ) : (
+    <>
+      <LoginForm onLogin={() => setIsLoggedIn(true)} />
+      <ToastContainer
+        position="top-right"
+        autoClose={3000}
+        hideProgressBar={false}
+        newestOnTop
+        closeOnClick
+        rtl={false}
+        pauseOnFocusLoss={false}
+        draggable
+        pauseOnHover
+        theme="light"
+        className="!z-50"
+      />
+    </>
   );
 }