Added Google OAuth on client side and added grid in navbar

Author: ujjavaldesai07

client/public/index.html

@@ -16,6 +16,7 @@
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <script src="https://apis.google.com/js/api.js"></script>
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.

client/src/actions/index.js

@@ -8,7 +8,7 @@ import {
     SAVE_QUERY_STATUS,
     SHIPPING_ADDRESS_CONFIRMED,
     PAYMENT_INFO_CONFIRMED,
-    PAYMENT_RESPONSE, CART_TOTAL, HANDLE_SIGN_UP_RESET,
+    PAYMENT_RESPONSE, CART_TOTAL, HANDLE_SIGN_UP_RESET, HANDLE_GOOGLE_AUTH_SIGN_IN, HANDLE_GOOGLE_AUTH_SIGN_OUT,
 } from './types';
 import {INTERNAL_SERVER_ERROR_CODE, BAD_REQUEST_ERROR_CODE} from '../constants/http_error_codes'
 import {SHOPPERS_PRODUCT_INFO_COOKIE, CART_TOTAL_COOKIE, AUTH_DETAILS_COOKIE} from '../constants/cookies'
@@ -43,7 +43,7 @@ export const setPaymentInfo = payload => {
     }
 }
 
-export const signIn = formValues => async (dispatch) => {
+export const signIn = formValues => async dispatch => {
     log.info(`[ACTION]: signIn API is invoked formValues = ${formValues}`)
 
     const hash = Base64.encode(`${formValues.username}:${formValues.password}`);
@@ -75,6 +75,54 @@ export const signOut = () => {
     }
 }
 
+export const signInUsingOAuth = googleAuth => async dispatch => {
+    log.info(`[signInUsingOAuth] googleAuth = ${googleAuth}`)
+
+    // check if not signed in
+    if (googleAuth && !googleAuth.isSignedIn.get()) {
+        log.info('[signInUsingOAuth] User has not signed in yet')
+
+        // sign in
+        googleAuth.signIn(JSON.parse(googleAuth.currentUser.get().getId())).then(() => {
+            // if sign in works
+            if (googleAuth.isSignedIn.get()) {
+                log.info('[signInUsingOAuth] User is signed in successfully')
+                // here we are sure that we signed in and now dispatch.
+                dispatch({
+                    type: HANDLE_GOOGLE_AUTH_SIGN_IN,
+                    payload: {
+                        firstName: "Norman",
+                        oAuth: googleAuth
+                    }
+                })
+
+                history.push("/");
+            }
+        })
+    }
+}
+
+export const signOutUsingOAuth = googleAuth => async dispatch => {
+    log.info(`[signOutUsingOAuth] googleAuth = ${googleAuth}, ` +
+        `googleAuth.isSignedIn.get() = ${googleAuth.isSignedIn.get()}`)
+
+    // if signed in then only try to sign out
+    if (googleAuth && googleAuth.isSignedIn.get()) {
+
+        log.info(`[signOutUsingOAuth] trying to signout`)
+        googleAuth.signOut().then(() => {
+            if (!googleAuth.isSignedIn.get()) {
+                log.info(`[signOutUsingOAuth] Successfully signed out`)
+                dispatch({
+                    type: HANDLE_GOOGLE_AUTH_SIGN_OUT,
+                    payload: null
+                })
+            }
+        });
+    }
+}
+
+
 export const resetSignUp = () => {
     return {
         type: HANDLE_SIGN_UP_RESET

client/src/actions/types.js

@@ -3,6 +3,9 @@
 export const HANDLE_SIGN_IN= "HANDLE_SIGN_IN";
 export const HANDLE_SIGN_OUT= "HANDLE_SIGN_OUT";
 export const HANDLE_SIGN_IN_ERROR= "HANDLE_SIGN_IN_ERROR";
+export const SET_GOOGLE_AUTH= "SET_GOOGLE_AUTH";
+export const HANDLE_GOOGLE_AUTH_SIGN_IN= "HANDLE_GOOGLE_AUTH_SIGN_IN";
+export const HANDLE_GOOGLE_AUTH_SIGN_OUT= "HANDLE_GOOGLE_AUTH_SIGN_OUT";
 export const HANDLE_SIGN_UP_ERROR= "HANDLE_SIGN_UP_ERROR";
 export const HANDLE_SIGN_UP_RESET= "HANDLE_SIGN_UP_RESET";
 export const HANDLE_TAB_HOVER_EVENT = "HANDLE_TAB_HOVER_EVENT";

client/src/components/routes/cancelPayment.js

@@ -3,13 +3,17 @@ import log from 'loglevel'
 import {Grid} from "@material-ui/core";
 import {Link} from "react-router-dom";
 import {CHECKOUT_ROUTE} from "../../constants/react_routes";
+import {DocumentTitle} from "../ui/documentTitle";
 
 export const CancelPayment = () => {
 
     log.info('[CancelPayment] Rendering SuccessPayment Component')
     return (
         <Grid item xs={8} container style={{padding: "2rem", margin: "2rem", border: "1px solid black",
             fontSize: "1.2rem"}}>
+
+            <DocumentTitle title="Payment Failed"/>
+
             <Grid item xs={12}
                   style={{border: "1px solid red", padding: "2rem", fontSize: "2rem", fontWeight: "bold"}}>
                 Payment Cancelled. Sorry your payment is declined.

client/src/components/routes/checkout/checkout.js

@@ -14,6 +14,7 @@ import PaymentButton from "./paymentButton";
 import {useAddProductsToShoppingBag} from "../../../hooks/useAddProductsToShoppingBag";
 import {getDataViaAPI} from "../../../actions";
 import {useCartTotal} from "../../../hooks/useCartTotal";
+import {DocumentTitle} from "../../ui/documentTitle";
 // import {Elements, ElementsConsumer} from "@stripe/react-stripe-js";
 // import Payment from "./payment"
 
@@ -103,6 +104,8 @@ function Checkout(props) {
 
             <Grid item xs={12} sm={11} md={5}>
 
+                <DocumentTitle title="Checkout"/>
+
                 <Accordion square expanded>
                     <AccordionSummary aria-controls={`${shippingAddressPanel}-content`}
                                       id={`${shippingAddressPanel}-header`}>

client/src/components/routes/detail/productDetails.js

@@ -20,6 +20,7 @@ import _ from "lodash";
 import {PRODUCT_BY_ID_DATA_API} from "../../../constants/api_routes";
 import {SHOPPERS_PRODUCT_INFO_COOKIE} from "../../../constants/cookies";
 import {HOME_ROUTE} from "../../../constants/react_routes";
+import {DocumentTitle} from "../../ui/documentTitle";
 
 export const useButtonStyles = makeStyles(() => ({
     buttonStartIcon: {
@@ -166,6 +167,7 @@ function ProductDetails(props) {
     log.info(`[Product Detail] Rendering Detail Component. selectedProduct = ${JSON.stringify(selectedProduct)}`)
     return (
         <>
+            <DocumentTitle title="Product Details"/>
             <Box display="flex" p={3}>
                 <BreadcrumbsSection linkList={breadcrumbLinks}/>
             </Box>