-
Notifications
You must be signed in to change notification settings - Fork 12
/
UserOptions.jsx
111 lines (106 loc) · 4.23 KB
/
UserOptions.jsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
import React from 'react';
import alertifyjs from 'alertifyjs';
import {
IconButton, Tooltip,
List, ListItem, ListItemIcon, ListItemText, Chip, Divider, Button, Collapse
} from '@mui/material';
import {
ExitToApp as LogoutIcon, AccountCircle as AccountIcon,
Storage as ServerIcon, ExpandLess as LessIcon, ExpandMore as MoreIcon,
} from '@mui/icons-material';
import { get } from 'lodash';
import { getCurrentUser, getUserInitials, getAppliedServerConfig, canSwitchServer } from '../../common/utils';
import ServerConfigList from '../common/ServerConfigList';
import PopperGrow from '../common/PopperGrow';
const onLogoutClick = msg => {
localStorage.removeItem('token');
localStorage.removeItem('user');
alertifyjs.success(msg || 'You have signed out.')
window.location.hash = '#/'
window.location.reload()
}
const UserOptions = () => {
const initials = getUserInitials()
const user = getCurrentUser() || {}
const [open, setOpen] = React.useState(false);
const [serverOpen, setServerOpen] = React.useState(false);
const anchorRef = React.useRef(null);
const handleToggle = () => setOpen((prevOpen) => !prevOpen);
const handleClose = event => {
if (anchorRef.current && anchorRef.current.contains(event.target))
return;
setOpen(false);
};
const onHomeClick = event => {
event.persist();
handleClose(event);
window.location.hash = user.url
};
const username = get(user, 'username');
const displayName = get(user, 'name') || username;
const serverConfig = getAppliedServerConfig();
return (
<React.Fragment>
<Tooltip arrow title={username || ''}>
{
user.logo_url ?
<IconButton touch='true' onClick={handleToggle} ref={anchorRef} size="large">
<img src={user.logo_url} className='user-img-small' />
</IconButton> :
<IconButton
ref={anchorRef}
aria-controls={open ? 'split-button-menu' : undefined}
aria-expanded={open ? 'true' : undefined}
aria-label="select merge strategy"
aria-haspopup="menu"
onClick={handleToggle}
touch='true'
className='user-info-icon'
size="large">
{initials}
</IconButton>
}
</Tooltip>
<PopperGrow open={open} anchorRef={anchorRef} handleClose={handleClose}>
<List style={{paddingBottom: 0, paddingTop: 0}}>
<ListItem>
<ListItemText style={{textAlign: 'center'}}>
<div className='col-md-12'>
{
user.logo_url ?
<img src={user.logo_url} className='user-img-medium' /> :
<AccountIcon style={{width: '80px', height: '80px', color: 'gray'}} />
}
</div>
<ListItemText className='list-item-text-bold-primary' primary={displayName} secondary={user.email} />
<Chip className='manage-account-chip' label={<span style={{fontWeight: 'bold'}}>My Profile</span>} onClick={onHomeClick} />
</ListItemText>
</ListItem>
<Divider />
{
canSwitchServer() &&
<Tooltip arrow placement='left' title='Switch Server'>
<ListItem className='user-option-list-item' onClick={() => setServerOpen(!serverOpen)}>
<ListItemIcon style={{minWidth: 'auto', marginRight: '15px'}}>
<ServerIcon fontSize='small' />
</ListItemIcon>
<ListItemText className='list-item-text' primary='Switch Server' secondary={get(serverConfig, 'name')} />
{serverOpen ? <LessIcon /> : <MoreIcon />}
</ListItem>
</Tooltip>
}
<Collapse in={serverOpen} style={{maxHeight: '250px', overflow: 'auto'}}>
<ServerConfigList onClose={() => setOpen(false)}/>
</Collapse>
<Divider />
<ListItem style={{display: 'flex', justifyContent: 'center', padding: '16px'}}>
<Button size='small' startIcon={<LogoutIcon fontSize='inherit' color='inherit' />} variant='outlined' onClick={onLogoutClick}>
Sign Out
</Button>
</ListItem>
</List>
</PopperGrow>
</React.Fragment>
);
}
export default UserOptions;