Merge pull request #103 from dipscoder/authFlow

Abhishek-kumar09 · web-flow · commit 1f75ea3ba984 · 2021-06-26T00:03:21.000+05:30
Auth flow
diff --git a/public/static/images/google-logo.png b/public/static/images/google-logo.png
diff --git a/src/components/Login.js b/src/components/Login.js
@@ -8,9 +8,10 @@ import {
   Divider,
   Checkbox,
   Button,
-  Grid
+  Grid,
+  Avatar
 } from '@material-ui/core';
-import auth from '../services/authService';
+import auth, { signInWithGoogle } from '../services/authService';
 
 const useStyles = makeStyles(theme => ({
   root: {
@@ -61,7 +62,7 @@ const useStyles = makeStyles(theme => ({
   divider: {
     width: '308px',
     height: '2px',
-    marginTop: '45px',
+    marginTop: '20px',
     borderRadius: '25px',
     backgroundColor: '#291757'
   },
@@ -77,7 +78,7 @@ const useStyles = makeStyles(theme => ({
   },
   button: {
     marginLeft: '246px',
-    marginTop: '40px',
+    marginTop: '5px',
     width: '100px',
     height: '28px',
     borderRadius: '20px',
@@ -91,6 +92,31 @@ const useStyles = makeStyles(theme => ({
       marginLeft: '215px'
     }
   },
+  googleBtn: {
+    textTransform: 'none',
+    fontSize: '13px',
+    display: 'flex',
+    borderRadius: '20px',
+    alignItems: 'center',
+    boxShadow: theme.shadows[3],
+    backgroundColor: '#291757',
+    color: theme.palette.primary.contrastText,
+    transition: 'background-color 0.5s',
+    padding: '7px 30px',
+    '&:hover': {
+      backgroundColor: theme.palette.primary.dark,
+      transition: 'background-color 0.5s',
+      cursor: 'pointer'
+    }
+  },
+  avatar: {
+    width: '20px',
+    height: '20px'
+  },
+  text: {
+    flexGrow: 1,
+    textAlign: 'center'
+  },
   cross: {
     width: '12px',
     height: '12px',
@@ -129,6 +155,12 @@ export default function Login({ handleClose }) {
     });
   };
 
+  const handleSignInWithGoogle = () => {
+    signInWithGoogle().catch(e => {
+      console.log(e);
+    });
+  };
+
   return (
     <Card className={classes.root}>
       <Grid container>
@@ -177,6 +209,30 @@ export default function Login({ handleClose }) {
               variant="outlined"
               onChange={handleChange}
             />
+            <div
+              style={{
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'center',
+                paddingRight: '90px'
+              }}
+            >
+              <Typography style={{ color: '#291757', fontWeight: 'bold' }}>
+                OR
+              </Typography>
+              <Button
+                className={classes.googleBtn}
+                onClick={() => handleSignInWithGoogle()}
+              >
+                <Avatar
+                  src="../static/images/google-logo.png"
+                  className={classes.avatar}
+                />
+                <Typography component="p" variant="h6" className={classes.text}>
+                  Login with Google
+                </Typography>
+              </Button>
+            </div>
             <Divider className={classes.divider} />
             <div className={classes.bottomPart}>
               <Checkbox className={classes.checkbox} />
diff --git a/src/layouts/DrawerLayout/index.js b/src/layouts/DrawerLayout/index.js
@@ -25,6 +25,7 @@ import {
 import MenuIcon from '@material-ui/icons/Menu';
 import ListItemIcon from '@material-ui/core/ListItemIcon';
 import { faBloggerB } from '@fortawesome/free-brands-svg-icons';
+import { useSelector } from 'react-redux';
 const drawerWidth = 300;
 
 const useStyles = makeStyles(theme => ({
@@ -120,6 +121,7 @@ const useStyles = makeStyles(theme => ({
 }));
 export default function DrawerLayout({ children }) {
   const classes = useStyles();
+  const user = useSelector(state => state.account.user);
   const history = useHistory();
   const [toggle, setToggle] = useState(false);
   const myStyles = {
@@ -168,11 +170,11 @@ export default function DrawerLayout({ children }) {
               <Avatar
                 className={classes.idavatar}
                 alt="ProfileIcon"
-                src="./static/profile/icons/icons.png"
+                src={user?.photoURL}
               />
               <div style={{ display: 'block', marginLeft: '10px' }}>
                 <Typography style={{ fontSize: '18px', fontWeight: '600' }}>
-                  John Doe
+                  {user?.displayName}
                 </Typography>
                 <div style={{ display: 'flex' }}>
                   <Typography variant="subtitle1" className={classes.idtext}>
diff --git a/src/services/authService.js b/src/services/authService.js
@@ -2,6 +2,7 @@ import jwtDecode from 'jwt-decode';
 import axios from 'src/utils/axios';
 
 import firebase from 'firebase';
+require('firebase/auth');
 
 class AuthService {
   // Configure Firebase.
@@ -115,3 +116,9 @@ const authService = new AuthService();
 
 export default authService;
 export { firebase };
+
+export const signInWithGoogle = () => {
+  const provider = new firebase.auth.GoogleAuthProvider();
+  provider.setCustomParameters({ prompt: 'select_account' });
+  return firebase.auth().signInWithPopup(provider);
+};
diff --git a/src/views/pages/HomeView/Hero.js b/src/views/pages/HomeView/Hero.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 
@@ -9,8 +9,14 @@ import {
   Grid,
   Hidden,
   Typography,
-  makeStyles
+  makeStyles,
+  Dialog
 } from '@material-ui/core';
+import { useDispatch, useSelector } from 'react-redux';
+import { useHistory } from 'react-router';
+import { firebase } from 'src/services/authService';
+import Login from '../../../components/Login';
+import { login, dismissLogin } from 'src/actions/accountActions';
 
 const useStyles = makeStyles(theme => ({
   root: {
@@ -64,8 +70,61 @@ const useStyles = makeStyles(theme => ({
 
 function Hero({ className, ...rest }) {
   const classes = useStyles();
+  const user = useSelector(state => state.account.user);
+  const loginFlag = useSelector(state => state.account.login);
+  const [text, setText] = useState('');
+  const history = useHistory();
+  const dispatch = useDispatch();
+
+  useEffect(() => {
+    if (user === null || user === undefined) {
+      setText('Login and Create Profile');
+      return;
+    }
+    // setText("Go to Dashboard")
+    const userId = user.uid;
+    const db = firebase.firestore();
+
+    db.collection('users')
+      .doc(userId)
+      .get()
+      .then(doc => {
+        if (doc.exists) {
+          setText('Go To Dashboard');
+        } else {
+          setText('Register');
+        }
+      });
+  }, [user]);
+
+  const handleClick = () => {
+    if (user !== null && user !== undefined) {
+      if (text === 'Go To Dashboard') {
+        history.push('/dashboard');
+      }
+      if (text === 'Register') {
+        history.push('/register');
+      }
+    } else {
+      dispatch(login());
+    }
+  };
+
+  const handleClose = () => {
+    dispatch(dismissLogin());
+  };
+
   return (
     <div className={clsx(classes.root, className)} {...rest}>
+      <Dialog
+        maxWidth
+        open={!user && !!loginFlag}
+        onClose={handleClose}
+        aria-labelledby="form-dialog-title"
+        className={classes.dialog}
+      >
+        <Login handleClose={handleClose} />
+      </Dialog>
       <Container
         maxWidth="lg"
         style={{ padding: '40px 0px 0px', position: 'relative' }}
@@ -143,21 +202,23 @@ function Hero({ className, ...rest }) {
                   <Grid item xs={12} md={12}>
                     <Typography variant="h1" color="secondary" />
                     <Box>
-                      <Button
-                        style={{
-                          backgroundColor: '#ffffff',
-                          color: '#B20000',
-                          textTransform: 'capitalize',
-                          fontWeight: 700,
-                          borderRadius: '20px'
-                        }}
-                        component="a"
-                        href="/register"
-                        size="large"
-                        variant="contained"
-                      >
-                        Login and Create Profile
-                      </Button>
+                      {text.length > 0 && (
+                        <Button
+                          style={{
+                            backgroundColor: '#ffffff',
+                            color: '#B20000',
+                            textTransform: 'capitalize',
+                            fontWeight: 700,
+                            borderRadius: '20px'
+                          }}
+                          component="a"
+                          onClick={handleClick}
+                          size="large"
+                          variant="contained"
+                        >
+                          {text}
+                        </Button>
+                      )}
                     </Box>
                   </Grid>
                 </Grid>
