@@ -258,31 +260,149 @@ export class OpsViewVpn extends DeesElement {
'Created': new Date(client.createdAt).toLocaleDateString(),
})}
.dataActions=${[
+ {
+ name: 'Create Client',
+ iconName: 'lucide:plus',
+ type: ['header'],
+ actionFunc: async () => {
+ const { DeesModal } = await import('@design.estate/dees-catalog');
+ await DeesModal.createAndShow({
+ heading: 'Create VPN Client',
+ content: html`
+
+
+
+
+
+ `,
+ menuOptions: [
+ {
+ name: 'Cancel',
+ iconName: 'lucide:x',
+ action: async (modalArg: any) => await modalArg.destroy(),
+ },
+ {
+ name: 'Create',
+ iconName: 'lucide:plus',
+ action: async (modalArg: any) => {
+ const form = modalArg.shadowRoot?.querySelector('.content')?.querySelector('dees-form');
+ if (!form) return;
+ const data = await form.collectFormData();
+ if (!data.clientId) return;
+ 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,
+ serverDefinedClientTags,
+ });
+ await modalArg.destroy();
+ },
+ },
+ ],
+ });
+ },
+ },
{
name: 'Toggle',
iconName: 'lucide:power',
- action: async (client: interfaces.data.IVpnClient) => {
+ type: ['contextmenu', 'inRow'],
+ actionFunc: async (client: interfaces.data.IVpnClient) => {
await appstate.vpnStatePart.dispatchAction(appstate.toggleVpnClientAction, {
clientId: client.clientId,
enabled: !client.enabled,
});
},
},
+ {
+ name: 'Export Config',
+ iconName: 'lucide:download',
+ type: ['contextmenu', 'inRow'],
+ actionFunc: async (client: interfaces.data.IVpnClient) => {
+ const { DeesToast } = await import('@design.estate/dees-catalog');
+ 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 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}.conf`;
+ a.click();
+ URL.revokeObjectURL(url);
+ DeesToast.createAndShow({ message: '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 });
+ }
+ },
+ },
+ {
+ name: 'Rotate Keys',
+ iconName: 'lucide:rotate-cw',
+ type: ['contextmenu'],
+ actionFunc: async (client: interfaces.data.IVpnClient) => {
+ const { DeesModal, DeesToast } = await import('@design.estate/dees-catalog');
+ DeesModal.createAndShow({
+ heading: 'Rotate Client Keys',
+ 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',
- action: async (client: interfaces.data.IVpnClient) => {
+ type: ['contextmenu'],
+ actionFunc: async (client: 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', action: async (modal: any) => modal.destroy() },
+ { name: 'Cancel', iconName: 'lucide:x', action: async (modalArg: any) => await modalArg.destroy() },
{
name: 'Delete',
- action: async (modal: any) => {
+ iconName: 'lucide:trash2',
+ action: async (modalArg: any) => {
await appstate.vpnStatePart.dispatchAction(appstate.deleteVpnClientAction, client.clientId);
- modal.destroy();
+ await modalArg.destroy();
},
},
],
@@ -290,37 +410,8 @@ export class OpsViewVpn extends DeesElement {
},
},
]}
- .createNewItem=${async () => {
- const { DeesModal, DeesForm, DeesInputText } = await import('@design.estate/dees-catalog');
- DeesModal.createAndShow({
- heading: 'Create VPN Client',
- content: html`
-
-
-
-
-
- `,
- 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 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,
- serverDefinedClientTags,
- });
- modal.destroy();
- },
- },
- ],
- });
- }}
>
+