Merge pull request #217 from chenxudong2020/main

Add Chinese language support

.gitignore

@@ -150,15 +150,9 @@ sketch
 
 .yarn/*
 !.yarn/releases
+!.yarn/patches
 !.yarn/plugins
 !.yarn/sdks
 !.yarn/versions
 
-# if you are NOT using Zero-installs, then:
-# comment the following lines
-!.yarn/cache
-
-# and uncomment the following lines
-# .pnp.*
-
 # End of https://www.toptal.com/developers/gitignore/api/vscode,yarn,react,node

.yarnrc.yml

@@ -1,7 +1,5 @@
-compressionLevel: mixed
+enableGlobalCache: true
 
-enableGlobalCache: false
+enableTelemetry: false
 
 nodeLinker: node-modules
-
-yarnPath: .yarn/releases/yarn-4.0.0-rc.53.cjs

README.md

@@ -165,9 +165,12 @@ Advanced manual setups are also supported. Check the following environment varia
 | ZU_DEFAULT_USERNAME | unset (`docker-compose.yml`: admin) | Default username that will be set on the first run |
 | ZU_DEFAULT_PASSWORD | unset (`docker-compose.yml`: zero-ui) | Default password that will be set on the first run |
 | ZU_DATAPATH | `data/db.json` | ZeroUI data storage path |
-| ZU_DISABLE_AUTH | unset | If set to true, automatically log in all users. This is useful if ZeroUI is protected by an authentication proxy. Note that when this value is changed, the localStorage of instances of logged-in panels should be cleared |
+| ZU_DISABLE_AUTH | `false` | If set to true, automatically log in all users. This is useful if ZeroUI is protected by an authentication proxy. Note that when this value is changed, the localStorage of instances of logged-in panels should be cleared |
 | ZU_LAST_SEEN_FETCH | `true`| Enables [Last Seen feature](https://github.com/dec0dOS/zero-ui/issues/40) |
 | ZU_LAST_SEEN_SCHEDULE | `*/5 * * * *` | Last Seen cron-like schedule |
+| ZU_LOGIN_LIMIT | `false` | Enable rate limiter for /login endpoint |
+| ZU_LOGIN_LIMIT_WINDOW | 30 | The duration of the IP ban in minutes |
+| ZU_LOGIN_LIMIT_ATTEMPTS | 50 | Login attemps before ban |
 
 ZeroUI could be deployed as a regular nodejs web application, but it requires a ZeroTier controller that is installed with the `zerotier-one` package. For more info about the network controller, you could read [here](https://github.com/zerotier/ZeroTierOne/tree/master/controller/#readme).
 
@@ -197,7 +200,7 @@ For more information, please refer to this [discussion](https://github.com/dec0d
 
 After installation, log in with the credentials declared with `ZU_DEFAULT_USERNAME` and `ZU_DEFAULT_PASSWORD`.
 
-Currently, almost all main ZeroTier Central features are available. Refer to the [roadmap](#roadmap) for more information.
+Currently, some main ZeroTier Central features are missing. Refer to the [roadmap](#roadmap) for more information.
 
 _For screenshots, please refer to the [screenshots](docs/SCREENSHOTS.md) section._
 
@@ -209,7 +212,7 @@ To get the latest version, simply run
 docker-compose pull && docker-compose up -d --no-build
 ```
 
-in the folder where `docker-compose.yml` is located. While backups are not required as your data is saved in Docker volumes, it is recommended.
+in the folder where `docker-compose.yml` is located. Backups may not be necessary since most of your data is usually saved at the controller level, but it's still a good idea to consider them as a precautionary measure.
 
 ### Backup
 
