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
new file mode 100644 (file)
index 0000000..25c2b27
--- /dev/null
+++ b/src/app/views/VPN/CreateVPNClientDialog.jsx
@@ -0,0 +1,49 @@
+import React, { useState } from 'react';
+import { Dialog, DialogTitle, DialogContent, DialogActions, Button, TextField, Select, MenuItem } from '@mui/material';
+
+const CreateVPNClientDialog = ( { open, onClose, onCreate }) => {
+       const [clientName, setClientName] = useState('');
+       const [staticIp, setStaticIp] = useState('');
+       const [useStaticIp, setUseStaticIp] = useState(false);
+       return (
+               <Dialog open={open} onClose={onClose}>
+                       <DialogTitle>Create New Client</DialogTitle>
+                       <form onSubmit={ e => {
+                               onCreate(e, { clientName, staticIp, useStaticIp } );
+                       } } className="space-y-4" >
+                               <DialogContent>
+                                       <TextField
+                                               label="Client Name"
+                                               value={clientName}
+                                               onChange={(e) => setClientName(e.target.value)}
+                                               fullWidth
+                                       />
+                                       <Select
+                                               variant='contained'
+                                               value={useStaticIp}
+                                               onChange={(e) => setUseStaticIp(e.target.value)}
+                                               fullWidth
+                                       >
+                                               <MenuItem value={false} >Dynamic IP</MenuItem>
+                                               <MenuItem value={true} >Static IP</MenuItem>
+                                       </Select>
+                                       {useStaticIp && (
+                                               <TextField
+                                                       label="Static IP"
+                                                       value={staticIp}
+                                                       onChange={(e) => setStaticIp(e.target.value)}
+                                                       fullWidth
+                                                       placeholder="e.g., 10.8.0.x"
+                                               />
+                                       )}
+                               </DialogContent>
+                               <DialogActions>
+                                       <Button type="submit" variant="contained" color="primary">Create</Button>
+                                       <Button variant='contained' color='primary' onClick={onClose}>Cancel</Button>
+                               </DialogActions>
+                       </form>
+               </Dialog>
+       );
+};
+
+export default CreateVPNClientDialog;
\ No newline at end of file

diff --git a/src/app/views/VPN/VPN.jsx b/src/app/views/VPN/VPN.jsx
index 496a21fce0071e5ed46ded81b70248dabd5647a7..ff91cb39e3a4a011fe78f827e3782d0bb43f2107 100644 (file)
--- a/src/app/views/VPN/VPN.jsx
+++ b/src/app/views/VPN/VPN.jsx
@@ -4,18 +4,20 @@ import { MaterialReactTable } from 'material-react-table';
 /*import axios from 'axios';*/
 import 'tailwindcss/tailwind.css';
 import { VPNService } from '../../services';
+import { CreateVPNClientDialog } from './';
 
 const VPN = () => {
   /*const [token, setToken] = useState('');
   const [username, setUsername] = useState('');
   const [password, setPassword] = useState('');*/
-  const [clientName, setClientName] = useState('');
+  /*const [clientName, setClientName] = useState('');
   const [staticIp, setStaticIp] = useState('');
-  const [useStaticIp, setUseStaticIp] = useState(false);
+  const [useStaticIp, setUseStaticIp] = useState(false);*/
   const [revokeClientName, setRevokeClientName] = useState('');
   const [clients, setClients] = useState([]);
   const [availableClients, setAvailableClients] = useState( [] );
   const [message, setMessage] = useState('');
+  const [createOpen, setCreateOpen] = useState( false );
 
   const fetchClients = async () => {
     await VPNService.fetchClients().then( res => setClients( res ) ).catch( err => setMessage( err ) );
@@ -41,9 +43,11 @@ const VPN = () => {
     }
   };*/
 
-  const handleCreateClientSubmit = async (e) => {
+  const handleCreateClientSubmit = async (e, data) => {
+    const { clientName, useStaticIp, staticIp } = data;
     e.preventDefault();
     setMessage( await VPNService.createClient({ clientName, useStaticIp, staticIp }, fetchClients ) );
+    setCreateOpen( false );
   };
 
   const handleRevokeClientSubmit = async (e) => {
@@ -55,7 +59,9 @@ const VPN = () => {
 
   return (
     <Container>
-      <Typography variant="h5" className="mt-6">Create OpenVPN Client</Typography>
+      <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>
       <form onSubmit={handleCreateClientSubmit} className="space-y-4">
         <TextField
           label="Client Name"
@@ -81,7 +87,7 @@ const VPN = () => {
           />
         )}
         <Button type="submit" variant="contained" color="primary">Create Client</Button>
-      </form>
+      </form>*/}
 
       <Typography variant="h5" className="mt-6">Revoke OpenVPN Client</Typography>
       <form onSubmit={handleRevokeClientSubmit} className="space-y-4">

diff --git a/src/app/views/VPN/index.js b/src/app/views/VPN/index.js
new file mode 100644 (file)
index 0000000..820f593
--- /dev/null
+++ b/src/app/views/VPN/index.js
@@ -0,0 +1,7 @@
+import VPN from './VPN';
+import CreateVPNClientDialog from './CreateVPNClientDialog';
+
+export {
+  VPN,
+  CreateVPNClientDialog,
+};
\ No newline at end of file