Merge pull request #9 from fga-eps-mds/refatorar/cadastro

Refatorar/cadastro levando Merge para branch Development 😼

src/components/useForm.js

@@ -48,7 +48,7 @@ export default function useForm(callback, validate) {
  data.append('genero', values.genero)
 
 
- await api.post('/psicologo/', data)
+ await api.post('api/psicologos/', data)
  .then(() => {
  alert("Cadastro efetuado passado!"); 
  })

src/components/useFormSignIn.js

@@ -0,0 +1,53 @@
+import { useState, useEffect } from 'react'
+import '../pages/Registrar/SignUP.js'
+
+import api from '../services/api';
+
+export default function useFormSignIn(callback, validate) {
+ const [values, setValues] = useState({
+ nome: '',
+ senha: '',
+ });
+ const [errors, setErrors] = useState({});
+ const [isSubmitting, setIsSubmitting] = useState(false);
+ const data = new FormData();
+
+ const handleChange = e => {
+ const { name, value } = e.target;
+ setValues({
+ ...values,
+ [name]: value
+ });
+ };
+
+ const handleSubmit = e => {
+ e.preventDefault();
+
+ setErrors(validate(values));
+
+ setIsSubmitting(true);
+ };
+
+ useEffect(
+ async () => {
+ if (Object.keys(errors).length === 0 && isSubmitting) {
+ console.log(values);
+
+ data.append('user.username', values.nome)
+ data.append('user.password', values.senha)
+
+ await api.post('login/api/login/', data)
+ .then(() => {
+ alert("Login efetuado passado!"); 
+ })
+ .catch((err) => alert("Cadastro Inválido"))
+
+ }
+
+ },
+ [errors]
+ );
+
+
+ return { handleChange, values, handleSubmit, errors };
+};

src/pages/Login/Login.js

@@ -1,7 +1,7 @@
 import React, {Fragment} from 'react'
 import useState from 'react'
 import '../../style/pages/Login/Login.css';
-import useForm from '../../components/useForm';
+import useForm from '../../components/useFormSignIn';
 import { Card, Form, Button, Checkbox, Image} from 'semantic-ui-react'
 
 function validate(values){

src/pages/Registrar/SignUP.js

@@ -1,4 +1,4 @@
-import React, {Fragment} from 'react'
+ import React, {Fragment} from 'react'
 import '../../style/pages/Cadastro/SignUP.css';
 import useForm from '../../components/useForm';
 import { Card, Form, Button } from "semantic-ui-react"
@@ -11,7 +11,7 @@ function validate(values){
  // else if (!/^[A-Za-z]+/.test(values.name.trim())) {
  // errors.name = 'Enter a valid name';
  // }
-
+ 
  if (!values.email) {
  errors.email = 'É necessário preencher seu e-mail';
  } else if (!/\S+@\S+\.\S+/.test(values.email)) {
@@ -41,48 +41,56 @@ const SignUP = ({ SubmitForm }) =>
  return (
  <Fragment>
 
- <div className="form-signup-container">
- <div class="top-signup">
- <h1 className="text-top"> CheeryUP </h1>
- <a href="http://localhost:3000/"> 
- <button className="form-input-btn-home" type="submit">Inicio</button> 
- </a>
- </div>
-
- <div className="form-signup-wrap">
- <Card className="form-card" style={{ border: "none", boxShadow: "none" }}>
- <Card.Content className="form-title"> 
- <Card.Header> Cadastre-se </Card.Header>
- </Card.Content>
- <Card.Content> 
- <Form className="form-content-input">
- <Form.Input placeholder="Digite seu nome" label="Nome" required fluid onChange={handleChange} name='nome' value={values.nome} /> 
- {errors.nome && <p class="p-message">{errors.nome}</p>}
- <Form.Input placeholder="Digite seu e-mail" label="Email" required fluid onChange={handleChange} name='email' value={values.email} /> 
- {errors.email && <p class="p-message">{errors.email}</p>}
- <Form.Input placeholder="Digite o número do CRP" label="nCRP" required fluid onChange={handleChange} name='nCRP' value={values.nCRP} /> 
- {errors.nCRP && <p class="p-message">{errors.nCRP}</p>}
- <Form.Input placeholder="Digite sua senha" label="Senha" type="password" required fluid onChange={handleChange} name='senha' value={values.senha} /> 
- {errors.senha && <p class="p-message">{errors.senha}</p>}
- <Form.Input placeholder="Confirme sua senha" label="Confirmar senha" type="password" required fluid onChange={handleChange} name='senha2' value={values.senha2} /> 
- {errors.senha2 && <p class="p-message">{errors.senha2}</p>}
- <Button type="submit" onClick={handleSubmit}>Cadastrar </Button>
- <span className="form-input-loguin">
- Já possui cadastro ? Faça o 
- <a href="http://localhost:3000/Login"> Login. </a>
- </span>
- </Form>
- </Card.Content>
- </Card>
-
- <div class="bottom-signup">
- <h1> CheeryUP </h1>
+ <div className="container">
+ <div className="form-signup-container">
+ <div className="top-signup">
+ <a href="http://localhost:3000/"> 
+ <img className="top-signup-logo" src="img/logo_word.png" alt="logo CheeryUp" />
+ </a>
+
+ <a href="http://localhost:3000/"> 
+ <label className="top-signup-navbar-option">Início</label>
+ </a>
  </div>
-
- </div> 
+
+ <div className="form-signup-wrap">
+ <Card className="form-card" style={{ border: "none", boxShadow: "none" }}>
+ <Card.Content className="form-title"> 
+ <Card.Header> Cadastrar </Card.Header>
+ </Card.Content>
+ <Card.Content> 
+ <Form className="form-content-input">
+ <Form.Input placeholder="Digite seu nome" label="Nome" required fluid onChange={handleChange} name='nome' value={values.nome} /> 
+ {errors.nome && <p class="p-message">{errors.nome}</p>}
+ <Form.Input placeholder="Digite seu e-mail" label="Email" required fluid onChange={handleChange} name='email' value={values.email} /> 
+ {errors.email && <p class="p-message">{errors.email}</p>}
+ <Form.Input placeholder="Digite o número do CRP" label="Número do CRP" required fluid onChange={handleChange} name='nCRP' value={values.nCRP} /> 
+ {errors.nCRP && <p class="p-message">{errors.nCRP}</p>}
+ <Form.Input placeholder="Digite sua senha" label="Senha" type="password" required fluid onChange={handleChange} name='senha' value={values.senha} /> 
+ {errors.senha && <p class="p-message">{errors.senha}</p>}
+ <Form.Input placeholder="Confirme sua senha" label="Confirmar senha" type="password" required fluid onChange={handleChange} name='senha2' value={values.senha2} /> 
+ {errors.senha2 && <p class="p-message">{errors.senha2}</p>}
+
+ <Button type="submit" onClick={handleSubmit}>Cadastrar </Button>
+ <span className="form-input-loguin">
+ Já possui cadastro ?
+ <a href="http://localhost:3000/Login">Faça Login. </a>
+ </span>
+ </Form>
+ </Card.Content>
+ </Card>
+
+ </div> 
 
+ </div>
+
+ <div className="side-image">
+ <img src="img/wallpaper_cadastro.png" alt="Wallpaper cadastro"/>
+ </div> 
+
  </div>
-
+
+
  </Fragment>
  )
 }

src/services/api.js

@@ -1,7 +1,7 @@
 import axios from 'axios';
 
 const api = axios.create({
- baseURL:'http://0.0.0.0:8000/api'
+ baseURL:'http://0.0.0.0:8000/'
 });
 
 export default api;