Hide temporary by default

2 files changed, 22 insertions, 3 deletions

diff --git a/modern/src/resources/l10n/en.json b/modern/src/resources/l10n/en.json
index 66d15d4e..814bfde0 100644
--- a/modern/src/resources/l10n/en.json
+++ b/modern/src/resources/l10n/en.json
@@ -175,6 +175,7 @@
     "userFixedEmail": "No Email Change",
     "userToken": "Token",
     "userDeleteAccount": "Delete Account",
+    "userTemporary": "Temporary",
     "loginTitle": "Login",
     "loginLanguage": "Language",
     "loginReset": "Reset Password",
diff --git a/modern/src/settings/UsersPage.jsx b/modern/src/settings/UsersPage.jsx
index d04f2a2b..e54ecc01 100644
--- a/modern/src/settings/UsersPage.jsx
+++ b/modern/src/settings/UsersPage.jsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import {
-  Table, TableRow, TableCell, TableHead, TableBody,
+  Table, TableRow, TableCell, TableHead, TableBody, Switch, TableFooter, FormControlLabel, FormControl, FormGroup, Grid,
 } from '@mui/material';
 import LoginIcon from '@mui/icons-material/Login';
 import LinkIcon from '@mui/icons-material/Link';
@@ -31,6 +31,7 @@ const UsersPage = () => {
   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}`);
@@ -80,11 +81,11 @@ const UsersPage = () => {
             <TableCell>{t('userAdmin')}</TableCell>
             <TableCell>{t('sharedDisabled')}</TableCell>
             <TableCell>{t('userExpirationTime')}</TableCell>
-            <TableCell className={classes.columnAction} />
+            <TableCell className={classes.columnAction}></TableCell>
           </TableRow>
         </TableHead>
         <TableBody>
-          {!loading ? items.filter(filterByKeyword(searchKeyword)).map((item) => (
+          {!loading ? items.filter((u) => temporary || !u.temporary).filter(filterByKeyword(searchKeyword)).map((item) => (
             <TableRow key={item.id}>
               <TableCell>{item.name}</TableCell>
               <TableCell>{item.email}</TableCell>
@@ -103,6 +104,23 @@ const UsersPage = () => {
             </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>