Create register form component and validate fields #278

nicolasfreitas-dev · 2024-06-26T00:53:10Z

Closes #242

Feature

Criação do componente de registro de usuário e validação dos campos do formulário.

Visual evidences 🖼️

Checklist

[ X ] Issue linked
[ X ] Build working correctly

Additional info

É necessário a criação do serviço de registro de usuários, bem como da possibilidade de login por meio das redes sociais ao clicar nos botões de cada uma (Google e Facebook).

DominMFD

Essa pasta de fonte ai ta errada, a fonte é adicionada diretamente no html main da aplicação, ai não precisa dessa quantidade de arquivos ai

src/components/RegisterForm/index.js

src/components/RegisterForm/teste.txt

DominMFD · 2024-06-26T14:30:15Z

src/components/RegisterForm/index.scss

Tem que rever esse css ai, esses width com valores fixos são ruins, não todos, mas a maioria estão fazendo com que seu componente não seja responsivo e isso é ruim, pelo que eu vi você usou as width do figma e não é bem assim que funciona, mas ta tudo bem ta, quem nunca cometeu esse erro que atire a primeira pedra.

diogocaronte · 2024-06-26T22:35:40Z

src/components/RegisterForm/index.js

+const html = `
+    <div class="register-form-container">
+        <h1 class="register-form-container__title">Crie sua petconta</h1>
+        <div class="social-container">
+            <div class="social-container__btn-layout">
+                <button class="social-container__btn-layout--google-btn">
+                    <img class="social-image" src=${googleIcon} >
+                    Google
+                </button>
+                <button class="social-container__btn-layout--facebook-btn">
+                    <img class="social-image" src=${facebookIcon} >
+                    Facebook
+                </button>
+            </div>
+            <div class="social-container__separator">
+                <hr class="divisor-line">
+                <p class="divisor-text">Ou</p>
+                <hr class="divisor-line">
+            </div>
+        </div>
+        <form action="submit" data-select="register-form">
+                <div class="register-form-layout">
+                    <div class="form-fields-container">
+                        <label class="form-fields-container--form-label" for="first-name">Nome</label>
+                        <div class="form-fields-container--text-input" data-select="first-name-input"></div>
+                        <span class="error-message" data-select="name-error-message"></span>
+                    </div>
+                    <div class="form-fields-container">
+                        <label class="form-fields-container--form-label" for="surname">Sobrenome</label>
+                        <div class="form-fields-container--text-input" data-select="surname-input"></div>
+                        <span class="error-message" data-select="surname-error-message"></span>
+                    </div>
+                    <div class="form-fields-container">
+                        <label class="form-fields-container--form-label" for="birthday">Data de nascimento</label>
+                        <div class="form-fields-container--text-input" data-select="birthday-input"></div>
+                        <span class="error-message" data-select="birthday-error-message"></span>
+                    </div>
+                    <div class="form-fields-container">
+                        <label class="form-fields-container--form-label" for="local">Local</label>
+                        <div class="form-fields-container--dropdown-input" data-select="dropdown-input"></div>
+                        <span class="error-message" data-select="dropdown-error-message"></span>
+                    </div>
+                    <div class="form-fields-container">
+                        <label class="form-fields-container--form-label" for="email">E-mail</label>
+                        <div class="form-fields-container--text-input" data-select="email-input"></div>
+                        <span class="error-message" data-select="email-error-message"></span>
+                    </div>
+                    <div class="form-fields-container">
+                        <label class="form-fields-container--form-label" for="phone">Celular</label>
+                        <div class="form-fields-container--text-input" data-select="phone-input"></div>
+                        <span class="error-message" data-select="phone-error-message"></span>
+                    </div>
+                    <div class="form-fields-container">
+                        <label class="form-fields-container--form-label" for="password">Senha</label>
+                        <div class="form-fields-container--text-input" data-select="password-input"></div>
+                        <span class="error-message" data-select="password-error-message"></span>
+                    </div>
+                    <div class="form-fields-container">
+                        <label class="form-fields-container--form-label" for="confirm-password">Confirmar senha</label>
+                        <div class="form-fields-container--text-input" data-select="confirm-password-input"></div>
+                        <span class="error-message" data-select="confirm-password-error-message"></span>
+                    </div>
+                </div>
+                <div class="register-button" data-select="form-button"></div>
+        </form>
+    </div>
+`;


