diff --git a/new-ui/src/pages/full/ConfigureMfaPage/wizard/ConfigureFactorStep/ConfigureFactorStep.tsx b/new-ui/src/pages/full/ConfigureMfaPage/wizard/ConfigureFactorStep/ConfigureFactorStep.tsx index d6eed38f..17250441 100644 --- a/new-ui/src/pages/full/ConfigureMfaPage/wizard/ConfigureFactorStep/ConfigureFactorStep.tsx +++ b/new-ui/src/pages/full/ConfigureMfaPage/wizard/ConfigureFactorStep/ConfigureFactorStep.tsx @@ -15,6 +15,7 @@ import { api } from '../../../../../shared/rust-api/api'; import { MfaMethod } from '../../../../../shared/rust-api/types'; import { ThemeSpacing } from '../../../../../shared/types'; import { isPresent } from '../../../../../shared/utils/isPresent'; +import { mfaToText } from '../../../../../shared/utils/mfa'; import { discardMfaConfiguration, selectPendingMethod, @@ -144,7 +145,7 @@ export const ConfigureFactorStep = ({ onCancel, onSessionExpired }: Props) => { return (
-

Configure MFA

+

Configure {mfaToText(method)}

{isTotp ? `Scan this QR code using an authenticator app (Google Auth, Microsoft Auth etc)` diff --git a/new-ui/src/pages/full/ConfigureMfaPage/wizard/ConfigureMfaWizard.tsx b/new-ui/src/pages/full/ConfigureMfaPage/wizard/ConfigureMfaWizard.tsx index abc330e6..13e2303a 100644 --- a/new-ui/src/pages/full/ConfigureMfaPage/wizard/ConfigureMfaWizard.tsx +++ b/new-ui/src/pages/full/ConfigureMfaPage/wizard/ConfigureMfaWizard.tsx @@ -1,6 +1,8 @@ import { type ReactNode, useMemo } from 'react'; import type { WizardPageStep } from '../../../../shared/components/wizard/types'; import { WizardPage } from '../../../../shared/components/wizard/WizardPage/WizardPage'; +import { MfaMethod } from '../../../../shared/rust-api/types'; +import { mfaToText } from '../../../../shared/utils/mfa'; import { useConfigureMfaStore } from '../hooks/useConfigureMfaStore'; import { ConfigureMfaStep, type ConfigureMfaStepValue } from '../types'; import { mfaStepsOf } from '../utils'; @@ -30,7 +32,9 @@ export const ConfigureMfaWizard = ({ onCancel, onSessionExpired }: Props) => { [ConfigureMfaStep.Configuration]: { id: ConfigureMfaStep.Configuration, order: 1, - label: 'MFA Configuration', + label: mfaToText( + selectedMethods?.includes(MfaMethod.Totp) ? MfaMethod.Totp : MfaMethod.Email, + ), hidden: !selectedSteps.includes(ConfigureMfaStep.Configuration), }, [ConfigureMfaStep.Fido2]: { @@ -51,7 +55,7 @@ export const ConfigureMfaWizard = ({ onCancel, onSessionExpired }: Props) => { label: 'Finish', }, }), - [hasRecoveryCodes, selectedSteps], + [hasRecoveryCodes, selectedMethods, selectedSteps], ); const stepComponents = useMemo(