hook up auth

2026-09-06 21:50:26 -04:00
parent c4c84f7444
commit 41e5316443
6 changed files with 143 additions and 2 deletions
@@ -0,0 +1,54 @@
+import { useAuth } from "../providers/AuthProvider";
+import { useEffect } from "react";
+import { useNavigate } from "react-router-dom";
+
+type InputType = {
+  label: string;
+  forLabel: string;
+  type: "password" | "email";
+};
+const Input = ({ label, forLabel, type }: InputType) => {
+  return (
+    <div>
+      <label htmlFor={forLabel} className="text-sm">
+        {label}
+      </label>
+      <input
+        id={forLabel}
+        type={type}
+        required
+        name={forLabel}
+        className="bg-black text-white rounded-lg border-white block"
+      />
+    </div>
+  );
+};
+
+export default function LogIn() {
+  const auth = useAuth();
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    if (auth.user) navigate("/");
+  }, [auth.user]);
+
+  return (
+    <div className="flex justify-center items-center min-h-screen bg-black">
+      <div className="bg-zinc-600 text-white rounded-lg p-2">
+        <h1 className="font-semibold">Login</h1>
+        <hr className="my-2" />
+        <form method="post" action="/api/users/login">
+          <div className="space-y-2">
+            <Input type={"email"} forLabel="email" label="Email" />
+            <Input type={"password"} forLabel="password" label="Password" />
+          </div>
+          <div className="my-2">
+            <button className="bg-black p-2 rounded-lg w-full" type="submit">
+              Submit
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}