From 2ab883e5798c2fad08faf5704bd3630cd4a0ab57 Mon Sep 17 00:00:00 2001
From: rachel-ellis <rjellis@ualberta.ca>
Date: Tue, 13 Jul 2021 19:15:20 -0600
Subject: [PATCH 1/7] display user icon on login

---
 www/src/components/Header.tsx           |  4 ++++
 www/src/components/auth/AuthButton.tsx  |  4 +++-
 www/src/components/auth/UserProfile.tsx | 11 +++++++++++
 3 files changed, 18 insertions(+), 1 deletion(-)
 create mode 100644 www/src/components/auth/UserProfile.tsx

diff --git a/www/src/components/Header.tsx b/www/src/components/Header.tsx
index 43911d7c..673c424b 100644
--- a/www/src/components/Header.tsx
+++ b/www/src/components/Header.tsx
@@ -1,5 +1,9 @@
 import { AppBar, Hidden, Link, Toolbar } from '@material-ui/core';
+import IconButton from '@material-ui/core/IconButton';
+import Menu from '@material-ui/core/Menu';
 import { makeStyles } from '@material-ui/core/styles';
+import AccountCircle from '@material-ui/icons/AccountCircle';
+import MenuItem from '@material-ui/icons/Menu';
 import React, { FC } from 'react';
 import { Link as RouterLink } from 'react-router-dom';
 
diff --git a/www/src/components/auth/AuthButton.tsx b/www/src/components/auth/AuthButton.tsx
index 89973744..4d5c7d2a 100644
--- a/www/src/components/auth/AuthButton.tsx
+++ b/www/src/components/auth/AuthButton.tsx
@@ -2,6 +2,8 @@ import { useAuth0 } from '@auth0/auth0-react';
 import { Button } from '@material-ui/core';
 import React, { FC } from 'react';
 
