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
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
|
import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import {
Table, TableRow, TableCell, TableHead, TableBody, Switch, TableFooter, FormControlLabel,
} from '@mui/material';
import LoginIcon from '@mui/icons-material/Login';
import LinkIcon from '@mui/icons-material/Link';
import { useCatch, useEffectAsync } from '../reactHelper';
import { formatBoolean, formatTime } from '../common/util/formatter';
import { useTranslation } from '../common/components/LocalizationProvider';
import PageLayout from '../common/components/PageLayout';
import SettingsMenu from './components/SettingsMenu';
import CollectionFab from './components/CollectionFab';
import CollectionActions from './components/CollectionActions';
import TableShimmer from '../common/components/TableShimmer';
import { useManager } from '../common/util/permissions';
import SearchHeader, { filterByKeyword } from './components/SearchHeader';
import { usePreference } from '../common/util/preferences';
import useSettingsStyles from './common/useSettingsStyles';
const UsersPage = () => {
const classes = useSettingsStyles();
const navigate = useNavigate();
const t = useTranslation();
const manager = useManager();
const hours12 = usePreference('twelveHourFormat');
const [timestamp, setTimestamp] = useState(Date.now());
const [items, setItems] = useState([]);
const [searchKeyword, setSearchKeyword] = useState('');
const [loading, setLoading] = useState(false);
const [temporary, setTemporary] = useState(false);
const handleLogin = useCatch(async (userId) => {
const response = await fetch(`/api/session/${userId}`);
if (response.ok) {
window.location.replace('/');
} else {
throw Error(await response.text());
}
});
const actionLogin = {
key: 'login',
title: t('loginLogin'),
icon: <LoginIcon fontSize="small" />,
handler: handleLogin,
};
const actionConnections = {
key: 'connections',
title: t('sharedConnections'),
icon: <LinkIcon fontSize="small" />,
handler: (userId) => navigate(`/settings/user/${userId}/connections`),
};
useEffectAsync(async () => {
setLoading(true);
try {
const response = await fetch('/api/users');
if (response.ok) {
setItems(await response.json());
} else {
throw Error(await response.text());
}
} finally {
setLoading(false);
}
}, [timestamp]);
return (
<PageLayout menu={<SettingsMenu />} breadcrumbs={['settingsTitle', 'settingsUsers']}>
<SearchHeader keyword={searchKeyword} setKeyword={setSearchKeyword} />
<Table className={classes.table}>
<TableHead>
<TableRow>
<TableCell>{t('sharedName')}</TableCell>
<TableCell>{t('userEmail')}</TableCell>
<TableCell>{t('userAdmin')}</TableCell>
<TableCell>{t('sharedDisabled')}</TableCell>
<TableCell>{t('userExpirationTime')}</TableCell>
<TableCell className={classes.columnAction} />
</TableRow>
</TableHead>
<TableBody>
{!loading ? items.filter((u) => temporary || !u.temporary).filter(filterByKeyword(searchKeyword)).map((item) => (
<TableRow key={item.id}>
<TableCell>{item.name}</TableCell>
<TableCell>{item.email}</TableCell>
<TableCell>{formatBoolean(item.administrator, t)}</TableCell>
<TableCell>{formatBoolean(item.disabled, t)}</TableCell>
<TableCell>{formatTime(item.expirationTime, 'date', hours12)}</TableCell>
<TableCell className={classes.columnAction} padding="none">
<CollectionActions
itemId={item.id}
editPath="/settings/user"
endpoint="users"
setTimestamp={setTimestamp}
customActions={manager ? [actionLogin, actionConnections] : [actionConnections]}
/>
</TableCell>
</TableRow>
)) : (<TableShimmer columns={6} endAction />)}
</TableBody>
<TableFooter>
<TableRow>
<TableCell colSpan={6} align="right">
<FormControlLabel
control={(
<Switch
value={temporary}
onChange={(e) => setTemporary(e.target.checked)}
size="small"
/>
)}
label={t('userTemporary')}
labelPlacement="start"
/>
</TableCell>
</TableRow>
</TableFooter>
</Table>
<CollectionFab editPath="/settings/user" />
</PageLayout>
);
};
export default UsersPage;
|
