feat: i18n add settings page

frontend/public/locales/en/common.json

@@ -56,5 +56,6 @@
   "multicastLimit": "Multicast Recipient Limit",
   "enaBroadcast": "Enable Broadcast",
   "logInFailed": "Invalid username or password",
-  "tooManyAttemps": "Too many login attempts, please try again in 15 minutes."
+  "tooManyAttemps": "Too many login attempts, please try again in 15 minutes.",
+  "language": "Language"
 }

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

@@ -56,5 +56,6 @@
   "multicastLimit": "Límite de destinatarios multicast",
   "enaBroadcast": "Habilitar broadcast",
   "logInFailed": "Nombre de usuario o contraseña incorrecto",
-  "tooManyAttemps": "Demasiados intentos de inicio de sesión. Vuelvee a intentarlo en 15 minutos"
+  "tooManyAttemps": "Demasiados intentos de inicio de sesión. Vuelvee a intentarlo en 15 minutos",
+  "language": "Idioma"
 }

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

@@ -1,17 +0,0 @@
-{
-  "flowRules": "Reglas de flujo",
-  "createNetwork": "Crear una red",
-  "controllerNetworks": "Controlador de redes",
-  "network_one": "Red",
-  "network_other": "Redes",
-  "controllerAddress": "Dirección del controlador",
-  "loginToContinue": "Por favor, inicia sesión para continuar",
-  "zerouiDesc": "ZeroUI - ZeroTier Controller Web UI - es una interfaz de usuario web para un controlador de red ZeroTier self-hosted.",
-  "logIn": "Iniciar sesión",
-  "cancel": "Cancelar",
-  "management": "Gestión",
-  "deleteNetwork": "Borrar red",
-  "deleteAlert": "Esta acción no puede ser revertida.",
-  "deleteNetworkConfirm": "¿Seguro que deseas borrar la red?",
-  "delete": "Borrar"
-}

frontend/src/App.jsx

@@ -8,6 +8,7 @@ import Bar from "./components/Bar";
 import Home from "./routes/Home";
 import NotFound from "./routes/NotFound";
 import Network from "./routes/Network/Network";
+import Settings from "./routes/Settings";
 
 function App() {
   return (
@@ -17,6 +18,7 @@ function App() {
         <Switch>
           <Route exact path="/" component={Home} />
           <Route path="/network/:nwid" component={Network} />
+          <Route path="/settings" component={Settings} />
           <Route path="/404" component={NotFound} />
           <Redirect to="/404" />
         </Switch>

frontend/src/components/Bar/Bar.jsx

@@ -48,7 +48,7 @@ function Bar() {
   const menuItems = [
     // TODO: add settings page
     {
-      name: "Settings",
+      name: t("settings"),
       to: "/settings",
     },
     ...(!disabledAuth

frontend/src/components/SettingsComponent/SettingsComponent.jsx

@@ -0,0 +1,43 @@
+import {
+  Accordion,
+  AccordionSummary,
+  AccordionDetails,
+  Checkbox,
+  Divider,
+  Grid,
+  Typography,
+  TextField,
+  Select,
+} from "@material-ui/core";
+import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
+
+import API from "utils/API";
+import { parseValue, replaceValue, setValue } from "utils/ChangeHelper";
+
+import { useTranslation } from "react-i18next";
+
+function SettingsComponent() {
+  const { t, i18n } = useTranslation();
+
+  const handleChange = () => (event) => {
+    i18n.changeLanguage(event.target.value);
+  };
+
+  return (
+    <Accordion>
+      <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+        <Typography>{t("language")}</Typography>
+      </AccordionSummary>
+      <AccordionDetails>
+        <Grid item>
+          <Select native value={i18n.language} onChange={handleChange()}>
+            <option value={"en"}>English</option>
+            <option value={"es-ES"}>Spanish</option>
+          </Select>
+        </Grid>
+      </AccordionDetails>
+    </Accordion>
+  );
+}
+
+export default SettingsComponent;

frontend/src/components/SettingsComponent/index.jsx

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

frontend/src/i18n.js

@@ -21,12 +21,12 @@ i18n
     react: {
       useSuspense: false,
     },
-    supportedLngs: ["en", "es", "es-ES"],
+    supportedLngs: ["en", "es-ES"],
     backend: {
       loadPath: "/locales/{{lng}}/{{ns}}.json",
     },
-    ns: ["translation"],
-    defaultNS: "translation",
+    ns: ["common"],
+    defaultNS: "common",
   });
 
 export default i18n;

frontend/src/routes/Settings/Settings.jsx

@@ -0,0 +1,57 @@
+import { Grid, Link, Typography } from "@material-ui/core";
+import ArrowBackIcon from "@material-ui/icons/ArrowBack";
+import SettingsComponent from "components/SettingsComponent";
+
+import { useCallback, useEffect, useState } from "react";
+import { Link as RouterLink, useHistory, useParams } from "react-router-dom";
+import { useLocalStorage } from "react-use";
+import API from "utils/API";
+import useStyles from "./Settings.styles";
+
+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 (
+      <>
+        <div className={classes.breadcrumbs}>
+          <Link color="inherit" component={RouterLink} to="/" underline="none">
+            <ArrowBackIcon className={classes.backIcon}></ArrowBackIcon>
+            {t("settings")}
+          </Link>
+        </div>
+        <div className={classes.container}>
+          <SettingsComponent />
+        </div>
+      </>
+    );
+  } else {
+    return (
+      <Grid
+        container
+        spacing={0}
+        direction="column"
+        alignItems="center"
+        justify="center"
+        style={{
+          minHeight: "50vh",
+        }}
+      >
+        <Grid item xs={10}>
+          <Typography variant="h5">
+            You are not authorized. Please Log In
+          </Typography>
+        </Grid>
+      </Grid>
+    );
+  }
+}
+
+export default Settings;

frontend/src/routes/Settings/Settings.styles.jsx

@@ -0,0 +1,16 @@
+import { makeStyles } from "@material-ui/core/styles";
+
+const useStyles = makeStyles((theme) => ({
+  backIcon: {
+    fontSize: 12,
+  },
+  container: {
+    margin: "3%",
+  },
+  breadcrumbs: {
+    paddingTop: "2%",
+    paddingLeft: "2%",
+  },
+}));
+
+export default useStyles;

frontend/src/routes/Settings/index.jsx

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