translate NTP, AP, MQTT and User

interface/src/framework/ap/APSettingsForm.tsx

@@ -19,6 +19,8 @@ import { APProvisionMode, APSettings } from '../../types';
 import { numberValue, updateValue, useRest } from '../../utils';
 import * as APApi from '../../api/ap';
 
+import { useI18nContext } from '../../i18n/i18n-react';
+
 export const isAPEnabled = ({ provision_mode }: APSettings) => {
   return provision_mode === APProvisionMode.AP_MODE_ALWAYS || provision_mode === APProvisionMode.AP_MODE_DISCONNECTED;
 };
@@ -29,6 +31,8 @@ const APSettingsForm: FC = () => {
     update: APApi.updateAPSettings
   });
 
+  const { LL } = useI18nContext();
+
   const [fieldErrors, setFieldErrors] = useState<ValidateFieldsError>();
 
   const updateFormValue = updateValue(setData);
@@ -53,7 +57,7 @@ const APSettingsForm: FC = () => {
         <ValidatedTextField
           fieldErrors={fieldErrors}
           name="provision_mode"
-          label="Provide Access Point&hellip;"
+          label={LL.AP_PROVIDE() + '...'}
           value={data.provision_mode}
           fullWidth
           select
@@ -61,16 +65,16 @@ const APSettingsForm: FC = () => {
           onChange={updateFormValue}
           margin="normal"
         >
-          <MenuItem value={APProvisionMode.AP_MODE_ALWAYS}>Always</MenuItem>
-          <MenuItem value={APProvisionMode.AP_MODE_DISCONNECTED}>When WiFi Disconnected</MenuItem>
-          <MenuItem value={APProvisionMode.AP_NEVER}>Never</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) && (
           <>
             <ValidatedTextField
               fieldErrors={fieldErrors}
               name="ssid"
-              label="Access Point SSID"
+              label={LL.ACCESS_POINT() + ' SSID'}
               fullWidth
               variant="outlined"
               value={data.ssid}
@@ -80,7 +84,7 @@ const APSettingsForm: FC = () => {
             <ValidatedPasswordField
               fieldErrors={fieldErrors}
               name="password"
-              label="Access Point Password"
+              label={LL.ACCESS_POINT() + ' ' + LL.PASSWORD()}
               fullWidth
               variant="outlined"
               value={data.password}
@@ -90,7 +94,7 @@ const APSettingsForm: FC = () => {
             <ValidatedTextField
               fieldErrors={fieldErrors}
               name="channel"
-              label="Preferred Channel"
+              label={LL.AP_PREFERRED_CHANNEL()}
               value={numberValue(data.channel)}
               fullWidth
               select
@@ -107,7 +111,7 @@ const APSettingsForm: FC = () => {
             </ValidatedTextField>
             <BlockFormControlLabel
               control={<Checkbox name="ssid_hidden" checked={data.ssid_hidden} onChange={updateFormValue} />}
-              label="Hide SSID"
+              label={LL.AP_HIDE_SSID()}
             />
             <ValidatedTextField
               fieldErrors={fieldErrors}
@@ -168,7 +172,7 @@ const APSettingsForm: FC = () => {
             type="submit"
             onClick={validateAndSubmit}
           >
-            Save
+            {LL.SAVE()}
           </Button>
         </ButtonRow>
       </>
@@ -176,7 +180,7 @@ const APSettingsForm: FC = () => {
   };
 
   return (
-    <SectionContent title="Access Point Settings" titleGutter>
+    <SectionContent title={LL.ACCESS_POINT() + ' ' + LL.SETTINGS()} titleGutter>
       {content()}
     </SectionContent>
   );

interface/src/framework/ap/APStatusForm.tsx

@@ -11,6 +11,8 @@ import { APNetworkStatus, APStatus } from '../../types';
 import { ButtonRow, FormLoader, SectionContent } from '../../components';
 import { useRest } from '../../utils';
 
+import { useI18nContext } from '../../i18n/i18n-react';
+
 export const apStatusHighlight = ({ status }: APStatus, theme: Theme) => {
   switch (status) {
     case APNetworkStatus.ACTIVE:
@@ -24,24 +26,26 @@ export const apStatusHighlight = ({ status }: APStatus, theme: Theme) => {
   }
 };
 
-export const apStatus = ({ status }: APStatus) => {
-  switch (status) {
-    case APNetworkStatus.ACTIVE:
-      return 'Active';
-    case APNetworkStatus.INACTIVE:
-      return 'Inactive';
-    case APNetworkStatus.LINGERING:
-      return 'Lingering until idle';
-    default:
-      return 'Unknown';
-  }
-};
-
 const APStatusForm: FC = () => {
   const { loadData, data, errorMessage } = useRest<APStatus>({ read: APApi.readAPStatus });
 
+  const { LL } = useI18nContext();
+
   const theme = useTheme();
 
+  const apStatus = ({ status }: APStatus) => {
+    switch (status) {
+      case APNetworkStatus.ACTIVE:
+        return LL.ACTIVE();
+      case APNetworkStatus.INACTIVE:
+        return LL.INACTIVE();
+      case APNetworkStatus.LINGERING:
+        return 'Lingering until idle';
+      default:
+        return LL.UNKNOWN();
+    }
+  };
+
   const content = () => {
     if (!data) {
       return <FormLoader onRetry={loadData} errorMessage={errorMessage} />;
@@ -56,7 +60,7 @@ const APStatusForm: FC = () => {
                 <SettingsInputAntennaIcon />
               </Avatar>
             </ListItemAvatar>
-            <ListItemText primary="Status" secondary={apStatus(data)} />
+            <ListItemText primary={LL.STATUS()} secondary={apStatus(data)} />
           </ListItem>
           <Divider variant="inset" component="li" />
           <ListItem>
@@ -87,7 +91,7 @@ const APStatusForm: FC = () => {
         </List>
         <ButtonRow>
           <Button startIcon={<RefreshIcon />} variant="outlined" color="secondary" onClick={loadData}>
-            Refresh
+            {LL.REFRESH()}
           </Button>
         </ButtonRow>
       </>
@@ -95,7 +99,7 @@ const APStatusForm: FC = () => {
   };
 
   return (
-    <SectionContent title="Access Point Status" titleGutter>
+    <SectionContent title={LL.ACCESS_POINT() + ' ' + LL.STATUS()} titleGutter>
       {content()}
     </SectionContent>
   );

interface/src/framework/ap/AccessPoint.tsx

@@ -8,8 +8,12 @@ import APStatusForm from './APStatusForm';
 import APSettingsForm from './APSettingsForm';
 import { RequireAdmin, RouterTabs, useLayoutTitle, useRouterTab } from '../../components';
 
+import { useI18nContext } from '../../i18n/i18n-react';
+
 const AccessPoint: FC = () => {
-  useLayoutTitle('Access Point');
+  const { LL } = useI18nContext();
+
+  useLayoutTitle(LL.ACCESS_POINT());
 
   const authenticatedContext = useContext(AuthenticatedContext);
 
@@ -18,8 +22,12 @@ const AccessPoint: FC = () => {
   return (
     <>
       <RouterTabs value={routerTab}>
-        <Tab value="status" label="Access Point Status" />
-        <Tab value="settings" label="Access Point Settings" disabled={!authenticatedContext.me.admin} />
+        <Tab value="status" label={LL.ACCESS_POINT() + ' ' + LL.STATUS()} />
+        <Tab
+          value="settings"
+          label={LL.ACCESS_POINT() + ' ' + LL.SETTINGS()}
+          disabled={!authenticatedContext.me.admin}
+        />
       </RouterTabs>
       <Routes>
         <Route path="status" element={<APStatusForm />} />