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} +