+import { UserProfile } from './UserProfile';
+
 const LogoutButton: FC = () => {
     const { logout } = useAuth0();
     return (
@@ -24,7 +26,7 @@ const AuthButton: FC = () => {
     const { isAuthenticated } = useAuth0();
 
     if (isAuthenticated) {
-        return <LogoutButton />;
+        return <UserProfile />;
     }
 
     return <LoginButton />;
diff --git a/www/src/components/auth/UserProfile.tsx b/www/src/components/auth/UserProfile.tsx
new file mode 100644
index 00000000..56462875
--- /dev/null
+++ b/www/src/components/auth/UserProfile.tsx
@@ -0,0 +1,11 @@
+import { IconButton } from '@material-ui/core';
+import { AccountCircle } from '@material-ui/icons';
+import React, { FC } from 'react';
+
+export const UserProfile: FC = () => {
+    return (
+        <IconButton aria-label='account of current user' aria-controls='menu-appbar' aria-haspopup='true' onClick={handleMenu} color='inherit'>
+            <AccountCircle />
+        </IconButton>
+    );
+};

From 87bbffe83c29e9c8b2889824e0bb4400feff1ddb Mon Sep 17 00:00:00 2001
From: rachel-ellis <rjellis@ualberta.ca>
Date: Tue, 13 Jul 2021 19:28:16 -0600
Subject: [PATCH 2/7] display menu

---
 www/src/components/auth/UserProfile.tsx | 29 ++++++++++++++++++++-----
 1 file changed, 24 insertions(+), 5 deletions(-)

diff --git a/www/src/components/auth/UserProfile.tsx b/www/src/components/auth/UserProfile.tsx
index 56462875..7e19af5e 100644
--- a/www/src/components/auth/UserProfile.tsx
+++ b/www/src/components/auth/UserProfile.tsx
@@ -1,11 +1,30 @@
-import { IconButton } from '@material-ui/core';
+import { IconButton, Menu, MenuItem } from '@material-ui/core';
 import { AccountCircle } from '@material-ui/icons';
-import React, { FC } from 'react';
+import React, { FC, useRef } from 'react';
 
 export const UserProfile: FC = () => {
+    const userProfileIcon = useRef(null);
     return (
-        <IconButton aria-label='account of current user' aria-controls='menu-appbar' aria-haspopup='true' onClick={handleMenu} color='inherit'>
-            <AccountCircle />
-        </IconButton>
+        <>
+            <IconButton aria-label='account of current user' aria-controls='menu-appbar' aria-haspopup='true' color='inherit' ref={userProfileIcon}>
+                <AccountCircle />
+            </IconButton>
+            <Menu
+                id='menu-appbar'
+                anchorEl={userProfileIcon.current}
+                anchorOrigin={{
+                    vertical: 'top',
+                    horizontal: 'right',
+                }}
+                keepMounted
+                transformOrigin={{
+                    vertical: 'top',
+                    horizontal: 'right',
+                }}
+                open={true}
+            >
+                <MenuItem>Logout</MenuItem>
+            </Menu>
+        </>
     );
 };

From 7fd1647a4f4a9ea9d99b9d4b954997db6b83aaa2 Mon Sep 17 00:00:00 2001
From: rachel-ellis <rjellis@ualberta.ca>
Date: Tue, 13 Jul 2021 19:34:54 -0600
Subject: [PATCH 3/7] add menu state

---
 www/src/components/auth/UserProfile.tsx | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/www/src/components/auth/UserProfile.tsx b/www/src/components/auth/UserProfile.tsx
index 7e19af5e..74d18642 100644
--- a/www/src/components/auth/UserProfile.tsx
+++ b/www/src/components/auth/UserProfile.tsx
@@ -1,12 +1,22 @@
 import { IconButton, Menu, MenuItem } from '@material-ui/core';
 import { AccountCircle } from '@material-ui/icons';
-import React, { FC, useRef } from 'react';
+import React, { FC, useRef, useState } from 'react';
 
 export const UserProfile: FC = () => {
     const userProfileIcon = useRef(null);
+    const [isMenuOpen, setIsMenuOpen] = useState(false);
     return (
         <>
-            <IconButton aria-label='account of current user' aria-controls='menu-appbar' aria-haspopup='true' color='inherit' ref={userProfileIcon}>
+            <IconButton
+                aria-label='account of current user'
+                aria-controls='menu-appbar'
+                aria-haspopup='true'
+                color='inherit'
+                ref={userProfileIcon}
+                onClick={() => {
+                    setIsMenuOpen(true);
+                }}
+            >
                 <AccountCircle />
             </IconButton>
             <Menu
@@ -21,7 +31,8 @@ export const UserProfile: FC = () => {
                     vertical: 'top',
                     horizontal: 'right',
                 }}
-                open={true}
+                open={isMenuOpen}
+                onClose={() => setIsMenuOpen(false)}
             >
                 <MenuItem>Logout</MenuItem>
             </Menu>

From a7433be3922a73d92e3aa40649f6d2a15d82823a Mon Sep 17 00:00:00 2001
From: rachel-ellis <rjellis@ualberta.ca>
Date: Tue, 13 Jul 2021 19:43:02 -0600
Subject: [PATCH 4/7] fixed profile export

---
 www/src/components/Header.tsx           |  4 ----
 www/src/components/auth/AuthButton.tsx  | 11 +----------
 www/src/components/auth/UserProfile.tsx |  8 ++++++--
 3 files changed, 7 insertions(+), 16 deletions(-)

diff --git a/www/src/components/Header.tsx b/www/src/components/Header.tsx
index 673c424b..43911d7c 100644
--- a/www/src/components/Header.tsx
+++ b/www/src/components/Header.tsx
@@ -1,9 +1,5 @@
 import { AppBar, Hidden, Link, Toolbar } from '@material-ui/core';
-import IconButton from '@material-ui/core/IconButton';
-import Menu from '@material-ui/core/Menu';
 import { makeStyles } from '@material-ui/core/styles';
-import AccountCircle from '@material-ui/icons/AccountCircle';
-import MenuItem from '@material-ui/icons/Menu';
 import React, { FC } from 'react';
 import { Link as RouterLink } from 'react-router-dom';
 
diff --git a/www/src/components/auth/AuthButton.tsx b/www/src/components/auth/AuthButton.tsx
index 4d5c7d2a..f8097f6d 100644
--- a/www/src/components/auth/AuthButton.tsx
+++ b/www/src/components/auth/AuthButton.tsx
@@ -2,16 +2,7 @@ import { useAuth0 } from '@auth0/auth0-react';
 import { Button } from '@material-ui/core';
 import React, { FC } from 'react';
 
-import { UserProfile } from './UserProfile';
-
-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();
diff --git a/www/src/components/auth/UserProfile.tsx b/www/src/components/auth/UserProfile.tsx
index 74d18642..c6689413 100644
--- a/www/src/components/auth/UserProfile.tsx
+++ b/www/src/components/auth/UserProfile.tsx
@@ -1,10 +1,12 @@
+import { useAuth0 } from '@auth0/auth0-react';
 import { IconButton, Menu, MenuItem } from '@material-ui/core';
 import { AccountCircle } from '@material-ui/icons';
 import React, { FC, useRef, useState } from 'react';
 
-export const UserProfile: FC = () => {
+const UserProfile: FC = () => {
     const userProfileIcon = useRef(null);
     const [isMenuOpen, setIsMenuOpen] = useState(false);
+    const { logout } = useAuth0();
     return (
         <>
             <IconButton
@@ -34,8 +36,10 @@ export const UserProfile: FC = () => {
                 open={isMenuOpen}
                 onClose={() => setIsMenuOpen(false)}
             >
-                <MenuItem>Logout</MenuItem>
+                <MenuItem onClick={() => logout()}>Logout</MenuItem>
             </Menu>
         </>
     );
 };
+
+export default UserProfile;

From 95770a7b3d8f1fc2f14e19f2268703efb1c99c51 Mon Sep 17 00:00:00 2001
From: rachel-ellis <70451233+rachel-ellis@users.noreply.github.com>
Date: Thu, 15 Jul 2021 20:55:18 -0600
Subject: [PATCH 5/7] Update www/src/components/auth/UserProfile.tsx

Co-authored-by: Cyrus Diego <cyrus.d04@gmail.com>
---
 www/src/components/auth/UserProfile.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/www/src/components/auth/UserProfile.tsx b/www/src/components/auth/UserProfile.tsx
index c6689413..5a62f1bc 100644
--- a/www/src/components/auth/UserProfile.tsx
+++ b/www/src/components/auth/UserProfile.tsx
@@ -19,7 +19,7 @@ const UserProfile: FC = () => {
                     setIsMenuOpen(true);
                 }}
             >
-                <AccountCircle />
+                <AccountCircle color='secondary' />
             </IconButton>
             <Menu
                 id='menu-appbar'

From 33ce70661383fc229f7aa0b1301e57ef54fc54a3 Mon Sep 17 00:00:00 2001
From: rachel-ellis <rjellis@ualberta.ca>
Date: Sat, 24 Jul 2021 19:30:02 -0600
Subject: [PATCH 6/7] style

---
 www/src/components/auth/UserProfile.tsx | 27 +++++++++++++++++++++++--
 1 file changed, 25 insertions(+), 2 deletions(-)

diff --git a/www/src/components/auth/UserProfile.tsx b/www/src/components/auth/UserProfile.tsx
index c6689413..601ef30d 100644
--- a/www/src/components/auth/UserProfile.tsx
+++ b/www/src/components/auth/UserProfile.tsx
@@ -1,9 +1,11 @@
 import { useAuth0 } from '@auth0/auth0-react';
-import { IconButton, Menu, MenuItem } from '@material-ui/core';
+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();
@@ -35,11 +37,32 @@ const UserProfile: FC = () => {
                 }}
                 open={isMenuOpen}
                 onClose={() => setIsMenuOpen(false)}
+                className={classes.menu}
             >
-                <MenuItem onClick={() => logout()}>Logout</MenuItem>
+                <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,
+            color: theme.palette.text.secondary,
+        },
+    },
+    menu_text: {
+        fontSize: 20,
+        fontWeight: 500,
+        padding: '15px',
+    },
+}));
+
 export default UserProfile;

