translate system menu

interface/src/SignIn.tsx

@@ -58,7 +58,7 @@ const SignIn: FC = () => {
           enqueueSnackbar(LL.INVALID_LOGIN(), { variant: 'warning' });
         }
       } else {
-        enqueueSnackbar(extractErrorMessage(error, 'Unexpected error, please try again'), { variant: 'error' });
+        enqueueSnackbar(extractErrorMessage(error, LL.ERROR()), { variant: 'error' });
       }
       setProcessing(false);
     }

interface/src/components/layout/LayoutMenu.tsx

@@ -35,8 +35,13 @@ const LayoutMenu: FC = () => {
         <LayoutMenuItem icon={SettingsInputAntennaIcon} label="Access Point" to="/ap" />
         {features.ntp && <LayoutMenuItem icon={AccessTimeIcon} label={LL.NETWORK_TIME()} to="/ntp" />}
         {features.mqtt && <LayoutMenuItem icon={DeviceHubIcon} label="MQTT" to="/mqtt" />}
-        <LayoutMenuItem icon={LockIcon} label={LL.SECURITY()} to="/security" disabled={!authenticatedContext.me.admin} />
+        <LayoutMenuItem
-        <LayoutMenuItem icon={SettingsIcon} label="System" to="/system" />
+          icon={LockIcon}
+          label={LL.SECURITY()}
+          to="/security"
+          disabled={!authenticatedContext.me.admin}
+        />
+        <LayoutMenuItem icon={SettingsIcon} label={LL.SYSTEM()} to="/system" />
       </List>
     </>
   );

interface/src/components/upload/SingleUpload.tsx

@@ -6,6 +6,8 @@ import { Box, Button, LinearProgress, Theme, Typography, useTheme } from '@mui/m
 import CloudUploadIcon from '@mui/icons-material/CloudUpload';
 import CancelIcon from '@mui/icons-material/Cancel';
 
