From 94f1a8b00b4384646ab718c16c6b3603b5047100 Mon Sep 17 00:00:00 2001 From: Andres Date: Tue, 17 Oct 2023 22:23:48 +0200 Subject: [PATCH 1/2] feat: keyboard shortcuts --- frontend/package.json | 2 + frontend/src/App.jsx | 11 +- frontend/src/components/Bar/Bar.jsx | 63 +++++++++- frontend/src/components/Bar/index.jsx | 2 +- .../components/HomeLoggedIn/HomeLoggedIn.jsx | 8 +- .../src/components/HomeLoggedIn/index.jsx | 2 +- .../src/components/HomeLoggedOut/index.jsx | 2 +- frontend/src/components/LogIn/LogIn.jsx | 4 +- .../LogIn/components/LogInToken/index.jsx | 2 +- .../LogIn/components/LogInUser/index.jsx | 2 +- frontend/src/components/LogIn/index.jsx | 2 +- .../src/components/NetworkHeader/index.jsx | 2 +- .../NetworkManagement/NetworkManagement.jsx | 6 +- .../components/NetworkManagement/index.jsx | 2 +- .../NetworkMembers/NetworkMembers.jsx | 18 +-- .../components/AddMember/AddMember.jsx | 4 +- .../components/AddMember/index.jsx | 2 +- .../components/DeleteMember/DeleteMember.jsx | 5 +- .../components/DeleteMember/index.jsx | 2 +- .../components/ManagedIP/ManagedIP.jsx | 6 +- .../components/ManagedIP/index.jsx | 2 +- .../components/MemberName/index.jsx | 2 +- .../MemberSettings/MemberSettings.jsx | 4 +- .../MemberSettings/components/Tag/Tag.jsx | 2 +- .../MemberSettings/components/Tag/index.jsx | 2 +- .../components/MemberSettings/index.jsx | 2 +- .../src/components/NetworkMembers/index.jsx | 2 +- .../components/NetworkRules/NetworkRules.jsx | 8 +- .../src/components/NetworkRules/index.jsx | 2 +- .../NetworkSettings/NetworkSettings.jsx | 10 +- .../IPv4AutoAssign/IPv4AutoAssign.jsx | 8 +- .../components/IPv4AutoAssign/index.jsx | 2 +- .../ManagedRoutes/ManagedRoutes.jsx | 6 +- .../components/ManagedRoutes/index.jsx | 2 +- .../src/components/NetworkSettings/index.jsx | 2 +- .../SettingsComponent/SettingsComponent.jsx | 43 +++++++ .../components/SettingsComponent/index.jsx | 1 + frontend/src/components/Theme/index.jsx | 2 +- frontend/src/i18n.js | 34 +++++ frontend/src/index.jsx | 2 +- frontend/src/routes/Home/Home.jsx | 4 +- frontend/src/routes/Home/index.jsx | 2 +- frontend/src/routes/Network/Network.jsx | 16 +-- frontend/src/routes/Network/index.jsx | 2 +- frontend/src/routes/NotFound/index.jsx | 2 +- frontend/src/routes/Settings/Settings.jsx | 57 +++++++++ frontend/src/routes/Settings/index.jsx | 1 + yarn.lock | 119 +++++++++++++++++- 48 files changed, 398 insertions(+), 90 deletions(-) create mode 100644 frontend/src/components/SettingsComponent/SettingsComponent.jsx create mode 100644 frontend/src/components/SettingsComponent/index.jsx create mode 100644 frontend/src/i18n.js create mode 100644 frontend/src/routes/Settings/Settings.jsx create mode 100644 frontend/src/routes/Settings/index.jsx diff --git a/frontend/package.json b/frontend/package.json index ff003128..4dd4e80c 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -1,6 +1,7 @@ { "name": "frontend", "private": true, + "type": "module", "dependencies": { "@fontsource/roboto": "^4.5.8", "@material-ui/core": "^4.12.4", @@ -13,6 +14,7 @@ "history": "^5.3.0", "ipaddr.js": "^2.0.1", "lodash": "^4.17.21", + "ninja-keys": "^1.2.2", "react": "^17.0.2", "react-data-table-component": "^6.11.8", "react-dom": "^17.0.2", diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx index 04c9dc19..79611d3e 100644 --- a/frontend/src/App.jsx +++ b/frontend/src/App.jsx @@ -2,12 +2,13 @@ import "@fontsource/roboto"; import { BrowserRouter, Route, Redirect, Switch } from "react-router-dom"; -import Theme from "./components/Theme"; -import Bar from "./components/Bar"; +import Theme from "./components/Theme/Theme.jsx"; +import Bar from "./components/Bar/Bar.jsx"; -import Home from "./routes/Home"; -import NotFound from "./routes/NotFound"; -import Network from "./routes/Network/Network"; +import Home from "./routes/Home/Home.jsx"; +import NotFound from "./routes/NotFound/NotFound.jsx"; +import Network from "./routes/Network/Network.jsx"; +import Settings from "./routes/Settings/Settings.jsx"; function App() { return ( diff --git a/frontend/src/components/Bar/Bar.jsx b/frontend/src/components/Bar/Bar.jsx index 2b91eda4..4e1a1d36 100644 --- a/frontend/src/components/Bar/Bar.jsx +++ b/frontend/src/components/Bar/Bar.jsx @@ -1,8 +1,8 @@ import logo from "./assets/logo.png"; -import { useState } from "react"; -import { Link as RouterLink, useHistory } from "react-router-dom"; -import { useLocalStorage } from "react-use"; +import { useEffect, useRef, useState } from "react"; +import { Redirect, Link as RouterLink, useHistory } from "react-router-dom"; +import { useLocalStorage, useWindowScroll } from "react-use"; import { AppBar, @@ -15,16 +15,56 @@ import { MenuItem, Link, } from "@material-ui/core"; -import MenuIcon from "@material-ui/icons/Menu"; +import MenuIcon from "@material-ui/icons/Menu.js"; -import LogIn from "components/LogIn"; +import LogIn from "components/LogIn/LogIn.jsx"; +import "ninja-keys"; + +import { useTranslation } from "react-i18next"; +import API from "utils/API.js"; +import { generateNetworkConfig } from "utils/NetworkConfig.js"; function Bar() { + const ninjaKeys = useRef(null); + const history = useHistory(); + const { t, i18n } = useTranslation(); + + const [hotkeys, setHotkeys] = useState([ + { + id: "Settings", + title: t("settings"), + hotkey: "cmd+shift+s", + handler: () => { + history.push("/settings"); + }, + }, + { + id: "createNet", + title: t("createNetwork"), + hotkey: "cmd+shift+n", + handler: () => { + createNetwork(); + }, + }, + { + id: "LogOut", + title: t("logOut"), + hotkey: "cmd+shift+g", + handler: () => { + onLogOutClick(); + }, + }, + ]); + const [loggedIn, setLoggedIn] = useLocalStorage("loggedIn", false); const [disabledAuth] = useLocalStorage("disableAuth", false); const [anchorEl, setAnchorEl] = useState(null); - const history = useHistory(); + const createNetwork = async () => { + const network = await API.post("network", generateNetworkConfig()); + console.log(network); + history.push("/network/" + network.data["config"]["id"]); + }; const openMenu = (event) => { setAnchorEl(event.currentTarget); @@ -41,6 +81,12 @@ function Bar() { history.go(0); }; + useEffect(() => { + if (ninjaKeys.current) { + ninjaKeys.current.data = hotkeys; + } + }, []); + const menuItems = [ // TODO: add settings page // { @@ -64,6 +110,11 @@ function Bar() { style={{ background: "#000000" }} position="static" > + {loggedIn && ( + <> + + + )} diff --git a/frontend/src/components/Bar/index.jsx b/frontend/src/components/Bar/index.jsx index d23f0fdf..f27f7dd0 100644 --- a/frontend/src/components/Bar/index.jsx +++ b/frontend/src/components/Bar/index.jsx @@ -1 +1 @@ -export { default } from "./Bar"; +export { default } from "./Bar.jsx"; diff --git a/frontend/src/components/HomeLoggedIn/HomeLoggedIn.jsx b/frontend/src/components/HomeLoggedIn/HomeLoggedIn.jsx index ff45f768..481225cf 100644 --- a/frontend/src/components/HomeLoggedIn/HomeLoggedIn.jsx +++ b/frontend/src/components/HomeLoggedIn/HomeLoggedIn.jsx @@ -2,12 +2,12 @@ import { useState, useEffect } from "react"; import { useHistory } from "react-router-dom"; import { Divider, Button, Grid, Typography, Box } from "@material-ui/core"; -import useStyles from "./HomeLoggedIn.styles"; +import useStyles from "./HomeLoggedIn.styles.jsx"; -import NetworkButton from "./components/NetworkButton"; +import NetworkButton from "./components/NetworkButton/NetworkButton.jsx"; -import API from "utils/API"; -import { generateNetworkConfig } from "utils/NetworkConfig"; +import API from "utils/API.js"; +import { generateNetworkConfig } from "utils/NetworkConfig.js"; function HomeLoggedIn() { const [networks, setNetworks] = useState([]); diff --git a/frontend/src/components/HomeLoggedIn/index.jsx b/frontend/src/components/HomeLoggedIn/index.jsx index 5e81fc49..e532a122 100644 --- a/frontend/src/components/HomeLoggedIn/index.jsx +++ b/frontend/src/components/HomeLoggedIn/index.jsx @@ -1 +1 @@ -export { default } from "./HomeLoggedIn"; +export { default } from "./HomeLoggedIn.jsx"; diff --git a/frontend/src/components/HomeLoggedOut/index.jsx b/frontend/src/components/HomeLoggedOut/index.jsx index bfd68924..094d9825 100644 --- a/frontend/src/components/HomeLoggedOut/index.jsx +++ b/frontend/src/components/HomeLoggedOut/index.jsx @@ -1 +1 @@ -export { default } from "./HomeLoggedOut"; +export { default } from "./HomeLoggedOut.jsx"; diff --git a/frontend/src/components/LogIn/LogIn.jsx b/frontend/src/components/LogIn/LogIn.jsx index 36ea9a29..42eb7fa5 100644 --- a/frontend/src/components/LogIn/LogIn.jsx +++ b/frontend/src/components/LogIn/LogIn.jsx @@ -1,7 +1,7 @@ import { Divider } from "@material-ui/core"; -import LogInUser from "./components/LogInUser"; -import LogInToken from "./components/LogInToken"; +import LogInUser from "./components/LogInUser/LogInUser.jsx"; +import LogInToken from "./components/LogInToken/LogInToken.jsx"; function LogIn() { return ( diff --git a/frontend/src/components/LogIn/components/LogInToken/index.jsx b/frontend/src/components/LogIn/components/LogInToken/index.jsx index 32428b0d..eccdd52a 100644 --- a/frontend/src/components/LogIn/components/LogInToken/index.jsx +++ b/frontend/src/components/LogIn/components/LogInToken/index.jsx @@ -1 +1 @@ -export { default } from "./LogInToken"; +export { default } from "./LogInToken.jsx"; diff --git a/frontend/src/components/LogIn/components/LogInUser/index.jsx b/frontend/src/components/LogIn/components/LogInUser/index.jsx index 92fb0ca3..202ce94d 100644 --- a/frontend/src/components/LogIn/components/LogInUser/index.jsx +++ b/frontend/src/components/LogIn/components/LogInUser/index.jsx @@ -1 +1 @@ -export { default } from "./LogInUser"; +export { default } from "./LogInUser.jsx"; diff --git a/frontend/src/components/LogIn/index.jsx b/frontend/src/components/LogIn/index.jsx index 7b22dd87..016d22cf 100644 --- a/frontend/src/components/LogIn/index.jsx +++ b/frontend/src/components/LogIn/index.jsx @@ -1 +1 @@ -export { default } from "./LogIn"; +export { default } from "./LogIn.jsx"; diff --git a/frontend/src/components/NetworkHeader/index.jsx b/frontend/src/components/NetworkHeader/index.jsx index 788a9750..1927b0ce 100644 --- a/frontend/src/components/NetworkHeader/index.jsx +++ b/frontend/src/components/NetworkHeader/index.jsx @@ -1 +1 @@ -export { default } from "./NetworkHeader"; +export { default } from "./NetworkHeader.jsx"; diff --git a/frontend/src/components/NetworkManagement/NetworkManagement.jsx b/frontend/src/components/NetworkManagement/NetworkManagement.jsx index fab98cce..dbc74eb2 100644 --- a/frontend/src/components/NetworkManagement/NetworkManagement.jsx +++ b/frontend/src/components/NetworkManagement/NetworkManagement.jsx @@ -13,10 +13,10 @@ import { DialogActions, Typography, } from "@material-ui/core"; -import ExpandMoreIcon from "@material-ui/icons/ExpandMore"; -import DeleteIcon from "@material-ui/icons/Delete"; +import ExpandMoreIcon from "@material-ui/icons/ExpandMore.js"; +import DeleteIcon from "@material-ui/icons/Delete.js"; -import API from "utils/API"; +import API from "utils/API.js"; function NetworkManagement() { const { nwid } = useParams(); diff --git a/frontend/src/components/NetworkManagement/index.jsx b/frontend/src/components/NetworkManagement/index.jsx index 281dbc95..d54147da 100644 --- a/frontend/src/components/NetworkManagement/index.jsx +++ b/frontend/src/components/NetworkManagement/index.jsx @@ -1 +1 @@ -export { default } from "./NetworkManagement"; +export { default } from "./NetworkManagement.jsx"; diff --git a/frontend/src/components/NetworkMembers/NetworkMembers.jsx b/frontend/src/components/NetworkMembers/NetworkMembers.jsx index b6f843c8..827b986f 100644 --- a/frontend/src/components/NetworkMembers/NetworkMembers.jsx +++ b/frontend/src/components/NetworkMembers/NetworkMembers.jsx @@ -7,19 +7,19 @@ import { IconButton, Typography, } from "@material-ui/core"; -import ExpandMoreIcon from "@material-ui/icons/ExpandMore"; -import RefreshIcon from "@material-ui/icons/Refresh"; +import ExpandMoreIcon from "@material-ui/icons/ExpandMore.js"; +import RefreshIcon from "@material-ui/icons/Refresh.js"; import { useCallback, useEffect, useState } from "react"; import DataTable from "react-data-table-component"; import { useParams } from "react-router-dom"; -import API from "utils/API"; -import { parseValue, replaceValue, setValue } from "utils/ChangeHelper"; +import API from "utils/API.js"; +import { parseValue, replaceValue, setValue } from "utils/ChangeHelper.js"; import { formatDistance } from "date-fns"; -import AddMember from "./components/AddMember"; -import DeleteMember from "./components/DeleteMember"; -import ManagedIP from "./components/ManagedIP"; -import MemberName from "./components/MemberName"; -import MemberSettings from "./components/MemberSettings"; +import AddMember from "./components/AddMember/AddMember.jsx"; +import DeleteMember from "./components/DeleteMember/DeleteMember.jsx"; +import ManagedIP from "./components/ManagedIP/ManagedIP.jsx"; +import MemberName from "./components/MemberName/MemberName.jsx"; +import MemberSettings from "./components/MemberSettings/MemberSettings.jsx"; function NetworkMembers({ network }) { const { nwid } = useParams(); diff --git a/frontend/src/components/NetworkMembers/components/AddMember/AddMember.jsx b/frontend/src/components/NetworkMembers/components/AddMember/AddMember.jsx index af256d63..698c9103 100644 --- a/frontend/src/components/NetworkMembers/components/AddMember/AddMember.jsx +++ b/frontend/src/components/NetworkMembers/components/AddMember/AddMember.jsx @@ -1,9 +1,9 @@ import { useState } from "react"; import { List, Typography, IconButton, TextField } from "@material-ui/core"; -import AddIcon from "@material-ui/icons/Add"; +import AddIcon from "@material-ui/icons/Add.js"; -import API from "utils/API"; +import API from "utils/API.js"; function AddMember({ nwid, callback }) { const [member, setMember] = useState(""); diff --git a/frontend/src/components/NetworkMembers/components/AddMember/index.jsx b/frontend/src/components/NetworkMembers/components/AddMember/index.jsx index a2f4a67d..1a96d3aa 100644 --- a/frontend/src/components/NetworkMembers/components/AddMember/index.jsx +++ b/frontend/src/components/NetworkMembers/components/AddMember/index.jsx @@ -1 +1 @@ -export { default } from "./AddMember"; +export { default } from "./AddMember.jsx"; diff --git a/frontend/src/components/NetworkMembers/components/DeleteMember/DeleteMember.jsx b/frontend/src/components/NetworkMembers/components/DeleteMember/DeleteMember.jsx index e5b00163..48927194 100644 --- a/frontend/src/components/NetworkMembers/components/DeleteMember/DeleteMember.jsx +++ b/frontend/src/components/NetworkMembers/components/DeleteMember/DeleteMember.jsx @@ -9,9 +9,10 @@ import { DialogActions, IconButton, } from "@material-ui/core"; -import DeleteOutlineIcon from "@material-ui/icons/DeleteOutline"; +import DeleteOutlineIcon from "@material-ui/icons/DeleteOutline.js"; -import API from "utils/API"; +import API from "utils/API.js"; +import { useTranslation } from "react-i18next"; function DeleteMember({ nwid, mid, callback }) { const [open, setOpen] = useState(false); diff --git a/frontend/src/components/NetworkMembers/components/DeleteMember/index.jsx b/frontend/src/components/NetworkMembers/components/DeleteMember/index.jsx index f9e57f41..cc788a32 100644 --- a/frontend/src/components/NetworkMembers/components/DeleteMember/index.jsx +++ b/frontend/src/components/NetworkMembers/components/DeleteMember/index.jsx @@ -1 +1 @@ -export { default } from "./DeleteMember"; +export { default } from "./DeleteMember.jsx"; diff --git a/frontend/src/components/NetworkMembers/components/ManagedIP/ManagedIP.jsx b/frontend/src/components/NetworkMembers/components/ManagedIP/ManagedIP.jsx index f01bbac2..5ed11c82 100644 --- a/frontend/src/components/NetworkMembers/components/ManagedIP/ManagedIP.jsx +++ b/frontend/src/components/NetworkMembers/components/ManagedIP/ManagedIP.jsx @@ -1,10 +1,10 @@ import { useState } from "react"; import { Grid, List, TextField, IconButton } from "@material-ui/core"; -import AddIcon from "@material-ui/icons/Add"; -import DeleteOutlineIcon from "@material-ui/icons/DeleteOutline"; +import AddIcon from "@material-ui/icons/Add.js"; +import DeleteOutlineIcon from "@material-ui/icons/DeleteOutline.js"; -import { validateIP, normilizeIP } from "utils/IP"; +import { validateIP, normilizeIP } from "utils/IP.js"; function ManagedIP({ member, handleChange }) { const [ipInput, setIpInput] = useState(); diff --git a/frontend/src/components/NetworkMembers/components/ManagedIP/index.jsx b/frontend/src/components/NetworkMembers/components/ManagedIP/index.jsx index 87fede3e..a412c544 100644 --- a/frontend/src/components/NetworkMembers/components/ManagedIP/index.jsx +++ b/frontend/src/components/NetworkMembers/components/ManagedIP/index.jsx @@ -1 +1 @@ -export { default } from "./ManagedIP"; +export { default } from "./ManagedIP.jsx"; diff --git a/frontend/src/components/NetworkMembers/components/MemberName/index.jsx b/frontend/src/components/NetworkMembers/components/MemberName/index.jsx index 2e7c224c..cae5cb5c 100644 --- a/frontend/src/components/NetworkMembers/components/MemberName/index.jsx +++ b/frontend/src/components/NetworkMembers/components/MemberName/index.jsx @@ -1 +1 @@ -export { default } from "./MemberName"; +export { default } from "./MemberName.jsx"; diff --git a/frontend/src/components/NetworkMembers/components/MemberSettings/MemberSettings.jsx b/frontend/src/components/NetworkMembers/components/MemberSettings/MemberSettings.jsx index 4c135d68..47342e27 100644 --- a/frontend/src/components/NetworkMembers/components/MemberSettings/MemberSettings.jsx +++ b/frontend/src/components/NetworkMembers/components/MemberSettings/MemberSettings.jsx @@ -9,9 +9,9 @@ import { Paper, Typography, } from "@material-ui/core"; -import BuildIcon from "@material-ui/icons/Build"; +import BuildIcon from "@material-ui/icons/Build.js"; import { useState } from "react"; -import Tag from "./components/Tag"; +import Tag from "./components/Tag/Tag.jsx"; function MemberSettings({ member, network, handleChange }) { const [open, setOpen] = useState(false); diff --git a/frontend/src/components/NetworkMembers/components/MemberSettings/components/Tag/Tag.jsx b/frontend/src/components/NetworkMembers/components/MemberSettings/components/Tag/Tag.jsx index 25f257b2..ba252b65 100644 --- a/frontend/src/components/NetworkMembers/components/MemberSettings/components/Tag/Tag.jsx +++ b/frontend/src/components/NetworkMembers/components/MemberSettings/components/Tag/Tag.jsx @@ -8,7 +8,7 @@ import { Select, Typography, } from "@material-ui/core"; -import DeleteIcon from "@material-ui/icons/Delete"; +import DeleteIcon from "@material-ui/icons/Delete.js"; import { useEffect, useState } from "react"; import { useDebounce } from "react-use"; diff --git a/frontend/src/components/NetworkMembers/components/MemberSettings/components/Tag/index.jsx b/frontend/src/components/NetworkMembers/components/MemberSettings/components/Tag/index.jsx index 21bb058a..0547fafc 100644 --- a/frontend/src/components/NetworkMembers/components/MemberSettings/components/Tag/index.jsx +++ b/frontend/src/components/NetworkMembers/components/MemberSettings/components/Tag/index.jsx @@ -1 +1 @@ -export { default } from "./Tag"; +export { default } from "./Tag.jsx"; diff --git a/frontend/src/components/NetworkMembers/components/MemberSettings/index.jsx b/frontend/src/components/NetworkMembers/components/MemberSettings/index.jsx index 2ded616e..7611c65c 100644 --- a/frontend/src/components/NetworkMembers/components/MemberSettings/index.jsx +++ b/frontend/src/components/NetworkMembers/components/MemberSettings/index.jsx @@ -1 +1 @@ -export { default } from "./MemberSettings"; +export { default } from "./MemberSettings.jsx"; diff --git a/frontend/src/components/NetworkMembers/index.jsx b/frontend/src/components/NetworkMembers/index.jsx index 9a38809d..e7f7d4c6 100644 --- a/frontend/src/components/NetworkMembers/index.jsx +++ b/frontend/src/components/NetworkMembers/index.jsx @@ -1 +1 @@ -export { default } from "./NetworkMembers"; +export { default } from "./NetworkMembers.jsx"; diff --git a/frontend/src/components/NetworkRules/NetworkRules.jsx b/frontend/src/components/NetworkRules/NetworkRules.jsx index 14dbd365..28f0e2da 100644 --- a/frontend/src/components/NetworkRules/NetworkRules.jsx +++ b/frontend/src/components/NetworkRules/NetworkRules.jsx @@ -9,13 +9,13 @@ import { Snackbar, Typography, } from "@material-ui/core"; -import ExpandMoreIcon from "@material-ui/icons/ExpandMore"; +import ExpandMoreIcon from "@material-ui/icons/ExpandMore.js"; import CodeMirror from "@uiw/react-codemirror"; import "codemirror/theme/3024-day.css"; -import { compile } from "external/RuleCompiler"; -import debounce from "lodash/debounce"; +import { compile } from "external/RuleCompiler.js"; +import debounce from "lodash/debounce.js"; import { useState } from "react"; -import API from "utils/API"; +import API from "utils/API.js"; function NetworkRules({ network, callback }) { const [editor, setEditor] = useState(null); diff --git a/frontend/src/components/NetworkRules/index.jsx b/frontend/src/components/NetworkRules/index.jsx index 50751190..3861690e 100644 --- a/frontend/src/components/NetworkRules/index.jsx +++ b/frontend/src/components/NetworkRules/index.jsx @@ -1 +1 @@ -export { default } from "./NetworkRules"; +export { default } from "./NetworkRules.jsx"; diff --git a/frontend/src/components/NetworkSettings/NetworkSettings.jsx b/frontend/src/components/NetworkSettings/NetworkSettings.jsx index c45a6e84..6dd960f9 100644 --- a/frontend/src/components/NetworkSettings/NetworkSettings.jsx +++ b/frontend/src/components/NetworkSettings/NetworkSettings.jsx @@ -9,13 +9,13 @@ import { TextField, Select, } from "@material-ui/core"; -import ExpandMoreIcon from "@material-ui/icons/ExpandMore"; +import ExpandMoreIcon from "@material-ui/icons/ExpandMore.js"; -import ManagedRoutes from "./components/ManagedRoutes"; -import IPv4AutoAssign from "./components/IPv4AutoAssign"; +import ManagedRoutes from "./components/ManagedRoutes/ManagedRoutes.jsx"; +import IPv4AutoAssign from "./components/IPv4AutoAssign/IPv4AutoAssign.jsx"; -import API from "utils/API"; -import { parseValue, replaceValue, setValue } from "utils/ChangeHelper"; +import API from "utils/API.js"; +import { parseValue, replaceValue, setValue } from "utils/ChangeHelper.js"; function NetworkSettings({ network, setNetwork }) { const sendReq = async (data) => { diff --git a/frontend/src/components/NetworkSettings/components/IPv4AutoAssign/IPv4AutoAssign.jsx b/frontend/src/components/NetworkSettings/components/IPv4AutoAssign/IPv4AutoAssign.jsx index 0b4fd3de..8def4e84 100644 --- a/frontend/src/components/NetworkSettings/components/IPv4AutoAssign/IPv4AutoAssign.jsx +++ b/frontend/src/components/NetworkSettings/components/IPv4AutoAssign/IPv4AutoAssign.jsx @@ -10,13 +10,13 @@ import { TextField, IconButton, } from "@material-ui/core"; -import AddIcon from "@material-ui/icons/Add"; -import DeleteOutlineIcon from "@material-ui/icons/DeleteOutline"; +import AddIcon from "@material-ui/icons/Add.js"; +import DeleteOutlineIcon from "@material-ui/icons/DeleteOutline.js"; import DataTable from "react-data-table-component"; -import { addressPool } from "utils/NetworkConfig"; -import { getCIDRAddress, validateIP, normilizeIP } from "utils/IP"; +import { addressPool } from "utils/NetworkConfig.js"; +import { getCIDRAddress, validateIP, normilizeIP } from "utils/IP.js"; function IPv4AutoAssign({ ipAssignmentPools, handleChange }) { const [start, setStart] = useState(""); diff --git a/frontend/src/components/NetworkSettings/components/IPv4AutoAssign/index.jsx b/frontend/src/components/NetworkSettings/components/IPv4AutoAssign/index.jsx index 35c89774..b6540154 100644 --- a/frontend/src/components/NetworkSettings/components/IPv4AutoAssign/index.jsx +++ b/frontend/src/components/NetworkSettings/components/IPv4AutoAssign/index.jsx @@ -1 +1 @@ -export { default } from "./IPv4AutoAssign"; +export { default } from "./IPv4AutoAssign.jsx"; diff --git a/frontend/src/components/NetworkSettings/components/ManagedRoutes/ManagedRoutes.jsx b/frontend/src/components/NetworkSettings/components/ManagedRoutes/ManagedRoutes.jsx index 48b21c8d..b538090c 100644 --- a/frontend/src/components/NetworkSettings/components/ManagedRoutes/ManagedRoutes.jsx +++ b/frontend/src/components/NetworkSettings/components/ManagedRoutes/ManagedRoutes.jsx @@ -9,12 +9,12 @@ import { TextField, IconButton, } from "@material-ui/core"; -import AddIcon from "@material-ui/icons/Add"; -import DeleteOutlineIcon from "@material-ui/icons/DeleteOutline"; +import AddIcon from "@material-ui/icons/Add.js"; +import DeleteOutlineIcon from "@material-ui/icons/DeleteOutline.js"; import DataTable from "react-data-table-component"; -import { validateIP, normilizeIP, validateCIDR } from "utils/IP"; +import { validateIP, normilizeIP, validateCIDR } from "utils/IP.js"; function ManagedRoutes({ routes, handleChange }) { const [destination, setDestination] = useState(""); diff --git a/frontend/src/components/NetworkSettings/components/ManagedRoutes/index.jsx b/frontend/src/components/NetworkSettings/components/ManagedRoutes/index.jsx index 2dba8700..b3b1a711 100644 --- a/frontend/src/components/NetworkSettings/components/ManagedRoutes/index.jsx +++ b/frontend/src/components/NetworkSettings/components/ManagedRoutes/index.jsx @@ -1 +1 @@ -export { default } from "./ManagedRoutes"; +export { default } from "./ManagedRoutes.jsx"; diff --git a/frontend/src/components/NetworkSettings/index.jsx b/frontend/src/components/NetworkSettings/index.jsx index 447e59de..6a06cd82 100644 --- a/frontend/src/components/NetworkSettings/index.jsx +++ b/frontend/src/components/NetworkSettings/index.jsx @@ -1 +1 @@ -export { default } from "./NetworkSettings"; +export { default } from "./NetworkSettings.jsx"; diff --git a/frontend/src/components/SettingsComponent/SettingsComponent.jsx b/frontend/src/components/SettingsComponent/SettingsComponent.jsx new file mode 100644 index 00000000..55203dfe --- /dev/null +++ b/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.js"; + +import API from "utils/API.js"; +import { parseValue, replaceValue, setValue } from "utils/ChangeHelper.js"; + +import { useTranslation } from "react-i18next"; + +function SettingsComponent() { + const { t, i18n } = useTranslation(); + + const handleChange = () => (event) => { + i18n.changeLanguage(event.target.value); + }; + + return ( + + }> + {t("language")} + + + + + + + + ); +} + +export default SettingsComponent; diff --git a/frontend/src/components/SettingsComponent/index.jsx b/frontend/src/components/SettingsComponent/index.jsx new file mode 100644 index 00000000..57f5ff7a --- /dev/null +++ b/frontend/src/components/SettingsComponent/index.jsx @@ -0,0 +1 @@ +export { default } from "./SettingsComponent.jsx"; diff --git a/frontend/src/components/Theme/index.jsx b/frontend/src/components/Theme/index.jsx index 3bef82bc..da839bbb 100644 --- a/frontend/src/components/Theme/index.jsx +++ b/frontend/src/components/Theme/index.jsx @@ -1 +1 @@ -export { default } from "./Theme"; +export { default } from "./Theme.jsx"; diff --git a/frontend/src/i18n.js b/frontend/src/i18n.js new file mode 100644 index 00000000..a74ac101 --- /dev/null +++ b/frontend/src/i18n.js @@ -0,0 +1,34 @@ +import i18n from "i18next"; +import languageDetector from "i18next-browser-languagedetector"; +import { initReactI18next } from "react-i18next"; +import Backend from "i18next-http-backend"; + +i18n + .use(languageDetector) + .use(initReactI18next) + .use(Backend) + .init({ + compatibilityJSON: "v4", + //lng: "en", + fallbackLng: "en", + detection: { + order: ["path", "cookie", "localStorage", "htmlTag"], + caches: ["localStorage", "cookie"], // cache user language on + }, + debug: true, + //keySeparator: false, // we use content as keys + interpolation: { + escapeValue: true, + }, + react: { + useSuspense: true, + }, + supportedLngs: ["en", "es-ES"], + backend: { + loadPath: "/locales/{{lng}}/{{ns}}.json", + }, + ns: ["common"], + defaultNS: "common", + }); + +export default i18n; diff --git a/frontend/src/index.jsx b/frontend/src/index.jsx index 3c94589b..fc3ca21c 100644 --- a/frontend/src/index.jsx +++ b/frontend/src/index.jsx @@ -3,7 +3,7 @@ import "./index.css"; import React from "react"; import ReactDOM from "react-dom"; -import App from "./App"; +import App from "./App.jsx"; ReactDOM.render( diff --git a/frontend/src/routes/Home/Home.jsx b/frontend/src/routes/Home/Home.jsx index faf15a9e..cacdbaad 100644 --- a/frontend/src/routes/Home/Home.jsx +++ b/frontend/src/routes/Home/Home.jsx @@ -1,7 +1,7 @@ import { useLocalStorage } from "react-use"; -import HomeLoggedIn from "components/HomeLoggedIn"; -import HomeLoggedOut from "components/HomeLoggedOut"; +import HomeLoggedIn from "components/HomeLoggedIn/HomeLoggedIn.jsx"; +import HomeLoggedOut from "components/HomeLoggedOut/HomeLoggedOut.jsx"; function Home() { const [loggedIn] = useLocalStorage("loggedIn", false); diff --git a/frontend/src/routes/Home/index.jsx b/frontend/src/routes/Home/index.jsx index ffa79319..508ea772 100644 --- a/frontend/src/routes/Home/index.jsx +++ b/frontend/src/routes/Home/index.jsx @@ -1 +1 @@ -export { default } from "./Home"; +export { default } from "./Home.jsx"; diff --git a/frontend/src/routes/Network/Network.jsx b/frontend/src/routes/Network/Network.jsx index 272ba2ad..d5833cc5 100644 --- a/frontend/src/routes/Network/Network.jsx +++ b/frontend/src/routes/Network/Network.jsx @@ -1,15 +1,15 @@ import { Grid, Link, Typography } from "@material-ui/core"; -import ArrowBackIcon from "@material-ui/icons/ArrowBack"; -import NetworkHeader from "components/NetworkHeader"; -import NetworkManagement from "components/NetworkManagement"; -import NetworkMembers from "components/NetworkMembers"; -import NetworkRules from "components/NetworkRules"; -import NetworkSettings from "components/NetworkSettings"; +import ArrowBackIcon from "@material-ui/icons/ArrowBack.js"; +import NetworkHeader from "components/NetworkHeader/NetworkHeader.jsx"; +import NetworkManagement from "components/NetworkManagement/NetworkManagement.jsx"; +import NetworkMembers from "components/NetworkMembers/NetworkMembers.jsx"; +import NetworkRules from "components/NetworkRules/NetworkRules.jsx"; +import NetworkSettings from "components/NetworkSettings/NetworkSettings.jsx"; 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 "./Network.styles"; +import API from "utils/API.js"; +import useStyles from "./Network.styles.jsx"; function Network() { const { nwid } = useParams(); diff --git a/frontend/src/routes/Network/index.jsx b/frontend/src/routes/Network/index.jsx index 7a8a2ce1..5d9b2916 100644 --- a/frontend/src/routes/Network/index.jsx +++ b/frontend/src/routes/Network/index.jsx @@ -1 +1 @@ -export { default } from "./Network"; +export { default } from "./Network.jsx"; diff --git a/frontend/src/routes/NotFound/index.jsx b/frontend/src/routes/NotFound/index.jsx index 3fded62c..76e87478 100644 --- a/frontend/src/routes/NotFound/index.jsx +++ b/frontend/src/routes/NotFound/index.jsx @@ -1 +1 @@ -export { default } from "./NotFound"; +export { default } from "./NotFound.jsx"; diff --git a/frontend/src/routes/Settings/Settings.jsx b/frontend/src/routes/Settings/Settings.jsx new file mode 100644 index 00000000..08539ebe --- /dev/null +++ b/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.js"; +import SettingsComponent from "components/SettingsComponent/SettingsComponent.jsx"; + +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.jsx"; + +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 ( + <> +
+ + + {t("settings")} + +
+
+ +
+ + ); + } else { + return ( + + + + You are not authorized. Please Log In + + + + ); + } +} + +export default Settings; diff --git a/frontend/src/routes/Settings/index.jsx b/frontend/src/routes/Settings/index.jsx new file mode 100644 index 00000000..d7507a0a --- /dev/null +++ b/frontend/src/routes/Settings/index.jsx @@ -0,0 +1 @@ +export { default } from "./Settings.jsx"; diff --git a/yarn.lock b/yarn.lock index 4ca548d9..34da3b98 100644 --- a/yarn.lock +++ b/yarn.lock @@ -860,6 +860,22 @@ __metadata: languageName: node linkType: hard +"@lit-labs/ssr-dom-shim@npm:^1.0.0, @lit-labs/ssr-dom-shim@npm:^1.1.0": + version: 1.1.2 + resolution: "@lit-labs/ssr-dom-shim@npm:1.1.2" + checksum: a930f7de57b952dc21317a5754aa0411e000bb4991053cde771c111b7792c4a4cdc896922f0353c832215bed71400431c5ab5a6252c8f4f70bb9ce0b37fe4752 + languageName: node + linkType: hard + +"@lit/reactive-element@npm:^1.3.0, @lit/reactive-element@npm:^1.6.0": + version: 1.6.3 + resolution: "@lit/reactive-element@npm:1.6.3" + dependencies: + "@lit-labs/ssr-dom-shim": "npm:^1.0.0" + checksum: 664c899bb0b144590dc4faf83b358b1504810eac107778c3aeb384affc65a7ef4eda754944bcc34a57237db03dff145332406345ac24da19ca37cf4b3cb343d3 + languageName: node + linkType: hard + "@material-ui/core@npm:^4.12.4": version: 4.12.4 resolution: "@material-ui/core@npm:4.12.4" @@ -980,6 +996,16 @@ __metadata: languageName: node linkType: hard +"@material/mwc-icon@npm:0.25.3": + version: 0.25.3 + resolution: "@material/mwc-icon@npm:0.25.3" + dependencies: + lit: "npm:^2.0.0" + tslib: "npm:^2.0.1" + checksum: ee4eb4c746795666b576395046238f72714e7f3985e33a2edec8e11d3f9a2e11087edae70c6ba5b1804ff5348fe85a19a752281af97dff3c9ebad1b20f5969ea + languageName: node + linkType: hard + "@nodelib/fs.scandir@npm:2.1.5": version: 2.1.5 resolution: "@nodelib/fs.scandir@npm:2.1.5" @@ -1432,6 +1458,13 @@ __metadata: languageName: node linkType: hard +"@types/trusted-types@npm:^2.0.2": + version: 2.0.4 + resolution: "@types/trusted-types@npm:2.0.4" + checksum: 5256c4576cd1c90d33ddd9cc9cbd4f202b39c98cbe8b7f74963298f9eb2159c285ea5c25a6181b4c594d8d75641765bff85d72c2d251ad076e6529ce0eeedd1c + languageName: node + linkType: hard + "@typescript-eslint/eslint-plugin@npm:^6.7.4": version: 6.7.4 resolution: "@typescript-eslint/eslint-plugin@npm:6.7.4" @@ -4346,6 +4379,7 @@ __metadata: history: "npm:^5.3.0" ipaddr.js: "npm:^2.0.1" lodash: "npm:^4.17.21" + ninja-keys: "npm:^1.2.2" react: "npm:^17.0.2" react-data-table-component: "npm:^6.11.8" react-dom: "npm:^17.0.2" @@ -4888,6 +4922,22 @@ __metadata: languageName: node linkType: hard +"hotkeys-js@npm:3.8.7": + version: 3.8.7 + resolution: "hotkeys-js@npm:3.8.7" + checksum: a70b797ae26ea89e9f0bef49711a48622422b641362ee0c2ac4a1f70794e85066623fefdf200866fce1f75fc520e530e35ebd0334f61cbf500da882a6b795faf + languageName: node + linkType: hard + +"html-parse-stringify@npm:^3.0.1": + version: 3.0.1 + resolution: "html-parse-stringify@npm:3.0.1" + dependencies: + void-elements: "npm:3.1.0" + checksum: 8743b76cc50e46d1956c1ad879d18eb9613b0d2d81e24686d633f9f69bb26b84676f64a926973de793cca479997017a63219278476d617b6c42d68246d7c07fe + languageName: node + linkType: hard + "http-cache-semantics@npm:^4.1.1": version: 4.1.1 resolution: "http-cache-semantics@npm:4.1.1" @@ -5870,6 +5920,48 @@ __metadata: languageName: node linkType: hard +"lit-element@npm:^3.2.0, lit-element@npm:^3.3.0": + version: 3.3.3 + resolution: "lit-element@npm:3.3.3" + dependencies: + "@lit-labs/ssr-dom-shim": "npm:^1.1.0" + "@lit/reactive-element": "npm:^1.3.0" + lit-html: "npm:^2.8.0" + checksum: 7968e7f3ce3994911f27c4c54acc956488c91d8af81677cce3d6f0c2eaea45cceb79b064077159392238d6e43d46015a950269db9914fea8913566aacb17eaa1 + languageName: node + linkType: hard + +"lit-html@npm:^2.2.0, lit-html@npm:^2.8.0": + version: 2.8.0 + resolution: "lit-html@npm:2.8.0" + dependencies: + "@types/trusted-types": "npm:^2.0.2" + checksum: 3503e55e2927c2ff94773cf041fc4128f92291869c9192f36eacb7f95132d11f6b329e5b910ab60a4456349cd2e6d23b33d83291b24d557bcd6b904d6314ac1a + languageName: node + linkType: hard + +"lit@npm:2.2.6": + version: 2.2.6 + resolution: "lit@npm:2.2.6" + dependencies: + "@lit/reactive-element": "npm:^1.3.0" + lit-element: "npm:^3.2.0" + lit-html: "npm:^2.2.0" + checksum: 160363c6d271559f629404301f4df324f97f0d7f48c69c784f277fdeabc5f975ab98cb792198136c87175f185b28699ff25c105dc91f08eb4e96e46143a6c162 + languageName: node + linkType: hard + +"lit@npm:^2.0.0": + version: 2.8.0 + resolution: "lit@npm:2.8.0" + dependencies: + "@lit/reactive-element": "npm:^1.6.0" + lit-element: "npm:^3.3.0" + lit-html: "npm:^2.8.0" + checksum: aa64c1136b855ba328d41157dba67657d480345aeec3c1dd829abeb67719d759c9ff2ade9903f9cfb4f9d012b16087034aaa5b33f1182e70c615765562e3251b + languageName: node + linkType: hard + "load-json-file@npm:^4.0.0": version: 4.0.0 resolution: "load-json-file@npm:4.0.0" @@ -6532,6 +6624,31 @@ __metadata: languageName: node linkType: hard +"ninja-keys@npm:^1.2.2": + version: 1.2.2 + resolution: "ninja-keys@npm:1.2.2" + dependencies: + "@material/mwc-icon": "npm:0.25.3" + hotkeys-js: "npm:3.8.7" + lit: "npm:2.2.6" + checksum: 5f573fd547c54f926d13f30877f8e54245ec22097f0a539f9b89532aa4c21582572f7df4dc1db407f128fb44867fc9ef23e8c9065a36c5870652057b7149db73 + languageName: node + linkType: hard + +"node-fetch@npm:^2.6.11": + version: 2.7.0 + resolution: "node-fetch@npm:2.7.0" + dependencies: + whatwg-url: "npm:^5.0.0" + peerDependencies: + encoding: ^0.1.0 + peerDependenciesMeta: + encoding: + optional: true + checksum: b24f8a3dc937f388192e59bcf9d0857d7b6940a2496f328381641cb616efccc9866e89ec43f2ec956bbd6c3d3ee05524ce77fe7b29ccd34692b3a16f237d6676 + languageName: node + linkType: hard + "node-gyp@npm:latest": version: 9.4.0 resolution: "node-gyp@npm:9.4.0" @@ -8736,7 +8853,7 @@ __metadata: languageName: node linkType: hard -"tslib@npm:^2.1.0": +"tslib@npm:^2.0.1, tslib@npm:^2.1.0": version: 2.6.2 resolution: "tslib@npm:2.6.2" checksum: bd26c22d36736513980091a1e356378e8b662ded04204453d353a7f34a4c21ed0afc59b5f90719d4ba756e581a162ecbf93118dc9c6be5acf70aa309188166ca From 5c03cb1c37c9b164f11cf4c98188b54a1701822a Mon Sep 17 00:00:00 2001 From: Andres Date: Wed, 18 Oct 2023 09:53:57 +0200 Subject: [PATCH 2/2] feat: keyshort --- frontend/src/routes/Settings/Settings.jsx | 2 +- frontend/src/routes/Settings/Settings.styles.jsx | 16 ++++++++++++++++ 2 files changed, 17 insertions(+), 1 deletion(-) create mode 100644 frontend/src/routes/Settings/Settings.styles.jsx diff --git a/frontend/src/routes/Settings/Settings.jsx b/frontend/src/routes/Settings/Settings.jsx index 08539ebe..d5c7f7ed 100644 --- a/frontend/src/routes/Settings/Settings.jsx +++ b/frontend/src/routes/Settings/Settings.jsx @@ -5,7 +5,7 @@ import SettingsComponent from "components/SettingsComponent/SettingsComponent.js 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 API from "utils/API.js"; import useStyles from "./Settings.styles.jsx"; import { useTranslation } from "react-i18next"; diff --git a/frontend/src/routes/Settings/Settings.styles.jsx b/frontend/src/routes/Settings/Settings.styles.jsx new file mode 100644 index 00000000..ac884a75 --- /dev/null +++ b/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;