diff --git a/package-lock.json b/package-lock.json index 94a94ae..ea9b899 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14064,6 +14064,15 @@ "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.9.tgz", "integrity": "sha512-nQTTcUu+ATDbrSD1BZHr5kgSD4oF8OFjxun8uAaL8RwPBacGBNPf/yAuVVdx17N8XNzRDMrZ9XcKZHCjPW+9ew==" }, + "react-google-login": { + "version": "5.2.2", + "resolved": "https://registry.npmjs.org/react-google-login/-/react-google-login-5.2.2.tgz", + "integrity": "sha512-JUngfvaSMcOuV0lFff7+SzJ2qviuNMQdqlsDJkUM145xkGPVIfqWXq9Ui+2Dr6jdJWH5KYdynz9+4CzKjI5u6g==", + "requires": { + "@types/react": "*", + "prop-types": "^15.6.0" + } + }, "react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", diff --git a/package.json b/package.json index ca84c4b..f1d3fec 100644 --- a/package.json +++ b/package.json @@ -16,6 +16,7 @@ "react": "^17.0.1", "react-bootstrap": "^1.5.2", "react-dom": "^17.0.1", + "react-google-login": "^5.2.2", "react-lottie": "^1.2.3", "react-router-dom": "^5.2.0", "react-scripts": "^4.0.3", diff --git a/src/App.js b/src/App.js index c4130fc..fada1be 100644 --- a/src/App.js +++ b/src/App.js @@ -19,15 +19,16 @@ export default function App() { useEffect(() => { const checkLoggedIn = async () => { let token = localStorage.getItem("auth-token"); + console.log("app js " + token); if (token == null) { localStorage.setItem("auth-token",""); token =""; } const tokenRes = await Axios.post( "https://server-locaft.herokuapp.com/users/tokenIsValid", - null, + null, {headers: {"x-auth-token": token }} - + ); if (tokenRes.data) { const userRes = await Axios.get("https://server-locaft.herokuapp.com/users/", @@ -40,7 +41,7 @@ export default function App() { } }; - + checkLoggedIn(); @@ -64,7 +65,7 @@ export default function App() { - + diff --git a/src/components/LogInContainer.js b/src/components/LogInContainer.js index fe4be9f..1ee19d0 100644 --- a/src/components/LogInContainer.js +++ b/src/components/LogInContainer.js @@ -1,4 +1,4 @@ -import React, {useContext} from 'react'; +import React, {useState, useContext} from 'react'; import { useHistory,BrowserRouter, Route, NavLink, Switch,withRouter } from 'react-router-dom'; import Register from './Register'; import Login from './Login'; @@ -7,6 +7,8 @@ import styled, {css} from 'styled-components'; import {Button} from './miscellaneous/Styles'; import UserContext from "../context/UserContext"; import {logout} from "./NavBar" +import { GoogleLogin } from 'react-google-login'; +import Axios from "axios"; const BaseApp = styled.div` display: flex; @@ -15,13 +17,13 @@ const BaseApp = styled.div` `; - const AppSide = styled.div` width: 50%; background-color: #66bfbf; - display:flex; - flex-direction: column; - justify-content: flex-end; + display: grid; + grid-template-columns: repeat(auto-fit, 300px); + justify-content: center; + align-items: center; `; const AppForm = styled.div` @@ -140,23 +142,70 @@ const FormTitle = styled.div` margin-bottom: 50px; `; +const responseSuccessGoogle = (response) => { + + Axios({ + method: 'POST', + url: "http://localhost:5000/users/googlelogin", + data: { idToken: response.tokenId } + }).then(response => { + console.log(response); + + }) +} +const responseFailGoogle = (response) => { + console.log(response) + +} const LogInContainer = () => { const { userData, setUserData } = useContext(UserContext); + const [error, setError] = useState(); + const [hasLogged, setHasLogged] = useState(false); const history = useHistory(); +const responsePassGoogle = async (response) => { + try{ + const idToken = response.tokenId; + console.log("id token" + idToken); + const googleres = await Axios.post( + "http://server-locaft.herokuapp.com/users/googlelogin",{ + idToken: idToken + } + + ); + setUserData({ + token: googleres.data.token, + user: googleres.data.user + }); + localStorage.setItem("auth-token",googleres.data.token); + setHasLogged(true); + +} catch (err) { + err.response.data.msg && setError(err.response.data.msg); +} + + +} return ( - - plane logo - - - locaft - Sit back, let us move you + {!hasLogged ? ( + - - - skyscraper - + + ): ( + +

username: {userData.user.username}

+

email: {userData.user.email}

+

pricing: {userData.user.pricing}

+ + + ) } {!userData.user ? ( diff --git a/src/components/Login.js b/src/components/Login.js index 8340352..2170838 100644 --- a/src/components/Login.js +++ b/src/components/Login.js @@ -6,13 +6,13 @@ import { Link, useHistory, withRouter } from "react-router-dom"; import {Button, FormCenter, FormField, FormLabel, FormInput, FormLink } from './miscellaneous/Styles' const Login = () => { - + const [email, setEmail] = useState(); const [password, setPassword] = useState(); const [error, setError] = useState(); const { userData,setUserData } = useContext(UserContext); - + const history = useHistory(); const submit = async (e) => { @@ -23,6 +23,7 @@ const Login = () => { "https://server-locaft.herokuapp.com/users/login", loginUser ); + console.dir("login res " + loginRes.data.user); setUserData({ token: loginRes.data.token, user: loginRes.data.user, @@ -32,9 +33,9 @@ const Login = () => { } catch (err) { err.response.data.msg && setError(err.response.data.msg); } - }; + }; return ( - + {error && ( setError(undefined)} /> @@ -51,7 +52,7 @@ const Login = () => { - + Not a member? - + ); } diff --git a/src/components/NavBar.js b/src/components/NavBar.js index 4daba95..e4212cd 100644 --- a/src/components/NavBar.js +++ b/src/components/NavBar.js @@ -27,7 +27,7 @@ const Header = styled.header` display: fixed; `:css``}; - + & .logo { font-family: "Ubuntu"; font-size: 2rem; @@ -50,7 +50,6 @@ const List = styled.ul` flex-direction: row; justify-content: center; align-items: center; - padding: 13px 50px; flex-wrap: nowrap; margin-bottom: 0px !important; @@ -76,7 +75,7 @@ const Anchor = styled.a` - + `; const Linker = styled(Link)` color:#fff; @@ -98,9 +97,9 @@ export const logout = (setUserData) => { }; export default function NavBar() { - const [scrolled, setScrolled] = useState(); + const [scrolled, setScrolled] = useState(); const { userData, setUserData } = useContext(UserContext); - + const handleScroll=() => { const offset=window.scrollY; if(offset > 200 ){ @@ -115,11 +114,11 @@ const { userData, setUserData } = useContext(UserContext); }) - + return (
- + locaft Home @@ -130,7 +129,7 @@ const { userData, setUserData } = useContext(UserContext); logout(setUserData)}>{userData.user.username} - + ) : ( Register diff --git a/src/components/PricingPlan.js b/src/components/PricingPlan.js index 7d7de40..405e0d1 100644 --- a/src/components/PricingPlan.js +++ b/src/components/PricingPlan.js @@ -39,8 +39,8 @@ const PricingPlanContainer = styled.div` } - - + + `; const Radio = styled.input` @@ -75,10 +75,10 @@ const Pricing = styled.section` box-shadow: 0 0 15px rgba(0,0,0,0.4); transform: scale(1.05); - + `:css``}; - - + + `; const Text = styled.p` @@ -123,7 +123,7 @@ const SpecialText = styled.div` color: #ffffff; background: #007c64; box-shadow: 0 0 10px rgba(0,0,0,0.2) inset; - + &, ${Title}{ margin: 0; text-align: center; @@ -138,7 +138,7 @@ const Description = styled.div` `; const List = styled.ul` - padding: 0; + padding: 0; margin: 0; text-align: left; `; @@ -148,7 +148,7 @@ const Feature = styled.li` position: relative; font-size: 0.9 em; &:not(:last-child) { - margin-bottom: 2em; + margin-bottom: 2em; } &::before { @@ -191,9 +191,9 @@ const submit = async (props) => { "https://server-locaft.herokuapp.com/users/update", { id, pricing - + } - + ); } catch (err) { console.log(err); @@ -205,7 +205,7 @@ const submit = async (props) => {
{ !purchased ? ( - + Pricing Plan setPricing(event.target.value)}> @@ -316,7 +316,7 @@ const submit = async (props) => {
) - + } export default PricingPlan; \ No newline at end of file