google auth fix

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",

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",

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() {
           </UserContext.Provider>
         </BrowserRouter>
 
-        
+
       </div>
       </>
 

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;
+ display: grid;
-  flex-direction: column;
+  grid-template-columns: repeat(auto-fit, 300px);
-  justify-content: flex-end;
+  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>
+            {!hasLogged ? (
-            <img src="/logo.jpg" alt="plane logo"></img>
+            <GoogleLogin
-            </PlaneContainer>
+    clientId= {process.env.REACT_APP_CLIENT_ID}
-            <TextContainer>
+    buttonText="Login with Google"
-              <BannerHeading>locaft</BannerHeading>
+    onSuccess={responsePassGoogle}
-              <BannerText>Sit back, let us move you</BannerText>
+    onFailure={responseFailGoogle}
+    cookiePolicy={'single_host_origin'}
+  />
 
-            </TextContainer>
+
-             <SkyContainer>
+            ): (
-                <img src="/skyscraper.png" alt="skyscraper"></img>
+              <React.Fragment>
-              </SkyContainer>
+                <p> username: {userData.user.username}</p>
+                <p> email: {userData.user.email}</p>
+                <p> pricing: {userData.user.pricing}</p>
+              </React.Fragment>
+
+            ) }
           </AppSide>
           <AppForm>
             {!userData.user ? (

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 (
-          
+
         <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>
         );
     }

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 (
     <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>

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) => {
             <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;