[FIXED] Improved the change password handling in profile edit page

src/Components/Form/FormFields/FormField.tsx

@@ -71,7 +71,19 @@ const FormField = ({
         )}
       </div>
       <div className={field?.className}>{children}</div>
-      <FieldErrorText error={field?.error} className={field?.errorClassName} />
+      {field?.error && field?.error?.split("\n").length > 1 ? (
+        field?.error?.split("\n").map((err) => (
+          <div key={err.length}>
+            <FieldErrorText error={err} className={field?.errorClassName} />
+            <br />
+          </div>
+        ))
+      ) : (
+        <FieldErrorText
+          error={field?.error}
+          className={field?.errorClassName}
+        />
+      )}
     </div>
   );
 };

src/Components/Users/UserProfile.tsx

@@ -130,14 +130,16 @@ export default function UserProfile() {
     new_password_2: "",
   });
 
-  const [changePasswordErrors] = useState<{
+  const [changePasswordErrors, setChangePasswordErrors] = useState<{
     old_password: string;
     password_confirmation: string;
   }>({
     old_password: "",
     password_confirmation: "",
   });
 
+  const [newPasswordError, setNewPasswordError] = useState<string>("");
+
   const [showEdit, setShowEdit] = useState<boolean | false>(false);
 
   const {
@@ -181,6 +183,45 @@ export default function UserProfile() {
     },
   );
 
+  const setNewPasswordErrorCallFun = (value: string) => {
+    if (value == "") {
+      setNewPasswordError("");
+      return;
+    }
+    setNewPasswordError(
+      [
+        value.length >= 8
+          ? ""
+          : "Password should be at least 8 characters long",
+        value !== value.toUpperCase()
+          ? ""
+          : "Password should contain at least 1 lowercase letter",
+        value !== value.toLowerCase()
+          ? ""
+          : "Password should contain at least 1 uppercase letter",
+        /\d/.test(value) ? "" : "Password should contain at least 1 number",
+      ]
+        .filter(Boolean)
+        .join("\n"), // Join only the non-empty error messages
+    );
+  };
+
+  const changePasswordErrorsCallFun = (value: string) => {
+    if (value === "" || value === changePasswordForm.new_password_1) {
+      setChangePasswordErrors((prev) => ({
+        ...prev,
+        password_confirmation: "",
+      }));
+      return;
+    } else {
+      setChangePasswordErrors((prev) => ({
+        ...prev,
+        password_confirmation:
+          "Confirm password should match the new password!",
+      }));
+    }
+  };
+
   const validateForm = () => {
     const errors = { ...initError };
     let invalidForm = false;
@@ -400,25 +441,38 @@ export default function UserProfile() {
     e.preventDefault();
     //validating form
     if (
-      changePasswordForm.new_password_1 != changePasswordForm.new_password_2
+      changePasswordForm.new_password_1 !== changePasswordForm.new_password_2
+    ) {
+      Notification.Error({
+        msg: "Passwords are different in new password and confirmation password column.",
+      });
+    } else if (
+      newPasswordError !== "" ||
+      changePasswordErrors.password_confirmation !== ""
     ) {
       Notification.Error({
-        msg: "Passwords are different in the new and the confirmation column.",
+        msg: "Entered Password is not valid, please check!",
+      });
+    } else if (
+      changePasswordForm.new_password_1 === changePasswordForm.old_password
+    ) {
+      Notification.Error({
+        msg: "New password is same as old password, Please enter a different new password.",
       });
     } else {
       const form: UpdatePasswordForm = {
         old_password: changePasswordForm.old_password,
         username: authUser.username,
         new_password: changePasswordForm.new_password_1,
       };
-      const { res, data } = await request(routes.updatePassword, {
+      const { res, data, error } = await request(routes.updatePassword, {
         body: form,
       });
       if (res?.ok && data?.message === "Password updated successfully") {
         Notification.Success({
           msg: "Password changed!",
         });
-      } else {
+      } else if (!error) {
         Notification.Error({
           msg: "There was some error. Please try again in some time.",
         });
@@ -781,13 +835,14 @@ export default function UserProfile() {
                           type="password"
                           value={changePasswordForm.new_password_1}
                           className="col-span-6 sm:col-span-3"
-                          onChange={(e) =>
+                          onChange={(e) => {
                             setChangePasswordForm({
                               ...changePasswordForm,
                               new_password_1: e.value,
-                            })
-                          }
-                          error=""
+                            });
+                            setNewPasswordErrorCallFun(e.value);
+                          }}
+                          error={newPasswordError}
                           required
                         />
                         <TextFormField
@@ -796,12 +851,13 @@ export default function UserProfile() {
                           className="col-span-6 sm:col-span-3"
                           type="password"
                           value={changePasswordForm.new_password_2}
-                          onChange={(e) =>
+                          onChange={(e) => {
                             setChangePasswordForm({
                               ...changePasswordForm,
                               new_password_2: e.value,
-                            })
-                          }
+                            });
+                            changePasswordErrorsCallFun(e.value);
+                          }}
                           error={changePasswordErrors.password_confirmation}
                         />
                       </div>