fix read-only access

interface/src/components/layout/LayoutMenu.tsx

@@ -131,7 +131,11 @@ const LayoutMenu: FC = () => {
               <Avatar sx={{ bgcolor: '#b1395f', color: 'white' }}>
                 <PersonIcon />
               </Avatar>
-              <ListItemText sx={{ pl: 2 }} primary={me.username} secondary={me.admin ? LL.ADMIN() : LL.GUEST()} />
+              <ListItemText
+                sx={{ pl: 2 }}
+                primary={me.username}
+                secondary={(me.admin ? LL.ADMIN() : LL.GUEST()) + ' Account'}
+              />
             </ListItem>
           </List>
           <Box p={2}>

interface/src/framework/Settings.tsx

@@ -34,7 +34,7 @@ const Settings: FC = () => {
                 <TuneIcon />
               </Avatar>
             </ListItemAvatar>
-            <ListItemText primary={LL.APPLICATION_SETTINGS()} secondary="Modify EMS-ESP system settings" />
+            <ListItemText primary={LL.APPLICATION_SETTINGS()} secondary="Modify EMS-ESP Application Settings" />
           </ListItemButton>
         </ListItem>
 
@@ -142,7 +142,7 @@ const Settings: FC = () => {
                 <LockIcon />
               </Avatar>
             </ListItemAvatar>
-            <ListItemText primary={LL.SECURITY(0)} secondary="Configure user administration" />
+            <ListItemText primary={LL.SECURITY(0)} secondary="Add/Remove Users" />
           </ListItemButton>
         </ListItem>
 

interface/src/project/Devices.tsx

@@ -33,7 +33,7 @@ import { useSort, SortToggleType } from '@table-library/react-table-library/sort
 import { Table, Header, HeaderRow, HeaderCell, Body, Row, Cell } from '@table-library/react-table-library/table';
 import { useTheme } from '@table-library/react-table-library/theme';
 import { useRequest } from 'alova';
-import { useState, useEffect, useCallback, useLayoutEffect } from 'react';
+import { useState, useEffect, useCallback, useLayoutEffect, useContext } from 'react';
 
 import { IconContext } from 'react-icons';
 import { useNavigate } from 'react-router-dom';
@@ -51,10 +51,13 @@ import type { FC } from 'react';
 import { dialogStyle } from 'CustomTheme';
 import { ButtonRow, SectionContent, MessageBox, useLayoutTitle } from 'components';
 
+import { AuthenticatedContext } from 'contexts/authentication';
 import { useI18nContext } from 'i18n/i18n-react';
 
 const Devices: FC = () => {
   const { LL } = useI18nContext();
+  const { me } = useContext(AuthenticatedContext);
+
   const [size, setSize] = useState([0, 0]);
   const [selectedDeviceValue, setSelectedDeviceValue] = useState<DeviceValue>();
   const [onlyFav, setOnlyFav] = useState(false);
@@ -281,9 +284,9 @@ const Devices: FC = () => {
 
   const customize = () => {
     if (selectedDevice == 99) {
-      navigate('/settings/customentities');
+      navigate('/customentities');
     } else {
-      navigate('/settings/customization', { state: selectedDevice });
+      navigate('/customizations', { state: selectedDevice });
     }
   };
 
@@ -520,9 +523,11 @@ const Devices: FC = () => {
               <IconButton onClick={() => setShowDeviceInfo(true)}>
                 <InfoOutlinedIcon color="primary" sx={{ fontSize: 18, verticalAlign: 'middle' }} />
               </IconButton>
+              {me.admin && (
                 <IconButton onClick={customize}>
-                <FormatListNumberedIcon color="primary" sx={{ fontSize: 18, verticalAlign: 'middle' }} />
+                  <FormatListNumberedIcon sx={{ fontSize: 18, verticalAlign: 'middle' }} />
                 </IconButton>
+              )}
               <IconButton onClick={handleDownloadCsv}>
                 <DownloadIcon color="primary" sx={{ fontSize: 18, verticalAlign: 'middle' }} />
               </IconButton>
@@ -584,7 +589,7 @@ const Devices: FC = () => {
                     <Cell>{renderNameCell(dv)}</Cell>
                     <Cell>{formatValue(LL, dv.v, dv.u)}</Cell>
                     <Cell stiff>
-                      {dv.c && !hasMask(dv.id, DeviceEntityMask.DV_READONLY) && (
+                      {me.admin && dv.c && !hasMask(dv.id, DeviceEntityMask.DV_READONLY) && (
                         <IconButton size="small" onClick={() => showDeviceValue(dv)}>
                           {dv.v === '' && dv.c ? (
                             <PlayArrowIcon color="primary" sx={{ fontSize: 16 }} />

interface/src/project/Sensors.tsx

@@ -27,12 +27,13 @@ import { useI18nContext } from 'i18n/i18n-react';
 
 const Sensors: FC = () => {
   const { LL } = useI18nContext();
+  const { me } = useContext(AuthenticatedContext);
+
   const [selectedTemperatureSensor, setSelectedTemperatureSensor] = useState<TemperatureSensor>();
   const [selectedAnalogSensor, setSelectedAnalogSensor] = useState<AnalogSensor>();
   const [temperatureDialogOpen, setTemperatureDialogOpen] = useState<boolean>(false);
   const [analogDialogOpen, setAnalogDialogOpen] = useState<boolean>(false);
   const [creating, setCreating] = useState<boolean>(false);
-  const { me } = useContext(AuthenticatedContext);
 
   const { data: sensorData, send: fetchSensorData } = useRequest(() => EMSESP.readSensorData(), {
     initialData: {
@@ -220,8 +221,10 @@ const Sensors: FC = () => {
   }
 
   const updateTemperatureSensor = (ts: TemperatureSensor) => {
+    if (me.admin) {
       setSelectedTemperatureSensor(ts);
       setTemperatureDialogOpen(true);
+    }
   };
 
   const onTemperatureDialogClose = () => {
@@ -244,9 +247,11 @@ const Sensors: FC = () => {
   };
 
   const updateAnalogSensor = (as: AnalogSensor) => {
+    if (me.admin) {
       setCreating(false);
       setSelectedAnalogSensor(as);
       setAnalogDialogOpen(true);
+    }
   };
 
   const onAnalogDialogClose = () => {

mock-api/handler.ts

@@ -412,6 +412,7 @@ const guest_signin = {
   access_token:
     'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VybmFtZSI6Imd1ZXN0IiwiYWRtaW4iOmZhbHNlfQ.E_lylR_vGIQFZUGNwcl5F6OkHoaELGsC5zqhi0pAiJE'
 };
+// modify here to simulate admin and guest logins
 const signin = admin_signin;
 // const signin = guest_signin;
 
@@ -425,6 +426,7 @@ const EMSESP_CORE_DATA_ENDPOINT = REST_ENDPOINT_ROOT + 'coreData';
 const EMSESP_SENSOR_DATA_ENDPOINT = REST_ENDPOINT_ROOT + 'sensorData';
 const EMSESP_DEVICES_ENDPOINT = REST_ENDPOINT_ROOT + 'devices';
 const EMSESP_SCANDEVICES_ENDPOINT = REST_ENDPOINT_ROOT + 'scanDevices';
+// for later
 // const EMSESP_DEVICEDATA_ENDPOINT = REST_ENDPOINT_ROOT + 'deviceData/:id';
 // const EMSESP_DEVICEENTITIES_ENDPOINT = REST_ENDPOINT_ROOT + 'deviceEntities/:id';
 const EMSESP_DEVICEDATA_ENDPOINT = REST_ENDPOINT_ROOT + 'deviceData';