-
Crie sua petconta
-
-
-
-
-
-
-
- Ou
-
-
-
-
+
`;
export default function RegisterForm() {
Component.call(this, { html, events });
- const $formFieldsContainer = this.selected.get('form-fields');
+ const $formButton = this.selected.get('form-button');
+ const $fields = this.selected.get('fields');
- const formFields = new Fields();
+ const name = new Field({
+ label: 'Nome',
+ error: 'Informe seu nome',
+ content: new TextInput({
+ id: 'name',
+ placeholder: 'Devhat',
+ }),
+ });
- formFields.mount($formFieldsContainer);
+ const surname = new Field({
+ label: 'Sobrenome',
+ error: 'Informe seu sobrenome',
+ content: new TextInput({
+ id: 'surname',
+ placeholder: 'Devhat',
+ }),
+ });
+
+ const birth = new Field({
+ label: 'Data de nascimento',
+ error: 'Informe sua data de nascimento',
+ content: new TextInput({
+ id: 'birth',
+ placeholder: '13/12/1995',
+ }),
+ });
+
+ const local = new Field({
+ label: 'Cidade',
+ error: 'Informe sua cidade',
+ content: new Dropdown({
+ items: [
+ {
+ text: 'Fortaleza',
+ value: 'FOR',
+ },
+ {
+ text: 'São Paulo',
+ value: 'SP',
+ },
+ ],
+ id: 'local',
+ placeholder: 'São Paulo, SP',
+ }),
+ });
+
+ const email = new Field({
+ label: 'E-mail',
+ error: 'Informe um E-mail válido',
+ content: new TextInput({
+ id: 'email',
+ placeholder: 'dev@devhat.com.br',
+ type: 'email',
+ }),
+ });
+
+ const phone = new Field({
+ label: 'Telefone',
+ error: 'Informe um número de telefone válido',
+ content: new TextInput({
+ id: 'phone',
+ placeholder: '(11) 92875-3356',
+ }),
+ });
+
+ const password = new Field({
+ label: 'Senha',
+ error:
+ 'Senha inválida. Sua senha deve conter no mínimo 10 caracteres, incluindo pelo menos um caractere especial e uma letra maiúscula.',
+ content: new TextInput({
+ id: 'password',
+ placeholder: '*********',
+ type: 'password',
+ }),
+ });
+
+ const repeatPassword = new Field({
+ label: 'Confirmar senha',
+ error: 'Senha inválida.',
+ content: new TextInput({
+ id: 'repeat-password',
+ placeholder: '*********',
+ type: 'password',
+ }),
+ });
+
+ const registerButton = new Button({
+ id: 'register-button',
+ text: 'Cadastrar',
+ isFullWidth: true,
+ isDisabled: false,
+ });
+
+ name.mount($fields);
+ surname.mount($fields);
+ birth.mount($fields);
+ local.mount($fields);
+ email.mount($fields);
+ phone.mount($fields);
+ password.mount($fields);
+ repeatPassword.mount($fields);
+ registerButton.mount($formButton);
+
+ registerButton.listen('click', () => {
+ const nameValue = name.getContent().getValue();
+ const surnameValue = surname.getContent().getValue();
+ const birthValue = birth.getContent().getValue();
+ const localValue = local.getContent().getValue();
+ const emailValue = email.getContent().getValue();
+ const phoneValue = phone.getContent().getValue();
+ const passwordValue = password.getContent().getValue();
+ const repeatPasswordValue = repeatPassword.getContent().getValue();
+
+ let nameValid = true;
+ let surnameValid = true;
+ let birthValid = true;
+ let localValid = true;
+ let emailValid = true;
+ let phoneValid = true;
+ let passwordValid = true;
+ let repeatPasswordValid = true;
+
+ if (!isNameValid(nameValue)) {
+ nameValid = false;
+
+ name.showError();
+ name.getContent().inputError();
+ }
+
+ if (!isNameValid(surnameValue)) {
+ surnameValid = false;
+
+ surname.showError();
+ surname.getContent().inputError();
+ }
+
+ if (!isBirthValid(birthValue)) {
+ birthValid = false;
+
+ birth.showError();
+ birth.getContent().inputError();
+ }
+
+ if (!isLocalValid(localValue)) {
+ localValid = false;
+
+ local.showError();
+ }
+
+ if (!isEmailValid(emailValue)) {
+ emailValid = false;
+
+ email.showError();
+ email.getContent().inputError();
+ }
+
+ if (!isPhoneValid(phoneValue)) {
+ phoneValid = false;
+
+ phone.showError();
+ phone.getContent().inputError();
+ }
+
+ if (!isPasswordValid(passwordValue)) {
+ passwordValid = false;
+
+ password.showError();
+ password.getContent().inputError();
+ }
+
+ if (
+ !isPasswordValid(repeatPasswordValue) ||
+ repeatPasswordValue !== passwordValue
+ ) {
+ repeatPasswordValid = false;
+
+ repeatPassword.showError();
+ repeatPassword.getContent().inputError();
+ }
+
+ if (nameValid) {
+ name.resError();
+ }
+
+ if (surnameValid) {
+ surname.resError();
+ }
+
+ if (birthValid) {
+ birth.resError();
+ }
+
+ if (localValid) {
+ local.resError();
+ }
+
+ if (emailValid) {
+ email.resError();
+ }
+
+ if (phoneValid) {
+ phone.resError();
+ }
+
+ if (passwordValid) {
+ password.resError();
+ }
+
+ if (repeatPasswordValid) {
+ repeatPassword.resError();
+ }
+
+ if (
+ nameValid &&
+ surnameValid &&
+ birthValid &&
+ localValid &&
+ emailValid &&
+ phoneValid &&
+ passwordValid &&
+ repeatPasswordValid
+ ) {
+ this.register();
+ }
+ });
}
RegisterForm.prototype = Object.assign(
diff --git a/src/components/RegisterForm/index.scss b/src/components/RegisterForm/index.scss
index e083124a..33e99a45 100644
--- a/src/components/RegisterForm/index.scss
+++ b/src/components/RegisterForm/index.scss
@@ -2,160 +2,139 @@
@use '~styles/fonts.scss' as fonts;
@use '~styles/breakpoints.scss' as breakpoints;
-.container {
+.register-form {
width: 80%;
- max-width: 72.5rem;
- height: 91.8rem;
+ height: 100%;
+
+ display: flex;
+ flex-direction: column;
+ align-items: start;
+ justify-content: center;
font-family: fonts.$primaryFont;
margin: 0 auto;
+ padding: 0 2rem;
&__title {
color: colors.$gray800;
- font-size: fonts.$xl2;
+ font-size: fonts.$lg;
font-weight: fonts.$bold;
margin-bottom: 3.2rem;
}
- .social-container {
- max-width: max-content;
+ &__socials,
+ &__divisor {
+ max-width: 45rem;
+ }
+ &__socials {
display: flex;
- flex-direction: column;
-
- margin-bottom: 3.7rem;
-
- .social-wrapper,
- .divisor-container {
- display: flex;
- flex-direction: row;
-
- align-items: center;
- justify-content: center;
- }
-
- .social-wrapper {
- gap: 1.6rem;
-
- margin-bottom: 3.2rem;
-
- .social-login {
- max-width: min-content;
+ flex-direction: row;
+ gap: 2rem;
- display: flex;
- flex-direction: row;
-
- gap: 1.8rem;
+ width: 100%;
+ }
- align-items: center;
- justify-content: left;
+ &__social {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: center;
+ flex-grow: 1;
+ gap: 1rem;
- font-family: fonts.$fifthFont;
+ max-width: 21.7rem;
- font-size: fonts.$sm;
- font-weight: fonts.$medium;
+ padding: 1.8rem 0;
- padding: 2rem 6rem;
+ margin-bottom: 3.2rem;
- border: 0;
+ font-family: fonts.$fifthFont;
+ font-size: fonts.$sm;
+ font-weight: fonts.$medium;
- background-color: colors.$secondary100;
+ border: 0;
+ border-radius: 10px;
- box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 8%);
- border-radius: 10px;
+ background-color: colors.$secondary100;
- cursor: pointer;
+ box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 8%);
- &:hover {
- transform: scale(1.02);
+ cursor: pointer;
- transition: all 0.4s ease-in-out;
- }
+ &:hover {
+ transform: scale(1.02);
- .social-img {
- width: 2.4rem;
- height: 2.4rem;
- }
- }
+ transition: all 0.4s ease-in-out;
}
- .divisor-container {
- width: 100%;
-
- .divisor {
- width: 100%;
- height: 1px;
-
- border: 0;
-
- background-color: colors.$gray200;
- }
-
- .divisor-text {
- font-size: fonts.$sm;
-
- margin: 0 2.9rem;
- }
+ &-img {
+ width: 2.4rem;
+ height: 2.4rem;
}
}
-}
-
-.register-form {
- display: grid;
- grid-template-columns: repeat(2, 1fr);
- row-gap: 3.6rem;
- column-gap: 3.3rem;
+ &__divisor {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: center;
- .label {
width: 100%;
- display: block;
-
- font-size: fonts.$xs;
- font-weight: fonts.$medium;
-
- padding-left: 0.5rem;
+ margin-bottom: 3rem;
}
- .input-text,
- .dropdown-input {
- height: 100%;
-
- font-size: 1.6rem;
+ &__divisor-line {
+ width: 100%;
+ height: 1px;
- padding: 1.8rem 1.6rem;
+ border: 0;
- outline: 1px solid colors.$gray200;
- border-radius: 14px;
+ background-color: colors.$gray200;
}
- .dropdown {
- width: 100%;
+ &__divisor-text {
+ font-size: fonts.$sm;
+
+ margin: 0 2.9rem;
}
- .register-button {
+ &__form {
width: 100%;
- max-width: 45rem;
- grid-column: span 2;
- }
+ &-fields {
+ display: grid;
+ grid-template-columns: 1fr;
+ gap: 3rem;
- .error-message {
- display: none;
+ margin-bottom: 3rem;
+ }
- color: colors.$error100;
+ &-button {
+ max-width: 45rem;
+ }
+ }
+}
- &.show-error {
- display: block;
+@include breakpoints.from667 {
+ .register-form {
+ max-width: 72.5rem;
- color: colors.$error100;
+ &__title {
+ font-size: fonts.$xl2;
+ }
- text-align: justify;
+ &__form {
+ &-fields {
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ gap: 3rem;
- padding: 0.8rem 0 0 1rem;
+ margin-bottom: 6rem;
+ }
}
}
}
diff --git a/src/components/TextInput/index.js b/src/components/TextInput/index.js
index 8bc6057c..1af3798f 100644
--- a/src/components/TextInput/index.js
+++ b/src/components/TextInput/index.js
@@ -11,6 +11,7 @@ const events = [
'enabled',
'value:change',
'type:change',
+ 'id:changed',
];
const html = `
@@ -23,6 +24,7 @@ const html = `
`;
export default function TextInput({
+ id = '',
placeholder = '',
assetUrl,
assetPosition,
@@ -42,6 +44,7 @@ export default function TextInput({
input.classList.add(assetPosition);
this.setValue(value);
this.setType(type);
+ this.setID(id);
if (type === 'password') {
iconBtn.classList.remove('input-text-container__button--hidden');
@@ -110,4 +113,13 @@ TextInput.prototype = Object.assign(TextInput.prototype, Component.prototype, {
this.selected.get('input-text').type = type;
this.emit('type:change', type);
},
+
+ getID() {
+ return this.selected.get('input-text').id;
+ },
+
+ setID(id = '') {
+ this.selected.get('input-text').id = id;
+ this.emit('id:changed', id);
+ },
});
diff --git a/src/components/TextInput/index.scss b/src/components/TextInput/index.scss
index e717aa9b..a5b967c1 100644
--- a/src/components/TextInput/index.scss
+++ b/src/components/TextInput/index.scss
@@ -4,6 +4,8 @@
.input-text-container {
display: flex;
+ background-color: colors.$white;
+
border: 1px solid colors.$gray200;
border-radius: 14px;
@@ -17,7 +19,6 @@
&:has(> &__input.standard.input-error) {
border-color: colors.$error100;
- background-color: colors.$error100;
outline-color: colors.$error100;
}
@@ -50,6 +51,7 @@
box-sizing: border-box;
+ background-color: transparent;
background-repeat: no-repeat;
background-size: auto 60%;
filter: opacity(0.85);
@@ -83,9 +85,6 @@
}
&.input-error {
- background-color: colors.$error100;
- filter: opacity(0.75);
-
color: colors.$secondary100;
}
}
diff --git a/src/stories/RegisterForm.stories.js b/src/stories/RegisterForm.stories.js
index 0f46ad34..a7e3f03d 100644
--- a/src/stories/RegisterForm.stories.js
+++ b/src/stories/RegisterForm.stories.js
@@ -1,4 +1,4 @@
-import RegisterForm from '../components/RegisterForm/index';
+import RegisterForm from '../components/RegisterForm';
export default {
title: 'Components/RegisterForm',
diff --git a/src/styles/colors.scss b/src/styles/colors.scss
index 0dbdbfc8..d89f824a 100644
--- a/src/styles/colors.scss
+++ b/src/styles/colors.scss
@@ -21,6 +21,10 @@ $success200: rgb(49, 138, 94);
// error
$error100: rgb(179, 38, 30);
+// white
+
+$white: rgb(255, 255, 255);
+
// neutrals (Gray)
$gray100: rgb(236, 239, 242);
$gray150: rgb(236, 239, 242);
diff --git a/src/utils/validations.js b/src/utils/validations.js
index b12aefba..36a529b1 100644
--- a/src/utils/validations.js
+++ b/src/utils/validations.js
@@ -4,16 +4,10 @@ export function isNameValid(name) {
return nameRegex.test(name);
}
-export function isSurnameValid(surname) {
- const surnameRegex = /[a-zA-Z]$/;
+export function isBirthValid(birth) {
+ const birthRegex = /(\d{2})\/?(\d{2})\/?(\d{4})$/;
- return surnameRegex.test(surname);
-}
-
-export function isBirthValid(birthday) {
- const birthdayRegex = /(\d{2})\/?(\d{2})\/?(\d{4})$/;
-
- return birthdayRegex.test(birthday);
+ return birthRegex.test(birth);
}
export function isEmailValid(email) {
@@ -23,25 +17,26 @@ export function isEmailValid(email) {
}
export function isPhoneValid(phone) {
- const phoneRegex = /\(?(\d{2})\)? \d{5}-?\d{4}/;
+ const phoneRegex = /(\d{2})\d{5}\d{4}/;
return phoneRegex.test(phone);
}
export function isPasswordValid(password) {
- const minLength = password.length >= 10;
- const uppercase = /[A-Z]/g;
- const number = /[0-9]/g;
- const specialCharacter = /[!@#$%^&*{}<>;'(),.?":|]/g;
+ 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 minLength && uppercase && number && specialCharacter;
+ return hasMinLength && hasUppercase && hasNumber && hasSpecialCharacter;
}
-export function isRepeatPasswordValid(password) {
- const minLength = password.length >= 10;
- const uppercase = /[A-Z]/g;
- const number = /[0-9]/g;
- const specialCharacter = /[!@#$%^&*{}<>;'(),.?":|]/g;
+export function isLocalValid(local) {
+ let isFilled = true;
+
+ if (local === '' || local === undefined) {
+ isFilled = false;
+ }
- return minLength && uppercase && number && specialCharacter;
+ return isFilled;
}