54 lines
1.7 KiB
HTML
54 lines
1.7 KiB
HTML
<parcel-modal with-htmx>
|
|
<form
|
|
id="totp-form"
|
|
hx-post="/user/settings/totp"
|
|
hx-target="#totp-form"
|
|
hx-select="#totp-form"
|
|
hx-swap="outerHTML">
|
|
<h1 class="text-xl font-semibold mb-4">Setup Two-factor authentication</h1>
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
|
|
<div>
|
|
{{ svg | safe }}
|
|
</div>
|
|
<div class="form">
|
|
<input type="hidden" name="csrf_token" value="{{csrf_token}}">
|
|
{% if totp_error %}
|
|
<div class="text-danger">{{ totp_error }}</div>
|
|
{% endif %}
|
|
<p>
|
|
Scan the QR code with your authenticator app (Google Authenticator, Authy, etc).
|
|
</p>
|
|
<p>
|
|
If you can't scan the QR code, you can manually enter the following code:
|
|
</p>
|
|
<div class="bg-gray-100 border border-gray-300 dark:bg-gray-800 dark:border-gray-700 p-2
|
|
rounded text-sm flex flex-row justify-between gap-2">
|
|
<pre>{{ secret }}</pre>
|
|
<parcel-clipboard value="{{ secret }}"></parcel-clipboard>
|
|
</div>
|
|
<p class="mt-auto">
|
|
Enter the 6-digit code from your authenticator app below.
|
|
</p>
|
|
<label for="code">MFA code</label>
|
|
<input
|
|
type="text"
|
|
class="field"
|
|
name="code"
|
|
placeholder="000000">
|
|
<div class="buttons reverse end mt-4">
|
|
<button
|
|
type="submit"
|
|
class="button">
|
|
Submit MFA code
|
|
</button>
|
|
<button
|
|
class="button hollow"
|
|
onclick="event.preventDefault(); event.target.closest('parcel-modal').closeModal();">
|
|
Cancel
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</parcel-modal>
|