72 lines
1.9 KiB
TypeScript
72 lines
1.9 KiB
TypeScript
import { useState } from "react";
|
|
import { useNavigate, Form, Link } from "react-router";
|
|
import { authClient } from "~/lib/auth-client";
|
|
import { Input } from "~/components/ui/input";
|
|
import { Button } from "~/components/ui/button";
|
|
|
|
export default function Login() {
|
|
const navigate = useNavigate();
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [pending, setPending] = useState(false);
|
|
|
|
async function onSubmit(event: React.FormEvent<HTMLFormElement>) {
|
|
event.preventDefault();
|
|
|
|
setError(null);
|
|
setPending(true);
|
|
|
|
const formData = new FormData(event.currentTarget);
|
|
|
|
const { error } = await authClient.signIn.email({
|
|
email: String(formData.get("email")),
|
|
password: String(formData.get("password")),
|
|
});
|
|
|
|
setPending(false);
|
|
|
|
if (error) {
|
|
setError(error.message ?? "Could not log in.");
|
|
return;
|
|
}
|
|
|
|
navigate("/");
|
|
}
|
|
|
|
return (
|
|
<main className="flex h-screen w-full items-center justify-center">
|
|
<div className="w-full max-w-sm space-y-4">
|
|
<div className="flex flex-col">
|
|
<span className="text-2xl font-semibold">Log in</span>
|
|
<span className="text-sm text-muted-foreground">
|
|
Continue to Coppie.
|
|
</span>
|
|
</div>
|
|
|
|
<Form onSubmit={onSubmit} className="space-y-4">
|
|
<Input name="email" type="email" placeholder="Email" required />
|
|
|
|
<Input
|
|
name="password"
|
|
type="password"
|
|
placeholder="Password"
|
|
required
|
|
/>
|
|
|
|
{error ? <p className="text-sm text-red-600">{error}</p> : null}
|
|
|
|
<Button type="submit" disabled={pending} className="w-full">
|
|
{pending ? "Logging in..." : "Log in"}
|
|
</Button>
|
|
</Form>
|
|
|
|
<p className="text-sm">
|
|
No account?{" "}
|
|
<Link to="/sign-up" className="underline">
|
|
Sign up
|
|
</Link>
|
|
</p>
|
|
</div>
|
|
</main>
|
|
);
|
|
}
|