60 lines
2.3 KiB
TypeScript
60 lines
2.3 KiB
TypeScript
import { Form, Head } from '@inertiajs/react';
|
|
import { useState } from 'react';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Input } from '@/components/ui/input';
|
|
import InputError from '@/components/input-error';
|
|
|
|
export default function TwoFactorChallenge() {
|
|
const [recovery, setRecovery] = useState(false);
|
|
return (
|
|
<>
|
|
<Head title="Confirmar acesso" />
|
|
<h1 className="text-xl font-semibold">Confirmar acesso à conta</h1>
|
|
<p className="my-4 text-sm">
|
|
{recovery
|
|
? 'Introduza um dos códigos de recuperação guardados. Cada código só pode ser utilizado uma vez.'
|
|
: 'Introduza o código da aplicação de autenticação.'}
|
|
</p>
|
|
<Form
|
|
key={String(recovery)}
|
|
action="/two-factor-challenge"
|
|
method="post"
|
|
resetOnError
|
|
resetOnSuccess
|
|
>
|
|
{({ errors, processing }) => (
|
|
<div className="space-y-4">
|
|
<label className="grid gap-2">
|
|
{recovery
|
|
? 'Código de recuperação'
|
|
: 'Código de autenticação'}
|
|
<Input
|
|
autoFocus
|
|
name={recovery ? 'recovery_code' : 'code'}
|
|
autoComplete={
|
|
recovery ? 'off' : 'one-time-code'
|
|
}
|
|
inputMode={recovery ? 'text' : 'numeric'}
|
|
required
|
|
/>
|
|
</label>
|
|
<InputError
|
|
message={errors.code ?? errors.recovery_code}
|
|
/>
|
|
<Button disabled={processing}>Confirmar acesso</Button>
|
|
</div>
|
|
)}
|
|
</Form>
|
|
<Button
|
|
className="mt-4"
|
|
variant="outline"
|
|
onClick={() => setRecovery(!recovery)}
|
|
>
|
|
{recovery
|
|
? 'Usar aplicação de autenticação'
|
|
: 'Usar código de recuperação'}
|
|
</Button>
|
|
</>
|
|
);
|
|
}
|