@@ -288,7 +291,7 @@ Afterward, you can start the ZeroUI development environment:
 ZU_CONTROLLER_TOKEN=TOKEN_FROM_authtoken.secret yarn dev
 ```
 
-For other platforms, please refer to the [ZeroTier manual](https://www.zerotier.com/manual/#4).
+For other platforms, please refer to the [ZeroTier manual](https://docs.zerotier.com/service/v1/).
 
 ## Support
 

backend/app.js

@@ -1,21 +1,23 @@
-const express = require("express");
+import path from "path";
-const path = require("path");
+import * as url from "url";
-const logger = require("morgan");
+import express from "express";
-const compression = require("compression");
+import logger from "morgan";
-const bearerToken = require("express-bearer-token");
+import compression from "compression";
-const helmet = require("helmet");
+import bearerToken from "express-bearer-token";
-const cron = require("node-cron");
+import helmet from "helmet";
+import { Cron } from "croner";
 
-const db = require("./utils/db");
+import { db } from "./utils/db.js";
-const initAdmin = require("./utils/init-admin");
+import { initAdmin } from "./utils/init-admin.js";
-const pingAll = require("./utils/ping");
+import { pingAll } from "./utils/ping.js";
 
-const authRoutes = require("./routes/auth");
+import authRoutes from "./routes/auth.js";
-const networkRoutes = require("./routes/network");
+import networkRoutes from "./routes/network.js";
-const memberRoutes = require("./routes/member");
+import memberRoutes from "./routes/member.js";
-const controllerRoutes = require("./routes/controller");
+import controllerRoutes from "./routes/controller.js";
 
 const app = express();
+const __dirname = url.fileURLToPath(new URL(".", import.meta.url));
 
 app.use(logger("dev"));
 app.use(express.json());
@@ -49,6 +51,10 @@ if (
     ["/app", "/app/*"],
     express.static(path.join(__dirname, "..", "frontend", "build"))
   );
+  app.use(
+    ["/locales", "/locales/*"],
+    express.static(path.join(__dirname, "..", "frontend", "build", "locales"))
+  );
   app.get(["/app/network/*"], function (req, res) {
     res.sendFile(path.join(__dirname, "..", "frontend", "build", "index.html"));
   });
@@ -63,7 +69,7 @@ initAdmin().then(function (admin) {
 
 if (process.env.ZU_LAST_SEEN_FETCH !== "false") {
   let schedule = process.env.ZU_LAST_SEEN_SCHEDULE || "*/5 * * * *";
-  cron.schedule(schedule, () => {
+  Cron(schedule, () => {
     console.debug("Running scheduled job");
     const networks = db.get("networks").value();
     networks.forEach(async (network) => {
@@ -93,4 +99,4 @@ app.use(function (err, req, res, next) {
   res.status(500).json({ error: "500 Internal server error" });
 });
 
-module.exports = app;
+export default app;

backend/bin/www.js

@@ -1,13 +1,15 @@
 #!/usr/bin/env node
-require("dotenv").config();
+import dotenv from "dotenv";
+dotenv.config();
 
 /**
  * Module dependencies.
  */
 
-var app = require("../app");
+import app from "../app.js";
-var debug = require("debug")("zero-ui:server");
+
-var http = require("http");
+console.log("zero-ui:server");
+import http from "node:http";
 
 /**
  * Get port from environment and store in Express.
@@ -82,6 +84,6 @@ function onError(error) {
 
 function onListening() {
   var addr = server.address();
-  var bind = typeof addr === "string" ? "pipe " + addr : "port " + addr.port;
+  var bind = typeof addr === "string" ? "pipe " + addr : "port " + addr?.port;
-  debug("Listening on " + bind);
+  console.log("Listening on " + bind);
 }

backend/package.json

@@ -1,6 +1,7 @@
 {
   "name": "backend",
   "private": true,
+  "type": "module",
   "scripts": {
     "start": "node ./bin/www",
     "lint": "eslint . --report-unused-disable-directives --max-warnings 0",
@@ -9,22 +10,27 @@
   "dependencies": {
     "axios": "^0.27.2",
     "compression": "^1.7.4",
+    "croner": "^7.0.2",
     "debug": "^4.3.4",
     "dotenv": "^16.3.1",
     "express": "^4.18.2",
     "express-bearer-token": "^2.4.0",
+    "express-rate-limit": "^7.1.1",
     "helmet": "^5.1.1",
     "lodash": "^4.17.21",
     "lowdb": "^1.0.0",
     "morgan": "^1.10.0",
-    "node-cron": "^3.0.2",
     "pbkdf2-wrapper": "^1.3.4"
   },
   "devDependencies": {
+    "@types/compression": "^1.7.3",
+    "@types/debug": "^4.1.9",
     "@types/express": "^4.17.18",
+    "@types/lodash": "^4.14.199",
+    "@types/morgan": "^1.9.6",
     "@typescript-eslint/eslint-plugin": "^6.7.4",
     "@typescript-eslint/parser": "^6.7.4",
-    "eslint": "^8.50.0",
+    "eslint": "^8.51.0",
     "eslint-plugin-import": "^2.28.1",
     "eslint-plugin-jsdoc": "^46.8.2",
     "eslint-plugin-n": "^16.1.0",

backend/routes/auth.js

@@ -1,7 +1,29 @@
-const express = require("express");
+import express from "express";
+import rateLimit from "express-rate-limit";
+
 const router = express.Router();
 
-const auth = require("../services/auth");
+import * as auth from "../services/auth.js";
+
+const loginLimiter = rateLimit({
+  windowMs: (Number(process.env.ZU_LOGIN_LIMIT_WINDOW) || 30) * 60 * 1000, // 30 minutes
+  max: Number(process.env.ZU_LOGIN_LIMIT_ATTEMPTS) || 50, // limit each IP to 50 requests per windowMs
+  message: {
+    status: 429,
+    error: "tooManyAttempts",
+  },
+});
+
+const loginLimiterWrapper = (req, res, next) => {
+  if (
+    process.env.NODE_ENV === "production" &&
+    process.env.ZU_LOGIN_LIMIT === "true"
+  ) {
+    return loginLimiter(req, res, next);
+  } else {
+    return next();
+  }
+};
 
 router.get("/login", async function (req, res) {
   if (process.env.ZU_DISABLE_AUTH === "true") {
@@ -11,7 +33,7 @@ router.get("/login", async function (req, res) {
   }
 });
 
-router.post("/login", async function (req, res) {
+router.post("/login", loginLimiterWrapper, async function (req, res) {
   if (req.body.username && req.body.password) {
     auth.authorize(req.body.username, req.body.password, function (err, user) {
       if (user) {
@@ -27,4 +49,4 @@ router.post("/login", async function (req, res) {
   }
 });
 
-module.exports = router;
+export default router;

backend/routes/controller.js

@@ -1,8 +1,8 @@
-const express = require("express");
+import express from "express";
 const router = express.Router();
 
-const auth = require("../services/auth");
+import * as auth from "../services/auth.js";
-const api = require("../utils/controller-api");
+import { api } from "../utils/controller-api.js";
 
 router.get("/status", auth.isAuthorized, async function (req, res) {
   api.get("status").then(function (controllerRes) {
@@ -10,4 +10,4 @@ router.get("/status", auth.isAuthorized, async function (req, res) {
   });
 });
 
-module.exports = router;
+export default router;

backend/routes/member.js

@@ -1,10 +1,10 @@
-const express = require("express");
+import express from "express";
 const router = express.Router({ mergeParams: true });
 
-const auth = require("../services/auth");
+import * as auth from "../services/auth.js";
-const member = require("../services/member");
+import * as member from "../services/member.js";
 
-const api = require("../utils/controller-api");
+import { api } from "../utils/controller-api.js";
 
 // get all members
 router.get("/", auth.isAuthorized, async function (req, res) {
@@ -86,4 +86,4 @@ router.delete("/:mid", auth.isAuthorized, async function (req, res) {
     });
 });
 
-module.exports = router;
+export default router;

backend/routes/network.js

@@ -1,12 +1,12 @@
-const express = require("express");
+import express from "express";
 const router = express.Router();
 
-const auth = require("../services/auth");
+import * as auth from "../services/auth.js";
-const network = require("../services/network");
+import * as network from "../services/network.js";
 
-const api = require("../utils/controller-api");
+import { api } from "../utils/controller-api.js";
-const constants = require("../utils/constants");
+import { defaultRules } from "../utils/constants.js";
-const getZTAddress = require("../utils/zt-address");
+import { getZTAddress } from "../utils/zt-address.js";
 
 let ZT_ADDRESS = null;
 getZTAddress().then(function (address) {
@@ -40,7 +40,7 @@ router.post("/", auth.isAuthorized, async function (req, res) {
     const config = reqData.config;
     delete reqData.config;
     reqData = config;
-    reqData.rules = JSON.parse(constants.defaultRules);
+    reqData.rules = JSON.parse(defaultRules);
   } else {
     res.status(400).send({ error: "Bad request" });
   }
@@ -87,4 +87,4 @@ router.delete("/:nwid", auth.isAuthorized, async function (req, res) {
     });
 });
 
-module.exports = router;
+export default router;

backend/services/auth.js

@@ -1,25 +1,23 @@
-const db = require("../utils/db");
+import { db } from "../utils/db.js";
-const verifyHash = require("pbkdf2-wrapper/verifyHash");
+import verifyHash from "pbkdf2-wrapper/verifyHash.js";
 
-exports.authorize = authorize;
+export async function authorize(username, password, callback) {
-async function authorize(username, password, callback) {
   try {
     var users = await db.get("users");
   } catch (err) {
     throw err;
   }
   const user = users.find({ username: username });
-  if (!user.value()) return callback(new Error("Cannot find user"));
+  if (!user.value()) return callback(new Error("logInFailed")); // If return "user not found" someone can do a user listing
   const verified = await verifyHash(password, user.value()["password_hash"]);
   if (verified) {
     return callback(null, user.value());
   } else {
-    return callback(new Error("Invalid password"));
+    return callback(new Error("logInFailed"));
   }
 }
 
-exports.isAuthorized = isAuthorized;
+export async function isAuthorized(req, res, next) {
-async function isAuthorized(req, res, next) {
   if (process.env.ZU_DISABLE_AUTH === "true") {
     next();
   } else {

backend/services/member.js

@@ -1,9 +1,9 @@
-const _ = require("lodash");
+import _ from "lodash";
-const axios = require("axios");
+import axios from "axios";
 
-const api = require("../utils/controller-api");
+import { api } from "../utils/controller-api.js";
-const db = require("../utils/db");
+import { db } from "../utils/db.js";
-const getZTAddress = require("../utils/zt-address");
+import { getZTAddress } from "../utils/zt-address.js";
 
 let ZT_ADDRESS = null;
 getZTAddress().then(function (address) {
@@ -91,8 +91,7 @@ async function filterDeleted(nwid, mid) {
   else return;
 }
 
-exports.getMembersData = getMembersData;
+export async function getMembersData(nwid, mids) {
-async function getMembersData(nwid, mids) {
   const prefix = "/controller/network/" + nwid + "/member/";
   const filtered = (
     await Promise.all(mids.map(async (mid) => await filterDeleted(nwid, mid)))
@@ -119,8 +118,7 @@ async function getMembersData(nwid, mids) {
   return data;
 }
 
-exports.updateMemberAdditionalData = updateMemberAdditionalData;
+export async function updateMemberAdditionalData(nwid, mid, data) {
-async function updateMemberAdditionalData(nwid, mid, data) {
   if (data.config && data.config.authorized) {
     db.get("networks")
       .filter({ id: nwid })
@@ -172,8 +170,7 @@ async function updateMemberAdditionalData(nwid, mid, data) {
   }
 }
 
-exports.deleteMemberAdditionalData = deleteMemberAdditionalData;
+export async function deleteMemberAdditionalData(nwid, mid) {
-async function deleteMemberAdditionalData(nwid, mid) {
   // ZT controller bug
   /* db.get("networks")
        .find({ id: nwid })

backend/services/network.js

@@ -1,11 +1,11 @@
-const _ = require("lodash");
+import _ from "lodash";
-const axios = require("axios");
+import axios from "axios";
 
-const api = require("../utils/controller-api");
+import { api } from "../utils/controller-api.js";
-const db = require("../utils/db");
+import { db } from "../utils/db.js";
-const constants = require("../utils/constants");
+import { defaultRulesSource } from "../utils/constants.js";
 
-async function getNetworkAdditionalData(data) {
+export async function getNetworkAdditionalData(data) {
   let additionalData = db
     .get("networks")
     .find({ id: data.id })
@@ -29,8 +29,7 @@ async function getNetworkAdditionalData(data) {
   };
 }
 
-exports.getNetworksData = getNetworksData;
+export async function getNetworksData(nwids) {
-async function getNetworksData(nwids) {
   const prefix = "/controller/network/";
   const links = nwids.map((nwid) => prefix + nwid);
 
@@ -54,13 +53,12 @@ async function getNetworksData(nwids) {
   return data;
 }
 
-exports.createNetworkAdditionalData = createNetworkAdditionalData;
+export async function createNetworkAdditionalData(nwid) {
-async function createNetworkAdditionalData(nwid) {
   const saveData = {
     id: nwid,
     additionalConfig: {
       description: "",
-      rulesSource: constants.defaultRulesSource,
+      rulesSource: defaultRulesSource,
       tagsByName: {},
       capabilitiesByName: {},
     },
@@ -70,8 +68,7 @@ async function createNetworkAdditionalData(nwid) {
   db.get("networks").push(saveData).write();
 }
 
-exports.updateNetworkAdditionalData = updateNetworkAdditionalData;
+export async function updateNetworkAdditionalData(nwid, data) {
-async function updateNetworkAdditionalData(nwid, data) {
   let additionalData = {};
 
   if (data.hasOwnProperty("description")) {
@@ -96,7 +93,6 @@ async function updateNetworkAdditionalData(nwid, data) {
   }
 }
 
-exports.deleteNetworkAdditionalData = deleteNetworkAdditionalData;
+export async function deleteNetworkAdditionalData(nwid) {
-async function deleteNetworkAdditionalData(nwid) {
   db.get("networks").remove({ id: nwid }).write();
 }

backend/tsconfig.json

@@ -3,8 +3,8 @@
   "compilerOptions": {
     "rootDir": ".",
     "baseUrl": ".",
-    "module": "CommonJS",
+    "module": "NodeNext",
-    "moduleResolution": "Node"
+    "moduleResolution": "NodeNext"
   },
   "include": ["."]
 }

backend/utils/constants.js

@@ -1,4 +1,4 @@
-exports.defaultRulesSource = `
+export const defaultRulesSource = `
 # This is a default rule set that allows IPv4 and IPv6 traffic but otherwise
 # behaves like a standard Ethernet switch.
 
@@ -26,7 +26,7 @@ drop
 accept;
 `;
 
