feat: add CrowdSec API key status handling and warning component

- Implemented `getCrowdsecKeyStatus` API call to retrieve the current status of the CrowdSec API key.
- Created `CrowdSecKeyWarning` component to display warnings when the API key is rejected.
- Integrated `CrowdSecKeyWarning` into the Security page, ensuring it only shows when relevant.
- Updated i18n initialization in main.tsx to prevent race conditions during rendering.
- Enhanced authentication setup in tests to handle various response statuses more robustly.
- Adjusted security tests to accept broader error responses for import validation.

frontend/src/components/CrowdSecKeyWarning.tsx

@@ -0,0 +1,147 @@
+import { useState, useEffect } from 'react'
+import { useQuery } from '@tanstack/react-query'
+import { Copy, Check, AlertTriangle, X } from 'lucide-react'
+import { useTranslation } from 'react-i18next'
+import { Alert } from './ui/Alert'
+import { Button } from './ui/Button'
+import { toast } from '../utils/toast'
+import { getCrowdsecKeyStatus, type CrowdSecKeyStatus } from '../api/crowdsec'
+
+const DISMISSAL_STORAGE_KEY = 'crowdsec-key-warning-dismissed'
+
+interface DismissedState {
+  dismissed: boolean
+  key?: string
+}
+
+function getDismissedState(): DismissedState {
+  try {
+    const stored = localStorage.getItem(DISMISSAL_STORAGE_KEY)
+    if (stored) {
+      return JSON.parse(stored)
+    }
+  } catch {
+    // Ignore parse errors
+  }
+  return { dismissed: false }
+}
+
+function setDismissedState(fullKey: string) {
+  try {
+    localStorage.setItem(DISMISSAL_STORAGE_KEY, JSON.stringify({ dismissed: true, key: fullKey }))
+  } catch {
+    // Ignore storage errors
+  }
+}
+
+export function CrowdSecKeyWarning() {
+  const { t } = useTranslation()
+  const [copied, setCopied] = useState(false)
+  const [dismissed, setDismissed] = useState(false)
+
+  const { data: keyStatus, isLoading } = useQuery<CrowdSecKeyStatus>({
+    queryKey: ['crowdsec-key-status'],
+    queryFn: getCrowdsecKeyStatus,
+    refetchInterval: 60000,
+    retry: 1,
+  })
+
+  useEffect(() => {
+    if (keyStatus?.env_key_rejected && keyStatus.full_key) {
+      const storedState = getDismissedState()
+      // If dismissed but for a different key, show the warning again
+      if (storedState.dismissed && storedState.key !== keyStatus.full_key) {
+        setDismissed(false)
+      } else if (storedState.dismissed && storedState.key === keyStatus.full_key) {
+        setDismissed(true)
+      }
+    }
+  }, [keyStatus])
+
+  const handleCopy = async () => {
+    if (!keyStatus?.full_key) return
+
+    try {
+      await navigator.clipboard.writeText(keyStatus.full_key)
+      setCopied(true)
+      toast.success(t('security.crowdsec.keyWarning.copied'))
+      setTimeout(() => setCopied(false), 2000)
+    } catch {
+      toast.error(t('security.crowdsec.copyFailed'))
+    }
+  }
+
+  const handleDismiss = () => {
+    if (keyStatus?.full_key) {
+      setDismissedState(keyStatus.full_key)
+    }
+    setDismissed(true)
+  }
+
+  if (isLoading || !keyStatus?.env_key_rejected || dismissed) {
+    return null
+  }
+
+  const envVarLine = `CHARON_SECURITY_CROWDSEC_API_KEY=${keyStatus.full_key}`
+
+  return (
+    <Alert variant="warning" className="relative">
+      <div className="flex flex-col gap-3">
+        <div className="flex items-start justify-between">
+          <div className="flex items-center gap-2">
+            <AlertTriangle className="h-5 w-5 text-warning flex-shrink-0" />
+            <h4 className="font-semibold text-content-primary">
+              {t('security.crowdsec.keyWarning.title')}
+            </h4>
+          </div>
+          <button
+            type="button"
+            onClick={handleDismiss}
+            className="p-1 rounded-md text-content-muted hover:text-content-primary hover:bg-surface-muted transition-colors"
+            aria-label={t('common.close')}
+          >
+            <X className="h-4 w-4" />
+          </button>
+        </div>
+
+        <p className="text-sm text-content-secondary">
+          {t('security.crowdsec.keyWarning.description')}
+        </p>
+
+        <div className="bg-surface-subtle border border-border rounded-md p-3">
+          <p className="text-xs text-content-muted mb-2">
+            {t('security.crowdsec.keyWarning.instructions')}
+          </p>
+          <div className="flex items-center gap-2">
+            <code className="flex-1 bg-surface-elevated rounded px-3 py-2 font-mono text-sm text-content-primary overflow-x-auto whitespace-nowrap">
+              {envVarLine}
+            </code>
+            <Button
+              variant="secondary"
+              size="sm"
+              onClick={handleCopy}
+              disabled={copied}
+              className="flex-shrink-0"
+            >
+              {copied ? (
+                <>
+                  <Check className="h-4 w-4 mr-1" />
+                  {t('security.crowdsec.keyWarning.copied')}
+                </>
+              ) : (
+                <>
+                  <Copy className="h-4 w-4 mr-1" />
+                  {t('security.crowdsec.keyWarning.copyButton')}
+                </>
+              )}
+            </Button>
+          </div>
+        </div>
+
+        <p className="text-xs text-content-muted">
+          {t('security.crowdsec.keyWarning.restartNote')}
+        </p>
+      </div>
+    </Alert>
+  )
+}