"use client"; import { CheckCircle2, Eye, EyeOff, Loader2, Lock } from "lucide-react"; import { useCallback, useMemo, useState } from "react"; import { cn } from "@/lib/utils"; import { Button } from "@/registry/new-york/ui/button"; import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from "@/registry/new-york/ui/card"; import { Field, FieldContent, FieldDescription, FieldError, FieldLabel, } from "@/registry/new-york/ui/field"; import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, } from "@/registry/new-york/ui/input-group"; import { Progress } from "@/registry/new-york/ui/progress"; export interface PasswordStrength { score: number; // 0-4 feedback: string[]; } export interface AuthResetPasswordProps { token?: string; onSubmit?: (data: { password: string; token: string }) => void; onTokenValidate?: (token: string) => Promise; className?: string; isLoading?: boolean; isTokenValid?: boolean; isTokenValidating?: boolean; errors?: { password?: string; confirmPassword?: string; token?: string; general?: string; }; } function calculatePasswordStrength(password: string): PasswordStrength { let score = 0; const feedback: string[] = []; if (password.length >= 8) { score += 1; } else { feedback.push("At least 8 characters"); } if (/[a-z]/.test(password)) { score += 1; } else { feedback.push("One lowercase letter"); } if (/[A-Z]/.test(password)) { score += 1; } else { feedback.push("One uppercase letter"); } if (/\d/.test(password)) { score += 1; } else { feedback.push("One number"); } if (/[^a-zA-Z\d]/.test(password)) { score += 1; } else { feedback.push("One special character"); } return { score, feedback }; } function getStrengthLabel(score: number): string { if (score <= 1) return "Weak"; if (score <= 2) return "Fair"; if (score <= 3) return "Good"; return "Strong"; } function validatePassword(value: string): string | undefined { if (!value) { return "Password is required"; } if (value.length < 8) { return "Password must be at least 8 characters"; } if (!/(?=.*[a-z])/.test(value)) { return "Password must contain at least one lowercase letter"; } if (!/(?=.*[A-Z])/.test(value)) { return "Password must contain at least one uppercase letter"; } if (!/(?=.*\d)/.test(value)) { return "Password must contain at least one number"; } return; } function validateConfirmPassword( value: string, passwordValue: string ): string | undefined { if (!value) { return "Please confirm your password"; } if (value !== passwordValue) { return "Passwords do not match"; } return; } interface ErrorAlertProps { message: string; } function ErrorAlert({ message }: ErrorAlertProps) { return (

{message}

); } interface TokenValidatingStateProps { className?: string; } function TokenValidatingState({ className }: TokenValidatingStateProps) { return ( Validating reset token Please wait while we verify your reset link

); } interface InvalidTokenStateProps { className?: string; message?: string; } function InvalidTokenState({ className, message }: InvalidTokenStateProps) { return ( Invalid reset link This password reset link is invalid or has expired

{message || "Please request a new password reset link."}

); } interface PasswordStrengthIndicatorProps { feedback: string[]; score: number; } function PasswordStrengthIndicator({ feedback, score, }: PasswordStrengthIndicatorProps) { return (

= 4 && "text-green-500" )} > {getStrengthLabel(score)}

{feedback.length > 0 && ( Missing: {feedback.join(", ")} )}

); } interface PasswordFieldProps { error?: string; id: string; password: string; passwordStrength: PasswordStrength; onChange: (e: React.ChangeEvent) => void; onTogglePassword: () => void; showPassword: boolean; } function PasswordField({ error, id, password, passwordStrength, onChange, onTogglePassword, showPassword, }: PasswordFieldProps) { return ( New password * { e.preventDefault(); onTogglePassword(); }} type="button" > {showPassword ? ( {error && {error}} {password && ( )} ); } interface ConfirmPasswordFieldProps { error?: string; id: string; onChange: (e: React.ChangeEvent) => void; onTogglePassword: () => void; showPassword: boolean; value: string; } function ConfirmPasswordField({ error, id, onChange, onTogglePassword, showPassword, value, }: ConfirmPasswordFieldProps) { return ( Confirm password * { e.preventDefault(); onTogglePassword(); }} type="button" > {showPassword ? ( {error && {error}} ); } export default function AuthResetPassword({ token = "", onSubmit, onTokenValidate, className, isLoading = false, isTokenValid, isTokenValidating = false, errors, }: AuthResetPasswordProps) { const [password, setPassword] = useState(""); const [confirmPassword, setConfirmPassword] = useState(""); const [showPassword, setShowPassword] = useState(false); const [showConfirmPassword, setShowConfirmPassword] = useState(false); const [localErrors, setLocalErrors] = useState<{ password?: string; confirmPassword?: string; }>({}); const passwordStrength = useMemo( () => calculatePasswordStrength(password), [password] ); const handleSubmit = useCallback( (e: React.FormEvent) => { e.preventDefault(); const passwordError = validatePassword(password); const confirmPasswordError = validateConfirmPassword( confirmPassword, password ); if (passwordError || confirmPasswordError) { setLocalErrors({ password: passwordError, confirmPassword: confirmPasswordError, }); return; } setLocalErrors({}); onSubmit?.({ password, token, }); }, [password, confirmPassword, token, onSubmit] ); const handlePasswordChange = useCallback( (e: React.ChangeEvent) => { const value = e.target.value; setPassword(value); if (localErrors.password) { setLocalErrors((prev) => ({ ...prev, password: validatePassword(value), })); } if (localErrors.confirmPassword && confirmPassword) { setLocalErrors((prev) => ({ ...prev, confirmPassword: validateConfirmPassword(confirmPassword, value), })); } }, [localErrors.password, localErrors.confirmPassword, confirmPassword] ); const handleConfirmPasswordChange = useCallback( (e: React.ChangeEvent) => { const value = e.target.value; setConfirmPassword(value); if (localErrors.confirmPassword) { setLocalErrors((prev) => ({ ...prev, confirmPassword: validateConfirmPassword(value, password), })); } }, [localErrors.confirmPassword, password] ); const handleTogglePassword = useCallback(() => { setShowPassword((prev) => !prev); }, []); const handleToggleConfirmPassword = useCallback(() => { setShowConfirmPassword((prev) => !prev); }, []); const passwordError = errors?.password || localErrors.password; const confirmPasswordError = errors?.confirmPassword || localErrors.confirmPassword; const generalError = errors?.general; const tokenError = errors?.token; if (onTokenValidate && isTokenValid === undefined && !isTokenValidating) { onTokenValidate(token); } if (isTokenValidating) { return ; } if (isTokenValid === false || tokenError) { return ; } return ( Reset your password Enter your new password below ); }

Example Usage