From 8f1cba5f8244c0ddffa6938e1b4adac6274bb54e Mon Sep 17 00:00:00 2001
From: hz <zeeshaun@gmail.com>
Date: Tue, 13 May 2025 00:12:13 -0700
Subject: [PATCH] Login logout finally working

---
 src/App.jsx                       | 34 +++++++++------
 src/components/Layout.jsx         | 10 +----
 src/components/PageWrapper.jsx    | 21 +++++++++
 src/components/ProtectedRoute.jsx | 54 +++++++++++++++++++++++
 src/pages/Login.jsx               | 71 ++++++++++++++++---------------
 5 files changed, 135 insertions(+), 55 deletions(-)
 create mode 100644 src/components/PageWrapper.jsx
 create mode 100644 src/components/ProtectedRoute.jsx

diff --git a/src/App.jsx b/src/App.jsx
index 52130b2..06fcc66 100644
--- a/src/App.jsx
+++ b/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>
   );
 };
 
diff --git a/src/components/Layout.jsx b/src/components/Layout.jsx
index dd6c017..3533e53 100644
--- a/src/components/Layout.jsx
+++ b/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);
diff --git a/src/components/PageWrapper.jsx b/src/components/PageWrapper.jsx
new file mode 100644
index 0000000..3470843
--- /dev/null
+++ b/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;
diff --git a/src/components/ProtectedRoute.jsx b/src/components/ProtectedRoute.jsx
new file mode 100644
index 0000000..811ec45
--- /dev/null
+++ b/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;
diff --git a/src/pages/Login.jsx b/src/pages/Login.jsx
index d509167..f6cbf6f 100644
--- a/src/pages/Login.jsx
+++ b/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: {
@@ -81,7 +82,7 @@ const Login = () => {
       }
 
       const data = await res.json();
-      login(data.token); 
+      login(data.token);
       navigate("/dashboard");
     } catch (err) {
       console.error("Login error:", err);
@@ -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>
   );
 };