Portal-Added user account quick links - drop down menu (#206)

* Added basic router and navigation layout

* finished navigation logic

* made the left nav bar a component and improved the styles

* Added a demo collapse section

* finished the basic faq collapse list

* finished the basic faq collapse list

* finished style for FAQs part

* removed unused imports

* minor update to fix a React warning

* Added fetch for user name and avatar

* made some improvements based on feedback

* Added basic components and styles

* commented out home

* Finished toolbar and dropdown menu

* minor update on calling logout function

* updated the avatar based on feedback

* updated no user name

* Updated the dropdown menu for user info

src/main/www/src/Utils/formFunctionHelpers.js

@@ -7,6 +7,7 @@ import {
   getCurrentMode,
   MODE_REACT_ONLY,
   MODE_REACT_API,
+  api_prefix,
   HAS_TOKEN_EXPIRED,
 } from '../Constants/Constants';
 
@@ -691,3 +692,14 @@ export function requestErrorHandler(statusCode) {
 export function scrollToTop() {
   window.scrollTo({ top: 0, behavior: 'smooth' });
 }
+
+export const logout = () => {
+  fetch(`${api_prefix()}/logout`)
+    .then(() => {
+      window.location.assign('/');
+    })
+    .catch((err) => {
+      console.log(err);
+      window.location.assign('/');
+    });
+};
\ No newline at end of file

src/main/www/src/components/Portal/NavBar/AppTopBar.tsx

-import { AppBar, Avatar, Toolbar, Typography } from '@material-ui/core';
+import {
+  AppBar,
+  Avatar,
+  Button,
+  Link,
+  ListItemIcon,
+  ListItemText,
+  Menu,
+  MenuItem,
+  Toolbar,
+  Typography,
+} from '@material-ui/core';
+import PersonIcon from '@material-ui/icons/Person';
+import EditIcon from '@material-ui/icons/Edit';
+import SettingsIcon from '@material-ui/icons/Settings';
+import ExitToAppIcon from '@material-ui/icons/ExitToApp';
+import AccountCircleIcon from '@material-ui/icons/AccountCircle';
 import { makeStyles, createStyles } from '@material-ui/core/styles';
 import { ExpandMore as ExpandMoreIcon } from '@material-ui/icons';
 import { useState } from 'react';
 import { useEffect } from 'react';
-import demoAvatar from '../../../assets/demo-avatar.jpg';
-import { api_prefix, drawerWidth, END_POINT, FETCH_HEADER } from '../../../Constants/Constants';
+import { api_prefix, darkOrange, drawerWidth, END_POINT, FETCH_HEADER } from '../../../Constants/Constants';
+import { logout } from '../../../Utils/formFunctionHelpers';
 
 const useStyles = makeStyles(() =>
   createStyles({
@@ -30,28 +46,116 @@ const useStyles = makeStyles(() =>
       marginBottom: 0,
       marginRight: 7,
     },
+    dropDownBtn: {
+      minWidth: 38,
+      height: 30,
+      padding: 0,
+    },
     dropDownIcon: {
       color: '#A4AFB7',
     },
+    dropDownItemIcon: {
+      minWidth: 30,
+    },
     avatarCtn: {
       width: 38,
       height: 38,
       marginLeft: 11,
+      backgroundColor: darkOrange,
     },
-    avatar: {
-      width: 38,
+    anchorTag: {
+      textDecoration: 'none',
+      color: 'inherit',
+      '&:hover ': {
+        textDecoration: 'none',
+        color: 'inherit',
+      },
     },
   })
 );
 
 interface UserInfo {
+  first_name: string;
+  last_name: string;
   full_name: string;
   picture: string;
 }
 
 export default function AppTopBar() {
   const classes = useStyles();
-  const [userInfo, setUserInfo] = useState<UserInfo>();
+  const [userInfo, setUserInfo] = useState<UserInfo>({
+    first_name: '',
+    last_name: '',
+    full_name: '',
+    picture: '',
+  });
+  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+
+  const handleDropdownBtnClicked = (event: React.MouseEvent<HTMLButtonElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleOptionClicked = (destination: string) => {
+    window.location.assign(destination);
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  const getInitials = (firstname: string, lastname: string) => {
+    const firstnameInitial = firstname.substring(0, 1).toUpperCase();
+    const lastnameInitial = lastname.substring(0, 1).toUpperCase();
+
+    return firstnameInitial + lastnameInitial;
+  };
+
+  const renderDropdownMenu = () => (
+    <Menu id="simple-menu" anchorEl={anchorEl} keepMounted open={Boolean(anchorEl)} onClose={handleClose}>
+      {userInfo?.full_name && (
+        <MenuItem onClick={() => handleOptionClicked('https://www.eclipse.org/user')}>
+          <ListItemIcon className={classes.dropDownItemIcon}>
+            <PersonIcon fontSize="small" />
+          </ListItemIcon>
+          <ListItemText primary="View Profile" />
+        </MenuItem>
+      )}
+
+      {userInfo?.full_name && (
+        <MenuItem onClick={() => handleOptionClicked('https://accounts.eclipse.org/user/edit')}>
+          <ListItemIcon className={classes.dropDownItemIcon}>
+            <EditIcon fontSize="small" />
+          </ListItemIcon>
+          <ListItemText primary="Edit Profile" />
+        </MenuItem>
+      )}
+
+      <MenuItem className="toolbar-manage-cookies" onClick={handleClose}>
+        <ListItemIcon className={classes.dropDownItemIcon}>
+          <SettingsIcon fontSize="small" />
+        </ListItemIcon>
+        <ListItemText primary="Manage Cookies" />
+      </MenuItem>
+
+      {userInfo?.full_name ? (
+        <MenuItem onClick={logout}>
+          <ListItemIcon className={classes.dropDownItemIcon}>
+            <ExitToAppIcon fontSize="small" />
+          </ListItemIcon>
+          <ListItemText primary="Log Out" />
+        </MenuItem>
+      ) : (
+        <Link href="/api/login" className={classes.anchorTag}>
+          <MenuItem>
+            <ListItemIcon className={classes.dropDownItemIcon}>
+              <AccountCircleIcon fontSize="small" />
+            </ListItemIcon>
+            <ListItemText primary="Log In" />
+          </MenuItem>
+        </Link>
+      )}
+    </Menu>
+  );
 
   useEffect(() => {
     const getUserFullInfo = (username: String) => {
@@ -59,6 +163,8 @@ export default function AppTopBar() {
         .then((res) => res.json())
         .then((data) => {
           setUserInfo({
+            first_name: data.first_name,
+            last_name: data.last_name,
             full_name: data.full_name,
             picture: data.picture,
           });
@@ -88,14 +194,19 @@ export default function AppTopBar() {
       <Toolbar className={classes.toolbarCtn}>
         <div className={classes.verticalDivider}></div>
         <Typography paragraph className={classes.username}>
-          {userInfo?.full_name ? userInfo.full_name : 'John Doe'}
+          {userInfo?.full_name || 'Anonymous'}
         </Typography>
-        <ExpandMoreIcon className={classes.dropDownIcon} />
-        <Avatar
-          className={classes.avatarCtn}
-          alt="user avatar"
-          src={userInfo?.picture ? userInfo.picture : demoAvatar}
-        />
+
+        <Button className={classes.dropDownBtn} onClick={handleDropdownBtnClicked}>
+          <ExpandMoreIcon className={classes.dropDownIcon} />
+        </Button>
+
+        {renderDropdownMenu()}
+        {userInfo?.picture ? (
+          <Avatar className={classes.avatarCtn} alt="user avatar" src={userInfo.picture} />
+        ) : (
+          <Avatar className={classes.avatarCtn}>{getInitials(userInfo.first_name, userInfo.last_name) || 'A'}</Avatar>
+        )}
       </Toolbar>
     </AppBar>
   );

src/main/www/src/components/UIComponents/Templates/AppHeader.js

 import { useContext } from 'react';
-import { api_prefix } from '../../../Constants/Constants';
 import MembershipContext from '../../../Context/MembershipContext';
+import { logout } from '../../../Utils/formFunctionHelpers';
 
 /* eslint-disable jsx-a11y/anchor-is-valid */
 
 export default function AppHeader() {
   const { currentUser, setNeedLoadingSignIn } = useContext(MembershipContext);
-  const logout = () => {
-    fetch(`${api_prefix()}/logout`)
-      .then(() => {
-        window.location.assign('/');
-      })
-      .catch((err) => {
-        console.log(err);
-        window.location.assign('/');
-      });
-  };
 
   return (
     <header className="header-wrapper" id="header-wrapper">