From 0a903bad0b5bbb166066250384b41e8bc48d81ae Mon Sep 17 00:00:00 2001
From: hz <zeeshaun@gmail.com>
Date: Mon, 12 May 2025 22:24:07 -0700
Subject: [PATCH] Adding login auth

---
 src/App.jsx               |  42 ++++++++---
 src/AuthContext.jsx       |  27 +++++++
 src/components/Layout.jsx |  39 ++++++++++
 src/index.css             |  11 ++-
 src/main.jsx              |  23 +++---
 src/pages/Login.jsx       | 149 +++++++++++++++++++++++++++-----------
 src/pages/Register.jsx    |  94 +++++++++++++++++++-----
 7 files changed, 299 insertions(+), 86 deletions(-)
 create mode 100644 src/AuthContext.jsx
 create mode 100644 src/components/Layout.jsx

diff --git a/src/App.jsx b/src/App.jsx
index b2cefcf..eb3075a 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,17 +1,37 @@
-import React from 'react';
-import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
-import Login from './pages/Login';
-import Register from './pages/Register';
+import React from "react";
+import { BrowserRouter as Router, Routes, Route, useNavigate } from "react-router-dom";
+import Login from "./pages/Login";
+import Register from "./pages/Register";
+import { useAuth } from "./AuthContext";
 
 const App = () => {
+  const { isAuthenticated, logout } = useAuth();
+
   return (
-    <Router>
-      <Routes>
-        <Route path="/" element={<Login />} />
-        <Route path="/login" element={<Login />} />
-        <Route path="/register" element={<Register />} />
-      </Routes>
-    </Router>
+    <div style={{ height: "100vh", display: "flex", flexDirection: "column" }}>
+      {/* Logout button */}
+      {isAuthenticated && (
+        <div style={{ display: "flex", justifyContent: "flex-end", padding: "1rem" }}>
+          <button onClick={logout}>Logout</button>
+        </div>
+      )}
+
+      {/* Centered content */}
+      <div
+        style={{
+          flex: 1,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+        }}
+      >
+        <Routes>
+          <Route path="/" element={<Login />} />
+          <Route path="/login" element={<Login />} />
+          <Route path="/register" element={<Register />} />
+        </Routes>
+      </div>
+    </div>
   );
 };
 
diff --git a/src/AuthContext.jsx b/src/AuthContext.jsx
new file mode 100644
index 0000000..22026c1
--- /dev/null
+++ b/src/AuthContext.jsx
@@ -0,0 +1,27 @@
+import React, { createContext, useContext, useState } from "react";
+
+const AuthContext = createContext();
+
+export const AuthProvider = ({ children }) => {
+  const [isLoggedIn, setIsLoggedIn] = useState(
+    !!localStorage.getItem("authToken")
+  );
+
+  const login = (token) => {
+    localStorage.setItem("authToken", token);
+    setIsLoggedIn(true);
+  };
+
+  const logout = () => {
+    localStorage.removeItem("authToken");
+    setIsLoggedIn(false);
+  };
+
+  return (
+    <AuthContext.Provider value={{ isLoggedIn, login, logout }}>
+      {children}
+    </AuthContext.Provider>
+  );
+};
+
+export const useAuth = () => useContext(AuthContext);
diff --git a/src/components/Layout.jsx b/src/components/Layout.jsx
new file mode 100644
index 0000000..0eeacdf
--- /dev/null
+++ b/src/components/Layout.jsx
@@ -0,0 +1,39 @@
+import React from "react";
+import { useAuth } from "../AuthContext";
+import { useNavigate } from "react-router-dom";
+
+const Layout = ({ children }) => {
+  const { isLoggedIn, logout } = useAuth();
+  const navigate = useNavigate();
+
+  const handleLogout = () => {
+    logout();
+    navigate("/login");
+  };
+
+  return (
+    <div style={{ position: "relative", minHeight: "100vh" }}>
+      {isLoggedIn && (
+        <button
+          onClick={handleLogout}
+          style={{
+            position: "absolute",
+            top: "1rem",
+            right: "1rem",
+            padding: "0.5rem 1rem",
+            borderRadius: "4px",
+            backgroundColor: "#444",
+            color: "#fff",
+            border: "none",
+            cursor: "pointer",
+          }}
+        >
+          Logout
+        </button>
+      )}
+      {children}
+    </div>
+  );
+};
+
+export default Layout;
diff --git a/src/index.css b/src/index.css
index 08a3ac9..b36d18b 100644
--- a/src/index.css
+++ b/src/index.css
@@ -22,12 +22,13 @@ a:hover {
   color: #535bf2;
 }
 
