Separating the revoke client functionality from the main vpn lists.

diff --git a/src/app/components/VPN/CreateVPNClientDialog.jsx b/src/app/components/VPN/CreateVPNClientDialog.jsx
new file mode 100644 (file)
index 0000000..30f1cf3
--- /dev/null
+++ b/src/app/components/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);
+       // noinspection JSValidateTypes
+       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
+                                               value={useStaticIp}
+                                               onChange={(e) => setUseStaticIp(e.target.value)}
+                                               fullWidth
+                                               variant='standard'>
+                                               <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/components/index.js b/src/app/components/index.js
index eecdf8194ba541466c382682888c01e05bcccbbc..e12529ecb8f8b201b41945e85430344eba2d7b72 100644 (file)
--- a/src/app/components/index.js
+++ b/src/app/components/index.js
@@ -1 +1,2 @@
-export * from './VPN/ConfirmRevoke';
\ No newline at end of file
+export * as ConfirmRevoke from './VPN/ConfirmRevoke';
+export * as CreateVPNClientDialog from './VPN/CreateVPNClientDialog';
\ No newline at end of file

diff --git a/src/app/views/VPN/CreateVPNClientDialog.jsx b/src/app/views/VPN/CreateVPNClientDialog.jsx
deleted file mode 100644 (file)
index 30f1cf3..0000000
--- a/src/app/views/VPN/CreateVPNClientDialog.jsx
+++ /dev/null
@@ -1,49 +0,0 @@
-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);
-       // noinspection JSValidateTypes
-       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
-                                               value={useStaticIp}
-                                               onChange={(e) => setUseStaticIp(e.target.value)}
-                                               fullWidth
-                                               variant='standard'>
-                                               <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 b91f4af2844263a6184ec7e681425b9789208ba0..a8bdff8efea0fe07a6cf0fcf1540ec7c692e0315 100644 (file)
--- a/src/app/views/VPN/VPN.jsx
+++ b/src/app/views/VPN/VPN.jsx
@@ -1,11 +1,10 @@
 import React, { useState, useEffect } from 'react';
-import { Container, Typography, TextField, Button, Select, MenuItem } from '@mui/material';
+import { Container, Typography, Button } from '@mui/material';
 import { MaterialReactTable } from 'material-react-table';
 /*import axios from 'axios';*/
 import 'tailwindcss/tailwind.css';
 import { VPNService } from '../../services';
-import CreateVPNClientDialog from './CreateVPNClientDialog';
-import { ConfirmRevoke } from '../components';
+import { ConfirmRevoke, CreateVPNClientDialog } from '../../components';
 
 const VPN = () => {
   /*const [token, setToken] = useState('');