Adding available clients section to VPN page.

diff --git a/src/app/services/VPN/VPNConfig.js b/src/app/services/VPN/VPNConfig.js
index 39e11276dc0ee6cdc773dc7e068332e5fbdd0306..b398f390fd72d0dd1b271b572a2bcf3e2c9e4d30 100644 (file)
--- a/src/app/services/VPN/VPNConfig.js
+++ b/src/app/services/VPN/VPNConfig.js
@@ -2,7 +2,8 @@ const base = 'vpn/';
 const VPNConfig = {
   create: `${base}create-client/`,
   delete: `${base}revoke-client/`,
-  index: `${base}clients/`
+  index: `${base}clients/`,
+  availableClients: `${base}available-clients/`
 };
 
 export default VPNConfig;
\ No newline at end of file

diff --git a/src/app/services/VPN/VPNService.js b/src/app/services/VPN/VPNService.js
index 459e8120a52e42c25ed3c52f52a5dff0244ab843..6b2ffdf4f247217db22dc28093580ab9ed6d6816 100644 (file)
--- a/src/app/services/VPN/VPNService.js
+++ b/src/app/services/VPN/VPNService.js
@@ -14,6 +14,17 @@ class VPNService {
     });
   };
 
+  fetchAvailableClients = () => {
+    return new Promise( async ( resolve ) => {
+      try {
+        const response = await axios.get(`${base_url}${VPNConfig.availableClients}`);
+        resolve(response.data.clients);
+      } catch (error) {
+        resolve(`Error: ${error.response?.data?.error || 'Failed to fetch available clients'}`);
+      }
+    });
+  };
+
   createClient = ( data, fetchClients ) => {
     return new Promise( async ( resolve ) => {
       const { clientName, useStaticIp, staticIp } = data;

diff --git a/src/app/views/VPN/VPN.jsx b/src/app/views/VPN/VPN.jsx
index 698d5fcf1ceb44812237d32e4a3873445f1e363c..139dc8efb2df68493b380406bc9c42c2b1a7b4c8 100644 (file)
--- a/src/app/views/VPN/VPN.jsx
+++ b/src/app/views/VPN/VPN.jsx
@@ -14,14 +14,20 @@ const VPN = () => {
   const [useStaticIp, setUseStaticIp] = useState(false);
   const [revokeClientName, setRevokeClientName] = useState('');
   const [clients, setClients] = useState([]);
+  const [availableClients, setAvailableClients] = useState( [] );
   const [message, setMessage] = useState('');
 
   const fetchClients = async () => {
     await VPNService.fetchClients().then( res => setClients( res ) ).catch( err => setMessage( err ) );
   };
 
+  const fetchAvailableClients = async () => {
+    await VPNService.fetchAvailableClients().then( res => setAvailableClients( res ) ).catch( err => setMessage( err ) );
+  };
+
   useEffect( () => {
     fetchClients().catch( e => setMessage( e ) );
+    fetchAvailableClients().catch( e => setMessage( e ) );
   }, [] );
 
   /*const handleLogin = async (e) => {
@@ -86,6 +92,17 @@ const VPN = () => {
         <Button type="submit" variant="contained" color="secondary">Revoke Client</Button>
       </form>
 
+      <Typography variant="h5" className="mt-6">Available OpenVPN Clients</Typography>
+      <MaterialReactTable
+        columns={[
+          { accessorKey: 'clientName', header: 'Name' },
+          { accessorKey: 'ip', header: 'IP' },
+          { accessorKey: 'hasCertificate', header: 'Active Certificate' },
+          { accessorFn: row => clients.find( c => c.name === row.clientName ), header: 'Connected' },
+        ]}
+        data={availableClients}
+      />
+
       <Typography variant="h5" className="mt-6">Connected OpenVPN Clients</Typography>
       <MaterialReactTable
         columns={[