-exports.defaultRules = `
+export const defaultRules = `
 [
   {
    "type": "MATCH_ETHERTYPE",

backend/utils/controller-api.js

@@ -1,16 +1,19 @@
-const axios = require("axios");
+import axios from "axios";
-const fs = require("fs");
+import fs from "node:fs";
+import os from "node:os";
 
 const baseURL = process.env.ZU_CONTROLLER_ENDPOINT || "http://localhost:9993/";
 
 var token;
 if (process.env.ZU_CONTROLLER_TOKEN) {
   token = process.env.ZU_CONTROLLER_TOKEN;
-} else {
+} else if (os.platform() === "linux") {
   token = fs.readFileSync("/var/lib/zerotier-one/authtoken.secret", "utf8");
+} else {
+  throw new Error("Please provide ZU_CONTROLLER_TOKEN in environment");
 }
 
-module.exports = axios.create({
+export const api = axios.create({
   baseURL: baseURL,
   responseType: "json",
   headers: {

backend/utils/db.js

@@ -1,8 +1,6 @@
-const low = require("lowdb");
+import low from "lowdb";
-const FileSync = require("lowdb/adapters/FileSync");
+import FileSync from "lowdb/adapters/FileSync.js";
 
 const adapter = new FileSync(process.env.ZU_DATAPATH || "data/db.json");
 
-const db = low(adapter);
+export const db = low(adapter);
-
-module.exports = db;

backend/utils/init-admin.js

@@ -1,7 +1,7 @@
-const crypto = require("crypto");
+import crypto from "crypto";
-const hashPassword = require("pbkdf2-wrapper/hashText");
+import hashPassword from "pbkdf2-wrapper/hashText.js";
 
-module.exports = async function () {
+export async function initAdmin() {
   if (!process.env.ZU_DEFAULT_PASSWORD || !process.env.ZU_DEFAULT_USERNAME) {
     console.error("ZU_DEFAULT_PASSWORD or ZU_DEFAULT_USERNAME not found!");
     process.exit(1);
@@ -13,4 +13,4 @@ module.exports = async function () {
     password_hash: hash,
     token: crypto.randomBytes(16).toString("hex"),
   };
-};
+}

backend/utils/ping.js

@@ -1,9 +1,9 @@
-const _ = require("lodash");
+import _ from "lodash";
 
-const api = require("./controller-api");
+import { api } from "./controller-api.js";
-const db = require("./db");
+import { db } from "./db.js";
 
-async function pingAll(network) {
+export async function pingAll(network) {
   await Promise.all(
     network.members.map(async (member) => {
       console.debug("Processing member " + member.id);
@@ -29,5 +29,3 @@ async function pingAll(network) {
     })
   );
 }
-
-module.exports = pingAll;

backend/utils/zt-address.js

@@ -1,6 +1,6 @@
-const api = require("../utils/controller-api");
+import { api } from "../utils/controller-api.js";
 
-module.exports = async function () {
+export async function getZTAddress() {
   try {
     const res = await api.get("status");
     return res.data.address;
@@ -10,4 +10,4 @@ module.exports = async function () {
       "Couldn't connect to the controller on " + err.config.baseURL
     );
   }
-};
+}

docker/zero-ui/Dockerfile

@@ -1,36 +1,68 @@
-FROM --platform=$BUILDPLATFORM node:lts-alpine as frontend-build
+# Stage 1: Build frontend
+FROM --platform=$BUILDPLATFORM node:lts-alpine AS frontend-build
 
 ENV GENERATE_SOURCEMAP=false
 
-RUN mkdir -p /app/frontend
+# Enable corepack and create necessary directories in one layer
-WORKDIR /app/
+RUN corepack enable && mkdir -p /app/frontend
+
+WORKDIR /app
+
+# Copy package-related files and install dependencies
 COPY tsconfig.json package.json yarn.lock* .yarnrc.yml ./
 COPY .yarn/ ./.yarn
-WORKDIR /app/frontend/
+
-COPY ./frontend/package*.json /app/frontend
+# Set working directory to frontend and copy package files
+WORKDIR /app/frontend
+COPY ./frontend/package*.json /app/frontend/
+
+# Install frontend dependencies and build the frontend
 RUN yarn workspaces focus frontend
-COPY ./frontend /app/frontend
+COPY ./frontend /app/frontend/
 RUN yarn build
 
+# Stage 2: Build backend
+FROM node:lts-alpine AS backend-build
 
-FROM node:lts-alpine
+# Enable corepack and create necessary directories in one layer
+RUN corepack enable && mkdir -p /app/backend
 
-WORKDIR /app/frontend/build
+WORKDIR /app
-COPY --from=frontend-build /app/frontend/build /app/frontend/build/
 
-RUN mkdir -p /app/backend
+# Copy package-related files and install dependencies
-WORKDIR /app/
 COPY package.json yarn.lock* .yarnrc.yml ./
 COPY .yarn/ ./.yarn
-WORKDIR /app/backend/
+
-COPY ./backend/package*.json /app/backend
+# Set working directory to backend and copy package files
+WORKDIR /app/backend
+COPY ./backend/package*.json /app/backend/
+
+# Install backend dependencies
 RUN yarn workspaces focus --production backend && yarn cache clean
 
+# Copy the backend source files
 COPY ./backend /app/backend
 
-EXPOSE 4000
+# Final Stage: Production
+FROM node:lts-alpine
+
+# Set the working directory to /app/backend
+WORKDIR /app/backend
+
+# Copy the built frontend from the frontend-build stage
+COPY --from=frontend-build /app/frontend/build /app/frontend/build
+
+# Copy the backend files from the backend-build stage
+COPY --from=backend-build /app/backend /app/backend
+COPY --from=backend-build /app/node_modules /app/backend/node_modules
+
+# Environment variables
 ENV NODE_ENV=production
 ENV ZU_SECURE_HEADERS=true
 ENV ZU_SERVE_FRONTEND=true
 
-CMD [ "node", "./bin/www" ]
+# Expose the application port
+EXPOSE 4000
+
+# Start the application
+CMD ["node", "bin/www.js"]

frontend/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />

frontend/package.json

@@ -11,28 +11,38 @@
     "codemirror": "^5.62.3",
     "date-fns": "^2.29.2",
     "history": "^5.3.0",
+    "i18next": "^23.5.1",
+    "i18next-browser-languagedetector": "^7.1.0",
+    "i18next-http-backend": "^2.2.2",
     "ipaddr.js": "^2.0.1",
     "lodash": "^4.17.21",
     "react": "^17.0.2",
     "react-data-table-component": "^6.11.8",
     "react-dom": "^17.0.2",
+    "react-i18next": "^13.3.0",
     "react-is": "^17.0.2",
     "react-router-dom": "^5.2.0",
     "react-use": "^17.4.0",
-    "styled-components": "^5.3.5"
+    "styled-components": "^5.3.11"
   },
   "devDependencies": {
-    "@types/react": "^18.2.24",
+    "@types/codemirror": "^5.60.10",
-    "@types/react-dom": "^18.2.9",
+    "@types/lodash": "^4.14.199",
+    "@types/react": "^17.0.67",
+    "@types/react-dom": "^17.0.21",
+    "@types/react-is": "^17.0.5",
+    "@types/react-router-dom": "^5.3.3",
+    "@types/styled-components": "^5.1.28",
     "@vitejs/plugin-react": "^4.1.0",
-    "eslint": "^8.50.0",
+    "eslint": "^8.51.0",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.3",
     "rimraf": "^5.0.5",
     "source-map-explorer": "^2.5.3",
     "typescript": "^5.2.2",
-    "vite": "^4.4.10"
+    "vite": "^4.4.11",
+    "vite-plugin-static-copy": "^1.0.6"
   },
   "scripts": {
     "start": "vite",
@@ -41,19 +51,6 @@
     "clean": "rimraf build",
     "lint": "eslint src --ext js,jsx --report-unused-disable-directives --max-warnings 0",
     "typecheck": "tsc --pretty --noEmit -p tsconfig.json",
-    "analyze": "source-map-explorer 'build/static/js/*.js'"
+    "analyze": "vite build --sourcemap true && source-map-explorer 'build/assets/*.js'  --no-border-checks"
-  },
-  "homepage": "/app",
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
   }
 }

frontend/public/locales/en/common.json

@@ -0,0 +1,68 @@
+{
+  "flowRules": "Flow Rules",
+  "createNetwork": "Create A Network",
+  "createOneNetwork": "Please create at least one network",
+  "controllerNetworks": "Controller networks",
+  "network_one": "Network",
+  "network_other": "Networks",
+  "controllerAddress": "Network controller address",
+  "loginToContinue": "Please, Log In to continue",
+  "zerouiDesc": "ZeroUI - ZeroTier Controller Web UI - is a web user interface for a self-hosted ZeroTier network controller.",
+  "logIn": "Log In",
+  "logInToken": "Token Log In",
+  "cancel": "Cancel",
+  "management": "Management",
+  "deleteNetwork": "Delete Network",
+  "deleteAlert": "This action cannot be undone.",
+  "deleteNetworkConfirm": "Are you sure you want to delete this network?",
+  "deleteMemberConfirm": "Are you sure you want to delete this member?",
+  "delete": "Delete",
+  "logOut": "Log out",
+  "advancedFeature": "ADVANCED FEATURE",
+  "noDevices": "No devices have joined this network. Use the app on your devices to join",
+  "member_one": "Member",
+  "member_other": "Members",
+  "addMemberManually": "Manually Add Member",
+  "name": "Name",
+  "description": "Description",
+  "allowBridging": "Allow Ethernet Bridging",
+  "noAutoIP": "Do Not Auto-Assign IPs",
+  "capabilities": "Capabilities",
+  "noCapDef": "No capabilities defined",
+  "tags": "Tags",
+  "noTagDef": "No tags defined",
+  "authorized": "Authorized",
+  "address": "Address",
+  "managedIPs": "Managed IPs",
+  "lastSeen": "Last seen",
+  "version": "Version",
+  "physIp": "Physical IP",
+  "latency": "Latency",
+  "settings": "Settings",
+  "generalSettings": "General settings",
+  "networkId": "Network ID",
+  "accessControl": "Access control",
+  "public": "Public",
+  "private": "Private",
+  "managedRoutes": "Managed routes",
+  "addRoute": "Add route",
+  "target": "Target",
+  "via": "Via",
+  "start": "Start",
+  "end": "End",
+  "ipv4AutoAssign": "IPv4 Auto-Assign",
+  "autoAssignPool": "IPv4 Auto-Assign",
+  "addIPv4Pool": "Add IPv4 Pool",
+  "multicastLimit": "Multicast Recipient Limit",
+  "enableBroadcast": "Enable Broadcast",
+  "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.",
+  "saveChanges": "Save changes",
+  "optional": "Optional",
+  "destination": "Destination",
+  "username": "Username",
+  "password": "Password",
+  "languageName": "English"
+}

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

@@ -0,0 +1,68 @@
+{
+  "flowRules": "Reglas de flujo",
+  "createNetwork": "Crear una red",
+  "createOneNetwork": "Por favor, crea al menos 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",
+  "logInToken": "Iniciar sesión con token",
+  "cancel": "Cancelar",
+  "management": "Gestión",
+  "deleteNetwork": "Borrar red",
+  "deleteAlert": "Esta acción no puede ser revertida.",
+  "deleteNetworkConfirm": "¿Seguro que deseas borrar esta red?",
+  "deleteMemberConfirm": "¿Seguro que deseas borrar este usuario?",
+  "delete": "Borrar",
+  "logOut": "Cerrar sesión",
+  "advancedFeature": "CARACTERÍSTICA AVANZADA",
+  "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",
+  "addMemberManually": "Añadir miembro manualmente",
+  "name": "Nombre",
+  "description": "Descripción",
+  "allowBridging": "Permitir puente Ethernet",
+  "noAutoIP": "No autoasignar IPs",
+  "capabilities": "Permisos",
+  "noCapDef": "No hay permisos definidos",
+  "tags": "Etiquetas",
+  "noTagDef": "No hay etiquetas definidas",
+  "authorized": "Autorizado",
+  "address": "Dirección",
+  "managedIPs": "IPs asignadas",
+  "lastSeen": "Visto por última vez",
+  "version": "Versión",
+  "physIp": "IP pública",
+  "latency": "Latencia",
+  "settings": "Ajustes",
+  "generalSettings": "Ajustes generales",
+  "networkId": "ID de red",
+  "accessControl": "Control de acceso",
+  "public": "Público",
+  "private": "Privado",
+  "managedRoutes": "Rutas gestionadas",
+  "addRoute": "Añadir ruta",
+  "target": "Objetivo",
+  "via": "Vía",
+  "start": "Inicio",
+  "end": "Final",
+  "autoAssignPool": "Rango de IPv4 autoasignables",
+  "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.",
+  "saveChanges": "Guardar cambios",
+  "optional": "Opcional",
+  "destination": "Destino",
+  "username": "Nombre de usuario",
+  "password": "Contraseña",
+  "languageName": "Español"
+}

frontend/public/locales/ru-RU/common.json

@@ -0,0 +1,72 @@
+{
+  "flowRules": "Правила потока",
+  "createNetwork": "Создать сеть",
+  "createOneNetwork": "Пожалуйста, создайте хотя бы одну сеть",
+  "controllerNetworks": "Сети контроллера",
+  "network_one": "Сеть",
+  "network_few": "Сети",
+  "network_many": "Сетей",
+  "network_other": "Сетей",
+  "controllerAddress": "Адрес контроллера сети",
+  "loginToContinue": "Пожалуйста, войдите, чтобы продолжить",
+  "zerouiDesc": "ZeroUI - Веб-интерфейс контроллера ZeroTier - это веб-интерфейс для самостоятельного хостинга контроллера сети ZeroTier.",
+  "logIn": "Войти",
+  "logInToken": "Войти по токену",
+  "cancel": "Отмена",
+  "management": "Управление",
+  "deleteNetwork": "Удалить сеть",
+  "deleteAlert": "Это действие не может быть отменено.",
+  "deleteNetworkConfirm": "Вы уверены, что хотите удалить эту сеть?",
+  "deleteMemberConfirm": "Вы уверены, что хотите удалить это устройство?",
+  "delete": "Удалить",
+  "logOut": "Выйти",
+  "advancedFeature": "РАСШИРЕННАЯ ФУНКЦИЯ",
+  "noDevices": "Ни одно устройство не присоединилось к этой сети. Используйте приложение на ваших устройствах для подключения",
+  "member_one": "Устройство",
+  "member_few": "Устройства",
+  "member_many": "Устройства",
+  "member_other": "Устройств",
+  "addMemberManually": "Добавить устройство вручную",
+  "name": "Имя",
+  "description": "Описание",
+  "allowBridging": "Разрешить Ethernet мост",
+  "noAutoIP": "Не назначать IP автоматически",
+  "capabilities": "Возможности",
+  "noCapDef": "Нет определенных возможностей",
+  "tags": "Теги",
+  "noTagDef": "Нет определенных тегов",
+  "authorized": "Авторизован",
+  "address": "Адрес",
+  "managedIPs": "Управляемые IP",
+  "lastSeen": "Последний раз был онлайн",
+  "version": "Версия",
+  "physIp": "Физический IP",
+  "latency": "Задержка",
+  "settings": "Настройки",
+  "generalSettings": "Общие настройки",
+  "networkId": "ID сети",
+  "accessControl": "Контроль доступа",
+  "public": "Публичный",
+  "private": "Частный",
+  "managedRoutes": "Управляемые маршруты",
+  "addRoute": "Добавить маршрут",
+  "target": "Цель",
+  "via": "Через",
+  "start": "Начало",
+  "end": "Конец",
+  "ipv4AutoAssign": "Автоматическое назначение IPv4",
+  "autoAssignPool": "Автоматическое назначение IPv4",
+  "addIPv4Pool": "Добавить пул IPv4",
+  "multicastLimit": "Ограничение получателей мультикаста",
+  "enableBroadcast": "Включить широковещание",
+  "logInFailed": "Неверное имя пользователя или пароль",
+  "tooManyAttempts": "Слишком много попыток входа, попробуйте снова через 15 минут.",
+  "language": "Язык",
+  "notAuthorized": "Вы не авторизованы. Пожалуйста, войдите.",
+  "saveChanges": "Сохранить изменения",
+  "optional": "Необязательно",
+  "destination": "Назначение",
+  "username": "Имя пользователя",
+  "password": "Пароль",
+  "languageName": "Русский"
+}

frontend/public/locales/zh_CN/common.json

@@ -0,0 +1,68 @@
+{
+  "flowRules": "流量规则",
+  "createNetwork": "创建网络",
+  "createOneNetwork": "请至少创建一个网络",
+  "controllerNetworks": "控制器网络",
+  "network_one": "网络",
+  "network_other": "网络们",
+  "controllerAddress": "网络控制器地址",
+  "loginToContinue": "请登录以继续",
+  "zerouiDesc": "ZeroUI - ZeroTier 控制器Web界面 - 是一个用于自托管ZeroTier网络控制器的Web用户界面。",
+  "logIn": "登录",
+  "logInToken": "令牌登录",
+  "cancel": "取消",
+  "management": "管理",
+  "deleteNetwork": "删除网络",
+  "deleteAlert": "此操作无法撤销。",
+  "deleteNetworkConfirm": "您确定要删除此网络吗？",
+  "deleteMemberConfirm": "您确定要删除此成员吗？",
+  "delete": "删除",
+  "logOut": "登出",
+  "advancedFeature": "高级功能",
+  "noDevices": "没有设备加入此网络。请使用您的设备上的应用程序加入。",
+  "member_one": "成员",
+  "member_other": "成员们",
+  "addMemberManually": "手动添加成员",
+  "name": "名称",
+  "description": "描述",
+  "allowBridging": "允许以太网桥接",
+  "noAutoIP": "不自动分配IP",
+  "capabilities": "能力",
+  "noCapDef": "未定义能力",
+  "tags": "标签",
+  "noTagDef": "未定义标签",
+  "authorized": "已授权",
+  "address": "地址",
+  "managedIPs": "管理的IP地址",
+  "lastSeen": "最后看到的时间",
+  "version": "版本",
+  "physIp": "物理IP",
+  "latency": "延迟",
+  "settings": "设置",
+  "generalSettings": "常规设置",
+  "networkId": "网络ID",
+  "accessControl": "访问控制",
+  "public": "公共",
+  "private": "私有",
+  "managedRoutes": "管理的路由",
+  "addRoute": "添加路由",
+  "target": "目标",
+  "via": "通过",
+  "start": "开始",
+  "end": "结束",
+  "ipv4AutoAssign": "IPv4 自动分配",
+  "autoAssignPool": "IPv4 自动分配池",
+  "addIPv4Pool": "添加IPv4池",
+  "multicastLimit": "多播接收者限制",
+  "enableBroadcast": "启用广播",
+  "logInFailed": "无效的用户名或密码",
+  "tooManyAttempts": "尝试登录次数过多，请15分钟后重试。",
+  "language": "语言",
+  "notAuthorized": "您没有权限。请登录。",
+  "saveChanges": "保存更改",
+  "optional": "可选",
+  "destination": "目的地",
+  "username": "用户名",
+  "password": "密码",
+  "languageName": "中文"
+}

frontend/src/App.jsx

@@ -1,5 +1,6 @@
 import "@fontsource/roboto";
 
+import { Suspense } from "react";
 import { BrowserRouter, Route, Redirect, Switch } from "react-router-dom";
 
 import Theme from "./components/Theme";
@@ -8,19 +9,27 @@ 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";
+
+import Loading from "./components/Loading";
+
+import "./i18n";
 
 function App() {
   return (
     <Theme>
-      <BrowserRouter basename="/app">
+      <Suspense fallback={<Loading />}>
-        <Bar />
+        <BrowserRouter basename="/app">
-        <Switch>
+          <Bar />
-          <Route exact path="/" component={Home} />
+          <Switch>
-          <Route path="/network/:nwid" component={Network} />
+            <Route exact path="/" component={Home} />
-          <Route path="/404" component={NotFound} />
+            <Route path="/network/:nwid" component={Network} />
-          <Redirect to="/404" />
+            <Route path="/settings" component={Settings} />
-        </Switch>
+            <Route path="/404" component={NotFound} />
-      </BrowserRouter>
+            <Redirect to="/404" />
+          </Switch>
+        </BrowserRouter>
+      </Suspense>
     </Theme>
   );
 }

frontend/src/components/Bar/Bar.jsx

@@ -19,6 +19,8 @@ import MenuIcon from "@material-ui/icons/Menu";
 
 import LogIn from "components/LogIn";
 
+import { useTranslation } from "react-i18next";
+
 function Bar() {
   const [loggedIn, setLoggedIn] = useLocalStorage("loggedIn", false);
   const [disabledAuth] = useLocalStorage("disableAuth", false);
@@ -41,16 +43,18 @@ function Bar() {
     history.go(0);
   };
 
+  const { t, i18n } = useTranslation();
+
   const menuItems = [
     // TODO: add settings page
-    // {
+    {
-    //   name: "Settings",
+      name: t("settings"),
-    //   to: "/settings",
+      to: "/settings",
-    // },
+    },
     ...(!disabledAuth
       ? [
           {
-            name: "Log out",
+            name: t("logOut"),
             divide: true,
             onClick: onLogOutClick,
           },
@@ -115,7 +119,6 @@ function Bar() {
                       key={index}
                       onClick={() => {
                         closeMenu();
-
                         menuItem.onClick();
                       }}
                     >

frontend/src/components/HomeLoggedIn/HomeLoggedIn.jsx

@@ -9,6 +9,8 @@ import NetworkButton from "./components/NetworkButton";
 import API from "utils/API";
 import { generateNetworkConfig } from "utils/NetworkConfig";
 
+import { useTranslation } from "react-i18next";
+
 function HomeLoggedIn() {
   const [networks, setNetworks] = useState([]);
 
@@ -30,6 +32,8 @@ function HomeLoggedIn() {
     fetchData();
   }, []);
 
+  const { t, i18n } = useTranslation();
+
   return (
     <div className={classes.root}>
       <Button
@@ -38,19 +42,19 @@ function HomeLoggedIn() {
         className={classes.createBtn}
         onClick={createNetwork}
       >
-        Create A Network
+        {t("createNetwork")}
       </Button>
       <Divider />
       <Grid container spacing={3} className={classes.container}>
         <Grid item xs={6}>
-          <Typography variant="h5">Controller networks</Typography>
+          <Typography variant="h5">{t("controllerNetworks")}</Typography>
-          {networks[0] && "Network controller address"}
+          {networks[0] && t("controllerAddress")}
           <Box fontWeight="fontWeightBold">
             {networks[0] && networks[0]["id"].slice(0, 10)}
           </Box>
         </Grid>
         <Grid item xs="auto">
-          <Typography>Networks</Typography>
+          <Typography>{t("network", { count: networks.length })}</Typography>
           <Grid item>
             {networks[0] ? (
               networks.map((network) => (
@@ -59,7 +63,7 @@ function HomeLoggedIn() {
                 </Grid>
               ))
             ) : (
-              <div>Please create at least one network</div>
+              <div>{t("createOneNetwork")}</div>
             )}
           </Grid>
         </Grid>

frontend/src/components/HomeLoggedOut/HomeLoggedOut.jsx

@@ -3,6 +3,8 @@ import { Grid, Typography } from "@material-ui/core";
 import { useLocalStorage } from "react-use";
 import { useHistory } from "react-router-dom";
 
+import { useTranslation } from "react-i18next";
+
 import axios from "axios";
 
 function HomeLoggedOut() {
@@ -29,6 +31,8 @@ function HomeLoggedOut() {
     fetchData();
   }, [history, setDisableAuth, setLoggedIn, setToken]);
 
+  const { t, i18n } = useTranslation();
+
   return (
     <Grid
       container
@@ -42,14 +46,11 @@ function HomeLoggedOut() {
     >
       <Grid item xs={10}>
         <Typography variant="h5">
-          <span>
+          <span>{t("zerouiDesc")}</span>
-            ZeroUI - ZeroTier Controller Web UI - is a web user interface for a
-            self-hosted ZeroTier network controller.
-          </span>
         </Typography>
 
         <Typography>
-          <span>Please Log In to continue</span>
+          <span>{t("loginToContinue")}</span>
         </Typography>
       </Grid>
     </Grid>

frontend/src/components/Loading/Loading.jsx

@@ -0,0 +1,19 @@
+import { Typography, Box, CircularProgress } from "@material-ui/core";
+
+import useStyles from "./Loading.styles";
+
+function Loading() {
+  const classes = useStyles();
+
+  return (
+    <div className={classes.root}>
+      <CircularProgress color="primary" />
+      <Typography variant="h6" component="div" className={classes.loadingText}>
+        Loading
+        <span className="loadingDots"></span>
+      </Typography>
+    </div>
+  );
+}
+
+export default Loading;

frontend/src/components/Loading/Loading.styles.jsx

@@ -0,0 +1,32 @@
+// Loading.styles.jsx
+import { makeStyles } from "@material-ui/core/styles";
+
+const useStyles = makeStyles({
+  root: {
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "center",
+    alignItems: "center",
+    height: "100vh",
+  },
+  loadingText: {
+    marginTop: "16px",
+    position: "relative",
+    "& .loadingDots::after": {
+      content: '"."',
+      position: "absolute",
+      left: "100%",
+      marginLeft: "4px",
+      animation: "$loadingDots 1s infinite",
+    },
+  },
+  "@keyframes loadingDots": {
+    "0%": { content: '"."' },
+    "25%": { content: '".."' },
+    "50%": { content: '"..."' },
+    "75%": { content: '"...."' },
+    "100%": { content: '"."' },
+  },
+});
+
+export default useStyles;

frontend/src/components/Loading/index.jsx

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

frontend/src/components/LogIn/components/LogInToken/LogInToken.jsx

@@ -12,6 +12,8 @@ import {
   DialogTitle,
 } from "@material-ui/core";
 
+import { useTranslation } from "react-i18next";
+
 function LogInToken() {
   const [open, setOpen] = useState(false);
   const [errorText, setErrorText] = useState("");
@@ -41,6 +43,8 @@ function LogInToken() {
     }
   };
 
+  const { t, i18n } = useTranslation();
+
   const LogIn = () => {
     if (token.length !== 32) {
       setErrorText("Token length error");
@@ -55,12 +59,12 @@ function LogInToken() {
   return (
     <div>
       <Button onClick={handleClickOpen} color="inherit" variant="outlined">
-        Token Log In
+        {t("logInToken")}
       </Button>
       <Dialog open={open} onClose={handleClose} onKeyPress={handleKeyPress}>
-        <DialogTitle>Log In</DialogTitle>
+        <DialogTitle>{t("logIn")}</DialogTitle>
         <DialogContent>
-          <DialogContentText>ADVANCED FEATURE.</DialogContentText>
+          <DialogContentText>{t("advancedFeature")}</DialogContentText>
           <TextField
             value={token}
             onChange={(e) => {
@@ -76,10 +80,10 @@ function LogInToken() {
         </DialogContent>
         <DialogActions>
           <Button onClick={handleClose} color="primary">
-            Cancel
+            {t("cancel")}
           </Button>
           <Button onClick={LogIn} color="primary">
-            Log In
+            {t("logIn")}
           </Button>
         </DialogActions>
       </Dialog>

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

@@ -13,10 +13,14 @@ import {
 
 import axios from "axios";
 
+import { useTranslation } from "react-i18next";
+
 function LogInUser() {
   const [open, setOpen] = useState(false);
   const [snackbarOpen, setSnackbarOpen] = useState(false);
 
+  const [error, setError] = useState("");
+
   const [username, setUsername] = useState("");
   const [password, setPassword] = useState("");
 
@@ -65,17 +69,20 @@ function LogInUser() {
       .catch(function (error) {
         setPassword("");
         setSnackbarOpen(true);
-        console.error(error);
+        setError(error.response.data.error);
+        // console.error(error.response.data.error);
       });
   };
 
+  const { t, i18n } = useTranslation();
+
   return (
     <>
       <Button onClick={handleClickOpen} color="primary" variant="contained">
-        Log In
+        {t("logIn")}
       </Button>
       <Dialog open={open} onClose={handleClose} onKeyPress={handleKeyPress}>
-        <DialogTitle>Log In</DialogTitle>
+        <DialogTitle>{t("logIn")}</DialogTitle>
         <DialogContent>
           <TextField
             autoFocus
@@ -84,7 +91,7 @@ function LogInUser() {
               setUsername(e.target.value);
             }}
             margin="dense"
-            label="username"
+            label={t("username")}
             type="username"
             fullWidth
           />
@@ -94,17 +101,17 @@ function LogInUser() {
               setPassword(e.target.value);
             }}
             margin="dense"
-            label="password"
+            label={t("password")}
             type="password"
             fullWidth
           />
         </DialogContent>
         <DialogActions>
           <Button onClick={handleClose} color="primary">
-            Cancel
+            {t("cancel")}
           </Button>
           <Button onClick={LogIn} color="primary">
-            Log In
+            {t("logIn")}
           </Button>
         </DialogActions>
       </Dialog>
@@ -114,7 +121,7 @@ function LogInUser() {
           vertical: "top",
           horizontal: "center",
         }}
-        message="Invalid username or password"
+        message={t(error)}
       />
     </>
   );

frontend/src/components/NetworkManagement/NetworkManagement.jsx

@@ -18,6 +18,8 @@ import DeleteIcon from "@material-ui/icons/Delete";
 
 import API from "utils/API";
 
+import { useTranslation } from "react-i18next";
+
 function NetworkManagement() {
   const { nwid } = useParams();
   const history = useHistory();
@@ -42,10 +44,12 @@ function NetworkManagement() {
     history.go(0);
   };
 
+  const { t, i18n } = useTranslation();
+
   return (
     <Accordion>
       <AccordionSummary expandIcon={<ExpandMoreIcon />}>
-        <Typography>Management</Typography>
+        <Typography>{t("management")}</Typography>
       </AccordionSummary>
       <AccordionDetails>
         <Button
@@ -54,21 +58,19 @@ function NetworkManagement() {
           startIcon={<DeleteIcon />}
           onClick={handleClickOpen}
         >
-          Delete Network
+          {t("deleteNetwork")}
         </Button>
         <Dialog open={open} onClose={handleClose}>
-          <DialogTitle>
+          <DialogTitle>{t("deleteNetworkConfirm")}</DialogTitle>
-            {"Are you sure you want to delete this network?"}
-          </DialogTitle>
           <DialogContent>
-            <DialogContentText>This action cannot be undone.</DialogContentText>
+            <DialogContentText>{t("deleteAlert")}</DialogContentText>
           </DialogContent>
           <DialogActions>
             <Button onClick={handleClose} color="primary">
-              Cancel
+              {t("cancel")}
             </Button>
             <Button onClick={deleteNetwork} color="secondary">
-              Delete
+              {t("delete")}
             </Button>
           </DialogActions>
         </Dialog>

frontend/src/components/NetworkMembers/NetworkMembers.jsx

@@ -21,6 +21,8 @@ import ManagedIP from "./components/ManagedIP";
 import MemberName from "./components/MemberName";
 import MemberSettings from "./components/MemberSettings";
 
+import { useTranslation } from "react-i18next";
+
 function NetworkMembers({ network }) {
   const { nwid } = useParams();
   const [members, setMembers] = useState([]);
@@ -46,6 +48,8 @@ function NetworkMembers({ network }) {
     console.log("Action:", req);
   };
 
+  const { t, i18n } = useTranslation();
+
   const handleChange =
     (member, key1, key2 = null, mode = "text", id = null) =>
     (event) => {
@@ -67,7 +71,7 @@ function NetworkMembers({ network }) {
   const columns = [
     {
       id: "auth",
-      name: "Authorized",
+      name: t("authorized"),
       minWidth: "80px",
       cell: (row) => (
         <Checkbox
@@ -79,7 +83,7 @@ function NetworkMembers({ network }) {
     },
     {
       id: "address",
-      name: "Address",
+      name: t("address"),
       minWidth: "150px",
       cell: (row) => (
         <Typography variant="body2">{row.config.address}</Typography>
@@ -87,19 +91,19 @@ function NetworkMembers({ network }) {
     },
     {
       id: "name",
-      name: "Name / Description",
+      name: t("name") + "/" + t("description"),
       minWidth: "250px",
       cell: (row) => <MemberName member={row} handleChange={handleChange} />,
     },
     {
       id: "ips",
-      name: "Managed IPs",
+      name: t("managedIPs"),
       minWidth: "220px",
       cell: (row) => <ManagedIP member={row} handleChange={handleChange} />,
     },
     {
-      id: "status",
+      id: "lastSeen",
-      name: "Last Seen",
+      name: t("lastSeen"),
       minWidth: "100px",
       cell: (row) =>
         row.online === 1 ? (
@@ -121,7 +125,7 @@ function NetworkMembers({ network }) {
     },
     {
       id: "physicalip",
-      name: "Version / Physical IP / Latency",
+      name: t("version") + " / " + t("physIp") + " / " + t("latency"),
       minWidth: "220px",
       cell: (row) =>
         row.online === 1 ? (
@@ -143,7 +147,7 @@ function NetworkMembers({ network }) {
     },
     {
       id: "delete",
-      name: "",
+      name: t("settings"),
       minWidth: "50px",
       right: true,
       cell: (row) => (
@@ -162,7 +166,7 @@ function NetworkMembers({ network }) {
   return (
     <Accordion defaultExpanded={true}>
       <AccordionSummary expandIcon={<ExpandMoreIcon />}>
-        <Typography>Members</Typography>
+        <Typography>{t("member", { count: members.length })}</Typography>
       </AccordionSummary>
       <AccordionDetails>
         <Grid container direction="column" spacing={3}>
@@ -188,8 +192,7 @@ function NetworkMembers({ network }) {
                 }}
               >
                 <Typography variant="h6" style={{ padding: "10%" }}>
-                  No devices have joined this network. Use the app on your
+                  {t("noDevices")} <b>{nwid}</b>.
-                  devices to join <b>{nwid}</b>.
                 </Typography>
               </Grid>
             )}

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

@@ -5,6 +5,8 @@ import AddIcon from "@material-ui/icons/Add";
 
 import API from "utils/API";
 
+import { useTranslation } from "react-i18next";
+
 function AddMember({ nwid, callback }) {
   const [member, setMember] = useState("");
 
@@ -24,9 +26,11 @@ function AddMember({ nwid, callback }) {
     setMember("");
   };
 
+  const { t, i18n } = useTranslation();
+
   return (
     <>
-      <Typography>Manually Add Member</Typography>
+      <Typography>{t("addMemberManually")}</Typography>
       <List
         disablePadding={true}
         style={{

frontend/src/components/NetworkMembers/components/DeleteMember/DeleteMember.jsx

@@ -12,8 +12,10 @@ import {
 import DeleteOutlineIcon from "@material-ui/icons/DeleteOutline";
 
 import API from "utils/API";
+import { useTranslation } from "react-i18next";
 
 function DeleteMember({ nwid, mid, callback }) {
+  const { t, i18n } = useTranslation();
   const [open, setOpen] = useState(false);
 
   const handleClickOpen = () => {
@@ -37,18 +39,16 @@ function DeleteMember({ nwid, mid, callback }) {
         <DeleteOutlineIcon color="secondary" style={{ fontSize: 20 }} />
       </IconButton>
       <Dialog open={open} onClose={handleClose}>
-        <DialogTitle>
+        <DialogTitle>{t("deleteMemberConfirm")}</DialogTitle>
-          {"Are you sure you want to delete this member?"}
-        </DialogTitle>
         <DialogContent>
-          <DialogContentText>This action cannot be undone.</DialogContentText>
+          <DialogContentText>{t("deleteAlert")}</DialogContentText>
         </DialogContent>
         <DialogActions>
           <Button onClick={handleClose} color="primary">
-            Cancel
+            {t("cancel")}
           </Button>
           <Button onClick={deleteMemberReq} color="secondary">
-            Delete
+            {t("delete")}
           </Button>
         </DialogActions>
       </Dialog>

frontend/src/components/NetworkMembers/components/MemberName/MemberName.jsx

@@ -1,12 +1,14 @@
 import { Grid, TextField } from "@material-ui/core";
+import { useTranslation } from "react-i18next";
 
 function MemberName({ member, handleChange }) {
+  const { t, i18n } = useTranslation();
   return (
     <Grid>
       <TextField
         value={member.name}
         onChange={handleChange(member, "name")}
-        label="Name"
+        label={t("name")}
         variant="filled"
         InputLabelProps={{
           shrink: true,
@@ -15,7 +17,7 @@ function MemberName({ member, handleChange }) {
       <TextField
         value={member.description}
         onChange={handleChange(member, "description")}
-        label="Description"
+        label={t("description")}
         variant="filled"
         InputLabelProps={{
           shrink: true,

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

@@ -13,7 +13,10 @@ import BuildIcon from "@material-ui/icons/Build";
 import { useState } from "react";
 import Tag from "./components/Tag";
 
+import { useTranslation } from "react-i18next";
+
 function MemberSettings({ member, network, handleChange }) {
+  const { t, i18n } = useTranslation();
   const [open, setOpen] = useState(false);
 
   const handleClickOpen = () => {
@@ -30,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
@@ -43,7 +48,7 @@ function MemberSettings({ member, network, handleChange }) {
                 "checkbox"
               )}
             />
-            <span>Allow Ethernet Bridging</span>
+            <span>{t("allowBridging")}</span>
           </Grid>
           <Grid item>
             <Checkbox
@@ -56,17 +61,17 @@ function MemberSettings({ member, network, handleChange }) {
                 "checkbox"
               )}
             />
-            <span>Do Not Auto-Assign IPs</span>
+            <span>{t("noAutoIP")}</span>
           </Grid>
           <Grid container spacing={2}>
             <Grid item xs={12}>
-              <Typography variant="h6">Capabilities</Typography>
+              <Typography variant="h6">{t("capabilities")}</Typography>
             </Grid>
             <Grid item xs={12}>
               <Paper style={{ padding: 20 }}>
                 {Object.entries(network["capabilitiesByName"] || []).length ===
                 0
-                  ? "No capabilities defined"
+                  ? t("noCapDef")
                   : ""}
                 {Object.entries(network["capabilitiesByName"] || []).map(
                   ([capName, capId]) => (
@@ -96,11 +101,11 @@ function MemberSettings({ member, network, handleChange }) {
           </Grid>
           <Grid container spacing={2}>
             <Grid item xs={12}>
-              <Typography variant="h6">Tags</Typography>
+              <Typography variant="h6">{t("tags")}</Typography>
             </Grid>
             {Object.entries(network["tagsByName"] || []).length === 0 ? (
               <Grid item xs={12}>
-                <Paper style={{ padding: 20 }}>No tags defined</Paper>
+                <Paper style={{ padding: 20 }}>{t("noTagDef")}</Paper>
               </Grid>
             ) : (
               ""

frontend/src/components/NetworkRules/NetworkRules.jsx

@@ -17,7 +17,11 @@ import debounce from "lodash/debounce";
 import { useState } from "react";
 import API from "utils/API";
 
+import { useTranslation } from "react-i18next";
+
 function NetworkRules({ network, callback }) {
+  const { t, i18n } = useTranslation();
+
   const [editor, setEditor] = useState(null);
   const [flowData, setFlowData] = useState({
     rules: [...network.config.rules],
@@ -87,12 +91,12 @@ function NetworkRules({ network, callback }) {
   return (
     <Accordion>
       <AccordionSummary expandIcon={<ExpandMoreIcon />}>
-        <Typography>Flow Rules</Typography>
+        <Typography>{t("flowRules")}</Typography>
       </AccordionSummary>
       <AccordionDetails>
         {/*   Important note: value in CodeMirror instance means INITAIL VALUE
               or it could be used to replace editor state with the new value.
-              No need to update on every user character input
+              No need to update on every user character input Flow Rules
         */}
         <CodeMirror
           value={network["rulesSource"]}
@@ -130,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/NetworkSettings.jsx

@@ -17,7 +17,10 @@ import IPv4AutoAssign from "./components/IPv4AutoAssign";
 import API from "utils/API";
 import { parseValue, replaceValue, setValue } from "utils/ChangeHelper";
 
+import { useTranslation } from "react-i18next";
+
 function NetworkSettings({ network, setNetwork }) {
+  const { t, i18n } = useTranslation();
   const sendReq = async (data) => {
     try {
       const req = await API.post("/network/" + network["config"]["id"], data);
@@ -43,12 +46,12 @@ function NetworkSettings({ network, setNetwork }) {
   return (
     <Accordion>
       <AccordionSummary expandIcon={<ExpandMoreIcon />}>
-        <Typography>General settings</Typography>
+        <Typography>{t("generalSettings")}</Typography>
       </AccordionSummary>
       <AccordionDetails>
         <Grid container direction="column" spacing={3}>
           <Grid item>
-            <Typography>Network ID</Typography>
+            <Typography>{t("networkId")}</Typography>
             <Typography variant="h5">
               <span>{network["config"]["id"]}</span>
             </Typography>
@@ -57,7 +60,7 @@ function NetworkSettings({ network, setNetwork }) {
             <TextField
               value={network["config"]["name"]}
               onChange={handleChange("config", "name")}
-              label="Name"
+              label={t("name")}
               variant="filled"
               InputLabelProps={{
                 shrink: true,
@@ -71,7 +74,7 @@ function NetworkSettings({ network, setNetwork }) {
               multiline
               minRows={2}
               maxRows={Infinity}
-              label="Description"
+              label={t("description")}
               variant="filled"
               InputLabelProps={{
                 shrink: true,
@@ -80,14 +83,14 @@ function NetworkSettings({ network, setNetwork }) {
           </Grid>
           <Divider />
           <Grid item>
-            <Typography>Access Control</Typography>
+            <Typography>{t("accessControl")}</Typography>
             <Select
               native
               value={network["config"]["private"]}
               onChange={handleChange("config", "private", "json")}
             >
-              <option value={true}>Private</option>
+              <option value={1}>{t("private")}</option>
-              <option value={false}>Public</option>
+              <option value={0}>{t("public")}</option>
             </Select>
           </Grid>
           <Divider />
@@ -111,7 +114,7 @@ function NetworkSettings({ network, setNetwork }) {
           <Divider />
           <Grid item>
             <TextField
-              label="Multicast Recipient Limit"
+              label={t("multicastLimit")}
               type="number"
               value={network["config"]["multicastLimit"]}
               onChange={handleChange("config", "multicastLimit", "json")}
@@ -126,7 +129,7 @@ function NetworkSettings({ network, setNetwork }) {
               color="primary"
               onChange={handleChange("config", "enableBroadcast", "checkbox")}
             />
-            <span>Enable Broadcast</span>
+            <span>{t("enableBroadcast")}</span>
           </Grid>
           {/* TODO: */}
           {/* <Grid item>

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

@@ -18,7 +18,10 @@ import DataTable from "react-data-table-component";
 import { addressPool } from "utils/NetworkConfig";
 import { getCIDRAddress, validateIP, normilizeIP } from "utils/IP";
 
+import { useTranslation } from "react-i18next";
+
 function IPv4AutoAssign({ ipAssignmentPools, handleChange }) {
+  const { t, i18n } = useTranslation();
   const [start, setStart] = useState("");
   const [end, setEnd] = useState("");
 
@@ -89,19 +92,19 @@ function IPv4AutoAssign({ ipAssignmentPools, handleChange }) {
     },
     {
       id: "Start",
-      name: "Start",
+      name: t("start"),
       cell: (row) => row["ipRangeStart"],
     },
     {
       id: "End",
-      name: "End",
+      name: t("end"),
       cell: (row) => row["ipRangeEnd"],
     },
   ];
 
   return (
     <>
-      <Typography>IPv4 Auto-Assign</Typography>
+      <Typography>{t("ipv4AutoAssign")}</Typography>
       <div
         style={{
           padding: "30px",
@@ -122,7 +125,7 @@ function IPv4AutoAssign({ ipAssignmentPools, handleChange }) {
         </Grid>
       </div>
       <Typography style={{ paddingBottom: "10px" }}>
-        Auto-Assign Pools
+        {t("autoAssignPool")}
       </Typography>
       <Box border={1} borderColor="grey.300">
         <Grid item style={{ margin: "10px" }}>
@@ -132,7 +135,7 @@ function IPv4AutoAssign({ ipAssignmentPools, handleChange }) {
             data={ipAssignmentPools}
           />
           <Divider />
-          <Typography>Add IPv4 Pool</Typography>
+          <Typography>{t("addIPv4Pool")}</Typography>
           <List
             style={{
               display: "flex",
@@ -142,7 +145,7 @@ function IPv4AutoAssign({ ipAssignmentPools, handleChange }) {
             <TextField
               value={start}
               onChange={handleStartInput}
-              placeholder={"Start"}
+              placeholder={t("start")}
             />
             <Divider
               orientation="vertical"
@@ -154,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

@@ -16,7 +16,10 @@ import DataTable from "react-data-table-component";
 
 import { validateIP, normilizeIP, validateCIDR } from "utils/IP";
 
+import { useTranslation } from "react-i18next";
+
 function ManagedRoutes({ routes, handleChange }) {
+  const { t, i18n } = useTranslation();
   const [destination, setDestination] = useState("");
   const [via, setVia] = useState("");
 
@@ -71,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)"),
     },
   ];
@@ -84,13 +87,13 @@ function ManagedRoutes({ routes, handleChange }) {
   return (
     <>
       <Typography style={{ paddingBottom: "10px" }}>
-        Managed Routes ({routes.length + "/128"})
+        {t("managedRoutes")} ({routes.length + "/128"})
       </Typography>
       <Box border={1} borderColor="grey.300">
         <Grid item style={{ margin: "10px" }}>
           <DataTable noHeader={true} columns={columns} data={routes} />
           <Divider />
-          <Typography>Add Routes</Typography>
+          <Typography>{t("addRoute")}</Typography>
           <List
             style={{
               display: "flex",
@@ -100,7 +103,7 @@ function ManagedRoutes({ routes, handleChange }) {
             <TextField
               value={destination}
               onChange={handleDestinationInput}
-              placeholder={"Destination (CIDR)"}
+              placeholder={t("destination") + " (CIDR)"}
             />
             <Divider
               orientation="vertical"
@@ -112,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/components/Settings/Settings.jsx

@@ -0,0 +1,41 @@
+import {
+  Accordion,
+  AccordionSummary,
+  AccordionDetails,
+  Grid,
+  Typography,
+  Select,
+} from "@material-ui/core";
+import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
+
+import { useTranslation } from "react-i18next";
+import localesList from "generated/localesList.json";
+
+function Settings() {
+  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()}>
+            {localesList.map((locale) => (
+              <option key={locale.code} value={locale.code}>
+                {locale.name}
+              </option>
+            ))}
+          </Select>
+        </Grid>
+      </AccordionDetails>
+    </Accordion>
+  );
+}
+
+export default Settings;

frontend/src/components/Settings/index.jsx

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

frontend/src/generated/localesList.json

@@ -0,0 +1,18 @@
+[
+  {
+    "code": "en",
+    "name": "English"
+  },
+  {
+    "code": "es-ES",
+    "name": "Español"
+  },
+  {
+    "code": "ru-RU",
+    "name": "Русский"
+  },
+  {
+    "code": "zh_CN",
+    "name": "中文"
+  }
+]

frontend/src/i18n.js

@@ -0,0 +1,35 @@
+import i18n from "i18next";
+import languageDetector from "i18next-browser-languagedetector";
+import { initReactI18next } from "react-i18next";
+import Backend from "i18next-http-backend";
+
+import localesList from "./utils/localesList.json";
+const supportedLngs = localesList.map((locale) => locale.code);
+
+i18n
+  .use(languageDetector)
+  .use(initReactI18next)
+  .use(Backend)
+  .init({
+    compatibilityJSON: "v4",
+    fallbackLng: "en",
+    detection: {
+      order: ["path", "cookie", "localStorage", "htmlTag"],
+      caches: ["localStorage", "cookie"],
+    },
+    debug: true,
+    interpolation: {
+      escapeValue: true,
+    },
+    react: {
+      useSuspense: true,
+    },
+    supportedLngs,
+    backend: {
+      loadPath: "/locales/{{lng}}/{{ns}}.json",
+    },
+    ns: ["common"],
+    defaultNS: "common",
+  });
+
+export default i18n;

frontend/src/index.css

@@ -1,8 +1,17 @@
 body {
   margin: 0;
   overflow-x: hidden;
-  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", "Oxygen",
+  font-family:
-    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+    "Roboto",
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    "Oxygen",
+    "Ubuntu",
+    "Cantarell",
+    "Fira Sans",
+    "Droid Sans",
+    "Helvetica Neue",
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;

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({});
@@ -39,10 +42,12 @@ function Network() {
   if (loggedIn) {
     return (
       <>
-        <Link color="inherit" component={RouterLink} to="/" underline="none">
+        <div className={classes.breadcrumbs}>
-          <ArrowBackIcon className={classes.backIcon}></ArrowBackIcon>
+          <Link color="inherit" component={RouterLink} to="/" underline="none">
-          Networks
+            <ArrowBackIcon className={classes.backIcon}></ArrowBackIcon>
-        </Link>
+            {t("network", { count: 2 })}
+          </Link>
+        </div>
         <div className={classes.container}>
           {network["config"] && (
             <>
@@ -71,9 +76,7 @@ function Network() {
         }}
       >
         <Grid item xs={10}>
-          <Typography variant="h5">
+          <Typography variant="h5">{t("notAuthorized")}</Typography>
-            You are not authorized. Please Log In
-          </Typography>
         </Grid>
       </Grid>
     );

frontend/src/routes/Network/Network.styles.jsx

@@ -5,7 +5,11 @@ const useStyles = makeStyles((theme) => ({
     fontSize: 12,
   },
   container: {
-    margin: "1%",
+    margin: "3%",
+  },
+  breadcrumbs: {
+    paddingTop: "2%",
+    paddingLeft: "2%",
   },
 }));
 

frontend/src/routes/Settings/Settings.jsx

@@ -0,0 +1,52 @@
+import { Grid, Link, Typography } from "@material-ui/core";
+import ArrowBackIcon from "@material-ui/icons/ArrowBack";
+import SettingsComponent from "components/Settings";
+
+import { Link as RouterLink } from "react-router-dom";
+import { useLocalStorage } from "react-use";
+
+import useStyles from "./Settings.styles";
+
+import { useTranslation } from "react-i18next";
+
+function Settings() {
+  const { t, i18n } = useTranslation();
+  const [loggedIn] = useLocalStorage("loggedIn", false);
+
+  const classes = useStyles();
+
+  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">{t("notAuthorized")}</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";

frontend/src/utils/localesList.json

@@ -0,0 +1,14 @@
+[
+  {
+    "code": "en",
+    "name": "English"
+  },
+  {
+    "code": "es-ES",
+    "name": "Español"
+  },
+  {
+    "code": "ru-RU",
+    "name": "Русский"
+  }
+]

frontend/tsconfig.json

@@ -5,7 +5,8 @@
     "baseUrl": "src",
     "module": "NodeNext",
     "moduleResolution": "NodeNext",
-    "jsx": "preserve"
+    "jsx": "preserve",
+    "resolveJsonModule": true
   },
   "include": ["src"]
 }

frontend/vite-plugin-generate-locales.js

@@ -0,0 +1,51 @@
+import fs from "fs";
+import path from "path";
+import * as url from "url";
+
+const __dirname = url.fileURLToPath(new URL(".", import.meta.url));
+
+export default function generateLocalesPlugin() {
+  return {
+    name: "generate-locales",
+    buildStart() {
+      const localesDir = path.resolve(__dirname, "public", "locales");
+
+      if (fs.existsSync(localesDir)) {
+        const localesList = fs
+          .readdirSync(localesDir)
+          .filter((file) => {
+            return fs.statSync(path.join(localesDir, file)).isDirectory();
+          })
+          .map((locale) => {
+            const commonFilePath = path.join(localesDir, locale, "common.json");
+            if (fs.existsSync(commonFilePath)) {
+              const commonFile = JSON.parse(
+                fs.readFileSync(commonFilePath, "utf-8")
+              );
+              return {
+                code: locale,
+                name: commonFile.languageName || locale,
+              };
+            }
+            return {
+              code: locale,
+              name: locale,
+            };
+          });
+
+        // Save the array to a JSON file
+        const outputPath = path.resolve(
+          __dirname,
+          "src",
+          "generated",
+          "localesList.json"
+        );
+        fs.writeFileSync(outputPath, JSON.stringify(localesList, null, 2));
+
+        console.log(`Locales list saved to ${outputPath}`);
+      } else {
+        console.error("Locales directory not found.");
+      }
+    },
+  };
+}

frontend/vite.config.js

@@ -1,27 +0,0 @@
-import { defineConfig } from "vite";
-import react from "@vitejs/plugin-react";
-
-export default defineConfig({
-  base: "/app",
-  server: {
-    port: 3000,
-    strictPort: true,
-    proxy: {
-      "/auth": "http://127.0.0.1:4000",
-      "/api": "http://127.0.0.1:4000",
-      "/controller": "http://127.0.0.1:4000",
-    },
-  },
-  resolve: {
-    alias: {
-      components: "/src/components",
-      utils: "/src/utils",
-      external: "/src/external",
-    },
-  },
-  build: {
-    outDir: "build",
-    chunkSizeWarningLimit: 1000,
-  },
-  plugins: [react()],
-});

frontend/vite.config.mjs

@@ -0,0 +1,45 @@
+import process from "node:process";
+import { defineConfig, searchForWorkspaceRoot } from "vite";
+import react from "@vitejs/plugin-react";
+import { viteStaticCopy } from "vite-plugin-static-copy";
+import generateLocalesPlugin from "./vite-plugin-generate-locales.js";
+
+export default defineConfig({
+  base: "/app",
+  server: {
+    port: 3000,
+    strictPort: true,
+    proxy: {
+      "/auth": "http://127.0.0.1:4000",
+      "/api": "http://127.0.0.1:4000",
+      "/controller": "http://127.0.0.1:4000",
+    },
+    fs: {
+      allow: [searchForWorkspaceRoot(process.cwd()), "../node_modules"],
+    },
+  },
+  resolve: {
+    alias: {
+      components: "/src/components",
+      utils: "/src/utils",
+      external: "/src/external",
+      generated: "/src/generated",
+    },
+  },
+  build: {
+    outDir: "build",
+    chunkSizeWarningLimit: 1000,
+  },
+  plugins: [
+    react(),
+    generateLocalesPlugin(),
+    viteStaticCopy({
+      targets: [
+        {
+          src: "public/locales",
+          dest: "",
+        },
+      ],
+    }),
+  ],
+});

package.json

@@ -10,12 +10,14 @@
     "upgrade:deps": "yarn upgrade-interactive",
     "upgrade:yarn": "yarn set version latest",
     "clean:deps": "cd frontend && rimraf node_modules && cd ../backend && rimraf node_modules && cd .. && rimraf node_modules",
-    "format": "yarn prettier",
+    "format": "yarn prettier --check .",
     "format:fix": "yarn prettier --write .",
     "lint": "yarn workspaces foreach --all --parallel run lint",
     "dev": "concurrently \"cd frontend && cross-env FAST_REFRESH=true yarn start\" \"cd backend && cross-env NODE_ENV=development ZU_DEFAULT_USERNAME=admin ZU_DEFAULT_PASSWORD=zero-ui nodemon ./bin/www --ignore data/db.json\"",
     "build": "cd frontend && cross-env GENERATE_SOURCEMAP=false yarn build",
     "prod": "cd backend && cross-env NODE_ENV=production ZU_SECURE_HEADERS=false yarn start",
+    "docker:build": "docker build . -t dec0dos/zero-ui -f docker/zero-ui/Dockerfile --progress=plain",
+    "docker:run": "docker run --rm --env-file .env -e ZU_CONTROLLER_ENDPOINT=http://host.docker.internal:9993 -p 4000:4000 --name zero-ui dec0dos/zero-ui",
     "release": "standard-version && git push --follow-tags origin main && git add CHANGELOG.md",
     "commit": "yarn git-cz"
   },
@@ -54,5 +56,5 @@
       "yarn prettier --write"
     ]
   },
-  "packageManager": "yarn@4.0.0-rc.53"
+  "packageManager": "yarn@4.3.1"
 }