feat: i18n fix

backend/routes/auth.js

@@ -9,7 +9,7 @@ const loginLimiter = rateLimit({
   max: Number(process.env.ZT_TRIES_TO_BAN) || 50, // limit each IP to 50 requests per windowMs
   message: {
     status: 429,
-    error: "tooManyAttemps",
+    error: "tooManyAttempts",
   },
 });
 

frontend/public/locales/en/common.json

@@ -22,7 +22,7 @@
   "noDevices": "No devices have joined this network. Use the app on your devices to join",
   "member_one": "Member",
   "member_other": "Members",
-  "addMemberMan": "Manually Add Member",
+  "addMemberManually": "Manually Add Member",
   "name": "Name",
   "description": "Description",
   "allowBridging": "Allow Ethernet Bridging",
@@ -40,7 +40,7 @@
   "latency": "Latency",
   "settings": "Settings",
   "generalSettings": "General settings",
-  "netId": "Network ID",
+  "networkId": "Network ID",
   "accessControl": "Access control",
   "public": "Public",
   "private": "Private",
@@ -54,8 +54,9 @@
   "autoAssignPool": "IPv4 Auto-Assign",
   "addIPv4Pool": "Add IPv4 Pool",
   "multicastLimit": "Multicast Recipient Limit",
-  "enaBroadcast": "Enable Broadcast",
+  "enableBroadcast": "Enable Broadcast",
   "logInFailed": "Invalid username or password",
-  "tooManyAttemps": "Too many login attempts, please try again in 15 minutes.",
-  "language": "Language"
+  "tooManyAttempts": "Too many login attempts, please try again in 15 minutes.",
+  "language": "Language",
+  "notAuthorized": "You are not authorized. Please Log In."
 }

frontend/public/locales/es-ES/common.json

@@ -22,7 +22,7 @@
   "noDevices": "Ningún dispositivo se ha unido a esta red. Utilice la aplicación en sus dispositivos para unirse",
   "member_one": "Miembro",
   "member_other": "Miembros",
-  "addMemberMan": "Añadir miembro manualmente",
+  "addMemberManually": "Añadir miembro manualmente",
   "name": "Nombre",
   "description": "Descripción",
   "allowBridging": "Permitir puente Ethernet",
@@ -40,7 +40,7 @@
   "latency": "Latencia",
   "settings": "Ajustes",
   "generalSettings": "Ajustes generales",
-  "netId": "ID de red",
+  "networkId": "ID de red",
   "accessControl": "Control de acceso",
   "public": "Público",
   "private": "Privado",
@@ -54,8 +54,9 @@
   "ipv4AutoAssign": "IPv4 Auto-Assign",
   "addIPv4Pool": "Añadir rango IPv4",
   "multicastLimit": "Límite de destinatarios multicast",
-  "enaBroadcast": "Habilitar broadcast",
+  "enableBroadcast": "Habilitar broadcast",
   "logInFailed": "Nombre de usuario o contraseña incorrecto",
-  "tooManyAttemps": "Demasiados intentos de inicio de sesión. Vuelvee a intentarlo en 15 minutos",
-  "language": "Idioma"
+  "tooManyAttempts": "Demasiados intentos de inicio de sesión. Vuelvee a intentarlo en 15 minutos",
+  "language": "Idioma",
+  "notAuthorized": "No estás autorizado. Por favor, inicia sesión."
 }

frontend/src/components/HomeLoggedIn/HomeLoggedIn.jsx

@@ -50,7 +50,7 @@ function HomeLoggedIn() {
           <Typography variant="h5">{t("controllerNetworks")}</Typography>
           {networks[0] && t("controllerAddress")}
           <Box fontWeight="fontWeightBold">
-            {networks[0] && String(networks[0]["id"]).slice(0, 10)}
+            {networks[0] && networks[0]["id"].slice(0, 10)}
           </Box>
         </Grid>
         <Grid item xs="auto">

frontend/src/components/LogIn/LogIn.jsx

@@ -12,7 +12,6 @@ function LogIn() {
           <Divider orientation="vertical" />
         </>
       )}
