user menu and user settings can now be opened
This commit is contained in:
Carter
parent
c94b8093ff
commit
5c79f9a633
4 changed files with 311 additions and 92 deletions
|
|
@ -1,13 +1,16 @@
|
|||
import { Avatar, Box, Button, IconButton, PaletteColor, Theme, Typography, useTheme } from "@mui/material";
|
||||
import { Avatar, Box, Button, IconButton, ListItemIcon, ListItemText, Menu, MenuItem, PaletteColor, Theme, Typography, useTheme } from "@mui/material";
|
||||
import { useGlobalState } from "../providers/StateContainer";
|
||||
import { getSecondaryColour, getSignatureAccentColour } from "../services/whiteLabel";
|
||||
import { makeStyles } from "@mui/styles";
|
||||
import { LockOpen, Person, Lock, } from "@mui/icons-material";
|
||||
import { useEffect, useState } from "react";
|
||||
import { LockOpen, Person, Lock, Settings, SupervisedUserCircle as TeamIcon } from "@mui/icons-material";
|
||||
import { useState } from "react";
|
||||
import UserTeamName from "./UserTeamName";
|
||||
import React from "react";
|
||||
import ThemeIcon from "../common/ThemeIcon";
|
||||
import { useAuth0 } from "@auth0/auth0-react";
|
||||
import UserSettings from "./UserSettings";
|
||||
import UserAvatar from "./UserAvatar";
|
||||
import { purple } from "@mui/material/colors";
|
||||
|
||||
const useStyles = makeStyles((theme: Theme) => ({
|
||||
userAvatar: {
|
||||
|
|
@ -18,6 +21,28 @@ const useStyles = makeStyles((theme: Theme) => ({
|
|||
height: "32px"
|
||||
}
|
||||
},
|
||||
userAvatar2: {
|
||||
color: "#fff",
|
||||
backgroundColor: theme.palette.secondary["700" as keyof PaletteColor],
|
||||
[theme.breakpoints.down("xs")]: {
|
||||
width: "30px",
|
||||
height: "30px"
|
||||
},
|
||||
position: "relative",
|
||||
top: -6,
|
||||
left: 0
|
||||
},
|
||||
teamAvatar: {
|
||||
color: "#fff",
|
||||
backgroundColor: theme.palette.secondary["700" as keyof PaletteColor],
|
||||
[theme.breakpoints.down("xs")]: {
|
||||
width: "30px",
|
||||
height: "30px"
|
||||
},
|
||||
position: "absolute",
|
||||
top: -34,
|
||||
left: 8
|
||||
},
|
||||
profileButton: {
|
||||
maxWidth: "50vw"
|
||||
},
|
||||
|
|
@ -48,101 +73,138 @@ interface Props {
|
|||
|
||||
export default function UserMenu(props: Props) {
|
||||
|
||||
const { toggleTheme } = props;
|
||||
const [{ user, team }] = useGlobalState();
|
||||
const { loginWithRedirect } = useAuth0();
|
||||
const classes = useStyles();
|
||||
const theme = useTheme();
|
||||
const { toggleTheme } = props;
|
||||
const [{ user, team, as }] = useGlobalState();
|
||||
const { loginWithRedirect } = useAuth0();
|
||||
const classes = useStyles();
|
||||
const theme = useTheme();
|
||||
|
||||
const name = user.name();
|
||||
const picture = user.settings.avatar;
|
||||
const [lockIsHovered, setLockIsHovered] = useState<boolean>(false);
|
||||
// const hasAdmin = user.hasFeature ? user.hasFeature("admin") : false;
|
||||
// const allowedToCopyToken = user.allowedTo("copy-token");
|
||||
// const hasTeams = user.hasFeature ? user.hasFeature("teams") : false;
|
||||
const name = user.name();
|
||||
const picture = user.settings.avatar;
|
||||
const [lockIsHovered, setLockIsHovered] = useState<boolean>(false);
|
||||
const [userMenuIsOpen, setUserMenuIsOpen] = useState(false);
|
||||
const [anchorEl, setAnchorEl] = useState<any>(null);
|
||||
const [userSettingsIsOpen, setUserSettingsIsOpen] = useState<boolean>(false);
|
||||
// const hasAdmin = user.hasFeature ? user.hasFeature("admin") : false;
|
||||
// const allowedToCopyToken = user.allowedTo("copy-token");
|
||||
const hasTeams = user.hasFeature ? user.hasFeature("teams") : false;
|
||||
|
||||
const lockHover = () => {
|
||||
setLockIsHovered(true);
|
||||
};
|
||||
const lockHover = () => {
|
||||
setLockIsHovered(true);
|
||||
};
|
||||
|
||||
const lockNoHover = () => {
|
||||
setLockIsHovered(false);
|
||||
};
|
||||
|
||||
const handleLogin = () => {
|
||||
loginWithRedirect()
|
||||
}
|
||||
|
||||
const openUserMenu = (event: any) => {
|
||||
setAnchorEl(event.currentTarget);
|
||||
setUserMenuIsOpen(true);
|
||||
};
|
||||
|
||||
const closeUserMenu = () => {
|
||||
setUserMenuIsOpen(false);
|
||||
setAnchorEl(null);
|
||||
};
|
||||
|
||||
const openUserSettingsDialog = () => {
|
||||
setUserMenuIsOpen(false);
|
||||
setAnchorEl(null);
|
||||
setUserSettingsIsOpen(true)
|
||||
}
|
||||
|
||||
const lockNoHover = () => {
|
||||
setLockIsHovered(false);
|
||||
};
|
||||
|
||||
const handleLogin = () => {
|
||||
loginWithRedirect()
|
||||
}
|
||||
|
||||
const unauthenticatedUserMenu = () => {
|
||||
return (
|
||||
<React.Fragment>
|
||||
<Button
|
||||
variant="outlined"
|
||||
aria-label="Sign In"
|
||||
onClick={handleLogin}
|
||||
onMouseEnter={lockHover}
|
||||
onMouseLeave={lockNoHover}
|
||||
size="small"
|
||||
className={classes.signIn}>
|
||||
Sign In
|
||||
{lockIsHovered ? (
|
||||
<LockOpen className={classes.rightIcon} fontSize="small" />
|
||||
) : (
|
||||
<Lock className={classes.rightIcon} fontSize="small" />
|
||||
)}
|
||||
</Button>
|
||||
|
||||
<IconButton onClick={toggleTheme} className={classes.rightIcon} aria-label="Toggle Theme">
|
||||
<ThemeIcon />
|
||||
</IconButton>
|
||||
</React.Fragment>
|
||||
);
|
||||
};
|
||||
|
||||
if (user.id().length < 1) return unauthenticatedUserMenu()
|
||||
const closeUserSettingsDialog = () => {
|
||||
setUserSettingsIsOpen(false)
|
||||
}
|
||||
|
||||
const unauthenticatedUserMenu = () => {
|
||||
return (
|
||||
<>
|
||||
<React.Fragment>
|
||||
<Button
|
||||
id="tour-user-menu"
|
||||
// aria-owns={userMenuIsOpen ? "userMenu" : undefined}
|
||||
aria-haspopup="true"
|
||||
// onClick={openUserMenu}
|
||||
className={classes.profileButton}>
|
||||
<Box style={{ display: "flex", flexDirection: "column" }}>
|
||||
<UserTeamName user={user} team={team} />
|
||||
</Box>
|
||||
<Box style={{ marginLeft: theme.spacing(1) }}>
|
||||
{/* {picture && hasTeams ? (
|
||||
<div>
|
||||
<UserAvatar
|
||||
user={user}
|
||||
className={classes.userAvatar2}
|
||||
style={{ zIndex: as === "" ? 1000 : 0 }}
|
||||
/>
|
||||
<div style={{ position: "relative" }}>
|
||||
<Avatar
|
||||
src={team.settings.avatar}
|
||||
className={classes.teamAvatar}
|
||||
style={{ background: purple[500] }}>
|
||||
<TeamIcon style={{ fontSize: 38 }} />
|
||||
</Avatar>
|
||||
</div>
|
||||
variant="outlined"
|
||||
aria-label="Sign In"
|
||||
onClick={handleLogin}
|
||||
onMouseEnter={lockHover}
|
||||
onMouseLeave={lockNoHover}
|
||||
size="small"
|
||||
className={classes.signIn}>
|
||||
Sign In
|
||||
{lockIsHovered ? (
|
||||
<LockOpen className={classes.rightIcon} fontSize="small" />
|
||||
) : (
|
||||
<Lock className={classes.rightIcon} fontSize="small" />
|
||||
)}
|
||||
</Button>
|
||||
|
||||
<IconButton onClick={toggleTheme} className={classes.rightIcon} aria-label="Toggle Theme">
|
||||
<ThemeIcon />
|
||||
</IconButton>
|
||||
</React.Fragment>
|
||||
);
|
||||
};
|
||||
|
||||
if (user.id().length < 1) return unauthenticatedUserMenu()
|
||||
|
||||
return (
|
||||
<>
|
||||
<Button
|
||||
id="tour-user-menu"
|
||||
aria-owns={userMenuIsOpen ? "userMenu" : undefined}
|
||||
aria-haspopup="true"
|
||||
onClick={openUserMenu}
|
||||
className={classes.profileButton}>
|
||||
<Box style={{ display: "flex", flexDirection: "column" }}>
|
||||
<UserTeamName user={user} team={team} />
|
||||
</Box>
|
||||
<Box style={{ marginLeft: theme.spacing(1) }}>
|
||||
{picture && hasTeams && team.id().length > 0 ? (
|
||||
<div>
|
||||
<UserAvatar
|
||||
user={user}
|
||||
className={classes.userAvatar2}
|
||||
style={{ zIndex: as === "" ? 1000 : 0 }}
|
||||
/>
|
||||
<div style={{ position: "relative" }}>
|
||||
<Avatar
|
||||
src={team.settings.avatar}
|
||||
className={classes.teamAvatar}
|
||||
style={{ background: purple[500] }}>
|
||||
<TeamIcon style={{ fontSize: 38 }} />
|
||||
</Avatar>
|
||||
</div>
|
||||
) : picture ? (
|
||||
<Avatar alt={name} src={picture} className={classes.userAvatar}>
|
||||
{!picture && name}
|
||||
</Avatar>
|
||||
) : ( */}
|
||||
<Avatar alt={name} src={picture} className={classes.userAvatar}>
|
||||
<Person />
|
||||
</Avatar>
|
||||
{/* )} */}
|
||||
</Box>
|
||||
</div>
|
||||
) : picture ? (
|
||||
<Avatar alt={name} src={picture} className={classes.userAvatar}>
|
||||
{!picture && name}
|
||||
</Avatar>
|
||||
) : (
|
||||
<Avatar alt={name} src={picture} className={classes.userAvatar}>
|
||||
<Person />
|
||||
</Avatar>
|
||||
)}
|
||||
</Box>
|
||||
</Button>
|
||||
<IconButton onClick={toggleTheme} className={classes.rightIcon} aria-label="Toggle Theme">
|
||||
<ThemeIcon />
|
||||
</IconButton>
|
||||
<Menu
|
||||
id="userMenu"
|
||||
anchorEl={anchorEl}
|
||||
open={userMenuIsOpen}
|
||||
onClose={closeUserMenu}
|
||||
disableAutoFocusItem>
|
||||
<MenuItem onClick={openUserSettingsDialog} aria-label="Open User Settings" dense>
|
||||
<ListItemIcon>
|
||||
<Settings />
|
||||
</ListItemIcon>
|
||||
<ListItemText primary="User Settings" />
|
||||
</MenuItem>
|
||||
</Menu>
|
||||
<UserSettings isOpen={userSettingsIsOpen} closeDialogCallback={closeUserSettingsDialog} />
|
||||
</>
|
||||
)
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue