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
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "edgeguard-management-ui",
|
||||
"private": true,
|
||||
"version": "1.0.8",
|
||||
"version": "1.0.11",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
|
||||
@@ -20,6 +20,7 @@ const NetworksPage = lazy(() => import('./pages/Networks'))
|
||||
const IPAddressesPage = lazy(() => import('./pages/IPAddresses'))
|
||||
const SSLPage = lazy(() => import('./pages/SSL'))
|
||||
const FirewallPage = lazy(() => import('./pages/Firewall'))
|
||||
const WireguardPage = lazy(() => import('./pages/Wireguard'))
|
||||
const ClusterPage = lazy(() => import('./pages/Cluster'))
|
||||
const SettingsPage = lazy(() => import('./pages/Settings'))
|
||||
|
||||
@@ -99,6 +100,7 @@ export default function App() {
|
||||
<Route path="/ip-addresses" element={<IPAddressesPage />} />
|
||||
<Route path="/ssl" element={<SSLPage />} />
|
||||
<Route path="/firewall" element={<FirewallPage />} />
|
||||
<Route path="/vpn/wireguard" element={<WireguardPage />} />
|
||||
<Route path="/cluster" element={<ClusterPage />} />
|
||||
<Route path="/settings" element={<SettingsPage />} />
|
||||
</Route>
|
||||
|
||||
64
management-ui/src/components/ActionButtons.tsx
Normal file
64
management-ui/src/components/ActionButtons.tsx
Normal file
@@ -0,0 +1,64 @@
|
||||
import { Button, Popconfirm, Space, Tooltip } from 'antd'
|
||||
import { DeleteOutlined, EditOutlined } from '@ant-design/icons'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
|
||||
// ActionButtons is the standard "Edit / Delete" pair used at the
|
||||
// end of every CRUD table row. Centralising it means we only style
|
||||
// the action column once across the app.
|
||||
//
|
||||
// Either prop may be omitted to suppress that button — useful for
|
||||
// rows that aren't editable (e.g. builtin services).
|
||||
interface ActionButtonsProps {
|
||||
onEdit?: () => void
|
||||
onDelete?: () => void
|
||||
deleteConfirm?: string
|
||||
editTooltip?: string
|
||||
deleteTooltip?: string
|
||||
editDisabled?: boolean
|
||||
deleteDisabled?: boolean
|
||||
editDisabledReason?: string
|
||||
deleteDisabledReason?: string
|
||||
}
|
||||
|
||||
export default function ActionButtons({
|
||||
onEdit, onDelete,
|
||||
deleteConfirm,
|
||||
editTooltip, deleteTooltip,
|
||||
editDisabled, deleteDisabled,
|
||||
editDisabledReason, deleteDisabledReason,
|
||||
}: ActionButtonsProps) {
|
||||
const { t } = useTranslation()
|
||||
return (
|
||||
<Space size={4}>
|
||||
{onEdit && (
|
||||
<Tooltip title={editDisabled ? editDisabledReason : (editTooltip ?? t('common.edit'))}>
|
||||
<Button
|
||||
type="text"
|
||||
size="small"
|
||||
icon={<EditOutlined />}
|
||||
disabled={editDisabled}
|
||||
onClick={onEdit}
|
||||
/>
|
||||
</Tooltip>
|
||||
)}
|
||||
{onDelete && (
|
||||
deleteDisabled ? (
|
||||
<Tooltip title={deleteDisabledReason ?? t('common.delete')}>
|
||||
<Button type="text" size="small" danger icon={<DeleteOutlined />} disabled />
|
||||
</Tooltip>
|
||||
) : (
|
||||
<Popconfirm
|
||||
title={deleteConfirm ?? t('common.deleteConfirm')}
|
||||
okText={t('common.yes')}
|
||||
cancelText={t('common.no')}
|
||||
onConfirm={onDelete}
|
||||
>
|
||||
<Tooltip title={deleteTooltip ?? t('common.delete')}>
|
||||
<Button type="text" size="small" danger icon={<DeleteOutlined />} />
|
||||
</Tooltip>
|
||||
</Popconfirm>
|
||||
)
|
||||
)}
|
||||
</Space>
|
||||
)
|
||||
}
|
||||
@@ -1,9 +1,12 @@
|
||||
import { useMemo, useState } from 'react'
|
||||
import { Input, Space, Table } from 'antd'
|
||||
import { useMemo, useState, type ReactNode } from 'react'
|
||||
import { Grid, Input, List, Pagination, Space, Table, Typography } from 'antd'
|
||||
import type { ColumnsType, TableProps } from 'antd/es/table'
|
||||
import { SearchOutlined } from '@ant-design/icons'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
|
||||
const { useBreakpoint } = Grid
|
||||
const { Text } = Typography
|
||||
|
||||
// DataTable wraps AntD's Table and gives every CRUD page the same
|
||||
// baseline UX:
|
||||
//
|
||||
@@ -23,8 +26,15 @@ interface DataTableProps<T> extends Omit<TableProps<T>, 'pagination'> {
|
||||
searchPlaceholder?: string
|
||||
searchable?: boolean
|
||||
// toolbar renders to the right of the search input, useful for
|
||||
// "Add" buttons.
|
||||
toolbar?: React.ReactNode
|
||||
// "Add" buttons. `extraActions` is the proxy-lb-waf-style alias —
|
||||
// both work to keep migration painless.
|
||||
toolbar?: ReactNode
|
||||
extraActions?: ReactNode
|
||||
// renderMobileCard switches from a dense Table (desktop) to a
|
||||
// List of cards (≤ md breakpoint). Mirrors the old EdgeGuard
|
||||
// ProTable mobile mode. Pass undefined to use the default Table
|
||||
// also on mobile (with horizontal scroll).
|
||||
renderMobileCard?: (record: T, index: number) => ReactNode
|
||||
}
|
||||
|
||||
function inferSorter<T>(dataIndex: string | string[] | undefined) {
|
||||
@@ -59,6 +69,8 @@ export default function DataTable<T extends object>(
|
||||
props: DataTableProps<T>,
|
||||
) {
|
||||
const { t } = useTranslation()
|
||||
const screens = useBreakpoint()
|
||||
const isMobile = !screens.md
|
||||
const {
|
||||
dataSource,
|
||||
columns,
|
||||
@@ -66,10 +78,16 @@ export default function DataTable<T extends object>(
|
||||
searchPlaceholder,
|
||||
searchable = true,
|
||||
toolbar,
|
||||
extraActions,
|
||||
renderMobileCard,
|
||||
rowKey,
|
||||
loading,
|
||||
...rest
|
||||
} = props
|
||||
|
||||
const [search, setSearch] = useState('')
|
||||
const [page, setPage] = useState(1)
|
||||
const [perPage, setPerPage] = useState(pageSize)
|
||||
|
||||
const filtered = useMemo(() => {
|
||||
if (!search || !dataSource) return dataSource
|
||||
@@ -92,33 +110,71 @@ export default function DataTable<T extends object>(
|
||||
})
|
||||
}, [columns])
|
||||
|
||||
const actions = toolbar ?? extraActions
|
||||
const records = (filtered ?? []) as T[]
|
||||
const start = (page - 1) * perPage
|
||||
const visible = records.slice(start, start + perPage)
|
||||
|
||||
return (
|
||||
<Space direction="vertical" className="w-full mb-12" size="small">
|
||||
{(searchable || toolbar) && (
|
||||
<div className="flex-between mb-12">
|
||||
{(searchable || actions) && (
|
||||
<div className="datatable-toolbar">
|
||||
{searchable && (
|
||||
<Input
|
||||
prefix={<SearchOutlined />}
|
||||
placeholder={searchPlaceholder ?? t('common.search')}
|
||||
allowClear
|
||||
onChange={(e) => setSearch(e.target.value)}
|
||||
style={{ maxWidth: 320 }}
|
||||
onChange={(e) => { setSearch(e.target.value); setPage(1) }}
|
||||
style={{ maxWidth: isMobile ? '100%' : 320 }}
|
||||
/>
|
||||
)}
|
||||
{toolbar && <div>{toolbar}</div>}
|
||||
{actions && <Space wrap>{actions}</Space>}
|
||||
</div>
|
||||
)}
|
||||
<Table<T>
|
||||
size="small"
|
||||
{...rest}
|
||||
dataSource={filtered}
|
||||
columns={enhancedCols}
|
||||
pagination={{
|
||||
pageSize,
|
||||
showSizeChanger: true,
|
||||
showTotal: (total) => t('common.totalRows', { count: total }),
|
||||
}}
|
||||
/>
|
||||
|
||||
{isMobile && renderMobileCard ? (
|
||||
<>
|
||||
<List
|
||||
loading={loading}
|
||||
dataSource={visible}
|
||||
renderItem={(record, idx) => (
|
||||
<List.Item style={{ padding: 0, marginBottom: 8, border: 'none' }}>
|
||||
{renderMobileCard(record, start + idx)}
|
||||
</List.Item>
|
||||
)}
|
||||
locale={{ emptyText: t('common.noData') }}
|
||||
/>
|
||||
<div style={{ textAlign: 'center', marginTop: 16 }}>
|
||||
<Pagination
|
||||
current={page}
|
||||
pageSize={perPage}
|
||||
total={records.length}
|
||||
onChange={(p, ps) => { setPage(p); setPerPage(ps) }}
|
||||
showSizeChanger
|
||||
size="small"
|
||||
pageSizeOptions={['20', '50', '100', '200']}
|
||||
showTotal={(tot) => <Text type="secondary">{t('common.totalRows', { count: tot })}</Text>}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<Table<T>
|
||||
size="small"
|
||||
rowKey={rowKey}
|
||||
loading={loading}
|
||||
{...rest}
|
||||
dataSource={filtered}
|
||||
columns={enhancedCols}
|
||||
pagination={{
|
||||
pageSize: perPage,
|
||||
current: page,
|
||||
onChange: (p, ps) => { setPage(p); setPerPage(ps) },
|
||||
showSizeChanger: true,
|
||||
pageSizeOptions: ['20', '50', '100', '200'],
|
||||
showTotal: (total) => t('common.totalRows', { count: total }),
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</Space>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -11,6 +11,7 @@ import {
|
||||
NodeIndexOutlined,
|
||||
SafetyCertificateOutlined,
|
||||
SettingOutlined,
|
||||
ThunderboltOutlined,
|
||||
} from '@ant-design/icons'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
|
||||
@@ -56,7 +57,8 @@ const NAV: NavSection[] = [
|
||||
{
|
||||
labelKey: 'nav.section.security',
|
||||
items: [
|
||||
{ path: '/firewall', labelKey: 'nav.firewall', icon: <FireOutlined /> },
|
||||
{ path: '/firewall', labelKey: 'nav.firewall', icon: <FireOutlined /> },
|
||||
{ path: '/vpn/wireguard', labelKey: 'nav.wireguard', icon: <ThunderboltOutlined /> },
|
||||
],
|
||||
},
|
||||
{
|
||||
@@ -68,7 +70,7 @@ const NAV: NavSection[] = [
|
||||
},
|
||||
]
|
||||
|
||||
const VERSION = '1.0.8'
|
||||
const VERSION = '1.0.11'
|
||||
|
||||
export default function Sidebar({ isOpen, onClose }: SidebarProps) {
|
||||
const { t } = useTranslation()
|
||||
|
||||
30
management-ui/src/components/PageHeader.tsx
Normal file
30
management-ui/src/components/PageHeader.tsx
Normal file
@@ -0,0 +1,30 @@
|
||||
import { Space, Typography } from 'antd'
|
||||
import type { ReactNode } from 'react'
|
||||
|
||||
const { Text, Title } = Typography
|
||||
|
||||
// PageHeader is the standard top-of-page block: icon + title +
|
||||
// optional subtitle on the left, optional extras (buttons, status
|
||||
// dots, …) on the right. Lifted from the proxy-lb-waf design system
|
||||
// so every page across EdgeGuard now has the same visual hierarchy.
|
||||
interface PageHeaderProps {
|
||||
icon?: ReactNode
|
||||
title: ReactNode
|
||||
subtitle?: ReactNode
|
||||
extra?: ReactNode
|
||||
}
|
||||
|
||||
export default function PageHeader({ icon, title, subtitle, extra }: PageHeaderProps) {
|
||||
return (
|
||||
<div className="page-header">
|
||||
<div className="page-header-main">
|
||||
<Title level={4} className="page-header-title">
|
||||
{icon && <span className="page-header-icon">{icon}</span>}
|
||||
{title}
|
||||
</Title>
|
||||
{subtitle && <Text type="secondary" className="page-header-subtitle">{subtitle}</Text>}
|
||||
</div>
|
||||
{extra && <Space wrap>{extra}</Space>}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
21
management-ui/src/components/StatusDot.tsx
Normal file
21
management-ui/src/components/StatusDot.tsx
Normal file
@@ -0,0 +1,21 @@
|
||||
import { Badge } from 'antd'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
|
||||
// StatusDot replaces the `Yes/No` text columns with the AntD Badge
|
||||
// pattern from the old EdgeGuard — a small coloured dot + label,
|
||||
// scans much faster in long tables.
|
||||
interface StatusDotProps {
|
||||
active: boolean
|
||||
activeLabel?: string
|
||||
inactiveLabel?: string
|
||||
}
|
||||
|
||||
export default function StatusDot({ active, activeLabel, inactiveLabel }: StatusDotProps) {
|
||||
const { t } = useTranslation()
|
||||
return (
|
||||
<Badge
|
||||
status={active ? 'success' : 'default'}
|
||||
text={active ? (activeLabel ?? t('common.active')) : (inactiveLabel ?? t('common.inactive'))}
|
||||
/>
|
||||
)
|
||||
}
|
||||
@@ -12,7 +12,8 @@
|
||||
"ipAddresses": "IP-Adressen",
|
||||
"ssl": "SSL-Zertifikate",
|
||||
"vpn": "VPN",
|
||||
"firewall": "Firewall (v2)",
|
||||
"wireguard": "WireGuard",
|
||||
"firewall": "Firewall",
|
||||
"cluster": "Cluster",
|
||||
"settings": "Einstellungen",
|
||||
"section": {
|
||||
@@ -278,6 +279,72 @@
|
||||
"applying": "Update läuft …",
|
||||
"started": "Update wurde gestartet — der Server wird in Kürze neu starten."
|
||||
},
|
||||
"wg": {
|
||||
"title": "WireGuard",
|
||||
"intro": "VPN-Tunnel über WireGuard. Server-Modus = wir lauschen für Peers; Client-Modus = wir verbinden zu einem festen Upstream. Privater Schlüssel liegt verschlüsselt in der DB.",
|
||||
"tabs": { "servers": "Server-Tunnel", "clients": "Client-Tunnel" },
|
||||
"serverIntro": "Server-Tunnel hosten ein Peer-Roster — z.B. Mitarbeiter-Geräte oder Niederlassungen. Pro Peer bekommt der Operator eine .conf zum Download (oder QR-Code für Mobile).",
|
||||
"clientIntro": "Client-Tunnel verbinden EdgeGuard zu einem fremden WireGuard-Server (z.B. HQ-Datacenter). Allowed-IPs steuert, welcher Traffic durch den Tunnel geroutet wird.",
|
||||
"iface": {
|
||||
"name": "Name",
|
||||
"namePattern": "wg gefolgt von Kleinbuchstaben/Ziffern/-, max. 15 Zeichen",
|
||||
"nameExtra": "Empfehlung: wg0, wg1, wg-hq …",
|
||||
"address": "Adresse (CIDR)",
|
||||
"addressExtra": "Tunnel-IP der Box, z.B. 10.99.0.1/24 für /24-Pool",
|
||||
"listenPort": "Listen-Port",
|
||||
"publicKey": "Public-Key",
|
||||
"privateKey": "Private-Key (paste)",
|
||||
"privateKeyExtra": "Nur ausfüllen wenn nicht generieren — base64 32 Byte. Wird verschlüsselt gespeichert.",
|
||||
"peerEndpoint": "Peer-Endpoint",
|
||||
"peerPublicKey": "Peer Public-Key",
|
||||
"peerPSK": "Pre-Shared-Key (PSK)",
|
||||
"peerPSKExtra": "Optional, zusätzliche Schicht",
|
||||
"allowedIPs": "Allowed IPs",
|
||||
"allowedIPsExtra": "Was durch den Tunnel geroutet wird. Default = full-tunnel.",
|
||||
"keepalive": "Persistent Keepalive (sec)",
|
||||
"mtu": "MTU",
|
||||
"zone": "Firewall-Zone",
|
||||
"description": "Beschreibung",
|
||||
"addServer": "Server-Tunnel hinzufügen",
|
||||
"editServer": "Server-Tunnel bearbeiten",
|
||||
"addClient": "Client-Tunnel hinzufügen",
|
||||
"editClient": "Client-Tunnel bearbeiten",
|
||||
"upstream": "Upstream-Peer",
|
||||
"deleteConfirm": "Tunnel {{name}} wirklich löschen? wg-quick wird gestoppt.",
|
||||
"keys": "Schlüssel",
|
||||
"generateExtra": "Wenn an: Server erzeugt ein neues Curve25519-Keypair beim Speichern.",
|
||||
"generateOn": "Server generiert",
|
||||
"generateOff": "Manuell paste",
|
||||
"editKeyWarning": "Achtung: neue Schlüssel = bestehende Peer-Configs ungültig. Nur ändern wenn explizit gewollt."
|
||||
},
|
||||
"peers": {
|
||||
"button": "Peers",
|
||||
"drawerTitle": "Peer-Roster"
|
||||
},
|
||||
"peer": {
|
||||
"name": "Name",
|
||||
"publicKey": "Public-Key",
|
||||
"publicKeyExtra": "Wird vom Peer-Gerät erzeugt; hier nur paste-bar wenn der Peer schon ein Key-Pair hat.",
|
||||
"allowedIPs": "Allowed IPs",
|
||||
"allowedIPsExtra": "Welche Tunnel-IPs darf dieser Peer benutzen. Typisch /32 = eine IP.",
|
||||
"keepalive": "Keepalive (sec)",
|
||||
"keepaliveExtra": "0 = aus. Empfohlen 25 hinter NAT.",
|
||||
"lastHandshake": "Letzter Handshake",
|
||||
"never": "nie",
|
||||
"description": "Beschreibung",
|
||||
"add": "Peer hinzufügen",
|
||||
"edit": "Peer bearbeiten",
|
||||
"deleteConfirm": "Peer {{name}} wirklich entfernen?",
|
||||
"keys": "Schlüssel",
|
||||
"generateExtra": "Wenn an: Server erzeugt für diesen Peer ein Keypair und kann die Config / QR-Code ausliefern. Wenn aus: nur den Public-Key paste-en — keine Config-Download möglich.",
|
||||
"pskExtra": "Wenn an: Server generiert einen 32-Byte PSK für diesen Peer.",
|
||||
"pskOn": "PSK generieren",
|
||||
"pskOff": "kein PSK",
|
||||
"downloadConf": "wg-quick.conf herunterladen",
|
||||
"qrTitle": "WireGuard-QR",
|
||||
"qrHint": "Mit der WireGuard-App (iOS/Android) scannen: \"Tunnel hinzufügen\" → \"QR-Code scannen\". Endpoint im Download-Conf bitte vor Verwendung anpassen."
|
||||
}
|
||||
},
|
||||
"common": {
|
||||
"yes": "Ja",
|
||||
"no": "Nein",
|
||||
@@ -287,7 +354,16 @@
|
||||
"error": "Fehler",
|
||||
"edit": "Bearbeiten",
|
||||
"delete": "Löschen",
|
||||
"deleteConfirm": "Wirklich löschen?",
|
||||
"search": "Suchen …",
|
||||
"totalRows": "{{count}} Einträge"
|
||||
"totalRows": "{{count}} Einträge",
|
||||
"active": "Aktiv",
|
||||
"inactive": "Inaktiv",
|
||||
"noData": "Keine Einträge",
|
||||
"actions": "Aktionen",
|
||||
"add": "Hinzufügen",
|
||||
"download": "Download",
|
||||
"copy": "Kopieren",
|
||||
"copied": "Kopiert"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -12,6 +12,7 @@
|
||||
"ipAddresses": "IP addresses",
|
||||
"ssl": "SSL certificates",
|
||||
"vpn": "VPN",
|
||||
"wireguard": "WireGuard",
|
||||
"firewall": "Firewall",
|
||||
"cluster": "Cluster",
|
||||
"settings": "Settings",
|
||||
@@ -278,6 +279,72 @@
|
||||
"applying": "Update in progress …",
|
||||
"started": "Update has started — the server will restart shortly."
|
||||
},
|
||||
"wg": {
|
||||
"title": "WireGuard",
|
||||
"intro": "WireGuard VPN tunnels. Server mode = we listen for peers; client mode = we dial out to a fixed upstream. Private keys are encrypted at rest.",
|
||||
"tabs": { "servers": "Server tunnels", "clients": "Client tunnels" },
|
||||
"serverIntro": "Server tunnels host a peer roster — typically employee devices or branch sites. Each peer can be downloaded as a wg-quick.conf or scanned as a QR code.",
|
||||
"clientIntro": "Client tunnels connect EdgeGuard to a remote WireGuard server (e.g. HQ datacenter). Allowed IPs control which traffic is routed through the tunnel.",
|
||||
"iface": {
|
||||
"name": "Name",
|
||||
"namePattern": "wg followed by lowercase letters/digits/-, max 15 chars",
|
||||
"nameExtra": "Suggested: wg0, wg1, wg-hq …",
|
||||
"address": "Address (CIDR)",
|
||||
"addressExtra": "Box's tunnel IP, e.g. 10.99.0.1/24 for a /24 pool",
|
||||
"listenPort": "Listen port",
|
||||
"publicKey": "Public key",
|
||||
"privateKey": "Private key (paste)",
|
||||
"privateKeyExtra": "Fill in only if not auto-generating — base64 32 bytes. Stored encrypted.",
|
||||
"peerEndpoint": "Peer endpoint",
|
||||
"peerPublicKey": "Peer public key",
|
||||
"peerPSK": "Pre-shared key (PSK)",
|
||||
"peerPSKExtra": "Optional extra layer",
|
||||
"allowedIPs": "Allowed IPs",
|
||||
"allowedIPsExtra": "What gets routed through the tunnel. Default = full tunnel.",
|
||||
"keepalive": "Persistent keepalive (sec)",
|
||||
"mtu": "MTU",
|
||||
"zone": "Firewall zone",
|
||||
"description": "Description",
|
||||
"addServer": "Add server tunnel",
|
||||
"editServer": "Edit server tunnel",
|
||||
"addClient": "Add client tunnel",
|
||||
"editClient": "Edit client tunnel",
|
||||
"upstream": "Upstream peer",
|
||||
"deleteConfirm": "Really delete tunnel {{name}}? wg-quick will be stopped.",
|
||||
"keys": "Keys",
|
||||
"generateExtra": "If on: server generates a fresh Curve25519 keypair on save.",
|
||||
"generateOn": "Server-generated",
|
||||
"generateOff": "Manual paste",
|
||||
"editKeyWarning": "Warning: new keys invalidate all existing peer configs. Only change if intentional."
|
||||
},
|
||||
"peers": {
|
||||
"button": "Peers",
|
||||
"drawerTitle": "Peer roster"
|
||||
},
|
||||
"peer": {
|
||||
"name": "Name",
|
||||
"publicKey": "Public key",
|
||||
"publicKeyExtra": "Generated by the peer device; only paste here if the peer already has a keypair.",
|
||||
"allowedIPs": "Allowed IPs",
|
||||
"allowedIPsExtra": "Which tunnel IPs this peer is allowed to use. Typically /32 = one IP.",
|
||||
"keepalive": "Keepalive (sec)",
|
||||
"keepaliveExtra": "0 = off. Recommended 25 behind NAT.",
|
||||
"lastHandshake": "Last handshake",
|
||||
"never": "never",
|
||||
"description": "Description",
|
||||
"add": "Add peer",
|
||||
"edit": "Edit peer",
|
||||
"deleteConfirm": "Really remove peer {{name}}?",
|
||||
"keys": "Keys",
|
||||
"generateExtra": "If on: server generates a keypair for this peer and can hand out the config / QR. If off: paste the peer's public key only — no config download.",
|
||||
"pskExtra": "If on: server generates a 32-byte PSK for this peer.",
|
||||
"pskOn": "Generate PSK",
|
||||
"pskOff": "no PSK",
|
||||
"downloadConf": "Download wg-quick.conf",
|
||||
"qrTitle": "WireGuard QR",
|
||||
"qrHint": "Scan with the WireGuard app (iOS/Android): \"Add tunnel\" → \"Scan QR code\". Replace the Endpoint placeholder in the downloaded conf before use."
|
||||
}
|
||||
},
|
||||
"common": {
|
||||
"yes": "Yes",
|
||||
"no": "No",
|
||||
@@ -287,7 +354,16 @@
|
||||
"error": "Error",
|
||||
"edit": "Edit",
|
||||
"delete": "Delete",
|
||||
"deleteConfirm": "Really delete?",
|
||||
"search": "Search …",
|
||||
"totalRows": "{{count}} rows"
|
||||
"totalRows": "{{count}} rows",
|
||||
"active": "Active",
|
||||
"inactive": "Inactive",
|
||||
"noData": "No data",
|
||||
"actions": "Actions",
|
||||
"add": "Add",
|
||||
"download": "Download",
|
||||
"copy": "Copy",
|
||||
"copied": "Copied"
|
||||
}
|
||||
}
|
||||
|
||||
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
|
||||
}
|
||||
@@ -2708,3 +2708,41 @@ h1, h2, h3, h4, h5, h6 {
|
||||
gap: 8px;
|
||||
}
|
||||
.learning-neural-name { font-family: 'JetBrains Mono', monospace; }
|
||||
|
||||
/* ── PageHeader (proxy-lb-waf-style) ───────────────────────────── */
|
||||
.page-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.page-header-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
|
||||
.page-header-title {
|
||||
margin: 0 !important;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 18px !important;
|
||||
font-weight: 600 !important;
|
||||
}
|
||||
.page-header-title .page-header-icon {
|
||||
color: #0EA5E9;
|
||||
display: inline-flex;
|
||||
font-size: 18px;
|
||||
}
|
||||
.page-header-subtitle {
|
||||
font-size: 13px;
|
||||
color: #64748B;
|
||||
}
|
||||
|
||||
/* ── DataTable toolbar row ─────────────────────────────────────── */
|
||||
.datatable-toolbar {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
margin-bottom: 12px;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user