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

---
 src/app/views/VPN/CreateVPNClientDialog.jsx | 49 +++++++++++++++++++++
 src/app/views/VPN/VPN.jsx                   | 16 ++++---
 src/app/views/VPN/index.js                  |  7 +++
 3 files changed, 67 insertions(+), 5 deletions(-)
 create mode 100644 src/app/views/VPN/CreateVPNClientDialog.jsx
 create mode 100644 src/app/views/VPN/index.js

diff --git a/src/app/views/VPN/CreateVPNClientDialog.jsx b/src/app/views/VPN/CreateVPNClientDialog.jsx
new file mode 100644
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 496a21f..ff91cb3 100644
--- 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
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
-- 
2.43.0