"use client"; import { CheckCircle2, Eye, EyeOff, Loader2, Lock, Shield } from "lucide-react"; import { useState } from "react"; import { Button } from "@/components/ui/button"; import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from "@/components/ui/card"; import { Field, FieldContent, FieldDescription, FieldError, FieldLabel, } from "@/components/ui/field"; import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, } from "@/components/ui/input-group"; import { cn } from "@/lib/utils"; 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; } 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<{ currentPassword?: string; newPassword?: string; confirmPassword?: string; }>({}); const validateCurrentPassword = (value: string): string | undefined => { if (!value) { return "Current password is required"; } return; }; const validateNewPassword = (value: string): string | undefined => { if (!value) { 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; }; const validateConfirmPassword = ( value: string, passwordValue: string ): string | undefined => { if (!value) { return "Please confirm your password"; } if (value !== passwordValue) { return "Passwords do not match"; } return; }; const handleSubmit = (e: React.FormEvent) => { e.preventDefault(); const currentPasswordError = validateCurrentPassword(currentPassword); const newPasswordError = validateNewPassword(newPassword); const confirmPasswordError = validateConfirmPassword( confirmPassword, newPassword ); if (currentPasswordError || newPasswordError || confirmPasswordError) { setLocalErrors({ currentPassword: currentPasswordError, newPassword: newPasswordError, confirmPassword: confirmPasswordError, }); return; } setLocalErrors({}); onSubmit?.({ currentPassword, newPassword, }); }; const handleCurrentPasswordChange = ( e: React.ChangeEvent ) => { const value = e.target.value; setCurrentPassword(value); if (localErrors.currentPassword) { setLocalErrors((prev) => ({ ...prev, currentPassword: validateCurrentPassword(value), })); } }; const handleNewPasswordChange = (e: React.ChangeEvent) => { const value = e.target.value; setNewPassword(value); if (localErrors.newPassword) { setLocalErrors((prev) => ({ ...prev, newPassword: validateNewPassword(value), })); } if (localErrors.confirmPassword && confirmPassword) { setLocalErrors((prev) => ({ ...prev, confirmPassword: validateConfirmPassword(confirmPassword, value), })); } }; const handleConfirmPasswordChange = ( e: React.ChangeEvent ) => { const value = e.target.value; setConfirmPassword(value); if (localErrors.confirmPassword) { setLocalErrors((prev) => ({ ...prev, confirmPassword: validateConfirmPassword(value, newPassword), })); } }; const currentPasswordError = errors?.currentPassword || localErrors.currentPassword; const newPasswordError = errors?.newPassword || localErrors.newPassword; const confirmPasswordError = errors?.confirmPassword || localErrors.confirmPassword; const generalError = errors?.general; if (isSuccess) { return ( Password changed Your password has been updated

{successMessage}

); } return ( Change password Update your password to keep your account secure

{generalError && (

{generalError}

)}

Current password * { e.preventDefault(); setShowCurrentPassword((prev) => !prev); }} type="button" > {showCurrentPassword ? ( ) : ( )} {currentPasswordError && ( {currentPasswordError} )} New password * { e.preventDefault(); setShowNewPassword((prev) => !prev); }} type="button" > {showNewPassword ? ( ) : ( )} {newPasswordError && ( {newPasswordError} )} Must be at least 8 characters with uppercase, lowercase, and number Confirm new password * { e.preventDefault(); setShowConfirmPassword((prev) => !prev); }} type="button" > {showConfirmPassword ? ( ) : ( )} {confirmPasswordError && ( {confirmPasswordError} )}

); }

Example Usage