"use client"; // Adapted from beui.dev/components/blocks/signup-form import { Check, Eye, EyeOff, Loader2, Lock, Mail, User, X, } from "lucide-react"; import { AnimatePresence, animate, motion, useReducedMotion, } from "motion/react"; import { useCallback, useEffect, useId, useMemo, useRef, useState, type CSSProperties, type FormEvent, type InputHTMLAttributes, type ReactNode, } from "react"; import { cn } from "@/lib/utils"; export type SignUpStatus = "idle" | "loading" | "success" | "error"; export type SignUpValues = { name: string; email: string; password: string; confirmPassword: string; terms: boolean; }; export type SignUpErrors = Partial>; export type SignUpFormClassNames = { root?: string; header?: string; title?: string; description?: string; fields?: string; strength?: string; terms?: string; submit?: string; footer?: string; }; export type SignUpFormProps = { values?: SignUpValues; defaultValues?: Partial; onValuesChange?: (values: SignUpValues) => void; onSubmit?: (values: SignUpValues) => void | Promise; validate?: (values: SignUpValues) => SignUpErrors; status?: SignUpStatus; errorMessage?: string; title?: ReactNode; description?: ReactNode; submitLabel?: string; loadingText?: string; successText?: string; errorText?: string; footer?: ReactNode; strengthMeter?: boolean; className?: string; classNames?: SignUpFormClassNames; }; const EASE_OUT = [0.16, 1, 0.3, 1] as const; const SPRING_LAYOUT = { type: "spring" as const, stiffness: 360, damping: 32, mass: 0.6, }; const SPRING_SWAP = { type: "spring" as const, stiffness: 460, damping: 30, mass: 0.55, }; const EMPTY_VALUES: SignUpValues = { name: "", email: "", password: "", confirmPassword: "", terms: false, }; const EMAIL_PATTERN = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; const MIN_PASSWORD_LENGTH = 8; const STRENGTH_LABELS = [ "خیلی کوتاه", "ضعیف", "متوسط", "خوب", "قوی", ] as const; const STRENGTH_COLORS = [ "bg-destructive", "bg-destructive", "bg-amber-500", "bg-amber-400", "bg-emerald-500", ] as const; /** Length-weighted strength score, 0–4 (NIST-style length bias). */ export function passwordStrength(password: string): number { if (password.length < MIN_PASSWORD_LENGTH) return 0; let score = 1; if (password.length >= 12) score += 1; if (password.length >= 16) score += 1; const classes = [/[a-z]/, /[A-Z]/, /\d/, /[^A-Za-z0-9]/].filter((pattern) => pattern.test(password), ).length; if (classes >= 3) score += 1; return Math.min(score, 4); } function defaultValidate(values: SignUpValues): SignUpErrors { const errors: SignUpErrors = {}; if (!values.name.trim()) { errors.name = "نام را وارد کنید."; } if (!values.email.trim()) { errors.email = "ایمیل را وارد کنید."; } else if (!EMAIL_PATTERN.test(values.email)) { errors.email = "این آدرس ایمیل درست به نظر نمی‌رسد."; } if (!values.password) { errors.password = "یک رمز عبور انتخاب کنید."; } else if (values.password.length < MIN_PASSWORD_LENGTH) { errors.password = `حداقل ${MIN_PASSWORD_LENGTH} نویسه لازم است.`; } if (!values.confirmPassword) { errors.confirmPassword = "رمز عبور را تأیید کنید."; } else if (values.confirmPassword !== values.password) { errors.confirmPassword = "رمزها یکسان نیستند."; } if (!values.terms) { errors.terms = "برای ادامه باید شرایط را بپذیرید."; } return errors; } type FieldInputProps = Omit< InputHTMLAttributes, "value" | "defaultValue" | "onChange" > & { label?: string; value?: string; onChange?: (value: string) => void; error?: string | boolean; reserveErrorLine?: boolean; success?: boolean; leftIcon?: ReactNode; rightIcon?: ReactNode; }; function FieldInput({ label, value = "", onChange, onFocus, onBlur, error, reserveErrorLine = false, success, leftIcon, rightIcon, className, disabled, id: idProp, type, ...rest }: FieldInputProps) { const reactId = useId(); const id = idProp ?? reactId; const reduce = useReducedMotion() ?? false; const fieldRef = useRef(null); const [focused, setFocused] = useState(false); const hasError = Boolean(error); const errorMessage = typeof error === "string" ? error : null; const rightSlot = success ? null : rightIcon; useEffect(() => { if (!fieldRef.current || reduce || !hasError) return; animate( fieldRef.current, { x: [0, -6, 6, -4, 4, -2, 0] }, { duration: 0.45 }, ); }, [hasError, reduce]); return (

{label ? ( {label} ) : null}

{leftIcon ? ( {leftIcon} ) : null} onChange?.(e.target.value)} onFocus={(event) => { setFocused(true); onFocus?.(event); }} onBlur={(event) => { setFocused(false); onBlur?.(event); }} className={cn( "peer h-full w-full bg-transparent text-base leading-6 text-foreground caret-foreground outline-none", "placeholder:text-muted-foreground/60", leftIcon ? "ps-10" : "ps-3.5", rightSlot || success ? "pe-10" : "pe-3.5", disabled && "cursor-not-allowed", )} /> {success ? ( ) : rightSlot ? ( {rightSlot} ) : null}

