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

36 lines
1.4 KiB
Plaintext

---
import FormFooter from '@ui/FormFooter.astro'
import SingleLayout from '@shared/layouts/SingleLayout.astro'
import Button from '@ui/Button.astro'
import FormGroup from '@ui/FormGroup.astro'
import flags from '@data/flags.json'
import CardTitle from '@ui/CardTitle.astro'
---
<SingleLayout title="2-step verification">
<form class="card card-md" action="./2-step-verification-code.html" method="get" novalidate>
<div class="card-body">
<CardTitle as="h1" class="text-center mb-4">2-step verification</CardTitle>
<FormGroup label="Country" for="verify-country">
<select class="form-select" id="verify-country" autocomplete="country-name">
{flags.map((country) => <option value={country.name}>{country.name}</option>)}
</select>
</FormGroup>
<FormGroup label="Your phone number" for="verify-phone" class="mb-4">
<div class="input-group">
<span class="input-group-text">+1</span>
<input type="tel" class="form-control" id="verify-phone" placeholder="Enter phone number" autocomplete="tel" />
</div>
</FormGroup>
<div class="text-secondary">Security is critical in Tabler. to help keep your account safe, we'll text you a verification code when you sign in on a new device</div>
<FormFooter>
<Button element="button" type="submit" text="Send code" block color="primary" />
</FormFooter>
</div>
</form>
</SingleLayout>