-      &nbsp;
       <LogInUser />
     </>
   );

frontend/src/components/NetworkMembers/components/AddMember/AddMember.jsx

@@ -30,7 +30,7 @@ function AddMember({ nwid, callback }) {
 
   return (
     <>
-      <Typography>{t("addMemberMan")}</Typography>
+      <Typography>{t("addMemberManually")}</Typography>
       <List
         disablePadding={true}
         style={{

frontend/src/components/NetworkSettings/NetworkSettings.jsx

@@ -51,7 +51,7 @@ function NetworkSettings({ network, setNetwork }) {
       <AccordionDetails>
         <Grid container direction="column" spacing={3}>
           <Grid item>
-            <Typography>{t("netId")}</Typography>
+            <Typography>{t("networkId")}</Typography>
             <Typography variant="h5">
               <span>{network["config"]["id"]}</span>
             </Typography>
@@ -129,7 +129,7 @@ function NetworkSettings({ network, setNetwork }) {
               color="primary"
               onChange={handleChange("config", "enableBroadcast", "checkbox")}
             />
-            <span>{t("enaBroadcast")}</span>
+            <span>{t("enableBroadcast")}</span>
           </Grid>
           {/* TODO: */}
           {/* <Grid item>

frontend/src/components/Settings/Settings.jsx

@@ -16,7 +16,7 @@ import { parseValue, replaceValue, setValue } from "utils/ChangeHelper";
 
 import { useTranslation } from "react-i18next";
 
-function SettingsComponent() {
+function Settings() {
   const { t, i18n } = useTranslation();
 
   const handleChange = () => (event) => {
@@ -40,4 +40,4 @@ function SettingsComponent() {
   );
 }
 
-export default SettingsComponent;
+export default Settings;

frontend/src/components/Settings/index.jsx

@@ -0,0 +1 @@
+export { default } from "./Settings";

frontend/src/components/SettingsComponent/index.jsx

@@ -1 +0,0 @@
-export { default } from "./SettingsComponent";

frontend/src/i18n.js

@@ -11,14 +11,12 @@ i18n
   .use(Backend)
   .init({
     compatibilityJSON: "v4",
-    //lng: "en",
     fallbackLng: "en",
     detection: {
       order: ["path", "cookie", "localStorage", "htmlTag"],
-      caches: ["localStorage", "cookie"], // cache user language on
+      caches: ["localStorage", "cookie"],
     },
     debug: true,
-    //keySeparator: false, // we use content as keys
     interpolation: {
       escapeValue: true,
     },

frontend/src/routes/Settings/Settings.jsx

@@ -1,11 +1,10 @@
 import { Grid, Link, Typography } from "@material-ui/core";
 import ArrowBackIcon from "@material-ui/icons/ArrowBack";
-import SettingsComponent from "components/SettingsComponent";
+import SettingsComponent from "components/Settings";
 
-import { useCallback, useEffect, useState } from "react";
-import { Link as RouterLink, useHistory, useParams } from "react-router-dom";
+import { Link as RouterLink } from "react-router-dom";
 import { useLocalStorage } from "react-use";
-import API from "utils/API";
+
 import useStyles from "./Settings.styles";
 
 import { useTranslation } from "react-i18next";
@@ -13,10 +12,8 @@ import { useTranslation } from "react-i18next";
 function Settings() {
   const { t, i18n } = useTranslation();
   const [loggedIn] = useLocalStorage("loggedIn", false);
-  const [network, setNetwork] = useState({});
 
   const classes = useStyles();
-  const history = useHistory();
 
   if (loggedIn) {
     return (
@@ -45,9 +42,7 @@ function Settings() {
         }}
       >
         <Grid item xs={10}>
-          <Typography variant="h5">
-            You are not authorized. Please Log In
-          </Typography>
+          <Typography variant="h5">{t("notAuthorized")}</Typography>
         </Grid>
       </Grid>
     );