feat: Add CrowdSec Bouncer Key Display component and integrate into Security page

- Implemented CrowdSecBouncerKeyDisplay component to fetch and display the bouncer API key information. - Added loading skeletons and error handling for API requests. - Integrated the new component into the Security page, conditionally rendering it based on CrowdSec status. - Created unit tests for the CrowdSecBouncerKeyDisplay component, covering various states including loading, registered/unregistered bouncer, and no key configured. - Added functional tests for the Security page to ensure proper rendering of the CrowdSec Bouncer Key Display based on the CrowdSec status. - Updated translation files to include new keys related to the bouncer API key functionality.
2026-02-03 21:06:38 +00:00
parent 4cdefcb042
commit c9965bb45b
20 changed files with 3744 additions and 51 deletions
--- a/frontend/src/components/CrowdSecBouncerKeyDisplay.tsx
+++ b/frontend/src/components/CrowdSecBouncerKeyDisplay.tsx
@@ -0,0 +1,147 @@
+import { useState } from 'react'
+import { useQuery } from '@tanstack/react-query'
+import { Copy, Check, Key, AlertCircle } from 'lucide-react'
+import { useTranslation } from 'react-i18next'
+import { Button } from './ui/Button'
+import { Card, CardContent, CardHeader, CardTitle } from './ui/Card'
+import { Badge } from './ui/Badge'
+import { Skeleton } from './ui/Skeleton'
+import { toast } from '../utils/toast'
+import client from '../api/client'
+
+interface BouncerInfo {
+  name: string
+  key_preview: string
+  key_source: 'env_var' | 'file' | 'none'
+  file_path: string
+  registered: boolean
+}
+
+interface BouncerKeyResponse {
+  key: string
+  source: string
+}
+
+async function fetchBouncerInfo(): Promise<BouncerInfo> {
+  const response = await client.get<BouncerInfo>('/admin/crowdsec/bouncer')
+  return response.data
+}
+
+async function fetchBouncerKey(): Promise<string> {
+  const response = await client.get<BouncerKeyResponse>('/admin/crowdsec/bouncer/key')
+  return response.data.key
+}
+
+export function CrowdSecBouncerKeyDisplay() {
+  const { t } = useTranslation()
+  const [copied, setCopied] = useState(false)
+  const [isCopying, setIsCopying] = useState(false)
+
+  const { data: info, isLoading, error } = useQuery({
+    queryKey: ['crowdsec-bouncer-info'],
+    queryFn: fetchBouncerInfo,
+    refetchInterval: 30000,
+    retry: 1,
+  })
+
+  const handleCopyKey = async () => {
+    if (isCopying) return
+    setIsCopying(true)
+
+    try {
+      const key = await fetchBouncerKey()
+      await navigator.clipboard.writeText(key)
+      setCopied(true)
+      toast.success(t('security.crowdsec.keyCopied'))
+      setTimeout(() => setCopied(false), 2000)
+    } catch {
+      toast.error(t('security.crowdsec.copyFailed'))
+    } finally {
+      setIsCopying(false)
+    }
+  }
+
+  if (isLoading) {
+    return (
+      <Card>
+        <CardHeader className="pb-2">
+          <Skeleton className="h-5 w-32" />
+        </CardHeader>
+        <CardContent className="space-y-3">
+          <Skeleton className="h-8 w-full" />
+          <Skeleton className="h-5 w-48" />
+        </CardContent>
+      </Card>
+    )
+  }
+
+  if (error || !info) {
+    return null
+  }
+
+  if (info.key_source === 'none') {
+    return (
+      <Card className="border-yellow-500/30 bg-yellow-500/5">
+        <CardContent className="flex items-center gap-2 py-3">
+          <AlertCircle className="h-4 w-4 text-yellow-500" />
+          <span className="text-sm text-yellow-200">
+            {t('security.crowdsec.noKeyConfigured')}
+          </span>
+        </CardContent>
+      </Card>
+    )
+  }
+
+  return (
+    <Card>
+      <CardHeader className="pb-2">
+        <CardTitle className="flex items-center gap-2 text-base">
+          <Key className="h-4 w-4" />
+          {t('security.crowdsec.bouncerApiKey')}
+        </CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-3">
+        <div className="flex items-center justify-between gap-2">
+          <code className="rounded bg-gray-900 px-3 py-1.5 font-mono text-sm text-gray-200">
+            {info.key_preview}
+          </code>
+          <Button
+            variant="secondary"
+            size="sm"
+            onClick={handleCopyKey}
+            disabled={copied || isCopying}
+          >
+            {copied ? (
+              <>
+                <Check className="mr-1 h-3 w-3" />
+                {t('common.success')}
+              </>
+            ) : (
+              <>
+                <Copy className="mr-1 h-3 w-3" />
+                {t('common.copy') || 'Copy'}
+              </>
+            )}
+          </Button>
+        </div>
+
+        <div className="flex flex-wrap gap-2">
+          <Badge variant={info.registered ? 'success' : 'error'}>
+            {info.registered
+              ? t('security.crowdsec.registered')
+              : t('security.crowdsec.notRegistered')}
+          </Badge>
+          <Badge variant="outline">
+            {info.key_source === 'env_var'
+              ? t('security.crowdsec.sourceEnvVar')
+              : t('security.crowdsec.sourceFile')}
+          </Badge>
+        </div>
+
+        <p className="text-xs text-gray-400">
+          {t('security.crowdsec.keyStoredAt')}: <code className="text-gray-300">{info.file_path}</code>
+        </p>
+      </CardContent>
+    </Card>
+  )
+}