From 4717d62b2181ec8966e37f21b6d71131efc880c5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Filip=20=C5=9Al=C4=99zak?= Date: Fri, 30 Oct 2026 11:02:27 +0100 Subject: [PATCH 1/3] update labels --- .../ConfigureMfaVerificatorFactorSelector.tsx | 24 ++++++++++++------- .../ConfigureSelectMethodsStep.tsx | 9 +++---- .../ConfigureSelectVerificationStep.tsx | 10 +++++--- .../style.scss | 9 +++++++ .../wizard/ConfigureMfaWizard.tsx | 2 +- new-ui/src/shared/consts.ts | 2 +- new-ui/src/shared/utils/mfa.ts | 2 +- src-tauri/core/src/mfa_config.rs | 2 +- 8 files changed, 40 insertions(+), 20 deletions(-) diff --git a/new-ui/src/pages/full/ConfigureMfaPage/components/ConfigureMfaVerificatorFactorSelector/ConfigureMfaVerificatorFactorSelector.tsx b/new-ui/src/pages/full/ConfigureMfaPage/components/ConfigureMfaVerificatorFactorSelector/ConfigureMfaVerificatorFactorSelector.tsx index 50076a092..c22002a66 100644 --- a/new-ui/src/pages/full/ConfigureMfaPage/components/ConfigureMfaVerificatorFactorSelector/ConfigureMfaVerificatorFactorSelector.tsx +++ b/new-ui/src/pages/full/ConfigureMfaPage/components/ConfigureMfaVerificatorFactorSelector/ConfigureMfaVerificatorFactorSelector.tsx @@ -4,29 +4,33 @@ import { Icon } from '../../../../../shared/components/Icon'; import { RadioIndicator } from '../../../../../shared/components/RadioIndicator/RadioIndicator'; import { mfaMethodIcon } from '../../../../../shared/consts'; import { MfaMethod, type MfaMethodValue } from '../../../../../shared/rust-api/types'; -import { mfaToText } from '../../../../../shared/utils/mfa'; +import { + mfaToText, + type OpenIdInstance, + openIdProviderName, +} from '../../../../../shared/utils/mfa'; type FactorText = { title: string; description: string; }; -const factorText = (method: MfaMethodValue): FactorText => { +const factorText = (method: MfaMethodValue, instance?: OpenIdInstance): FactorText => { switch (method) { case MfaMethod.Totp: return { title: 'Security code from your authenticator app', - description: `Use an app on your phone that generates a temporary code to confirm it's you (Google Authenticator, Microsoft Authenticator, Authy).`, + description: `Use an authenticator app on your phone, such as Google Authenticator, Microsoft Authenticator, or Authy, to generate a temporary code and verify your identity.`, }; case MfaMethod.Email: return { title: `Code from email`, - description: `We'll send a temporary security code to your email. Enter the code to confirm it's you and continue.`, + description: `Enter the temporary security code sent to your email to verify your identity and continue.`, }; case MfaMethod.Oidc: return { - title: mfaToText(MfaMethod.Oidc), - description: `Sign in with your identity provider in the browser to confirm it's you.`, + title: `Verify with ${openIdProviderName(instance)}`, + description: `Sign in through your identity provider in the browser to verify your identity.`, }; case MfaMethod.Biometric: return { title: '', description: '' }; @@ -34,14 +38,15 @@ const factorText = (method: MfaMethodValue): FactorText => { return { title: '', description: '' }; case MfaMethod.Fido2: return { - title: 'Security key', - description: `Use a security key registered to your account, such as a YubiKey, to confirm it's you.`, + title: mfaToText(MfaMethod.Fido2), + description: `Verify your identity using a registered security key, such as a YubiKey.`, }; } }; interface Props { mfaMethod: MfaMethodValue; + instance?: OpenIdInstance; selected: boolean; disabled?: boolean; onClick: () => void; @@ -49,11 +54,12 @@ interface Props { export const ConfigureMfaVerificatorFactorSelector = ({ mfaMethod, + instance, selected, disabled = false, onClick, }: Props) => { - const { title, description } = factorText(mfaMethod); + const { title, description } = factorText(mfaMethod, instance); return (
{ const available = isMfaMethodAvailable(method, instance); const satisfied = configuredMethods.includes(method) && available; const locked = isMfaMethodLocked(method, instance); + const methodName = mfaToText(method, instance ?? undefined); let hint: string | null = null; let badge: string | undefined; if (!available || locked) { - hint = `${mfaToText(method, instance ?? undefined)} is not available on this Defguard instance.`; + hint = `${methodName} is not available on this Defguard instance.`; badge = 'Unavailable'; } else if (disabled && !configured) { if (satisfied) { // Reached only via the email fallback, which registers the factor as it verifies. - hint = `${mfaToText(method)} is required to continue.`; + hint = `${methodName} is required to continue.`; badge = 'Required'; } else if (isClientConfigurableMethod(method)) { - hint = `This Defguard instance does not support configuring ${mfaToText(method)} from the desktop client.`; + hint = `This Defguard instance does not support configuring ${methodName} from the desktop client.`; badge = 'Not configurable'; } else { - hint = `${mfaToText(method)} cannot be configured in the desktop client.`; + hint = `${methodName} cannot be configured in the desktop client.`; badge = 'Not configurable'; } } diff --git a/new-ui/src/pages/full/ConfigureMfaPage/verify/ConfigureSelectVerificationStep/ConfigureSelectVerificationStep.tsx b/new-ui/src/pages/full/ConfigureMfaPage/verify/ConfigureSelectVerificationStep/ConfigureSelectVerificationStep.tsx index 23a5b11b2..b102767d3 100644 --- a/new-ui/src/pages/full/ConfigureMfaPage/verify/ConfigureSelectVerificationStep/ConfigureSelectVerificationStep.tsx +++ b/new-ui/src/pages/full/ConfigureMfaPage/verify/ConfigureSelectVerificationStep/ConfigureSelectVerificationStep.tsx @@ -63,16 +63,20 @@ export const ConfigureSelectVerificationStep = ({ onCancel }: Props) => { hideScrollContainer withControls > - +

- {`To continue, please select one of your already set up methods. This is an extra security step to confirm your identity.`} + {`For security, verify your identity using one of your existing MFA methods. You'll be able to add a new method after verification.`}

{isPresent(error) &&

{error}

} +
+

Select an existing method

+
{methods.map((method) => ( { setSelected(method); @@ -102,7 +106,7 @@ export const ConfigureSelectVerificationStep = ({ onCancel }: Props) => { )} {selected !== MfaMethod.Oidc && (