File "two-factor-challenge-page.tsx"
Full Path: /home/markqprx/iniasli.pro/client/auth/ui/two-factor/two-factor-challenge-page.tsx
File size: 2.53 KB
MIME-type: text/plain
Charset: utf-8
import {useForm} from 'react-hook-form';
import {FormTextField} from '../../../ui/forms/input-field/text-field/text-field';
import {Button} from '../../../ui/buttons/button';
import {Form} from '../../../ui/forms/form';
import {AuthLayout} from '../auth-layout/auth-layout';
import {Trans} from '../../../i18n/trans';
import {StaticPageTitle} from '../../../seo/static-page-title';
import {
TwoFactorChallengePayload,
useTwoFactorChallenge,
} from '@common/auth/ui/two-factor/requests/use-two-factor-challenge';
import {useState} from 'react';
export function TwoFactorChallengePage() {
const [usingRecoveryCode, setUsingRecoveryCode] = useState(false);
const form = useForm<TwoFactorChallengePayload>();
const completeChallenge = useTwoFactorChallenge(form);
return (
<AuthLayout>
<StaticPageTitle>
<Trans message="Two factor authentication" />
</StaticPageTitle>
<Form
form={form}
onSubmit={payload => {
completeChallenge.mutate(payload);
}}
>
<div className="mb-32 text-sm">
<Trans message="Confirm access to your account by entering the authentication code provided by your authenticator application." />
</div>
<div className="mb-4">
{usingRecoveryCode ? (
<FormTextField
name="recovery_code"
minLength={21}
maxLength={21}
autoComplete="off"
autoCorrect="off"
spellCheck="false"
label={<Trans message="Recovery code" />}
autoFocus
required
/>
) : (
<FormTextField
name="code"
minLength={6}
maxLength={6}
autoComplete="off"
autoCorrect="off"
spellCheck="false"
label={<Trans message="Code" />}
autoFocus
required
/>
)}
</div>
<div className="mb-32">
<Button
variant="link"
color="primary"
size="sm"
onClick={() => setUsingRecoveryCode(!usingRecoveryCode)}
>
<Trans message="Use recovery code instead" />
</Button>
</div>
<Button
className="block w-full"
type="submit"
variant="flat"
color="primary"
size="md"
disabled={completeChallenge.isPending}
>
<Trans message="Continue" />
</Button>
</Form>
</AuthLayout>
);
}