2 files changed, 24 insertions, 18 deletions
diff --git a/modern/src/settings/ComputedAttributesPage.js b/modern/src/settings/ComputedAttributesPage.js
index b989b43e..78842e33 100644
--- a/modern/src/settings/ComputedAttributesPage.js
+++ b/modern/src/settings/ComputedAttributesPage.js
@@ -3,11 +3,11 @@ import {
   TableContainer, Table, TableRow, TableCell, TableHead, TableBody, makeStyles, IconButton,
 } from '@material-ui/core';
 import MoreVertIcon from '@material-ui/icons/MoreVert';
-import { useSelector } from 'react-redux';
 import { useEffectAsync } from '../reactHelper';
 import EditCollectionView from '../EditCollectionView';
 import OptionsLayout from './OptionsLayout';
 import { useTranslation } from '../LocalizationProvider';
+import { useAdministrator } from '../common/permissions';
 
 const useStyles = makeStyles((theme) => ({
   columnAction: {
@@ -21,7 +21,7 @@ const ComputedAttributeView = ({ updateTimestamp, onMenuClick }) => {
   const t = useTranslation();
 
   const [items, setItems] = useState([]);
-  const adminEnabled = useSelector((state) => state.session.user && state.session.user.administrator);
+  const administrator = useAdministrator();
 
   useEffectAsync(async () => {
     const response = await fetch('/api/attributes/computed');
@@ -35,7 +35,7 @@ const ComputedAttributeView = ({ updateTimestamp, onMenuClick }) => {
       <Table>
         <TableHead>
           <TableRow>
-            {adminEnabled && <TableCell className={classes.columnAction} />}
+            {administrator && <TableCell className={classes.columnAction} />}
             <TableCell>{t('sharedDescription')}</TableCell>
             <TableCell>{t('sharedAttribute')}</TableCell>
             <TableCell>{t('sharedExpression')}</TableCell>
@@ -45,13 +45,12 @@ const ComputedAttributeView = ({ updateTimestamp, onMenuClick }) => {
         <TableBody>
           {items.map((item) => (
             <TableRow key={item.id}>
-              {adminEnabled
-              && (
-              <TableCell className={classes.columnAction} padding="none">
-                <IconButton onClick={(event) => onMenuClick(event.currentTarget, item.id)}>
-                  <MoreVertIcon />
-                </IconButton>
-              </TableCell>
+              {administrator && (
+                <TableCell className={classes.columnAction} padding="none">
+                  <IconButton onClick={(event) => onMenuClick(event.currentTarget, item.id)}>
+                    <MoreVertIcon />
+                  </IconButton>
+                </TableCell>
               )}
               <TableCell>{item.description}</TableCell>
               <TableCell>{item.attribute}</TableCell>
diff --git a/modern/src/settings/OptionsLayout.js b/modern/src/settings/OptionsLayout.js
index 6ba636c2..3a78929b 100644
--- a/modern/src/settings/OptionsLayout.js
+++ b/modern/src/settings/OptionsLayout.js
@@ -26,6 +26,7 @@ import ExitToAppIcon from '@material-ui/icons/ExitToApp';
 import SideNav from '../components/SideNav';
 import NavBar from '../components/NavBar';
 import { useTranslation } from '../LocalizationProvider';
+import { useAdministrator, useReadonly } from '../common/permissions';
 
 const useStyles = makeStyles((theme) => ({
   root: {
@@ -70,18 +71,15 @@ const OptionsLayout = ({ children }) => {
   const [openDrawer, setOpenDrawer] = useState(false);
   const [optionTitle, setOptionTitle] = useState();
 
-  const admin = useSelector((state) => state.session.user?.administrator);
+  const readonly = useReadonly();
+  const admin = useAdministrator();
   const userId = useSelector((state) => state.session.user?.id);
 
-  const adminRoutes = useMemo(() => [
-    { subheader: t('userAdmin') },
-    { name: t('settingsServer'), href: '/admin/server', icon: <StorageIcon /> },
-    { name: t('settingsUsers'), href: '/admin/users', icon: <PeopleIcon /> },
-    { name: t('statisticsTitle'), href: '/admin/statistics', icon: <BarChartIcon /> },
+  const readonlyRoutes = useMemo(() => [
+    { name: t('sharedPreferences'), href: '/settings/preferences', icon: <SettingsIcon /> },
   ], [t]);
 
   const mainRoutes = useMemo(() => [
-    { name: t('sharedPreferences'), href: '/settings/preferences', icon: <SettingsIcon /> },
     { name: t('sharedNotifications'), href: '/settings/notifications', icon: <NotificationsIcon /> },
     { name: t('settingsUser'), href: `/user/${userId}`, icon: <PersonIcon /> },
     { name: t('sharedGeofences'), href: '/geofences', icon: <CreateIcon /> },
@@ -93,7 +91,16 @@ const OptionsLayout = ({ children }) => {
     { name: t('sharedSavedCommands'), href: '/settings/commands', icon: <ExitToAppIcon /> },
   ], [t, userId]);
 
-  const routes = useMemo(() => [...mainRoutes, ...(admin ? adminRoutes : [])], [mainRoutes, admin, adminRoutes]);
+  const adminRoutes = useMemo(() => [
+    { subheader: t('userAdmin') },
+    { name: t('settingsServer'), href: '/admin/server', icon: <StorageIcon /> },
+    { name: t('settingsUsers'), href: '/admin/users', icon: <PeopleIcon /> },
+    { name: t('statisticsTitle'), href: '/admin/statistics', icon: <BarChartIcon /> },
+  ], [t]);
+
+  const routes = useMemo(() => (
+    [ ...readonlyRoutes, ...(!readonly ? mainRoutes : []), ...(admin ? adminRoutes : [])]
+  ), [readonlyRoutes, readonly, mainRoutes, admin, adminRoutes]);
 
   useEffect(() => {
     const activeRoute = routes.find((route) => route.href && location.pathname.includes(route.href));