102 lines
2.4 KiB
TypeScript
102 lines
2.4 KiB
TypeScript
// app/login/page.tsx
|
|
"use client";
|
|
|
|
import { useState } from "react";
|
|
|
|
type Step = "email" | "sent";
|
|
|
|
export default function LoginPage() {
|
|
const [email, setEmail] = useState("");
|
|
const [step, setStep] = useState<Step>("email");
|
|
const [loading, setLoading] = useState(false);
|
|
const [error, setError] = useState<string | null>(null);
|
|
|
|
async function submit() {
|
|
setLoading(true);
|
|
setError(null);
|
|
|
|
try {
|
|
const res = await fetch("/api/auth/request-link", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ email }),
|
|
});
|
|
|
|
if (!res.ok) {
|
|
throw new Error("Failed to send login link");
|
|
}
|
|
|
|
setStep("sent");
|
|
} catch (e) {
|
|
setError("Something went wrong. Try again.");
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}
|
|
|
|
return (
|
|
<main className="max-w-md mx-auto p-8 space-y-8">
|
|
<Progress step={step} />
|
|
|
|
{step === "email" && (
|
|
<>
|
|
<h1 className="text-xl font-semibold">Log in</h1>
|
|
|
|
<input
|
|
type="email"
|
|
placeholder="enter@email.com"
|
|
className="w-full border rounded p-2"
|
|
value={email}
|
|
onChange={(e) => setEmail(e.target.value)}
|
|
disabled={loading}
|
|
/>
|
|
|
|
<button
|
|
onClick={submit}
|
|
disabled={loading || !email}
|
|
className="w-full bg-black text-white py-2 rounded"
|
|
>
|
|
{loading ? "Sending…" : "Send login link"}
|
|
</button>
|
|
|
|
{error && (
|
|
<p className="text-sm text-red-600">{error}</p>
|
|
)}
|
|
</>
|
|
)}
|
|
|
|
{step === "sent" && (
|
|
<>
|
|
<h1 className="text-xl font-semibold">Check your email</h1>
|
|
|
|
<p className="text-gray-600">
|
|
We sent a login link to <strong>{email}</strong>.
|
|
</p>
|
|
|
|
<p className="text-gray-500 text-sm">
|
|
The link expires in 15 minutes.
|
|
</p>
|
|
</>
|
|
)}
|
|
</main>
|
|
);
|
|
}
|
|
|
|
function Progress({ step }: { step: Step }) {
|
|
const percent = step === "email" ? 50 : 100;
|
|
|
|
return (
|
|
<div>
|
|
<div className="h-2 bg-gray-200 rounded">
|
|
<div
|
|
className="h-2 bg-black rounded transition-all"
|
|
style={{ width: `${percent}%` }}
|
|
/>
|
|
</div>
|
|
|
|
<p className="text-sm text-gray-600 mt-2">
|
|
{step === "email" ? "Enter email" : "Check inbox"}
|
|
</p>
|
|
</div>
|
|
);
|
|
}
|