+import { useI18nContext } from '../../i18n/i18n-react';
+
 const progressPercentage = (progress: ProgressEvent) => Math.round((progress.loaded * 100) / progress.total);
 
 const getBorderColor = (theme: Theme, props: DropzoneState) => {
@@ -41,14 +43,16 @@ const SingleUpload: FC<SingleUploadProps> = ({ onDrop, onCancel, uploading, prog
   const { getRootProps, getInputProps } = dropzoneState;
   const theme = useTheme();
 
+  const { LL } = useI18nContext();
+
   const progressText = () => {
     if (uploading) {
       if (progress?.lengthComputable) {
-        return `Uploading: ${progressPercentage(progress)}%`;
+        return LL.UPLOADING() + `: ${progressPercentage(progress)}%`;
       }
-      return 'Uploading\u2026';
+      return LL.UPLOADING() + `\u2026`;
     }
-    return 'Drop file or click here';
+    return LL.UPLOAD_DROP_TEXT();
   };
 
   return (
@@ -81,7 +85,7 @@ const SingleUpload: FC<SingleUploadProps> = ({ onDrop, onCancel, uploading, prog
               />
             </Box>
             <Button startIcon={<CancelIcon />} variant="outlined" color="secondary" onClick={onCancel}>
-              Cancel
+              {LL.CANCEL()}
             </Button>
           </Fragment>
         )}

interface/src/framework/ntp/NTPStatusForm.tsx

@@ -31,6 +31,8 @@ import { ButtonRow, FormLoader, SectionContent } from '../../components';
 import { extractErrorMessage, formatDateTime, formatLocalDateTime, useRest } from '../../utils';
 import { AuthenticatedContext } from '../../contexts/authentication';
 
+import { useI18nContext } from '../../i18n/i18n-react';
+
 export const isNtpActive = ({ status }: NTPStatus) => status === NTPSyncStatus.NTP_ACTIVE;
 export const isNtpEnabled = ({ status }: NTPStatus) => status !== NTPSyncStatus.NTP_DISABLED;
 
@@ -68,6 +70,8 @@ const NTPStatusForm: FC = () => {
   const { enqueueSnackbar } = useSnackbar();
   const { me } = useContext(AuthenticatedContext);
 
+  const { LL } = useI18nContext();
+
   const updateLocalTime = (event: React.ChangeEvent<HTMLInputElement>) => setLocalTime(event.target.value);
 
   const openSetTime = () => {
@@ -83,11 +87,11 @@ const NTPStatusForm: FC = () => {
       await NTPApi.updateTime({
         local_time: formatLocalDateTime(new Date(localTime))
       });
-      enqueueSnackbar('Time set', { variant: 'success' });
+      enqueueSnackbar(LL.TIME_SET(), { variant: 'success' });
       setSettingTime(false);
       loadData();
     } catch (error: unknown) {
-      enqueueSnackbar(extractErrorMessage(error, 'Problem updating time'), { variant: 'error' });
+      enqueueSnackbar(extractErrorMessage(error, LL.PROBLEM_UPDATING()), { variant: 'error' });
     } finally {
       setProcessing(false);
     }

interface/src/framework/system/GeneralFileUpload.tsx

@@ -14,6 +14,8 @@ import { extractErrorMessage } from '../../utils';
 
 import * as EMSESP from '../../project/api';
 
+import { useI18nContext } from '../../i18n/i18n-react';
+
 interface UploadFileProps {
   uploadGeneralFile: (file: File, config?: FileUploadConfig) => AxiosPromise<void>;
 }
@@ -23,6 +25,8 @@ const GeneralFileUpload: FC<UploadFileProps> = ({ uploadGeneralFile }) => {
 
   const { enqueueSnackbar } = useSnackbar();
 
+  const { LL } = useI18nContext();
+
   const saveFile = (json: any, endpoint: string) => {
     const a = document.createElement('a');
     const filename = 'emsesp_' + endpoint + '.json';
@@ -35,19 +39,19 @@ const GeneralFileUpload: FC<UploadFileProps> = ({ uploadGeneralFile }) => {
     document.body.appendChild(a);
     a.click();
     document.body.removeChild(a);
-    enqueueSnackbar('File downloaded', { variant: 'info' });
+    enqueueSnackbar(LL.DOWNLOAD_SUCCESSFUL(), { variant: 'info' });
   };
 
   const downloadSettings = async () => {
     try {
       const response = await EMSESP.getSettings();
       if (response.status !== 200) {
-        enqueueSnackbar('Unable to get settings', { variant: 'error' });
+        enqueueSnackbar(LL.PROBLEM_LOADING(), { variant: 'error' });
       } else {
         saveFile(response.data, 'settings');
       }
     } catch (error: unknown) {
-      enqueueSnackbar(extractErrorMessage(error, 'Problem with downloading'), { variant: 'error' });
+      enqueueSnackbar(extractErrorMessage(error, LL.PROBLEM_LOADING()), { variant: 'error' });
     }
   };
 
@@ -55,47 +59,43 @@ const GeneralFileUpload: FC<UploadFileProps> = ({ uploadGeneralFile }) => {
     try {
       const response = await EMSESP.getCustomizations();
       if (response.status !== 200) {
-        enqueueSnackbar('Unable to get customizations', { variant: 'error' });
+        enqueueSnackbar(LL.PROBLEM_LOADING(), { variant: 'error' });
       } else {
         saveFile(response.data, 'customizations');
       }
     } catch (error: unknown) {
-      enqueueSnackbar(extractErrorMessage(error, 'Problem with downloading'), { variant: 'error' });
+      enqueueSnackbar(extractErrorMessage(error, LL.PROBLEM_LOADING()), { variant: 'error' });
     }
   };
 
   return (
     <>
       <Typography sx={{ pt: 2, pb: 2 }} variant="h6" color="primary">
-        Upload
+        {LL.UPLOAD()}
       </Typography>
       {!uploading && (
         <Box mb={2} color="warning.main">
-          <Typography variant="body2">
+          <Typography variant="body2">{LL.UPLOAD_TEXT()} </Typography>
-            Upload a new firmware (.bin) file, settings or customizations (.json) file below
-          </Typography>
         </Box>
       )}
       <SingleUpload onDrop={uploadFile} onCancel={cancelUpload} uploading={uploading} progress={uploadProgress} />
 
       <Typography sx={{ pt: 2, pb: 2 }} variant="h6" color="primary">
-        Download
+        {LL.DOWNLOAD()}
       </Typography>
       {!uploading && (
         <>
           <Box color="warning.main">
             <Typography mb={1} variant="body2">
-              Download the application settings. Be careful when sharing your settings as this file contains passwords
+              {LL.DOWNLOAD_SETTINGS_TEXT()}
-              and other sensitive system information
             </Typography>
           </Box>
           <Button startIcon={<DownloadIcon />} variant="outlined" color="primary" onClick={() => downloadSettings()}>
-            settings
+            {LL.SETTINGS()}
           </Button>
-
           <Box color="warning.main">
             <Typography mt={2} mb={1} variant="body2">
-              Download the entity customizations
+              {LL.DOWNLOAD_CUSTOMIZATION_TEXT()}{' '}
             </Typography>
           </Box>
           <Button
@@ -104,7 +104,7 @@ const GeneralFileUpload: FC<UploadFileProps> = ({ uploadGeneralFile }) => {
             color="primary"
             onClick={() => downloadCustomizations()}
           >
-            customizations
+            {LL.CUSTOMIZATION()}
           </Button>
         </>
       )}

interface/src/framework/system/OTASettingsForm.tsx

@@ -12,6 +12,7 @@ import {
   ValidatedPasswordField,
   ValidatedTextField
 } from '../../components';
+
 import { OTASettings } from '../../types';
 import { numberValue, updateValue, useRest } from '../../utils';
 
@@ -19,12 +20,16 @@ import { ValidateFieldsError } from 'async-validator';
 import { validate } from '../../validators';
 import { OTA_SETTINGS_VALIDATOR } from '../../validators/system';
 
+import { useI18nContext } from '../../i18n/i18n-react';
+
 const OTASettingsForm: FC = () => {
   const { loadData, saving, data, setData, saveData, errorMessage } = useRest<OTASettings>({
     read: SystemApi.readOTASettings,
     update: SystemApi.updateOTASettings
   });
 
+  const { LL } = useI18nContext();
+
   const updateFormValue = updateValue(setData);
 
   const [fieldErrors, setFieldErrors] = useState<ValidateFieldsError>();
@@ -48,7 +53,7 @@ const OTASettingsForm: FC = () => {
       <>
         <BlockFormControlLabel
           control={<Checkbox name="enabled" checked={data.enabled} onChange={updateFormValue} />}
-          label="Enable OTA Updates"
+          label={LL.ENABLE_OTA()}
         />
         <ValidatedTextField
           fieldErrors={fieldErrors}
@@ -64,7 +69,7 @@ const OTASettingsForm: FC = () => {
         <ValidatedPasswordField
           fieldErrors={fieldErrors}
           name="password"
-          label="Password"
+          label={LL.PASSWORD()}
           fullWidth
           variant="outlined"
           value={data.password}
@@ -80,7 +85,7 @@ const OTASettingsForm: FC = () => {
             type="submit"
             onClick={validateAndSubmit}
           >
-            Save
+            {LL.SAVE()}
           </Button>
         </ButtonRow>
       </>
@@ -88,7 +93,7 @@ const OTASettingsForm: FC = () => {
   };
 
   return (
-    <SectionContent title="OTA Settings" titleGutter>
+    <SectionContent title={'OTA ' + LL.SETTINGS()} titleGutter>
       {content()}
     </SectionContent>
   );

interface/src/framework/system/RestartMonitor.tsx

@@ -4,6 +4,8 @@ import { FC, useRef, useState } from 'react';
 import * as SystemApi from '../../api/system';
 import { FormLoader } from '../../components';
 
+import { useI18nContext } from '../../i18n/i18n-react';
+
 const RESTART_TIMEOUT = 2 * 60 * 1000;
 const POLL_TIMEOUT = 2000;
 const POLL_INTERVAL = 5000;
@@ -12,6 +14,8 @@ const RestartMonitor: FC = () => {
   const [failed, setFailed] = useState<boolean>(false);
   const [timeoutId, setTimeoutId] = useState<NodeJS.Timeout>();
 
+  const { LL } = useI18nContext();
+
   const timeoutAt = useRef(new Date().getTime() + RESTART_TIMEOUT);
   const poll = useRef(async () => {
     try {
@@ -32,12 +36,7 @@ const RestartMonitor: FC = () => {
 
   useEffect(() => () => timeoutId && clearTimeout(timeoutId), [timeoutId]);
 
-  return (
+  return <FormLoader message={LL.APPLICATION_RESTARTING() + '...'} errorMessage={failed ? 'Timed out' : undefined} />;
-    <FormLoader
-      message="EMS-ESP is restarting, please wait&hellip;"
-      errorMessage={failed ? 'Timed out waiting for device to restart.' : undefined}
-    />
-  );
 };
 
 export default RestartMonitor;

interface/src/framework/system/System.tsx

@@ -12,8 +12,13 @@ import OTASettingsForm from './OTASettingsForm';
 
 import SystemLog from './SystemLog';
 
+import { useI18nContext } from '../../i18n/i18n-react';
+
 const System: FC = () => {
-  useLayoutTitle('System');
+
+  const { LL } = useI18nContext();
+
+  useLayoutTitle(LL.SYSTEM());
 
   const { me } = useContext(AuthenticatedContext);
   const { features } = useContext(FeaturesContext);
@@ -22,11 +27,11 @@ const System: FC = () => {
   return (
     <>
       <RouterTabs value={routerTab}>
-        <Tab value="status" label="System Status" />
+        <Tab value="status" label={LL.SYSTEM() + ' ' + LL.STATUS()} />
-        <Tab value="log" label="System Log" />
+        <Tab value="log" label={LL.SYSTEM() + ' ' + LL.LOG()} />
 
-        {features.ota && <Tab value="ota" label="OTA Settings" disabled={!me.admin} />}
+        {features.ota && <Tab value="ota" label={"OTA " + LL.SETTINGS()} disabled={!me.admin} />}
-        {features.upload_firmware && <Tab value="upload" label="Upload/Download" disabled={!me.admin} />}
+        {features.upload_firmware && <Tab value="upload" label={LL.UPLOAD_DOWNLOAD()} disabled={!me.admin} />}
       </RouterTabs>
       <Routes>
         <Route path="status" element={<SystemStatusForm />} />

interface/src/framework/system/SystemLog.tsx

@@ -15,6 +15,9 @@ import DownloadIcon from '@mui/icons-material/GetApp';
 import { useSnackbar } from 'notistack';
 
 import { EVENT_SOURCE_ROOT } from '../../api/endpoints';
+
+import { useI18nContext } from '../../i18n/i18n-react';
+
 export const LOG_EVENTSOURCE_URL = EVENT_SOURCE_ROOT + 'log';
 
 const useWindowSize = () => {
@@ -63,6 +66,8 @@ const levelLabel = (level: LogLevel) => {
 const SystemLog: FC = () => {
   useWindowSize();
 
+  const { LL } = useI18nContext();
+
   const { loadData, data, setData } = useRest<LogSettings>({
     read: SystemApi.readLogSettings
   });
@@ -104,10 +109,10 @@ const SystemLog: FC = () => {
           compact: data.compact
         });
         if (response.status !== 200) {
-          enqueueSnackbar('Problem applying log settings', { variant: 'error' });
+          enqueueSnackbar(LL.PROBLEM_UPDATING(), { variant: 'error' });
         }
       } catch (error: unknown) {
-        enqueueSnackbar(extractErrorMessage(error, 'Problem applying log settings'), { variant: 'error' });
+        enqueueSnackbar(extractErrorMessage(error, LL.PROBLEM_UPDATING()), { variant: 'error' });
       }
     }
   };
@@ -159,9 +164,9 @@ const SystemLog: FC = () => {
     try {
       setLogEntries((await SystemApi.readLogEntries()).data);
     } catch (error: unknown) {
-      setErrorMessage(extractErrorMessage(error, 'Failed to fetch log'));
+      setErrorMessage(extractErrorMessage(error, LL.PROBLEM_LOADING()));
     }
-  }, []);
+  }, [LL]);
 
   useEffect(() => {
     fetchLog();
@@ -214,7 +219,7 @@ const SystemLog: FC = () => {
             </ValidatedTextField>
           </Grid>
           <Grid item xs={3}>
-            <FormLabel>Buffer size</FormLabel>
+            <FormLabel>{LL.BUFFER_SIZE()}</FormLabel>
             <Slider
               value={data.max_messages}
               valueLabelDisplay="auto"
@@ -235,12 +240,12 @@ const SystemLog: FC = () => {
           <Grid item>
             <BlockFormControlLabel
               control={<Checkbox checked={data.compact} onChange={updateFormValue} name="compact" />}
-              label="Compact"
+              label={LL.COMPACT()}
             />
           </Grid>
           <Grid item>
             <Button startIcon={<DownloadIcon />} variant="outlined" color="secondary" onClick={onDownload}>
-              Export
+              {LL.EXPORT()}
             </Button>
           </Grid>
         </Grid>
@@ -273,7 +278,7 @@ const SystemLog: FC = () => {
   };
 
   return (
-    <SectionContent title="System Log" titleGutter id="log-window">
+    <SectionContent title={LL.SYSTEM() + ' ' + LL.LOG()} titleGutter id="log-window">
       {content()}
     </SectionContent>
   );

interface/src/framework/system/SystemStatusForm.tsx

@@ -39,6 +39,8 @@ import { AuthenticatedContext } from '../../contexts/authentication';
 
 import axios from 'axios';
 
+import { useI18nContext } from '../../i18n/i18n-react';
+
 export const VERSIONCHECK_ENDPOINT = 'https://api.github.com/repos/emsesp/EMS-ESP32/releases/latest';
 export const VERSIONCHECK_DEV_ENDPOINT = 'https://api.github.com/repos/emsesp/EMS-ESP32/releases/tags/latest';
 export const uploadURL = window.location.origin + '/system/upload';
@@ -48,6 +50,8 @@ function formatNumber(num: number) {
 }
 
 const SystemStatusForm: FC = () => {
+  const { LL } = useI18nContext();
+
   const { loadData, data, errorMessage } = useRest<SystemStatus>({ read: SystemApi.readSystemStatus });
 
   const { me } = useContext(AuthenticatedContext);
@@ -80,9 +84,9 @@ const SystemStatusForm: FC = () => {
     setProcessing(true);
     try {
       await SystemApi.restart();
-      enqueueSnackbar('EMS-ESP is restarting...', { variant: 'info' });
+      enqueueSnackbar(LL.APPLICATION_RESTARTING(), { variant: 'info' });
     } catch (error: unknown) {
-      enqueueSnackbar(extractErrorMessage(error, 'Problem restarting device'), { variant: 'error' });
+      enqueueSnackbar(extractErrorMessage(error, LL.PROBLEM_LOADING()), { variant: 'error' });
     } finally {
       setConfirmRestart(false);
       setProcessing(false);
@@ -92,7 +96,7 @@ const SystemStatusForm: FC = () => {
   const renderRestartDialog = () => (
     <Dialog open={confirmRestart} onClose={() => setConfirmRestart(false)}>
       <DialogTitle>Restart</DialogTitle>
-      <DialogContent dividers>Are you sure you want to restart EMS-ESP?</DialogContent>
+      <DialogContent dividers>{LL.RESTART_TEXT()}</DialogContent>
       <DialogActions>
         <Button
           startIcon={<CancelIcon />}
@@ -119,16 +123,12 @@ const SystemStatusForm: FC = () => {
   const renderVersionDialog = () => {
     return (
       <Dialog open={showingVersion} onClose={() => setShowingVersion(false)}>
-        <DialogTitle>Version Check</DialogTitle>
+        <DialogTitle>{LL.VERSION_CHECK()}</DialogTitle>
         <DialogContent dividers>
-          <MessageBox
+          <MessageBox my={0} level="info" message={LL.SYSTEM_VERSION_RUNNING() + ' ' + data?.emsesp_version} />
-            my={0}
-            level="info"
-            message={'You are currently running EMS-ESP version ' + data?.emsesp_version}
-          />
           {latestVersion && (
             <Box mt={2} mb={2}>
-              The latest <u>official</u> version is <b>{latestVersion.version}</b>&nbsp;(
+              {LL.THE_LATEST()}&nbsp;<u>official</u> version is <b>{latestVersion.version}</b>&nbsp;(
               <Link target="_blank" href={latestVersion.changelog} color="primary">
                 {'release notes'}
               </Link>
@@ -142,7 +142,7 @@ const SystemStatusForm: FC = () => {
 
           {latestDevVersion && (
             <Box mt={2} mb={2}>
-              The latest <u>development</u> version is&nbsp;<b>{latestDevVersion.version}</b>
+              {LL.THE_LATEST()}&nbsp;<u>development</u> version is&nbsp;<b>{latestDevVersion.version}</b>
               &nbsp;(
               <Link target="_blank" href={latestDevVersion.changelog} color="primary">
                 {'release notes'}
@@ -157,17 +157,17 @@ const SystemStatusForm: FC = () => {
 
           <Box color="warning.main" p={0} pl={0} pr={0} mt={4} mb={0}>
             <Typography variant="body2">
-              Use&nbsp;
+              {LL.USE()}&nbsp;
               <Link target="_blank" href={uploadURL} color="primary">
                 {'UPLOAD'}
               </Link>
-              &nbsp;to apply the new firmware
+              &nbsp;{LL.SYSTEM_APPLY_FIRMWARE()}
             </Typography>
           </Box>
         </DialogContent>
         <DialogActions>
           <Button variant="outlined" onClick={() => setShowingVersion(false)} color="secondary">
-            Close
+            {LL.CLOSE()}
           </Button>
         </DialogActions>
       </Dialog>
@@ -178,9 +178,9 @@ const SystemStatusForm: FC = () => {
     setProcessing(true);
     try {
       await SystemApi.factoryReset();
-      enqueueSnackbar('Device has been factory reset and will now restart', { variant: 'info' });
+      enqueueSnackbar(LL.SYSTEM_FACTORY_TEXT(), { variant: 'info' });
     } catch (error: unknown) {
-      enqueueSnackbar(extractErrorMessage(error, 'Problem factory resetting the device'), { variant: 'error' });
+      enqueueSnackbar(extractErrorMessage(error, LL.PROBLEM_UPDATING()), { variant: 'error' });
     } finally {
       setConfirmFactoryReset(false);
       setProcessing(false);
@@ -189,8 +189,8 @@ const SystemStatusForm: FC = () => {
 
   const renderFactoryResetDialog = () => (
     <Dialog open={confirmFactoryReset} onClose={() => setConfirmFactoryReset(false)}>
-      <DialogTitle>Factory Reset</DialogTitle>
+      <DialogTitle>{LL.FACTORY_RESET()}</DialogTitle>
-      <DialogContent dividers>Are you sure you want to reset the device to its factory defaults?</DialogContent>
+      <DialogContent dividers>{LL.SYSTEM_FACTORY_TEXT_DIALOG()}</DialogContent>
       <DialogActions>
         <Button
           startIcon={<CancelIcon />}
@@ -198,7 +198,7 @@ const SystemStatusForm: FC = () => {
           onClick={() => setConfirmFactoryReset(false)}
           color="secondary"
         >
-          Cancel
+          {LL.CANCEL()}
         </Button>
         <Button
           startIcon={<SettingsBackupRestoreIcon />}
@@ -208,7 +208,7 @@ const SystemStatusForm: FC = () => {
           autoFocus
           color="error"
         >
-          Factory Reset
+          {LL.FACTORY_RESET()}
         </Button>
       </DialogActions>
     </Dialog>
@@ -231,7 +231,7 @@ const SystemStatusForm: FC = () => {
             <ListItemText primary="EMS-ESP Version" secondary={'v' + data.emsesp_version} />
             {latestVersion && (
               <Button color="primary" onClick={() => setShowingVersion(true)}>
-                Version Check
+                {LL.VERSION_CHECK()}
               </Button>
             )}
           </ListItem>
@@ -335,7 +335,7 @@ const SystemStatusForm: FC = () => {
           <Box flexGrow={1} sx={{ '& button': { mt: 2 } }}>
             <ButtonRow>
               <Button startIcon={<RefreshIcon />} variant="outlined" color="secondary" onClick={loadData}>
-                Refresh
+                {LL.REFRESH()}
               </Button>
             </ButtonRow>
           </Box>
@@ -348,7 +348,7 @@ const SystemStatusForm: FC = () => {
                   color="primary"
                   onClick={() => setConfirmRestart(true)}
                 >
-                  Restart
+                  {LL.RESTART()}
                 </Button>
                 <Button
                   startIcon={<SettingsBackupRestoreIcon />}
@@ -356,7 +356,7 @@ const SystemStatusForm: FC = () => {
                   onClick={() => setConfirmFactoryReset(true)}
                   color="error"
                 >
-                  Factory reset
+                  {LL.FACTORY_RESET()}
                 </Button>
               </ButtonRow>
             </Box>
@@ -370,7 +370,7 @@ const SystemStatusForm: FC = () => {
   };
 
   return (
-    <SectionContent title="System Status" titleGutter>
+    <SectionContent title={LL.SYSTEM() + ' ' + LL.STATUS()} titleGutter>
       {content()}
     </SectionContent>
   );

interface/src/framework/system/UploadFileForm.tsx

@@ -7,9 +7,13 @@ import { FileUploadConfig } from '../../api/endpoints';
 import GeneralFileUpload from './GeneralFileUpload';
 import RestartMonitor from './RestartMonitor';
 
+import { useI18nContext } from '../../i18n/i18n-react';
+
 const UploadFileForm: FC = () => {
   const [restarting, setRestarting] = useState<boolean>();
 
+  const { LL } = useI18nContext();
+
   const uploadFile = useRef(async (file: File, config?: FileUploadConfig) => {
     const response = await SystemApi.uploadFile(file, config);
     setRestarting(true);
@@ -17,7 +21,7 @@ const UploadFileForm: FC = () => {
   });
 
   return (
-    <SectionContent title="Upload/Download" titleGutter>
+    <SectionContent title={LL.UPLOAD_DOWNLOAD()} titleGutter>
       {restarting ? <RestartMonitor /> : <GeneralFileUpload uploadGeneralFile={uploadFile.current} />}
     </SectionContent>
   );

interface/src/i18n/de/index.ts

@@ -14,6 +14,7 @@ const de: Translation = {
   LOGGED_IN: 'Eingeloggt als {name}',
   PLEASE_SIGNIN: 'Bitte einloggen, um fortzufahren',
   UPLOAD_SUCCESSFUL: 'Hochladen erfolgreich',
+  DOWNLOAD_SUCCESSFUL: 'DE_Download successful',
   INVALID_LOGIN: 'Ungültige Login Daten',
   NETWORK_CONNECTION: 'Netzwerkverbindung',
   SECURITY: 'Sicherheit',
@@ -24,7 +25,7 @@ const de: Translation = {
   DESCRIPTION: 'Bezeichnung',
   ENTITIES: 'Entitäten',
   REFRESH: 'Aktualisierung',
-  EXPORT: 'Export',
+  EXPORT: 'DE_Export',
   ENTITY_NAME: 'Entitätsname',
   VALUE: 'Wert',
   SHOW_FAV: 'nur Favoriten anzeigen',
@@ -145,9 +146,34 @@ const de: Translation = {
   HELP_INFORMATION_9: 'und hängen Sie Ihre Systemdetails für eine schnellere Antwort an',
   HELP_INFORMATION_10: 'EMS-ESP wird immer ein kostenloses Open-Source-Projekt sein. Bitte erwägen Sie, es mit einem',
   UPLOAD: 'Hochladen',
+  DOWNLOAD: 'DE_Download',
   ABORTED: 'abgebrochen',
   FAILED: 'gescheitert',
-  SUCCESSFUL: 'erfolgreich'
+  SUCCESSFUL: 'erfolgreich',
+  SYSTEM: 'DE_System',
+  LOG: 'DE_Log',
+  STATUS: 'DE_Status',
+  UPLOAD_DOWNLOAD: 'DE_Upload/Download',
+  SYSTEM_VERSION_RUNNING: 'DE_You are currently running version',
+  SYSTEM_APPLY_FIRMWARE: 'DE_to apply the new firmware',
+  CLOSE: 'DE_Close',
+  USE: 'DE_Use',
+  FACTORY_RESET: 'DE_Factory Reset',
+  SYSTEM_FACTORY_TEXT: 'DE_Device has been factory reset and will now restart',
+  SYSTEM_FACTORY_TEXT_DIALOG: 'DE_Are you sure you want to reset the device to its factory defaults?',
+  VERSION_CHECK: 'DE_Version Check',
+  THE_LATEST: 'DE_The latest',
+  BUFFER_SIZE: 'DE_Buffer Size',
+  COMPACT: 'DE_Compact',
+  ENABLE_OTA: 'DE_Enable OTA Updates',
+  DOWNLOAD_CUSTOMIZATION_TEXT: 'DE_Download the entity customizations',
+  DOWNLOAD_SETTINGS_TEXT:
+    'DE_Download the application settings. Be careful when sharing your settings as this file contains passwords and other sensitive system information',
+  UPLOAD_TEXT: 'DE_Upload a new firmware (.bin) file, settings or customizations (.json) file below',
+  UPLOADING: 'DE_Uploading',
+  UPLOAD_DROP_TEXT: 'DE_Drop file or click here',
+  ERROR: 'DE_Unexpected Error, please try again',
+  TIME_SET: 'DE_Time set'
 };
 
 export default de;

interface/src/i18n/en/index.ts

@@ -14,6 +14,7 @@ const en: BaseTranslation = {
   LOGGED_IN: 'Logged in as {name}',
   PLEASE_SIGNIN: 'Please sign in to continue',
   UPLOAD_SUCCESSFUL: 'Upload successful',
+  DOWNLOAD_SUCCESSFUL: 'Download successful',
   INVALID_LOGIN: 'Invalid login details',
   NETWORK_CONNECTION: 'Network Connection',
   SECURITY: 'Security',
@@ -145,9 +146,34 @@ const en: BaseTranslation = {
   HELP_INFORMATION_9: 'and attach your system details for a faster response',
   HELP_INFORMATION_10: 'EMS-ESP will always be a free and open-source project. Please consider supporting it with a',
   UPLOAD: 'Upload',
+  DOWNLOAD: 'Download',
   ABORTED: 'aborted',
   FAILED: 'failed',
-  SUCCESSFUL: 'successful'
+  SUCCESSFUL: 'successful',
+  SYSTEM: 'System',
+  LOG: 'Log',
+  STATUS: 'Status',
+  UPLOAD_DOWNLOAD: 'Upload/Download',
+  SYSTEM_VERSION_RUNNING: 'You are currently running version',
+  SYSTEM_APPLY_FIRMWARE: 'to apply the new firmware',
+  CLOSE: 'Close',
+  USE: 'Use',
+  FACTORY_RESET: 'Factory Reset',
+  SYSTEM_FACTORY_TEXT: 'Device has been factory reset and will now restart',
+  SYSTEM_FACTORY_TEXT_DIALOG: 'Are you sure you want to reset the device to its factory defaults?',
+  VERSION_CHECK: 'Version Check',
+  THE_LATEST: 'The latest',
+  BUFFER_SIZE: 'Buffer Size',
+  COMPACT: 'Compact',
+  ENABLE_OTA: 'Enable OTA Updates',
+  DOWNLOAD_CUSTOMIZATION_TEXT: 'Download the entity customizations',
+  DOWNLOAD_SETTINGS_TEXT:
+    'Download the application settings. Be careful when sharing your settings as this file contains passwords and other sensitive system information',
+  UPLOAD_TEXT: 'Upload a new firmware (.bin) file, settings or customizations (.json) file below',
+  UPLOADING: 'Uploading',
+  UPLOAD_DROP_TEXT: 'Drop file or click here',
+  ERROR: 'Unexpected Error, please try again',
+  TIME_SET: 'Time set'
 };
 
 export default en;

interface/src/i18n/i18n-types.ts

@@ -67,6 +67,10 @@ type RootTranslation = {
 	 * Upload successful
 	 */
 	UPLOAD_SUCCESSFUL: string
+	/**
+	 * Download successful
+	 */
+	DOWNLOAD_SUCCESSFUL: string
 	/**
 	 * Invalid login details
 	 */
@@ -583,6 +587,10 @@ type RootTranslation = {
 	 * Upload
 	 */
 	UPLOAD: string
+	/**
+	 * Download
+	 */
+	DOWNLOAD: string
 	/**
 	 * aborted
 	 */
@@ -595,6 +603,98 @@ type RootTranslation = {
 	 * successful
 	 */
 	SUCCESSFUL: string
+	/**
+	 * System
+	 */
+	SYSTEM: string
+	/**
+	 * Log
+	 */
+	LOG: string
+	/**
+	 * Status
+	 */
+	STATUS: string
+	/**
+	 * Upload/Download
+	 */
+	UPLOAD_DOWNLOAD: string
+	/**
+	 * You are currently running version
+	 */
+	SYSTEM_VERSION_RUNNING: string
+	/**
+	 * to apply the new firmware
+	 */
+	SYSTEM_APPLY_FIRMWARE: string
+	/**
+	 * Close
+	 */
+	CLOSE: string
+	/**
+	 * Use
+	 */
+	USE: string
+	/**
+	 * Factory Reset
+	 */
+	FACTORY_RESET: string
+	/**
+	 * Device has been factory reset and will now restart
+	 */
+	SYSTEM_FACTORY_TEXT: string
+	/**
+	 * Are you sure you want to reset the device to its factory defaults?
+	 */
+	SYSTEM_FACTORY_TEXT_DIALOG: string
+	/**
+	 * Version Check
+	 */
+	VERSION_CHECK: string
+	/**
+	 * The latest
+	 */
+	THE_LATEST: string
+	/**
+	 * Buffer Size
+	 */
+	BUFFER_SIZE: string
+	/**
+	 * Compact
+	 */
+	COMPACT: string
+	/**
+	 * Enable OTA Updates
+	 */
+	ENABLE_OTA: string
+	/**
+	 * Download the entity customizations
+	 */
+	DOWNLOAD_CUSTOMIZATION_TEXT: string
+	/**
+	 * Download the application settings. Be careful when sharing your settings as this file contains passwords and other sensitive system information
+	 */
+	DOWNLOAD_SETTINGS_TEXT: string
+	/**
+	 * Upload a new firmware (.bin) file, settings or customizations (.json) file below
+	 */
+	UPLOAD_TEXT: string
+	/**
+	 * Uploading
+	 */
+	UPLOADING: string
+	/**
+	 * Drop file or click here
+	 */
+	UPLOAD_DROP_TEXT: string
+	/**
+	 * Unexpected Error, please try again
+	 */
+	ERROR: string
+	/**
+	 * Time set
+	 */
+	TIME_SET: string
 }
 
 export type TranslationFunctions = {
@@ -650,6 +750,10 @@ export type TranslationFunctions = {
 	 * Upload successful
 	 */
 	UPLOAD_SUCCESSFUL: () => LocalizedString
+	/**
+	 * Download successful
+	 */
+	DOWNLOAD_SUCCESSFUL: () => LocalizedString
 	/**
 	 * Invalid login details
 	 */
@@ -1156,6 +1260,10 @@ export type TranslationFunctions = {
 	 * Upload
 	 */
 	UPLOAD: () => LocalizedString
+	/**
+	 * Download
+	 */
+	DOWNLOAD: () => LocalizedString
 	/**
 	 * aborted
 	 */
@@ -1168,6 +1276,98 @@ export type TranslationFunctions = {
 	 * successful
 	 */
 	SUCCESSFUL: () => LocalizedString
+	/**
+	 * System
+	 */
+	SYSTEM: () => LocalizedString
+	/**
+	 * Log
+	 */
+	LOG: () => LocalizedString
+	/**
+	 * Status
+	 */
+	STATUS: () => LocalizedString
+	/**
+	 * Upload/Download
+	 */
+	UPLOAD_DOWNLOAD: () => LocalizedString
+	/**
+	 * You are currently running version
+	 */
+	SYSTEM_VERSION_RUNNING: () => LocalizedString
+	/**
+	 * to apply the new firmware
+	 */
+	SYSTEM_APPLY_FIRMWARE: () => LocalizedString
+	/**
+	 * Close
+	 */
+	CLOSE: () => LocalizedString
+	/**
+	 * Use
+	 */
+	USE: () => LocalizedString
+	/**
+	 * Factory Reset
+	 */
+	FACTORY_RESET: () => LocalizedString
+	/**
+	 * Device has been factory reset and will now restart
+	 */
+	SYSTEM_FACTORY_TEXT: () => LocalizedString
+	/**
+	 * Are you sure you want to reset the device to its factory defaults?
+	 */
+	SYSTEM_FACTORY_TEXT_DIALOG: () => LocalizedString
+	/**
+	 * Version Check
+	 */
+	VERSION_CHECK: () => LocalizedString
+	/**
+	 * The latest
+	 */
+	THE_LATEST: () => LocalizedString
+	/**
+	 * Buffer Size
+	 */
+	BUFFER_SIZE: () => LocalizedString
+	/**
+	 * Compact
+	 */
+	COMPACT: () => LocalizedString
+	/**
+	 * Enable OTA Updates
+	 */
+	ENABLE_OTA: () => LocalizedString
+	/**
+	 * Download the entity customizations
+	 */
+	DOWNLOAD_CUSTOMIZATION_TEXT: () => LocalizedString
+	/**
+	 * Download the application settings. Be careful when sharing your settings as this file contains passwords and other sensitive system information
+	 */
+	DOWNLOAD_SETTINGS_TEXT: () => LocalizedString
+	/**
+	 * Upload a new firmware (.bin) file, settings or customizations (.json) file below
+	 */
+	UPLOAD_TEXT: () => LocalizedString
+	/**
+	 * Uploading
+	 */
+	UPLOADING: () => LocalizedString
+	/**
+	 * Drop file or click here
+	 */
+	UPLOAD_DROP_TEXT: () => LocalizedString
+	/**
+	 * Unexpected Error, please try again
+	 */
+	ERROR: () => LocalizedString
+	/**
+	 * Time set
+	 */
+	TIME_SET: () => LocalizedString
 }
 
 export type Formatters = {}

interface/src/project/DashboardData.tsx

@@ -364,9 +364,9 @@ const DashboardData: FC = () => {
     try {
       setCoreData((await EMSESP.readCoreData()).data);
     } catch (error: unknown) {
-      enqueueSnackbar(extractErrorMessage(error, 'Failed to fetch core data'), { variant: 'error' });
+      enqueueSnackbar(extractErrorMessage(error, LL.PROBLEM_LOADING()), { variant: 'error' });
     }
-  }, [enqueueSnackbar]);
+  }, [enqueueSnackbar, LL]);
 
   useEffect(() => {
     fetchCoreData();
@@ -385,7 +385,7 @@ const DashboardData: FC = () => {
     try {
       setDeviceData((await EMSESP.readDeviceData({ id: unique_id })).data);
     } catch (error: unknown) {
-      enqueueSnackbar(extractErrorMessage(error, 'Problem fetching device data'), { variant: 'error' });
+      enqueueSnackbar(extractErrorMessage(error, LL.PROBLEM_LOADING()), { variant: 'error' });
     }
   };
 
@@ -393,7 +393,7 @@ const DashboardData: FC = () => {
     try {
       setSensorData((await EMSESP.readSensorData()).data);
     } catch (error: unknown) {
-      enqueueSnackbar(extractErrorMessage(error, 'Problem fetching sensor data'), { variant: 'error' });
+      enqueueSnackbar(extractErrorMessage(error, LL.PROBLEM_LOADING()), { variant: 'error' });
     }
   };
 

interface/src/project/HelpInformation.tsx

@@ -35,7 +35,7 @@ const HelpInformation: FC = () => {
     document.body.appendChild(a);
     a.click();
     document.body.removeChild(a);
-    enqueueSnackbar('System information downloaded', { variant: 'info' });
+    enqueueSnackbar(LL.DOWNLOAD_SUCCESSFUL(), { variant: 'info' });
   };
 
   const callAPI = async (endpoint: string) => {
@@ -46,7 +46,7 @@ const HelpInformation: FC = () => {
         id: 0
       });
       if (response.status !== 200) {
-        enqueueSnackbar('API call failed', { variant: 'error' });
+        enqueueSnackbar(LL.PROBLEM_LOADING(), { variant: 'error' });
       } else {
         saveFile(response.data, endpoint);
       }