diff --git a/frontend/package.json b/frontend/package.json index e55d3799..e5a40bab 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", @@ -16,6 +17,7 @@ "i18next-http-backend": "^2.2.2", "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 9142994f..8b035cb9 100644 --- a/frontend/src/App.jsx +++ b/frontend/src/App.jsx @@ -2,13 +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 Settings from "./routes/Settings"; +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 e27b56c9..ac5628ec 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,18 +15,58 @@ 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"; import { useTranslation } from "react-i18next"; 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); @@ -43,7 +83,11 @@ function Bar() { history.go(0); }; - const { t, i18n } = useTranslation(); + useEffect(() => { + if (ninjaKeys.current) { + ninjaKeys.current.data = hotkeys; + } + }, []); const menuItems = [ // TODO: add settings page @@ -68,6 +112,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 974a18b2..980db8f4 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"; import { useTranslation } from "react-i18next"; 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 ad4a0a84..152ef203 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"; import { useTranslation } from "react-i18next"; 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 faedfb50..0f9189c8 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"; import { useTranslation } from "react-i18next"; diff --git a/frontend/src/components/NetworkMembers/components/AddMember/AddMember.jsx b/frontend/src/components/NetworkMembers/components/AddMember/AddMember.jsx index 56c71ffc..e3e37701 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"; import { useTranslation } from "react-i18next"; 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 8cab27d1..54c4d23d 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.js"; -import API from "utils/API"; import { useTranslation } from "react-i18next"; function DeleteMember({ nwid, mid, callback }) { 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 09306322..5b0cb902 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"; import { useTranslation } from "react-i18next"; 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 53217483..29432fc2 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"; import { useTranslation, Trans } from "react-i18next"; 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 9b948e7b..d0fe7613 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"; import { useTranslation } from "react-i18next"; diff --git a/frontend/src/components/NetworkSettings/components/IPv4AutoAssign/IPv4AutoAssign.jsx b/frontend/src/components/NetworkSettings/components/IPv4AutoAssign/IPv4AutoAssign.jsx index d9d87bcf..154b8240 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"; import { useTranslation } from "react-i18next"; 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 054178ab..1cb443ea 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"; import { useTranslation } from "react-i18next"; 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 index fd27dd55..7fe986ea 100644 --- a/frontend/src/i18n.js +++ b/frontend/src/i18n.js @@ -3,8 +3,6 @@ import languageDetector from "i18next-browser-languagedetector"; import { initReactI18next } from "react-i18next"; import Backend from "i18next-http-backend"; -const userLanguage = window.navigator.language; - i18n .use(languageDetector) .use(initReactI18next) @@ -14,7 +12,7 @@ i18n fallbackLng: "en", detection: { order: ["path", "cookie", "localStorage", "htmlTag"], - caches: ["localStorage", "cookie"], + caches: ["localStorage", "cookie"], // cache user language on }, debug: true, interpolation: { diff --git a/frontend/src/index.jsx b/frontend/src/index.jsx index e79267e8..663c7c09 100644 --- a/frontend/src/index.jsx +++ b/frontend/src/index.jsx @@ -3,7 +3,7 @@ import "./index.css"; import React, { Suspense } from "react"; import ReactDOM from "react-dom"; -import App from "./App"; +import App from "./App.jsx"; import "./i18n"; 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 0a0a76a4..f74fbfa5 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"; import { useTranslation } from "react-i18next"; 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 index 175edd8c..be4f4cef 100644 --- a/frontend/src/routes/Settings/Settings.jsx +++ b/frontend/src/routes/Settings/Settings.jsx @@ -1,11 +1,12 @@ import { Grid, Link, Typography } from "@material-ui/core"; -import ArrowBackIcon from "@material-ui/icons/ArrowBack"; -import SettingsComponent from "components/Settings"; +import ArrowBackIcon from "@material-ui/icons/ArrowBack.js"; +import SettingsComponent from "components/SettingsComponent/SettingsComponent.jsx"; -import { Link as RouterLink } from "react-router-dom"; +import { useCallback, useEffect, useState } from "react"; +import { Link as RouterLink, useHistory, useParams } from "react-router-dom"; import { useLocalStorage } from "react-use"; - -import useStyles from "./Settings.styles"; +import API from "utils/API.js"; +import useStyles from "./Settings.styles.jsx"; import { useTranslation } from "react-i18next"; @@ -13,7 +14,11 @@ function Settings() { const { t, i18n } = useTranslation(); const [loggedIn] = useLocalStorage("loggedIn", false); + const [network, setNetwork] = useState({}); + const classes = useStyles(); + const history = useHistory(); + if (loggedIn) { return ( diff --git a/frontend/src/routes/Settings/index.jsx b/frontend/src/routes/Settings/index.jsx index 41d66223..c0e58f84 100644 --- a/frontend/src/routes/Settings/index.jsx +++ b/frontend/src/routes/Settings/index.jsx @@ -1 +1 @@ -export { default } from "./Settings"; +export { default } from "./Settings.jsx"; \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index 52a62fa1..6cb6fc79 100644 --- a/yarn.lock +++ b/yarn.lock @@ -869,6 +869,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" @@ -989,6 +1005,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" @@ -1441,6 +1467,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" @@ -4367,6 +4400,7 @@ __metadata: i18next-http-backend: "npm:^2.2.2" 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" @@ -4910,6 +4944,13 @@ __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" @@ -5928,6 +5969,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" @@ -6590,6 +6673,17 @@ __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" @@ -8833,7 +8927,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