refactor: rewrite functions to increase readability

devhatt · Jul 22, 2024 · da0bc54 · da0bc54
1 parent 7d05469
commit da0bc54
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 20 deletions.
diff --git a/src/components/ChangePassword/index.js b/src/components/ChangePassword/index.js
@@ -79,15 +79,6 @@ export default function ChangePassword() {
   confirmPasswordInput.mount($confirmPasswordInputContainer);
   submitButton.mount($changePasswordForm);
 
-  const validatePassword = (password) => {
-    const hasMinLength = password.length >= 10;
-    const hasUppercase = /[A-Z]/g.test(password);
-    const hasNumber = /[0-9]/g.test(password);
-    const hasSpecialCharacter = /[!@#$%^&*(),.?":{}|<>]/g.test(password);
-
-    return hasMinLength && hasUppercase && hasNumber && hasSpecialCharacter;
-  };
-
   const validateSubmit = () => {
     if (
       currentPasswordInput.getValue() &&
@@ -100,18 +91,31 @@ export default function ChangePassword() {
     }
   };
 
+  const validatePassword = (password) => {
+    const hasMinLength = password.length >= 10;
+    const hasUppercase = /[A-Z]/g.test(password);
+    const hasNumber = /[0-9]/g.test(password);
+    const hasSpecialCharacter = /[!@#$%^&*(),.?":{}|<>]/g.test(password);
+
+    return hasMinLength && hasUppercase && hasNumber && hasSpecialCharacter;
+  };
+
   currentPasswordInput.selected
     .get('input-text')
     .addEventListener('input', () => {
-      $currentPasswordErrorMessage.classList.remove();
+      $currentPasswordErrorMessage.classList.remove('show-error');
       validateSubmit();
     });
-  newPasswordInput.selected
-    .get('input-text')
-    .addEventListener('input', validateSubmit);
+  newPasswordInput.selected.get('input-text').addEventListener('input', () => {
+    $newPasswordErrorMessage.classList.remove('show-error');
+    validateSubmit();
+  });
   confirmPasswordInput.selected
     .get('input-text')
-    .addEventListener('input', validateSubmit);
+    .addEventListener('input', () => {
+      $confirmPasswordErrorMessage.classList.remove('show-error');
+      validateSubmit();
+    });
 
   submitButton.listen('click', () => {
     let validPasswords = true;
@@ -128,10 +132,6 @@ export default function ChangePassword() {
       }
     };
 
-    const removeErrors = (error) => {
-      error.classList.remove('show-error');
-    };
-
     showErrorMessage(currentPasswordInput, $currentPasswordErrorMessage);
     showErrorMessage(newPasswordInput, $newPasswordErrorMessage);
     showErrorMessage(confirmPasswordInput, $confirmPasswordErrorMessage);
@@ -144,6 +144,10 @@ export default function ChangePassword() {
       confirmPasswordInput.inputError();
     }
 
+    const removeErrors = (div) => {
+      div.classList.remove('show-error');
+    };
+
     if (validPasswords) {
       removeErrors($currentPasswordErrorMessage);
       removeErrors($newPasswordErrorMessage);

diff --git a/src/components/ChangePassword/index.scss b/src/components/ChangePassword/index.scss
@@ -28,12 +28,12 @@
     }
   }
 
-  &__password-tips {
+  &__tips {
     color: colors.$gray500;
     font-weight: fonts.$footerFontWeight;
 
     list-style-type: disc;
-    padding-inline-start: 2rem;
+    padding-inline-start: 3rem;
   }
 
   &__separator {