desafio concluido

db.json

@@ -1,6 +1,16 @@
 {
-    "users": [
-      { "id": 1, "name": "Pablo", "email": "[email protected]", "senha":"123456" },
-      { "id": 2, "name": "José", "email": "[email protected]", "senha":"123456" }
-    ]
+  "users": [
+    {
+      "id": 1,
+      "name": "Pablo",
+      "email": "[email protected]",
+      "senha": "123456"
+    },
+    {
+      "id": 2,
+      "name": "José",
+      "email": "[email protected]",
+      "senha": "123456"
+    }
+  ]
 }

package.json

@@ -3,26 +3,28 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@hookform/resolvers": "^3.9.0",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.3.0",
     "@testing-library/user-event": "^13.5.0",
-    "axios": "^0.27.2",
+    "axios": "^1.7.7",
     "json-server": "^0.17.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.33.1",
     "react-icons": "^4.4.0",
     "react-router-dom": "^6.3.0",
-    "react-scripts": "5.0.1",
+    "react-scripts": "^5.0.1",
     "styled-components": "^5.3.5",
-    "web-vitals": "^2.1.4"
+    "web-vitals": "^2.1.4",
+    "yup": "^1.4.0"
   },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
-    "api": "json-server --watch db.json -p 8001" 
+    "api": "json-server --watch db.json -p 8001"
   },
   "eslintConfig": {
     "extends": [

src/App.js

@@ -3,10 +3,11 @@ import {
   Routes,
   Route,
 } from "react-router-dom";
-import { Feed } from "./pages/feed";
 
+import { Feed } from "./pages/feed";
 import { Home } from './pages/home'
 import { Login } from './pages/login'
+import { Signin } from "./pages/signin";
 import { GlobalStyle } from './styles/global';
 
 function App() {
@@ -16,6 +17,7 @@ function App() {
      <Routes>
         <Route path="/" element={<Home />} />
         <Route path="/login" element={<Login />} />
+        <Route path="/signin" element={<Signin />} />
         <Route path="/feed" element={<Feed />} />
      </Routes >
     </Router>

src/components/Header/index.jsx

@@ -1,11 +1,12 @@
 import React from 'react'
 import logo from '../../assets/logo-dio.png';
-
+import { useNavigate } from 'react-router-dom';
 import { Button } from '../Button';
 
 import { Container, Wrapper, BuscarInputContainer, Input, Row, Menu, MenuRight, UserPicture} from './styles';
 
 const Header = ({autenticado}) => {
+  const navigate = useNavigate()
   return (
     <Wrapper>
       <Container>
@@ -27,8 +28,8 @@ const Header = ({autenticado}) => {
               ) : (
               <>
                 <MenuRight href="/">Home</MenuRight>
-                <Button title="Entrar" />
-                <Button title="Cadastrar" />
+                <Button onClick={()=>navigate("/login")} title="Entrar" />
+                <Button onClick={()=>navigate("/signin")} title="Cadastrar" />
               </>)}
           </Row>
       </Container>

src/components/Input/index.jsx

@@ -1,21 +1,24 @@
 import React from 'react'
 import { Controller } from "react-hook-form";
 
-import {InputContainer, InputText, IconContainer } from './styles';
+import {InputContainer, InputText, IconContainer, ErrorText } from './styles';
 
-const Input = ({leftIcon, name, control, ...rest}) => {
+const Input = ({leftIcon, name, control, errorMessage, ...rest}) => {
 
 
   return (
-    <InputContainer>
-        {leftIcon ? (<IconContainer>{leftIcon}</IconContainer>) : null}
-        <Controller
-        name={name}
-        control={control}
-        render={({ field }) =>  <InputText {...field} {...rest} />}
-      />
-
-    </InputContainer>
+    <>
+      <InputContainer>
+          {leftIcon ? (<IconContainer>{leftIcon}</IconContainer>) : null}
+          <Controller
+          name={name}
+          control={control}
+          render={({ field }) =>  <InputText {...field} {...rest} />}
+        />
+
+      </InputContainer>
+      {errorMessage ? <ErrorText>{errorMessage}</ErrorText> : null}
+    </>
   )
 }
 

src/components/Input/styles.js

@@ -22,4 +22,9 @@ export const InputText = styled.input`
     border: 0;
     height: 30px;
 
+`
+export const ErrorText = styled.p`
+    color: #FF0000;
+    font-size: 16px;
+    margin: 10px 0px;
 `

src/pages/login/index.jsx

@@ -4,37 +4,42 @@ import { Button } from '../../components/Button';
 import { Header } from '../../components/Header';
 import { Input } from '../../components/Input';
 import { api } from '../../services/api';
-
 import { useForm } from "react-hook-form";
-
-
 import { Container, Title, Column, TitleLogin, SubtitleLogin, EsqueciText, CriarText, Row, Wrapper } from './styles';
+import { yupResolver } from "@hookform/resolvers/yup";
+import { string, object } from "yup";
+
+const schema = object({
+    email: string().email("Email inválido").required("Campo obrigatório"),
+    senha: string().min(6, "A senha deve conter pelo menos 6 dígitos").required("Campo obrigatório")
+})
 
 const Login = () => {
 
     const navigate = useNavigate()
 
-    const { control, handleSubmit, formState: { errors  } } = useForm({
+    const { control, handleSubmit, formState: { errors } } = useForm({
         reValidateMode: 'onChange',
         mode: 'onChange',
+        resolver: yupResolver(schema)
     });
 
     const onSubmit = async (formData) => {
-        try{
-            const {data} = await api.get(`/users?email=${formData.email}&senha=${formData.senha}`);
+        try {
+            const { data } = await api.get(`/users?email=${formData.email}&senha=${formData.senha}`);
 
-            if(data.length && data[0].id){
-                navigate('/feed') 
-                return
+            if (data.length && data[0].id) {
+                navigate('/feed');
+                return;
             }
 
-            alert('Usuário ou senha inválido')
-        }catch(e){
-            //TODO: HOUVE UM ERRO
+            alert('Usuário ou senha inválido');
+        } catch (error) {
+            console.error('Erro ao realizar login:', error);
         }
     };
 
-    console.log('errors', errors);
+
 
     return (<>
         <Header />
@@ -48,15 +53,27 @@ const Login = () => {
                 <TitleLogin>Faça seu cadastro</TitleLogin>
                 <SubtitleLogin>Faça seu login e make the change._</SubtitleLogin>
                 <form onSubmit={handleSubmit(onSubmit)}>
-                    <Input placeholder="E-mail" leftIcon={<MdEmail />} name="email"  control={control} />
-                    {errors.email && <span>E-mail é obrigatório</span>}
-                    <Input type="password" placeholder="Senha" leftIcon={<MdLock />}  name="senha" control={control} />
-                    {errors.senha && <span>Senha é obrigatório</span>}
+                    <Input
+                    type="email"
+                    placeholder="E-mail"
+                    leftIcon={<MdEmail />}
+                    name="email" 
+                    control={control}
+                    errorMessage={errors?.email?.message}
+                    />
+                    <Input
+                    type="password"
+                    placeholder="Senha"
+                    leftIcon={<MdLock />} 
+                    name="senha"
+                    control={control}
+                    errorMessage={errors?.senha?.message}
+                    />
                     <Button title="Entrar" variant="secondary" type="submit"/>
                 </form>
                 <Row>
                     <EsqueciText>Esqueci minha senha</EsqueciText>
-                    <CriarText>Criar Conta</CriarText>
+                    <CriarText href="/signin">Criar Conta</CriarText>
                 </Row>
                 </Wrapper>
             </Column>

src/pages/login/styles.js

@@ -71,7 +71,7 @@ export const EsqueciText  = styled.p`
     color: #E5E044;
 ` 
 
-export const CriarText =  styled.p`
+export const CriarText =  styled.a`
     font-family: 'Open Sans';
     font-style: normal;
     font-weight: 700;

src/pages/signin/index.jsx

@@ -0,0 +1,88 @@
+import { useNavigate  } from "react-router-dom";
+import { MdEmail, MdLock, MdPerson } from 'react-icons/md'
+import { Button } from '../../components/Button';
+import { Header } from '../../components/Header';
+import { Input } from '../../components/Input';
+import { api } from '../../services/api';
+import { yupResolver } from "@hookform/resolvers/yup";
+import { string, object } from "yup";
+import { useForm } from "react-hook-form";
+import { Container, Title, Column, TitleSignin, SubtitleSignin, JaTenhoConta, AceiteTermos, LinkEstilizado, Wrapper } from './styles';
+
+const schema = object({
+    nomeCompleto: string().min(3, "O nome deve conter pelo menos 3 caracteres").required("Campo obrigatório"),
+    email: string().email("Email inválido").required("Campo obrigatório"),
+    senha: string().min(6, "A senha deve conter pelo menos 6 caracteres").required("Campo obrigatório")
+})
+
+const Signin = () => {
+
+    const navigate = useNavigate()
+
+    const { control, handleSubmit, formState: { errors  } } = useForm({
+        reValidateMode: 'onChange',
+        mode: 'onChange',
+        resolver: yupResolver(schema)
+    });
+
+    const onSubmit = async (formData) => {
+        try {
+            await api.post('/users', formData);
+            navigate("/feed")
+
+        } catch (error) {
+            console.error('Erro ao cadastrar usuário:', error);
+        }
+    }
+
+
+
+    return (<>
+        <Header />
+        <Container>
+            <Column>
+                <Title>A plataforma para você aprender com experts, dominar as principais tecnologias e entrar mais rápido nas empresas mais desejadas.</Title>
+            </Column>
+            <Column>
+                <Wrapper>
+                <TitleSignin>Comece agora grátis</TitleSignin>
+                <SubtitleSignin>Crie sua conta e make the change.</SubtitleSignin>
+                <form onSubmit={handleSubmit(onSubmit)}>
+                    <Input
+                    placeholder="Nome completo"
+                    leftIcon={<MdPerson />}
+                    name="nomeCompleto" 
+                    control={control}
+                    errorMessage={errors?.nomeCompleto?.message}
+                    />
+
+                    <Input
+                    placeholder="E-mail"
+                    leftIcon={<MdEmail />}
+                    name="email"
+                    control={control}
+                    errorMessage={errors?.email?.message}
+                    />
+
+                    <Input
+                    type="password"
+                    placeholder="Senha"
+                    leftIcon={<MdLock />} 
+                    name="senha"
+                    control={control}
+                    errorMessage={errors?.senha?.message}
+                    />
+
+                    <Button title="Criar minha conta" variant="secondary" type="submit"/>
+                </form>
+                <Column>
+                    <AceiteTermos>Ao clicar em "criar minha conta grátis", declaro que aceito as Políticas de Privacidade e os Termos de Uso da DIO.</AceiteTermos>
+                    <JaTenhoConta>Já tenho conta. <LinkEstilizado href="/login">Fazer login</LinkEstilizado></JaTenhoConta>
+                </Column>
+                </Wrapper>
+            </Column>
+        </Container>
+    </>)
+}
+
+export { Signin }