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