Merge pull request #11 from LeohsPaixao/story/criacao-tela-de-cadastr…

…o-usuario

Story: Tela de cadastro usuário

CHANGELOG.md

@@ -1,5 +1,15 @@
 # vue-tests
 
+## 1.3.0
+
+### Minor Changes
+
+- d9d7771: feat: cria o componente RegisterTemplate.vue
+
+### Patch Changes
+
+- 5f00bdd: feat: melhora as validações do RegisterTemplate.vue
+
 ## 1.2.1
 
 ### Patch Changes

frontend/src/modules/auth/components/login/LoginTemplate.vue

@@ -54,7 +54,6 @@ const validateForm = async () => {
     errors.value = { email: '', password: '' };
     return true;
   } catch (err) {
-    console.log('Erros de validação:', err);
     const validationErrors = err.inner.reduce((acc, curr) => {
       acc[curr.path] = curr.message;
       return acc;

frontend/src/modules/user/components/register/RegisterStyle.css

@@ -0,0 +1,100 @@
+.register-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  background-color: #ffeed9;
+}
+
+.error {
+  color: red;
+  font-size: 0.8rem;
+  margin-top: 0.25rem;
+}
+
+.form-container {
+  background: white;
+  padding: 2rem;
+  border-radius: 8px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  text-align: center;
+  max-width: 400px;
+  width: 100%;
+}
+
+.logo {
+  max-width: 120px;
+  margin-bottom: 10px;
+  margin: 0 auto 1rem;
+}
+
+h2 {
+  margin-bottom: 0.5rem;
+  color: #333333;
+}
+
+p {
+  margin-bottom: 1rem;
+  font-size: 0.9rem;
+  color: #666666;
+}
+
+.form-group {
+  margin-bottom: 1rem;
+  text-align: left;
+}
+
+label {
+  display: block;
+  margin-bottom: 0.5rem;
+  font-size: 0.9rem;
+  color: #333333;
+}
+
+.required {
+  color: red;
+}
+
+input {
+  width: 100%;
+  padding: 0.5rem;
+  border: 1px solid #cccccc;
+  border-radius: 4px;
+  font-size: 0.9rem;
+}
+
+input:focus {
+  border-color: #33a833;
+  outline: none;
+}
+
+form select {
+  width: 30%;
+  padding: 4px;
+  font-size: 12px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  margin-bottom: 8px;
+}
+
+.btn-submit {
+  display: block;
+  width: 200px;
+  margin: 1rem auto;
+  padding: 0.5rem;
+  background-color: #33a833;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  font-size: 1rem;
+  cursor: pointer;
+  text-align: center;
+}
+
+.btn-submit:hover {
+  background-color: #2c902c;
+}
+
+.btn-submit:active {
+  background-color: #267326;
+}

frontend/src/modules/user/components/register/RegisterTemplate.vue

@@ -0,0 +1,173 @@
+<template>
+  <div class="register-container">
+    <div class="form-container">
+      <img src="@/assets/images/logoqae2e-branco.jpg" alt="Logo" class="logo" />
+      <h2>Bem-vindo!</h2>
+      <p>Por favor, preencha os campos abaixo para se registrar:</p>
+      <form @submit.prevent="onSubmit">
+        <div class="form-group">
+          <label for="fullName">Nome Completo <span class="required">*</span></label>
+          <input type="text" id="fullName" v-model="formData.fullName" placeholder="Insira o Nome Completo" />
+          <p class="error" v-if="errors.fullName">{{ errors.fullName }}</p>
+        </div>
+        <div class="form-group">
+          <label for="socialName">Nome Social</label>
+          <input type="text" id="socialName" v-model="formData.socialName"
+            placeholder="Insira o Nome Social (opcional)" />
+        </div>
+        <div class="form-group">
+          <label for="document">CPF/CNPJ <span class="required">*</span></label>
+          <select id="docType" v-model="formData.docType" @change="onDocTypeChange">
+            <option value="cpf">CPF</option>
+            <option value="cnpj">CNPJ</option>
+          </select>
+          <input type="text" id="document" v-model="formData.document" :placeholder="placeholder" />
+          <p class="error" v-if="errors.document">{{ errors.document }}</p>
+        </div>
+        <div class="form-group">
+          <label for="phone">Telefone</label>
+          <input type="text" id="phone" v-model="formData.phone" placeholder="Insira o Telefone (opcional)" />
+        </div>
+        <div class="form-group">
+          <label for="email">Email <span class="required">*</span></label>
+          <input type="email" id="email" autocomplete="username" v-model="formData.email"
+            placeholder="Insira o Email" />
+          <p class="error" v-if="errors.email">{{ errors.email }}</p>
+        </div>
+        <div class="form-group">
+          <label for="password">Senha <span class="required">*</span></label>
+          <input type="password" id="password" autocomplete="current-password" v-model="formData.password"
+            placeholder="Insira a Senha" />
+          <p class="error" v-if="errors.password">{{ errors.password }}</p>
+        </div>
+        <button type="submit" class="btn-submit">Cadastrar</button>
+      </form>
+    </div>
+  </div>
+</template>
+
+<script>
+import { reactive, ref } from "vue";
+import { toast } from "vue3-toastify";
+import "vue3-toastify/dist/index.css";
+
+export default {
+  setup() {
+
+    const formData = reactive({
+      fullName: "",
+      socialName: "",
+      document: "",
+      docType: "cpf",
+      phone: "",
+      email: "",
+      password: "",
+    });
+
+    const errors = reactive({
+      fullName: "",
+      document: "",
+      email: "",
+      password: "",
+    });
+
+    const placeholder = ref("Insira o CPF");
+
+    const validateForm = () => {
+      let isValid = true;
+
+      // Validação do Nome Completo
+      if (!formData.fullName) {
+        errors.fullName = "O Nome Completo é obrigatório.";
+        isValid = false;
+      } else if (!formData.fullName.trim().includes(" ")) {
+        errors.fullName = "O Nome Completo deve conter pelo menos Nome e Sobrenome.";
+        isValid = false;
+      } else {
+        errors.fullName = "";
+      }
+
+      // Validação do CPF/CNPJ
+      if (!formData.document) {
+        errors.document = "O CPF/CNPJ é obrigatório.";
+        isValid = false;
+      } else if (
+        formData.docType === "cpf" &&
+        !validateCPF(formData.document)
+      ) {
+        errors.document = "CPF inválido.";
+        isValid = false;
+      } else if (
+        formData.docType === "cnpj" &&
+        !validateCNPJ(formData.document)
+      ) {
+        errors.document = "CNPJ inválido.";
+        isValid = false;
+      } else {
+        errors.document = "";
+      }
+
+      // Validação do Email
+      if (!formData.email) {
+        errors.email = "O Email é obrigatório.";
+        isValid = false;
+      } else if (!/\S+@\S+\.\S+/.test(formData.email)) {
+        errors.email = "Email inválido.";
+        isValid = false;
+      } else {
+        errors.email = "";
+      }
+
+      // Validação da Senha
+      if (!formData.password) {
+        errors.password = "A Senha é obrigatória.";
+        isValid = false;
+      } else if (formData.password.length < 6) {
+        errors.password = "A Senha deve ter no mínimo 6 caracteres.";
+        isValid = false;
+      } else if (formData.password.length > 20) {
+        errors.password = "A Senha deve ter no máximo 20 caracteres.";
+      } else {
+        errors.password = "";
+      }
+
+      return isValid;
+    };
+
+    const onSubmit = () => {
+      if (validateForm()) {
+        toast.success("Cadastro realizado com sucesso!", { autoClose: 3000 });
+      } else {
+        toast.error("Por favor, corrija os erros no formulário.", {
+          autoClose: 5000,
+        });
+      }
+    };
+
+    const validateCPF = (value) => {
+      const cpf = value.replace(/\D/g, "");
+      return cpf.length === 11;
+    };
+
+    const validateCNPJ = (value) => {
+      const cnpj = value.replace(/\D/g, "");
+      return cnpj.length === 14;
+    };
+
+    const onDocTypeChange = () => {
+      placeholder.value =
+        formData.docType === "cpf" ? "Insira o CPF" : "Insira o CNPJ";
+    };
+
+    return {
+      formData,
+      errors,
+      placeholder,
+      onSubmit,
+      onDocTypeChange,
+    };
+  },
+};
+</script>
+
+<style src="./RegisterStyle.css"></style>

frontend/src/plugins/vueToastify.ts

@@ -3,7 +3,7 @@ import 'vue3-toastify/dist/index.css'
 
 const toastOptions = {
   position: 'top-right',
-  hideProgressBar: false,
+  hideProgressBar: true,
   autoClose: 4000,
   draggable: true,
   limit: 2,

frontend/src/router/index.ts

@@ -2,6 +2,7 @@ import { createRouter, createWebHistory } from 'vue-router';
 
 const routes = [
   { path: '/', component: () => import('@/modules/auth/components/login/LoginTemplate.vue') },
+  { path: '/signup', component: () => import('@/modules/user/components/register/RegisterTemplate.vue') }
 ];
 
 const router = createRouter({

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-tests",
-  "version": "1.2.1",
+  "version": "1.3.0",
   "description": "Simple project VUE for UI Testing with Frameworks: Cypress, Robot and Playwright",
   "main": "index.js",
   "repository": "[email protected]:LeohsPaixao/vue-tests.git",