translate network

interface/src/framework/network/NetworkConnection.tsx

@@ -15,7 +15,7 @@ import { useI18nContext } from '../../i18n/i18n-react';
 
 const NetworkConnection: FC = () => {
   const { LL } = useI18nContext();
-  useLayoutTitle(LL.NETWORK_CONNECTION());
+  useLayoutTitle(LL.NETWORK());
 
   const { routerTab } = useRouterTab();
 
@@ -45,9 +45,9 @@ const NetworkConnection: FC = () => {
       }}
     >
       <RouterTabs value={routerTab}>
-        <Tab value="status" label="Network Status" />
-        <Tab value="scan" label="Scan WiFi Networks" disabled={!authenticatedContext.me.admin} />
-        <Tab value="settings" label="Network Settings" disabled={!authenticatedContext.me.admin} />
+        <Tab value="status" label={LL.NETWORK() + ' ' + LL.STATUS()} />
+        <Tab value="scan" label={LL.NETWORK_SCAN()} disabled={!authenticatedContext.me.admin} />
+        <Tab value="settings" label={LL.NETWORK() + ' ' + LL.SETTINGS()} disabled={!authenticatedContext.me.admin} />
       </RouterTabs>
       <Routes>
         <Route path="status" element={<NetworkStatusForm />} />

interface/src/framework/network/NetworkSettingsForm.tsx

@@ -37,7 +37,11 @@ import { ValidateFieldsError } from 'async-validator';
 import { validate } from '../../validators';
 import { createNetworkSettingsValidator } from '../../validators/network';
 
