@serve.zone/dcrouter 11.12.4 → 11.13.0

package/ts_web/appstate.ts

@@ -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

package/ts_web/elements/index.ts

@@ -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';

package/ts_web/elements/ops-dashboard.ts

@@ -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,
+    },
   ];
 
   /**

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

@@ -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>
+    `;
+  }
+}