feat: i18n

Author: aruznieto

frontend/public/locales/en/common.json

@@ -58,5 +58,10 @@
   "logInFailed": "Invalid username or password",
   "tooManyAttempts": "Too many login attempts, please try again in 15 minutes.",
   "language": "Language",
-  "notAuthorized": "You are not authorized. Please Log In."
+  "notAuthorized": "You are not authorized. Please Log In.",
+  "saveChanges": "Save changes",
+  "optional": "Optional",
+  "destination": "Destination",
+  "username": "Username",
+  "password": "Password"
 }

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

@@ -51,12 +51,17 @@
   "start": "Inicio",
   "end": "Final",
   "autoAssignPool": "Rango de IPv4 autoasignables",
-  "ipv4AutoAssign": "IPv4 Auto-Assign",
+  "ipv4AutoAssign": "Rangos de IPv4 automáticos",
   "addIPv4Pool": "Añadir rango IPv4",
   "multicastLimit": "Límite de destinatarios multicast",
   "enableBroadcast": "Habilitar broadcast",
   "logInFailed": "Nombre de usuario o contraseña incorrecto",
   "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."
+  "notAuthorized": "No estás autorizado. Por favor, inicia sesión.",
+  "saveChanges": "Guardar cambios",
+  "optional": "Opcional",
+  "destination": "Destino",
+  "username": "Nombre de usuario",
+  "password": "Contraseña"
 }

frontend/src/components/LogIn/components/LogInUser/LogInUser.jsx

@@ -91,7 +91,7 @@ function LogInUser() {
               setUsername(e.target.value);
             }}
             margin="dense"
-            label="username"
+            label={t("username")}
             type="username"
             fullWidth
           />
@@ -101,7 +101,7 @@ function LogInUser() {
               setPassword(e.target.value);
             }}
             margin="dense"
-            label="password"
+            label={t("password")}
             type="password"
             fullWidth
           />

frontend/src/components/NetworkMembers/components/MemberSettings/MemberSettings.jsx

@@ -33,7 +33,9 @@ function MemberSettings({ member, network, handleChange }) {
         <BuildIcon style={{ fontSize: 20 }} />
       </IconButton>
       <Dialog open={open} onClose={handleClose}>
-        <DialogTitle>{"Member " + member.config.id + " settings"}</DialogTitle>
+        <DialogTitle>
+          {t("member") + member.config.id + t("settings")}
+        </DialogTitle>
         <DialogContent>
           <Grid item>
             <Checkbox

frontend/src/components/NetworkRules/NetworkRules.jsx

@@ -134,7 +134,7 @@ function NetworkRules({ network, callback }) {
             </Typography>
           ) : (
             <Button variant="contained" color="primary" onClick={saveChanges}>
-              Save Changes
+              {t("saveChanges")}
             </Button>
           )}
         </Grid>

frontend/src/components/NetworkSettings/components/IPv4AutoAssign/IPv4AutoAssign.jsx

@@ -145,7 +145,7 @@ function IPv4AutoAssign({ ipAssignmentPools, handleChange }) {
             <TextField
               value={start}
               onChange={handleStartInput}
-              placeholder={"Start"}
+              placeholder={t("start")}
             />
             <Divider
               orientation="vertical"
@@ -157,7 +157,7 @@ function IPv4AutoAssign({ ipAssignmentPools, handleChange }) {
             <TextField
               value={end}
               onChange={handleEndInput}
-              placeholder={"End"}
+              placeholder={t("end")}
             />
             <IconButton
               size="small"

frontend/src/components/NetworkSettings/components/ManagedRoutes/ManagedRoutes.jsx

@@ -74,12 +74,12 @@ function ManagedRoutes({ routes, handleChange }) {
     },
     {
       id: "target",
-      name: "Target",
+      name: t("target"),
       cell: (row) => row["target"],
     },
     {
       id: "via",
-      name: "via",
+      name: t("via"),
       cell: (row) => (row["via"] ? row["via"] : "(LAN)"),
     },
   ];
@@ -103,7 +103,7 @@ function ManagedRoutes({ routes, handleChange }) {
             <TextField
               value={destination}
               onChange={handleDestinationInput}
-              placeholder={"Destination (CIDR)"}
+              placeholder={t("destination") + " (CIDR)"}
             />
             <Divider
               orientation="vertical"
@@ -115,7 +115,7 @@ function ManagedRoutes({ routes, handleChange }) {
             <TextField
               value={via}
               onChange={handleViaInput}
-              placeholder={"Via (Optional)"}
+              placeholder={t("via") + " (" + t("optional") + ")"}
             />
             <IconButton size="small" color="primary" onClick={addRouteReq}>
               <AddIcon

frontend/src/routes/Network/Network.jsx

@@ -11,7 +11,10 @@ import { useLocalStorage } from "react-use";
 import API from "utils/API";
 import useStyles from "./Network.styles";
 
+import { useTranslation } from "react-i18next";
+
 function Network() {
+  const { t, i18n } = useTranslation();
   const { nwid } = useParams();
   const [loggedIn] = useLocalStorage("loggedIn", false);
   const [network, setNetwork] = useState({});
@@ -42,7 +45,7 @@ function Network() {
         <div className={classes.breadcrumbs}>
           <Link color="inherit" component={RouterLink} to="/" underline="none">
             <ArrowBackIcon className={classes.backIcon}></ArrowBackIcon>
-            Networks
+            {t("network", { count: 2 })}
           </Link>
         </div>
         <div className={classes.container}>
@@ -73,9 +76,7 @@ function Network() {
         }}
       >
         <Grid item xs={10}>
-          <Typography variant="h5">
-            You are not authorized. Please Log In
-          </Typography>
+          <Typography variant="h5">{t("notAuthorized")}</Typography>
         </Grid>
       </Grid>
     );