+import { useI18nContext } from '../../i18n/i18n-react';
+
 const WiFiSettingsForm: FC = () => {
+  const { LL } = useI18nContext();
+
   const { selectedNetwork, deselectNetwork } = useContext(WiFiConnectionContext);
 
   const [initialized, setInitialized] = useState(false);
@@ -112,7 +116,7 @@ const WiFiSettingsForm: FC = () => {
           <ValidatedTextField
             fieldErrors={fieldErrors}
             name="ssid"
-            label="SSID (leave blank to disable WiFi)"
+            label={'SSID (' + LL.NETWORK_BLANK_SSID() + ')'}
             fullWidth
             variant="outlined"
             value={data.ssid}
@@ -124,7 +128,7 @@ const WiFiSettingsForm: FC = () => {
           <ValidatedPasswordField
             fieldErrors={fieldErrors}
             name="password"
-            label="Password"
+            label={LL.PASSWORD()}
             fullWidth
             variant="outlined"
             value={data.password}
@@ -136,7 +140,7 @@ const WiFiSettingsForm: FC = () => {
         <ValidatedTextField
           fieldErrors={fieldErrors}
           name="tx_power"
-          label="WiFi Tx Power"
+          label={'WiFi Tx ' + LL.POWER()}
           InputProps={{
             endAdornment: <InputAdornment position="end">dBm</InputAdornment>
           }}
@@ -150,21 +154,21 @@ const WiFiSettingsForm: FC = () => {
 
         <BlockFormControlLabel
           control={<Checkbox name="nosleep" checked={data.nosleep} onChange={updateFormValue} />}
-          label="Disable WiFi Sleep Mode"
+          label={LL.NETWORK_DISABLE_SLEEP()}
         />
 
         <BlockFormControlLabel
           control={<Checkbox name="bandwidth20" checked={data.bandwidth20} onChange={updateFormValue} />}
-          label="Use Lower WiFi Bandwidth"
+          label={LL.NETWORK_LOW_BAND()}
         />
 
         <BlockFormControlLabel
           control={<Checkbox name="enableMDNS" checked={data.enableMDNS} onChange={updateFormValue} />}
-          label="Enable mDNS Service"
+          label={LL.NETWORK_USE_DNS()}
         />
 
         <Typography sx={{ pt: 2 }} variant="h6" color="primary">
-          General
+          {LL.GENERAL_OPTIONS()}
         </Typography>
 
         <ValidatedTextField
@@ -180,12 +184,12 @@ const WiFiSettingsForm: FC = () => {
 
         <BlockFormControlLabel
           control={<Checkbox name="enableIPv6" checked={data.enableIPv6} onChange={updateFormValue} />}
-          label="Enable IPv6 support"
+          label={LL.NETWORK_ENABLE_IPV6()}
         />
 
         <BlockFormControlLabel
           control={<Checkbox name="static_ip_config" checked={data.static_ip_config} onChange={updateFormValue} />}
-          label="Use Fixed IP address"
+          label={LL.NETWORK_FIXED_IP()}
         />
         {data.static_ip_config && (
           <>
@@ -250,7 +254,7 @@ const WiFiSettingsForm: FC = () => {
             type="submit"
             onClick={validateAndSubmit}
           >
-            Save
+            {LL.SAVE()}
           </Button>
         </ButtonRow>
       </>
@@ -258,7 +262,7 @@ const WiFiSettingsForm: FC = () => {
   };
 
   return (
-    <SectionContent title="Network Settings" titleGutter>
+    <SectionContent title={LL.NETWORK() + ' ' + LL.SETTINGS()} titleGutter>
       {content()}
     </SectionContent>
   );

interface/src/framework/network/NetworkStatusForm.tsx

@@ -14,6 +14,8 @@ import { NetworkConnectionStatus, NetworkStatus } from '../../types';
 import * as NetworkApi from '../../api/network';
 import { useRest } from '../../utils';
 
+import { useI18nContext } from '../../i18n/i18n-react';
+
 const isConnected = ({ status }: NetworkStatus) =>
   status === NetworkConnectionStatus.WIFI_STATUS_CONNECTED ||
   status === NetworkConnectionStatus.ETHERNET_STATUS_CONNECTED;
@@ -35,29 +37,6 @@ const networkStatusHighlight = ({ status }: NetworkStatus, theme: Theme) => {
   }
 };
 
-const networkStatus = ({ status }: NetworkStatus) => {
-  switch (status) {
-    case NetworkConnectionStatus.WIFI_STATUS_NO_SHIELD:
-      return 'Inactive';
-    case NetworkConnectionStatus.WIFI_STATUS_IDLE:
-      return 'Idle';
-    case NetworkConnectionStatus.WIFI_STATUS_NO_SSID_AVAIL:
-      return 'No SSID Available';
-    case NetworkConnectionStatus.WIFI_STATUS_CONNECTED:
-      return 'Connected (WiFi)';
-    case NetworkConnectionStatus.ETHERNET_STATUS_CONNECTED:
-      return 'Connected (Ethernet)';
-    case NetworkConnectionStatus.WIFI_STATUS_CONNECT_FAILED:
-      return 'Connection Failed';
-    case NetworkConnectionStatus.WIFI_STATUS_CONNECTION_LOST:
-      return 'Connection Lost';
-    case NetworkConnectionStatus.WIFI_STATUS_DISCONNECTED:
-      return 'Disconnected';
-    default:
-      return 'Unknown';
-  }
-};
-
 export const isWiFi = ({ status }: NetworkStatus) => status === NetworkConnectionStatus.WIFI_STATUS_CONNECTED;
 export const isEthernet = ({ status }: NetworkStatus) => status === NetworkConnectionStatus.ETHERNET_STATUS_CONNECTED;
 
@@ -81,8 +60,33 @@ const IPs = (status: NetworkStatus) => {
 const NetworkStatusForm: FC = () => {
   const { loadData, data, errorMessage } = useRest<NetworkStatus>({ read: NetworkApi.readNetworkStatus });
 
+  const { LL } = useI18nContext();
+
   const theme = useTheme();
 
+  const networkStatus = ({ status }: NetworkStatus) => {
+    switch (status) {
+      case NetworkConnectionStatus.WIFI_STATUS_NO_SHIELD:
+        return LL.INACTIVE();
+      case NetworkConnectionStatus.WIFI_STATUS_IDLE:
+        return LL.IDLE();
+      case NetworkConnectionStatus.WIFI_STATUS_NO_SSID_AVAIL:
+        return 'No SSID Available';
+      case NetworkConnectionStatus.WIFI_STATUS_CONNECTED:
+        return LL.CONNECTED() + ' (WiFi)';
+      case NetworkConnectionStatus.ETHERNET_STATUS_CONNECTED:
+        return LL.CONNECTED() + ' (Ethernet)';
+      case NetworkConnectionStatus.WIFI_STATUS_CONNECT_FAILED:
+        return LL.CONNECTED() + ' ' + LL.FAILED();
+      case NetworkConnectionStatus.WIFI_STATUS_CONNECTION_LOST:
+        return LL.CONNECTED() + ' ' + LL.LOST();
+      case NetworkConnectionStatus.WIFI_STATUS_DISCONNECTED:
+        return LL.DISCONNECTED();
+      default:
+        return LL.UNKNOWN();
+    }
+  };
+
   const content = () => {
     if (!data) {
       return <FormLoader onRetry={loadData} errorMessage={errorMessage} />;
@@ -162,7 +166,7 @@ const NetworkStatusForm: FC = () => {
         </List>
         <ButtonRow>
           <Button startIcon={<RefreshIcon />} variant="outlined" color="secondary" onClick={loadData}>
-            Refresh
+            {LL.REFRESH()}
           </Button>
         </ButtonRow>
       </>
@@ -170,7 +174,7 @@ const NetworkStatusForm: FC = () => {
   };
 
   return (
-    <SectionContent title="Network Status" titleGutter>
+    <SectionContent title={LL.NETWORK() + ' ' + LL.STATUS()} titleGutter>
       {content()}
     </SectionContent>
   );

interface/src/framework/network/WiFiNetworkScanner.tsx

@@ -12,6 +12,8 @@ import { ButtonRow, FormLoader, SectionContent } from '../../components';
 
 import WiFiNetworkSelector from './WiFiNetworkSelector';
 
+import { useI18nContext } from '../../i18n/i18n-react';
+
 const NUM_POLLS = 10;
 const POLLING_FREQUENCY = 500;
 
@@ -22,6 +24,8 @@ const compareNetworks = (network1: WiFiNetwork, network2: WiFiNetwork) => {
 };
 
 const WiFiNetworkScanner: FC = () => {
+  const { LL } = useI18nContext();
+
   const { enqueueSnackbar } = useSnackbar();
 
   const pollCount = useRef(0);
@@ -46,7 +50,7 @@ const WiFiNetworkScanner: FC = () => {
           pollCount.current = completedPollCount;
           setTimeout(pollNetworkList, POLLING_FREQUENCY);
         } else {
-          finishedWithError('Device did not return network list in timely manner');
+          finishedWithError(LL.PROBLEM_LOADING());
         }
       } else {
         const newNetworkList = response.data;
@@ -55,12 +59,12 @@ const WiFiNetworkScanner: FC = () => {
       }
     } catch (error: unknown) {
       if (error instanceof AxiosError) {
-        finishedWithError('Problem listing WiFi networks ' + error.response?.data.message);
+        finishedWithError(LL.PROBLEM_LOADING() + ' ' + error.response?.data.message);
       } else {
-        finishedWithError('Problem listing WiFi networks');
+        finishedWithError(LL.PROBLEM_LOADING());
       }
     }
-  }, [finishedWithError]);
+  }, [finishedWithError, LL]);
 
   const startNetworkScan = useCallback(async () => {
     pollCount.current = 0;
@@ -71,12 +75,12 @@ const WiFiNetworkScanner: FC = () => {
       setTimeout(pollNetworkList, POLLING_FREQUENCY);
     } catch (error: unknown) {
       if (error instanceof AxiosError) {
-        finishedWithError('Problem scanning for WiFi networks ' + error.response?.data.message);
+        finishedWithError(LL.PROBLEM_LOADING() + ' ' + error.response?.data.message);
       } else {
-        finishedWithError('Problem scanning for WiFi networks');
+        finishedWithError(LL.PROBLEM_LOADING());
       }
     }
-  }, [finishedWithError, pollNetworkList]);
+  }, [finishedWithError, pollNetworkList, LL]);
 
   useEffect(() => {
     startNetworkScan();
@@ -84,13 +88,13 @@ const WiFiNetworkScanner: FC = () => {
 
   const renderNetworkScanner = () => {
     if (!networkList) {
-      return <FormLoader message="Scanning&hellip;" errorMessage={errorMessage} />;
+      return <FormLoader message={LL.SCANNING() + '...'} errorMessage={errorMessage} />;
     }
     return <WiFiNetworkSelector networkList={networkList} />;
   };
 
   return (
-    <SectionContent title="Network Scanner">
+    <SectionContent title={LL.NETWORK_SCANNER()}>
       {renderNetworkScanner()}
       <ButtonRow>
         <Button
@@ -100,7 +104,7 @@ const WiFiNetworkScanner: FC = () => {
           onClick={startNetworkScan}
           disabled={!errorMessage && !networkList}
         >
-          Scan again&hellip;
+          {LL.SCAN_AGAIN()}&hellip;
         </Button>
       </ButtonRow>
     </SectionContent>

interface/src/framework/network/WiFiNetworkSelector.tsx

@@ -12,6 +12,8 @@ import { WiFiEncryptionType, WiFiNetwork, WiFiNetworkList } from '../../types';
 
 import { WiFiConnectionContext } from './WiFiConnectionContext';
 
+import { useI18nContext } from '../../i18n/i18n-react';
+
 interface WiFiNetworkSelectorProps {
   networkList: WiFiNetworkList;
 }
@@ -39,6 +41,8 @@ export const networkSecurityMode = ({ encryption_type }: WiFiNetwork) => {
 };
 
 const WiFiNetworkSelector: FC<WiFiNetworkSelectorProps> = ({ networkList }) => {
+  const { LL } = useI18nContext();
+
   const wifiConnectionContext = useContext(WiFiConnectionContext);
 
   const renderNetwork = (network: WiFiNetwork) => {
@@ -61,7 +65,7 @@ const WiFiNetworkSelector: FC<WiFiNetworkSelectorProps> = ({ networkList }) => {
   };
 
   if (networkList.networks.length === 0) {
-    return <MessageBox mt={2} mb={1} message="No WiFi networks found" level="info" />;
+    return <MessageBox mt={2} mb={1} message={LL.NETWORK_NO_WIFI()} level="info" />;
   }
 
   return <List>{networkList.networks.map(renderNetwork)}</List>;