Separating the revoke client functionality from the main vpn lists.

diff --git a/src/app/components/VPN/ConfirmRevoke.jsx b/src/app/components/VPN/ConfirmRevoke.jsx
new file mode 100644 (file)
index 0000000..f74e6c0
--- /dev/null
+++ b/src/app/components/VPN/ConfirmRevoke.jsx
@@ -0,0 +1,19 @@
+import { Dialog, DialogTitle, DialogContent, DialogActions, Button} from '@mui/material';
+
+const ConfirmRevoke = ( { open, onClose, onConfirm } ) => {
+
+  return (
+    <Dialog open={ open } onClose={ onClose } >
+      <DialogTitle>Confirm Revoke</DialogTitle>
+      <DialogContent>
+        Are you sure you want to revoke this client?
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={ onClose }>Cancel</Button>
+        <Button onClick={ onConfirm } variant='contained' color='primary'>Revoke</Button>
+      </DialogActions>
+    </Dialog>
+  );
+};
+
+export default ConfirmRevoke;
\ No newline at end of file

diff --git a/src/app/components/index.js b/src/app/components/index.js
new file mode 100644 (file)
index 0000000..eecdf81
--- /dev/null
+++ b/src/app/components/index.js
@@ -0,0 +1 @@
+export * from './VPN/ConfirmRevoke';
\ No newline at end of file

diff --git a/src/app/views/VPN/VPN.jsx b/src/app/views/VPN/VPN.jsx
index 776495b142160f282005152c40a1bccb5c1a859c..b91f4af2844263a6184ec7e681425b9789208ba0 100644 (file)
--- a/src/app/views/VPN/VPN.jsx
+++ b/src/app/views/VPN/VPN.jsx
@@ -5,6 +5,7 @@ import { MaterialReactTable } from 'material-react-table';
 import 'tailwindcss/tailwind.css';
 import { VPNService } from '../../services';
 import CreateVPNClientDialog from './CreateVPNClientDialog';
+import { ConfirmRevoke } from '../components';
 
 const VPN = () => {
   /*const [token, setToken] = useState('');
@@ -12,8 +13,9 @@ const VPN = () => {
   const [password, setPassword] = useState('');*/
   /*const [clientName, setClientName] = useState('');
   const [staticIp, setStaticIp] = useState('');
-  const [useStaticIp, setUseStaticIp] = useState(false);
-  const [revokeClientName, setRevokeClientName] = useState('');*/
+  const [useStaticIp, setUseStaticIp] = useState(false);*/
+  const [revokeOpen, setRevokeOpen] = useState( false );
+  const [revokeClientName, setRevokeClientName] = useState('');
   const [clients, setClients] = useState([]);
   const [availableClients, setAvailableClients] = useState( [] );
   const [message, setMessage] = useState('');
@@ -58,6 +60,12 @@ const VPN = () => {
 
   return (
     <Container>
+      { revokeOpen &&
+        <ConfirmRevoke
+          open={revokeOpen}
+          onClose={() => setRevokeOpen(false)}
+          onConfirm={handleRevokeClientSubmit.bind(null, revokeClientName)}
+        />}
       <Button variant="contained" color="primary" onClick={() => setCreateOpen(true)}>Create Client</Button>
       {createOpen && <CreateVPNClientDialog open={createOpen} onClose={() => setCreateOpen(false)} onCreate={handleCreateClientSubmit}/>}
       {/*<Typography variant="h5" className="mt-6">Create OpenVPN Client</Typography>
@@ -116,9 +124,12 @@ const VPN = () => {
               <Button
                 variant="contained"
                 color="secondary"
-                onClick={() => handleRevokeClientSubmit(row.original.clientName)}
+                onClick={() => {
+                  setRevokeClientName( row.original.clientName );
+                  setRevokeOpen( true );
+                }}
               >
-                Delete
+                Revoke
               </Button>
             ),
           },