Client created successfully!
{
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
{
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
{
const dataUrl = await plugins.qrcode.toDataURL(
this.vpnState.newClientConfig!,
{ width: 400, margin: 2 }
);
const { DeesModal } = await import('@design.estate/dees-catalog');
DeesModal.createAndShow({
heading: 'WireGuard QR Code',
content: html`
`,
menuOptions: [
{ name: 'Close', iconName: 'lucide:x', action: async (modalArg: any) => await modalArg.destroy() },
],
});
}}
>Show QR Code
appstate.vpnStatePart.dispatchAction(appstate.clearNewClientConfigAction, null)}
>Dismiss
` : ''}
Copy the WireGuard config now. It contains private keys that won't be shown again.
${this.vpnState.newClientConfig}
Scan with the WireGuard app on your phone
Subnet
${status.subnet}
WireGuard Port
${status.wgListenPort}
${status.serverPublicKeys ? html`
WG Public Key
${status.serverPublicKeys.wgPublicKey}
` : ''}
Loading telemetry...
`; try { const request = new plugins.domtools.plugins.typedrequest.TypedRequest< interfaces.requests.IReq_GetVpnClientTelemetry >('/typedrequest', 'getVpnClientTelemetry'); const response = await request.fire({ identity: appstate.loginStatePart.getState()!.identity!, clientId: client.clientId, }); const t = response.telemetry; if (t) { const formatBytes = (b: number) => b > 1048576 ? `${(b / 1048576).toFixed(1)} MB` : b > 1024 ? `${(b / 1024).toFixed(1)} KB` : `${b} B`; telemetryHtml = html`Bytes Sent${formatBytes(t.bytesSent)}
Bytes Received${formatBytes(t.bytesReceived)}
Keepalives${t.keepalivesReceived}
Last Keepalive${t.lastKeepaliveAt ? new Date(t.lastKeepaliveAt).toLocaleString() : '-'}
Packets Dropped${t.packetsDropped}
No telemetry available (client not connected)
`; } } catch { telemetryHtml = html`Telemetry unavailable
`; } DeesModal.createAndShow({ heading: `Client: ${client.clientId}`, content: html`Client ID${client.clientId}
VPN IP${client.assignedIp || '-'}
Status${!client.enabled ? 'Disabled' : conn ? 'Connected' : 'Offline'}
${conn ? html`
Connected Since${new Date(conn.connectedSince).toLocaleString()}
Transport${conn.transport}
` : ''}
Description${client.description || '-'}
Tags${client.serverDefinedClientTags?.join(', ') || '-'}
Created${new Date(client.createdAt).toLocaleString()}
Updated${new Date(client.updatedAt).toLocaleString()}
Telemetry
${telemetryHtml} `, menuOptions: [ { name: 'Close', iconName: 'lucide:x', action: async (m: any) => await m.destroy() }, ], }); }, }, { name: 'Enable', iconName: 'lucide:power', type: ['contextmenu', 'inRow'], actionRelevancyCheckFunc: (actionData: any) => !actionData.item.enabled, actionFunc: async (actionData: any) => { const client = actionData.item as interfaces.data.IVpnClient; await appstate.vpnStatePart.dispatchAction(appstate.toggleVpnClientAction, { clientId: client.clientId, enabled: true, }); }, }, { name: 'Disable', iconName: 'lucide:power', type: ['contextmenu', 'inRow'], actionRelevancyCheckFunc: (actionData: any) => actionData.item.enabled, actionFunc: async (actionData: any) => { const client = actionData.item as interfaces.data.IVpnClient; await appstate.vpnStatePart.dispatchAction(appstate.toggleVpnClientAction, { clientId: client.clientId, enabled: false, }); }, }, { name: 'Export Config', iconName: 'lucide:download', type: ['contextmenu', 'inRow'], actionFunc: async (actionData: any) => { const client = actionData.item as interfaces.data.IVpnClient; const { DeesModal, DeesToast } = await import('@design.estate/dees-catalog'); const exportConfig = async (format: 'wireguard' | 'smartvpn') => { try { const request = new plugins.domtools.plugins.typedrequest.TypedRequest< interfaces.requests.IReq_ExportVpnClientConfig >('/typedrequest', 'exportVpnClientConfig'); const response = await request.fire({ identity: appstate.loginStatePart.getState()!.identity!, clientId: client.clientId, format, }); if (response.success && response.config) { const ext = format === 'wireguard' ? 'conf' : 'json'; const blob = new Blob([response.config], { type: 'text/plain' }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = `${client.clientId}.${ext}`; a.click(); URL.revokeObjectURL(url); DeesToast.createAndShow({ message: `${format} config downloaded`, type: 'success', duration: 3000 }); } else { DeesToast.createAndShow({ message: response.message || 'Export failed', type: 'error', duration: 5000 }); } } catch (err: any) { DeesToast.createAndShow({ message: err.message || 'Export failed', type: 'error', duration: 5000 }); } }; const showQrCode = async () => { try { const request = new plugins.domtools.plugins.typedrequest.TypedRequest< interfaces.requests.IReq_ExportVpnClientConfig >('/typedrequest', 'exportVpnClientConfig'); const response = await request.fire({ identity: appstate.loginStatePart.getState()!.identity!, clientId: client.clientId, format: 'wireguard', }); if (response.success && response.config) { const dataUrl = await plugins.qrcode.toDataURL( response.config, { width: 400, margin: 2 } ); DeesModal.createAndShow({ heading: `QR Code: ${client.clientId}`, content: html`Scan with the WireGuard app on your phone
Choose a config format to download.
`, menuOptions: [ { name: 'WireGuard (.conf)', iconName: 'lucide:shield', action: async (modalArg: any) => { await modalArg.destroy(); await exportConfig('wireguard'); }, }, { name: 'SmartVPN (.json)', iconName: 'lucide:braces', action: async (modalArg: any) => { await modalArg.destroy(); await exportConfig('smartvpn'); }, }, { name: 'QR Code (WireGuard)', iconName: 'lucide:qr-code', action: async (modalArg: any) => { await modalArg.destroy(); await showQrCode(); }, }, { name: 'Cancel', iconName: 'lucide:x', action: async (modalArg: any) => await modalArg.destroy(), }, ], }); }, }, { name: 'Edit', iconName: 'lucide:pencil', type: ['contextmenu', 'inRow'], actionFunc: async (actionData: any) => { const client = actionData.item as interfaces.data.IVpnClient; const { DeesModal } = await import('@design.estate/dees-catalog'); const currentDescription = client.description ?? ''; const currentTags = client.serverDefinedClientTags?.join(', ') ?? ''; DeesModal.createAndShow({ heading: `Edit: ${client.clientId}`, content: html`Generate new keys for "${client.clientId}"? The old keys will be invalidated and the client will need the new config to reconnect.
`, menuOptions: [ { name: 'Cancel', iconName: 'lucide:x', action: async (modalArg: any) => await modalArg.destroy() }, { name: 'Rotate', iconName: 'lucide:rotate-cw', action: async (modalArg: any) => { try { const request = new plugins.domtools.plugins.typedrequest.TypedRequest< interfaces.requests.IReq_RotateVpnClientKey >('/typedrequest', 'rotateVpnClientKey'); const response = await request.fire({ identity: appstate.loginStatePart.getState()!.identity!, clientId: client.clientId, }); if (response.success && response.wireguardConfig) { appstate.vpnStatePart.setState({ ...appstate.vpnStatePart.getState()!, newClientConfig: response.wireguardConfig, }); } await modalArg.destroy(); } catch (err: any) { DeesToast.createAndShow({ message: err.message || 'Rotate failed', type: 'error', duration: 5000 }); } }, }, ], }); }, }, { name: 'Delete', iconName: 'lucide:trash2', type: ['contextmenu'], actionFunc: async (actionData: any) => { const client = actionData.item as interfaces.data.IVpnClient; const { DeesModal } = await import('@design.estate/dees-catalog'); DeesModal.createAndShow({ heading: 'Delete VPN Client', content: html`Are you sure you want to delete client "${client.clientId}"?
`, menuOptions: [ { name: 'Cancel', iconName: 'lucide:x', action: async (modalArg: any) => await modalArg.destroy() }, { name: 'Delete', iconName: 'lucide:trash2', action: async (modalArg: any) => { await appstate.vpnStatePart.dispatchAction(appstate.deleteVpnClientAction, client.clientId); await modalArg.destroy(); }, }, ], }); }, }, ]} >