55 lines
1.4 KiB
TypeScript
55 lines
1.4 KiB
TypeScript
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>
|
|
);
|
|
}
|