Separating the create client functionality from the main vpn lists.

diff --git a/src/app/views/VPN/CreateVPNClientDialog.jsx b/src/app/views/VPN/CreateVPNClientDialog.jsx
index 3806c93b9b3d3aaaaf25557ab7d92b68bf5b36cb..30f1cf3c6bff233d8e0b3a790155b4c219064608 100644 (file)
--- 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 7bbc48a28ad843ab6a97c38ada26096f126469c4..8906f2035432d8c385c731c3ee2659b67056912a 100644 (file)
--- 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}
       />