From 8dbf13f4f0aeb4456e54bd92d19118aa70d8424f Mon Sep 17 00:00:00 2001
From: bc-yevhenii-buliuk <yevhenii.buliuk@bigcommerce.com>
Date: Thu, 26 Sep 2024 18:29:26 +0300
Subject: [PATCH] fix(core): fixing the problem with submitting the password
 change form

---
 .changeset/swift-jeans-jam.md                 |  5 ++
 .../_components/change-password-form.tsx      | 87 ++++++-------------
 2 files changed, 32 insertions(+), 60 deletions(-)
 create mode 100644 .changeset/swift-jeans-jam.md

diff --git a/.changeset/swift-jeans-jam.md b/.changeset/swift-jeans-jam.md
new file mode 100644
index 0000000000..1df90636ea
--- /dev/null
+++ b/.changeset/swift-jeans-jam.md
@@ -0,0 +1,5 @@
+---
+"@bigcommerce/catalyst-core": patch
+---
+
+fixing the problem with submitting the password change form
diff --git a/core/app/[locale]/(default)/account/(tabs)/settings/change-password/_components/change-password-form.tsx b/core/app/[locale]/(default)/account/(tabs)/settings/change-password/_components/change-password-form.tsx
index d51b969633..add4bdeb44 100644
--- a/core/app/[locale]/(default)/account/(tabs)/settings/change-password/_components/change-password-form.tsx
+++ b/core/app/[locale]/(default)/account/(tabs)/settings/change-password/_components/change-password-form.tsx
@@ -132,32 +132,27 @@ export const ChangePasswordForm = () => {
   const handleCurrentPasswordChange = (e: ChangeEvent<HTMLInputElement>) =>
     setIsCurrentPasswordValid(!e.target.validity.valueMissing);
 
-  const handleNewPasswordChange = (e: ChangeEvent<HTMLInputElement>) => {
-    let formData;
-
-    if (e.target.form) {
-      formData = new FormData(e.target.form);
-    }
-
-    const confirmPassword = formData?.get('confirm-password');
-    const isValid = confirmPassword
-      ? validatePasswords('new-password', formData) &&
-        validatePasswords('confirm-password', formData)
-      : validatePasswords('new-password', formData);
-
-    setIsNewPasswordValid(isValid);
+  const validateNewAndConfirmPasswords = (formData: FormData) => {
+    const newPasswordValid = validatePasswords('new-password', formData);
+    const confirmPassword = formData.get('confirm-password');
+    const confirmPasswordValid = confirmPassword
+      ? validatePasswords('confirm-password', formData)
+      : true;
+
+    setIsNewPasswordValid(newPasswordValid);
+    setIsConfirmPasswordValid(confirmPasswordValid);
   };
 
-  const handleConfirmPasswordValidation = (e: ChangeEvent<HTMLInputElement>) => {
+  const handlePasswordChange = (e: ChangeEvent<HTMLInputElement>) => {
     let formData;
 
     if (e.target.form) {
       formData = new FormData(e.target.form);
     }
 
-    const isValid = validatePasswords('confirm-password', formData);
-
-    setIsConfirmPasswordValid(isValid);
+    if (formData) {
+      validateNewAndConfirmPasswords(formData);
+    }
   };
 
   return (
@@ -200,8 +195,8 @@ export const ChangePasswordForm = () => {
               autoComplete="none"
               error={!isNewPasswordValid}
               id="new-password"
-              onChange={handleNewPasswordChange}
-              onInvalid={handleNewPasswordChange}
+              onChange={handlePasswordChange}
+              onInvalid={handlePasswordChange}
               required
               type="password"
             />
@@ -212,31 +207,11 @@ export const ChangePasswordForm = () => {
           >
             {t('notEmptyMessage')}
           </FieldMessage>
-          <FieldMessage
-            className="absolute inset-x-0 inline-flex w-full text-sm text-error md:bottom-0"
-            match={(newPasswordValue: string, formData: FormData) => {
-              const currentPasswordValue = formData.get('current-password');
-              const confirmPassword = formData.get('confirm-password');
-              let isMatched;
-
-              if (confirmPassword) {
-                isMatched =
-                  newPasswordValue !== currentPasswordValue && newPasswordValue === confirmPassword;
-
-                setIsNewPasswordValid(isMatched);
-
-                return !isMatched;
-              }
-
-              isMatched = currentPasswordValue === newPasswordValue;
-
-              setIsNewPasswordValid(!isMatched);
-
-              return isMatched;
-            }}
-          >
-            {t('newPasswordValidationMessage')}
-          </FieldMessage>
+          {!isNewPasswordValid && (
+            <FieldMessage className="absolute inset-x-0 inline-flex w-full text-sm text-error md:bottom-0">
+              {t('newPasswordValidationMessage')}
+            </FieldMessage>
+          )}
         </Field>
         <Field className="relative space-y-2 pb-7" name="confirm-password">
           <FieldLabel htmlFor="confirm-password" isRequired={true}>
@@ -247,8 +222,8 @@ export const ChangePasswordForm = () => {
               autoComplete="none"
               error={!isConfirmPasswordValid}
               id="confirm-password"
-              onChange={handleConfirmPasswordValidation}
-              onInvalid={handleConfirmPasswordValidation}
+              onChange={handlePasswordChange}
+              onInvalid={handlePasswordChange}
               required
               type="password"
             />
@@ -259,19 +234,11 @@ export const ChangePasswordForm = () => {
           >
             {t('notEmptyMessage')}
           </FieldMessage>
-          <FieldMessage
-            className="absolute inset-x-0 bottom-0 inline-flex w-full text-sm text-error"
-            match={(confirmPassword: string, formData: FormData) => {
-              const newPassword = formData.get('new-password');
-              const isMatched = confirmPassword === newPassword;
-
-              setIsConfirmPasswordValid(isMatched);
-
-              return !isMatched;
-            }}
-          >
-            {t('confirmPasswordValidationMessage')}
-          </FieldMessage>
+          {!isConfirmPasswordValid && (
+            <FieldMessage className="absolute inset-x-0 bottom-0 inline-flex w-full text-sm text-error">
+              {t('confirmPasswordValidationMessage')}
+            </FieldMessage>
+          )}
         </Field>
         <div className="flex flex-col justify-start gap-4 md:flex-row">
           <FormSubmit asChild>