diff --git a/frontend/src/components/CrowdSecBouncerKeyDisplay.tsx b/frontend/src/components/CrowdSecBouncerKeyDisplay.tsx
index 92cd20d4..78ed7f69 100644
--- a/frontend/src/components/CrowdSecBouncerKeyDisplay.tsx
+++ b/frontend/src/components/CrowdSecBouncerKeyDisplay.tsx
@@ -33,7 +33,7 @@ async function fetchBouncerKey(): Promise {
}
export function CrowdSecBouncerKeyDisplay() {
- const { t } = useTranslation()
+ const { t, ready } = useTranslation()
const [copied, setCopied] = useState(false)
const [isCopying, setIsCopying] = useState(false)
@@ -61,7 +61,7 @@ export function CrowdSecBouncerKeyDisplay() {
}
}
- if (isLoading) {
+ if (!ready || isLoading) {
return (
diff --git a/frontend/src/components/CrowdSecKeyWarning.tsx b/frontend/src/components/CrowdSecKeyWarning.tsx
index 9ce3e6ad..849d3015 100644
--- a/frontend/src/components/CrowdSecKeyWarning.tsx
+++ b/frontend/src/components/CrowdSecKeyWarning.tsx
@@ -1,6 +1,6 @@
import { useState, useEffect } from 'react'
import { useQuery } from '@tanstack/react-query'
-import { Copy, Check, AlertTriangle, X } from 'lucide-react'
+import { Copy, Check, AlertTriangle, X, Eye, EyeOff } from 'lucide-react'
import { useTranslation } from 'react-i18next'
import { Alert } from './ui/Alert'
import { Button } from './ui/Button'
@@ -35,9 +35,10 @@ function setDismissedState(fullKey: string) {
}
export function CrowdSecKeyWarning() {
- const { t } = useTranslation()
+ const { t, ready } = useTranslation()
const [copied, setCopied] = useState(false)
const [dismissed, setDismissed] = useState(false)
+ const [showKey, setShowKey] = useState(false)
const { data: keyStatus, isLoading } = useQuery({
queryKey: ['crowdsec-key-status'],
@@ -78,11 +79,12 @@ export function CrowdSecKeyWarning() {
setDismissed(true)
}
- if (isLoading || !keyStatus?.env_key_rejected || dismissed) {
+ if (!ready || isLoading || !keyStatus?.env_key_rejected || !keyStatus?.full_key || dismissed) {
return null
}
const envVarLine = `CHARON_SECURITY_CROWDSEC_API_KEY=${keyStatus.full_key}`
+ const maskedKey = `CHARON_SECURITY_CROWDSEC_API_KEY=${'•'.repeat(Math.min(keyStatus.full_key.length, 40))}`
return (
@@ -114,8 +116,17 @@ export function CrowdSecKeyWarning() {
- {envVarLine}
+ {showKey ? envVarLine : maskedKey}
+