"use client"; import { CheckCircle2, Eye, EyeOff, Loader2, Lock, Shield } from "lucide-react"; import { useCallback, 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"; export interface AuthChangePasswordProps { onSubmit?: (data: { currentPassword: string; newPassword: string }) => void; className?: string; isLoading?: boolean; isSuccess?: boolean; errors?: { currentPassword?: string; newPassword?: string; confirmPassword?: string; general?: string; }; successMessage?: string; } interface PasswordFieldProps { id: string; label: string; value: string; onChange: (e: React.ChangeEvent) => void; error?: string; showPassword: boolean; onTogglePassword: () => void; autoComplete: string; placeholder: string; icon: React.ReactNode; description?: string; } function PasswordField({ id, label, value, onChange, error, showPassword, onTogglePassword, autoComplete, placeholder, icon, description, }: PasswordFieldProps) { const errorId = error ? `${id}-error` : undefined; return ( {label} * {icon} { e.preventDefault(); onTogglePassword(); }} type="button" > {showPassword ? ( {error && ( {error} )} {description && {description}} ); } interface SuccessStateProps { message: string; className?: string; } function SuccessState({ message, className }: SuccessStateProps) { return ( Password changed Your password has been updated

{message}

); } interface ValidationErrors { currentPassword?: string; newPassword?: string; confirmPassword?: string; } function validateCurrentPassword(value: string): string | undefined { if (!value.trim()) { return "Current password is required"; } return; } function validateNewPassword( value: string, currentPassword: string ): string | undefined { if (!value.trim()) { return "New 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"; } if (value === currentPassword) { return "New password must be different from current password"; } return; } function validateConfirmPassword( value: string, passwordValue: string ): string | undefined { if (!value.trim()) { return "Please confirm your password"; } if (value !== passwordValue) { return "Passwords do not match"; } return; } export default function AuthChangePassword({ onSubmit, className, isLoading = false, isSuccess = false, errors, successMessage = "Your password has been changed successfully.", }: AuthChangePasswordProps) { const [currentPassword, setCurrentPassword] = useState(""); const [newPassword, setNewPassword] = useState(""); const [confirmPassword, setConfirmPassword] = useState(""); const [showCurrentPassword, setShowCurrentPassword] = useState(false); const [showNewPassword, setShowNewPassword] = useState(false); const [showConfirmPassword, setShowConfirmPassword] = useState(false); const [localErrors, setLocalErrors] = useState({}); const handleCurrentPasswordChange = useCallback( (e: React.ChangeEvent) => { const value = e.target.value; setCurrentPassword(value); if (localErrors.currentPassword) { setLocalErrors((prev) => ({ ...prev, currentPassword: validateCurrentPassword(value), })); } }, [localErrors.currentPassword] ); const handleNewPasswordChange = useCallback( (e: React.ChangeEvent) => { const value = e.target.value; setNewPassword(value); if (localErrors.newPassword) { setLocalErrors((prev) => ({ ...prev, newPassword: validateNewPassword(value, currentPassword), })); } if (localErrors.confirmPassword && confirmPassword) { setLocalErrors((prev) => ({ ...prev, confirmPassword: validateConfirmPassword(confirmPassword, value), })); } }, [ currentPassword, confirmPassword, localErrors.newPassword, localErrors.confirmPassword, ] ); const handleConfirmPasswordChange = useCallback( (e: React.ChangeEvent) => { const value = e.target.value; setConfirmPassword(value); if (localErrors.confirmPassword) { setLocalErrors((prev) => ({ ...prev, confirmPassword: validateConfirmPassword(value, newPassword), })); } }, [newPassword, localErrors.confirmPassword] ); const handleSubmit = useCallback( (e: React.FormEvent) => { e.preventDefault(); const currentPasswordError = validateCurrentPassword(currentPassword); const newPasswordError = validateNewPassword( newPassword, currentPassword ); const confirmPasswordError = validateConfirmPassword( confirmPassword, newPassword ); if (currentPasswordError || newPasswordError || confirmPasswordError) { setLocalErrors({ currentPassword: currentPasswordError, newPassword: newPasswordError, confirmPassword: confirmPasswordError, }); return; } setLocalErrors({}); onSubmit?.({ currentPassword: currentPassword.trim(), newPassword: newPassword.trim(), }); }, [currentPassword, newPassword, confirmPassword, onSubmit] ); if (isSuccess) { return ; } const currentPasswordError = errors?.currentPassword || localErrors.currentPassword; const newPasswordError = errors?.newPassword || localErrors.newPassword; const confirmPasswordError = errors?.confirmPassword || localErrors.confirmPassword; const generalError = errors?.general; return ( Change password Update your password to keep your account secure

{generalError && (

{generalError}

)}

} id="change-current-password" label="Current password" onChange={handleCurrentPasswordChange} onTogglePassword={() => setShowCurrentPassword((prev) => !prev)} placeholder="Enter current password…" showPassword={showCurrentPassword} value={currentPassword} /> } id="change-new-password" label="New password" onChange={handleNewPasswordChange} onTogglePassword={() => setShowNewPassword((prev) => !prev)} placeholder="Enter new password…" showPassword={showNewPassword} value={newPassword} />

); }

Example Usage