53 lines
1.8 KiB
TypeScript
53 lines
1.8 KiB
TypeScript
import { signIn } from "@/auth";
|
|
|
|
export const metadata = { title: "Sign in — TouchBase" };
|
|
|
|
type SearchParams = Promise<{ callbackUrl?: string }>;
|
|
|
|
async function requestMagicLink(formData: FormData) {
|
|
"use server";
|
|
const email = String(formData.get("email") ?? "").trim();
|
|
const callbackUrl = String(formData.get("callbackUrl") ?? "/admin");
|
|
if (!email) return;
|
|
await signIn("nodemailer", { email, redirectTo: callbackUrl });
|
|
}
|
|
|
|
export default async function LoginPage({
|
|
searchParams,
|
|
}: {
|
|
searchParams: SearchParams;
|
|
}) {
|
|
const params = await searchParams;
|
|
const callbackUrl = params.callbackUrl ?? "/admin";
|
|
|
|
return (
|
|
<main className="mx-auto flex min-h-full max-w-sm flex-col justify-center gap-6 p-8">
|
|
<h1 className="text-2xl font-semibold tracking-tight">Sign in</h1>
|
|
<p className="text-sm text-zinc-600 dark:text-zinc-400">
|
|
Enter your email and we'll send you a sign-in link.
|
|
</p>
|
|
<form action={requestMagicLink} className="flex flex-col gap-3">
|
|
<input type="hidden" name="callbackUrl" value={callbackUrl} />
|
|
<label htmlFor="email" className="text-sm font-medium">
|
|
Email
|
|
</label>
|
|
<input
|
|
id="email"
|
|
name="email"
|
|
type="email"
|
|
autoComplete="email"
|
|
required
|
|
placeholder="you@example.com"
|
|
className="rounded-md border border-zinc-300 bg-white px-3 py-2 text-sm shadow-sm placeholder:text-zinc-400 focus:border-zinc-500 focus:outline-none focus:ring-1 focus:ring-zinc-500 dark:border-zinc-700 dark:bg-zinc-900"
|
|
/>
|
|
<button
|
|
type="submit"
|
|
className="mt-2 rounded-md bg-zinc-900 px-3 py-2 text-sm font-medium text-white hover:bg-zinc-800 dark:bg-zinc-100 dark:text-zinc-900"
|
|
>
|
|
Send sign-in link
|
|
</button>
|
|
</form>
|
|
</main>
|
|
);
|
|
}
|