Rachel/profile drop (#159)

* display user icon on login

* display menu

* add menu state

* fixed profile export

* Update www/src/components/auth/UserProfile.tsx

Co-authored-by: Cyrus Diego <cyrus.d04@gmail.com>

* style

* display user's ccid

Co-authored-by: Cyrus Diego <cyrus.d04@gmail.com>

www/src/components/auth/AuthButton.tsx

@@ -2,14 +2,7 @@ import { useAuth0 } from '@auth0/auth0-react';
 import { Button } from '@material-ui/core';
 import React, { FC } from 'react';
 
-const LogoutButton: FC = () => {
-    const { logout } = useAuth0();
-    return (
-        <Button variant='outlined' color='secondary' onClick={() => logout()}>
-            Logout
-        </Button>
-    );
-};
+import UserProfile from './UserProfile';
 
 const LoginButton: FC = () => {
     const { loginWithRedirect } = useAuth0();
@@ -24,7 +17,7 @@ const AuthButton: FC = () => {
     const { isAuthenticated } = useAuth0();
 
     if (isAuthenticated) {
-        return <LogoutButton />;
+        return <UserProfile />;
     }
 
     return <LoginButton />;

www/src/components/auth/UserProfile.tsx

@@ -0,0 +1,71 @@
+import { useAuth0 } from '@auth0/auth0-react';
+import { IconButton, Menu, MenuItem, Typography } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
+import { AccountCircle } from '@material-ui/icons';
+import React, { FC, useRef, useState } from 'react';
+
+const UserProfile: FC = () => {
+    const classes = useStyles();
+    const userProfileIcon = useRef(null);
+    const [isMenuOpen, setIsMenuOpen] = useState(false);
+    const { logout } = useAuth0();
+    const { user } = useAuth0();
+    const ccid = user?.email?.split('@')[0] ?? '';
+
+    return (
+        <>
+            <IconButton
+                aria-label='account of current user'
+                aria-controls='menu-appbar'
+                aria-haspopup='true'
+                color='inherit'
+                ref={userProfileIcon}
+                onClick={() => {
+                    setIsMenuOpen(true);
+                }}
+            >
+                <AccountCircle color='secondary' />
+            </IconButton>
+            <Menu
+                id='menu-appbar'
+                anchorEl={userProfileIcon.current}
+                anchorOrigin={{
+                    vertical: 'top',
+                    horizontal: 'right',
+                }}
+                keepMounted
+                transformOrigin={{
+                    vertical: 'top',
+                    horizontal: 'right',
+                }}
+                open={isMenuOpen}
+                onClose={() => setIsMenuOpen(false)}
+                className={classes.menu}
+            >
+                <Typography className={classes.menu_text}> Signed in as: {ccid} </Typography>
+                <MenuItem onClick={() => logout()} className={classes.menu_text} style={{ marginBottom: '100px' }}>
+                    Settings
+                </MenuItem>
+                <MenuItem onClick={() => logout()} className={classes.menu_text}>
+                    Log out
+                </MenuItem>
+            </Menu>
+        </>
+    );
+};
+
+const useStyles = makeStyles((theme) => ({
+    menu: {
+        '& .MuiPaper-root': {
+            backgroundColor: theme.palette.primary.dark,
+        },
+    },
+    menu_text: {
+        color: theme.palette.text.secondary,
+        fontSize: 20,
+        fontWeight: 500,
+        padding: '15px',
+    },
+}));
+
+export default UserProfile;