diff --git a/ipi-survey-platform/src/pages/ChangePassword/ChangePassword.jsx b/ipi-survey-platform/src/pages/ChangePassword/ChangePassword.jsx index 6a474fb..5d7f067 100644 --- a/ipi-survey-platform/src/pages/ChangePassword/ChangePassword.jsx +++ b/ipi-survey-platform/src/pages/ChangePassword/ChangePassword.jsx @@ -73,20 +73,20 @@ const ChangePassword = () => { 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); - - if (!isStrong) { - return "Password must meet complexity requirements."; - } - return ""; -}; + const validatePassword = (password) => { + const rules = [ + { regex: /.{8,}/, msg: "At least 8 characters" }, + { regex: /[A-Z]/, msg: "At least one uppercase letter" }, + { regex: /[a-z]/, msg: "At least one lowercase letter" }, + { regex: /[0-9]/, msg: "At least one number" }, + { regex: /[!@#$%^&*(),.?\":{}|<>]/, msg: "At least one special character" }, + ]; + + const failedRule = rules.find(r => !r.regex.test(password)); + return failedRule ? `Password must contain: ${failedRule.msg}.` : ""; + }; + const handleSubmit = async (e) => { e.preventDefault(); @@ -114,15 +114,16 @@ const handleSubmit = async (e) => { if (hasError) return; - const passwordError = validatePassword(newPassword); - if (passwordError) { - setNewPasswordError(passwordError); - } +const passwordError = validatePassword(newPassword); +if (passwordError) { + setNewPasswordError(passwordError); + return; +} - if (newPassword !== confirmPassword) { - setConfirmPasswordError("Passwords do not match."); - return; - } +if (newPassword !== confirmPassword) { + setConfirmPasswordError("Passwords do not match."); + return; +} setLoading(true); try { @@ -211,7 +212,12 @@ const handleSubmit = async (e) => { label="New Password" required value={newPassword} - onChange={(e) => setNewPassword(e.target.value)} + onChange={(e) => { + const value = e.target.value; + setNewPassword(value); + const passwordError = validatePassword(value); + setNewPasswordError(passwordError); + }} show={showNewPassword} toggleShow={() => setShowNewPassword((v) => !v)} placeholder="Enter new password" @@ -222,7 +228,11 @@ const handleSubmit = async (e) => { label="Confirm New Password" required value={confirmPassword} - onChange={(e) => setConfirmPassword(e.target.value)} + onChange={(e) => { + const value = e.target.value; + setConfirmPassword(value); + if (newPassword === value) setConfirmPasswordError(""); + }} show={showConfirmPassword} toggleShow={() => setShowConfirmPassword((v) => !v)} placeholder="Re-enter new password"