eeff292
import { IconShieldCheck as ShieldCheck } from '@tabler/icons-react'
import type { LoginComplete } from '@/entities/session'
import { useMfaChallenge } from '@/entities/session'
import { useVerifyMfa, VerifyMfaForm } from '@/features/verify-mfa'
import { routes } from '@/shared/config'
import { t } from '@/shared/i18n'
import { BackLink, FlowRequired, Heading } from '@/shared/ui'
import { AuthPanel } from '@/widgets/auth-panel'
export function LoginVerifyPage({ onComplete }: { onComplete: LoginComplete }) {
const challenge = useMfaChallenge()
if (!challenge)
return (
<FlowRequired
icon={ShieldCheck}
title={t('mfa.guardTitle')}
description={t('mfa.guardDescription')}
actionLabel={t('common.backToLogin')}
actionTo={routes.login}
replace
/>
)
return <MfaVerification challenge={challenge} onComplete={onComplete} />
}
function MfaVerification({ challenge, onComplete }: { challenge: string; onComplete: LoginComplete }) {
const model = useVerifyMfa(challenge, onComplete)
return (
<AuthPanel
heading={
<Heading
title={t('mfa.title')}
description={model.recovery ? t('mfa.descriptionRecovery') : t('mfa.descriptionTotp')}
icon={ShieldCheck}
/>
}
notice={model.task.notice}
footer={<BackLink>{t('mfa.back')}</BackLink>}
>
<VerifyMfaForm model={model} />
</AuthPanel>
)
}