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:T3d0d,"use client"; import { useEffect, useId, useRef, useState, type ComponentProps, type CSSProperties, type FormEvent, type Ref, } from "react"; import { Check, Eye, EyeOff, 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 ResetPasswordValues = { password: string }; export type PasswordRequirement = { id: string; label: string; test: (password: string) => boolean; }; export type ForgotPasswordResetProps = { /** Product name shown in the wordmark. */ brand?: string; title?: string; description?: string; /** The account being reset, shown in mono under the heading. */ account?: string; requirements?: PasswordRequirement[]; /** Short security note in the side panel. */ securityNote?: string; continueHref?: string; signInHref?: string; /** Called with the new password. Throw to show an error. */ onSubmit?: (values: ResetPasswordValues) => void | Promise; /** Side panel and primary button ink. Defaults to Devsloka blue. */ accent?: string; /** Text colour on `accent`. Defaults to white. */ accentForeground?: string; } & Omit, "onSubmit">; const DEFAULT_REQUIREMENTS: PasswordRequirement[] = [ { id: "length", label: "12 characters or more", test: (p) => p.length >= 12 }, { id: "case", label: "Upper and lower case letters", test: (p) => /[a-z]/.test(p) && /[A-Z]/.test(p) }, { id: "number", label: "At least one number", test: (p) => /\d/.test(p) }, { id: "spaces", label: "No spaces at the start or end", test: (p) => p.length > 0 && p.trim() === p }, ]; const DEFAULTS = { brand: "Larch", title: "Choose a new password", description: "You’ll use it to sign in on every device. Sessions on other devices end once it’s saved.", account: "priya@fieldwork.org", securityNote: "Reset links expire after 30 minutes · requested from Lisbon, Chrome on macOS", accent: "#0A6EFF", accentForeground: "#FFFFFF", }; const defaultSubmit = () => new Promise((resolve) => setTimeout(resolve, 900)); type Field = "password" | "confirm"; type Errors = Partial>; function validate(password: string, confirm: string, requirements: PasswordRequirement[]): Errors { const errors: Errors = {}; if (!password) errors.password = "Enter a new password."; else if (requirements.some((r) => !r.test(password))) errors.password = "This password doesn’t meet every requirement yet."; if (!confirm) errors.confirm = "Type the password again to confirm it."; else if (password && confirm !== password) errors.confirm = "The passwords don’t match."; return errors; } function Wordmark({ name }: { name: string }) { return ( ); } function KeyholeMark() { return ( ); } type PasswordFieldProps = { id: string; label: string; value: string; onValueChange: (value: string) => void; onBlur: () => void; error?: string; describedBy?: string; inputRef?: Ref; }; function PasswordField({ id, label, value, onValueChange, onBlur, error, describedBy, inputRef, }: PasswordFieldProps) { const [visible, setVisible] = useState(false); const errorId = `${id}-error`; const describedByIds = [describedBy, error ? errorId : undefined].filter(Boolean).join(" "); return (

{label}

onValueChange(event.target.value)} onBlur={onBlur} aria-invalid={error ? true : undefined} aria-describedby={describedByIds || undefined} className="pr-11" />

{error ? (

{error}

) : null}

); } export function ForgotPasswordReset({ brand = DEFAULTS.brand, title = DEFAULTS.title, description = DEFAULTS.description, account = DEFAULTS.account, requirements = DEFAULT_REQUIREMENTS, securityNote = DEFAULTS.securityNote, continueHref = "#", signInHref = "#", onSubmit = defaultSubmit, accent = DEFAULTS.accent, accentForeground = DEFAULTS.accentForeground, className, style, ...props }: ForgotPasswordResetProps) { const id = useId(); const titleId = `${id}-title`; const passwordId = `${id}-password`; const confirmId = `${id}-confirm`; const requirementsId = `${id}-requirements`; const formErrorId = `${id}-form-error`; const passwordRef = useRef(null); const confirmRef = useRef(null); const successHeadingRef = useRef(null); const [password, setPassword] = useState(""); const [confirm, setConfirm] = useState(""); const [errors, setErrors] = useState({}); const [formError, setFormError] = useState(); const [submitted, setSubmitted] = useState(false); const [status, setStatus] = useState<"idle" | "submitting" | "success">("idle"); useEffect(() => { if (status === "success") successHeadingRef.current?.focus(); }, [status]); const metCount = requirements.filter((r) => r.test(password)).length; const revalidate = () => { if (submitted) setErrors(validate(password, confirm, requirements)); }; const handleSubmit = async (event: FormEvent) => { event.preventDefault(); setSubmitted(true); setFormError(undefined); const nextErrors = validate(password, confirm, requirements); setErrors(nextErrors); if (nextErrors.password) return passwordRef.current?.focus(); if (nextErrors.confirm) return confirmRef.current?.focus(); setStatus("submitting"); try { await onSubmit({ password }); setStatus("success"); } catch { setStatus("idle"); setFormError( "We couldn’t save the new password. Your old one still works. Try again, or request a fresh link if this one has expired." ); } }; return (

{status === "success" ? (

Step 2 of 2 · Done

Password updated

{account} now signs in with the new password. We signed you out everywhere else and sent a confirmation email.

) : (

Step 2 of 2

{title}

{description}

{account}

{/* Hidden username helps password managers save the new password to the right account. */}

Requirements {metCount}/{requirements.length}

{requirement.label} {met ? "(met)" : "(not met yet)"}

{formError ? (

{formError}

) : null}

Back to sign in

)}

{status === "success" ? "Password updated." : formError ? "The new password was not saved." : ""}

); } 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-reset.tsx","content":"$52","type":"registry:block"}],"className":"h-[70svh] min-h-80"}]]}]