edgeguard-native/management-ui/src/pages/Wireguard/Clients.tsx

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, ThunderboltOutlined } 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 EmptyState from '../../components/EmptyState'
import ActionButtons from '../../components/ActionButtons'
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 quickToggle = useMutation({
    mutationFn: async ({ id, row, checked }: { id: number; row: WGInterface; checked: boolean }) => {
      const { id: _id, created_at: _ca, updated_at: _ua, ...body } = row
      await apiClient.put(`/wireguard/interfaces/${id}`, { ...body, active: checked })
    },
    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', width: 80,
      render: (v: boolean, row: WGInterface) => (
        <Switch
          size="small"
          checked={v}
          loading={quickToggle.isPending && quickToggle.variables?.id === row.id}
          onChange={(checked) => quickToggle.mutate({ id: row.id, row, checked })}
        />
      ),
    },
    {
      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 })}
        />
      ),
    },
  ]

  const openCreate = () => {
    setCreating(true); form.resetFields()
    form.setFieldsValue({
      allowed_ips: '0.0.0.0/0,::/0', persistent_keepalive: 25,
      role: 'wan', active: true, generate_keypair: true,
    })
  }

  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={openCreate}>
            {t('wg.iface.addClient')}
          </Button>
        }
        emptyContent={
          <EmptyState
            icon={<ThunderboltOutlined />}
            title={t('wg.iface.emptyClientTitle')}
            description={t('wg.iface.emptyClientDesc')}
            action={
              <Button type="primary" icon={<PlusOutlined />} onClick={openCreate}>
                {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>
    </>
  )
}