feat(vpn): add VPN server management and route-based VPN access control
This commit is contained in:
@@ -3,6 +3,6 @@
|
||||
*/
|
||||
export const commitinfo = {
|
||||
name: '@serve.zone/dcrouter',
|
||||
version: '11.12.4',
|
||||
version: '11.13.0',
|
||||
description: 'A multifaceted routing service handling mail and SMS delivery functions.'
|
||||
}
|
||||
|
||||
@@ -905,6 +905,161 @@ export const toggleRemoteIngressAction = remoteIngressStatePart.createAction<{
|
||||
}
|
||||
});
|
||||
|
||||
// ============================================================================
|
||||
// VPN State
|
||||
// ============================================================================
|
||||
|
||||
export interface IVpnState {
|
||||
clients: interfaces.data.IVpnClient[];
|
||||
status: interfaces.data.IVpnServerStatus | null;
|
||||
isLoading: boolean;
|
||||
error: string | null;
|
||||
lastUpdated: number;
|
||||
/** WireGuard config shown after create/rotate (only shown once) */
|
||||
newClientConfig: string | null;
|
||||
}
|
||||
|
||||
export const vpnStatePart = await appState.getStatePart<IVpnState>(
|
||||
'vpn',
|
||||
{
|
||||
clients: [],
|
||||
status: null,
|
||||
isLoading: false,
|
||||
error: null,
|
||||
lastUpdated: 0,
|
||||
newClientConfig: null,
|
||||
},
|
||||
'soft'
|
||||
);
|
||||
|
||||
// ============================================================================
|
||||
// VPN Actions
|
||||
// ============================================================================
|
||||
|
||||
export const fetchVpnAction = vpnStatePart.createAction(async (statePartArg): Promise<IVpnState> => {
|
||||
const context = getActionContext();
|
||||
const currentState = statePartArg.getState()!;
|
||||
if (!context.identity) return currentState;
|
||||
|
||||
try {
|
||||
const clientsRequest = new plugins.domtools.plugins.typedrequest.TypedRequest<
|
||||
interfaces.requests.IReq_GetVpnClients
|
||||
>('/typedrequest', 'getVpnClients');
|
||||
|
||||
const statusRequest = new plugins.domtools.plugins.typedrequest.TypedRequest<
|
||||
interfaces.requests.IReq_GetVpnStatus
|
||||
>('/typedrequest', 'getVpnStatus');
|
||||
|
||||
const [clientsResponse, statusResponse] = await Promise.all([
|
||||
clientsRequest.fire({ identity: context.identity }),
|
||||
statusRequest.fire({ identity: context.identity }),
|
||||
]);
|
||||
|
||||
return {
|
||||
...currentState,
|
||||
clients: clientsResponse.clients,
|
||||
status: statusResponse.status,
|
||||
isLoading: false,
|
||||
error: null,
|
||||
lastUpdated: Date.now(),
|
||||
};
|
||||
} catch (error) {
|
||||
return {
|
||||
...currentState,
|
||||
isLoading: false,
|
||||
error: error instanceof Error ? error.message : 'Failed to fetch VPN data',
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
export const createVpnClientAction = vpnStatePart.createAction<{
|
||||
clientId: string;
|
||||
tags?: string[];
|
||||
description?: string;
|
||||
}>(async (statePartArg, dataArg, actionContext): Promise<IVpnState> => {
|
||||
const context = getActionContext();
|
||||
const currentState = statePartArg.getState()!;
|
||||
|
||||
try {
|
||||
const request = new plugins.domtools.plugins.typedrequest.TypedRequest<
|
||||
interfaces.requests.IReq_CreateVpnClient
|
||||
>('/typedrequest', 'createVpnClient');
|
||||
|
||||
const response = await request.fire({
|
||||
identity: context.identity!,
|
||||
clientId: dataArg.clientId,
|
||||
tags: dataArg.tags,
|
||||
description: dataArg.description,
|
||||
});
|
||||
|
||||
if (!response.success) {
|
||||
return { ...currentState, error: response.message || 'Failed to create client' };
|
||||
}
|
||||
|
||||
const refreshed = await actionContext!.dispatch(fetchVpnAction, null);
|
||||
return {
|
||||
...refreshed,
|
||||
newClientConfig: response.wireguardConfig || null,
|
||||
};
|
||||
} catch (error: unknown) {
|
||||
return {
|
||||
...currentState,
|
||||
error: error instanceof Error ? error.message : 'Failed to create VPN client',
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
export const deleteVpnClientAction = vpnStatePart.createAction<string>(
|
||||
async (statePartArg, clientId, actionContext): Promise<IVpnState> => {
|
||||
const context = getActionContext();
|
||||
const currentState = statePartArg.getState()!;
|
||||
|
||||
try {
|
||||
const request = new plugins.domtools.plugins.typedrequest.TypedRequest<
|
||||
interfaces.requests.IReq_DeleteVpnClient
|
||||
>('/typedrequest', 'deleteVpnClient');
|
||||
|
||||
await request.fire({ identity: context.identity!, clientId });
|
||||
return await actionContext!.dispatch(fetchVpnAction, null);
|
||||
} catch (error: unknown) {
|
||||
return {
|
||||
...currentState,
|
||||
error: error instanceof Error ? error.message : 'Failed to delete VPN client',
|
||||
};
|
||||
}
|
||||
},
|
||||
);
|
||||
|
||||
export const toggleVpnClientAction = vpnStatePart.createAction<{
|
||||
clientId: string;
|
||||
enabled: boolean;
|
||||
}>(async (statePartArg, dataArg, actionContext): Promise<IVpnState> => {
|
||||
const context = getActionContext();
|
||||
const currentState = statePartArg.getState()!;
|
||||
|
||||
try {
|
||||
const method = dataArg.enabled ? 'enableVpnClient' : 'disableVpnClient';
|
||||
type TReq = interfaces.requests.IReq_EnableVpnClient | interfaces.requests.IReq_DisableVpnClient;
|
||||
const request = new plugins.domtools.plugins.typedrequest.TypedRequest<TReq>(
|
||||
'/typedrequest', method,
|
||||
);
|
||||
|
||||
await request.fire({ identity: context.identity!, clientId: dataArg.clientId });
|
||||
return await actionContext!.dispatch(fetchVpnAction, null);
|
||||
} catch (error: unknown) {
|
||||
return {
|
||||
...currentState,
|
||||
error: error instanceof Error ? error.message : 'Failed to toggle VPN client',
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
export const clearNewClientConfigAction = vpnStatePart.createAction(
|
||||
async (statePartArg): Promise<IVpnState> => {
|
||||
return { ...statePartArg.getState()!, newClientConfig: null };
|
||||
},
|
||||
);
|
||||
|
||||
// ============================================================================
|
||||
// Route Management Actions
|
||||
// ============================================================================
|
||||
@@ -1372,6 +1527,15 @@ async function dispatchCombinedRefreshActionInner() {
|
||||
console.error('Remote ingress refresh failed:', error);
|
||||
}
|
||||
}
|
||||
|
||||
// Refresh VPN data if on vpn view
|
||||
if (currentView === 'vpn') {
|
||||
try {
|
||||
await vpnStatePart.dispatchAction(fetchVpnAction, null);
|
||||
} catch (error) {
|
||||
console.error('VPN refresh failed:', error);
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Combined refresh failed:', error);
|
||||
// If the error looks like an auth failure (invalid JWT), force re-login
|
||||
|
||||
@@ -9,4 +9,5 @@ export * from './ops-view-apitokens.js';
|
||||
export * from './ops-view-security.js';
|
||||
export * from './ops-view-certificates.js';
|
||||
export * from './ops-view-remoteingress.js';
|
||||
export * from './ops-view-vpn.js';
|
||||
export * from './shared/index.js';
|
||||
@@ -24,6 +24,7 @@ import { OpsViewApiTokens } from './ops-view-apitokens.js';
|
||||
import { OpsViewSecurity } from './ops-view-security.js';
|
||||
import { OpsViewCertificates } from './ops-view-certificates.js';
|
||||
import { OpsViewRemoteIngress } from './ops-view-remoteingress.js';
|
||||
import { OpsViewVpn } from './ops-view-vpn.js';
|
||||
|
||||
@customElement('ops-dashboard')
|
||||
export class OpsDashboard extends DeesElement {
|
||||
@@ -92,6 +93,11 @@ export class OpsDashboard extends DeesElement {
|
||||
iconName: 'lucide:globe',
|
||||
element: OpsViewRemoteIngress,
|
||||
},
|
||||
{
|
||||
name: 'VPN',
|
||||
iconName: 'lucide:shield',
|
||||
element: OpsViewVpn,
|
||||
},
|
||||
];
|
||||
|
||||
/**
|
||||
|
||||
330
ts_web/elements/ops-view-vpn.ts
Normal file
330
ts_web/elements/ops-view-vpn.ts
Normal file
@@ -0,0 +1,330 @@
|
||||
import {
|
||||
DeesElement,
|
||||
html,
|
||||
customElement,
|
||||
type TemplateResult,
|
||||
css,
|
||||
state,
|
||||
cssManager,
|
||||
} from '@design.estate/dees-element';
|
||||
import * as appstate from '../appstate.js';
|
||||
import * as interfaces from '../../dist_ts_interfaces/index.js';
|
||||
import { viewHostCss } from './shared/css.js';
|
||||
import { type IStatsTile } from '@design.estate/dees-catalog';
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'ops-view-vpn': OpsViewVpn;
|
||||
}
|
||||
}
|
||||
|
||||
@customElement('ops-view-vpn')
|
||||
export class OpsViewVpn extends DeesElement {
|
||||
@state()
|
||||
accessor vpnState: appstate.IVpnState = appstate.vpnStatePart.getState()!;
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
const sub = appstate.vpnStatePart.select().subscribe((newState) => {
|
||||
this.vpnState = newState;
|
||||
});
|
||||
this.rxSubscriptions.push(sub);
|
||||
}
|
||||
|
||||
async connectedCallback() {
|
||||
await super.connectedCallback();
|
||||
await appstate.vpnStatePart.dispatchAction(appstate.fetchVpnAction, null);
|
||||
}
|
||||
|
||||
public static styles = [
|
||||
cssManager.defaultStyles,
|
||||
viewHostCss,
|
||||
css`
|
||||
.vpnContainer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.statusBadge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 3px 10px;
|
||||
border-radius: 12px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.02em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.statusBadge.enabled {
|
||||
background: ${cssManager.bdTheme('#dcfce7', '#14532d')};
|
||||
color: ${cssManager.bdTheme('#166534', '#4ade80')};
|
||||
}
|
||||
|
||||
.statusBadge.disabled {
|
||||
background: ${cssManager.bdTheme('#fef2f2', '#450a0a')};
|
||||
color: ${cssManager.bdTheme('#991b1b', '#f87171')};
|
||||
}
|
||||
|
||||
.configDialog {
|
||||
padding: 16px;
|
||||
background: ${cssManager.bdTheme('#fffbeb', '#1c1917')};
|
||||
border: 1px solid ${cssManager.bdTheme('#fbbf24', '#92400e')};
|
||||
border-radius: 8px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.configDialog pre {
|
||||
display: block;
|
||||
padding: 12px;
|
||||
background: ${cssManager.bdTheme('#1f2937', '#111827')};
|
||||
color: #10b981;
|
||||
border-radius: 4px;
|
||||
font-family: monospace;
|
||||
font-size: 12px;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-all;
|
||||
margin: 8px 0;
|
||||
user-select: all;
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.configDialog .warning {
|
||||
font-size: 12px;
|
||||
color: ${cssManager.bdTheme('#92400e', '#fbbf24')};
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.tagBadge {
|
||||
display: inline-flex;
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
background: ${cssManager.bdTheme('#eff6ff', '#172554')};
|
||||
color: ${cssManager.bdTheme('#1e40af', '#60a5fa')};
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.serverInfo {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
||||
gap: 12px;
|
||||
padding: 16px;
|
||||
background: ${cssManager.bdTheme('#f9fafb', '#111827')};
|
||||
border-radius: 8px;
|
||||
border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#1f2937')};
|
||||
}
|
||||
|
||||
.serverInfo .infoItem {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.serverInfo .infoLabel {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
color: ${cssManager.bdTheme('#6b7280', '#9ca3af')};
|
||||
}
|
||||
|
||||
.serverInfo .infoValue {
|
||||
font-size: 14px;
|
||||
font-family: monospace;
|
||||
color: ${cssManager.bdTheme('#111827', '#f9fafb')};
|
||||
}
|
||||
`,
|
||||
];
|
||||
|
||||
render(): TemplateResult {
|
||||
const status = this.vpnState.status;
|
||||
const clients = this.vpnState.clients;
|
||||
const connectedCount = status?.connectedClients ?? 0;
|
||||
const totalClients = clients.length;
|
||||
const enabledClients = clients.filter(c => c.enabled).length;
|
||||
|
||||
const statsTiles: IStatsTile[] = [
|
||||
{
|
||||
id: 'totalClients',
|
||||
title: 'Total Clients',
|
||||
type: 'number',
|
||||
value: totalClients,
|
||||
icon: 'lucide:users',
|
||||
description: 'Registered VPN clients',
|
||||
color: '#3b82f6',
|
||||
},
|
||||
{
|
||||
id: 'connectedClients',
|
||||
title: 'Connected',
|
||||
type: 'number',
|
||||
value: connectedCount,
|
||||
icon: 'lucide:link',
|
||||
description: 'Currently connected',
|
||||
color: '#10b981',
|
||||
},
|
||||
{
|
||||
id: 'enabledClients',
|
||||
title: 'Enabled',
|
||||
type: 'number',
|
||||
value: enabledClients,
|
||||
icon: 'lucide:shieldCheck',
|
||||
description: 'Active client registrations',
|
||||
color: '#8b5cf6',
|
||||
},
|
||||
{
|
||||
id: 'serverStatus',
|
||||
title: 'Server',
|
||||
type: 'text',
|
||||
value: status?.running ? 'Running' : 'Stopped',
|
||||
icon: 'lucide:server',
|
||||
description: status?.running ? `${status.forwardingMode} mode` : 'VPN server not running',
|
||||
color: status?.running ? '#10b981' : '#ef4444',
|
||||
},
|
||||
];
|
||||
|
||||
return html`
|
||||
<ops-sectionheading>VPN</ops-sectionheading>
|
||||
|
||||
${this.vpnState.newClientConfig ? html`
|
||||
<div class="configDialog">
|
||||
<strong>Client created successfully!</strong>
|
||||
<div class="warning">Copy the WireGuard config now. It contains private keys that won't be shown again.</div>
|
||||
<pre>${this.vpnState.newClientConfig}</pre>
|
||||
<dees-button
|
||||
@click=${async () => {
|
||||
if (navigator.clipboard && typeof navigator.clipboard.writeText === 'function') {
|
||||
await navigator.clipboard.writeText(this.vpnState.newClientConfig!);
|
||||
}
|
||||
const { DeesToast } = await import('@design.estate/dees-catalog');
|
||||
DeesToast.createAndShow({ message: 'Config copied to clipboard', type: 'success', duration: 3000 });
|
||||
}}
|
||||
>Copy to Clipboard</dees-button>
|
||||
<dees-button
|
||||
@click=${() => {
|
||||
const blob = new Blob([this.vpnState.newClientConfig!], { type: 'text/plain' });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = 'wireguard.conf';
|
||||
a.click();
|
||||
URL.revokeObjectURL(url);
|
||||
}}
|
||||
>Download .conf</dees-button>
|
||||
<dees-button
|
||||
@click=${() => appstate.vpnStatePart.dispatchAction(appstate.clearNewClientConfigAction, null)}
|
||||
>Dismiss</dees-button>
|
||||
</div>
|
||||
` : ''}
|
||||
|
||||
<dees-statsgrid .statsTiles=${statsTiles}></dees-statsgrid>
|
||||
|
||||
${status ? html`
|
||||
<div class="serverInfo">
|
||||
<div class="infoItem">
|
||||
<span class="infoLabel">Subnet</span>
|
||||
<span class="infoValue">${status.subnet}</span>
|
||||
</div>
|
||||
<div class="infoItem">
|
||||
<span class="infoLabel">WireGuard Port</span>
|
||||
<span class="infoValue">${status.wgListenPort}</span>
|
||||
</div>
|
||||
<div class="infoItem">
|
||||
<span class="infoLabel">Forwarding Mode</span>
|
||||
<span class="infoValue">${status.forwardingMode}</span>
|
||||
</div>
|
||||
${status.serverPublicKeys ? html`
|
||||
<div class="infoItem">
|
||||
<span class="infoLabel">WG Public Key</span>
|
||||
<span class="infoValue" style="font-size: 11px; word-break: break-all;">${status.serverPublicKeys.wgPublicKey}</span>
|
||||
</div>
|
||||
` : ''}
|
||||
</div>
|
||||
` : ''}
|
||||
|
||||
<dees-table
|
||||
.heading1=${'VPN Clients'}
|
||||
.heading2=${'Manage WireGuard and SmartVPN client registrations'}
|
||||
.data=${clients}
|
||||
.displayFunction=${(client: interfaces.data.IVpnClient) => ({
|
||||
'Client ID': client.clientId,
|
||||
'Status': client.enabled
|
||||
? html`<span class="statusBadge enabled">enabled</span>`
|
||||
: html`<span class="statusBadge disabled">disabled</span>`,
|
||||
'VPN IP': client.assignedIp || '-',
|
||||
'Tags': client.tags?.length
|
||||
? html`${client.tags.map(t => html`<span class="tagBadge">${t}</span>`)}`
|
||||
: '-',
|
||||
'Description': client.description || '-',
|
||||
'Created': new Date(client.createdAt).toLocaleDateString(),
|
||||
})}
|
||||
.dataActions=${[
|
||||
{
|
||||
name: 'Toggle',
|
||||
iconName: 'lucide:power',
|
||||
action: async (client: interfaces.data.IVpnClient) => {
|
||||
await appstate.vpnStatePart.dispatchAction(appstate.toggleVpnClientAction, {
|
||||
clientId: client.clientId,
|
||||
enabled: !client.enabled,
|
||||
});
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'Delete',
|
||||
iconName: 'lucide:trash2',
|
||||
action: async (client: interfaces.data.IVpnClient) => {
|
||||
const { DeesModal } = await import('@design.estate/dees-catalog');
|
||||
DeesModal.createAndShow({
|
||||
heading: 'Delete VPN Client',
|
||||
content: html`<p>Are you sure you want to delete client "${client.clientId}"?</p>`,
|
||||
menuOptions: [
|
||||
{ name: 'Cancel', action: async (modal: any) => modal.destroy() },
|
||||
{
|
||||
name: 'Delete',
|
||||
action: async (modal: any) => {
|
||||
await appstate.vpnStatePart.dispatchAction(appstate.deleteVpnClientAction, client.clientId);
|
||||
modal.destroy();
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
},
|
||||
},
|
||||
]}
|
||||
.createNewItem=${async () => {
|
||||
const { DeesModal, DeesForm, DeesInputText } = await import('@design.estate/dees-catalog');
|
||||
DeesModal.createAndShow({
|
||||
heading: 'Create VPN Client',
|
||||
content: html`
|
||||
<dees-form>
|
||||
<dees-input-text id="clientId" .label=${'Client ID'} .key=${'clientId'} required></dees-input-text>
|
||||
<dees-input-text id="description" .label=${'Description'} .key=${'description'}></dees-input-text>
|
||||
<dees-input-text id="tags" .label=${'Tags (comma-separated)'} .key=${'tags'}></dees-input-text>
|
||||
</dees-form>
|
||||
`,
|
||||
menuOptions: [
|
||||
{ name: 'Cancel', action: async (modal: any) => modal.destroy() },
|
||||
{
|
||||
name: 'Create',
|
||||
action: async (modal: any) => {
|
||||
const form = modal.shadowRoot!.querySelector('dees-form') as any;
|
||||
const data = await form.collectFormData();
|
||||
const tags = data.tags ? data.tags.split(',').map((t: string) => t.trim()).filter(Boolean) : undefined;
|
||||
await appstate.vpnStatePart.dispatchAction(appstate.createVpnClientAction, {
|
||||
clientId: data.clientId,
|
||||
description: data.description || undefined,
|
||||
tags,
|
||||
});
|
||||
modal.destroy();
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
}}
|
||||
></dees-table>
|
||||
`;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user