-body {
+/* index.css or global stylesheet */
+body, html, #root {
+  height: 100%;
   margin: 0;
   display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
+  align-items: center;
+  justify-content: center;
 }
 
 h1 {
@@ -66,3 +67,5 @@ button:focus-visible {
     background-color: #f9f9f9;
   }
 }
+
+
diff --git a/src/main.jsx b/src/main.jsx
index b9a1a6d..73e10b5 100644
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -1,10 +1,15 @@
-import { StrictMode } from 'react'
-import { createRoot } from 'react-dom/client'
-import './index.css'
-import App from './App.jsx'
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App";
+import { BrowserRouter } from "react-router-dom";
+import { AuthProvider } from "./AuthContext";
 
-createRoot(document.getElementById('root')).render(
-  <StrictMode>
-    <App />
-  </StrictMode>,
-)
+ReactDOM.createRoot(document.getElementById("root")).render(
+  <React.StrictMode>
+    <BrowserRouter>
+      <AuthProvider>
+        <App />
+      </AuthProvider>
+    </BrowserRouter>
+  </React.StrictMode>
+);
diff --git a/src/pages/Login.jsx b/src/pages/Login.jsx
index ab1a8c5..9f328f7 100644
--- a/src/pages/Login.jsx
+++ b/src/pages/Login.jsx
@@ -1,65 +1,128 @@
 import React, { useState } from "react";
 import { useNavigate } from "react-router-dom";
 import config from "../config";
+import { useAuth } from "../AuthContext";
+
+const styles = {
+  form: {
+    backgroundColor: "#2a2a2a",
+    padding: "2rem",
+    borderRadius: "8px",
+    boxShadow: "0 0 10px rgba(0,0,0,0.5)",
+    width: "100%",
+    maxWidth: "350px",
+    display: "flex",
+    flexDirection: "column",
+    gap: "1rem",
+  },
+  title: {
+    textAlign: "center",
+    color: "#f2f2f2",
+    marginBottom: "1rem",
+  },
+  input: {
+    padding: "0.75rem",
+    borderRadius: "4px",
+    border: "1px solid #444",
+    backgroundColor: "#333",
+    color: "#eee",
+    outline: "none",
+  },
+  buttonRow: {
+    display: "flex",
+    justifyContent: "space-between",
+    gap: "0.5rem",
+  },
+  button: {
+    flex: 1,
+    padding: "0.75rem",
+    borderRadius: "4px",
+    border: "none",
+    backgroundColor: "#555",
+    color: "#fff",
+    cursor: "pointer",
+    transition: "background 0.2s ease",
+  },
+};
 
 const Login = () => {
-  const [username, setUsername] = useState("");
-  const [password, setPassword] = useState("");
   const navigate = useNavigate();
+  const { login } = useAuth();
 
-  const handleLogin = async (e) => {
+  const [form, setForm] = useState({
+    username: "",
+    password: "",
+  });
+
+  const handleChange = (e) => {
+    setForm({ ...form, [e.target.name]: e.target.value });
+  };
+
+  const handleSubmit = async (e) => {
     e.preventDefault();
 
-    const response = await fetch(`${config.API_BASE_URL}/api/Auth/login`, {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ username, password }),
-    });
+    const payload = {
+      username: form.username,
+      password: form.password,
+    };
 
-    if (response.ok) {
-      const data = await response.json();
-      // Save token etc.
-      console.log("Login successful:", data);
-      // Redirect or update state
-    } else {
-      alert("Login failed.");
+    try {
+      const res = await fetch(`${config.apiBaseUrl}/api/Auth/login`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify(payload),
+      });
+
+      if (!res.ok) {
+        const data = await res.json();
+        throw new Error(data.message || "Login failed");
+      }
+
+      const data = await res.json();
+      login(data.token); // Save to context/localStorage
+      navigate("/");
+    } catch (err) {
+      console.error("Login error:", err);
+      alert("Login failed: " + err.message);
     }
   };
 