{reserveErrorLine || errorMessage ? (

{errorMessage ? ( {errorMessage} ) : null}

) : null}

); } function TermsCheckbox({ checked, disabled, label, onCheckedChange, "aria-describedby": describedBy, }: { checked: boolean; disabled?: boolean; label: string; onCheckedChange: (checked: boolean) => void; "aria-describedby"?: string; }) { const id = useId(); return ( onCheckedChange(e.target.checked)} className="mt-0.5 size-4 shrink-0 rounded-[4px] border-border accent-primary" /> {label} ); } function StatefulSubmit({ state, children, loadingText, successText, errorText, className, "aria-describedby": describedBy, }: { state: SignUpStatus; children: ReactNode; loadingText: string; successText: string; errorText: string; className?: string; "aria-describedby"?: string; }) { const reduce = useReducedMotion() ?? false; const label = state === "loading" ? loadingText : state === "success" ? successText : state === "error" ? errorText : children; return ( ); } /** Composed sign-up form with blur-gated errors, strength meter, and submit lifecycle. */ export function SignUpForm({ values: valuesProp, defaultValues, onValuesChange, onSubmit, validate, status: statusProp, errorMessage, title = "ساخت حساب کاربری", description = "در کمتر از یک دقیقه شروع کنید.", submitLabel = "ساخت حساب", loadingText = "در حال ساخت حساب", successText = "حساب ساخته شد", errorText = "دوباره تلاش کنید", footer, strengthMeter = true, className, classNames, }: SignUpFormProps) { const reduce = useReducedMotion() ?? false; const baseId = useId(); const controlled = valuesProp !== undefined; const [internalValues, setInternalValues] = useState({ ...EMPTY_VALUES, ...defaultValues, }); const values = controlled ? valuesProp : internalValues; const [internalStatus, setInternalStatus] = useState("idle"); const status = statusProp ?? internalStatus; const [revealPassword, setRevealPassword] = useState(false); const [touched, setTouched] = useState< Partial> >({}); const errors = useMemo( () => (validate ?? defaultValidate)(values), [values, validate], ); const setValue = useCallback( (key: K, next: SignUpValues[K]) => { const nextValues = { ...values, [key]: next }; if (!controlled) { setInternalValues(nextValues); if (statusProp === undefined) { setInternalStatus((current) => current === "success" || current === "error" ? "idle" : current, ); } } onValuesChange?.(nextValues); }, [controlled, onValuesChange, statusProp, values], ); const touch = useCallback((key: keyof SignUpValues) => { setTouched((prev) => (prev[key] ? prev : { ...prev, [key]: true })); }, []); const shownError = (key: keyof SignUpValues) => touched[key] ? errors[key] : undefined; const isValid = (key: keyof SignUpValues) => Boolean(touched[key]) && !errors[key] && Boolean(values[key]); const strength = passwordStrength(values.password); const showStrength = strengthMeter && values.password.length > 0; const isSubmitting = status === "loading"; const handleSubmit = async (event: FormEvent) => { event.preventDefault(); setTouched({ name: true, email: true, password: true, confirmPassword: true, terms: true, }); if (Object.keys(errors).length > 0) return; if (!onSubmit) return; if (statusProp === undefined) setInternalStatus("loading"); try { await onSubmit(values); if (statusProp === undefined) setInternalStatus("success"); } catch { if (statusProp === undefined) setInternalStatus("error"); } }; const termsErrorId = `${baseId}-terms-error`; const formErrorId = `${baseId}-form-error`; return (

{title || description ? (

{title ? (

{title}

) : null} {description ? (

{description}

) : null}

} disabled={isSubmitting} value={values.name} onChange={(next) => setValue("name", next)} onBlur={() => touch("name")} error={shownError("name")} reserveErrorLine success={isValid("name")} /> } disabled={isSubmitting} value={values.email} onChange={(next) => setValue("email", next)} onBlur={() => touch("email")} error={shownError("email")} reserveErrorLine success={isValid("email")} />

} rightIcon={ } disabled={isSubmitting} value={values.password} onChange={(next) => setValue("password", next)} onBlur={() => touch("password")} error={shownError("password")} reserveErrorLine /> {showStrength ? (

{[0, 1, 2, 3].map((index) => ( ))}

قدرت رمز: {STRENGTH_LABELS[strength]}

) : null}

} disabled={isSubmitting} value={values.confirmPassword} onChange={(next) => setValue("confirmPassword", next)} onBlur={() => touch("confirmPassword")} error={shownError("confirmPassword")} reserveErrorLine success={isValid("confirmPassword")} />

{ setValue("terms", next); touch("terms"); }} label="شرایط استفاده و حریم خصوصی را می‌پذیرم" aria-describedby={shownError("terms") ? termsErrorId : undefined} /> {shownError("terms") ? ( {shownError("terms")} ) : null}

{errorMessage ? ( {errorMessage} ) : null} {submitLabel} {footer ? (

{footer}

) : null}

); } export default function SignUpFormDemo() { const [formError, setFormError] = useState(); const [run, setRun] = useState(0); return (

{ setFormError(undefined); await new Promise((resolve) => setTimeout(resolve, 1200)); if (values.email.toLowerCase().startsWith("taken@")) { setFormError("این ایمیل قبلاً ثبت شده است."); throw new Error("Email already registered"); } }} footer={ <> قبلاً حساب دارید؟{" "} } />

); }