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>
|
||||
</>
|
||||
)
|
||||
}
|
||||
462
management-ui/src/pages/Wireguard/Servers.tsx
Normal file
462
management-ui/src/pages/Wireguard/Servers.tsx
Normal file
@@ -0,0 +1,462 @@
|
||||
import { useState } from 'react'
|
||||
import {
|
||||
Alert, Button, Card, Col, Drawer, Form, Input, InputNumber,
|
||||
Modal, Row, Select, Space, Switch, Tag, Typography, message,
|
||||
} from 'antd'
|
||||
import type { ColumnsType } from 'antd/es/table'
|
||||
import {
|
||||
DownloadOutlined, KeyOutlined, PlusOutlined, QrcodeOutlined,
|
||||
TeamOutlined,
|
||||
} 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, WGPeer } from './types'
|
||||
|
||||
const { Text } = Typography
|
||||
|
||||
interface ServerForm {
|
||||
name: string
|
||||
address_cidr: string
|
||||
listen_port: number
|
||||
mtu?: number
|
||||
role: string
|
||||
active: boolean
|
||||
description?: string
|
||||
generate_keypair: boolean
|
||||
private_key?: string
|
||||
}
|
||||
|
||||
interface PeerForm {
|
||||
name: string
|
||||
allowed_ips: string
|
||||
keepalive?: number
|
||||
enabled: boolean
|
||||
description?: string
|
||||
generate_keypair: boolean
|
||||
generate_psk: boolean
|
||||
public_key?: string
|
||||
psk?: string
|
||||
}
|
||||
|
||||
async function listServers(): 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 === 'server')
|
||||
}
|
||||
|
||||
async function listPeers(ifaceID: number): Promise<WGPeer[]> {
|
||||
const r = await apiClient.get(`/wireguard/interfaces/${ifaceID}/peers`)
|
||||
if (!isEnvelope(r.data)) return []
|
||||
return (r.data.data as { peers?: WGPeer[] }).peers ?? []
|
||||
}
|
||||
|
||||
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 ServersTab() {
|
||||
const { t } = useTranslation()
|
||||
const qc = useQueryClient()
|
||||
|
||||
const { data: servers, isLoading } = useQuery({ queryKey: ['wg', 'servers'], queryFn: listServers })
|
||||
const { data: zones } = useQuery({ queryKey: ['fw-zones'], queryFn: listZones })
|
||||
|
||||
// Create/edit modal state.
|
||||
const [editing, setEditing] = useState<WGInterface | null>(null)
|
||||
const [creating, setCreating] = useState(false)
|
||||
const [form] = Form.useForm<ServerForm>()
|
||||
|
||||
// Per-server peer-roster drawer.
|
||||
const [peersDrawer, setPeersDrawer] = useState<WGInterface | null>(null)
|
||||
|
||||
const upsert = useMutation({
|
||||
mutationFn: async (v: ServerForm) => {
|
||||
const body = { ...v, mode: 'server' }
|
||||
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', 'servers'] })
|
||||
},
|
||||
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', 'servers'] }) },
|
||||
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.listenPort'), dataIndex: 'listen_port', key: 'listen_port', render: (p?: number | null) => p ?? '—' },
|
||||
{
|
||||
title: t('wg.iface.publicKey'), dataIndex: 'public_key', key: 'public_key',
|
||||
render: (k: string) => <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) => (
|
||||
<Space size={4}>
|
||||
<Button size="small" type="text" icon={<TeamOutlined />} onClick={() => setPeersDrawer(row)}>
|
||||
{t('wg.peers.button')}
|
||||
</Button>
|
||||
<ActionButtons
|
||||
onEdit={() => {
|
||||
setEditing(row)
|
||||
form.setFieldsValue({
|
||||
name: row.name,
|
||||
address_cidr: row.address_cidr,
|
||||
listen_port: row.listen_port ?? 51820,
|
||||
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 })}
|
||||
/>
|
||||
</Space>
|
||||
),
|
||||
},
|
||||
]
|
||||
|
||||
return (
|
||||
<>
|
||||
<Alert
|
||||
type="info"
|
||||
showIcon
|
||||
className="mb-12"
|
||||
message={t('wg.serverIntro')}
|
||||
/>
|
||||
<DataTable
|
||||
rowKey="id"
|
||||
loading={isLoading}
|
||||
dataSource={servers ?? []}
|
||||
columns={cols}
|
||||
extraActions={
|
||||
<Button type="primary" icon={<PlusOutlined />} onClick={() => {
|
||||
setCreating(true); form.resetFields()
|
||||
form.setFieldsValue({
|
||||
listen_port: 51820, role: 'wan', active: true, generate_keypair: true,
|
||||
})
|
||||
}}>
|
||||
{t('wg.iface.addServer')}
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
|
||||
<Modal
|
||||
title={editing ? t('wg.iface.editServer') : t('wg.iface.addServer')}
|
||||
open={editing !== null || creating}
|
||||
onCancel={() => { setEditing(null); setCreating(false); form.resetFields() }}
|
||||
onOk={() => { void form.submit() }}
|
||||
confirmLoading={upsert.isPending}
|
||||
width={620}
|
||||
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') }]}
|
||||
extra={t('wg.iface.nameExtra')}
|
||||
>
|
||||
<Input placeholder="wg0" />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Form.Item label={t('wg.iface.listenPort')} name="listen_port" rules={[{ required: true }]}>
|
||||
<InputNumber min={1} max={65535} style={{ width: '100%' }} />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row gutter={16}>
|
||||
<Col span={16}>
|
||||
<Form.Item
|
||||
label={t('wg.iface.address')} name="address_cidr"
|
||||
rules={[{ required: true }]}
|
||||
extra={t('wg.iface.addressExtra')}
|
||||
>
|
||||
<Input placeholder="10.99.0.1/24" />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
<Form.Item label={t('wg.iface.mtu')} name="mtu" extra="default 1420">
|
||||
<InputNumber min={1280} max={9000} style={{ width: '100%' }} />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row gutter={16}>
|
||||
<Col span={12}>
|
||||
<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={12}>
|
||||
<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>
|
||||
{editing && (
|
||||
<Alert
|
||||
type="warning"
|
||||
showIcon
|
||||
style={{ marginTop: 8 }}
|
||||
message={t('wg.iface.editKeyWarning')}
|
||||
/>
|
||||
)}
|
||||
</Card>
|
||||
</Form>
|
||||
</Modal>
|
||||
|
||||
<PeerDrawer
|
||||
iface={peersDrawer}
|
||||
onClose={() => setPeersDrawer(null)}
|
||||
/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
// ── Peer roster drawer ───────────────────────────────────────────────
|
||||
|
||||
interface PeerDrawerProps {
|
||||
iface: WGInterface | null
|
||||
onClose: () => void
|
||||
}
|
||||
|
||||
function PeerDrawer({ iface, onClose }: PeerDrawerProps) {
|
||||
const { t } = useTranslation()
|
||||
const qc = useQueryClient()
|
||||
const open = iface !== null
|
||||
const ifaceID = iface?.id ?? 0
|
||||
|
||||
const { data: peers, isLoading } = useQuery({
|
||||
queryKey: ['wg', 'peers', ifaceID],
|
||||
queryFn: () => listPeers(ifaceID),
|
||||
enabled: open,
|
||||
})
|
||||
|
||||
const [editing, setEditing] = useState<WGPeer | null>(null)
|
||||
const [creating, setCreating] = useState(false)
|
||||
const [qrPeer, setQrPeer] = useState<WGPeer | null>(null)
|
||||
const [form] = Form.useForm<PeerForm>()
|
||||
|
||||
const upsert = useMutation({
|
||||
mutationFn: async (v: PeerForm) => {
|
||||
if (editing) return (await apiClient.put(`/wireguard/peers/${editing.id}`, v)).data
|
||||
return (await apiClient.post(`/wireguard/interfaces/${ifaceID}/peers`, v)).data
|
||||
},
|
||||
onSuccess: () => {
|
||||
message.success(t('common.save'))
|
||||
setEditing(null); setCreating(false); form.resetFields()
|
||||
void qc.invalidateQueries({ queryKey: ['wg', 'peers', ifaceID] })
|
||||
},
|
||||
onError: (e: Error) => message.error(e.message),
|
||||
})
|
||||
const del = useMutation({
|
||||
mutationFn: async (id: number) => { await apiClient.delete(`/wireguard/peers/${id}`) },
|
||||
onSuccess: () => { void qc.invalidateQueries({ queryKey: ['wg', 'peers', ifaceID] }) },
|
||||
onError: (e: Error) => message.error(e.message),
|
||||
})
|
||||
|
||||
const cols: ColumnsType<WGPeer> = [
|
||||
{ title: t('wg.peer.name'), dataIndex: 'name', key: 'name' },
|
||||
{ title: t('wg.peer.allowedIPs'), dataIndex: 'allowed_ips', key: 'allowed_ips', render: (s: string) => <code>{s}</code> },
|
||||
{
|
||||
title: t('wg.peer.publicKey'), dataIndex: 'public_key', key: 'public_key',
|
||||
render: (k: string) => <Text code copyable={{ text: k }} style={{ fontSize: 11 }}>{k.slice(0, 12)}…</Text>,
|
||||
},
|
||||
{
|
||||
title: t('wg.peer.lastHandshake'), dataIndex: 'last_handshake', key: 'last_handshake',
|
||||
render: (s?: string | null) => s ? new Date(s).toLocaleString() : <Tag>{t('wg.peer.never')}</Tag>,
|
||||
},
|
||||
{ title: t('common.active'), dataIndex: 'enabled', key: 'enabled', render: (v: boolean) => <StatusDot active={v} /> },
|
||||
{
|
||||
title: t('common.actions'), key: 'actions',
|
||||
render: (_, row) => (
|
||||
<Space size={4}>
|
||||
{row.has_private_key && (
|
||||
<>
|
||||
<Button size="small" type="text" icon={<QrcodeOutlined />} onClick={() => setQrPeer(row)}>QR</Button>
|
||||
<Button
|
||||
size="small"
|
||||
type="text"
|
||||
icon={<DownloadOutlined />}
|
||||
href={`/api/v1/wireguard/peers/${row.id}/config`}
|
||||
target="_blank"
|
||||
title={t('wg.peer.downloadConf')}
|
||||
>.conf</Button>
|
||||
</>
|
||||
)}
|
||||
<ActionButtons
|
||||
onEdit={() => {
|
||||
setEditing(row)
|
||||
form.setFieldsValue({
|
||||
name: row.name,
|
||||
allowed_ips: row.allowed_ips,
|
||||
keepalive: row.keepalive ?? undefined,
|
||||
enabled: row.enabled,
|
||||
description: row.description ?? undefined,
|
||||
generate_keypair: false,
|
||||
generate_psk: false,
|
||||
public_key: row.public_key,
|
||||
})
|
||||
}}
|
||||
onDelete={() => del.mutate(row.id)}
|
||||
deleteConfirm={t('wg.peer.deleteConfirm', { name: row.name })}
|
||||
/>
|
||||
</Space>
|
||||
),
|
||||
},
|
||||
]
|
||||
|
||||
return (
|
||||
<Drawer
|
||||
open={open}
|
||||
onClose={onClose}
|
||||
width={920}
|
||||
title={iface && (
|
||||
<Space>
|
||||
<span>{t('wg.peers.drawerTitle')}</span>
|
||||
<Tag color="blue"><code>{iface.name}</code></Tag>
|
||||
<Text type="secondary">{iface.address_cidr}</Text>
|
||||
</Space>
|
||||
)}
|
||||
destroyOnClose
|
||||
>
|
||||
<DataTable
|
||||
rowKey="id"
|
||||
loading={isLoading}
|
||||
dataSource={peers ?? []}
|
||||
columns={cols}
|
||||
extraActions={
|
||||
<Button type="primary" icon={<PlusOutlined />} onClick={() => {
|
||||
setCreating(true); form.resetFields()
|
||||
form.setFieldsValue({
|
||||
allowed_ips: '', enabled: true,
|
||||
generate_keypair: true, generate_psk: false,
|
||||
})
|
||||
}}>
|
||||
{t('wg.peer.add')}
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
|
||||
<Modal
|
||||
title={editing ? t('wg.peer.edit') : t('wg.peer.add')}
|
||||
open={editing !== null || creating}
|
||||
onCancel={() => { setEditing(null); setCreating(false); form.resetFields() }}
|
||||
onOk={() => { void form.submit() }}
|
||||
confirmLoading={upsert.isPending}
|
||||
width={620}
|
||||
destroyOnClose
|
||||
>
|
||||
<Form form={form} layout="vertical" onFinish={(v) => upsert.mutate(v)}>
|
||||
<Row gutter={16}>
|
||||
<Col span={14}>
|
||||
<Form.Item label={t('wg.peer.name')} name="name" rules={[{ required: true }]}>
|
||||
<Input placeholder="alice-laptop" />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={10}>
|
||||
<Form.Item label={t('common.active')} name="enabled" valuePropName="checked">
|
||||
<Switch />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
<Form.Item
|
||||
label={t('wg.peer.allowedIPs')} name="allowed_ips" rules={[{ required: true }]}
|
||||
extra={t('wg.peer.allowedIPsExtra')}
|
||||
>
|
||||
<Input placeholder="10.99.0.10/32" />
|
||||
</Form.Item>
|
||||
<Form.Item label={t('wg.peer.keepalive')} name="keepalive" extra={t('wg.peer.keepaliveExtra')}>
|
||||
<InputNumber min={0} max={3600} style={{ width: '100%' }} />
|
||||
</Form.Item>
|
||||
<Form.Item label={t('wg.peer.description')} name="description">
|
||||
<Input.TextArea rows={2} />
|
||||
</Form.Item>
|
||||
<Card size="small" type="inner" title={<><KeyOutlined /> {t('wg.peer.keys')}</>}>
|
||||
<Form.Item name="generate_keypair" valuePropName="checked" extra={t('wg.peer.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.peer.publicKey')} name="public_key" extra={t('wg.peer.publicKeyExtra')}>
|
||||
<Input.TextArea rows={2} placeholder="base64 public key (operator-paste)" />
|
||||
</Form.Item>
|
||||
)}
|
||||
</Form.Item>
|
||||
<Form.Item name="generate_psk" valuePropName="checked" extra={t('wg.peer.pskExtra')}>
|
||||
<Switch checkedChildren={t('wg.peer.pskOn')} unCheckedChildren={t('wg.peer.pskOff')} />
|
||||
</Form.Item>
|
||||
</Card>
|
||||
</Form>
|
||||
</Modal>
|
||||
|
||||
<Modal
|
||||
title={qrPeer && `${t('wg.peer.qrTitle')} — ${qrPeer.name}`}
|
||||
open={qrPeer !== null}
|
||||
onCancel={() => setQrPeer(null)}
|
||||
footer={null}
|
||||
width={420}
|
||||
>
|
||||
{qrPeer && (
|
||||
<Space direction="vertical" align="center" style={{ width: '100%' }}>
|
||||
<img
|
||||
src={`/api/v1/wireguard/peers/${qrPeer.id}/qr`}
|
||||
alt="WireGuard QR"
|
||||
style={{ width: '100%', maxWidth: 360, height: 'auto', display: 'block' }}
|
||||
/>
|
||||
<Text type="secondary" style={{ textAlign: 'center', fontSize: 12 }}>
|
||||
{t('wg.peer.qrHint')}
|
||||
</Text>
|
||||
<Button
|
||||
type="primary"
|
||||
icon={<DownloadOutlined />}
|
||||
href={`/api/v1/wireguard/peers/${qrPeer.id}/config`}
|
||||
target="_blank"
|
||||
>
|
||||
{t('wg.peer.downloadConf')}
|
||||
</Button>
|
||||
</Space>
|
||||
)}
|
||||
</Modal>
|
||||
</Drawer>
|
||||
)
|
||||
}
|
||||
39
management-ui/src/pages/Wireguard/index.tsx
Normal file
39
management-ui/src/pages/Wireguard/index.tsx
Normal file
@@ -0,0 +1,39 @@
|
||||
import { Tabs } from 'antd'
|
||||
import { ApiOutlined, GlobalOutlined, ThunderboltOutlined } from '@ant-design/icons'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
|
||||
import PageHeader from '../../components/PageHeader'
|
||||
import ServersTab from './Servers'
|
||||
import ClientsTab from './Clients'
|
||||
|
||||
// /vpn/wireguard — two tabs (Server, Client). Each is independent;
|
||||
// they share types but not state. Server-tab opens a peer-roster
|
||||
// drawer per server, Client-tab manages outbound tunnels with a
|
||||
// fixed upstream peer.
|
||||
export default function WireguardPage() {
|
||||
const { t } = useTranslation()
|
||||
return (
|
||||
<div>
|
||||
<PageHeader
|
||||
icon={<ThunderboltOutlined />}
|
||||
title={t('wg.title')}
|
||||
subtitle={t('wg.intro')}
|
||||
/>
|
||||
<Tabs
|
||||
defaultActiveKey="servers"
|
||||
items={[
|
||||
{
|
||||
key: 'servers',
|
||||
label: <span><GlobalOutlined /> {t('wg.tabs.servers')}</span>,
|
||||
children: <ServersTab />,
|
||||
},
|
||||
{
|
||||
key: 'clients',
|
||||
label: <span><ApiOutlined /> {t('wg.tabs.clients')}</span>,
|
||||
children: <ClientsTab />,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
37
management-ui/src/pages/Wireguard/types.ts
Normal file
37
management-ui/src/pages/Wireguard/types.ts
Normal file
@@ -0,0 +1,37 @@
|
||||
// Shared types for /vpn/wireguard tabs.
|
||||
|
||||
export interface WGInterface {
|
||||
id: number
|
||||
name: string
|
||||
mode: 'server' | 'client'
|
||||
address_cidr: string
|
||||
listen_port?: number | null
|
||||
public_key: string
|
||||
peer_endpoint?: string | null
|
||||
peer_public_key?: string | null
|
||||
allowed_ips?: string | null
|
||||
persistent_keepalive?: number | null
|
||||
mtu?: number | null
|
||||
role: string
|
||||
active: boolean
|
||||
description?: string | null
|
||||
created_at: string
|
||||
updated_at: string
|
||||
}
|
||||
|
||||
export interface WGPeer {
|
||||
id: number
|
||||
interface_id: number
|
||||
name: string
|
||||
public_key: string
|
||||
allowed_ips: string
|
||||
keepalive?: number | null
|
||||
last_handshake?: string | null
|
||||
transfer_rx: number
|
||||
transfer_tx: number
|
||||
enabled: boolean
|
||||
description?: string | null
|
||||
has_private_key: boolean
|
||||
created_at: string
|
||||
updated_at: string
|
||||
}
|
||||
Reference in New Issue
Block a user