feat: keyboard shortcuts

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",

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 (

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 && (
+        <>
+          <ninja-keys ref={ninjaKeys}></ninja-keys>
+        </>
+      )}
       <Toolbar>
         <Box display="flex" flexGrow={1}>
           <Typography color="inherit" variant="h6">

frontend/src/components/Bar/index.jsx

@@ -1 +1 @@
-export { default } from "./Bar";
+export { default } from "./Bar.jsx";

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";
 

frontend/src/components/HomeLoggedIn/index.jsx

@@ -1 +1 @@
-export { default } from "./HomeLoggedIn";
+export { default } from "./HomeLoggedIn.jsx";

frontend/src/components/HomeLoggedOut/index.jsx

@@ -1 +1 @@
-export { default } from "./HomeLoggedOut";
+export { default } from "./HomeLoggedOut.jsx";

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 (

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

@@ -1 +1 @@
-export { default } from "./LogInToken";
+export { default } from "./LogInToken.jsx";

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

@@ -1 +1 @@
-export { default } from "./LogInUser";
+export { default } from "./LogInUser.jsx";

frontend/src/components/LogIn/index.jsx

@@ -1 +1 @@
-export { default } from "./LogIn";
+export { default } from "./LogIn.jsx";

frontend/src/components/NetworkHeader/index.jsx

@@ -1 +1 @@
-export { default } from "./NetworkHeader";
+export { default } from "./NetworkHeader.jsx";

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";
 

frontend/src/components/NetworkManagement/index.jsx

@@ -1 +1 @@
-export { default } from "./NetworkManagement";
+export { default } from "./NetworkManagement.jsx";

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";
 

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";
 

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

@@ -1 +1 @@
-export { default } from "./AddMember";
+export { default } from "./AddMember.jsx";

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 }) {

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

@@ -1 +1 @@
-export { default } from "./DeleteMember";
+export { default } from "./DeleteMember.jsx";

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();

frontend/src/components/NetworkMembers/components/ManagedIP/index.jsx

@@ -1 +1 @@
-export { default } from "./ManagedIP";
+export { default } from "./ManagedIP.jsx";

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

@@ -1 +1 @@
-export { default } from "./MemberName";
+export { default } from "./MemberName.jsx";

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";
 

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";
 

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

@@ -1 +1 @@
-export { default } from "./Tag";
+export { default } from "./Tag.jsx";

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

@@ -1 +1 @@
-export { default } from "./MemberSettings";
+export { default } from "./MemberSettings.jsx";

frontend/src/components/NetworkMembers/index.jsx

@@ -1 +1 @@
-export { default } from "./NetworkMembers";
+export { default } from "./NetworkMembers.jsx";

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";
 

frontend/src/components/NetworkRules/index.jsx

@@ -1 +1 @@
-export { default } from "./NetworkRules";
+export { default } from "./NetworkRules.jsx";

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";
 

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";
 

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

@@ -1 +1 @@
-export { default } from "./IPv4AutoAssign";
+export { default } from "./IPv4AutoAssign.jsx";

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";
 

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

@@ -1 +1 @@
-export { default } from "./ManagedRoutes";
+export { default } from "./ManagedRoutes.jsx";

frontend/src/components/NetworkSettings/index.jsx

@@ -1 +1 @@
-export { default } from "./NetworkSettings";
+export { default } from "./NetworkSettings.jsx";