Skip to content

Commit

Permalink
Merge pull request #153 from CanDIG/feature/whoami
Browse files Browse the repository at this point in the history 
DIG-898: Show username of the authenticated user in data portal
  • Loading branch information
@OrdiNeu
OrdiNeu authored Jun 19, 2024
2 parents 9a5fe07 + 28f9926 commit a97c32d
Showing 1 changed file with 79 additions and 41 deletions.
120 changes: 79 additions & 41 deletions src/layout/MainLayout/Header/ProfileSection/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,9 +19,6 @@ import {
} from '@mui/material';
import ListItemButton from '@mui/material/ListItemButton';

// third-party
import PerfectScrollbar from 'react-perfect-scrollbar';

// project imports
import MainCard from 'ui-component/cards/MainCard';
import Transitions from 'ui-component/extended/Transitions';
Expand Down Expand Up @@ -50,7 +47,10 @@ const classes = {
name: `${PREFIX}-name`,
ScrollHeight: `${PREFIX}-ScrollHeight`,
badgeWarning: `${PREFIX}-badgeWarning`,
usernamePadding: `${PREFIX}-usernamePadding`
loggedInAs: `${PREFIX}-loggedInAs`,
usernamePadding: `${PREFIX}-usernamePadding`,
username: `${PREFIX}-username`,
smallAvatar: `${PREFIX}-smallAvatar`
};

const ChipRoot = styled(Chip)(({ theme }) => ({
Expand Down Expand Up @@ -90,6 +90,7 @@ const PopperRoot = styled(Popper)(({ theme }) => ({
minWidth: '300px',
backgroundColor: theme.palette.background.paper,
borderRadius: '10px',
overflow: 'hidden',
[theme.breakpoints.down('md')]: {
minWidth: '100%'
}
Expand Down Expand Up @@ -138,7 +139,7 @@ const PopperRoot = styled(Popper)(({ theme }) => ({
[`& .${classes.ScrollHeight}`]: {
height: '100%',
maxHeight: 'calc(100vh - 250px)',
overflowX: 'hidden'
overflow: 'hidden'
},

[`& .${classes.badgeWarning}`]: {
Expand All @@ -148,6 +149,21 @@ const PopperRoot = styled(Popper)(({ theme }) => ({

[`& .${classes.usernamePadding}`]: {
paddingBottom: '1em'
},

[`& .${classes.loggedInAs}`]: {
fontSize: 18
},

[`& .${classes.username}`]: {
fontSize: 16
},

[`& .${classes.smallAvatar}`]: {
cursor: 'pointer',
...theme.typography.mediumAvatar,
marginLeft: 'auto',
marginRight: 0
}
}));

Expand All @@ -161,27 +177,39 @@ function ProfileSection() {

const [open, setOpen] = useState(false);

const anchorRef = React.useRef(null);
const [username, setUsername] = useState('');

const anchorEl = React.useRef(null);

const handleToggle = () => {
setOpen((prevOpen) => !prevOpen);
};
const handleClose = (event) => {
if (anchorRef.current && anchorRef.current.contains(event.target)) {
if (anchorEl?.current?.contains(event.target)) {
return;
}

setOpen(false);
};

const prevOpen = React.useRef(open);
// Grab the user key for the logged in user
useEffect(() => {
if (prevOpen.current === true && open === false) {
anchorRef.current.focus();
}

prevOpen.current = open;
}, [open]);
fetch(`/query/whoami`)
.then((response) => {
if (response.ok) {
return response.json();
}
console.log(`whoami could not determine logged in user: ${response}`);
throw new Error(`${response}`);
})
.then((response) => {
setUsername(response?.key);
})
.catch((error) => {
console.log(`Whoami error: ${error}`);
return '';
});
}, []);

const setSite = () => {
switch (SITE) {
Expand All @@ -203,24 +231,23 @@ function ProfileSection() {
<Avatar
src={setSite()}
className={classes.headerAvatar}
ref={anchorRef}
aria-controls={open ? 'menu-list-grow' : undefined}
aria-haspopup="true"
color="inherit"
/>
}
label={<IconSettings stroke={1.5} size="1.5rem" color={theme.palette.primary.main} />}
variant="outlined"
ref={anchorRef}
aria-controls={open ? 'menu-list-grow' : undefined}
aria-haspopup="true"
onClick={handleToggle}
ref={anchorEl}
color="primary"
/>
<PopperRoot
placement="bottom-end"
open={open}
anchorEl={anchorRef.current}
anchorEl={anchorEl.current}
role={undefined}
transition
className={classes.showOnTop}
Expand All @@ -241,34 +268,45 @@ function ProfileSection() {
<ClickAwayListener onClickAway={handleClose}>
<MainCard border={false} elevation={16} content={false} boxShadow shadow={theme.shadows[16]}>
<CardContent className={classes.cardContent}>
<Grid container direction="column" spacing={0}>
<Grid item className={classes.flex}>
<Typography variant="h4">Hello!</Typography>
{/* <Typography component="span" variant="h4" className={classes.name}>
First Name Last Name
</Typography> */}
<Grid container direction="row" spacing={0}>
<Grid item xs={8} className={classes.flex}>
<Grid container direction="column" spacing={0}>
<Grid item className={classes.flex}>
<Typography variant="h4" className={classes.loggedInAs}>
Logged in as:
</Typography>
</Grid>
<Grid item className={classes.usernamePadding}>
<Typography variant="body1" className={classes.username}>
{username}, {SITE}
</Typography>
</Grid>
</Grid>
</Grid>
<Grid item className={classes.usernamePadding}>
<Typography variant="subtitle2">{SITE}</Typography>
<Grid item xs={4} className={classes.flex}>
<Avatar
src={setSite()}
className={classes.smallAvatar}
aria-controls={open ? 'menu-list-grow' : undefined}
aria-haspopup="true"
color="inherit"
/>
</Grid>
</Grid>
<Divider />
<PerfectScrollbar className={classes.ScrollHeight}>
<Divider />
<List component="nav" className={classes.navContainer}>
<ListItemButton
className={classes.listItem}
sx={{ borderRadius: `${customization.borderRadius}px` }}
selected={selectedIndex === 4}
to="/auth/logout"
>
<ListItemIcon>
<IconLogout stroke={1.5} size="1.3rem" />
</ListItemIcon>
<ListItemText primary={<Typography variant="body2">Logout</Typography>} />
</ListItemButton>
</List>
</PerfectScrollbar>
<List component="nav" className={classes.navContainer}>
<ListItemButton
className={classes.listItem}
sx={{ borderRadius: `${customization.borderRadius}px` }}
selected={selectedIndex === 4}
to="/auth/logout"
>
<ListItemIcon>
<IconLogout stroke={1.5} size="1.3rem" />
</ListItemIcon>
<ListItemText primary={<Typography variant="body2">Logout</Typography>} />
</ListItemButton>
</List>
</CardContent>
</MainCard>
</ClickAwayListener>
Expand Down

0 comments on commit a97c32d

Please sign in to comment.