feat: WireGuard (server + client + peers + QR) + shared UI components
WireGuard --------- * Migration 0013: wireguard_interfaces (server|client mode, key envelope- encrypted) + wireguard_peers (per-server roster). Drop old empty 0005-Schema (Option-A peer_type, kein Iface-FK), neuer Aufbau mit zwei Tabellen + FK. * internal/services/secrets: Box mit AES-256-GCM, Master-Key in /var/lib/edgeguard/.master_key (lazy-create, 0600). Sealed/Open für PrivateKey + PSK. * internal/services/wireguard: KeyGen (Curve25519 mit clamping), PublicFromPrivate (für Import), InterfacesRepo, PeersRepo, Importer (parst /etc/wireguard/*.conf, server vs. client heuristisch nach ListenPort + Peer-Anzahl). * internal/wireguard: Renderer schreibt /etc/edgeguard/wireguard/<iface>.conf (0600), restartet wg-quick@<iface> via sudo (sudoers im postinst erweitert). Idempotent — re-render nur wenn content geändert. * internal/handlers/wireguard.go: REST CRUD für interfaces+peers, /generate-keypair, /peers/:id/config (text/plain wg-quick conf), /peers/:id/qr (PNG via go-qrcode). Auto-reload nach Mutation. * edgeguard-ctl wg-import [--path /etc/wireguard]: liest existierende conf-Files in die DB. Idempotent (überspringt vorhandene Iface-Namen). Shared UI components (proxy-lb-waf design pattern) -------------------------------------------------- * PageHeader: icon + title + subtitle + extras row, einheitlich oben auf jeder Page. * ActionButtons: Edit + Delete combo mit Popconfirm + Tooltip. * StatusDot: AntD Badge pattern statt "Yes/No" — schneller scanbar in dichten Tabellen. * DataTable: pageSizeOptions [20,50,100,200] + extraActions-Alias + optional renderMobileCard für Card-Liste auf < md Breakpoint. * enterprise.css: .page-header* + .datatable-toolbar Klassen. Frontend WireGuard ------------------ * /vpn/wireguard mit zwei Tabs (Server / Client) im neuen Pattern. * Server-Tab: Modal mit Generate-Keypair-Toggle, Peer-Roster im Drawer per Server. Pro Peer: QR-Code-Modal + .conf-Download. * Client-Tab: Upstream-Card im Modal, full-tunnel-Default (0.0.0.0/0,::/0), Keepalive 25. * i18n DE/EN für wg.* Block + common.* Erweiterung. Misc ---- * Sidebar: WireGuard unter Security-Sektion. * Nav-i18n: "Firewall (v2)" → "Firewall". * Version 1.0.8 → 1.0.11. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Debian
232
management-ui/src/pages/Wireguard/Clients.tsx
Normal file
232
management-ui/src/pages/Wireguard/Clients.tsx
Normal file
@@ -0,0 +1,232 @@
|
||||
import { useState } from 'react'
|
||||
import {
|
||||
Alert, Button, Card, Col, Form, Input, InputNumber, Modal,
|
||||
Row, Select, Switch, Tag, Typography, message,
|
||||
} from 'antd'
|
||||
import type { ColumnsType } from 'antd/es/table'
|
||||
import { KeyOutlined, PlusOutlined } from '@ant-design/icons'
|
||||
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
|
||||
import apiClient, { isEnvelope } from '../../api/client'
|
||||
import DataTable from '../../components/DataTable'
|
||||
import ActionButtons from '../../components/ActionButtons'
|
||||
import StatusDot from '../../components/StatusDot'
|
||||
import type { WGInterface } from './types'
|
||||
|
||||
const { Text } = Typography
|
||||
|
||||
interface ClientForm {
|
||||
name: string
|
||||
address_cidr: string
|
||||
peer_endpoint: string
|
||||
peer_public_key: string
|
||||
peer_psk?: string
|
||||
allowed_ips: string
|
||||
persistent_keepalive?: number
|
||||
mtu?: number
|
||||
role: string
|
||||
active: boolean
|
||||
description?: string
|
||||
generate_keypair: boolean
|
||||
private_key?: string
|
||||
}
|
||||
|
||||
async function listClients(): Promise<WGInterface[]> {
|
||||
const r = await apiClient.get('/wireguard/interfaces')
|
||||
if (!isEnvelope(r.data)) return []
|
||||
return ((r.data.data as { interfaces?: WGInterface[] }).interfaces ?? [])
|
||||
.filter(i => i.mode === 'client')
|
||||
}
|
||||
|
||||
interface FwZoneLite { name: string; builtin: boolean }
|
||||
async function listZones(): Promise<FwZoneLite[]> {
|
||||
const r = await apiClient.get('/firewall/zones')
|
||||
if (!isEnvelope(r.data)) return []
|
||||
return (r.data.data as { zones?: FwZoneLite[] }).zones ?? []
|
||||
}
|
||||
|
||||
export default function ClientsTab() {
|
||||
const { t } = useTranslation()
|
||||
const qc = useQueryClient()
|
||||
|
||||
const { data: clients, isLoading } = useQuery({ queryKey: ['wg', 'clients'], queryFn: listClients })
|
||||
const { data: zones } = useQuery({ queryKey: ['fw-zones'], queryFn: listZones })
|
||||
|
||||
const [editing, setEditing] = useState<WGInterface | null>(null)
|
||||
const [creating, setCreating] = useState(false)
|
||||
const [form] = Form.useForm<ClientForm>()
|
||||
|
||||
const upsert = useMutation({
|
||||
mutationFn: async (v: ClientForm) => {
|
||||
const body = { ...v, mode: 'client' }
|
||||
if (editing) return (await apiClient.put(`/wireguard/interfaces/${editing.id}`, body)).data
|
||||
return (await apiClient.post('/wireguard/interfaces', body)).data
|
||||
},
|
||||
onSuccess: () => {
|
||||
message.success(t('common.save'))
|
||||
setEditing(null); setCreating(false); form.resetFields()
|
||||
void qc.invalidateQueries({ queryKey: ['wg', 'clients'] })
|
||||
},
|
||||
onError: (e: Error) => message.error(e.message),
|
||||
})
|
||||
const del = useMutation({
|
||||
mutationFn: async (id: number) => { await apiClient.delete(`/wireguard/interfaces/${id}`) },
|
||||
onSuccess: () => { void qc.invalidateQueries({ queryKey: ['wg', 'clients'] }) },
|
||||
onError: (e: Error) => message.error(e.message),
|
||||
})
|
||||
|
||||
const cols: ColumnsType<WGInterface> = [
|
||||
{ title: t('wg.iface.name'), dataIndex: 'name', key: 'name', render: (s: string) => <code>{s}</code> },
|
||||
{ title: t('wg.iface.address'), dataIndex: 'address_cidr', key: 'address_cidr' },
|
||||
{ title: t('wg.iface.peerEndpoint'), dataIndex: 'peer_endpoint', key: 'peer_endpoint', render: (s?: string | null) => s ?? '—' },
|
||||
{
|
||||
title: t('wg.iface.peerPublicKey'), dataIndex: 'peer_public_key', key: 'peer_public_key',
|
||||
render: (k?: string | null) => k ? <Text code copyable={{ text: k }} style={{ fontSize: 11 }}>{k.slice(0, 16)}…</Text> : '—',
|
||||
},
|
||||
{ title: t('wg.iface.zone'), dataIndex: 'role', key: 'role', render: (r: string) => <Tag>{r}</Tag> },
|
||||
{ title: t('common.active'), dataIndex: 'active', key: 'active', render: (v: boolean) => <StatusDot active={v} /> },
|
||||
{
|
||||
title: t('common.actions'), key: 'actions',
|
||||
render: (_, row) => (
|
||||
<ActionButtons
|
||||
onEdit={() => {
|
||||
setEditing(row)
|
||||
form.setFieldsValue({
|
||||
name: row.name,
|
||||
address_cidr: row.address_cidr,
|
||||
peer_endpoint: row.peer_endpoint ?? '',
|
||||
peer_public_key: row.peer_public_key ?? '',
|
||||
allowed_ips: row.allowed_ips ?? '0.0.0.0/0,::/0',
|
||||
persistent_keepalive: row.persistent_keepalive ?? 25,
|
||||
mtu: row.mtu ?? undefined,
|
||||
role: row.role,
|
||||
active: row.active,
|
||||
description: row.description ?? undefined,
|
||||
generate_keypair: false,
|
||||
})
|
||||
}}
|
||||
onDelete={() => del.mutate(row.id)}
|
||||
deleteConfirm={t('wg.iface.deleteConfirm', { name: row.name })}
|
||||
/>
|
||||
),
|
||||
},
|
||||
]
|
||||
|
||||
return (
|
||||
<>
|
||||
<Alert
|
||||
type="info"
|
||||
showIcon
|
||||
className="mb-12"
|
||||
message={t('wg.clientIntro')}
|
||||
/>
|
||||
<DataTable
|
||||
rowKey="id"
|
||||
loading={isLoading}
|
||||
dataSource={clients ?? []}
|
||||
columns={cols}
|
||||
extraActions={
|
||||
<Button type="primary" icon={<PlusOutlined />} onClick={() => {
|
||||
setCreating(true); form.resetFields()
|
||||
form.setFieldsValue({
|
||||
allowed_ips: '0.0.0.0/0,::/0', persistent_keepalive: 25,
|
||||
role: 'wan', active: true, generate_keypair: true,
|
||||
})
|
||||
}}>
|
||||
{t('wg.iface.addClient')}
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
|
||||
<Modal
|
||||
title={editing ? t('wg.iface.editClient') : t('wg.iface.addClient')}
|
||||
open={editing !== null || creating}
|
||||
onCancel={() => { setEditing(null); setCreating(false); form.resetFields() }}
|
||||
onOk={() => { void form.submit() }}
|
||||
confirmLoading={upsert.isPending}
|
||||
width={680}
|
||||
destroyOnClose
|
||||
>
|
||||
<Form form={form} layout="vertical" onFinish={(v) => upsert.mutate(v)}>
|
||||
<Row gutter={16}>
|
||||
<Col span={12}>
|
||||
<Form.Item
|
||||
label={t('wg.iface.name')} name="name"
|
||||
rules={[{ required: true }, { pattern: /^wg[a-z0-9-]{0,13}$/, message: t('wg.iface.namePattern') }]}
|
||||
>
|
||||
<Input placeholder="wg-hq" />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Form.Item label={t('wg.iface.address')} name="address_cidr" rules={[{ required: true }]}>
|
||||
<Input placeholder="10.99.0.10/24" />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
<Card size="small" type="inner" title={t('wg.iface.upstream')} className="mb-12">
|
||||
<Form.Item label={t('wg.iface.peerEndpoint')} name="peer_endpoint" rules={[{ required: true }]}>
|
||||
<Input placeholder="vpn.example.com:51820" />
|
||||
</Form.Item>
|
||||
<Form.Item label={t('wg.iface.peerPublicKey')} name="peer_public_key" rules={[{ required: true }]}>
|
||||
<Input.TextArea rows={2} placeholder="base64 public key of the upstream" />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t('wg.iface.allowedIPs')} name="allowed_ips"
|
||||
extra={t('wg.iface.allowedIPsExtra')}
|
||||
>
|
||||
<Input placeholder="0.0.0.0/0,::/0 (full tunnel)" />
|
||||
</Form.Item>
|
||||
<Row gutter={16}>
|
||||
<Col span={12}>
|
||||
<Form.Item label={t('wg.iface.keepalive')} name="persistent_keepalive">
|
||||
<InputNumber min={0} max={3600} style={{ width: '100%' }} />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Form.Item label={t('wg.iface.peerPSK')} name="peer_psk" extra={t('wg.iface.peerPSKExtra')}>
|
||||
<Input.Password placeholder="(optional)" />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
</Card>
|
||||
<Row gutter={16}>
|
||||
<Col span={8}>
|
||||
<Form.Item label={t('wg.iface.zone')} name="role" rules={[{ required: true }]}>
|
||||
<Select
|
||||
showSearch
|
||||
options={(zones ?? []).map(z => ({ value: z.name, label: z.name.toUpperCase() }))}
|
||||
/>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
<Form.Item label={t('wg.iface.mtu')} name="mtu">
|
||||
<InputNumber min={1280} max={9000} style={{ width: '100%' }} />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
<Form.Item label={t('common.active')} name="active" valuePropName="checked">
|
||||
<Switch />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
<Form.Item label={t('wg.iface.description')} name="description">
|
||||
<Input.TextArea rows={2} />
|
||||
</Form.Item>
|
||||
<Card size="small" type="inner" title={<><KeyOutlined /> {t('wg.iface.keys')}</>}>
|
||||
<Form.Item name="generate_keypair" valuePropName="checked" extra={t('wg.iface.generateExtra')}>
|
||||
<Switch checkedChildren={t('wg.iface.generateOn')} unCheckedChildren={t('wg.iface.generateOff')} />
|
||||
</Form.Item>
|
||||
<Form.Item noStyle shouldUpdate={(p, c) => p.generate_keypair !== c.generate_keypair}>
|
||||
{({ getFieldValue }) => !getFieldValue('generate_keypair') && (
|
||||
<Form.Item label={t('wg.iface.privateKey')} name="private_key" extra={t('wg.iface.privateKeyExtra')}>
|
||||
<Input.TextArea rows={2} placeholder="base64-encoded 32-byte private key" />
|
||||
</Form.Item>
|
||||
)}
|
||||
</Form.Item>
|
||||
</Card>
|
||||
</Form>
|
||||
</Modal>
|
||||
</>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user