initial log in

src/components/login.jsx

@@ -0,0 +1,64 @@
+import { useState } from "react";
+
+export default function Login() {
+    const [username, setUsername] = useState("")
+    const [password, setPassword] = useState("")
+    const [error, setError] = useState("")
+
+    async function handleSubmit(e) {
+    e.preventDefault();
+    setError("");
+
+    const device_id = crypto.randomUUID(); // browser-native UUID
+
+    try {
+      const res = await fetch("http://localhost:7080/auth/create_refresh", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          "User-Agent": "react-app" // optional
+        },
+        credentials: "include", // lets cookies like PHPSESSID flow if server sets them
+        body: JSON.stringify({
+          username,
+          password,
+          device_id
+        }),
+      });
+
+      if (!res.ok) {
+        setError("Invalid credentials or server error.");
+        return;
+      }
+
+      const data = await res.text();
+      console.log("Login success:", data); 
+      // store tokens/responses where you want (context/localStorage/etc.)
+
+    } catch (err) {
+      setError("Network error.");
+    }
+  }
+
+  return (
+    <form onSubmit={handleSubmit} style={{ display: "flex", flexDirection: "column", width: "200px" }}>
+      <input
+        type="text"
+        placeholder="Username"
+        value={username}
+        onChange={(e) => setUsername(e.target.value)}
+      />
+
+      <input
+        type="password"
+        placeholder="Password"
+        value={password}
+        onChange={(e) => setPassword(e.target.value)}
+      />
+
+      <button type="submit">Login</button>
+
+      {error && <p style={{ color: "red" }}>{error}</p>}
+    </form>
+  );
+}