From 58d173b102f88053f1c0a1ea78e80e330db94de8 Mon Sep 17 00:00:00 2001 From: Clerivaldo Date: Mon, 22 Jul 2024 17:50:35 -0300 Subject: [PATCH 1/5] feat: add component for change password --- src/components/ChangePassword/index.js | 164 +++++++++++++++++++++++ src/components/ChangePassword/index.scss | 47 +++++++ src/stories/ChangePassword.stories.js | 33 +++++ 3 files changed, 244 insertions(+) create mode 100644 src/components/ChangePassword/index.js create mode 100644 src/components/ChangePassword/index.scss create mode 100644 src/stories/ChangePassword.stories.js diff --git a/src/components/ChangePassword/index.js b/src/components/ChangePassword/index.js new file mode 100644 index 00000000..d21c8fed --- /dev/null +++ b/src/components/ChangePassword/index.js @@ -0,0 +1,164 @@ +import { Component } from 'pet-dex-utilities'; +import TextInput from '../TextInput'; +import Button from '../Button'; +import './index.scss'; + +const events = ['password:change']; + +const html = ` +
+

+ Senha antiga +

+
+ Senha inválida + +
+ +

Nova senha

+ +
+ Senha inválida + As senhas não coincidem + +
+ Senha inválida + As senhas não coincidem + + +
+`; + +export default function ChangePassword() { + Component.call(this, { html, events }); + 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', + ); + const $confirmPasswordErrorMatch = this.selected.get( + 'confirm-password-error-match', + ); + + const currentPasswordInput = new TextInput({ + placeholder: 'Senha', + assetPosition: 'suffix', + type: 'password', + }); + const newPasswordInput = new TextInput({ + placeholder: 'Nova senha', + assetPosition: 'suffix', + type: 'password', + }); + const confirmPasswordInput = new TextInput({ + placeholder: ' Confirmar senha', + assetPosition: 'suffix', + type: 'password', + }); + const submitButton = new Button({ + text: 'Salvar', + isFullWidth: true, + isDisabled: true, + }); + + currentPasswordInput.mount($passwordInputContainer); + newPasswordInput.mount($newPasswordInputContainer); + confirmPasswordInput.mount($confirmPasswordInputContainer); + submitButton.mount($changePasswordForm); + + const validateSubmit = () => { + if ( + currentPasswordInput.getValue() && + newPasswordInput.getValue() && + confirmPasswordInput.getValue() + ) { + submitButton.enable(); + } else { + submitButton.disable(); + } + }; + + 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('show-error'); + validateSubmit(); + }); + newPasswordInput.selected.get('input-text').addEventListener('input', () => { + $newPasswordErrorMessage.classList.remove('show-error'); + validateSubmit(); + }); + confirmPasswordInput.selected + .get('input-text') + .addEventListener('input', () => { + $confirmPasswordErrorMessage.classList.remove('show-error'); + 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 (!validatePassword(fieldValue)) { + validPasswords = false; + error.classList.add('show-error'); + field.inputError(); + } + }; + + 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(); + confirmPasswordInput.inputError(); + } + + const removeErrors = (div) => { + div.classList.remove('show-error'); + }; + + if (validPasswords) { + removeErrors($currentPasswordErrorMessage); + removeErrors($newPasswordErrorMessage); + removeErrors($confirmPasswordErrorMessage); + removeErrors($newPasswordErrorMatch); + removeErrors($confirmPasswordErrorMatch); + this.emit('password:change'); + } + }); +} +ChangePassword.prototype = Object.assign( + ChangePassword.prototype, + Component.prototype, +); diff --git a/src/components/ChangePassword/index.scss b/src/components/ChangePassword/index.scss new file mode 100644 index 00000000..6e971365 --- /dev/null +++ b/src/components/ChangePassword/index.scss @@ -0,0 +1,47 @@ +@use '~styles/colors.scss' as colors; +@use '~styles/fonts.scss' as fonts; +@use '~styles/breakpoints.scss' as breakpoints; + +.change-password { + display: flex; + flex-direction: column; + gap: 2rem; + + font-family: fonts.$primaryFont; + //line-height: fonts.$headerLineHeight; + + background-color: colors.$secondary100; + + &__title { + color: colors.$gray600; + font-size: 1.8rem; + //font-weight: fonts.$headerFontWeight; + } + + &__error { + display: none; + + color: colors.$error100; + + &.show-error { + display: block; + } + } + + &__tips { + color: colors.$gray500; + //font-weight: fonts.$footerFontWeight; + + list-style-type: disc; + padding-inline-start: 3rem; + } + + &__separator { + width: 100%; + + display: flex; + + border: 0; + border-top: 0.1rem solid colors.$gray200; + } +} diff --git a/src/stories/ChangePassword.stories.js b/src/stories/ChangePassword.stories.js new file mode 100644 index 00000000..b3b4d51c --- /dev/null +++ b/src/stories/ChangePassword.stories.js @@ -0,0 +1,33 @@ +import ChangePassword from '../components/ChangePassword'; +import { initializeSwiper } from '../utils/swiper'; +import Drawer from '../components/Drawer'; +import Button from '../components/Button'; + +export default { + title: 'Components/ChangePassword', + render: (args) => { + initializeSwiper(); + const button = new Button({ + text: 'Abrir change password', + isFullWidth: true, + isDisabled: false, + }); + + const changePassword = new ChangePassword(args); + const drawer = new Drawer({ + title: 'ChangePassword', + content: changePassword, + }); + + const $container = document.createElement('div'); + button.mount($container); + + button.listen('click', () => { + drawer.open(); + }); + + return $container; + }, +}; + +export const Default = {}; From cb007177443cc76c88009679ca703dc6dbf14912 Mon Sep 17 00:00:00 2001 From: Clerivaldo Date: Mon, 22 Jul 2024 18:08:17 -0300 Subject: [PATCH 2/5] style: adding styles --- src/components/ChangePassword/index.scss | 8 ++++---- src/stories/ChangePassword.stories.js | 2 +- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/ChangePassword/index.scss b/src/components/ChangePassword/index.scss index 6e971365..c72c3017 100644 --- a/src/components/ChangePassword/index.scss +++ b/src/components/ChangePassword/index.scss @@ -8,14 +8,14 @@ gap: 2rem; font-family: fonts.$primaryFont; - //line-height: fonts.$headerLineHeight; + line-height: fonts.$lg; background-color: colors.$secondary100; &__title { color: colors.$gray600; - font-size: 1.8rem; - //font-weight: fonts.$headerFontWeight; + font-size: fonts.$sm; + font-weight: fonts.$bold; } &__error { @@ -30,7 +30,7 @@ &__tips { color: colors.$gray500; - //font-weight: fonts.$footerFontWeight; + font-weight: fonts.$regular; list-style-type: disc; padding-inline-start: 3rem; diff --git a/src/stories/ChangePassword.stories.js b/src/stories/ChangePassword.stories.js index b3b4d51c..b607bcbb 100644 --- a/src/stories/ChangePassword.stories.js +++ b/src/stories/ChangePassword.stories.js @@ -15,7 +15,7 @@ export default { const changePassword = new ChangePassword(args); const drawer = new Drawer({ - title: 'ChangePassword', + title: 'Alterar Senha', content: changePassword, }); From e95888bff1582a2d1562c9137a6601ae3ba093ef Mon Sep 17 00:00:00 2001 From: Clerivaldo Date: Wed, 24 Jul 2024 10:33:58 -0300 Subject: [PATCH 3/5] fix: fixing styles --- src/components/ChangePassword/index.js | 73 ++++++++++++------------ src/components/ChangePassword/index.scss | 8 ++- 2 files changed, 43 insertions(+), 38 deletions(-) diff --git a/src/components/ChangePassword/index.js b/src/components/ChangePassword/index.js index d21c8fed..05c309f6 100644 --- a/src/components/ChangePassword/index.js +++ b/src/components/ChangePassword/index.js @@ -6,36 +6,43 @@ import './index.scss'; const events = ['password:change']; const html = ` -
-

- Senha antiga -

-
- Senha inválida + +

+ Senha antiga +

+
+ Senha inválida +
+ +

Nova senha

+ +
+ Senha inválida + As senhas não coincidem +
+ Senha inválida + As senhas não coincidem + +
    +
  • Insira no mínimo 6 caracteres
    • +
  • A senha deve conter uma letra maiúscula
    • +
  • Deve conter um caractere especial
    • +
+
+`; -
- -

Nova senha

- -
- Senha inválida - As senhas não coincidem +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); -
- Senha inválida - As senhas não coincidem - -
    -
  • Insira no mínimo 6 caracteres
    • -
  • A senha deve conter uma letra maiúscula
    • -
  • Deve conter um caractere especial
    • -
- -`; + return hasMinLength && hasUppercase && hasNumber && hasSpecialCharacter; +}; export default function ChangePassword() { Component.call(this, { html, events }); @@ -91,15 +98,7 @@ 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; - }; - + submitButton.selected.get('button').classList.add('change-password__button'); currentPasswordInput.selected .get('input-text') .addEventListener('input', () => { diff --git a/src/components/ChangePassword/index.scss b/src/components/ChangePassword/index.scss index c72c3017..1ba8e958 100644 --- a/src/components/ChangePassword/index.scss +++ b/src/components/ChangePassword/index.scss @@ -8,7 +8,9 @@ gap: 2rem; font-family: fonts.$primaryFont; - line-height: fonts.$lg; + line-height: 20px; + + padding: 0 5px; background-color: colors.$secondary100; @@ -36,6 +38,10 @@ padding-inline-start: 3rem; } + &__button { + align-self: end; + } + &__separator { width: 100%; From 3e0029d11c1a76d72d6992de043b306b9381e2aa Mon Sep 17 00:00:00 2001 From: Clerivaldo Date: Wed, 24 Jul 2024 13:17:08 -0300 Subject: [PATCH 4/5] style: moving button to bottom --- src/components/ChangePassword/index.scss | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/ChangePassword/index.scss b/src/components/ChangePassword/index.scss index 1ba8e958..f2fe2780 100644 --- a/src/components/ChangePassword/index.scss +++ b/src/components/ChangePassword/index.scss @@ -3,6 +3,8 @@ @use '~styles/breakpoints.scss' as breakpoints; .change-password { + height: 100%; + display: flex; flex-direction: column; gap: 2rem; @@ -39,7 +41,7 @@ } &__button { - align-self: end; + margin-top: auto; } &__separator { From 3a01ffc41ed069aef1198884832575be6166c12e Mon Sep 17 00:00:00 2001 From: Clerivaldo Date: Thu, 25 Jul 2024 10:45:23 -0300 Subject: [PATCH 5/5] fix: correcting styles --- src/components/ChangePassword/index.scss | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/ChangePassword/index.scss b/src/components/ChangePassword/index.scss index f2fe2780..6d9d36e3 100644 --- a/src/components/ChangePassword/index.scss +++ b/src/components/ChangePassword/index.scss @@ -10,9 +10,9 @@ gap: 2rem; font-family: fonts.$primaryFont; - line-height: 20px; + line-height: 1.5; - padding: 0 5px; + padding: 0 2rem; background-color: colors.$secondary100; @@ -42,6 +42,7 @@ &__button { margin-top: auto; + margin-bottom: 1rem; } &__separator {