diff --git a/crates/openconnect-gui/src/App.tsx b/crates/openconnect-gui/src/App.tsx
index 788cfad..0215b01 100644
--- a/crates/openconnect-gui/src/App.tsx
+++ b/crates/openconnect-gui/src/App.tsx
@@ -20,6 +20,7 @@ import { ToastContainer } from "react-toastify";
import connected from "./assets/connected-animate.json";
import Lottie from "lottie-react";
import { AboutModal } from "./About";
+import { useKey } from "react-use";
enum EStatus {
Initialized = "INITIALIZED",
@@ -46,6 +47,19 @@ function App() {
const { selectedServer } = useStoredConfigs();
const [isAboutOpened, setIsAboutOpened] = useState(false);
+ useKey(
+ "Enter",
+ () => {
+ if (vpnStatus.status === EStatus.Connected) {
+ handleDisconnect();
+ } else if (selectedServer) {
+ handleConnect();
+ }
+ },
+ undefined,
+ [vpnStatus, selectedServer]
+ );
+
const handleConnect = useCallback(async () => {
if (selectedServer) {
try {
@@ -160,7 +174,7 @@ function App() {
className="m-3 w-[50%]"
onClick={handleDisconnect}
>
- Disconnect
+ Disconnect [Enter]
)}
{vpnStatus.status === EStatus.Disconnected ||
@@ -171,7 +185,7 @@ function App() {
className="m-3 w-full"
onClick={handleConnect}
>
- Connect
+ Connect [Enter]
) : null}
diff --git a/crates/openconnect-gui/src/ServerSelector.tsx b/crates/openconnect-gui/src/ServerSelector.tsx
index 11ee186..c998a2f 100644
--- a/crates/openconnect-gui/src/ServerSelector.tsx
+++ b/crates/openconnect-gui/src/ServerSelector.tsx
@@ -8,6 +8,7 @@ import {
import { FC, PropsWithChildren, useEffect } from "react";
import { ServerEditorModal } from "./ServerEditorModal";
import { useStoredConfigs } from "./state";
+import { useKey } from "react-use";
export const ServerSelector = () => {
const {
@@ -20,6 +21,35 @@ export const ServerSelector = () => {
const { isOpen, onOpen, onOpenChange } = useDisclosure();
+ useKey(
+ "Tab",
+ (evt) => {
+ evt.preventDefault();
+ if (serverList.length) {
+ const currentIndex = serverList.findIndex(
+ ({ name }) => name === selectedName
+ );
+ if (currentIndex !== -1) {
+ const nextIndex =
+ currentIndex === serverList.length - 1 ? 0 : currentIndex + 1;
+ const next = serverList[nextIndex].name;
+ setSelectedName(next);
+ }
+ }
+ },
+ undefined,
+ [serverList, selectedName, setSelectedName]
+ );
+
+ useKey(
+ "m",
+ () => {
+ onOpen();
+ },
+ undefined,
+ [onOpen]
+ );
+
useEffect(() => {
getStoredConfigs();
}, [getStoredConfigs]);
@@ -49,7 +79,7 @@ export const ServerSelector = () => {
)}