Merge pull request #5 from fga-eps-mds/151-criarUsuario

📝 #151 Adicionando Criacao doUsuáro

.eslintrc.js

@@ -7,6 +7,7 @@ module.exports = {
     extends: [
       'eslint:recommended',
       'plugin:react/recommended',
+      'react-app'
     ],
     plugins: [
       'react',

package.json

@@ -4,16 +4,19 @@
   "private": true,
   "dependencies": {
     "@emailjs/browser": "^3.11.0",
+    "@hookform/resolvers": "^3.3.2",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "axios": "^1.5.1",
     "dotenv": "^16.3.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-hook-form": "^7.47.0",
     "react-router-dom": "^6.17.0",
     "react-scripts": "5.0.1",
-    "web-vitals": "^2.1.4"
+    "web-vitals": "^2.1.4",
+    "yup": "^1.3.2"
   },
   "scripts": {
     "start": "react-scripts start",

src/App.js

@@ -1,6 +1,7 @@
 import React from "react";
 import {BrowserRouter, Routes , Route} from "react-router-dom"
 import Home from "./pages/Home"
+import CreateUserPage from "./pages/CreateUser";
 import Login from "./pages/Login";
 import Contato from "./pages/Contato";
 import QuemSomos from "./pages/QuemSomos";
@@ -14,6 +15,7 @@ function App(){
     <BrowserRouter>
     <Routes>
       <Route path="/" element={<Home/>}/>
+      <Route path="/cadastro" element={<CreateUserPage/>}/>
       <Route path="/login" element={<Login/>}/>
       <Route path="/contato" element={<Contato/>}/>
       <Route path="/quemsomos" element={<QuemSomos/>}/>

src/App.test.js

@@ -3,6 +3,6 @@ import Home from './pages/Home';
 
 test('renders learn react link', () => {
   render(<Home />);
-  const linkElement = screen.getByText(/hello world/i);
+  const linkElement = screen.getByText(/PrintGo/i);
   expect(linkElement).toBeInTheDocument();
 });

src/components/forms/SignupForm.js

@@ -0,0 +1,158 @@
+import { yupResolver } from "@hookform/resolvers/yup";
+import React, { useEffect, useState } from "react";
+import { useForm } from "react-hook-form";
+import * as yup from "yup";
+import { getLotacoes } from "../../services/lotacaoService";
+import { createUser } from "../../services/userService";
+import "../../style/components/signupForms.css";
+import elipse6 from '../../assets/elipse6.svg';
+
+
+const signupSchema = yup.object().shape({
+    nome: yup.string().required('Nome é obrigatório'),
+    email: yup
+      .string()
+      .email('Email inválido')
+      .required('Email é obrigatório'),
+    emailConfirmar: yup
+      .string()
+      .oneOf([yup.ref('email'), null], 'Os emails devem coincidir')
+      .required('Email é obrigatória'),
+    senha: yup.string().required('Senha é obrigatória')
+    .matches(
+      /^(?=.*[A-Z])(?=.*[a-z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/,
+      'A senha não segue o padrão a baixo'
+    ),
+    senhaConfirmar: yup
+      .string()
+      .oneOf([yup.ref('senha'), null], 'As senhas devem coincidir')
+      .required('Senha é obrigatória'),
+    documento: yup.string()
+    .matches(/^(\d{11}|\d{14})$/, 'CPF ou CNPJ inválido')
+    .test('cpfOrCnpj', 'CPF ou CNPJ inválido', value => {
+        return value.length === 11 || value.length === 14;
+    }),
+    lotacao_id: yup.string().required('Lotação é obrigatória'),
+    isAdmin: yup.boolean(),
+  });
+
+export default function SignupForm(){
+    const [lotacao, setLotacao] = useState([]);
+
+    useEffect( () => {
+        async function setLotacoes() {
+            try {
+                const data = await getLotacoes();
+                if (data.type ==='success') {
+                    setLotacao(data.data);
+                }
+            } catch (error) {
+                console.error('Erro ao obter opções do serviço:', error);
+              }
+        }
+        setLotacoes();
+      }, []);
+
+
+    const {
+        register,
+        handleSubmit,
+        formState: { errors, isValid }, 
+        reset
+    } = useForm({resolver: yupResolver(signupSchema), mode: "onChange"})
+
+    const onSubmit = async (data) =>  {
+        data.cargos = ["USER"];
+        if (data.isAdmin) {
+            data.cargos.push("ADMIN");
+        }
+        await createUser(data);
+        reset()
+    }
+
+    return(
+        <div id="signup-card">
+            <header id="form-header">
+                Cadastro
+            </header>
+            <form onSubmit={handleSubmit(onSubmit)}>
+                <div id="input-group">
+                    <div id="input-line">
+                        <div id="input-box">
+                            <label>Nome<span>*</span></label>
+                            <input {...register("nome", {required: true} )} placeholder="Nome" />
+                            <span>{errors.nome?.message}</span>
+                        </div>
+
+                        <div id="input-box">
+                            <label>Documento<span>*</span></label>
+                            <input {...register("documento", {required: true})} placeholder="CPF ou CNPF" />
+                            <span>{errors.documento?.message}</span>
+                        </div>
+                    </div>
+                    <div id="input-line">
+                        <div id="input-box">
+                            <label>E-mail<span>*</span></label>
+                            <input {...register("email", {required: true} )} type="email" placeholder="Email" />
+                            <span>{errors.email?.message}</span>
+                        </div>
+
+                        <div id="input-box">
+                            <label>Confirmar E-mail<span>*</span></label>
+                            <input {...register("emailConfirmar", {required: true})} placeholder="Confirmar Email" />
+                            <span>{errors.emailConfirmar?.message}</span>
+                        </div>
+                    </div>
+
+                    <div id="input-line">
+                        <div id="input-box">
+                            <label>Senha<span>*</span></label>
+                            <input {...register("senha", {required: true})} placeholder="Senha" type="password"/>
+                            <span>{errors.senha?.message}</span>
+                            <p id="input-description">A senha deve conter pelo menos 8 caracteres, 1 letra maiúscula, 1 minuscula, 1 número e um caractere especial</p>
+                        </div>
+                        <div id="input-box">
+                            <label>Confirmar Senha<span>*</span></label>
+                            <input {...register("senhaConfirmar", {required: true})} placeholder="Confirmar Senha" type="password"/>
+                            <span>{errors.senhaConfirmar?.message}</span>
+                        </div>
+                    </div>
+                    <div id="input-line">
+                        <div id="input-box">
+                            <label>Lotação <span>*</span></label>
+                            <select {...register("lotacao_id", {required: "Lotação é obrigatória"})}>
+                                <option value="">Selecione a Lotação</option>
+                                {lotacao?.map((lotacao) => (
+                                <option key={lotacao.id} value={lotacao.id}>
+                                    {lotacao.nome}
+                                </option>
+                                ))}
+                            </select>
+                            <span>{errors.lotacao_id?.message}</span>
+                        </div>
+                    </div>
+                    <div id="input-line">
+                        <div id="input-box">
+                            <div id="input-checkbox">
+                                <input
+                                    id="checkbox"
+                                    type="checkbox"
+                                    {...register("isAdmin")}
+                                />
+                                <label id="label-checkbox">Usuário é administrador?</label>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div id="buttons">
+                    <button className="form-button" type="button" id="cancelar-bnt" >CANCELAR</button>
+                    <button className="form-button" type="submit" id="registrar-bnt" disabled={!isValid}>REGISTRAR</button>
+                </div>
+            </form>
+            <div className="elipse-signup">
+                <img alt= "elipse"  src={elipse6}></img>
+            </div>
+        </div>
+    );
+}

src/lib/api/config.js

@@ -0,0 +1,9 @@
+import axios from 'axios';
+
+export const api = axios.create({
+  baseURL: process.env.API_URL || 'http://localhost:8000',
+  timeout: 5000, 
+  headers: {
+    'Content-Type': 'application/json',
+  },
+});

src/pages/ChangePassword.js

@@ -1,7 +1,7 @@
 import React from "react";
 import '../style/pages/changePassword.css';
 import ChangePasswordPeople from '../assets/change-password-people.svg';
-import elipse6 from '../assets/elipse6.png';
+import elipse6 from '../assets/elipse6.svg';
 
 import { useState } from 'react';
 import { changePassword } from "../api/api";
@@ -41,7 +41,7 @@ export default function ChangePassword() {
                         <div className="form-title">Mudar senha</div>
                         <div className="form-group">
                             <div className="input-form-container">
-                                <label>Nova Senha</label>
+                                <label className="label-change-password">Nova Senha</label>
                                 <input 
                                     type="password"
                                     name="password"
@@ -52,7 +52,7 @@ export default function ChangePassword() {
                                 />
                             </div>
                             <div className="input-form-container">
-                                <label>Repita a senha</label>
+                                <label className="label-change-password">Repita a senha</label>
                                 <input 
                                     type="password"
                                     name="passwordConfirmation"

src/pages/CreateUser.js

@@ -0,0 +1,13 @@
+import "../style/pages/createUser.css";
+import React from "react";
+import SignupForm from "../components/forms/SignupForm";
+import signup_image from "../assets/signup_image.svg";
+
+export default function CreateUserPage(){
+    return(
+        <div id="signup-container">
+            <img alt="" src={signup_image} />
+            <SignupForm/>
+        </div>
+    );
+}

src/pages/Login.js

@@ -52,11 +52,11 @@ function Login() {
 
           <div className="login-box">
             <div className="login-box-content">
-              <h2>Entrar</h2>
+              <h2 className='title-login'>Entrar</h2>
               <form onSubmit={handleSubmit}>
                 <div className="form-group-login">
-                  <label htmlFor="username">e-mail</label>
-                  <input 
+                  <label className="label-login"  htmlFor="username">e-mail</label>
+                  <input className="input-login" 
                     type="text" 
                     id="username" 
                     name="username" 
@@ -67,8 +67,8 @@ function Login() {
                   {error && <h5 style={{color: 'red'}}>{error}</h5>}
                 </div>
                 <div className="form-group-login">
-                  <label htmlFor="password">senha</label>
-                  <input 
+                  <label className="label-login" htmlFor="password">senha</label>
+                  <input className="input-login" 
                     type="password" 
                     id="password" 
                     name="password" 
@@ -79,10 +79,10 @@ function Login() {
                 </div>
                 <div className="buttons-login">
                   <div className="button-login-container">
-                    <button type="submit" disabled={!isFormValid}>LOGIN</button>
+                    <button className="button-login" type="submit" disabled={!isFormValid}>LOGIN</button>
                   </div>
                   <div className="button-login-container">
-                    <button type="button">Recuperar senha</button>
+                    <button className="button-login" type="button">Recuperar senha</button>
                   </div>
                 </div>
                 {loginError && <h5 style={{color: 'red'}}>{loginError}</h5>}

src/pages/QuemSomos.js

@@ -2,13 +2,15 @@ import React from 'react';
 import '../style/pages/quemSomos.css';
 //import pessoasDois from '../assets/pessoasDois.svg';
 import PoliciaCivilLogo from '../assets/PoliciaCivilLogo.svg';
+import elipse from '../assets/home_elipse.svg';
+
 
 function QuemSomos() {
 
   return (
     <div className="container-about-us">
       <div className="texto">
-        <h2>Quem Somos</h2>
+        <h2 className='h2-label'>Quem Somos</h2>
         <p>
           O PrintGO tem a finalidade de corrigir o problema chave que foi definido junto com a visão do produto, que diz: Os servidores da Polícia Civil do Goiás não possuem uma ferramenta de monitoração de impressoras e impressão, mesmo que os servidores precisem monitorar e registrar valores de contadores nas unidades policias nos municípios de Goiás. O PrintGO é uma ferramenta de monitoramento de ativos de impressão que simplifica a tarefa de monitorar e registrar informações relacionadas ao uso e manutenção das impressoras de forma a garantir um acompanhamento preciso e eficaz.  
         </p>
@@ -20,7 +22,9 @@ function QuemSomos() {
         <img src={PoliciaCivilLogo} alt="PoliciaCivilLogo" className="PoliciaCivilLogo" /> 
       </div>
 
-      <div className="ellipse-about-us"></div>
+      <div className="ellipse-about">
+        <img alt="" src={elipse}></img>
+      </div>
     </div>
   );
 }

src/services/lotacaoService.js

@@ -0,0 +1,19 @@
+import { api } from '../lib/api/config';
+
+export const createLotacao = async (lotacoa) => {
+  try {
+    const response = await api.post('/lotacao/create', lotacoa);
+    return {type: 'success', data:response.data};
+  } catch (error) {
+    return { type: 'error', error };
+  }
+};
+
+export const getLotacoes = async () => {
+  try {
+    const response = await api.get('/lotacao');
+    return { type: 'success', data: response.data};
+  } catch (error) {
+    return { type: 'error', error };
+  }
+};

src/services/userService.js

@@ -0,0 +1,10 @@
+import { api } from '../lib/api/config';
+
+export const createUser = async (user) => {
+  try {
+    const response = await api.post('/user/create', user);
+    return { type: 'success', data: response.data};
+  } catch (error) {
+    return { type: 'error', error };
+  }
+};

src/style/components/button.css

@@ -1,4 +1,3 @@
-/* CustomButton.css */
 .button {
     width: 17vw;
     height: 8vh;