Arrumar o BEM, só temos um bloco por componente. Se precisou de mais blocos já é um motivo para criar subcomponentes para organizar melhor o código

Já aproveita e remove esses "container" pois é muito redundante

diogocaronte · 2024-06-26T22:37:44Z

src/components/RegisterForm/index.js

+  const dropdownInput = new DropDown({
+    items: [
+      {
+        text: 'São Paulo',
+        value: 'SP',
+      },
+      {
+        text: 'Fortaleza',
+        value: 'FOR',
+      },
+      {
+        text: 'Rio de Janeiro',
+        value: 'RJ',
+      },
+      {
+        text: 'Bahia',
+        value: 'BA',
+      },
+      {
+        text: 'Pernambuco',
+        value: 'PE',
+      },
+    ],
+    placeholder: 'Cidade',
+  });


acho que isso aqui vai precisar de um serviço
@Alecell

diogocaronte · 2024-06-26T22:39:41Z

src/components/RegisterForm/index.js

+    isNameValid(name) {
+      const nameRegex = /[a-zA-Z]$/;
+
+      return nameRegex.test(name);
+    },
+
+    isSurnameValid(surname) {
+      const surnameRegex = /[a-zA-Z]$/;
+
+      return surnameRegex.test(surname);
+    },
+
+    isBirthdayValid(birthday) {
+      const birthdayRegex = /(\d{2})\/?(\d{2})\/?(\d{4})$/;
+
+      return birthdayRegex.test(birthday);
+    },
+
+    isEmailValid(email) {
+      const emailRegex = /[a-zA-Z0-9._-]+@[a-zA-Z0-9._-]+\.[a-zA-z]{2,}/;
+
+      return emailRegex.test(email);
+    },
+
+    isPhoneValid(phone) {
+      const phoneRegex = /\(?(\d{2})\)? \d{5}-?\d{4}/;
+
+      return phoneRegex.test(phone);
+    },
+
+    isPasswordValid(password) {
+      const minLength = password.length >= 10;
+      const uppercase = /[A-Z]/g;
+      const number = /[0-9]/g;
+      const specialCharacter = /[!@#$%^&*{}<>;'(),.?":|]/g;
+
+      return minLength && uppercase && number && specialCharacter;
+    },
+
+    isConfirmPasswordValid(confirmPassword) {
+      const minLength = confirmPassword.length >= 10;
+      const uppercase = /[A-Z]/g;
+      const number = /[0-9]/g;
+      const specialCharacter = /[!@#$%^&*{}<>;'(),.?":|]/g;
+
+      return minLength && uppercase && number && specialCharacter;
+    },


move essas validações para um arquivo de utilitários de validação para a gente não ficar duplicando validações.

src/components/RegisterForm/teste.txt

nicolasfreitas-dev added 3 commits June 24, 2024 17:10

feat: create register component initial structure

fa9dbb9

feat: create form fields validation

8c4c2ed

feat: adding dropdown options validation

0efbd56

DominMFD assigned nicolasfreitas-dev Jun 26, 2024

DominMFD requested changes Jun 26, 2024

View reviewed changes

diogocaronte requested changes Jun 26, 2024

View reviewed changes

Alecell mentioned this pull request Jul 3, 2024

style: remove component-specific font variables #273

Open

3 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Create register form component and validate fields #278

Create register form component and validate fields #278

nicolasfreitas-dev commented Jun 26, 2024

DominMFD left a comment

DominMFD Jun 26, 2024

diogocaronte Jun 26, 2024 •

edited

Loading

diogocaronte Jun 26, 2024

diogocaronte Jun 26, 2024

Create register form component and validate fields #278

Are you sure you want to change the base?

Create register form component and validate fields #278

Conversation

nicolasfreitas-dev commented Jun 26, 2024

DominMFD left a comment

Choose a reason for hiding this comment

DominMFD Jun 26, 2024

Choose a reason for hiding this comment

diogocaronte Jun 26, 2024 • edited Loading

Choose a reason for hiding this comment

diogocaronte Jun 26, 2024

Choose a reason for hiding this comment

diogocaronte Jun 26, 2024

Choose a reason for hiding this comment

diogocaronte Jun 26, 2024 •

edited

Loading