From 227aa50fbef5379818ffce14a5cd940b533ee89f Mon Sep 17 00:00:00 2001 From: charleswrayjr Date: Sun, 14 Sep 2025 23:26:01 -0500 Subject: [PATCH] Cleaning up main views. --- src/app/components/MessageForm.js | 2 + src/app/components/MessageGroupForm.js | 2 + src/app/components/MessageGroupMemberForm.js | 2 + src/app/components/PostForm.js | 2 + src/app/components/VPN/VPNContext.jsx | 13 +++- src/app/services/VPN/VPNConfig.js | 2 + src/app/services/VPN/VPNService.js | 22 +++++++ src/app/views/VPN/VPN.jsx | 65 ++++++++++++++------ src/globals.js | 2 +- tailwind.config.js | 2 +- 10 files changed, 92 insertions(+), 22 deletions(-) diff --git a/src/app/components/MessageForm.js b/src/app/components/MessageForm.js index 1e64c3c..cb5b4e1 100644 --- a/src/app/components/MessageForm.js +++ b/src/app/components/MessageForm.js @@ -1,3 +1,5 @@ +// noinspection JSValidateTypes + /** * @file Component for creating a new message */ diff --git a/src/app/components/MessageGroupForm.js b/src/app/components/MessageGroupForm.js index b312a55..3d3d661 100644 --- a/src/app/components/MessageGroupForm.js +++ b/src/app/components/MessageGroupForm.js @@ -1,3 +1,5 @@ +// noinspection JSValidateTypes + /** * @file Component for creating a new message group */ diff --git a/src/app/components/MessageGroupMemberForm.js b/src/app/components/MessageGroupMemberForm.js index 5e46d1c..922f86d 100644 --- a/src/app/components/MessageGroupMemberForm.js +++ b/src/app/components/MessageGroupMemberForm.js @@ -1,3 +1,5 @@ +// noinspection JSValidateTypes + /** * @file Component for adding a message group member */ diff --git a/src/app/components/PostForm.js b/src/app/components/PostForm.js index 24e8ec6..2976126 100644 --- a/src/app/components/PostForm.js +++ b/src/app/components/PostForm.js @@ -1,3 +1,5 @@ +// noinspection JSValidateTypes + /** * @file Component for creating a new post */ diff --git a/src/app/components/VPN/VPNContext.jsx b/src/app/components/VPN/VPNContext.jsx index 7692c3c..0ae28a9 100644 --- a/src/app/components/VPN/VPNContext.jsx +++ b/src/app/components/VPN/VPNContext.jsx @@ -1,6 +1,7 @@ import React, { createContext, useContext, useEffect, useState } from 'react'; import { VPNService } from '../../services'; import { ConfirmRevoke, CreateVPNClientDialog, SuspendClient } from '../index'; +import { useSnackbar } from 'notistack'; const VPNContext = createContext( undefined ); @@ -18,6 +19,7 @@ export const VPNProvider = ( { children } ) => { const [suspendOpen, setSuspendOpen] = useState( false ); /** TODO: Change the default time to something more reasonable. */ const [duration, setDuration] = useState( 1 ); + const { enqueueSnackbar } = useSnackbar(); const fetchServerStatus = async () => { await VPNService.getServerStatus() @@ -60,6 +62,14 @@ export const VPNProvider = ( { children } ) => { setRevokeClientName( '' ); }; + const handleToggleVPN = (action) => VPNService[action]().then( () => { + enqueueSnackbar( `VPN ${action} completed successfully`, { variant: 'success' } ); + setTimeout( () => fetchServerStatus(), 1000 ); + } ).catch( e => { + enqueueSnackbar( `VPN ${action} failed`, { variant: 'error' } ); + setMessage( e ); + }); + useEffect( () => { fetchClients().catch( e => setMessage( e ) ); fetchAvailableClients().catch( e => setMessage( e ) ); @@ -95,7 +105,8 @@ export const VPNProvider = ( { children } ) => { suspendOpen, setSuspendOpen, duration, - setDuration + setDuration, + handleToggleVPN }; return diff --git a/src/app/services/VPN/VPNConfig.js b/src/app/services/VPN/VPNConfig.js index 17b8750..46045a1 100644 --- a/src/app/services/VPN/VPNConfig.js +++ b/src/app/services/VPN/VPNConfig.js @@ -6,6 +6,8 @@ const VPNConfig = { availableClients: `${base}available-clients/`, getStatus: `${base}status/`, disconnect: `${base}disconnect/`, + stop: `${base}stop/`, + start: `${base}start/`, restart: `${base}restart/` }; diff --git a/src/app/services/VPN/VPNService.js b/src/app/services/VPN/VPNService.js index b2fb1d0..7b05045 100644 --- a/src/app/services/VPN/VPNService.js +++ b/src/app/services/VPN/VPNService.js @@ -87,6 +87,28 @@ class VPNService { } ); }; + stop = () => { + return new Promise( async ( resolve ) => { + try { + const response = await axios.put( `${ base_url }${ VPNConfig.stop }` ); + resolve( response.data.message ); + } catch (error) { + resolve( `Error: ${ error.response?.data?.error || 'Failed to stop' }` ); + } + } ); + }; + + start = () => { + return new Promise( async ( resolve ) => { + try { + const response = await axios.put( `${ base_url }${ VPNConfig.start }` ); + resolve( response.data.message ); + } catch (error) { + resolve( `Error: ${ error.response?.data?.error || 'Failed to start' }` ); + } + } ); + }; + restart = () => { return new Promise( async ( resolve ) => { try { diff --git a/src/app/views/VPN/VPN.jsx b/src/app/views/VPN/VPN.jsx index 44f48dd..eda4db1 100644 --- a/src/app/views/VPN/VPN.jsx +++ b/src/app/views/VPN/VPN.jsx @@ -1,4 +1,4 @@ -import { Container, Typography, Button, Grid, IconButton } from '@mui/material'; +import { Container, Typography, Button, Grid, IconButton, Card, CardHeader, CardContent } from '@mui/material'; import { MaterialReactTable, useMaterialReactTable } from 'material-react-table'; import { useVPN } from '../../components'; import AccessTimeOutlined from '@mui/icons-material/AccessTimeOutlined'; @@ -11,6 +11,7 @@ const VPN = () => { availableClients, message, setCreateOpen, + handleToggleVPN, serverStatus, setSuspendOpen } = useVPN(); const clientTable = useMaterialReactTable( { @@ -21,6 +22,13 @@ const VPN = () => { { accessorFn: row => row.connectedSince, header: 'Connected Since' }, ], data: clients, + renderTopToolbarCustomActions: () => ( + + + Connected OpenVPN Clients + + + ) } ); const availableTable = useMaterialReactTable({ columns:[ @@ -47,30 +55,49 @@ const VPN = () => { }, ], data: availableClients, - renderTopToolbarCustomActions: () => ( - <> - - - ) + renderTopToolbarCustomActions: () => ( Available Clients ) }); console.log('serverStatus', serverStatus); return ( - - Available OpenVPN ClientsStatus: { serverStatus ? 'Active' : 'Inactive' } - - - Connected OpenVPN Clients - - + + + + OpenVPN ManagementStatus: { serverStatus ? 'Active' : 'Inactive' } + + + + + + + + + + + + + + + )} /> + + + + + + + + + + {message && {message}} - + ); }; diff --git a/src/globals.js b/src/globals.js index e748f61..5fbb3e1 100755 --- a/src/globals.js +++ b/src/globals.js @@ -1 +1 @@ -export const base_url = 'http://localhost:23601/'; +export const base_url = 'https://api.phasecustomsoft.com/'; diff --git a/tailwind.config.js b/tailwind.config.js index c0f998f..0623b97 100755 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,6 +1,6 @@ /** @type {import('tailwindcss').Config} */ /* eslint-disable import/no-extraneous-dependencies */ -// noinspection SpellCheckingInspection +// noinspection SpellCheckingInspection,JSUnusedGlobalSymbols const path = require('path'); -- 2.43.0