From 637920a928599d1002b0eac71a67f5abafd043e4 Mon Sep 17 00:00:00 2001
From: charleswrayjr <charleswrayjr@gmail.com>
Date: Tue, 9 Sep 2025 09:56:02 -0500
Subject: [PATCH] Separating the create client functionality from the main vpn
 lists.

---
 src/app/views/VPN/CreateVPNClientDialog.jsx |  3 ++-
 src/app/views/VPN/VPN.jsx                   | 27 +++++++++++++++------
 2 files changed, 21 insertions(+), 9 deletions(-)

diff --git a/src/app/views/VPN/CreateVPNClientDialog.jsx b/src/app/views/VPN/CreateVPNClientDialog.jsx
index 3806c93..30f1cf3 100644
--- a/src/app/views/VPN/CreateVPNClientDialog.jsx
+++ b/src/app/views/VPN/CreateVPNClientDialog.jsx
@@ -5,6 +5,7 @@ const CreateVPNClientDialog = ( { open, onClose, onCreate }) => {
 	const [clientName, setClientName] = useState('');
 	const [staticIp, setStaticIp] = useState('');
 	const [useStaticIp, setUseStaticIp] = useState(false);
+	// noinspection JSValidateTypes
 	return (
 		<Dialog open={open} onClose={onClose}>
 			<DialogTitle>Create New Client</DialogTitle>
@@ -22,7 +23,7 @@ const CreateVPNClientDialog = ( { open, onClose, onCreate }) => {
 						value={useStaticIp}
 						onChange={(e) => setUseStaticIp(e.target.value)}
 						fullWidth
-					>
+						variant='standard'>
 						<MenuItem value={false} >Dynamic IP</MenuItem>
 						<MenuItem value={true} >Static IP</MenuItem>
 					</Select>
diff --git a/src/app/views/VPN/VPN.jsx b/src/app/views/VPN/VPN.jsx
index 7bbc48a..8906f20 100644
--- a/src/app/views/VPN/VPN.jsx
+++ b/src/app/views/VPN/VPN.jsx
@@ -12,8 +12,8 @@ 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 [revokeClientName, setRevokeClientName] = useState('');*/
   const [clients, setClients] = useState([]);
   const [availableClients, setAvailableClients] = useState( [] );
   const [message, setMessage] = useState('');
@@ -47,16 +47,15 @@ const VPN = () => {
     const { clientName, useStaticIp, staticIp } = data;
     e.preventDefault();
     setMessage( await VPNService.createClient({ clientName, useStaticIp, staticIp }, fetchClients ) );
+    fetchAvailableClients().catch( e => setMessage( e ) );
     setCreateOpen( false );
   };
 
-  const handleRevokeClientSubmit = async (e) => {
-    e.preventDefault();
+  const handleRevokeClientSubmit = async ( revokeClientName ) => {
     setMessage( await VPNService.revokeClient( { revokeClientName }, fetchClients ) );
+    fetchAvailableClients().catch( e => setMessage( e ) );
   };
 
-  console.log(availableClients);
-
   return (
     <Container>
       <Button variant="contained" color="primary" onClick={() => setCreateOpen(true)}>Create Client</Button>
@@ -89,7 +88,7 @@ const VPN = () => {
         <Button type="submit" variant="contained" color="primary">Create Client</Button>
       </form>*/}
 
-      <Typography variant="h5" className="mt-6">Revoke OpenVPN Client</Typography>
+      {/*<Typography variant="h5" className="mt-6">Revoke OpenVPN Client</Typography>
       <form onSubmit={handleRevokeClientSubmit} className="space-y-4">
         <TextField
           label="Client Name"
@@ -98,7 +97,7 @@ const VPN = () => {
           fullWidth
         />
         <Button type="submit" variant="contained" color="secondary">Revoke Client</Button>
-      </form>
+      </form>*/}
 
       <Typography variant="h5" className="mt-6">Available OpenVPN Clients</Typography>
       <MaterialReactTable
@@ -111,6 +110,18 @@ const VPN = () => {
             }, header: 'Active Certificate' },
           { accessorFn: row => clients.find( c => c.name === row.clientName ) ? 'Yes' : 'No', header: 'Connected' },
           { accessorFn: row => row.hasOvpn ? 'Yes' : 'No', header: 'Has Profile' },
+          {
+            header: 'Actions',
+            Cell: ({ row }) => (
+              <Button
+                variant="contained"
+                color="secondary"
+                onClick={() => handleRevokeClientSubmit(row.original.name)}
+              >
+                Delete
+              </Button>
+            ),
+          },
         ]}
         data={availableClients}
       />
-- 
2.43.0