Componente src/Login.js

Esse componente recebe o "employee" e a função setEmployee como atributo (props) e é responsável por realizar o login, também chamado de sign-in do funcionário na API que criamos no admin. Caso o login seja efetivado com sucesso o valor de employee deve ser alterado com a função setEmployee.

Verifique o código e os comentários explicativos de cada comando no src/Login.js para entender como funciona todo o processo

Conteúdo comentado de src/Login.js:

import './Login.css';
import { useState } from "react";

// Componente login
function Login(props) {

  // variáveis de estado (email e password) com valores iniciais em branco
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  // função que realiza o login na API com o uso do fetch
  function do_login() {
    fetch('http://localhost:3000/api/auth/employee/sign_in', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({ email, password })
    })
    .then((res) => {
      if (res.ok) {
        // caso o login tenha acontecido com sucesso
        // altera o valor de employee com o uso do setEmployee
        res.json().then(json => {
          props.setEmployee(json.employee);
        })        
      } else {
        // Em caso de falha, exibir uma mensagem de erro
        alert('E-mail/senha iválidos');
      }
    })
  }

  // Retorna um JSX que mostra um formulário de login com os INPUTS associados às variáveis 
  // de estado email e password
  // o botão "Entrar" inicial o processo de login chamando "do_login" quando clicado.
  return (
    <div className="Login">
      <h1>PetTopStore</h1>
      <h2>PDV - Autenticação</h2>
      <div className="LoginBox">
        Email:
        <input
          name="email"
          type="email"
          value={email}
          onInput={e => setEmail(e.target.value)}
        /><br/>
        Password:
        <input
          name="password"
          type="password"
          value={password}
          onInput={e => setPassword(e.target.value)}
        /><br/>
        <button
          onClick={do_login}
        >
          Entrar
        </button>
      </div>
    </div>
  );
}

export default Login;

Aqui o conteúdo do Login.css para a estilização básica:

.Login
{
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  color: cadetblue;
}

.LoginBox {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 20px;
  border: 2px solid cornflowerblue ;
  color: cadetblue;
}

input {
  color: cadetblue;
  border: 1px solid cornflowerblue;
  padding: 10px;
  font-size: 1.2em
}

button {
  color: cadetblue;
  border: 1px solid cornflowerblue;
  background-color: white;
  padding: 10px;
  font-size: 1em;
}

Iremos implementar src/Sale.js na próxima aula, mas por enquanto coloque no arquivo src/Sale.js um conteúdo vazio assim:

Conteúdo temporário de src/Sale.js:

function Sale(props) {
  return <div>Realizar venda não implementado ainda</div>
}

export default Sale;

Execute novamente o app PDV Rect com o comando:

npm start

E acesse http://localhost:4000/

Você deverá ver algo assim:

Se você logou com um funcionário correto (email e senha) criado na aula anterior no seu banco de dados através das seeds, você deverá conseguir logar no sistema e verá algo assim:

Não se preocupe, vamos implementar a tela de vendas na próxima a