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/main.tsx

@@ -4,7 +4,7 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import App from './App.tsx'
 import { ThemeProvider } from './context/ThemeContext'
 import { LanguageProvider } from './context/LanguageContext'
-import './i18n'
+import i18n from './i18n'
 import './index.css'
 
 // Global query client with optimized defaults for performance
@@ -20,14 +20,24 @@ const queryClient = new QueryClient({
   },
 })
 
-ReactDOM.createRoot(document.getElementById('root')!).render(
-  <React.StrictMode>
-    <QueryClientProvider client={queryClient}>
-      <ThemeProvider>
-        <LanguageProvider>
-          <App />
-        </LanguageProvider>
-      </ThemeProvider>
-    </QueryClientProvider>
-  </React.StrictMode>,
-)
+// Wait for i18next to be fully initialized before rendering
+// Prevents race condition where React renders before translations are loaded
+const renderApp = () => {
+  ReactDOM.createRoot(document.getElementById('root')!).render(
+    <React.StrictMode>
+      <QueryClientProvider client={queryClient}>
+        <ThemeProvider>
+          <LanguageProvider>
+            <App />
+          </LanguageProvider>
+        </ThemeProvider>
+      </QueryClientProvider>
+    </React.StrictMode>,
+  )
+}
+
+if (i18n.isInitialized) {
+  renderApp()
+} else {
+  i18n.on('initialized', renderApp)
+}