projet com login

quinzena11/ProjQuinzenal/labex/src/Components/Header.js

@@ -14,19 +14,18 @@ const HeaderContainer = styled.div`
     justify-content: space-around;
     align-items: center;
     border-radius: 50px;
-background: #54afbb;
-box-shadow:  24px 24px 47px #2d5d63,
-             -24px -24px 47px #7bffff;
+    background: #54afbb;
+    box-shadow:  24px 24px 47px #2d5d63,
+                -24px -24px 47px #7bffff;
 
 `
 const ButtonContainerHeader = styled.div`
     display: flex;
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
-    width: 200px;
-    border: 1px solid black;
-
+    width: 200px;  
+    padding: 15px;
 
 `
 
@@ -36,7 +35,7 @@ const ButtonContainerHeader = styled.div`
 
 
 
-export default function Header () {
+export default function Header() {
     const history = useHistory()
 
     const goToAppliPage = () => {
@@ -52,12 +51,12 @@ export default function Header () {
     return (
 
         <HeaderContainer>
-         
+
             <div>LOGGOOOO</div>
-        <ButtonContainerHeader>
-            <button onClick={goToAppliPage}>inscrever</button>
-            <button onClick={goToLoginPage}>Admin</button>
-        </ButtonContainerHeader>
+            <ButtonContainerHeader>
+                <button onClick={goToAppliPage}>inscrever</button>
+                <button onClick={goToLoginPage}>Admin</button>
+            </ButtonContainerHeader>
         </HeaderContainer>
     )
 };

quinzena11/ProjQuinzenal/labex/src/Hooks/useProtectedPage.js

@@ -0,0 +1,15 @@
+import React from "react";
+import { useHistory } from "react-router";
+import { useEffect } from "react";
+
+
+export const useProtectedPage = () => {
+    const history = useHistory()
+    useEffect(() => {
+        const token = localStorage.getItem("token")
+        if (token === null) {
+            console.log('Nao esta logado')
+            history.push('/login')
+        }
+    }, [])
+}

quinzena11/ProjQuinzenal/labex/src/pages/ApplicationFormPage.js

@@ -33,6 +33,11 @@ export const ApplicationFormPage = () => {
         <Header/>
         <ApplicationFormPageBody>
            <h1> ApplicationFormPage</h1>
+           <input></input>
+           <input></input>
+           <input></input>
+           <input></input>
+           <button>Enviar</button>
            <button>ver Viagem</button>
 
         </ApplicationFormPageBody>

quinzena11/ProjQuinzenal/labex/src/pages/LoginPage.js

@@ -2,6 +2,9 @@ import React from "react";
 import Footer from "../Components/Footer";
 import Header from "../Components/Header";
 import styled from "styled-components";
+import { useState } from "react";
+import axios from "axios";
+import { useHistory } from "react-router-dom";
 
 
 const LoginPageContainer  = styled.div`
@@ -20,19 +23,71 @@ const LoginPagesBody = styled.div`
 
     display: flex;
     flex-direction: column;
-    justify-content: space-around;
+    justify-content: space-between;
     align-items: center;
+
 `
 
 
 
 
 export const LoginPage = () => {
+    const [email, setEmail] = useState("");
+    const [password, setPassword] = useState("");
+    const history = useHistory();
+    const onchangeEmail = (event) => {
+        setEmail(event.target.value);
+    };
+
+    const onChangePassword = (event) =>{
+        setPassword(event.target.value);
+    };
+
+    const onSubmitLogin = () => {
+        console.log(email, password)
+        const body = {
+            email: email,
+            password: password,
+        }
+        axios.post('https://us-central1-labenu-apis.cloudfunctions.net/labeX/francisco/login', body)
+        .then((response) => {
+                console.log('deu certo ', response.data.token);
+                localStorage.setItem("token", response.data.token);
+                history.push("/");
+        }).catch((error) => {
+            console.log(error.response)
+        });
+    };
+
+
+
     return (
         <LoginPageContainer>
         <Header/>
         <LoginPagesBody>
+
            <h1> Pagina de login </h1>
+
+
+           <input
+           placeholder="email"
+           type="email"
+           value={email}
+           onChange={onchangeEmail} 
+           />
+
+
+
+
+
+           <input
+            placeholder="senha"
+            type="senha"
+            value={password}
+            onChange={onChangePassword}        
+           />  
+           <button onClick={onSubmitLogin}>Enviar</button>
+
            <button>ver Viagem</button>
 
         </LoginPagesBody>

quinzena11/ProjQuinzenal/labex/src/pages/TripDetailsPage.js

@@ -1,7 +1,10 @@
-import React from "react";
+import React, { useEffect } from "react";
 import Footer from "../Components/Footer";
 import Header from "../Components/Header";
 import styled from "styled-components";
+import axios from "axios";
+import { useHistory } from "react-router";
+import { useProtectedPage } from "../Hooks/useProtectedPage";
 
 
 const TripDetailsPageContainer  = styled.div`
@@ -28,6 +31,28 @@ const TripDetailsPageBody = styled.div`
 
 
 export const TripDetailsPage = () => {
+
+
+    useProtectedPage()
+
+
+    useEffect(() => {
+        const token = localStorage.getItem("token")
+        axios.get('https://us-central1-labenu-apis.cloudfunctions.net/labeX/francisco/trip/EbLG4OmoQVNUx0ufPVrs',{
+            headers: {
+                auth: token
+            }
+        })
+        .then((response) =>{
+            console.log(' certo' , response.data)
+        }).catch((error) =>{
+            console.log('error', error.response)
+        })
+    }, []);
+
+
+
+
     return (
         <TripDetailsPageContainer>
         <Header/>