Files
tabler/preview/pages/2-step-verification-code.astro

46 lines
1.6 KiB
Plaintext

---
import FormFooter from '@ui/FormFooter.astro'
import SingleLayout from '@shared/layouts/SingleLayout.astro'
import Button from '@ui/Button.astro'
import ButtonList from '@ui/ButtonList.astro'
import CardTitle from '@ui/CardTitle.astro'
import OtpInput from '@ui/OtpInput.astro'
---
<SingleLayout title="2-step verification">
<form class="card card-md" action="./" method="get" novalidate>
<div class="card-body">
<CardTitle as="h1" class="text-center mb-4">Authenticate your account</CardTitle>
<p class="my-4 text-center">
Please confirm your account by entering the authorization code sent to <strong>+1 856-672-8552</strong>.
</p>
<fieldset class="my-5 border-0 p-0 m-0">
<legend class="visually-hidden">Verification code</legend>
<div class="d-flex justify-content-center">
<OtpInput length={6} groups={[3, 3]} size="lg" ariaLabel="Verification code" />
</div>
</fieldset>
<div class="my-4">
<label class="form-check">
<input type="checkbox" class="form-check-input" />
Don't ask for codes again on this device
</label>
</div>
<FormFooter>
<ButtonList class="flex-nowrap">
<Button text="Cancel" block href="2-step-verification.html" />
<Button type="submit" text="Verify" block color="primary" />
</ButtonList>
</FormFooter>
</div>
</form>
<div class="text-center text-secondary mt-3">
It may take a minute to receive your code. Haven't received it? <a href="./">Resend a new code.</a>
</div>
</SingleLayout>