Adding login auth

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>
   );
 };