refactor: implementing bem and simplifying code

devhatt · Jul 2, 2024 · ff51ad8 · ff51ad8
1 parent d8e78b8
commit ff51ad8
Show file tree

Hide file tree

Showing 6 changed files with 75 additions and 128 deletions.
diff --git a/src/components/ChangePassword/index.js b/src/components/ChangePassword/index.js
@@ -3,8 +3,6 @@ import TextInput from '../TextInput';
 import Button from '../Button';
 import './index.scss';
 
-import eyeSlashIcon from './images/eye-slash.svg';
-
 const events = ['change-password'];
 
 const html = `
@@ -16,18 +14,20 @@ const html = `
           <h3 class="change-password__title">
             Senha antiga
           </h3>
-          <div data-select="password-input"></div>
-          <span data-select="password-error" class="change-password__error"></span>
-            
-          <hr class="divisor change-password__separator" />
+          <div data-select="password"></div>
+          <span data-select="password-error" class="change-password__error">Senha inválida</span>          
+
+          <hr class="change-password__separator" />
           
           <h3 class="change-password__title">Nova senha</h3>
           
-          <div data-select="new-password" class="change-password__new-password"></div>
-          <span data-select="new-password-error" class="error"></span>
+          <div data-select="new-password"></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" class="change-password__confirm-password"></div>
-          <span data-select="confirm-password__error" class="error"></span>
+          <div data-select="confirm-password"></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>
           
           <ul class="change-password__tips">
             <li>Insira no mínimo 6 caracteres</li>
