Merge pull request #44 from mdsreq-fga-unb/front-login-integrate

primeira versão do header e logout
mdsreq-fga-unb · Nov 21, 2023 · d0384ab · d0384ab
2 parents 1487b80 + 5005e58
commit d0384ab
Show file tree

Hide file tree

Showing 5 changed files with 59 additions and 33 deletions.
diff --git a/frontend/src/icon/menuHamburguer.png b/frontend/src/icon/menuHamburguer.png
diff --git a/frontend/src/img/cmtnLogo.png b/frontend/src/img/cmtnLogo.png
diff --git a/frontend/src/pages/Home/index.js b/frontend/src/pages/Home/index.js
@@ -1,21 +1,48 @@
 import React from "react";
-import { useNavigate } from "react-router-dom";
-import Button from "../../components/Button";
-import useAuth from "../../hooks/useAuth";
-import * as C from "./styles";
-
-const Home = () => {
-  const { signout } = useAuth();
-  const navigate = useNavigate();
+import { Link } from "react-router-dom";
+import { Flex, Box, Heading, Spacer, Text, Center, Menu, MenuButton, MenuList, MenuItem, Button} from "@chakra-ui/react"; // Importe os componentes do Chakra UI ou outro framework que você esteja usando
+import { Image } from '@chakra-ui/react'
+import cmtnLogo from '../../img/cmtnLogo.png'
+import menuHamburguer from '../../icon/menuHamburguer.png'
 
+const Header = () => {
   return (
-    <C.Container>
-      <C.Title>Home</C.Title>
-      <Button Text="Sair" onClick={() => [signout(), navigate("/")]}>
-        Sair
-      </Button>
-    </C.Container>
+    <Flex
+      as="header"
+      align="center"
+      justify="space-between"
+      padding="1rem"
+      backgroundColor="#243A69"
+      color="white"
+    >
+      <Box>
+        <Heading as="h1" size="lg">
+          <Box maxWidth={'120px'} maxHeight={'120px'}  paddingLeft='30px'>
+            <Image src={cmtnLogo} alt='student' style={{ maxWidth: '100%', height: 'auto' }} />
+          </Box>
+        </Heading>
+      </Box>
+      <Spacer />
+      <Box>
+        <Link to="/">Home</Link>
+          <Box  maxWidth={'40px'} maxHeight={'40px'} marginTop={'-12px'} marginBottom={'3px'} >
+          <Menu>
+            <MenuButton border={'none'} bgColor={'#243A69'} >
+
+              <Image src={menuHamburguer} alt='menuHamburguer' style={{ maxWidth: '100%', height: 'auto' }}/>  
+            </MenuButton>
+            <MenuList  >
+              <MenuItem>Download</MenuItem>
+              <MenuItem>Create a Copy</MenuItem>
+              <MenuItem>Mark as Draft</MenuItem>
+              <MenuItem>Delete</MenuItem>
+              <MenuItem>Attend a Workshop</MenuItem>
+            </MenuList>
+          </Menu>
+          </Box>
+      </Box>
+    </Flex>
   );
 };
 
-export default Home;
+export default Header;
diff --git a/frontend/src/pages/Signin/index.js b/frontend/src/pages/Signin/index.js
@@ -8,7 +8,8 @@ import { Image } from '@chakra-ui/react'
 import * as C from "./styles";
 import Input from "../../components/Input";
 import Button from "../../components/Button";
-import { Text } from '@chakra-ui/react'
+import { Text } from '@chakra-ui/react';
+import axios from 'axios';
 
 const Signin = () => {
   const { signin } = useAuth();
@@ -23,31 +24,29 @@ const Signin = () => {
       setError("Preencha todos os campos");
       return;
     }
-
+    console.log(email);
+    console.log(senha);
     try {
-      const response = await fetch('sua-url-de-autenticacao', {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify({ email, senha }),
-      });
-
-      const data = await response.json();
-
-      if (response.ok) {
+      const response = await axios.post('localhost:3000', { email, senha });
+
+      if (response.status === 200) {
         // Sucesso, redirecionar ou realizar outras ações necessárias
         navigate("/home");
       } else {
         // Exibir mensagem de erro
-        setError(data.message);
+        setError(response.data.message);
       }
     } catch (error) {
-      console.error("Erro ao fazer login:", error);
+      if (axios.isAxiosError(error)) {
+        // Imprime informações detalhadas sobre o erro Axios
+        console.error("Erro ao fazer login - Status:", error.response?.status);
+        console.error("Erro ao fazer login - Data:", error.response?.data);
+      } else {
+        console.error("Erro ao fazer login:", error);
+      }
       setError("Erro ao fazer login. Tente novamente mais tarde.");
     }
   };
-
 
   return (
     <C.Container>
@@ -79,7 +78,7 @@ const Signin = () => {
             </Center>
           </Box>
 
-          <Box marginTop={'3px'} background={student} overflow='hidden' paddingLeft='30px'>
+          <Box marginTop={'3px'} overflow='hidden' paddingLeft='30px'>
             <Image src={student} alt='student' style={{ maxWidth: '100%', height: 'auto' }} borderTopEndRadius='60px' borderBottomEndRadius='60px' objectFit={'cover'} overflow='hidden'/>
           </Box>
         </Grid>

diff --git a/frontend/src/routes/index.js b/frontend/src/routes/index.js
@@ -16,7 +16,7 @@ const RoutesApp = () => {
     <BrowserRouter>
       <Fragment>
         <Routes>
-          <Route exact path="/home" element={<Private Item={Home} />} />
+          <Route exact path="/home" element={<Home />} />
           <Route path="/" element={<Signin />} />
           <Route exact path="/signup" element={<Signup />} />
           <Route path="*" element={<Signin />} />