Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: keyboard shortcuts #186

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

feat: keyboard shortcuts #186

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
94f1a8b
feat: keyboard shortcuts
aruznieto Oct 17, 2023
5c03cb1
feat: keyshort
aruznieto Oct 18, 2023
8a1fe6f
Merge branch 'main' into keyshort
aruznieto Oct 19, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions frontend/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
{
"name": "frontend",
"private": true,
"type": "module",
"dependencies": {
"@fontsource/roboto": "^4.5.8",
"@material-ui/core": "^4.12.4",
Expand All @@ -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",
Expand Down
12 changes: 6 additions & 6 deletions frontend/src/App.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
Expand Down
63 changes: 56 additions & 7 deletions frontend/src/components/Bar/Bar.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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,
Expand All @@ -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: () => {
aruznieto marked this conversation as resolved.
Show resolved Hide resolved
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);
Expand All @@ -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
Expand All @@ -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">
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/Bar/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1 @@
export { default } from "./Bar";
export { default } from "./Bar.jsx";
8 changes: 4 additions & 4 deletions frontend/src/components/HomeLoggedIn/HomeLoggedIn.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";

Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/HomeLoggedIn/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1 @@
export { default } from "./HomeLoggedIn";
export { default } from "./HomeLoggedIn.jsx";
2 changes: 1 addition & 1 deletion frontend/src/components/HomeLoggedOut/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1 @@
export { default } from "./HomeLoggedOut";
export { default } from "./HomeLoggedOut.jsx";
4 changes: 2 additions & 2 deletions frontend/src/components/LogIn/LogIn.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 (
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/LogIn/components/LogInToken/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1 @@
export { default } from "./LogInToken";
export { default } from "./LogInToken.jsx";
2 changes: 1 addition & 1 deletion frontend/src/components/LogIn/components/LogInUser/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1 @@
export { default } from "./LogInUser";
export { default } from "./LogInUser.jsx";
2 changes: 1 addition & 1 deletion frontend/src/components/LogIn/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1 @@
export { default } from "./LogIn";
export { default } from "./LogIn.jsx";
2 changes: 1 addition & 1 deletion frontend/src/components/NetworkHeader/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1 @@
export { default } from "./NetworkHeader";
export { default } from "./NetworkHeader.jsx";
6 changes: 3 additions & 3 deletions frontend/src/components/NetworkManagement/NetworkManagement.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";

Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/NetworkManagement/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1 @@
export { default } from "./NetworkManagement";
export { default } from "./NetworkManagement.jsx";
18 changes: 9 additions & 9 deletions frontend/src/components/NetworkMembers/NetworkMembers.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";

Expand Down
4 changes: 2 additions & 2 deletions frontend/src/components/NetworkMembers/components/AddMember/AddMember.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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";

Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/NetworkMembers/components/AddMember/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1 @@
export { default } from "./AddMember";
export { default } from "./AddMember.jsx";
5 changes: 3 additions & 2 deletions frontend/src/components/NetworkMembers/components/DeleteMember/DeleteMember.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 }) {
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/NetworkMembers/components/DeleteMember/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1 @@
export { default } from "./DeleteMember";
export { default } from "./DeleteMember.jsx";
6 changes: 3 additions & 3 deletions frontend/src/components/NetworkMembers/components/ManagedIP/ManagedIP.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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();
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/NetworkMembers/components/ManagedIP/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1 @@
export { default } from "./ManagedIP";
export { default } from "./ManagedIP.jsx";
2 changes: 1 addition & 1 deletion frontend/src/components/NetworkMembers/components/MemberName/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1 @@
export { default } from "./MemberName";
export { default } from "./MemberName.jsx";
4 changes: 2 additions & 2 deletions frontend/src/components/NetworkMembers/components/MemberSettings/MemberSettings.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";

Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/NetworkMembers/components/MemberSettings/components/Tag/Tag.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";

Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/NetworkMembers/components/MemberSettings/components/Tag/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1 @@
export { default } from "./Tag";
export { default } from "./Tag.jsx";
2 changes: 1 addition & 1 deletion frontend/src/components/NetworkMembers/components/MemberSettings/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1 @@
export { default } from "./MemberSettings";
export { default } from "./MemberSettings.jsx";
2 changes: 1 addition & 1 deletion frontend/src/components/NetworkMembers/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1 @@
export { default } from "./NetworkMembers";
export { default } from "./NetworkMembers.jsx";
8 changes: 4 additions & 4 deletions frontend/src/components/NetworkRules/NetworkRules.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";

Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/NetworkRules/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1 @@
export { default } from "./NetworkRules";
export { default } from "./NetworkRules.jsx";
10 changes: 5 additions & 5 deletions frontend/src/components/NetworkSettings/NetworkSettings.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";

Expand Down
8 changes: 4 additions & 4 deletions frontend/src/components/NetworkSettings/components/IPv4AutoAssign/IPv4AutoAssign.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";

Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/NetworkSettings/components/IPv4AutoAssign/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1 @@
export { default } from "./IPv4AutoAssign";
export { default } from "./IPv4AutoAssign.jsx";
6 changes: 3 additions & 3 deletions frontend/src/components/NetworkSettings/components/ManagedRoutes/ManagedRoutes.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";

Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/NetworkSettings/components/ManagedRoutes/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1 @@
export { default } from "./ManagedRoutes";
export { default } from "./ManagedRoutes.jsx";
2 changes: 1 addition & 1 deletion frontend/src/components/NetworkSettings/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1 @@
export { default } from "./NetworkSettings";
export { default } from "./NetworkSettings.jsx";
Loading