Adding a disconnect client dialog.

diff --git a/src/app/components/VPN/SuspendClient.jsx b/src/app/components/VPN/SuspendClient.jsx
new file mode 100644 (file)
index 0000000..4fc5ea1
--- /dev/null
+++ b/src/app/components/VPN/SuspendClient.jsx
@@ -0,0 +1,24 @@
+import { Dialog, DialogTitle, DialogContent, DialogActions, Button, TextField } from '@mui/material';
+import React from 'react';
+
+const SuspendClient = ( { duration, setDuration, open, onClose, onConfirm }) => {
+  return (
+    <Dialog open={ open } onClose={ onClose}>
+      <DialogTitle>Suspend Client</DialogTitle>
+      <DialogContent>
+        <TextField
+          label='Duration of Suspension in miutes'
+          type='number'
+          value={duration}
+          onChange={(e) => setDuration(e.target.value)}
+          fullWidth
+        />
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={onClose}>Cancel</Button>
+        <Button onClick={onConfirm}>Suspend</Button>
+      </DialogActions>
+    </Dialog>
+  );
+};
+export default SuspendClient;
\ No newline at end of file

diff --git a/src/app/components/VPN/VPNContext.jsx b/src/app/components/VPN/VPNContext.jsx
index 5c42117ad1076cc825b3d68b01333a1e2a72c2ea..66d1fbdab9bb84a1b73cbc9a137041901bc755c6 100644 (file)
--- a/src/app/components/VPN/VPNContext.jsx
+++ b/src/app/components/VPN/VPNContext.jsx
@@ -1,6 +1,6 @@
 import React, { createContext, useContext, useEffect, useState } from 'react';
 import { VPNService } from '../../services';
-import { ConfirmRevoke, CreateVPNClientDialog } from '../index';
+import { ConfirmRevoke, CreateVPNClientDialog, SuspendClient } from '../index';
 
 const VPNContext = createContext( undefined );
 
@@ -15,6 +15,9 @@ export const VPNProvider = ( { children } ) => {
   const [createOpen, setCreateOpen] = useState( false );
   const [statusOpen, setStatusOpen] = useState( false );
   const [serverStatus, setServerStatus] = useState( {} );
+  const [suspendOpen, setSuspendOpen] = useState( false );
+  /** TODO: Change the default time to something more reasonable. */
+  const [duration, setDuration] = useState( 1 );
 
   const fetchServerStatus = async () => {
     await VPNService.getServerStatus()
@@ -48,6 +51,12 @@ export const VPNProvider = ( { children } ) => {
     setRevokeOpen( false );
   };
 
+  const handleDisconnect = async () => {
+    setMessage( await VPNService.disconnect() );
+    fetchClients().catch( e => setMessage( e ) );
+    setSuspendOpen( false );
+  };
+
   useEffect( () => {
     fetchClients().catch( e => setMessage( e ) );
     fetchAvailableClients().catch( e => setMessage( e ) );
@@ -75,10 +84,15 @@ export const VPNProvider = ( { children } ) => {
     setCreateOpen,
     handleCreateClientSubmit,
     handleRevokeClientSubmit,
+    handleDisconnect,
     statusOpen,
     setStatusOpen,
     serverStatus,
-    setServerStatus
+    setServerStatus,
+    suspendOpen,
+    setSuspendOpen,
+    duration,
+    setDuration
   };
 
   return <VPNContext.Provider value={ value }>
@@ -88,5 +102,10 @@ export const VPNProvider = ( { children } ) => {
     { createOpen && <CreateVPNClientDialog open={ createOpen }
                                            onClose={ () => setCreateOpen( false ) }
                                            onCreate={ handleCreateClientSubmit }/> }
+    { suspendOpen && <SuspendClient open={ suspendOpen }
+                                    onClose={ () => setSuspendOpen( false ) }
+                                    duration={ duration }
+                                    setDuration={ setDuration }
+                                    onConfirm={ handleDisconnect }/>}
     { children }</VPNContext.Provider>;
 };

diff --git a/src/app/components/index.js b/src/app/components/index.js
index 8925720ed5c129358b9730b14ee20ccd21c99219..71838952e5be5ed93e6d625eac0d6dfafeb42e5b 100644 (file)
--- a/src/app/components/index.js
+++ b/src/app/components/index.js
@@ -1,5 +1,6 @@
 import ConfirmRevoke from './VPN/ConfirmRevoke';
 import CreateVPNClientDialog from './VPN/CreateVPNClientDialog';
+import SuspendClient from './VPN/SuspendClient';
 export * from './VPN/VPNContext';
 
-export { ConfirmRevoke, CreateVPNClientDialog };
\ No newline at end of file
+export { ConfirmRevoke, CreateVPNClientDialog, SuspendClient };
\ No newline at end of file