From 0ca4dcce0a0c213ef05b813fe5073d78d5c446fd Mon Sep 17 00:00:00 2001
From: rachel-ellis <rjellis@ualberta.ca>
Date: Mon, 26 Jul 2021 18:27:31 -0600
Subject: [PATCH 7/7] display user's ccid

---
 www/src/components/auth/UserProfile.tsx | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/www/src/components/auth/UserProfile.tsx b/www/src/components/auth/UserProfile.tsx
index 601ef30d..bba5478e 100644
--- a/www/src/components/auth/UserProfile.tsx
+++ b/www/src/components/auth/UserProfile.tsx
@@ -9,6 +9,9 @@ const UserProfile: FC = () => {
     const userProfileIcon = useRef(null);
     const [isMenuOpen, setIsMenuOpen] = useState(false);
     const { logout } = useAuth0();
+    const { user } = useAuth0();
+    const ccid = user?.email?.split('@')[0] ?? '';
+
     return (
         <>
             <IconButton
@@ -39,7 +42,7 @@ const UserProfile: FC = () => {
                 onClose={() => setIsMenuOpen(false)}
                 className={classes.menu}
             >
-                <Typography className={classes.menu_text}> Signed in as: [ccid] </Typography>
+                <Typography className={classes.menu_text}> Signed in as: {ccid} </Typography>
                 <MenuItem onClick={() => logout()} className={classes.menu_text} style={{ marginBottom: '100px' }}>
                     Settings
                 </MenuItem>
@@ -55,10 +58,10 @@ const useStyles = makeStyles((theme) => ({
     menu: {
         '& .MuiPaper-root': {
             backgroundColor: theme.palette.primary.dark,
-            color: theme.palette.text.secondary,
         },
     },
     menu_text: {
+        color: theme.palette.text.secondary,
         fontSize: 20,
         fontWeight: 500,
         padding: '15px',