From: charleswrayjr <charleswrayjr@gmail.com>
Date: Tue, 9 Sep 2025 13:40:10 +0000 (-0500)
Subject: Adding available clients section to VPN page.
X-Git-Url: https://git.phasecustomsoft.com/static/git-logo.png?a=commitdiff_plain;h=c96cdffd172a2eea06d2de2eeea10a7c5cb0a654;p=phs-admin.git

Adding available clients section to VPN page.
---

diff --git a/src/app/services/VPN/VPNConfig.js b/src/app/services/VPN/VPNConfig.js
index 39e1127..b398f39 100644
--- 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 459e812..6b2ffdf 100644
--- 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 698d5fc..139dc8e 100644
--- 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={[