-  const goToRegister = () => {
-    navigate("/register");
-  };
-
   return (
-    <div>
-      <h2>Login</h2>
-      <form onSubmit={handleLogin}>
-        <input
-          type="text"
-          placeholder="Username"
-          value={username}
-          onChange={(e) => setUsername(e.target.value)}
-          required
-        />
-        <br />
-        <input
-          type="password"
-          placeholder="Password"
-          value={password}
-          onChange={(e) => setPassword(e.target.value)}
-          required
-        />
-        <br />
-        <button type="submit">Login</button>
+    <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={goToRegister}
-          style={{ marginLeft: "10px" }}
+          onClick={() => navigate("/register")}
+          style={styles.button}
         >
           Register
         </button>
-      </form>
-    </div>
+      </div>
+    </form>
   );
 };
 
diff --git a/src/pages/Register.jsx b/src/pages/Register.jsx
index 449f149..7113639 100644
--- a/src/pages/Register.jsx
+++ b/src/pages/Register.jsx
@@ -2,14 +2,56 @@ import React, { useState } from "react";
 import { useNavigate } from "react-router-dom";
 import config from "../config";
 
+const styles = {
+  form: {
+    backgroundColor: "#2a2a2a",
+    padding: "2rem",
+    borderRadius: "8px",
+    boxShadow: "0 0 10px rgba(0,0,0,0.5)",
+    width: "100%",
+    maxWidth: "350px",
+    display: "flex",
+    flexDirection: "column",
+    gap: "1rem",
+  },
+  title: {
+    textAlign: "center",
+    color: "#f2f2f2",
+    marginBottom: "1rem",
+  },
+  input: {
+    padding: "0.75rem",
+    borderRadius: "4px",
+    border: "1px solid #444",
+    backgroundColor: "#333",
+    color: "#eee",
+    outline: "none",
+  },
+  buttonRow: {
+    display: "flex",
+    justifyContent: "space-between",
+    gap: "0.5rem",
+  },
+  button: {
+    flex: 1,
+    padding: "0.75rem",
+    borderRadius: "4px",
+    border: "none",
+    backgroundColor: "#555",
+    color: "#fff",
+    cursor: "pointer",
+    transition: "background 0.2s ease",
+  },
+};
+
 const Register = () => {
-  const navigate = useNavigate();
   const [form, setForm] = useState({
     username: "",
     email: "",
     password: "",
   });
-  const [error, setError] = useState("");
+
+  const navigate = useNavigate();
 
   const handleChange = (e) => {
     setForm({ ...form, [e.target.name]: e.target.value });
@@ -18,12 +60,6 @@ const Register = () => {
   const handleSubmit = async (e) => {
     e.preventDefault();
 
-    const payload = {
-      username: form.username,
-      password: form.password,
-      email: form.email,
-    };
-
     try {
       const res = await fetch(`${config.apiBaseUrl}/api/Auth/register`, {
         method: "POST",
@@ -42,7 +78,7 @@ const Register = () => {
         throw new Error(data.message || "Registration failed");
       }
 
-      alert("Success!");
+      alert("Registration successful!");
       navigate("/login");
     } catch (err) {
       console.error("Register error:", err);
@@ -51,32 +87,52 @@ const Register = () => {
   };
 
   return (
-    <div>
-      <h2>Register</h2>
-      {error && <p style={{ color: "red" }}>{error}</p>}
-      <form onSubmit={handleSubmit}>
+    <div
+      style={{
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        height: "100vh",
+      }}
+    >
+      <form onSubmit={handleSubmit} style={styles.form}>
+        <h2 style={styles.title}>Register</h2>
         <input
-          name="username"
+          style={styles.input}
+          type="text"
           placeholder="Username"
+          name="username"
           value={form.username}
           onChange={handleChange}
-          required
         />
         <input
-          name="email"
+          style={styles.input}
+          type="email"
           placeholder="Email"
+          name="email"
           value={form.email}
           onChange={handleChange}
         />
         <input
-          name="password"
+          style={styles.input}
           type="password"
           placeholder="Password"
+          name="password"
           value={form.password}
           onChange={handleChange}
-          required
         />
-        <button type="submit">Register</button>
+        <div style={styles.buttonRow}>
+          <button type="submit" style={styles.button}>
+            Register
+          </button>
+          <button
+            type="button"
+            style={styles.button}
+            onClick={() => navigate("/login")}
+          >
+            Back
+          </button>
+        </div>
       </form>
     </div>
   );