@serve.zone/dcrouter 11.13.0 → 11.15.0

package/ts_web/appstate.ts

@@ -974,7 +974,7 @@ export const fetchVpnAction = vpnStatePart.createAction(async (statePartArg): Pr
 
 export const createVpnClientAction = vpnStatePart.createAction<{
   clientId: string;
-  tags?: string[];
+  serverDefinedClientTags?: string[];
   description?: string;
 }>(async (statePartArg, dataArg, actionContext): Promise<IVpnState> => {
   const context = getActionContext();
@@ -988,7 +988,7 @@ export const createVpnClientAction = vpnStatePart.createAction<{
     const response = await request.fire({
       identity: context.identity!,
       clientId: dataArg.clientId,
-      tags: dataArg.tags,
+      serverDefinedClientTags: dataArg.serverDefinedClientTags,
       description: dataArg.description,
     });
 

package/ts_web/elements/ops-view-vpn.ts

@@ -255,8 +255,8 @@ export class OpsViewVpn extends DeesElement {
             ? 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>`)}`
+          'Tags': client.serverDefinedClientTags?.length
+            ? html`${client.serverDefinedClientTags.map(t => html`<span class="tagBadge">${t}</span>`)}`
             : '-',
           'Description': client.description || '-',
           'Created': new Date(client.createdAt).toLocaleDateString(),
@@ -312,11 +312,11 @@ export class OpsViewVpn extends DeesElement {
                 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;
+                  const serverDefinedClientTags = 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,
+                    serverDefinedClientTags,
                   });
                   modal.destroy();
                 },

package/ts_web/readme.md

@@ -50,6 +50,13 @@ For reporting bugs, issues, or security vulnerabilities, please visit [community
 - **Connection token generation** — one-click "Copy Token" for easy edge provisioning
 - Enable/disable, edit, secret regeneration, and delete actions
 
+### 🔐 VPN Management
+- VPN server status with forwarding mode, subnet, and WireGuard port
+- Client registration table with create, enable/disable, and delete actions
+- WireGuard config download and clipboard copy on client creation
+- Per-client telemetry (bytes sent/received, keepalives)
+- Server public key display for manual client configuration
+
 ### 📜 Log Viewer
 - Real-time log streaming
 - Filter by log level (error, warning, info, debug)
@@ -100,6 +107,7 @@ ts_web/
     ├── ops-view-emails.ts    # Email queue management
     ├── ops-view-certificates.ts  # Certificate overview & reprovisioning
     ├── ops-view-remoteingress.ts # Remote ingress edge management
+    ├── ops-view-vpn.ts       # VPN client management
     ├── ops-view-logs.ts      # Log viewer
     ├── ops-view-routes.ts    # Route & API token management
     ├── ops-view-config.ts    # Configuration display
@@ -124,6 +132,7 @@ The app uses `@push.rocks/smartstate` v2.3+ with multiple state parts, scheduled
 | `emailOpsStatePart` | Soft | Email queues, bounces, suppression list |
 | `certificateStatePart` | Soft | Certificate list, summary, loading state |
 | `remoteIngressStatePart` | Soft | Edge list, statuses, new edge secret |
+| `vpnStatePart` | Soft | VPN clients, server status, new client config |
 
 ### Tab Visibility Optimization
 
@@ -173,6 +182,13 @@ regenerateRemoteIngressSecretAction(id) // New secret
 toggleRemoteIngressAction(id, enabled)  // Enable/disable
 clearNewEdgeSecretAction()         // Dismiss secret banner
 fetchConnectionToken(edgeId)       // Get connection token (standalone function)
+
+// VPN
+fetchVpnAction()                   // Clients + server status
+createVpnClientAction(data)        // Create new VPN client
+deleteVpnClientAction(clientId)    // Remove VPN client
+toggleVpnClientAction(id, enabled) // Enable/disable
+clearNewClientConfigAction()       // Dismiss config banner
 ```
 
 ### Client-Side Routing
@@ -187,6 +203,7 @@ fetchConnectionToken(edgeId)       // Get connection token (standalone function)
   /emails/security  → Security incidents
 /certificates    → Certificate management
 /remoteingress   → Remote ingress edge management
+/vpn             → VPN client management
 /routes          → Route & API token management
 /logs            → Log viewer
 /configuration   → System configuration

package/ts_web/router.ts

@@ -3,7 +3,7 @@ import * as appstate from './appstate.js';
 
 const SmartRouter = plugins.domtools.plugins.smartrouter.SmartRouter;
 
-export const validViews = ['overview', 'network', 'emails', 'logs', 'routes', 'apitokens', 'configuration', 'security', 'certificates', 'remoteingress'] as const;
+export const validViews = ['overview', 'network', 'emails', 'logs', 'routes', 'apitokens', 'configuration', 'security', 'certificates', 'remoteingress', 'vpn'] as const;
 
 export type TValidView = typeof validViews[number];