formatting

2025-12-08 00:39:50 +03:00 · 2024-04-21 15:10:22 +02:00
parent befa487482
commit ac39a46442
100 changed files with 2778 additions and 798 deletions
--- a/interface/src/framework/Settings.tsx
+++ b/interface/src/framework/Settings.tsx
@@ -13,7 +13,15 @@ import SettingsBackupRestoreIcon from '@mui/icons-material/SettingsBackupRestore
 import SettingsEthernetIcon from '@mui/icons-material/SettingsEthernet';
 import SettingsInputAntennaIcon from '@mui/icons-material/SettingsInputAntenna';
 import TuneIcon from '@mui/icons-material/Tune';
-import { Box, Button, Dialog, DialogActions, DialogContent, DialogTitle, List } from '@mui/material';
+import {
+  Box,
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  List
+} from '@mui/material';

 import * as SystemApi from 'api/system';

@@ -92,7 +100,11 @@ const Settings: FC = () => {
  };

  const renderRestartDialog = () => (
-    <Dialog sx={dialogStyle} open={confirmRestart} onClose={() => setConfirmRestart(false)}>
+    <Dialog
+      sx={dialogStyle}
+      open={confirmRestart}
+      onClose={() => setConfirmRestart(false)}
+    >
      <DialogTitle>{LL.RESTART()}</DialogTitle>
      <DialogContent dividers>{LL.RESTART_CONFIRM()}</DialogContent>
      <DialogActions>
@@ -128,7 +140,11 @@ const Settings: FC = () => {
  );

  const renderFactoryResetDialog = () => (
-    <Dialog sx={dialogStyle} open={confirmFactoryReset} onClose={() => setConfirmFactoryReset(false)}>
+    <Dialog
+      sx={dialogStyle}
+      open={confirmFactoryReset}
+      onClose={() => setConfirmFactoryReset(false)}
+    >
      <DialogTitle>{LL.FACTORY_RESET()}</DialogTitle>
      <DialogContent dividers>{LL.SYSTEM_FACTORY_TEXT_DIALOG()}</DialogContent>
      <DialogActions>
@@ -189,9 +205,26 @@ const Settings: FC = () => {
          to="ntp"
        />

-        <ListMenuItem icon={DeviceHubIcon} bgcolor="#68374d" label="MQTT" text={LL.CONFIGURE('MQTT')} to="mqtt" />
-        <ListMenuItem icon={CastIcon} bgcolor="#efc34b" label="OTA" text={LL.CONFIGURE('OTA')} to="ota" />
-        <ListMenuItem icon={LockIcon} label={LL.SECURITY(0)} text={LL.SECURITY_1()} to="security" />
+        <ListMenuItem
+          icon={DeviceHubIcon}
+          bgcolor="#68374d"
+          label="MQTT"
+          text={LL.CONFIGURE('MQTT')}
+          to="mqtt"
+        />
+        <ListMenuItem
+          icon={CastIcon}
+          bgcolor="#efc34b"
+          label="OTA"
+          text={LL.CONFIGURE('OTA')}
+          to="ota"
+        />
+        <ListMenuItem
+          icon={LockIcon}
+          label={LL.SECURITY(0)}
+          text={LL.SECURITY_1()}
+          to="security"
+        />

        <ListMenuItem
          icon={MemoryIcon}
@@ -242,7 +275,9 @@ const Settings: FC = () => {
    </>
  );

-  return <SectionContent>{restarting ? <RestartMonitor /> : content()}</SectionContent>;
+  return (
+    <SectionContent>{restarting ? <RestartMonitor /> : content()}</SectionContent>
+  );
 };

 export default Settings;
--- a/interface/src/framework/ap/APSettings.tsx
+++ b/interface/src/framework/ap/APSettings.tsx
@@ -25,7 +25,8 @@ import { numberValue, updateValueDirty, useRest } from 'utils';
 import { createAPSettingsValidator, validate } from 'validators';

 export const isAPEnabled = ({ provision_mode }: APSettingsType) =>
-  provision_mode === APProvisionMode.AP_MODE_ALWAYS || provision_mode === APProvisionMode.AP_MODE_DISCONNECTED;
+  provision_mode === APProvisionMode.AP_MODE_ALWAYS ||
+  provision_mode === APProvisionMode.AP_MODE_DISCONNECTED;

 const APSettings: FC = () => {
  const {
@@ -48,7 +49,12 @@ const APSettings: FC = () => {

  const [fieldErrors, setFieldErrors] = useState<ValidateFieldsError>();

-  const updateFormValue = updateValueDirty(origData, dirtyFlags, setDirtyFlags, updateDataValue);
+  const updateFormValue = updateValueDirty(
+    origData,
+    dirtyFlags,
+    setDirtyFlags,
+    updateDataValue
+  );

  const content = () => {
    if (!data) {
@@ -78,9 +84,15 @@ const APSettings: FC = () => {
          onChange={updateFormValue}
          margin="normal"
        >
-          <MenuItem value={APProvisionMode.AP_MODE_ALWAYS}>{LL.AP_PROVIDE_TEXT_1()}</MenuItem>
-          <MenuItem value={APProvisionMode.AP_MODE_DISCONNECTED}>{LL.AP_PROVIDE_TEXT_2()}</MenuItem>
-          <MenuItem value={APProvisionMode.AP_NEVER}>{LL.AP_PROVIDE_TEXT_3()}</MenuItem>
+          <MenuItem value={APProvisionMode.AP_MODE_ALWAYS}>
+            {LL.AP_PROVIDE_TEXT_1()}
+          </MenuItem>
+          <MenuItem value={APProvisionMode.AP_MODE_DISCONNECTED}>
+            {LL.AP_PROVIDE_TEXT_2()}
+          </MenuItem>
+          <MenuItem value={APProvisionMode.AP_NEVER}>
+            {LL.AP_PROVIDE_TEXT_3()}
+          </MenuItem>
        </ValidatedTextField>
        {isAPEnabled(data) && (
          <>
@@ -123,7 +135,13 @@ const APSettings: FC = () => {
              ))}
            </ValidatedTextField>
            <BlockFormControlLabel
-              control={<Checkbox name="ssid_hidden" checked={data.ssid_hidden} onChange={updateFormValue} />}
+              control={
+                <Checkbox
+                  name="ssid_hidden"
+                  checked={data.ssid_hidden}
+                  onChange={updateFormValue}
+                />
+              }
              label={LL.AP_HIDE_SSID()}
            />
            <ValidatedTextField
--- a/interface/src/framework/ap/APStatus.tsx
+++ b/interface/src/framework/ap/APStatus.tsx
@@ -4,7 +4,16 @@ import ComputerIcon from '@mui/icons-material/Computer';
 import DeviceHubIcon from '@mui/icons-material/DeviceHub';
 import RefreshIcon from '@mui/icons-material/Refresh';
 import SettingsInputAntennaIcon from '@mui/icons-material/SettingsInputAntenna';
-import { Avatar, Button, Divider, List, ListItem, ListItemAvatar, ListItemText, useTheme } from '@mui/material';
+import {
+  Avatar,
+  Button,
+  Divider,
+  List,
+  ListItem,
+  ListItemAvatar,
+  ListItemText,
+  useTheme
+} from '@mui/material';
 import type { Theme } from '@mui/material';

 import * as APApi from 'api/ap';
@@ -69,7 +78,10 @@ const APStatus: FC = () => {
            <ListItemAvatar>
              <Avatar>IP</Avatar>
            </ListItemAvatar>
-            <ListItemText primary={LL.ADDRESS_OF('IP')} secondary={data.ip_address} />
+            <ListItemText
+              primary={LL.ADDRESS_OF('IP')}
+              secondary={data.ip_address}
+            />
          </ListItem>
          <Divider variant="inset" component="li" />
          <ListItem>
@@ -78,7 +90,10 @@ const APStatus: FC = () => {
                <DeviceHubIcon />
              </Avatar>
            </ListItemAvatar>
-            <ListItemText primary={LL.ADDRESS_OF('MAC')} secondary={data.mac_address} />
+            <ListItemText
+              primary={LL.ADDRESS_OF('MAC')}
+              secondary={data.mac_address}
+            />
          </ListItem>
          <Divider variant="inset" component="li" />
          <ListItem>
@@ -92,7 +107,12 @@ const APStatus: FC = () => {
          <Divider variant="inset" component="li" />
        </List>
        <ButtonRow>
-          <Button startIcon={<RefreshIcon />} variant="outlined" color="secondary" onClick={loadData}>
+          <Button
+            startIcon={<RefreshIcon />}
+            variant="outlined"
+            color="secondary"
+            onClick={loadData}
+          >
            {LL.REFRESH()}
          </Button>
        </ButtonRow>
--- a/interface/src/framework/mqtt/MqttSettings.tsx
+++ b/interface/src/framework/mqtt/MqttSettings.tsx
@@ -3,7 +3,15 @@ import type { FC } from 'react';

 import CancelIcon from '@mui/icons-material/Cancel';
 import WarningIcon from '@mui/icons-material/Warning';
-import { Button, Checkbox, Grid, InputAdornment, MenuItem, TextField, Typography } from '@mui/material';
+import {
+  Button,
+  Checkbox,
+  Grid,
+  InputAdornment,
+  MenuItem,
+  TextField,
+  Typography
+} from '@mui/material';

 import * as MqttApi from 'api/mqtt';

@@ -43,7 +51,12 @@ const MqttSettings: FC = () => {

  const [fieldErrors, setFieldErrors] = useState<ValidateFieldsError>();

-  const updateFormValue = updateValueDirty(origData, dirtyFlags, setDirtyFlags, updateDataValue);
+  const updateFormValue = updateValueDirty(
+    origData,
+    dirtyFlags,
+    setDirtyFlags,
+    updateDataValue
+  );

  const content = () => {
    if (!data) {
@@ -63,10 +76,22 @@ const MqttSettings: FC = () => {
    return (
      <>
        <BlockFormControlLabel
-          control={<Checkbox name="enabled" checked={data.enabled} onChange={updateFormValue} />}
+          control={
+            <Checkbox
+              name="enabled"
+              checked={data.enabled}
+              onChange={updateFormValue}
+            />
+          }
          label={LL.ENABLE_MQTT()}
        />
-        <Grid container spacing={1} direction="row" justifyContent="flex-start" alignItems="flex-start">
+        <Grid
+          container
+          spacing={1}
+          direction="row"
+          justifyContent="flex-start"
+          alignItems="flex-start"
+        >
          <Grid item xs={12} sm={6}>
            <ValidatedTextField
              fieldErrors={fieldErrors}
@@ -144,7 +169,9 @@ const MqttSettings: FC = () => {
              name="keep_alive"
              label="Keep Alive"
              InputProps={{
-                endAdornment: <InputAdornment position="end">{LL.SECONDS()}</InputAdornment>
+                endAdornment: (
+                  <InputAdornment position="end">{LL.SECONDS()}</InputAdornment>
+                )
              }}
              fullWidth
              variant="outlined"
@@ -173,7 +200,13 @@ const MqttSettings: FC = () => {
        </Grid>
        {data.enableTLS !== undefined && (
          <BlockFormControlLabel
-            control={<Checkbox name="enableTLS" checked={data.enableTLS} onChange={updateFormValue} />}
+            control={
+              <Checkbox
+                name="enableTLS"
+                checked={data.enableTLS}
+                onChange={updateFormValue}
+              />
+            }
            label={LL.ENABLE_TLS()}
          />
        )}
@@ -190,11 +223,23 @@ const MqttSettings: FC = () => {
        )}

        <BlockFormControlLabel
-          control={<Checkbox name="clean_session" checked={data.clean_session} onChange={updateFormValue} />}
+          control={
+            <Checkbox
+              name="clean_session"
+              checked={data.clean_session}
+              onChange={updateFormValue}
+            />
+          }
          label={LL.MQTT_CLEAN_SESSION()}
        />
        <BlockFormControlLabel
-          control={<Checkbox name="mqtt_retain" checked={data.mqtt_retain} onChange={updateFormValue} />}
+          control={
+            <Checkbox
+              name="mqtt_retain"
+              checked={data.mqtt_retain}
+              onChange={updateFormValue}
+            />
+          }
          label={LL.MQTT_RETAIN_FLAG()}
        />

@@ -215,7 +260,13 @@ const MqttSettings: FC = () => {
          <MenuItem value={2}>{LL.MQTT_NEST_2()}</MenuItem>
        </TextField>
        <BlockFormControlLabel
-          control={<Checkbox name="send_response" checked={data.send_response} onChange={updateFormValue} />}
+          control={
+            <Checkbox
+              name="send_response"
+              checked={data.send_response}
+              onChange={updateFormValue}
+            />
+          }
          label={LL.MQTT_RESPONSE()}
        />
        {!data.ha_enabled && (
@@ -229,7 +280,13 @@ const MqttSettings: FC = () => {
          >
            <Grid item>
              <BlockFormControlLabel
-                control={<Checkbox name="publish_single" checked={data.publish_single} onChange={updateFormValue} />}
+                control={
+                  <Checkbox
+                    name="publish_single"
+                    checked={data.publish_single}
+                    onChange={updateFormValue}
+                  />
+                }
                label={LL.MQTT_PUBLISH_TEXT_1()}
              />
            </Grid>
@@ -237,7 +294,11 @@ const MqttSettings: FC = () => {
              <Grid item>
                <BlockFormControlLabel
                  control={
-                    <Checkbox name="publish_single2cmd" checked={data.publish_single2cmd} onChange={updateFormValue} />
+                    <Checkbox
+                      name="publish_single2cmd"
+                      checked={data.publish_single2cmd}
+                      onChange={updateFormValue}
+                    />
                  }
                  label={LL.MQTT_PUBLISH_TEXT_2()}
                />
@@ -246,10 +307,22 @@ const MqttSettings: FC = () => {
          </Grid>
        )}
        {!data.publish_single && (
-          <Grid container spacing={1} direction="row" justifyContent="flex-start" alignItems="flex-start">
+          <Grid
+            container
+            spacing={1}
+            direction="row"
+            justifyContent="flex-start"
+            alignItems="flex-start"
+          >
            <Grid item>
              <BlockFormControlLabel
-                control={<Checkbox name="ha_enabled" checked={data.ha_enabled} onChange={updateFormValue} />}
+                control={
+                  <Checkbox
+                    name="ha_enabled"
+                    checked={data.ha_enabled}
+                    onChange={updateFormValue}
+                  />
+                }
                label={LL.MQTT_PUBLISH_TEXT_3()}
              />
            </Grid>
@@ -312,14 +385,22 @@ const MqttSettings: FC = () => {
        <Typography sx={{ pt: 2 }} variant="h6" color="primary">
          {LL.MQTT_PUBLISH_INTERVALS()}&nbsp;(0=auto)
        </Typography>
-        <Grid container spacing={1} direction="row" justifyContent="flex-start" alignItems="flex-start">
+        <Grid
+          container
+          spacing={1}
+          direction="row"
+          justifyContent="flex-start"
+          alignItems="flex-start"
+        >
          <Grid item xs={12} sm={6} md={4}>
            <ValidatedTextField
              fieldErrors={fieldErrors}
              name="publish_time_heartbeat"
              label="Heartbeat"
              InputProps={{
-                endAdornment: <InputAdornment position="end">{LL.SECONDS()}</InputAdornment>
+                endAdornment: (
+                  <InputAdornment position="end">{LL.SECONDS()}</InputAdornment>
+                )
              }}
              fullWidth
              variant="outlined"
@@ -334,7 +415,9 @@ const MqttSettings: FC = () => {
              name="publish_time_boiler"
              label={LL.MQTT_INT_BOILER()}
              InputProps={{
-                endAdornment: <InputAdornment position="end">{LL.SECONDS()}</InputAdornment>
+                endAdornment: (
+                  <InputAdornment position="end">{LL.SECONDS()}</InputAdornment>
+                )
              }}
              fullWidth
              variant="outlined"
@@ -349,7 +432,9 @@ const MqttSettings: FC = () => {
              name="publish_time_thermostat"
              label={LL.MQTT_INT_THERMOSTATS()}
              InputProps={{
-                endAdornment: <InputAdornment position="end">{LL.SECONDS()}</InputAdornment>
+                endAdornment: (
+                  <InputAdornment position="end">{LL.SECONDS()}</InputAdornment>
+                )
              }}
              fullWidth
              variant="outlined"
@@ -364,7 +449,9 @@ const MqttSettings: FC = () => {
              name="publish_time_solar"
              label={LL.MQTT_INT_SOLAR()}
              InputProps={{
-                endAdornment: <InputAdornment position="end">{LL.SECONDS()}</InputAdornment>
+                endAdornment: (
+                  <InputAdornment position="end">{LL.SECONDS()}</InputAdornment>
+                )
              }}
              fullWidth
              variant="outlined"
@@ -379,7 +466,9 @@ const MqttSettings: FC = () => {
              name="publish_time_mixer"
              label={LL.MQTT_INT_MIXER()}
              InputProps={{
-                endAdornment: <InputAdornment position="end">{LL.SECONDS()}</InputAdornment>
+                endAdornment: (
+                  <InputAdornment position="end">{LL.SECONDS()}</InputAdornment>
+                )
              }}
              fullWidth
              variant="outlined"
@@ -394,7 +483,9 @@ const MqttSettings: FC = () => {
              name="publish_time_water"
              label={LL.MQTT_INT_WATER()}
              InputProps={{
-                endAdornment: <InputAdornment position="end">{LL.SECONDS()}</InputAdornment>
+                endAdornment: (
+                  <InputAdornment position="end">{LL.SECONDS()}</InputAdornment>
+                )
              }}
              fullWidth
              variant="outlined"
@@ -409,7 +500,9 @@ const MqttSettings: FC = () => {
              name="publish_time_sensor"
              label={LL.TEMP_SENSORS()}
              InputProps={{
-                endAdornment: <InputAdornment position="end">{LL.SECONDS()}</InputAdornment>
+                endAdornment: (
+                  <InputAdornment position="end">{LL.SECONDS()}</InputAdornment>
+                )
              }}
              fullWidth
              variant="outlined"
@@ -423,7 +516,9 @@ const MqttSettings: FC = () => {
            <TextField
              name="publish_time_other"
              InputProps={{
-                endAdornment: <InputAdornment position="end">{LL.SECONDS()}</InputAdornment>
+                endAdornment: (
+                  <InputAdornment position="end">{LL.SECONDS()}</InputAdornment>
+                )
              }}
              label={LL.DEFAULT(0)}
              fullWidth
--- a/interface/src/framework/mqtt/MqttStatus.tsx
+++ b/interface/src/framework/mqtt/MqttStatus.tsx
@@ -5,7 +5,16 @@ import DeviceHubIcon from '@mui/icons-material/DeviceHub';
 import RefreshIcon from '@mui/icons-material/Refresh';
 import ReportIcon from '@mui/icons-material/Report';
 import SpeakerNotesOffIcon from '@mui/icons-material/SpeakerNotesOff';
-import { Avatar, Button, Divider, List, ListItem, ListItemAvatar, ListItemText, useTheme } from '@mui/material';
+import {
+  Avatar,
+  Button,
+  Divider,
+  List,
+  ListItem,
+  ListItemAvatar,
+  ListItemText,
+  useTheme
+} from '@mui/material';
 import type { Theme } from '@mui/material';

 import * as MqttApi from 'api/mqtt';
@@ -16,7 +25,10 @@ import { useI18nContext } from 'i18n/i18n-react';
 import type { MqttStatusType } from 'types';
 import { MqttDisconnectReason } from 'types';

-export const mqttStatusHighlight = ({ enabled, connected }: MqttStatusType, theme: Theme) => {
+export const mqttStatusHighlight = (
+  { enabled, connected }: MqttStatusType,
+  theme: Theme
+) => {
  if (!enabled) {
    return theme.palette.info.main;
  }
@@ -26,14 +38,20 @@ export const mqttStatusHighlight = ({ enabled, connected }: MqttStatusType, them
  return theme.palette.error.main;
 };

-export const mqttPublishHighlight = ({ mqtt_fails }: MqttStatusType, theme: Theme) => {
+export const mqttPublishHighlight = (
+  { mqtt_fails }: MqttStatusType,
+  theme: Theme
+) => {
  if (mqtt_fails === 0) return theme.palette.success.main;
  if (mqtt_fails < 10) return theme.palette.warning.main;

  return theme.palette.error.main;
 };

-export const mqttQueueHighlight = ({ mqtt_queued }: MqttStatusType, theme: Theme) => {
+export const mqttQueueHighlight = (
+  { mqtt_queued }: MqttStatusType,
+  theme: Theme
+) => {
  if (mqtt_queued <= 1) return theme.palette.success.main;

  return theme.palette.warning.main;
@@ -92,7 +110,10 @@ const MqttStatus: FC = () => {
                  <ReportIcon />
                </Avatar>
              </ListItemAvatar>
-              <ListItemText primary={LL.DISCONNECT_REASON()} secondary={disconnectReason(data)} />
+              <ListItemText
+                primary={LL.DISCONNECT_REASON()}
+                secondary={disconnectReason(data)}
+              />
            </ListItem>
            <Divider variant="inset" component="li" />
          </>
@@ -140,7 +161,12 @@ const MqttStatus: FC = () => {
          {data.enabled && renderConnectionStatus()}
        </List>
        <ButtonRow>
-          <Button startIcon={<RefreshIcon />} variant="outlined" color="secondary" onClick={loadData}>
+          <Button
+            startIcon={<RefreshIcon />}
+            variant="outlined"
+            color="secondary"
+            onClick={loadData}
+          >
            {LL.REFRESH()}
          </Button>
        </ButtonRow>
--- a/interface/src/framework/network/NetworkSettings.tsx
+++ b/interface/src/framework/network/NetworkSettings.tsx
@@ -99,7 +99,12 @@ const NetworkSettings: FC = () => {
    }
  }, [initialized, setInitialized, data, selectedNetwork]);

-  const updateFormValue = updateValueDirty(origData, dirtyFlags, setDirtyFlags, updateDataValue);
+  const updateFormValue = updateValueDirty(
+    origData,
+    dirtyFlags,
+    setDirtyFlags,
+    updateDataValue
+  );

  const [fieldErrors, setFieldErrors] = useState<ValidateFieldsError>();

@@ -142,7 +147,9 @@ const NetworkSettings: FC = () => {
          <List>
            <ListItem>
              <ListItemAvatar>
-                <Avatar>{isNetworkOpen(selectedNetwork) ? <LockOpenIcon /> : <LockIcon />}</Avatar>
+                <Avatar>
+                  {isNetworkOpen(selectedNetwork) ? <LockOpenIcon /> : <LockIcon />}
+                </Avatar>
              </ListItemAvatar>
              <ListItemText
                primary={selectedNetwork.ssid}
@@ -220,11 +227,23 @@ const NetworkSettings: FC = () => {
          <MenuItem value={8}>2 dBm</MenuItem>
        </TextField>
        <BlockFormControlLabel
-          control={<Checkbox name="nosleep" checked={data.nosleep} onChange={updateFormValue} />}
+          control={
+            <Checkbox
+              name="nosleep"
+              checked={data.nosleep}
+              onChange={updateFormValue}
+            />
+          }
          label={LL.NETWORK_DISABLE_SLEEP()}
        />
        <BlockFormControlLabel
-          control={<Checkbox name="bandwidth20" checked={data.bandwidth20} onChange={updateFormValue} />}
+          control={
+            <Checkbox
+              name="bandwidth20"
+              checked={data.bandwidth20}
+              onChange={updateFormValue}
+            />
+          }
          label={LL.NETWORK_LOW_BAND()}
        />
        <Typography sx={{ pt: 2 }} variant="h6" color="primary">
@@ -241,11 +260,23 @@ const NetworkSettings: FC = () => {
          margin="normal"
        />
        <BlockFormControlLabel
-          control={<Checkbox name="enableMDNS" checked={data.enableMDNS} onChange={updateFormValue} />}
+          control={
+            <Checkbox
+              name="enableMDNS"
+              checked={data.enableMDNS}
+              onChange={updateFormValue}
+            />
+          }
          label={LL.NETWORK_USE_DNS()}
        />
        <BlockFormControlLabel
-          control={<Checkbox name="enableCORS" checked={data.enableCORS} onChange={updateFormValue} />}
+          control={
+            <Checkbox
+              name="enableCORS"
+              checked={data.enableCORS}
+              onChange={updateFormValue}
+            />
+          }
          label={LL.NETWORK_ENABLE_CORS()}
        />
        {data.enableCORS && (
@@ -261,12 +292,24 @@ const NetworkSettings: FC = () => {
        )}
        {data.enableIPv6 !== undefined && (
          <BlockFormControlLabel
-            control={<Checkbox name="enableIPv6" checked={data.enableIPv6} onChange={updateFormValue} />}
+            control={
+              <Checkbox
+                name="enableIPv6"
+                checked={data.enableIPv6}
+                onChange={updateFormValue}
+              />
+            }
            label={LL.NETWORK_ENABLE_IPV6()}
          />
        )}
        <BlockFormControlLabel
-          control={<Checkbox name="static_ip_config" checked={data.static_ip_config} onChange={updateFormValue} />}
+          control={
+            <Checkbox
+              name="static_ip_config"
+              checked={data.static_ip_config}
+              onChange={updateFormValue}
+            />
+          }
          label={LL.NETWORK_FIXED_IP()}
        />
        {data.static_ip_config && (
@@ -325,36 +368,42 @@ const NetworkSettings: FC = () => {
        )}
        {restartNeeded && (
          <MessageBox my={2} level="warning" message={LL.RESTART_TEXT(0)}>
-            <Button startIcon={<PowerSettingsNewIcon />} variant="contained" color="error" onClick={restart}>
+            <Button
+              startIcon={<PowerSettingsNewIcon />}
+              variant="contained"
+              color="error"
+              onClick={restart}
+            >
              {LL.RESTART()}
            </Button>
          </MessageBox>
        )}

-        {!restartNeeded && (selectedNetwork || (dirtyFlags && dirtyFlags.length !== 0)) && (
-          <ButtonRow>
-            <Button
-              startIcon={<CancelIcon />}
-              disabled={saving}
-              variant="outlined"
-              color="primary"
-              type="submit"
-              onClick={loadData}
-            >
-              {LL.CANCEL()}
-            </Button>
-            <Button
-              startIcon={<WarningIcon color="warning" />}
-              disabled={saving}
-              variant="contained"
-              color="info"
-              type="submit"
-              onClick={validateAndSubmit}
-            >
-              {LL.APPLY_CHANGES(dirtyFlags.length)}
-            </Button>
-          </ButtonRow>
-        )}
+        {!restartNeeded &&
+          (selectedNetwork || (dirtyFlags && dirtyFlags.length !== 0)) && (
+            <ButtonRow>
+              <Button
+                startIcon={<CancelIcon />}
+                disabled={saving}
+                variant="outlined"
+                color="primary"
+                type="submit"
+                onClick={loadData}
+              >
+                {LL.CANCEL()}
+              </Button>
+              <Button
+                startIcon={<WarningIcon color="warning" />}
+                disabled={saving}
+                variant="contained"
+                color="info"
+                type="submit"
+                onClick={validateAndSubmit}
+              >
+                {LL.APPLY_CHANGES(dirtyFlags.length)}
+              </Button>
+            </ButtonRow>
+          )}
      </>
    );
  };
--- a/interface/src/framework/network/NetworkStatus.tsx
+++ b/interface/src/framework/network/NetworkStatus.tsx
@@ -8,7 +8,16 @@ import RouterIcon from '@mui/icons-material/Router';
 import SettingsInputAntennaIcon from '@mui/icons-material/SettingsInputAntenna';
 import SettingsInputComponentIcon from '@mui/icons-material/SettingsInputComponent';
 import WifiIcon from '@mui/icons-material/Wifi';
-import { Avatar, Button, Divider, List, ListItem, ListItemAvatar, ListItemText, useTheme } from '@mui/material';
+import {
+  Avatar,
+  Button,
+  Divider,
+  List,
+  ListItem,
+  ListItemAvatar,
+  ListItemText,
+  useTheme
+} from '@mui/material';
 import type { Theme } from '@mui/material';

 import * as NetworkApi from 'api/network';
@@ -49,7 +58,8 @@ const networkQualityHighlight = ({ rssi }: NetworkStatusType, theme: Theme) => {
  return theme.palette.success.main;
 };

-export const isWiFi = ({ status }: NetworkStatusType) => status === NetworkConnectionStatus.WIFI_STATUS_CONNECTED;
+export const isWiFi = ({ status }: NetworkStatusType) =>
+  status === NetworkConnectionStatus.WIFI_STATUS_CONNECTED;
 export const isEthernet = ({ status }: NetworkStatusType) =>
  status === NetworkConnectionStatus.ETHERNET_STATUS_CONNECTED;

@@ -61,7 +71,10 @@ const dnsServers = ({ dns_ip_1, dns_ip_2 }: NetworkStatusType) => {
 };

 const IPs = (status: NetworkStatusType) => {
-  if (!status.local_ipv6 || status.local_ipv6 === '0000:0000:0000:0000:0000:0000:0000:0000') {
+  if (
+    !status.local_ipv6 ||
+    status.local_ipv6 === '0000:0000:0000:0000:0000:0000:0000:0000'
+  ) {
    return status.local_ip;
  }
  if (!status.local_ip || status.local_ip === '0.0.0.0') {
@@ -71,7 +84,11 @@ const IPs = (status: NetworkStatusType) => {
 };

 const NetworkStatus: FC = () => {
-  const { data: data, send: loadData, error } = useRequest(NetworkApi.readNetworkStatus);
+  const {
+    data: data,
+    send: loadData,
+    error
+  } = useRequest(NetworkApi.readNetworkStatus);

  const { LL } = useI18nContext();

@@ -135,7 +152,10 @@ const NetworkStatus: FC = () => {
                    <SettingsInputAntennaIcon />
                  </Avatar>
                </ListItemAvatar>
-                <ListItemText primary="SSID (RSSI)" secondary={data.ssid + ' (' + data.rssi + ' dBm)'} />
+                <ListItemText
+                  primary="SSID (RSSI)"
+                  secondary={data.ssid + ' (' + data.rssi + ' dBm)'}
+                />
              </ListItem>
              <Divider variant="inset" component="li" />
            </>
@@ -155,14 +175,20 @@ const NetworkStatus: FC = () => {
                    <DeviceHubIcon />
                  </Avatar>
                </ListItemAvatar>
-                <ListItemText primary={LL.ADDRESS_OF('MAC')} secondary={data.mac_address} />
+                <ListItemText
+                  primary={LL.ADDRESS_OF('MAC')}
+                  secondary={data.mac_address}
+                />
              </ListItem>
              <Divider variant="inset" component="li" />
              <ListItem>
                <ListItemAvatar>
                  <Avatar>#</Avatar>
                </ListItemAvatar>
-                <ListItemText primary={LL.NETWORK_SUBNET()} secondary={data.subnet_mask} />
+                <ListItemText
+                  primary={LL.NETWORK_SUBNET()}
+                  secondary={data.subnet_mask}
+                />
              </ListItem>
              <Divider variant="inset" component="li" />
              <ListItem>
@@ -171,7 +197,10 @@ const NetworkStatus: FC = () => {
                    <SettingsInputComponentIcon />
                  </Avatar>
                </ListItemAvatar>
-                <ListItemText primary={LL.NETWORK_GATEWAY()} secondary={data.gateway_ip || 'none'} />
+                <ListItemText
+                  primary={LL.NETWORK_GATEWAY()}
+                  secondary={data.gateway_ip || 'none'}
+                />
              </ListItem>
              <Divider variant="inset" component="li" />
              <ListItem>
@@ -180,14 +209,22 @@ const NetworkStatus: FC = () => {
                    <DnsIcon />
                  </Avatar>
                </ListItemAvatar>
-                <ListItemText primary={LL.NETWORK_DNS()} secondary={dnsServers(data)} />
+                <ListItemText
+                  primary={LL.NETWORK_DNS()}
+                  secondary={dnsServers(data)}
+                />
              </ListItem>
              <Divider variant="inset" component="li" />
            </>
          )}
        </List>
        <ButtonRow>
-          <Button startIcon={<RefreshIcon />} variant="outlined" color="secondary" onClick={loadData}>
+          <Button
+            startIcon={<RefreshIcon />}
+            variant="outlined"
+            color="secondary"
+            onClick={loadData}
+          >
            {LL.REFRESH()}
          </Button>
        </ButtonRow>
--- a/interface/src/framework/network/WiFiConnectionContext.tsx
+++ b/interface/src/framework/network/WiFiConnectionContext.tsx
@@ -9,4 +9,6 @@ export interface WiFiConnectionContextValue {
 }

 const WiFiConnectionContextDefaultValue = {} as WiFiConnectionContextValue;
-export const WiFiConnectionContext = createContext(WiFiConnectionContextDefaultValue);
+export const WiFiConnectionContext = createContext(
+  WiFiConnectionContextDefaultValue
+);
--- a/interface/src/framework/network/WiFiNetworkScanner.tsx
+++ b/interface/src/framework/network/WiFiNetworkScanner.tsx
@@ -20,7 +20,9 @@ const WiFiNetworkScanner: FC = () => {
  const { LL } = useI18nContext();
  const [errorMessage, setErrorMessage] = useState<string>();

-  const { send: scanNetworks, onComplete: onCompleteScanNetworks } = useRequest(NetworkApi.scanNetworks); // is called on page load to start network scan
+  const { send: scanNetworks, onComplete: onCompleteScanNetworks } = useRequest(
+    NetworkApi.scanNetworks
+  ); // is called on page load to start network scan
  const {
    data: networkList,
    send: getNetworkList,
@@ -51,7 +53,9 @@ const WiFiNetworkScanner: FC = () => {

  const renderNetworkScanner = () => {
    if (!networkList) {
-      return <FormLoader message={LL.SCANNING() + '...'} errorMessage={errorMessage} />;
+      return (
+        <FormLoader message={LL.SCANNING() + '...'} errorMessage={errorMessage} />
+      );
    }
    return <WiFiNetworkSelector networkList={networkList} />;
  };
--- a/interface/src/framework/network/WiFiNetworkSelector.tsx
+++ b/interface/src/framework/network/WiFiNetworkSelector.tsx
@@ -4,7 +4,16 @@ import type { FC } from 'react';
 import LockIcon from '@mui/icons-material/Lock';
 import LockOpenIcon from '@mui/icons-material/LockOpen';
 import WifiIcon from '@mui/icons-material/Wifi';
-import { Avatar, Badge, List, ListItem, ListItemAvatar, ListItemIcon, ListItemText, useTheme } from '@mui/material';
+import {
+  Avatar,
+  Badge,
+  List,
+  ListItem,
+  ListItemAvatar,
+  ListItemIcon,
+  ListItemText,
+  useTheme
+} from '@mui/material';
 import type { Theme } from '@mui/material';

 import { MessageBox } from 'components';
@@ -60,14 +69,22 @@ const WiFiNetworkSelector: FC<WiFiNetworkSelectorProps> = ({ networkList }) => {
  const wifiConnectionContext = useContext(WiFiConnectionContext);

  const renderNetwork = (network: WiFiNetwork) => (
-    <ListItem key={network.bssid} onClick={() => wifiConnectionContext.selectNetwork(network)}>
+    <ListItem
+      key={network.bssid}
+      onClick={() => wifiConnectionContext.selectNetwork(network)}
+    >
      <ListItemAvatar>
        <Avatar>{isNetworkOpen(network) ? <LockOpenIcon /> : <LockIcon />}</Avatar>
      </ListItemAvatar>
      <ListItemText
        primary={network.ssid}
        secondary={
-          'Security: ' + networkSecurityMode(network) + ', Ch: ' + network.channel + ', bssid: ' + network.bssid
+          'Security: ' +
+          networkSecurityMode(network) +
+          ', Ch: ' +
+          network.channel +
+          ', bssid: ' +
+          network.bssid
        }
      />
      <ListItemIcon>
--- a/interface/src/framework/ntp/NTPSettings.tsx
+++ b/interface/src/framework/ntp/NTPSettings.tsx
@@ -44,7 +44,12 @@ const NTPSettings: FC = () => {

  const { LL } = useI18nContext();

-  const updateFormValue = updateValueDirty(origData, dirtyFlags, setDirtyFlags, updateDataValue);
+  const updateFormValue = updateValueDirty(
+    origData,
+    dirtyFlags,
+    setDirtyFlags,
+    updateDataValue
+  );

  const [fieldErrors, setFieldErrors] = useState<ValidateFieldsError>();

@@ -76,7 +81,13 @@ const NTPSettings: FC = () => {
    return (
      <>
        <BlockFormControlLabel
-          control={<Checkbox name="enabled" checked={data.enabled} onChange={updateFormValue} />}
+          control={
+            <Checkbox
+              name="enabled"
+              checked={data.enabled}
+              onChange={updateFormValue}
+            />
+          }
          label={LL.ENABLE_NTP()}
        />
        <ValidatedTextField
--- a/interface/src/framework/ntp/NTPStatus.tsx
+++ b/interface/src/framework/ntp/NTPStatus.tsx
@@ -46,14 +46,19 @@ const NTPStatus: FC = () => {

  const { LL } = useI18nContext();

-  const { send: updateTime } = useRequest((local_time: Time) => NTPApi.updateTime(local_time), {
-    immediate: false
-  });
+  const { send: updateTime } = useRequest(
+    (local_time: Time) => NTPApi.updateTime(local_time),
+    {
+      immediate: false
+    }
+  );

  NTPApi.updateTime;

-  const isNtpActive = ({ status }: NTPStatusType) => status === NTPSyncStatus.NTP_ACTIVE;
-  const isNtpEnabled = ({ status }: NTPStatusType) => status !== NTPSyncStatus.NTP_DISABLED;
+  const isNtpActive = ({ status }: NTPStatusType) =>
+    status === NTPSyncStatus.NTP_ACTIVE;
+  const isNtpEnabled = ({ status }: NTPStatusType) =>
+    status !== NTPSyncStatus.NTP_DISABLED;

  const ntpStatusHighlight = ({ status }: NTPStatusType, theme: Theme) => {
    switch (status) {
@@ -68,7 +73,8 @@ const NTPStatus: FC = () => {
    }
  };

-  const updateLocalTime = (event: React.ChangeEvent<HTMLInputElement>) => setLocalTime(event.target.value);
+  const updateLocalTime = (event: React.ChangeEvent<HTMLInputElement>) =>
+    setLocalTime(event.target.value);

  const openSetTime = () => {
    setLocalTime(formatLocalDateTime(new Date()));
@@ -108,7 +114,11 @@ const NTPStatus: FC = () => {
  };

  const renderSetTimeDialog = () => (
-    <Dialog sx={dialogStyle} open={settingTime} onClose={() => setSettingTime(false)}>
+    <Dialog
+      sx={dialogStyle}
+      open={settingTime}
+      onClose={() => setSettingTime(false)}
+    >
      <DialogTitle>{LL.SET_TIME(1)}</DialogTitle>
      <DialogContent dividers>
        <Box color="warning.main" p={0} pl={0} pr={0} mt={0} mb={2}>
@@ -127,7 +137,12 @@ const NTPStatus: FC = () => {
        />
      </DialogContent>
      <DialogActions>
-        <Button startIcon={<CancelIcon />} variant="outlined" onClick={() => setSettingTime(false)} color="secondary">
+        <Button
+          startIcon={<CancelIcon />}
+          variant="outlined"
+          onClick={() => setSettingTime(false)}
+          color="secondary"
+        >
          {LL.CANCEL()}
        </Button>
        <Button
@@ -179,7 +194,10 @@ const NTPStatus: FC = () => {
                <AccessTimeIcon />
              </Avatar>
            </ListItemAvatar>
-            <ListItemText primary={LL.LOCAL_TIME()} secondary={formatDateTime(data.local_time)} />
+            <ListItemText
+              primary={LL.LOCAL_TIME()}
+              secondary={formatDateTime(data.local_time)}
+            />
          </ListItem>
          <Divider variant="inset" component="li" />
          <ListItem>
@@ -188,14 +206,22 @@ const NTPStatus: FC = () => {
                <SwapVerticalCircleIcon />
              </Avatar>
            </ListItemAvatar>
-            <ListItemText primary={LL.UTC_TIME()} secondary={formatDateTime(data.utc_time)} />
+            <ListItemText
+              primary={LL.UTC_TIME()}
+              secondary={formatDateTime(data.utc_time)}
+            />
          </ListItem>
          <Divider variant="inset" component="li" />
        </List>
        <Box display="flex" flexWrap="wrap">
          <Box flexGrow={1}>
            <ButtonRow>
-              <Button startIcon={<RefreshIcon />} variant="outlined" color="secondary" onClick={loadData}>
+              <Button
+                startIcon={<RefreshIcon />}
+                variant="outlined"
+                color="secondary"
+                onClick={loadData}
+              >
                {LL.REFRESH()}
              </Button>
            </ButtonRow>
@@ -203,7 +229,12 @@ const NTPStatus: FC = () => {
          {data && !isNtpActive(data) && (
            <Box flexWrap="nowrap" whiteSpace="nowrap">
              <ButtonRow>
-                <Button onClick={openSetTime} variant="outlined" color="primary" startIcon={<AccessTimeIcon />}>
+                <Button
+                  onClick={openSetTime}
+                  variant="outlined"
+                  color="primary"
+                  startIcon={<AccessTimeIcon />}
+                >
                  {LL.SET_TIME(0)}
                </Button>
              </ButtonRow>
--- a/interface/src/framework/ota/OTASettings.tsx
+++ b/interface/src/framework/ota/OTASettings.tsx
@@ -43,7 +43,12 @@ const OTASettings: FC = () => {

  const { LL } = useI18nContext();

-  const updateFormValue = updateValueDirty(origData, dirtyFlags, setDirtyFlags, updateDataValue);
+  const updateFormValue = updateValueDirty(
+    origData,
+    dirtyFlags,
+    setDirtyFlags,
+    updateDataValue
+  );

  const [fieldErrors, setFieldErrors] = useState<ValidateFieldsError>();

@@ -67,7 +72,13 @@ const OTASettings: FC = () => {
    return (
      <>
        <BlockFormControlLabel
-          control={<Checkbox name="enabled" checked={data.enabled} onChange={updateFormValue} />}
+          control={
+            <Checkbox
+              name="enabled"
+              checked={data.enabled}
+              onChange={updateFormValue}
+            />
+          }
          label={LL.ENABLE_OTA()}
        />
        <ValidatedTextField
--- a/interface/src/framework/security/GenerateToken.tsx
+++ b/interface/src/framework/security/GenerateToken.tsx
@@ -30,9 +30,12 @@ const GenerateToken: FC<GenerateTokenProps> = ({ username, onClose }) => {
  const { LL } = useI18nContext();
  const open = !!username;

-  const { data: token, send: generateToken } = useRequest(SecurityApi.generateToken(username), {
-    immediate: false
-  });
+  const { data: token, send: generateToken } = useRequest(
+    SecurityApi.generateToken(username),
+    {
+      immediate: false
+    }
+  );

  useEffect(() => {
    if (open) {
@@ -41,14 +44,26 @@ const GenerateToken: FC<GenerateTokenProps> = ({ username, onClose }) => {
  }, [open]);

  return (
-    <Dialog sx={dialogStyle} onClose={onClose} open={!!username} fullWidth maxWidth="sm">
+    <Dialog
+      sx={dialogStyle}
+      onClose={onClose}
+      open={!!username}
+      fullWidth
+      maxWidth="sm"
+    >
      <DialogTitle>{LL.ACCESS_TOKEN_FOR() + ' ' + username}</DialogTitle>
      <DialogContent dividers>
        {token ? (
          <>
            <MessageBox message={LL.ACCESS_TOKEN_TEXT()} level="info" my={2} />
            <Box mt={2} mb={2}>
-              <TextField label="Token" multiline value={token.token} fullWidth contentEditable={false} />
+              <TextField
+                label="Token"
+                multiline
+                value={token.token}
+                fullWidth
+                contentEditable={false}
+              />
            </Box>
          </>
        ) : (
@@ -59,7 +74,12 @@ const GenerateToken: FC<GenerateTokenProps> = ({ username, onClose }) => {
        )}
      </DialogContent>
      <DialogActions>
-        <Button startIcon={<CloseIcon />} variant="outlined" onClick={onClose} color="secondary">
+        <Button
+          startIcon={<CloseIcon />}
+          variant="outlined"
+          onClick={onClose}
+          color="secondary"
+        >
          {LL.CLOSE()}
        </Button>
      </DialogActions>
--- a/interface/src/framework/security/ManageUsers.tsx
+++ b/interface/src/framework/security/ManageUsers.tsx
@@ -14,9 +14,23 @@ import { Box, Button, IconButton } from '@mui/material';

 import * as SecurityApi from 'api/security';

-import { Body, Cell, Header, HeaderCell, HeaderRow, Row, Table } from '@table-library/react-table-library/table';
+import {
+  Body,
+  Cell,
+  Header,
+  HeaderCell,
+  HeaderRow,
+  Row,
+  Table
+} from '@table-library/react-table-library/table';
 import { useTheme } from '@table-library/react-table-library/theme';
-import { BlockNavigation, ButtonRow, FormLoader, MessageBox, SectionContent } from 'components';
+import {
+  BlockNavigation,
+  ButtonRow,
+  FormLoader,
+  MessageBox,
+  SectionContent
+} from 'components';
 import { AuthenticatedContext } from 'contexts/authentication';
 import { useI18nContext } from 'i18n/i18n-react';
 import type { SecuritySettingsType, UserType } from 'types';
@@ -27,10 +41,11 @@ import GenerateToken from './GenerateToken';
 import User from './User';

 const ManageUsers: FC = () => {
-  const { loadData, saveData, saving, data, updateDataValue, errorMessage } = useRest<SecuritySettingsType>({
-    read: SecurityApi.readSecuritySettings,
-    update: SecurityApi.updateSecuritySettings
-  });
+  const { loadData, saveData, saving, data, updateDataValue, errorMessage } =
+    useRest<SecuritySettingsType>({
+      read: SecurityApi.readSecuritySettings,
+      update: SecurityApi.updateSecuritySettings
+    });

  const [user, setUser] = useState<UserType>();
  const [creating, setCreating] = useState<boolean>(false);
@@ -114,7 +129,12 @@ const ManageUsers: FC = () => {

    const doneEditingUser = () => {
      if (user) {
-        const users = [...data.users.filter((u: { username: string }) => u.username !== user.username), user];
+        const users = [
+          ...data.users.filter(
+            (u: { username: string }) => u.username !== user.username
+          ),
+          user
+        ];
        updateDataValue({ ...data, users });
        setUser(undefined);
        setChanged(changed + 1);
@@ -148,11 +168,18 @@ const ManageUsers: FC = () => {
    }

    // add id to the type, needed for the table
-    const user_table = data.users.map((u) => ({ ...u, id: u.username })) as UserType2[];
+    const user_table = data.users.map((u) => ({
+      ...u,
+      id: u.username
+    })) as UserType2[];

    return (
      <>
-        <Table data={{ nodes: user_table }} theme={table_theme} layout={{ custom: true }}>
+        <Table
+          data={{ nodes: user_table }}
+          theme={table_theme}
+          layout={{ custom: true }}
+        >
          {(tableList: UserType2[]) => (
            <>
              <Header>
@@ -189,7 +216,9 @@ const ManageUsers: FC = () => {
          )}
        </Table>

-        {noAdminConfigured() && <MessageBox level="warning" message={LL.USER_WARNING()} my={2} />}
+        {noAdminConfigured() && (
+          <MessageBox level="warning" message={LL.USER_WARNING()} my={2} />
+        )}

        <Box display="flex" flexWrap="wrap">
          <Box flexGrow={1} sx={{ '& button': { mt: 2 } }}>
@@ -221,7 +250,12 @@ const ManageUsers: FC = () => {

          <Box flexWrap="nowrap" whiteSpace="nowrap">
            <ButtonRow>
-              <Button startIcon={<PersonAddIcon />} variant="outlined" color="secondary" onClick={createUser}>
+              <Button
+                startIcon={<PersonAddIcon />}
+                variant="outlined"
+                color="secondary"
+                onClick={createUser}
+              >
                {LL.ADD(0)}
              </Button>
            </ButtonRow>
--- a/interface/src/framework/security/SecuritySettings.tsx
+++ b/interface/src/framework/security/SecuritySettings.tsx
@@ -8,7 +8,14 @@ import { Button } from '@mui/material';
 import * as SecurityApi from 'api/security';

 import type { ValidateFieldsError } from 'async-validator';
-import { BlockNavigation, ButtonRow, FormLoader, MessageBox, SectionContent, ValidatedPasswordField } from 'components';
+import {
+  BlockNavigation,
+  ButtonRow,
+  FormLoader,
+  MessageBox,
+  SectionContent,
+  ValidatedPasswordField
+} from 'components';
 import { AuthenticatedContext } from 'contexts/authentication';
 import { useI18nContext } from 'i18n/i18n-react';
 import type { SecuritySettingsType } from 'types';
@@ -37,7 +44,12 @@ const SecuritySettings: FC = () => {

  const authenticatedContext = useContext(AuthenticatedContext);

-  const updateFormValue = updateValueDirty(origData, dirtyFlags, setDirtyFlags, updateDataValue);
+  const updateFormValue = updateValueDirty(
+    origData,
+    dirtyFlags,
+    setDirtyFlags,
+    updateDataValue
+  );

  const content = () => {
    if (!data) {
--- a/interface/src/framework/security/User.tsx
+++ b/interface/src/framework/security/User.tsx
@@ -4,12 +4,23 @@ import type { FC } from 'react';
 import CancelIcon from '@mui/icons-material/Cancel';
 import PersonAddIcon from '@mui/icons-material/PersonAdd';
 import SaveIcon from '@mui/icons-material/Save';
-import { Button, Checkbox, Dialog, DialogActions, DialogContent, DialogTitle } from '@mui/material';
+import {
+  Button,
+  Checkbox,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle
+} from '@mui/material';

 import { dialogStyle } from 'CustomTheme';
 import type Schema from 'async-validator';
 import type { ValidateFieldsError } from 'async-validator';
-import { BlockFormControlLabel, ValidatedPasswordField, ValidatedTextField } from 'components';
+import {
+  BlockFormControlLabel,
+  ValidatedPasswordField,
+  ValidatedTextField
+} from 'components';
 import { useI18nContext } from 'i18n/i18n-react';
 import type { UserType } from 'types';
 import { updateValue } from 'utils';
@@ -26,7 +37,14 @@ interface UserFormProps {
  onCancelEditing: () => void;
 }

-const User: FC<UserFormProps> = ({ creating, validator, user, setUser, onDoneEditing, onCancelEditing }) => {
+const User: FC<UserFormProps> = ({
+  creating,
+  validator,
+  user,
+  setUser,
+  onDoneEditing,
+  onCancelEditing
+}) => {
  const { LL } = useI18nContext();

  const updateFormValue = updateValue(setUser);
@@ -52,7 +70,13 @@ const User: FC<UserFormProps> = ({ creating, validator, user, setUser, onDoneEdi
  };

  return (
-    <Dialog sx={dialogStyle} onClose={onCancelEditing} open={!!user} fullWidth maxWidth="sm">
+    <Dialog
+      sx={dialogStyle}
+      onClose={onCancelEditing}
+      open={!!user}
+      fullWidth
+      maxWidth="sm"
+    >
      {user && (
        <>
          <DialogTitle id="user-form-dialog-title">
@@ -81,12 +105,23 @@ const User: FC<UserFormProps> = ({ creating, validator, user, setUser, onDoneEdi
              margin="normal"
            />
            <BlockFormControlLabel
-              control={<Checkbox name="admin" checked={user.admin} onChange={updateFormValue} />}
+              control={
+                <Checkbox
+                  name="admin"
+                  checked={user.admin}
+                  onChange={updateFormValue}
+                />
+              }
              label={LL.IS_ADMIN(1)}
            />
          </DialogContent>
          <DialogActions>
-            <Button startIcon={<CancelIcon />} variant="outlined" onClick={onCancelEditing} color="secondary">
+            <Button
+              startIcon={<CancelIcon />}
+              variant="outlined"
+              onClick={onCancelEditing}
+              color="secondary"
+            >
              {LL.CANCEL()}
            </Button>
            <Button
--- a/interface/src/framework/system/ESPSystemStatus.tsx
+++ b/interface/src/framework/system/ESPSystemStatus.tsx
@@ -8,7 +8,16 @@ import MemoryIcon from '@mui/icons-material/Memory';
 import RefreshIcon from '@mui/icons-material/Refresh';
 import SdCardAlertIcon from '@mui/icons-material/SdCardAlert';
 import SdStorageIcon from '@mui/icons-material/SdStorage';
-import { Avatar, Box, Button, Divider, List, ListItem, ListItemAvatar, ListItemText } from '@mui/material';
+import {
+  Avatar,
+  Box,
+  Button,
+  Divider,
+  List,
+  ListItem,
+  ListItemAvatar,
+  ListItemText
+} from '@mui/material';

 import * as SystemApi from 'api/system';

@@ -25,7 +34,11 @@ const ESPSystemStatus: FC = () => {

  useLayoutTitle(LL.STATUS_OF('ESP32'));

-  const { data: data, send: loadData, error } = useRequest(SystemApi.readESPSystemStatus, { force: true });
+  const {
+    data: data,
+    send: loadData,
+    error
+  } = useRequest(SystemApi.readESPSystemStatus, { force: true });

  const content = () => {
    if (!data) {
@@ -41,7 +54,10 @@ const ESPSystemStatus: FC = () => {
                <DevicesIcon />
              </Avatar>
            </ListItemAvatar>
-            <ListItemText primary="SDK" secondary={data.arduino_version + ' / ESP-IDF ' + data.sdk_version} />
+            <ListItemText
+              primary="SDK"
+              secondary={data.arduino_version + ' / ESP-IDF ' + data.sdk_version}
+            />
          </ListItem>
          <Divider variant="inset" component="li" />
          <ListItem>
@@ -75,7 +91,12 @@ const ESPSystemStatus: FC = () => {
            </ListItemAvatar>
            <ListItemText
              primary={LL.HEAP()}
-              secondary={formatNumber(data.free_heap) + ' KB / ' + formatNumber(data.max_alloc_heap) + ' KB '}
+              secondary={
+                formatNumber(data.free_heap) +
+                ' KB / ' +
+                formatNumber(data.max_alloc_heap) +
+                ' KB '
+              }
            />
          </ListItem>
          {data.psram_size !== undefined && data.free_psram !== undefined && (
@@ -89,7 +110,12 @@ const ESPSystemStatus: FC = () => {
                </ListItemAvatar>
                <ListItemText
                  primary={LL.PSRAM()}
-                  secondary={formatNumber(data.psram_size) + ' KB / ' + formatNumber(data.free_psram) + ' KB'}
+                  secondary={
+                    formatNumber(data.psram_size) +
+                    ' KB / ' +
+                    formatNumber(data.free_psram) +
+                    ' KB'
+                  }
                />
              </ListItem>
            </>
@@ -104,7 +130,10 @@ const ESPSystemStatus: FC = () => {
            <ListItemText
              primary={LL.FLASH()}
              secondary={
-                formatNumber(data.flash_chip_size) + ' KB / ' + (data.flash_chip_speed / 1000000).toFixed(0) + ' MHz'
+                formatNumber(data.flash_chip_size) +
+                ' KB / ' +
+                (data.flash_chip_speed / 1000000).toFixed(0) +
+                ' MHz'
              }
            />
          </ListItem>
@@ -118,7 +147,12 @@ const ESPSystemStatus: FC = () => {
            <ListItemText
              primary={LL.APPSIZE()}
              secondary={
-                data.partition + ': ' + formatNumber(data.app_used) + ' KB / ' + formatNumber(data.app_free) + ' KB'
+                data.partition +
+                ': ' +
+                formatNumber(data.app_used) +
+                ' KB / ' +
+                formatNumber(data.app_free) +
+                ' KB'
              }
            />
          </ListItem>
@@ -131,7 +165,12 @@ const ESPSystemStatus: FC = () => {
            </ListItemAvatar>
            <ListItemText
              primary={LL.FILESYSTEM()}
-              secondary={formatNumber(data.fs_used) + ' KB / ' + formatNumber(data.fs_free) + ' KB'}
+              secondary={
+                formatNumber(data.fs_used) +
+                ' KB / ' +
+                formatNumber(data.fs_free) +
+                ' KB'
+              }
            />
          </ListItem>
          <Divider variant="inset" component="li" />
@@ -139,7 +178,12 @@ const ESPSystemStatus: FC = () => {
        <Box display="flex" flexWrap="wrap">
          <Box flexGrow={1} sx={{ '& button': { mt: 2 } }}>
            <ButtonRow>
-              <Button startIcon={<RefreshIcon />} variant="outlined" color="secondary" onClick={loadData}>
+              <Button
+                startIcon={<RefreshIcon />}
+                variant="outlined"
+                color="secondary"
+                onClick={loadData}
+              >
                {LL.REFRESH()}
              </Button>
            </ButtonRow>
--- a/interface/src/framework/system/RestartMonitor.tsx
+++ b/interface/src/framework/system/RestartMonitor.tsx
@@ -36,7 +36,12 @@ const RestartMonitor: FC = () => {

  useEffect(() => () => timeoutId && clearTimeout(timeoutId), [timeoutId]);

-  return <FormLoader message={LL.APPLICATION_RESTARTING() + '...'} errorMessage={failed ? 'Timed out' : undefined} />;
+  return (
+    <FormLoader
+      message={LL.APPLICATION_RESTARTING() + '...'}
+      errorMessage={failed ? 'Timed out' : undefined}
+    />
+  );
 };

 export default RestartMonitor;
--- a/interface/src/framework/system/System.tsx
+++ b/interface/src/framework/system/System.tsx
@@ -24,7 +24,11 @@ const System: FC = () => {
      <RouterTabs value={routerTab}>
        <Tab value="status" label={LL.STATUS_OF('')} />
        <Tab value="activity" label={LL.ACTIVITY()} />
-        <Tab disabled={!me.admin} value="log" label={me.admin ? LL.LOG_OF('') : ''} />
+        <Tab
+          disabled={!me.admin}
+          value="log"
+          label={me.admin ? LL.LOG_OF('') : ''}
+        />
      </RouterTabs>
      <Routes>
        <Route path="status" element={<SystemStatus />} />
--- a/interface/src/framework/system/SystemLog.tsx
+++ b/interface/src/framework/system/SystemLog.tsx
@@ -4,14 +4,28 @@ import { toast } from 'react-toastify';

 import DownloadIcon from '@mui/icons-material/GetApp';
 import WarningIcon from '@mui/icons-material/Warning';
-import { Box, Button, Checkbox, Grid, MenuItem, TextField, styled } from '@mui/material';
+import {
+  Box,
+  Button,
+  Checkbox,
+  Grid,
+  MenuItem,
+  TextField,
+  styled
+} from '@mui/material';

 import * as SystemApi from 'api/system';
 import { fetchLogES } from 'api/system';

 import { useSSE } from '@alova/scene-react';
 import { useRequest } from 'alova';
-import { BlockFormControlLabel, BlockNavigation, FormLoader, SectionContent, useLayoutTitle } from 'components';
+import {
+  BlockFormControlLabel,
+  BlockNavigation,
+  FormLoader,
+  SectionContent,
+  useLayoutTitle
+} from 'components';
 import { useI18nContext } from 'i18n/i18n-react';
 import type { LogEntry, LogSettings } from 'types';
 import { LogLevel } from 'types';
@@ -25,8 +39,10 @@ const LogEntryLine = styled('div')(() => ({
  whiteSpace: 'nowrap'
 }));

-const topOffset = () => document.getElementById('log-window')?.getBoundingClientRect().bottom || 0;
-const leftOffset = () => document.getElementById('log-window')?.getBoundingClientRect().left || 0;
+const topOffset = () =>
+  document.getElementById('log-window')?.getBoundingClientRect().bottom || 0;
+const leftOffset = () =>
+  document.getElementById('log-window')?.getBoundingClientRect().left || 0;

 const levelLabel = (level: LogLevel) => {
  switch (level) {
@@ -50,16 +66,30 @@ const SystemLog: FC = () => {

  useLayoutTitle(LL.LOG_OF(''));

-  const { loadData, data, updateDataValue, origData, dirtyFlags, setDirtyFlags, blocker, saveData, errorMessage } =
-    useRest<LogSettings>({
-      read: SystemApi.readLogSettings,
-      update: SystemApi.updateLogSettings
-    });
+  const {
+    loadData,
+    data,
+    updateDataValue,
+    origData,
+    dirtyFlags,
+    setDirtyFlags,
+    blocker,
+    saveData,
+    errorMessage
+  } = useRest<LogSettings>({
+    read: SystemApi.readLogSettings,
+    update: SystemApi.updateLogSettings
+  });

  const [logEntries, setLogEntries] = useState<LogEntry[]>([]);
  const [lastIndex, setLastIndex] = useState<number>(0);

-  const updateFormValue = updateValueDirty(origData, dirtyFlags, setDirtyFlags, updateDataValue);
+  const updateFormValue = updateValueDirty(
+    origData,
+    dirtyFlags,
+    setDirtyFlags,
+    updateDataValue
+  );

  // eslint-disable-next-line @typescript-eslint/unbound-method
  const { onMessage, onError } = useSSE(fetchLogES, {
@@ -102,10 +132,14 @@ const SystemLog: FC = () => {
  const onDownload = () => {
    let result = '';
    for (const i of logEntries) {
-      result += i.t + ' ' + levelLabel(i.l) + ' ' + i.i + ': [' + i.n + '] ' + i.m + '\n';
+      result +=
+        i.t + ' ' + levelLabel(i.l) + ' ' + i.i + ': [' + i.n + '] ' + i.m + '\n';
    }
    const a = document.createElement('a');
-    a.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(result));
+    a.setAttribute(
+      'href',
+      'data:text/plain;charset=utf-8,' + encodeURIComponent(result)
+    );
    a.setAttribute('download', 'log.txt');
    document.body.appendChild(a);
    a.click();
@@ -134,7 +168,13 @@ const SystemLog: FC = () => {

    return (
      <>
-        <Grid container spacing={3} direction="row" justifyContent="flex-start" alignItems="center">
+        <Grid
+          container
+          spacing={3}
+          direction="row"
+          justifyContent="flex-start"
+          alignItems="center"
+        >
          <Grid item xs={2}>
            <TextField
              name="level"
@@ -173,7 +213,13 @@ const SystemLog: FC = () => {
          </Grid>
          <Grid item>
            <BlockFormControlLabel
-              control={<Checkbox checked={data.compact} onChange={updateFormValue} name="compact" />}
+              control={
+                <Checkbox
+                  checked={data.compact}
+                  onChange={updateFormValue}
+                  name="compact"
+                />
+              }
              label={LL.COMPACT()}
            />
          </Grid>
@@ -185,7 +231,12 @@ const SystemLog: FC = () => {
              }
            }}
          >
-            <Button startIcon={<DownloadIcon />} variant="outlined" color="secondary" onClick={onDownload}>
+            <Button
+              startIcon={<DownloadIcon />}
+              variant="outlined"
+              color="secondary"
+              onClick={onDownload}
+            >
              {LL.EXPORT()}
            </Button>
            {dirtyFlags && dirtyFlags.length !== 0 && (
--- a/interface/src/framework/system/SystemStatus.tsx
+++ b/interface/src/framework/system/SystemStatus.tsx
@@ -49,7 +49,11 @@ const SystemStatus: FC = () => {

  const [confirmScan, setConfirmScan] = useState<boolean>(false);

-  const { data: data, send: loadData, error } = useRequest(SystemApi.readSystemStatus, { force: true });
+  const {
+    data: data,
+    send: loadData,
+    error
+  } = useRequest(SystemApi.readSystemStatus, { force: true });

  const { send: scanDevices } = useRequest(EMSESP.scanDevices, {
    immediate: false
@@ -134,7 +138,8 @@ const SystemStatus: FC = () => {
    }
  };

-  const activeHighlight = (value: boolean) => (value ? theme.palette.success.main : theme.palette.info.main);
+  const activeHighlight = (value: boolean) =>
+    value ? theme.palette.success.main : theme.palette.info.main;

  const scan = async () => {
    await scanDevices()
@@ -148,14 +153,28 @@ const SystemStatus: FC = () => {
  };

  const renderScanDialog = () => (
-    <Dialog sx={dialogStyle} open={confirmScan} onClose={() => setConfirmScan(false)}>
+    <Dialog
+      sx={dialogStyle}
+      open={confirmScan}
+      onClose={() => setConfirmScan(false)}
+    >
      <DialogTitle>{LL.SCAN_DEVICES()}</DialogTitle>
      <DialogContent dividers>{LL.EMS_SCAN()}</DialogContent>
      <DialogActions>
-        <Button startIcon={<CancelIcon />} variant="outlined" onClick={() => setConfirmScan(false)} color="secondary">
+        <Button
+          startIcon={<CancelIcon />}
+          variant="outlined"
+          onClick={() => setConfirmScan(false)}
+          color="secondary"
+        >
          {LL.CANCEL()}
        </Button>
-        <Button startIcon={<PermScanWifiIcon />} variant="outlined" onClick={scan} color="primary">
+        <Button
+          startIcon={<PermScanWifiIcon />}
+          variant="outlined"
+          onClick={scan}
+          color="primary"
+        >
          {LL.SCAN()}
        </Button>
      </DialogActions>
@@ -282,7 +301,12 @@ const SystemStatus: FC = () => {
        {renderScanDialog()}

        <Box mt={2} display="flex" flexWrap="wrap">
-          <Button startIcon={<RefreshIcon />} variant="outlined" color="secondary" onClick={loadData}>
+          <Button
+            startIcon={<RefreshIcon />}
+            variant="outlined"
+            color="secondary"
+            onClick={loadData}
+          >
            {LL.REFRESH()}
          </Button>
        </Box>
--- a/interface/src/framework/system/UploadDownload.tsx
+++ b/interface/src/framework/system/UploadDownload.tsx
@@ -8,7 +8,12 @@ import * as SystemApi from 'api/system';

 import * as EMSESP from 'project/api';
 import { useRequest } from 'alova';
-import { FormLoader, SectionContent, SingleUpload, useLayoutTitle } from 'components';
+import {
+  FormLoader,
+  SectionContent,
+  SingleUpload,
+  useLayoutTitle
+} from 'components';
 import { useI18nContext } from 'i18n/i18n-react';
 import type { APIcall } from 'project/types';

@@ -19,23 +24,40 @@ const UploadDownload: FC = () => {
  const [restarting, setRestarting] = useState<boolean>();
  const [md5, setMd5] = useState<string>();

-  const { send: getSettings, onSuccess: onSuccessGetSettings } = useRequest(EMSESP.getSettings(), {
-    immediate: false
-  });
-  const { send: getCustomizations, onSuccess: onSuccessGetCustomizations } = useRequest(EMSESP.getCustomizations(), {
-    immediate: false
-  });
-  const { send: getEntities, onSuccess: onSuccessGetEntities } = useRequest(EMSESP.getEntities(), {
-    immediate: false
-  });
-  const { send: getSchedule, onSuccess: onSuccessGetSchedule } = useRequest(EMSESP.getSchedule(), {
-    immediate: false
-  });
-  const { send: getAPI, onSuccess: onGetAPI } = useRequest((data: APIcall) => EMSESP.API(data), {
-    immediate: false
-  });
+  const { send: getSettings, onSuccess: onSuccessGetSettings } = useRequest(
+    EMSESP.getSettings(),
+    {
+      immediate: false
+    }
+  );
+  const { send: getCustomizations, onSuccess: onSuccessGetCustomizations } =
+    useRequest(EMSESP.getCustomizations(), {
+      immediate: false
+    });
+  const { send: getEntities, onSuccess: onSuccessGetEntities } = useRequest(
+    EMSESP.getEntities(),
+    {
+      immediate: false
+    }
+  );
+  const { send: getSchedule, onSuccess: onSuccessGetSchedule } = useRequest(
+    EMSESP.getSchedule(),
+    {
+      immediate: false
+    }
+  );
+  const { send: getAPI, onSuccess: onGetAPI } = useRequest(
+    (data: APIcall) => EMSESP.API(data),
+    {
+      immediate: false
+    }
+  );

-  const { data: data, send: loadData, error } = useRequest(SystemApi.readESPSystemStatus, { force: true });
+  const {
+    data: data,
+    send: loadData,
+    error
+  } = useRequest(SystemApi.readESPSystemStatus, { force: true });

  const { data: latestVersion } = useRequest(SystemApi.getStableVersion, {
    immediate: true,
@@ -50,11 +72,17 @@ const UploadDownload: FC = () => {
  const STABLE_URL = 'https://github.com/emsesp/EMS-ESP32/releases/download/';
  const DEV_URL = 'https://github.com/emsesp/EMS-ESP32/releases/download/latest/';

-  const STABLE_RELNOTES_URL = 'https://github.com/emsesp/EMS-ESP32/blob/main/CHANGELOG.md';
-  const DEV_RELNOTES_URL = 'https://github.com/emsesp/EMS-ESP32/blob/dev/CHANGELOG_LATEST.md';
+  const STABLE_RELNOTES_URL =
+    'https://github.com/emsesp/EMS-ESP32/blob/main/CHANGELOG.md';
+  const DEV_RELNOTES_URL =
+    'https://github.com/emsesp/EMS-ESP32/blob/dev/CHANGELOG_LATEST.md';

  const getBinURL = (v: string) =>
-    'EMS-ESP-' + v.replaceAll('.', '_') + '-' + data.esp_platform.replaceAll('-', '_') + '.bin';
+    'EMS-ESP-' +
+    v.replaceAll('.', '_') +
+    '-' +
+    data.esp_platform.replaceAll('-', '_') +
+    '.bin';

  const {
    loading: isUploading,
@@ -115,8 +143,11 @@ const UploadDownload: FC = () => {
    saveFile(event.data, 'schedule.json');
  });
  onGetAPI((event) => {
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-    saveFile(event.data, event.sendArgs[0].device + '_' + event.sendArgs[0].entity + '.txt');
+    saveFile(
+      event.data,
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+      event.sendArgs[0].device + '_' + event.sendArgs[0].entity + '.txt'
+    );
  });

  const downloadSettings = async () => {
@@ -170,7 +201,8 @@ const UploadDownload: FC = () => {
          <b>{data.emsesp_version}</b>&nbsp;({data.esp_platform})
          {latestVersion && (
            <Box mt={2}>
-              {LL.THE_LATEST()}&nbsp;{LL.OFFICIAL()}&nbsp;{LL.RELEASE_IS()}&nbsp;<b>{latestVersion}</b>
+              {LL.THE_LATEST()}&nbsp;{LL.OFFICIAL()}&nbsp;{LL.RELEASE_IS()}
+              &nbsp;<b>{latestVersion}</b>
              &nbsp;(
              <Link target="_blank" href={STABLE_RELNOTES_URL} color="primary">
                {LL.RELEASE_NOTES()}
@@ -178,7 +210,13 @@ const UploadDownload: FC = () => {
              )&nbsp;(
              <Link
                target="_blank"
-                href={STABLE_URL + 'v' + latestVersion + '/' + getBinURL(latestVersion as string)}
+                href={
+                  STABLE_URL +
+                  'v' +
+                  latestVersion +
+                  '/' +
+                  getBinURL(latestVersion as string)
+                }
                color="primary"
              >
                {LL.DOWNLOAD(1)}
@@ -188,14 +226,19 @@ const UploadDownload: FC = () => {
          )}
          {latestDevVersion && (
            <Box mt={2}>
-              {LL.THE_LATEST()}&nbsp;{LL.DEVELOPMENT()}&nbsp;{LL.RELEASE_IS()}&nbsp;
+              {LL.THE_LATEST()}&nbsp;{LL.DEVELOPMENT()}&nbsp;{LL.RELEASE_IS()}
+              &nbsp;
              <b>{latestDevVersion}</b>
              &nbsp;(
              <Link target="_blank" href={DEV_RELNOTES_URL} color="primary">
                {LL.RELEASE_NOTES()}
              </Link>
              )&nbsp;(
-              <Link target="_blank" href={DEV_URL + getBinURL(latestDevVersion as string)} color="primary">
+              <Link
+                target="_blank"
+                href={DEV_URL + getBinURL(latestDevVersion as string)}
+                color="primary"
+              >
                {LL.DOWNLOAD(1)}
              </Link>
              )
@@ -219,7 +262,12 @@ const UploadDownload: FC = () => {
            <Typography variant="body2">{'MD5: ' + md5}</Typography>
          </Box>
        )}
-        <SingleUpload onDrop={startUpload} onCancel={cancelUpload} isUploading={isUploading} progress={progress} />
+        <SingleUpload
+          onDrop={startUpload}
+          onCancel={cancelUpload}
+          isUploading={isUploading}
+          progress={progress}
+        />
        {!isUploading && (
          <>
            <Typography sx={{ pt: 4, pb: 2 }} variant="h6" color="primary">
@@ -307,7 +355,9 @@ const UploadDownload: FC = () => {
    );
  };

-  return <SectionContent>{restarting ? <RestartMonitor /> : content()}</SectionContent>;
+  return (
+    <SectionContent>{restarting ? <RestartMonitor /> : content()}</SectionContent>
+  );
 };

 export default UploadDownload;