@@ -39,66 +39,61 @@ const html = `
 
 export default function ChangePassword() {
   Component.call(this, { html, events });
-  const $changePasswordForm = this.selected.get('change-password-form');
-  const $passwordInputContainer = this.selected.get('password-input-container');
-  const $passwordErrorMessage = this.selected.get('password-error-message');
-  const $newPasswordInputContainer = this.selected.get(
-    'new-password-input-container',
-  );
-  const $newPasswordErrorMessage = this.selected.get(
-    'new-password-error-message',
-  );
-  const $confirmPasswordInputContainer = this.selected.get(
-    'confirm-password-input-container',
-  );
+  const $changePasswordForm = this.selected.get('change-password');
+  const $passwordInputContainer = this.selected.get('password');
+  const $currentPasswordErrorMessage = this.selected.get('password-error');
+  const $newPasswordInputContainer = this.selected.get('new-password');
+  const $newPasswordErrorMessage = this.selected.get('new-password-error');
+  const $newPasswordErrorMatch = this.selected.get('new-password-error-match');
+  const $confirmPasswordInputContainer = this.selected.get('confirm-password');
   const $confirmPasswordErrorMessage = this.selected.get(
-    'confirm-password-error-message',
+    'confirm-password-error',
+  );
+  const $confirmPasswordErrorMatch = this.selected.get(
+    'confirm-password-error-match',
   );
 
-  const passwordInput = new TextInput({
+  const currentPasswordInput = new TextInput({
     placeholder: 'Senha',
-    assetUrl: eyeSlashIcon,
     assetPosition: 'suffix',
+    type: 'password',
   });
   const newPasswordInput = new TextInput({
     placeholder: 'Nova senha',
-    assetUrl: eyeSlashIcon,
     assetPosition: 'suffix',
+    type: 'password',
   });
   const confirmPasswordInput = new TextInput({
     placeholder: ' Confirmar senha',
-    assetUrl: eyeSlashIcon,
     assetPosition: 'suffix',
+    type: 'password',
   });
   const submitButton = new Button({
     text: 'Salvar',
     isFullWidth: true,
     isDisabled: true,
   });
 
-  passwordInput.mount($passwordInputContainer);
+  currentPasswordInput.mount($passwordInputContainer);
   newPasswordInput.mount($newPasswordInputContainer);
   confirmPasswordInput.mount($confirmPasswordInputContainer);
   submitButton.mount($changePasswordForm);
 
-  passwordInput.selected.get('input-text').type = 'password';
-  newPasswordInput.selected.get('input-text').type = 'password';
-  confirmPasswordInput.selected.get('input-text').type = 'password';
-
   const validateFields = () => {
-    const password = passwordInput.selected.get('input-text').value;
+    const currentPassword =
+      currentPasswordInput.selected.get('input-text').value;
     const newPassword = newPasswordInput.selected.get('input-text').value;
     const confirmPassword =
       confirmPasswordInput.selected.get('input-text').value;
 
-    if (password && newPassword && confirmPassword) {
+    if (currentPassword && newPassword && confirmPassword) {
       submitButton.enable();
     } else {
       submitButton.disable();
     }
   };
 
-  passwordInput.selected
+  currentPasswordInput.selected
     .get('input-text')
     .addEventListener('input', validateFields);
   newPasswordInput.selected
@@ -109,51 +104,40 @@ export default function ChangePassword() {
     .addEventListener('input', validateFields);
 
   submitButton.listen('click', () => {
-    const password = passwordInput.selected.get('input-text').value;
+    let validPasswords = true;
     const newPassword = newPasswordInput.selected.get('input-text').value;
     const confirmPassword =
       confirmPasswordInput.selected.get('input-text').value;
-    let validPassword = true;
-    let validNewPassword = true;
-    let validConfirmPassword = true;
-
-    if (!this.validatePassword(password)) {
-      validPassword = false;
-      $passwordErrorMessage.classList.add('show-error');
-      $passwordErrorMessage.innerText = 'Senha inválida';
-      passwordInput.inputError();
-    }
-    if (!this.validatePassword(newPassword)) {
-      validNewPassword = false;
-      $newPasswordErrorMessage.classList.add('show-error');
-      $newPasswordErrorMessage.innerText = 'Senha inválida';
+    const showErrorMessage = (field, error) => {
+      const fieldValue = field.selected.get('input-text').value;
+      if (!this.validatePassword(fieldValue)) {
+        validPasswords = false;
+        error.classList.add('show-error');
+        field.inputError();
+      }
+    };
+    const removeErrors = (error) => {
+      error.classList.remove('show-error');
+    };
+
+    showErrorMessage(currentPasswordInput, $currentPasswordErrorMessage);
+    showErrorMessage(newPasswordInput, $newPasswordErrorMessage);
+    showErrorMessage(confirmPasswordInput, $confirmPasswordErrorMessage);
+
+    if (confirmPassword !== newPassword) {
+      validPasswords = false;
+      $newPasswordErrorMatch.classList.add('show-error');
+      $confirmPasswordErrorMatch.classList.add('show-error');
       newPasswordInput.inputError();
-    }
-    if (!this.validatePassword(confirmPassword)) {
-      validConfirmPassword = false;
-      $confirmPasswordErrorMessage.classList.add('show-error');
-      $confirmPasswordErrorMessage.innerText = 'Senha inválida';
       confirmPasswordInput.inputError();
     }
-    if (!this.comparePasswords(newPassword, confirmPassword)) {
-      validNewPassword = false;
-      validConfirmPassword = false;
-      $newPasswordErrorMessage.classList.add('show-error');
-      $confirmPasswordErrorMessage.classList.add('show-error');
-      $newPasswordErrorMessage.innerText = 'As senhas informadas não coincidem';
-      $confirmPasswordErrorMessage.innerText =
-        'As senhas informadas não coincidem';
-      newPasswordInput.inputError();
-      confirmPasswordInput.inputError();
-    }
-
-    if (validPassword) $passwordErrorMessage.classList.remove('show-error');
-    if (validNewPassword)
-      $newPasswordErrorMessage.classList.remove('show-error');
-    if (validConfirmPassword)
-      $confirmPasswordErrorMessage.classList.remove('show-error');
 
-    if (validPassword && validNewPassword && validConfirmPassword) {
+    if (validPasswords) {
+      removeErrors($currentPasswordErrorMessage);
+      removeErrors($newPasswordErrorMessage);
+      removeErrors($confirmPasswordErrorMessage);
+      removeErrors($newPasswordErrorMatch);
+      removeErrors($confirmPasswordErrorMatch);
       this.changePassword();
     }
   });
@@ -165,9 +149,6 @@ ChangePassword.prototype = Object.assign(
     changePassword() {
       this.emit('change-password');
     },
-    comparePasswords(password, newPassword) {
-      return password === newPassword;
-    },
     validatePassword(password) {
       const hasMinLength = password.length >= 10;
       const hasUppercase = /[A-Z]/g.test(password);

diff --git a/src/components/ChangePassword/index.scss b/src/components/ChangePassword/index.scss
@@ -2,7 +2,11 @@
 @use '~styles/fonts.scss' as fonts;
 @use '~styles/breakpoints.scss' as breakpoints;
 
-.change-password-container {
+.change-password {
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+
   font-family: fonts.$primaryFont;
   line-height: fonts.$headerLineHeight;
 
@@ -14,35 +18,13 @@
     font-weight: fonts.$headerFontWeight;
   }
 
-  &__change-password-form {
-    display: flex;
-    flex-direction: column;
-    gap: 2rem;
-
-    justify-content: start;
-
-    .input-text-container {
-      &__input {
-        background-size: auto 40%;
-
-        &.input-error {
-          color: rgb(255, 255, 255);
-        }
-      }
-    }
+  &__error {
+    display: none;
 
-    .button {
-      margin-top: 3rem;
-    }
-
-    .error-message {
-      display: none;
-
-      color: colors.$error100;
+    color: colors.$error100;
 
-      &.show-error {
-        display: block;
-      }
+    &.show-error {
+      display: block;
     }
   }
 
@@ -54,28 +36,12 @@
     padding-inline-start: 2rem;
   }
 
-  &__error-message {
-    display: block;
-
-    color: colors.$error100;
-
-    margin-top: 0.8rem;
-
-    user-select: all;
-  }
-
   &__separator {
-    display: flex;
-
-    .divisor {
-      width: 100%;
+    width: 100%;
 
-      border: unset;
-      border-top: 0.1rem solid colors.$gray200;
-    }
+    display: flex;
 
-    .separator-text {
-      margin: 0 2.8rem;
-    }
+    border: 0;
+    border-top: 0.1rem solid colors.$gray200;
   }
 }
diff --git a/src/stories/PetRegister.stories.js b/src/stories/PetRegister.stories.js
@@ -1,4 +1,4 @@
-import PetRegister from '../home/components/PetRegister';
+import PetRegister from '../layouts/app/pages/PetRegister/index';
 
 export default {
   title: 'Pages/PetProfile',

diff --git a/src/stories/PetRegisterPage.stories.js b/src/stories/PetRegisterPage.stories.js
@@ -1,4 +1,4 @@
-import PetRegisterPage from '../pages/layouts/PetRegisterPage';
+import PetRegisterPage from '../layouts/app';
 
 import afghanHound from './assets/petRegisterPage/afghanHound.svg';
 import akita from './assets/petRegisterPage/akita.svg';

diff --git a/src/stories/PetVetPage.stories.js b/src/stories/PetVetPage.stories.js
@@ -1,4 +1,4 @@
-import PetVetPage from '../home/components/PetVetPage';
+import PetVetPage from '../components/Vaccine/index';
 
 export default {
   title: 'Pages/PetVetPage',

diff --git a/src/stories/PetWeightPage.stories.js b/src/stories/PetWeightPage.stories.js
@@ -1,4 +1,4 @@
-import PetWeightPage from '../pages/layouts/PetWeightPage';
+import PetWeightPage from '../layouts/app/pages/PetWeight';
 
 export default {
   title: 'Pages/PetWeightPage',