error message bug solved

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"