feat(httpapi): return replica docker install commands on speaker create

После создания реплики 201 отдаёт agent_secret, node_token и install.docker_commands (bird2 + agent + Traefik DNS-01). UI показывает шаг установки вместо закрытия диалога, чтобы секрет больше не терялся.

Co-authored-by: Cursor <[email protected]>

apps/web/src/components/network/network-speakers-card.tsx

@@ -36,9 +36,8 @@ const SPEAKER_TABS = [
 ]
 
 const ROLE_OPTIONS = [
-  { value: 'primary', label: 'Основной' },
-  { value: 'secondary', label: 'Резервный' },
-  { value: 'speaker', label: 'Спикер' },
+  { value: 'replica', label: 'Реплика' },
+  { value: 'master', label: 'Мастер' },
 ]
 
 function createDefaultSpeakerFilters(): Filter[] {

apps/web/src/components/network/speaker-form-dialog.tsx

@@ -1,15 +1,19 @@
 import { useEffect, useState } from 'react'
+import { Copy, TriangleAlert } from 'lucide-react'
 import { toast } from 'sonner'
 
 import { Button } from '@evobgp/ui/components/button'
 import { Input } from '@evobgp/ui/components/input'
 import { Label } from '@evobgp/ui/components/label'
+import { Textarea } from '@evobgp/ui/components/textarea'
 
 import { FormDrawer } from '@/components/form-drawer'
 import { LoadingButton } from '@/components/loading-button'
 import { SelectField } from '@/components/select-field'
+import { Alert, AlertDescription, AlertTitle } from '@/components/reui/alert'
+import { useCopyToClipboard } from '@/hooks/use-copy-to-clipboard'
 import { useCreateSpeakerMutation } from '@/queries/network'
-import type { BgpSpeakerCreate } from '@/types/api'
+import type { BgpSpeakerCreate, SpeakerRow } from '@/types/api'
 
 interface SpeakerFormDialogProps {
   open: boolean
@@ -35,8 +39,20 @@ function buildMetaJson(agentDomain: string, nodeIpv4: string, bgpSource: string)
   return JSON.stringify(meta)
 }
 
+function tlsIncomplete(
+  agentDomain: string,
+  letsencryptEmail: string,
+  cfToken: string,
+  panelIP: string,
+): boolean {
+  return !agentDomain.trim() || !letsencryptEmail.trim() || !cfToken.trim() || !panelIP.trim()
+}
+
 export function SpeakerFormDialog({ open, onOpenChange }: SpeakerFormDialogProps) {
   const createMutation = useCreateSpeakerMutation()
+  const { isCopied, copyToClipboard } = useCopyToClipboard({
+    onCopy: () => toast.success('Команда скопирована'),
+  })
 
   const [endpoint, setEndpoint] = useState('')
   const [role, setRole] = useState('replica')
@@ -44,6 +60,13 @@ export function SpeakerFormDialog({ open, onOpenChange }: SpeakerFormDialogProps
   const [nodeIpv4, setNodeIpv4] = useState('')
   const [bgpSourceIpv4, setBgpSourceIpv4] = useState('')
   const [bgpSourceManual, setBgpSourceManual] = useState(false)
+  const [letsencryptEmail, setLetsencryptEmail] = useState('')
+  const [cfDnsToken, setCfDnsToken] = useState('')
+  const [panelIP, setPanelIP] = useState('')
+  const [created, setCreated] = useState<SpeakerRow | null>(null)
+
+  const isReplica = role === 'replica'
+  const installCommands = created?.install?.docker_commands ?? ''
 
   useEffect(() => {
     if (!open) return
@@ -53,6 +76,10 @@ export function SpeakerFormDialog({ open, onOpenChange }: SpeakerFormDialogProps
     setNodeIpv4('')
     setBgpSourceIpv4('')
     setBgpSourceManual(false)
+    setLetsencryptEmail('')
+    setCfDnsToken('')
+    setPanelIP('')
+    setCreated(null)
   }, [open])
 
   function handleEndpointChange(value: string) {
@@ -81,82 +108,210 @@ export function SpeakerFormDialog({ open, onOpenChange }: SpeakerFormDialogProps
       endpoint: ep,
       role: role.trim() || 'replica',
       meta_json: buildMetaJson(agentDomain, nodeIpv4, bgpSourceIpv4),
+      control_plane_url: window.location.origin,
+    }
+    if (isReplica) {
+      if (letsencryptEmail.trim()) body.letsencrypt_email = letsencryptEmail.trim()
+      if (cfDnsToken.trim()) body.cf_dns_api_token = cfDnsToken.trim()
+      if (panelIP.trim()) body.panel_ip_whitelist = panelIP.trim()
     }
     try {
-      await createMutation.mutateAsync(body)
+      const row = await createMutation.mutateAsync(body)
+      if (row.install?.docker_commands) {
+        setCreated(row)
+        return
+      }
       onOpenChange(false)
     } catch {
       // toast in mutation
     }
   }
 
+  const showingInstall = created !== null && Boolean(installCommands)
+
   return (
     <FormDrawer
       open={open}
       onOpenChange={onOpenChange}
-      title="Новый спикер"
-      description="BIRD-агент на ноде реплики или плоскости управления"
-      className="sm:max-w-md"
+      title={showingInstall ? 'Установка на ноду' : 'Новый спикер'}
+      description={
+        showingInstall
+          ? 'Секреты показываются один раз. Скопируйте команду на VPS реплики.'
+          : 'BIRD-агент на ноде реплики или плоскости управления'
+      }
+      className={showingInstall ? 'sm:max-w-2xl' : 'sm:max-w-md'}
       footer={
-        <>
-          <Button variant="outline" type="button" onClick={() => onOpenChange(false)}>
-            Отмена
-          </Button>
-          <LoadingButton type="button" loading={createMutation.isPending} onClick={save}>
-            Создать
-          </LoadingButton>
-        </>
+        showingInstall ? (
+          <>
+            <Button
+              variant="outline"
+              type="button"
+              onClick={() => copyToClipboard(installCommands)}
+            >
+              <Copy />
+              {isCopied ? 'Скопировано' : 'Копировать команду'}
+            </Button>
+            <Button type="button" onClick={() => onOpenChange(false)}>
+              Готово
+            </Button>
+          </>
+        ) : (
+          <>
+            <Button variant="outline" type="button" onClick={() => onOpenChange(false)}>
+              Отмена
+            </Button>
+            <LoadingButton type="button" loading={createMutation.isPending} onClick={save}>
+              Создать
+            </LoadingButton>
+          </>
+        )
       }
     >
-      <div className="flex flex-col gap-2">
-        <Label htmlFor="speaker-endpoint">Конечная точка</Label>
-        <Input
-          id="speaker-endpoint"
-          placeholder="https://node.example.com:8443"
-          value={endpoint}
-          onChange={(e) => handleEndpointChange(e.target.value)}
-        />
-      </div>
-      <SelectField
-        id="speaker-role"
-        label="Роль"
-        items={[
-          { value: 'replica', label: 'Реплика' },
-          { value: 'master', label: 'Мастер (плоскость)' },
-        ]}
-        value={role}
-        onValueChange={(v) => setRole(v ?? 'replica')}
-      />
-      <div className="flex flex-col gap-2">
-        <Label htmlFor="speaker-agent-domain">Домен агента</Label>
-        <Input
-          id="speaker-agent-domain"
-          placeholder="bird-agent.example.com"
-          value={agentDomain}
-          onChange={(e) => setAgentDomain(e.target.value)}
-        />
-      </div>
-      <div className="flex flex-col gap-2">
-        <Label htmlFor="speaker-node-ipv4">IPv4 ноды</Label>
-        <Input
-          id="speaker-node-ipv4"
-          placeholder="203.0.113.10"
-          value={nodeIpv4}
-          onChange={(e) => handleNodeIpv4Change(e.target.value)}
-        />
-      </div>
-      <div className="flex flex-col gap-2">
-        <Label htmlFor="speaker-bgp-source">Исходный IPv4 BGP</Label>
-        <Input
-          id="speaker-bgp-source"
-          placeholder="203.0.113.10"
-          value={bgpSourceIpv4}
-          onChange={(e) => {
-            setBgpSourceManual(true)
-            setBgpSourceIpv4(e.target.value)
-          }}
-        />
-      </div>
+      {created && installCommands ? (
+        <SpeakerInstallStep created={created} commands={installCommands} />
+      ) : (
+        <>
+          <div className="flex flex-col gap-2">
+            <Label htmlFor="speaker-endpoint">Конечная точка</Label>
+            <Input
+              id="speaker-endpoint"
+              placeholder="https://node.example.com"
+              value={endpoint}
+              onChange={(e) => handleEndpointChange(e.target.value)}
+            />
+          </div>
+          <SelectField
+            id="speaker-role"
+            label="Роль"
+            items={[
+              { value: 'replica', label: 'Реплика' },
+              { value: 'master', label: 'Мастер (плоскость)' },
+            ]}
+            value={role}
+            onValueChange={(v) => setRole(v ?? 'replica')}
+          />
+          <div className="flex flex-col gap-2">
+            <Label htmlFor="speaker-agent-domain">Домен агента</Label>
+            <Input
+              id="speaker-agent-domain"
+              placeholder="bird-agent.example.com"
+              value={agentDomain}
+              onChange={(e) => setAgentDomain(e.target.value)}
+            />
+          </div>
+          <div className="flex flex-col gap-2">
+            <Label htmlFor="speaker-node-ipv4">IPv4 ноды</Label>
+            <Input
+              id="speaker-node-ipv4"
+              placeholder="203.0.113.10"
+              value={nodeIpv4}
+              onChange={(e) => handleNodeIpv4Change(e.target.value)}
+            />
+          </div>
+          <div className="flex flex-col gap-2">
+            <Label htmlFor="speaker-bgp-source">Исходный IPv4 BGP</Label>
+            <Input
+              id="speaker-bgp-source"
+              placeholder="203.0.113.10"
+              value={bgpSourceIpv4}
+              onChange={(e) => {
+                setBgpSourceManual(true)
+                setBgpSourceIpv4(e.target.value)
+              }}
+            />
+          </div>
+          {isReplica ? (
+            <>
+              <div className="flex flex-col gap-2">
+                <Label htmlFor="speaker-le-email">Email Let's Encrypt</Label>
+                <Input
+                  id="speaker-le-email"
+                  type="email"
+                  placeholder="[email protected]"
+                  value={letsencryptEmail}
+                  onChange={(e) => setLetsencryptEmail(e.target.value)}
+                />
+              </div>
+              <div className="flex flex-col gap-2">
+                <Label htmlFor="speaker-cf-token">Cloudflare DNS API token</Label>
+                <Input
+                  id="speaker-cf-token"
+                  type="password"
+                  autoComplete="off"
+                  placeholder="Zone:DNS:Edit"
+                  value={cfDnsToken}
+                  onChange={(e) => setCfDnsToken(e.target.value)}
+                />
+              </div>
+              <div className="flex flex-col gap-2">
+                <Label htmlFor="speaker-panel-ip">IP панели (whitelist)</Label>
+                <Input
+                  id="speaker-panel-ip"
+                  placeholder="203.0.113.1/32"
+                  value={panelIP}
+                  onChange={(e) => setPanelIP(e.target.value)}
+                />
+              </div>
+              {tlsIncomplete(agentDomain, letsencryptEmail, cfDnsToken, panelIP) ? (
+                <Alert variant="warning">
+                  <TriangleAlert />
+                  <AlertTitle>Traefik не выпустит сертификат</AlertTitle>
+                  <AlertDescription>
+                    Нужны домен агента, email LE, Cloudflare token и IP панели. Иначе в
+                    команде останутся плейсхолдеры CHANGE_ME_*.
+                  </AlertDescription>
+                </Alert>
+              ) : null}
+            </>
+          ) : null}
+        </>
+      )}
     </FormDrawer>
   )
 }
+
+function SpeakerInstallStep({
+  created,
+  commands,
+}: {
+  created: SpeakerRow
+  commands: string
+}) {
+  return (
+    <>
+      <Alert variant="warning">
+        <TriangleAlert />
+        <AlertTitle>Сохраните сейчас</AlertTitle>
+        <AlertDescription>
+          agent_secret и node_token больше не будут показаны. Traefik на ноде выпускает
+          сертификат через DNS-01 (Cloudflare).
+        </AlertDescription>
+      </Alert>
+      <div className="flex flex-col gap-1">
+        <Label>ID спикера</Label>
+        <code className="break-all font-mono text-xs">{created.id}</code>
+      </div>
+      {created.agent_secret ? (
+        <div className="flex flex-col gap-1">
+          <Label>agent_secret</Label>
+          <code className="break-all font-mono text-xs">{created.agent_secret}</code>
+        </div>
+      ) : null}
+      {created.node_token ? (
+        <div className="flex flex-col gap-1">
+          <Label>node_token</Label>
+          <code className="break-all font-mono text-xs">{created.node_token}</code>
+        </div>
+      ) : null}
+      <div className="flex flex-col gap-2">
+        <Label htmlFor="speaker-docker-commands">Docker-команды</Label>
+        <Textarea
+          id="speaker-docker-commands"
+          readOnly
+          value={commands}
+          className="min-h-64 font-mono text-xs"
+        />
+      </div>
+    </>
+  )
+}