refactor: add code review changes

devhatt · Jul 11, 2024 · 7d05469 · 7d05469
1 parent ff51ad8
commit 7d05469
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 31 deletions.
diff --git a/src/components/ChangePassword/index.js b/src/components/ChangePassword/index.js
@@ -3,7 +3,7 @@ import TextInput from '../TextInput';
 import Button from '../Button';
 import './index.scss';
 
-const events = ['change-password'];
+const events = ['password:change'];
 
 const html = `
         <form
@@ -14,18 +14,18 @@ const html = `
           <h3 class="change-password__title">
             Senha antiga
           </h3>
-          <div data-select="password"></div>
+          <div data-select="password" class="change-password__input"></div>
           <span data-select="password-error" class="change-password__error">Senha inválida</span>          
 
-          <hr class="change-password__separator" />
+          <hr class="change-password__separator"/>
           
           <h3 class="change-password__title">Nova senha</h3>
           
-          <div data-select="new-password"></div>
+          <div data-select="new-password" class="change-password__input"></div>
           <span data-select="new-password-error" class="change-password__error">Senha inválida</span>
           <span data-select="new-password-error-match" class="change-password__error">As senhas não coincidem</span>
 
-          <div data-select="confirm-password"></div>
+          <div data-select="confirm-password" class="change-password__input"></div>
           <span data-select="confirm-password-error" class="change-password__error">Senha inválida</span>
           <span data-select="confirm-password-error-match" class="change-password__error">As senhas não coincidem</span>
           
@@ -79,14 +79,21 @@ export default function ChangePassword() {
   confirmPasswordInput.mount($confirmPasswordInputContainer);
   submitButton.mount($changePasswordForm);
 
-  const validateFields = () => {
-    const currentPassword =
-      currentPasswordInput.selected.get('input-text').value;
-    const newPassword = newPasswordInput.selected.get('input-text').value;
-    const confirmPassword =
-      confirmPasswordInput.selected.get('input-text').value;
+  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);
 
-    if (currentPassword && newPassword && confirmPassword) {
+    return hasMinLength && hasUppercase && hasNumber && hasSpecialCharacter;
+  };
+
+  const validateSubmit = () => {
+    if (
+      currentPasswordInput.getValue() &&
+      newPasswordInput.getValue() &&
+      confirmPasswordInput.getValue()
+    ) {
       submitButton.enable();
     } else {
       submitButton.disable();
@@ -95,27 +102,32 @@ export default function ChangePassword() {
 
   currentPasswordInput.selected
     .get('input-text')
-    .addEventListener('input', validateFields);
+    .addEventListener('input', () => {
+      $currentPasswordErrorMessage.classList.remove();
+      validateSubmit();
+    });
   newPasswordInput.selected
     .get('input-text')
-    .addEventListener('input', validateFields);
+    .addEventListener('input', validateSubmit);
   confirmPasswordInput.selected
     .get('input-text')
-    .addEventListener('input', validateFields);
+    .addEventListener('input', validateSubmit);
 
   submitButton.listen('click', () => {
     let validPasswords = true;
     const newPassword = newPasswordInput.selected.get('input-text').value;
     const confirmPassword =
       confirmPasswordInput.selected.get('input-text').value;
+
     const showErrorMessage = (field, error) => {
       const fieldValue = field.selected.get('input-text').value;
-      if (!this.validatePassword(fieldValue)) {
+      if (!validatePassword(fieldValue)) {
         validPasswords = false;
         error.classList.add('show-error');
         field.inputError();
       }
     };
+
     const removeErrors = (error) => {
       error.classList.remove('show-error');
     };
@@ -138,24 +150,11 @@ export default function ChangePassword() {
       removeErrors($confirmPasswordErrorMessage);
       removeErrors($newPasswordErrorMatch);
       removeErrors($confirmPasswordErrorMatch);
-      this.changePassword();
+      this.emit('password:change');
     }
   });
 }
 ChangePassword.prototype = Object.assign(
   ChangePassword.prototype,
   Component.prototype,
-  {
-    changePassword() {
-      this.emit('change-password');
-    },
-    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;
-    },
-  },
 );
diff --git a/src/components/ChangePassword/index.scss b/src/components/ChangePassword/index.scss
@@ -10,7 +10,7 @@
   font-family: fonts.$primaryFont;
   line-height: fonts.$headerLineHeight;
 
-  background-color: rgb(255, 255, 255);
+  background-color: colors.$secondary100;
 
   &__title {
     color: colors.$gray600;