50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:T346e,"use client"; import { useEffect, useId, useRef, useState, type ComponentProps, type CSSProperties, type FormEvent, } from "react"; import { Loader2 } from "lucide-react"; import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; import { Label } from "@/components/ui/label"; import { cn } from "@/lib/utils"; export type ForgotPasswordValues = { email: string }; export type ForgotPasswordSimpleProps = { /** Product name shown in the wordmark. */ brand?: string; eyebrow?: string; title?: string; description?: string; /** Numbered next steps shown after the link is sent. */ nextSteps?: string[]; /** Seconds before "Resend" becomes available again. */ resendCooldown?: number; signInHref?: string; supportHref?: string; /** Called with the email when the form is submitted. Throw to show an error. */ onSubmit?: (values: ForgotPasswordValues) => void | Promise; /** Called when the person asks for another email. Defaults to `onSubmit`. */ onResend?: (values: ForgotPasswordValues) => void | Promise; /** Ink for the wordmark square, rule and primary button. Defaults to Devsloka blue. */ accent?: string; /** Text colour on `accent`. */ accentForeground?: string; } & Omit, "onSubmit">; const DEFAULTS = { brand: "Larch", eyebrow: "Account recovery", title: "Forgot your password?", description: "Enter the email you use for Larch and we will send a link to choose a new password.", nextSteps: [ "Open the email from Larch. It usually arrives within a minute.", "Select “Choose a new password”. The link works once and expires after 30 minutes.", "Not there? Check spam or the Promotions tab, then resend below.", ], accent: "#0A6EFF", accentForeground: "#FFFFFF", }; const EMAIL_PATTERN = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; function validateEmail(email: string) { if (!email.trim()) return "Enter the email address on your account."; if (!EMAIL_PATTERN.test(email.trim())) return "That email looks incomplete. Check for a typo."; return undefined; } const defaultSubmit = () => new Promise((resolve) => setTimeout(resolve, 900)); const pad = (n: number) => String(n).padStart(2, "0"); const formatSeconds = (s: number) => `${Math.floor(s / 60)}:${pad(s % 60)}`; /** Counts down once per second while `seconds > 0`. The interval starts when `start()` is called. */ function useCooldown() { const [seconds, setSeconds] = useState(0); const running = seconds > 0; useEffect(() => { if (!running) return; const timer = setInterval(() => { setSeconds((current) => Math.max(0, current - 1)); }, 1000); return () => clearInterval(timer); }, [running]); return [seconds, setSeconds] as const; } function Wordmark({ name }: { name: string }) { return ( ); } export function ForgotPasswordSimple({ brand = DEFAULTS.brand, eyebrow = DEFAULTS.eyebrow, title = DEFAULTS.title, description = DEFAULTS.description, nextSteps = DEFAULTS.nextSteps, resendCooldown = 30, signInHref = "#", supportHref = "#", onSubmit = defaultSubmit, onResend, accent = DEFAULTS.accent, accentForeground = DEFAULTS.accentForeground, className, style, ...props }: ForgotPasswordSimpleProps) { const id = useId(); const emailId = `${id}-email`; const errorId = `${id}-email-error`; const titleId = `${id}-title`; const inputRef = useRef(null); const confirmHeadingRef = useRef(null); const [email, setEmail] = useState(""); const [sentTo, setSentTo] = useState(""); const [error, setError] = useState(); const [submitted, setSubmitted] = useState(false); const [status, setStatus] = useState<"idle" | "submitting" | "success">("idle"); const [resending, setResending] = useState(false); const [announcement, setAnnouncement] = useState(""); const [cooldown, setCooldown] = useCooldown(); useEffect(() => { if (status === "success") confirmHeadingRef.current?.focus(); }, [status]); const handleSubmit = async (event: FormEvent) => { event.preventDefault(); setSubmitted(true); const nextError = validateEmail(email); setError(nextError); if (nextError) { inputRef.current?.focus(); return; } const values = { email: email.trim() }; setStatus("submitting"); setAnnouncement(""); try { await onSubmit(values); setSentTo(values.email); setStatus("success"); setCooldown(resendCooldown); setAnnouncement(`Reset link sent to ${values.email}.`); } catch { setStatus("idle"); setError( "We couldn’t send the email just now. Your account is fine. Try again in a minute." ); setAnnouncement("The reset email was not sent."); } }; const handleResend = async () => { if (cooldown > 0 || resending) return; setResending(true); setAnnouncement(""); try { await (onResend ?? onSubmit)({ email: sentTo }); setCooldown(resendCooldown); setAnnouncement(`Sent another link to ${sentTo}. Use the newest email.`); } catch { setAnnouncement("We couldn’t resend the email. Try again in a minute."); } finally { setResending(false); } }; const changeEmail = () => { setStatus("idle"); setCooldown(0); setAnnouncement(""); requestAnimationFrame(() => inputRef.current?.focus()); }; return (

{status === "success" ? "02 — Check inbox" : "01 — Request link"}

{status === "success" ? (

{eyebrow}

Check your email

We sent a reset link to

{sentTo}

{step}

← Back to sign in Still stuck? Contact support

) : (

{eyebrow}

{title}

{description}

Email setEmail(event.target.value)} onBlur={() => { if (submitted) setError(validateEmail(email)); }} aria-invalid={error ? true : undefined} aria-describedby={error ? errorId : undefined} placeholder="you@fieldwork.org" /> {error ? (

{error}

) : null}

Remembered it?{" "} Back to sign in

)}

{announcement}

); } 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}]]}],["$","$L50",null,{"namespace":"@devsloka","registryDependencies":["button","input","label"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"src/registry/blocks/auth/forgot-password-simple.tsx","content":"$52","type":"registry:block"}],"className":"h-[70svh] min-h-80"}]]}]