github/zero-ui
1
0
Fork 0
mirror of https://github.com/dec0dOS/zero-ui.git synced 2025-07-15 01:23:12 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: keyboard shortcuts

Browse source
This commit is contained in:
Andres 2023-10-17 22:23:48 +02:00
parent d19bf07382
commit ff2218d03a
48 changed files with 243 additions and 102 deletions
Download patch file Download diff file Expand all files Collapse all files

2
frontend/package.json
View file

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

12
frontend/src/App.jsx
View file

@ -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 (

61
frontend/src/components/Bar/Bar.jsx
View file

@ -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,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);
@ -43,7 +81,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 +110,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">

2
frontend/src/components/Bar/index.jsx
View file

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

8
frontend/src/components/HomeLoggedIn/HomeLoggedIn.jsx
View file

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

2
frontend/src/components/HomeLoggedIn/index.jsx
View file

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

2
frontend/src/components/HomeLoggedOut/index.jsx
View file

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

4
frontend/src/components/LogIn/LogIn.jsx
View file

@ -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 (

2
frontend/src/components/LogIn/components/LogInToken/index.jsx
View file

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

2
frontend/src/components/LogIn/components/LogInUser/index.jsx
View file

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

2
frontend/src/components/LogIn/index.jsx
View file

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

2
frontend/src/components/NetworkHeader/index.jsx
View file

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

6
frontend/src/components/NetworkManagement/NetworkManagement.jsx
View file

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

2
frontend/src/components/NetworkManagement/index.jsx
View file

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

18
frontend/src/components/NetworkMembers/NetworkMembers.jsx
View file

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

4
frontend/src/components/NetworkMembers/components/AddMember/AddMember.jsx
View file

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

2
frontend/src/components/NetworkMembers/components/AddMember/index.jsx
View file

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

4
frontend/src/components/NetworkMembers/components/DeleteMember/DeleteMember.jsx
View file

@ -9,9 +9,9 @@ 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 }) {

2
frontend/src/components/NetworkMembers/components/DeleteMember/index.jsx
View file

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

6
frontend/src/components/NetworkMembers/components/ManagedIP/ManagedIP.jsx
View file

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

2
frontend/src/components/NetworkMembers/components/ManagedIP/index.jsx
View file

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

2
frontend/src/components/NetworkMembers/components/MemberName/index.jsx
View file

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

4
frontend/src/components/NetworkMembers/components/MemberSettings/MemberSettings.jsx
View file

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

2
frontend/src/components/NetworkMembers/components/MemberSettings/components/Tag/Tag.jsx
View file

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

2
frontend/src/components/NetworkMembers/components/MemberSettings/components/Tag/index.jsx
View file

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

2
frontend/src/components/NetworkMembers/components/MemberSettings/index.jsx
View file

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

2
frontend/src/components/NetworkMembers/index.jsx
View file

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

8
frontend/src/components/NetworkRules/NetworkRules.jsx
View file

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

2
frontend/src/components/NetworkRules/index.jsx
View file

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

10
frontend/src/components/NetworkSettings/NetworkSettings.jsx
View file

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

8
frontend/src/components/NetworkSettings/components/IPv4AutoAssign/IPv4AutoAssign.jsx
View file

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

2
frontend/src/components/NetworkSettings/components/IPv4AutoAssign/index.jsx
View file

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

6
frontend/src/components/NetworkSettings/components/ManagedRoutes/ManagedRoutes.jsx
View file

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

2
frontend/src/components/NetworkSettings/components/ManagedRoutes/index.jsx
View file

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

2
frontend/src/components/NetworkSettings/index.jsx
View file

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

6
frontend/src/components/SettingsComponent/SettingsComponent.jsx
View file

@ -9,10 +9,10 @@ import {
TextField,
Select,
} from "@material-ui/core";
import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
import ExpandMoreIcon from "@material-ui/icons/ExpandMore.js";
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";

2
frontend/src/components/SettingsComponent/index.jsx
View file

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

2
frontend/src/components/Theme/index.jsx
View file

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

2
frontend/src/i18n.js
View file

@ -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)

2
frontend/src/index.jsx
View file

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

4
frontend/src/routes/Home/Home.jsx
View file

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

2
frontend/src/routes/Home/index.jsx
View file

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

16
frontend/src/routes/Network/Network.jsx
View file

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

2
frontend/src/routes/Network/index.jsx
View file

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

2
frontend/src/routes/NotFound/index.jsx
View file

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

6
frontend/src/routes/Settings/Settings.jsx
View file

@ -1,12 +1,12 @@
import { Grid, Link, Typography } from "@material-ui/core";
import ArrowBackIcon from "@material-ui/icons/ArrowBack";
import SettingsComponent from "components/SettingsComponent";
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";
import useStyles from "./Settings.styles.jsx";
import { useTranslation } from "react-i18next";

2
frontend/src/routes/Settings/index.jsx
View file

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