Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Issue 245 #274

Merged
merged 7 commits into from
Jul 25, 2024
Merged
Show file tree
Hide file tree
Changes from 2 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
164 changes: 164 additions & 0 deletions src/components/ChangePassword/index.js
Original file line number Diff line number Diff line change
@@ -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 = `
<form
data-select="change-password"
class="change-password"
action="submit"
>
<h3 class="change-password__title">
Senha antiga
</h3>
<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"/>

<h3 class="change-password__title">Nova senha</h3>

<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" 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>

<ul class="change-password__tips">
<li>Insira no mínimo 6 caracteres</li>
<li>A senha deve conter uma letra maiúscula</li>
<li>Deve conter um caractere especial</li>
</ul>
</form>
Clerijr marked this conversation as resolved.
Show resolved Hide resolved
`;

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;
};
Clerijr marked this conversation as resolved.
Show resolved Hide resolved

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,
);
47 changes: 47 additions & 0 deletions src/components/ChangePassword/index.scss
Clerijr marked this conversation as resolved.
Show resolved Hide resolved
Original file line number Diff line number Diff line change
@@ -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.$lg;
Clerijr marked this conversation as resolved.
Show resolved Hide resolved

background-color: colors.$secondary100;

&__title {
color: colors.$gray600;
font-size: fonts.$sm;
font-weight: fonts.$bold;
}

&__error {
display: none;

color: colors.$error100;

&.show-error {
display: block;
}
}

&__tips {
color: colors.$gray500;
font-weight: fonts.$regular;

list-style-type: disc;
padding-inline-start: 3rem;
}

&__separator {
width: 100%;

display: flex;

border: 0;
border-top: 0.1rem solid colors.$gray200;
}
}
33 changes: 33 additions & 0 deletions src/stories/ChangePassword.stories.js
Original file line number Diff line number Diff line change
@@ -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: 'Alterar Senha',
content: changePassword,
});

const $container = document.createElement('div');
button.mount($container);

button.listen('click', () => {
drawer.open();
});

return $container;
},
};

export const Default = {};