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="/register" element={<Register />} />
-        <Route
-          path="/dashboard"
-          element={token ? <Dashboard /> : <Navigate to="/login" />}
-        />
-        <Route path="*" element={<Navigate to="/login" />} />
-      </Routes>
-    </Layout>
+    <Routes>
+      <Route path="/login" element={<Login setToken={setToken} />} />
+      <Route path="/register" element={<Register />} />
+      <Route
+        path="/dashboard"
+        element={
+          <ProtectedRoute>
+            <Dashboard />
+          </ProtectedRoute>
+        }
+      />
+      <Route path="*" element={<Navigate to="/login" />} />
+    </Routes>
   );
 };
 

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 [token, setToken] = useState(null);
+const Layout = ({ children, token, setToken }) => {
   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,39 +91,41 @@ const Login = () => {
   };
 
   return (
-    <form onSubmit={handleSubmit} style={styles.form}>
-      <h2 style={styles.title}>Login</h2>
-      <input
-        type="text"
-        name="username"
-        placeholder="Username"
-        value={form.username}
-        onChange={handleChange}
-        style={styles.input}
-        required
-      />
-      <input
-        type="password"
-        name="password"
-        placeholder="Password"
-        value={form.password}
-        onChange={handleChange}
-        style={styles.input}
-        required
-      />
-      <div style={styles.buttonRow}>
-        <button type="submit" style={styles.button}>
-          Login
-        </button>
-        <button
-          type="button"
-          onClick={() => navigate("/register")}
-          style={styles.button}
-        >
-          Register
-        </button>
-      </div>
-    </form>
+    <PageWrapper center>
+      <form onSubmit={handleSubmit} style={styles.form}>
+        <h2 style={styles.title}>Login</h2>
+        <input
+          type="text"
+          name="username"
+          placeholder="Username"
+          value={form.username}
+          onChange={handleChange}
+          style={styles.input}
+          required
+        />
+        <input
+          type="password"
+          name="password"
+          placeholder="Password"
+          value={form.password}
+          onChange={handleChange}
+          style={styles.input}
+          required
+        />
+        <div style={styles.buttonRow}>
+          <button type="submit" style={styles.button}>
+            Login
+          </button>
+          <button
+            type="button"
+            onClick={() => navigate("/register")}
+            style={styles.button}
+          >
+            Register
+          </button>
+        </div>
+      </form>
+    </PageWrapper>
   );
 };