google auth fix
This commit is contained in:
parent
6099c144b3
commit
01a1e2ceea
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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() {
|
|||
</UserContext.Provider>
|
||||
</BrowserRouter>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</>
|
||||
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
<BaseApp>
|
||||
<AppSide>
|
||||
<PlaneContainer>
|
||||
<img src="/logo.jpg" alt="plane logo"></img>
|
||||
</PlaneContainer>
|
||||
<TextContainer>
|
||||
<BannerHeading>locaft</BannerHeading>
|
||||
<BannerText>Sit back, let us move you</BannerText>
|
||||
{!hasLogged ? (
|
||||
<GoogleLogin
|
||||
clientId= {process.env.REACT_APP_CLIENT_ID}
|
||||
buttonText="Login with Google"
|
||||
onSuccess={responsePassGoogle}
|
||||
onFailure={responseFailGoogle}
|
||||
cookiePolicy={'single_host_origin'}
|
||||
/>
|
||||
|
||||
</TextContainer>
|
||||
<SkyContainer>
|
||||
<img src="/skyscraper.png" alt="skyscraper"></img>
|
||||
</SkyContainer>
|
||||
|
||||
): (
|
||||
<React.Fragment>
|
||||
<p> username: {userData.user.username}</p>
|
||||
<p> email: {userData.user.email}</p>
|
||||
<p> pricing: {userData.user.pricing}</p>
|
||||
</React.Fragment>
|
||||
|
||||
) }
|
||||
</AppSide>
|
||||
<AppForm>
|
||||
{!userData.user ? (
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
|
||||
|
||||
<FormCenter>
|
||||
{error && (
|
||||
<ErrorNotice message={error} clearError={() => setError(undefined)} />
|
||||
|
|
@ -51,7 +52,7 @@ const Login = () => {
|
|||
</FormField>
|
||||
|
||||
<FormField>
|
||||
|
||||
|
||||
<Button
|
||||
type="submit"
|
||||
radiuscolor="#009578"
|
||||
|
|
@ -61,7 +62,7 @@ const Login = () => {
|
|||
>Sign In</Button> <FormLink exact to="/register" className="FormField__Link">Not a member?</FormLink>
|
||||
</FormField>
|
||||
</form>
|
||||
|
||||
|
||||
</FormCenter>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
<div className="navbar">
|
||||
<Header sticky = {scrolled} >
|
||||
|
||||
|
||||
<Anchor href="/" className="logo">locaft</Anchor>
|
||||
<List>
|
||||
<ListElement><Anchor href="/">Home</Anchor></ListElement>
|
||||
|
|
@ -130,7 +129,7 @@ const { userData, setUserData } = useContext(UserContext);
|
|||
<React.Fragment>
|
||||
<ListElement><Linker onClick={() => logout(setUserData)}>{userData.user.username}</Linker></ListElement>
|
||||
</React.Fragment>
|
||||
|
||||
|
||||
) : (
|
||||
<React.Fragment>
|
||||
<ListElement><Linker to="/user/register">Register</Linker></ListElement>
|
||||
|
|
|
|||
|
|
@ -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) => {
|
|||
<div className="body">
|
||||
<NavBar />
|
||||
{ !purchased ? (
|
||||
|
||||
|
||||
<React.Fragment>
|
||||
<Heading>Pricing Plan</Heading>
|
||||
<PricingPlanContainer onChange={event => setPricing(event.target.value)}>
|
||||
|
|
@ -316,7 +316,7 @@ const submit = async (props) => {
|
|||
</div>
|
||||
|
||||
)
|
||||
|
||||
|
||||
|
||||
}
|
||||
export default PricingPlan;
|
||||
Loading…
Reference in New Issue