64 lines
2.6 KiB
TypeScript
64 lines
2.6 KiB
TypeScript
|
// components/account/ConfirmIdentity.tsx
|
|||
|
|
"use client";
|
|||
|
|
import { useState } from "react";
|
|||
|
|
|
|||
|
|
export default function ConfirmIdentity({
|
|||
|
|
defaultIdentifier,
|
|||
|
|
onSuccess,
|
|||
|
|
}: {
|
|||
|
|
defaultIdentifier: string; // prefill with username or email you show on the page
|
|||
|
|
onSuccess: () => void; // called after re-auth succeeds
|
|||
|
|
}) {
|
|||
|
|
const [open, setOpen] = useState(false);
|
|||
|
|
const [identifier, setIdentifier] = useState(defaultIdentifier);
|
|||
|
|
const [password, setPassword] = useState("");
|
|||
|
|
const [busy, setBusy] = useState(false);
|
|||
|
|
const [err, setErr] = useState<string | null>(null);
|
|||
|
|
|
|||
|
|
async function submit() {
|
|||
|
|
setBusy(true);
|
|||
|
|
setErr(null);
|
|||
|
|
try {
|
|||
|
|
const res = await fetch("/api/auth/reconfirm", {
|
|||
|
|
method: "POST",
|
|||
|
|
headers: { "Content-Type": "application/json" },
|
|||
|
|
credentials: "include",
|
|||
|
|
body: JSON.stringify({ identifier, password }),
|
|||
|
|
});
|
|||
|
|
const j = await res.json().catch(() => ({}));
|
|||
|
|
if (!res.ok) throw new Error(j?.error || "Failed");
|
|||
|
|
setOpen(false);
|
|||
|
|
setPassword("");
|
|||
|
|
onSuccess(); // now do the sensitive call
|
|||
|
|
} catch (e: any) {
|
|||
|
|
setErr(e?.message || "Re-auth failed");
|
|||
|
|
} finally {
|
|||
|
|
setBusy(false);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<>
|
|||
|
|
{/* wherever you need the step-up, render a button that opens this */}
|
|||
|
|
<button className="btn" onClick={() => setOpen(true)}>Confirm it’s you</button>
|
|||
|
|
|
|||
|
|
{open && (
|
|||
|
|
<div className="fixed inset-0 bg-black/50 grid place-items-center">
|
|||
|
|
<div className="bg-card border rounded-lg p-4 w-full max-w-sm">
|
|||
|
|
<h3 className="font-semibold mb-2">Confirm it’s you</h3>
|
|||
|
|
<label className="block text-sm mb-1">Email or Username</label>
|
|||
|
|
<input className="input w-full mb-2" value={identifier} onChange={e=>setIdentifier(e.target.value)} />
|
|||
|
|
<label className="block text-sm mb-1">Password</label>
|
|||
|
|
<input className="input w-full mb-3" type="password" value={password} onChange={e=>setPassword(e.target.value)} />
|
|||
|
|
{err && <div className="text-red-600 text-sm mb-2">{err}</div>}
|
|||
|
|
<div className="flex gap-2 justify-end">
|
|||
|
|
<button className="btn" onClick={()=>setOpen(false)} disabled={busy}>Cancel</button>
|
|||
|
|
<button className="btn-primary" onClick={submit} disabled={busy}>{busy ? "Checking…" : "Continue"}</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</>
|
|||
|
|
);
|
|||
|
|
}
|