Added avatar icon on sign in

ujjavaldesai07 · ujjavaldesai07 · commit cf3e8149d863 · 2020-08-05T01:38:20.000-07:00
diff --git a/client/src/actions/index.js b/client/src/actions/index.js
@@ -11,19 +11,19 @@ import {
     PAYMENT_RESPONSE, CART_TOTAL, HANDLE_SIGN_UP_RESET,
 } from './types';
 import {INTERNAL_SERVER_ERROR_CODE, BAD_REQUEST_ERROR_CODE} from '../constants/http_error_codes'
-import {SHOPPERS_PRODUCT_INFO_COOKIE, CART_TOTAL_COOKIE, TOKEN_ID_COOKIE} from '../constants/cookies'
+import {SHOPPERS_PRODUCT_INFO_COOKIE, CART_TOTAL_COOKIE, AUTH_DETAILS_COOKIE} from '../constants/cookies'
 import history from "../history";
 import {Base64} from 'js-base64';
 import Cookies from 'js-cookie';
 import log from "loglevel";
 import {commonServiceAPI, authServiceAPI} from "../api/service_api";
 import axios from 'axios';
 
-export const setTokenFromCookie = tokenId => {
-    log.info(`[ACTION]: setTokenFromCookie tokenId = ${tokenId}`)
+export const setAuthDetailsFromCookie = savedResponse => {
+    log.info(`[ACTION]: setTokenFromCookie savedResponse = ${savedResponse}`)
     return {
         type: HANDLE_SIGN_IN,
-        payload: tokenId
+        payload: savedResponse
     }
 }
 
@@ -57,8 +57,8 @@ export const signIn = formValues => async (dispatch) => {
     if (response) {
         if (response.data.jwt) {
             log.info(`[ACTION]: dispatch HANDLE_SIGN_IN response.data.jwt = ${response.data.jwt}`)
-            dispatch({type: HANDLE_SIGN_IN, payload: response.data.jwt});
-            Cookies.set(TOKEN_ID_COOKIE, response.data.jwt, {expires: 2});
+            dispatch({type: HANDLE_SIGN_IN, payload: response.data});
+            Cookies.set(AUTH_DETAILS_COOKIE, response.data, {expires: 2});
             history.push('/');
         } else {
             log.info(`[ACTION]: dispatch HANDLE_SIGN_IN_ERROR response.data.error = ${response.data.error}`)
@@ -69,7 +69,7 @@ export const signIn = formValues => async (dispatch) => {
 
 export const signOut = () => {
     log.info(`[ACTION]: signOut Cookie is removed...`)
-    Cookies.remove(TOKEN_ID_COOKIE)
+    Cookies.remove(AUTH_DETAILS_COOKIE)
     return {
         type: HANDLE_SIGN_OUT
     }
diff --git a/client/src/components/routes/navbar/navBar.js b/client/src/components/routes/navbar/navBar.js
@@ -8,7 +8,7 @@ import {Menu, Grid} from '@material-ui/core';
 import MenuIcon from '@material-ui/icons/Menu';
 import MoreIcon from '@material-ui/icons/MoreVert';
 import Cookies from 'js-cookie';
-import {getDataViaAPI, setTokenFromCookie, signOut} from '../../../actions';
+import {getDataViaAPI, setAuthDetailsFromCookie, signOut} from '../../../actions';
 import {connect, useDispatch} from 'react-redux'
 
 import {
@@ -29,18 +29,21 @@ import {HTTPError} from "../../ui/error/httpError";
 import {BadRequest} from "../../ui/error/badRequest";
 import SearchBar from "./searchBar";
 import SideBar from "./sideBar";
-import {SHOPPERS_PRODUCT_INFO_COOKIE, TOKEN_ID_COOKIE} from "../../../constants/cookies";
+import {SHOPPERS_PRODUCT_INFO_COOKIE, AUTH_DETAILS_COOKIE} from "../../../constants/cookies";
 import {TABS_DATA_API} from "../../../constants/api_routes";
 import {TABS_API_OBJECT_LEN} from "../../../constants/constants"
+import Avatar from '@material-ui/core/Avatar';
+import history from "../../../history";
 
 const NavBar = props => {
     const classes = useNavBarStyles();
     const [anchorEl, setAnchorEl] = React.useState(null);
     const [mobileSearchState, setMobileSearchState] = React.useState(false);
     const [mobileMoreAnchorEl, setMobileMoreAnchorEl] = React.useState(null);
     const [hamburgerBtnState, setHamburgerBtnState] = React.useState(false);
-    const {isSignedIn, tokenId} = useSelector(state => state.signInReducer)
+    const {isSignedIn, tokenId, firstName} = useSelector(state => state.signInReducer)
     const tabsAPIData = useSelector(state => state.tabsDataReducer)
+    const addToCart = useSelector(state => state.addToCartReducer)
 
     const isMenuOpen = Boolean(anchorEl);
     const isMobileMenuOpen = Boolean(mobileMoreAnchorEl);
@@ -79,15 +82,15 @@ const NavBar = props => {
         // account details from the cookie.
         if (isSignedIn === null) {
             log.info(`[NavBar]: isSignedIn is null`)
-            let tokenIdFromCookie = Cookies.get(TOKEN_ID_COOKIE)
-            if (tokenIdFromCookie) {
-                log.info(`[NavBar]: Token set from Cookie`)
-                props.setTokenFromCookie(tokenIdFromCookie)
+            let savedAuthDetails = Cookies.get(AUTH_DETAILS_COOKIE)
+            if (savedAuthDetails) {
+                log.info(`[NavBar]: setting Auth Details from Cookie`)
+                props.setAuthDetailsFromCookie(JSON.parse(savedAuthDetails))
             }
         }
 
         // tabs data is not loaded then load it.
-        if(!tabsAPIData.hasOwnProperty("data")) {
+        if (!tabsAPIData.hasOwnProperty("data")) {
             props.getDataViaAPI(LOAD_TABS_DATA, TABS_DATA_API)
         }
 
@@ -155,13 +158,35 @@ const NavBar = props => {
             open={isMenuOpen}
             onClose={handleMenuClose}
         >
-            <Link to={!tokenId ? "/signin" : "/"}>
-                <MenuItem onClick={handleLoginStatus}>{!tokenId ? 'SignIn' : 'SignOut'}</MenuItem>
+            <Link to={isSignedIn ? "/" : "/signin"}>
+                <MenuItem onClick={handleLoginStatus}>{isSignedIn ? 'Sign Out' : 'Sign In'}</MenuItem>
             </Link>
             <MenuItem onClick={handleMenuClose}>My account</MenuItem>
         </Menu>
     );
 
+    const menuProfileBtnHandler = () => {
+        if (isSignedIn) {
+            history.push("/")
+        } else {
+            history.push("/signin")
+        }
+        setMobileMoreAnchorEl(null);
+    }
+
+    const menuBagBtnHandler = () => {
+        history.push("/shopping-bag")
+        setMobileMoreAnchorEl(null);
+    }
+
+    const renderAvatar = () => {
+        return (
+            <Avatar className={classes.orange} sizes="small"
+                    style={{width: 20, height: 20, marginBottom: 3}}>{firstName? firstName.charAt(0):
+                "S"}</Avatar>
+        )
+    }
+
     const mobileMenuId = 'primary-search-account-menu-mobile';
     const renderMobileMenu = (
         <Menu
@@ -173,35 +198,43 @@ const NavBar = props => {
             open={isMobileMenuOpen}
             onClose={handleMobileMenuClose}
         >
-            <MenuItem onClick={handleProfileMenuOpen}>
-                <IconButton
-                    aria-label="account of current user"
-                    aria-controls="primary-search-account-menu"
-                    aria-haspopup="true"
-                    color="inherit"
-                >
-                    <AccountCircle/>
-                </IconButton>
-                <p>Login</p>
+            <MenuItem onClick={menuProfileBtnHandler} style={{padding: "0 0.7rem 0 0"}}>
+                <Grid container alignItems="center">
+                    <Grid item>
+                        <IconButton aria-label="account of current user"
+                                    aria-controls="primary-search-account-menu"
+                                    aria-haspopup="true"
+                                    color="inherit">
+                            {isSignedIn ? renderAvatar() : <AccountCircle/>}
+                        </IconButton>
+                    </Grid>
+                    <Grid item>
+                        <p>{isSignedIn ? 'Sign Out' : 'Sign In'}</p>
+                    </Grid>
+                </Grid>
             </MenuItem>
-            <MenuItem>
-                <IconButton aria-label="show 11 new notifications" color="inherit">
-                    <Badge badgeContent={11} color="secondary">
-                        <LocalMallIcon/>
-                    </Badge>
-                </IconButton>
-                <p>Bag</p>
+            <MenuItem onClick={menuBagBtnHandler} style={{padding: "0 0.7rem 0 0"}}>
+                <Grid container alignItems="center">
+                    <Grid item xs={7}>
+                        <IconButton color="inherit">
+                            <Badge badgeContent={addToCart.totalQuantity} color="secondary">
+                                <LocalMallIcon/>
+                            </Badge>
+                        </IconButton>
+                    </Grid>
+                    <Grid item>
+                        <p>Bag</p>
+                    </Grid>
+                </Grid>
             </MenuItem>
         </Menu>
     );
 
     const handleMobileSearchOpen = () => {
-        log.info("Mobile Search is clicked....")
         setMobileSearchState(true)
     }
 
     const handleMobileSearchClose = () => {
-        log.info("Mobile Search is clicked....")
         setMobileSearchState(false)
     }
 
@@ -280,7 +313,7 @@ const NavBar = props => {
                             <Box display="flex" justifyContent="center" alignItems="center" css={{width: 90}}>
                                 <Box width="50%" onClick={handleProfileMenuOpen} css={{cursor: 'pointer'}}>
                                     <Box pl={1} pt={0.3}>
-                                        <AccountCircle/>
+                                        {isSignedIn ? renderAvatar() : <AccountCircle/>}
                                     </Box>
                                     <Box style={{color: "black", fontSize: "0.8rem", fontWeight: 'bold'}}>
                                         Profile
@@ -321,4 +354,4 @@ const NavBar = props => {
     );
 };
 
-export default connect(null, {setTokenFromCookie, signOut, getDataViaAPI})(NavBar);
+export default connect(null, {setAuthDetailsFromCookie, signOut, getDataViaAPI})(NavBar);
diff --git a/client/src/constants/cookies.js b/client/src/constants/cookies.js
@@ -1,3 +1,3 @@
-export const TOKEN_ID_COOKIE = "TOKEN_ID_COOKIE";
+export const AUTH_DETAILS_COOKIE = "AUTH_DETAILS_COOKIE";
 export const SHOPPERS_PRODUCT_INFO_COOKIE = 'SHOPPERS_PRODUCT_INFO_COOKIE';
 export const CART_TOTAL_COOKIE = "CART_TOTAL_COOKIE";
diff --git a/client/src/reducers/screens/commonScreenReducer.js b/client/src/reducers/screens/commonScreenReducer.js
@@ -30,17 +30,20 @@ import {
 import _ from "lodash";
 
 
-export const signInReducer = (state = {isSignedIn: null, timestamp: null}, action) => {
+export const signInReducer = (state
+                                  = {isSignedIn: null, timestamp: null, firstName: null}, action) => {
 
     // timestamp is used to update the state so that
     // we can stop loading progress component
     switch (action.type) {
         case HANDLE_SIGN_IN:
-            return {...state, isSignedIn: true, tokenId: action.payload, timestamp: Date.now()};
+            return {...state, isSignedIn: true, tokenId: action.payload.jwt,
+                firstName: action.payload.firstName, timestamp: Date.now()};
         case HANDLE_SIGN_IN_ERROR:
             return {...state, isSignedIn: false, errorMsg: action.payload, timestamp: Date.now()};
         case HANDLE_SIGN_OUT:
-            return _.omit(state, 'tokenId', 'errorMsg');
+            _.omit(state, 'tokenId', 'errorMsg')
+            return {...state, isSignedIn: false};
         default:
             return state;
     }
diff --git a/client/src/styles/materialUI/navBarStyles.js b/client/src/styles/materialUI/navBarStyles.js
@@ -1,4 +1,5 @@
 import {fade, makeStyles} from "@material-ui/core/styles";
+import deepOrange from "@material-ui/core/colors/deepOrange";
 
 const useNavBarStyles = makeStyles(theme => ({
     grow_1: {
@@ -155,7 +156,11 @@ const useNavBarStyles = makeStyles(theme => ({
     },
     mobileSearchButton: {
         alignSelf: "flex-end"
-    }
+    },
+    orange: {
+        color: theme.palette.getContrastText(deepOrange[500]),
+        backgroundColor: deepOrange[500],
+    },
 }));
 
 export default useNavBarStyles;
diff --git a/server/authentication-service/src/main/java/com/ujjaval/ecommerce/authenticationservice/controller/AuthController.java b/server/authentication-service/src/main/java/com/ujjaval/ecommerce/authenticationservice/controller/AuthController.java
@@ -90,15 +90,19 @@ public ResponseEntity<?> createAuthenticationToken(
                             Md5Util.getInstance().getMd5Hash(authenticationRequest.getPassword()))
             );
         } catch (BadCredentialsException e) {
-            return ResponseEntity.ok(new AuthenticationResponse(null, "Incorrect username or password."));
+            return ResponseEntity.ok(new AuthenticationResponse(null, "Incorrect username or password.",
+                    null));
         } catch (Exception e) {
-            return ResponseEntity.ok(new AuthenticationResponse(null, "Username does not exist."));
+            return ResponseEntity.ok(new AuthenticationResponse(null, "Username does not exist.",
+                    null));
         }
 
         final UserDetails userDetails = customUserDetailsService.loadUserByUsername(authenticationRequest.getUsername());
 
         final String jwt = jwtTokenUtil.generateToken(userDetails);
 
-        return ResponseEntity.ok(new AuthenticationResponse(jwt, null));
+        UserInfo userInfo = authDataService.findByUsername(authenticationRequest.getUsername());
+
+        return ResponseEntity.ok(new AuthenticationResponse(jwt, null, userInfo.getFirstName()));
     }
 }
diff --git a/server/authentication-service/src/main/java/com/ujjaval/ecommerce/authenticationservice/model/AuthenticationResponse.java b/server/authentication-service/src/main/java/com/ujjaval/ecommerce/authenticationservice/model/AuthenticationResponse.java
@@ -11,4 +11,5 @@ public class AuthenticationResponse {
 
     private String jwt;
     private String error;
+    private String firstName;
 }

Original file line number	Diff line number	Diff line change
`@@ -11,4 +11,5 @@ public class AuthenticationResponse {`
`11`	`11`
`12`	`12`	`private String jwt;`
`13`	`13`	`private String error;`
	`14`	`+ private String firstName;`
`14`	`15`	`}`