102 lines
3.8 KiB
JavaScript
102 lines
3.8 KiB
JavaScript
import * as React from 'react';
|
|
import Box from '@mui/material/Box';
|
|
import Divider from '@mui/material/Divider';
|
|
import ListItemIcon from '@mui/material/ListItemIcon';
|
|
import MenuItem from '@mui/material/MenuItem';
|
|
import MenuList from '@mui/material/MenuList';
|
|
import Popover from '@mui/material/Popover';
|
|
import Typography from '@mui/material/Typography';
|
|
import {SignOut as SignOutIcon} from '@phosphor-icons/react/dist/ssr/SignOut';
|
|
import {SignIn as SignInIcon} from '@phosphor-icons/react/dist/ssr/SignIn';
|
|
import {logger} from "../../lib/DefaultLogger";
|
|
import {useAuth} from "../../hooks/useAuth";
|
|
import {authClient} from "../../lib/clients/AuthClient";
|
|
import {useLocation} from "react-router-dom";
|
|
import {useUser} from "../../hooks/useUser";
|
|
import {paths} from "../../path";
|
|
|
|
export function UserPopover({anchorEl, onClose, open}) {
|
|
const {checkSession} = useAuth();
|
|
const {user, session} = useUser();
|
|
|
|
const location = useLocation();
|
|
|
|
const handleSignOut = React.useCallback(async () => {
|
|
try {
|
|
const {error} = await authClient.signOut();
|
|
|
|
if (error) {
|
|
logger.error('Sign out error', error);
|
|
return;
|
|
}
|
|
|
|
// Refresh the auth state
|
|
await checkSession?.();
|
|
|
|
// UserProvider, for this case, will not refresh the router and we need to do it manually
|
|
window.location.reload();
|
|
// After refresh, AuthGuard will handle the redirect
|
|
} catch (err) {
|
|
logger.error('Sign out error', err);
|
|
}
|
|
// eslint-disable-next-line
|
|
}, [checkSession, location]);
|
|
|
|
return (
|
|
<Popover
|
|
anchorEl={anchorEl}
|
|
anchorOrigin={{horizontal: 'left', vertical: 'bottom'}}
|
|
onClose={onClose}
|
|
open={open}
|
|
slotProps={{paper: {sx: {width: '240px'}}}}
|
|
>
|
|
<Box sx={{p: '16px 20px '}}>
|
|
{userDescriptor(user, session)}
|
|
</Box>
|
|
<Divider/>
|
|
<MenuList disablePadding sx={{p: '8px', '& .MuiMenuItem-root': {borderRadius: 1}}}>
|
|
{/*<MenuItem component={'a'} href={paths.dashboard.settings} onClick={onClose}>*/}
|
|
{/* <ListItemIcon>*/}
|
|
{/* <GearSixIcon fontSize="var(--icon-fontSize-md)"/>*/}
|
|
{/* </ListItemIcon>*/}
|
|
{/* Настройки*/}
|
|
{/*</MenuItem>*/}
|
|
{/*<MenuItem component={'a'} href={paths.dashboard.account} onClick={onClose}>*/}
|
|
{/* <ListItemIcon>*/}
|
|
{/* <UserIcon fontSize="var(--icon-fontSize-md)"/>*/}
|
|
{/* </ListItemIcon>*/}
|
|
{/* Профиль*/}
|
|
{/*</MenuItem>*/}
|
|
{!user.name ? <MenuItem onClick={() => window.location.replace(paths.auth.signIn)}>
|
|
<ListItemIcon>
|
|
<SignInIcon fontSize="var(--icon-fontSize-md)"/>
|
|
</ListItemIcon>
|
|
Вход
|
|
</MenuItem> :
|
|
<MenuItem onClick={handleSignOut}>
|
|
<ListItemIcon>
|
|
<SignOutIcon fontSize="var(--icon-fontSize-md)"/>
|
|
</ListItemIcon>
|
|
Выход
|
|
</MenuItem>
|
|
}
|
|
</MenuList>
|
|
</Popover>
|
|
);
|
|
}
|
|
|
|
function userDescriptor(user) {
|
|
if (!user) {
|
|
return null;
|
|
}
|
|
if (!user.name) {
|
|
return (<Typography variant="subtitle1">Гость</Typography>);
|
|
}
|
|
return (
|
|
<>
|
|
<Typography variant="subtitle1">{user.name + " " + user.lastName}</Typography>
|
|
<Typography color="text.secondary" variant="body2">{user.id}</Typography>
|
|
</>
|
|
);
|
|
}
|