diff --git a/ipi-survey-platform/src/pages/ChangePassword/ChangePassword.jsx b/ipi-survey-platform/src/pages/ChangePassword/ChangePassword.jsx index 9d6a0f2..a6952f5 100644 --- a/ipi-survey-platform/src/pages/ChangePassword/ChangePassword.jsx +++ b/ipi-survey-platform/src/pages/ChangePassword/ChangePassword.jsx @@ -13,6 +13,7 @@ const ToggleableInput = ({ toggleShow, placeholder, required = false, + error, }) => (
{error}
} ); - const ChangePassword = () => { const navigate = useNavigate(); const location = useLocation(); @@ -71,88 +69,95 @@ const ChangePassword = () => { const [loading, setLoading] = React.useState(false); const [error, setError] = React.useState(""); const [success, setSuccess] = React.useState(""); + const [otpError, setOtpError] = React.useState(""); + const [newPasswordError, setNewPasswordError] = React.useState(""); + const [confirmPasswordError, setConfirmPasswordError] = React.useState(""); +const validatePassword = (password) => { + const isStrong = + /.{8,}/.test(password) && + /[A-Z]/.test(password) && + /[a-z]/.test(password) && + /[0-9]/.test(password) && + /[!@#$%^&*(),.?":{}|<>]/.test(password); - const validatePassword = (password) => { - const minLength = /.{8,}/; - const uppercase = /[A-Z]/; - const lowercase = /[a-z]/; - const number = /[0-9]/; - const specialChar = /[!@#$%^&*(),.?":{}|<>]/; + if (!isStrong) { + return "Password must meet complexity requirements."; + } + return ""; +}; - if (!minLength.test(password)) - return "Password must be at least 8 characters long."; - if (!uppercase.test(password)) - return "Password must contain at least one uppercase letter."; - if (!lowercase.test(password)) - return "Password must contain at least one lowercase letter."; - if (!number.test(password)) - return "Password must contain at least one number."; - if (!specialChar.test(password)) - return "Password must contain at least one special character."; +const handleSubmit = async (e) => { + e.preventDefault(); - return ""; - }; + setError(""); + setSuccess(""); - const handleSubmit = async (e) => { - e.preventDefault(); - setError(""); - setSuccess(""); + setOtpError(""); + setNewPasswordError(""); + setConfirmPasswordError(""); - if (!registeredEmail) { - setError("Missing registered email. Please restart the process."); - return; + let hasError = false; + + if (!otp.trim()) { + setOtpError("Verification code is required."); + hasError = true; + } + if (!newPassword.trim()) { + setNewPasswordError("New password is required."); + hasError = true; + } + if (!confirmPassword.trim()) { + setConfirmPasswordError("Confirm password is required."); + hasError = true; + } + + if (hasError) return; + + const passwordError = validatePassword(newPassword); + if (passwordError) { + setNewPasswordError(passwordError); + } + + if (newPassword !== confirmPassword) { + setConfirmPasswordError("Passwords do not match."); + return; + } + + setLoading(true); + try { + const payload = { + registered_email: registeredEmail, + otp: otp.trim(), + password: newPassword, + confirm_password: confirmPassword, + }; + + const response = await apiClient.post("/forgot-password/verify-otp", payload); + + if (response?.data) { + setSuccess("Password changed successfully. Redirecting to login..."); + setTimeout(() => { + navigate("/login", { + state: { + showSuccessToast: true, + successMessage: + "Password reset successful. Please login with your new password.", + }, + }); + }, 1500); + } else { + setError("Something went wrong. Please try again."); } - - if (!otp || !newPassword || !confirmPassword) { - setError("Please fill in all fields."); - return; - } - - const passwordError = validatePassword(newPassword); - if (passwordError) { - setError(passwordError); - return; - } - - if (newPassword !== confirmPassword) { - setError("Passwords do not match."); - return; - } - - setLoading(true); - try { - const payload = { - registered_email: registeredEmail, - otp: otp.trim(), - password: newPassword, - confirm_password: confirmPassword, - }; - - const response = await apiClient.post("/forgot-password/verify-otp", payload); - - if (response?.data) { - setSuccess("Password changed successfully. Redirecting to login..."); - setTimeout(() => { - navigate("/login", { - state: { - showSuccessToast: true, - successMessage: "Password reset successful. Please login with your new password." - } - }); - }, 1500); - } else { - setError("Something went wrong. Please try again."); - } - } catch (err) { - const msg = - err.response?.data?.message || - err.message || - "Password change failed. Please verify the details."; - setError(msg); - } finally { - setLoading(false); - } - }; + } catch (err) { + const msg = + err.response?.data?.message || + err.message || + "Password change failed. Please verify the details."; + setError(msg); + } finally { + setLoading(false); + } +}; return (