52 lines
2.6 KiB
React
52 lines
2.6 KiB
React
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { createClient, magicLinkRedirectTo } from "@/lib/supabase/browser.js";
|
|
|
|
export default function LoginForm() {
|
|
const [email, setEmail] = useState("");
|
|
const [status, setStatus] = useState("idle");
|
|
const [error, setError] = useState("");
|
|
|
|
async function sendMagicLink(event) {
|
|
event.preventDefault();
|
|
setStatus("pending");
|
|
setError("");
|
|
const { error: signInError } = await createClient().auth.signInWithOtp({
|
|
email,
|
|
options: { emailRedirectTo: magicLinkRedirectTo(window.location.origin) },
|
|
});
|
|
if (signInError) {
|
|
setError("We could not send a magic link. Please try again.");
|
|
setStatus("idle");
|
|
return;
|
|
}
|
|
setStatus("sent");
|
|
}
|
|
|
|
return (
|
|
<section className="w-full shrink-0 space-y-6">
|
|
<div className="rounded-xl border-[2.5px] border-teal-300/70 bg-gradient-to-b from-teal-50/60 to-white px-8 py-9 shadow-sm">
|
|
<p className="mb-3 text-[11px] font-bold uppercase tracking-[.18em] text-teal-700/70">Welcome</p>
|
|
<h1 className="text-3xl font-bold tracking-tight">Confidence Engine</h1>
|
|
<p className="mt-3 text-sm leading-relaxed text-gray-600">Enter your email and we will send you a secure link to continue.</p>
|
|
<form className="mt-7 space-y-4" onSubmit={sendMagicLink}>
|
|
<label className="block text-sm font-medium text-gray-700" htmlFor="email">Email address</label>
|
|
<input id="email" type="email" autoComplete="email" required value={email} onChange={(event) => setEmail(event.target.value)} className="w-full rounded-lg border border-gray-300 px-4 py-3 text-sm focus:border-teal-600 focus:outline-none focus:ring-2 focus:ring-teal-400" />
|
|
<button type="submit" disabled={status === "pending"} className="rounded-lg bg-teal-700 px-5 py-2.5 text-sm font-medium text-white transition hover:bg-teal-600 disabled:cursor-wait disabled:opacity-60">
|
|
{status === "pending" ? "Sending magic link…" : "Send magic link"}
|
|
</button>
|
|
</form>
|
|
{status === "sent" && <p className="mt-5 text-sm text-green-700" role="status">Check your email for your magic link.</p>}
|
|
{error && <p className="mt-5 text-sm text-red-700" role="alert">{error}</p>}
|
|
</div>
|
|
|
|
<div className="pt-3 space-y-3">
|
|
<p className="text-sm font-medium text-gray-700">Sign in to continue</p>
|
|
<p className="text-sm leading-relaxed text-gray-600">Enter your email and we{'\''}ll send you a secure sign-in link.</p>
|
|
</div>
|
|
|
|
<p className="text-xs text-gray-500">Your investigations are private to your account and saved so you can return to them later.</p>
|
|
</section>
|
|
);
|
|
} |