diff --git a/src/Components/DetailCard.jsx b/src/Components/DetailCard.jsx
index 3709ac0..1d002de 100644
--- a/src/Components/DetailCard.jsx
+++ b/src/Components/DetailCard.jsx
@@ -1,18 +1,48 @@
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
import ScheduleFormModal from "./ScheduleFormModal";
import styles from "./DetailCard.module.css";
+import { useParams } from "react-router-dom";
+import api from "../services/api";
const DetailCard = () => {
+ const { matricula } = useParams();
+ const [dentista, setDentista] = useState({});
+ const [token, setToken] = useState("");
+
+ async function getDentista(){
+ const t = localStorage.getItem("ctd_token");
+ setToken(t);
+ try{
+ const response = await api.get(`/dentista?matricula=${matricula}`, {
+ headers: {
+ 'Authorization': `Bearer ${t}`
+ }});
+ const d = {
+ nome: response.data.nome,
+ sobrenome: response.data.sobrenome,
+ matricula: response.data.matricula,
+ email: response.data.usuario.username
+ }
+ setDentista(d);
+ console.log(d);
+ } catch (error) {
+ console.log(error);
+ alert("Erro ao tentar pegar dados do Dentista");
+ }
+ }
useEffect(() => {
//Nesse useEffect, você vai fazer um fetch na api passando o
//id do dentista que está vindo do react-router e carregar os dados em algum estado
+ getDentista();
+
}, []);
+
return (
//As instruções que estão com {''} precisam ser
//substituídas com as informações que vem da api
<>
-
Detail about Dentist {'Nome do Dentista'}
+
Detail about Dentist {dentista.nome}
{/* //Na linha seguinte deverá ser feito um teste se a aplicação
// está em dark mode e deverá utilizar o css correto */}
@@ -28,12 +58,12 @@ const DetailCard = () => {
-
Nome: {'Nome do Dentista'}
+
Nome: {dentista.nome}
- Sobrenome: {'Sobrenome do Dentista'}
+ Sobrenome: {dentista.sobrenome}
- Usuário: {'Nome de usuário do Dentista'}
+ Usuário: {dentista.email}
diff --git a/src/Components/LoginForm.jsx b/src/Components/LoginForm.jsx
index b3900cf..f217413 100644
--- a/src/Components/LoginForm.jsx
+++ b/src/Components/LoginForm.jsx
@@ -1,16 +1,38 @@
import styles from "./Form.module.css";
+import { useContext } from "react";
+import { AuthContext } from "../contexts/auth-context";
+import api from "../services/api"
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
const LoginForm = () => {
- const handleSubmit = (e) => {
- //Nesse handlesubmit você deverá usar o preventDefault,
- //enviar os dados do formulário e enviá-los no corpo da requisição
- //para a rota da api que faz o login /auth
- //lembre-se que essa rota vai retornar um Bearer Token e o mesmo deve ser salvo
- //no localstorage para ser usado em chamadas futuras
- //Com tudo ocorrendo corretamente, o usuário deve ser redirecionado a página principal,com react-router
- //Lembre-se de usar um alerta para dizer se foi bem sucedido ou ocorreu um erro
- };
+ const { saveEmail, saveToken, setEstadoLogin } = useContext(AuthContext);
+
+ const [email, setEmail] = useState("");
+ const [password, setPassword] = useState("");
+
+ const navigate = useNavigate();
+ async function logar() {
+ try {
+ const response = await api.post("/auth",{
+ username: email,
+ password: password,
+ })
+ console.log(response.data);
+ saveEmail(email);
+ saveToken(response.data.token);
+ setEstadoLogin("Logout");
+ navigate("/");
+ } catch (error) {
+ alert("Erro ao logar");
+ }
+ }
+
+ const handleSubmit = (e) => {
+ e.preventDefault();
+ logar();
+ }
return (
<>
{/* //Na linha seguinte deverá ser feito um teste se a aplicação
@@ -25,6 +47,8 @@ const LoginForm = () => {
placeholder="Login"
name="login"
required
+ value={email}
+ onChange={(event) => setEmail(event.target.value)}
/>
{
name="password"
type="password"
required
+ value={password}
+ onChange={(event) => setPassword(event.target.value)}
/>