4e: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"] 4f: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"] 50:T2e94,"use client"; import { useEffect, useId, useRef, useState, type ComponentProps, type CSSProperties, type FormEvent, } from "react"; import { REGEXP_ONLY_DIGITS } from "input-otp"; import { Loader2 } from "lucide-react"; import { Button } from "@/components/ui/button"; import { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, } from "@/components/ui/input-otp"; import { Label } from "@/components/ui/label"; import { cn } from "@/lib/utils"; export type OtpVerifyValues = { code: string }; export type OtpVerifyProps = { /** Product name shown in the wordmark. */ brand?: string; title?: string; /** Where the code was sent, already masked, e.g. "p••••@fieldwork.org". */ destination?: string; /** Seconds before another code can be requested. The first countdown starts on mount. */ resendCooldown?: number; footnote?: string; changeEmailHref?: string; continueHref?: string; /** Called with the 6-digit code (automatically once all six are entered). Throw to show an error. */ onSubmit?: (values: OtpVerifyValues) => void | Promise; onResend?: () => void | Promise; /** Ink for the wordmark square, rule and button. Defaults to Devsloka blue. */ accent?: string; /** Text colour on `accent`. */ accentForeground?: string; } & Omit, "onSubmit">; const DEFAULTS = { brand: "Larch", title: "Enter the code we sent", destination: "p••••@fieldwork.org", footnote: "Codes expire in 10 minutes. Requesting a new one cancels the old one.", accent: "#0A6EFF", accentForeground: "#FFFFFF", }; const CODE_LENGTH = 6; /** Placeholder until you pass `onSubmit`: waits briefly, then succeeds. */ const defaultSubmit: (values: OtpVerifyValues) => Promise = () => new Promise((resolve) => setTimeout(resolve, 800)); const defaultResend = () => new Promise((resolve) => setTimeout(resolve, 600)); 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`; setting a positive value starts the interval. */ function useCooldown(initial: number) { const [seconds, setSeconds] = useState(initial); 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; } export function OtpVerify({ brand = DEFAULTS.brand, title = DEFAULTS.title, destination = DEFAULTS.destination, resendCooldown = 30, footnote = DEFAULTS.footnote, changeEmailHref = "#", continueHref = "#", onSubmit = defaultSubmit, onResend = defaultResend, accent = DEFAULTS.accent, accentForeground = DEFAULTS.accentForeground, className, style, ...props }: OtpVerifyProps) { const id = useId(); const titleId = `${id}-title`; const codeId = `${id}-code`; const hintId = `${id}-hint`; const errorId = `${id}-error`; const codeRef = useRef(null); const successHeadingRef = useRef(null); const submittingRef = useRef(false); const [code, setCode] = useState(""); const [error, setError] = useState(); const [status, setStatus] = useState<"idle" | "submitting" | "success">("idle"); const [resending, setResending] = useState(false); const [announcement, setAnnouncement] = useState(""); const [cooldown, setCooldown] = useCooldown(resendCooldown); useEffect(() => { if (status === "success") successHeadingRef.current?.focus(); }, [status]); const verify = async (value: string) => { if (submittingRef.current) return; if (value.length < CODE_LENGTH) { setError(`Enter all ${CODE_LENGTH} digits from the email.`); codeRef.current?.focus(); return; } setError(undefined); setAnnouncement("Checking the code…"); setStatus("submitting"); submittingRef.current = true; try { await onSubmit({ code: value }); setStatus("success"); setAnnouncement("Code accepted."); } catch { setStatus("idle"); setError(`That code didn’t match. Check the newest email from ${brand}, or request another code.`); setAnnouncement(""); codeRef.current?.focus(); } finally { submittingRef.current = false; } }; const handleSubmit = (event: FormEvent) => { event.preventDefault(); void verify(code); }; const handleResend = async () => { if (cooldown > 0 || resending) return; setResending(true); setAnnouncement(""); try { await onResend(); setCode(""); setError(undefined); setCooldown(resendCooldown); setAnnouncement(`New code sent to ${destination}. The previous code no longer works.`); codeRef.current?.focus(); } catch { setAnnouncement("We couldn’t send a new code. Try again in a minute."); } finally { setResending(false); } }; return (

{status === "success" ? (

Verified

You’re in.

Your email is confirmed. Your team’s notebooks are ready.

) : (

{title}

A {CODE_LENGTH}-digit code went to{" "} {destination}

Verification code { setCode(value); if (error) setError(undefined); }} onComplete={(value: string) => void verify(value)} readOnly={status === "submitting"} aria-invalid={error ? true : undefined} aria-describedby={error ? `${hintId} ${errorId}` : hintId} containerClassName="justify-center gap-3" > {[0, 1, 2].map((index) => ( ))} {[3, 4, 5].map((index) => ( ))}

{error ? (

{error}

) : null}

Use a different email

{footnote}

)}

{announcement}

); } 4d:["$","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","input-otp",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/input-otp","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":"input-otp"}]]}]}],["$","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"}]]}]}]]}],["$","$L4e",null,{"namespace":"@devsloka","registryDependencies":["button","input-otp","label"]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"src/registry/blocks/auth/otp-verify.tsx","content":"$50","type":"registry:block"}],"className":"h-[70svh] min-h-80"}]]}]