Login logout finally working

src/App.jsx

@@ -1,25 +1,33 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
 import { Routes, Route, Navigate } from "react-router-dom";
 import Login from "./pages/Login";
 import Register from "./pages/Register";
 import Dashboard from "./pages/Dashboard";
 import Layout from "./components/Layout";
+import ProtectedRoute from "./components/ProtectedRoute";
 
 const App = () => {
-  const token = localStorage.getItem("token");
+  const [token, setToken] = useState(null);
+
+  useEffect(() => {
+    const storedToken = localStorage.getItem("token");
+    setToken(storedToken);
+  }, []);
 
   return (
-    <Layout>
     <Routes>
-        <Route path="/login" element={<Login />} />
+      <Route path="/login" element={<Login setToken={setToken} />} />
       <Route path="/register" element={<Register />} />
       <Route
         path="/dashboard"
-          element={token ? <Dashboard /> : <Navigate to="/login" />}
+        element={
+          <ProtectedRoute>
+            <Dashboard />
+          </ProtectedRoute>
+        }
       />
       <Route path="*" element={<Navigate to="/login" />} />
     </Routes>
-    </Layout>
   );
 };
 

src/components/Layout.jsx

@@ -1,15 +1,9 @@
-import React, { useEffect, useState } from "react";
+import React from "react";
 import { useNavigate } from "react-router-dom";
 
-const Layout = ({ children }) => {
+const Layout = ({ children, token, setToken }) => {
-  const [token, setToken] = useState(null);
   const navigate = useNavigate();
 
-  useEffect(() => {
-    const t = localStorage.getItem("token");
-    setToken(t);
-  }, []);
-
   const handleLogout = () => {
     localStorage.removeItem("token");
     setToken(null);

src/components/PageWrapper.jsx

@@ -0,0 +1,21 @@
+import React from "react";
+
+const PageWrapper = ({ children, center = false }) => (
+  <div
+    style={{
+      height: "100vh",
+      margin: 0,
+      padding: 0,
+      display: "flex",
+      flexDirection: "column",
+      alignItems: center ? "center" : "stretch",
+      justifyContent: center ? "center" : "flex-start",
+      backgroundColor: "#242424",
+      position: "relative",
+    }}
+  >
+    {children}
+  </div>
+);
+
+export default PageWrapper;

src/components/ProtectedRoute.jsx

@@ -0,0 +1,54 @@
+import React from "react";
+import { Navigate, useNavigate } from "react-router-dom";
+import PageWrapper from "./PageWrapper";
+
+const ProtectedRoute = ({ children }) => {
+  const token = localStorage.getItem("token");
+  const navigate = useNavigate();
+
+  const handleLogout = () => {
+    localStorage.removeItem("token");
+    navigate("/login");
+  };
+
+  if (!token) {
+    return <Navigate to="/login" />;
+  }
+
+  return (
+    <PageWrapper>
+      <div
+        style={{
+          height: "100vh",
+          margin: 0,
+          padding: 0,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          backgroundColor: "#242424",
+          position: "relative",
+        }}
+      >
+        <button
+          onClick={handleLogout}
+          style={{
+            position: "absolute",
+            top: "1rem",
+            right: "1rem",
+            backgroundColor: "#1a1a1a",
+            color: "#fff",
+            padding: "0.5rem 1rem",
+            border: "none",
+            borderRadius: "4px",
+            cursor: "pointer",
+          }}
+        >
+          Logout
+        </button>
+        {children}
+      </div>
+    </PageWrapper>
+  );
+};
+
+export default ProtectedRoute;

src/pages/Login.jsx

@@ -2,6 +2,7 @@ import React, { useState } from "react";
 import { useNavigate } from "react-router-dom";
 import config from "../config";
 import { useAuth } from "../AuthContext";
+import PageWrapper from "../components/PageWrapper";
 
 const styles = {
   form: {
@@ -90,6 +91,7 @@ const Login = () => {
   };
 
   return (
+    <PageWrapper center>
       <form onSubmit={handleSubmit} style={styles.form}>
         <h2 style={styles.title}>Login</h2>
         <input
@@ -123,6 +125,7 @@ const Login = () => {
           </button>
         </div>
       </form>
+    </PageWrapper>
   );
 };