Bernard Siebens
0eb6838cba
The filled base button reads as heavy as the primary next to it, so cancel is now btn-outline everywhere it appears: sign out, the 2FA challenge, and the four control-panel forms (which also gain the back-arrow icon the auth pages already had). For the record, the buttons were never different heights -- measured in a real browser, every .btn on every page is 40px, anchor and button alike. It was the fill, not the box. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
74 lines
2.9 KiB
HTML
74 lines
2.9 KiB
HTML
{% extends "mfa/base_entrance.html" %}
|
|
{% load allauth i18n lucide %}
|
|
|
|
{% comment %}
|
|
Overridden for layout only: Cancel sits beside Sign In, and "Use a security key" is an
|
|
accent button under Alternative options. The code field itself is styled by the `fields`
|
|
element (it renders a `code` field as a daisyUI otp), so the reauthenticate and TOTP
|
|
activate pages get the same input without a template of their own.
|
|
|
|
Cancel and the security key submit *other* forms (`logout-from-stage`, `webauthn_form`)
|
|
through the HTML `form` attribute — forms cannot nest, so those sit at the end of the
|
|
page and the buttons point at them by id.
|
|
{% endcomment %}
|
|
|
|
{% block head_title %}
|
|
{% trans "Sign In" %}
|
|
{% endblock head_title %}
|
|
|
|
{% block content %}
|
|
{% element h1 %}
|
|
{% trans "Two-Factor Authentication" %}
|
|
{% endelement %}
|
|
{% element p %}
|
|
{% blocktranslate %}Your account is protected by two-factor authentication. Please enter an authenticator code:{% endblocktranslate %}
|
|
{% endelement %}
|
|
|
|
<form class="mt-8" method="post" action="{% url 'mfa_authenticate' %}">
|
|
{% csrf_token %}
|
|
|
|
<div class="mb-10">
|
|
{% element fields form=form unlabeled=True %}
|
|
{% endelement %}
|
|
</div>
|
|
|
|
<div class="flex flex-wrap items-center justify-end gap-2">
|
|
<button class="btn btn-outline gap-2" type="submit" form="logout-from-stage">{% lucide "x" size=16 %} {% trans "Cancel" %}</button>
|
|
<button class="btn btn-primary gap-2" type="submit">{% lucide "log-in" size=16 %} {% trans "Sign In" %}</button>
|
|
</div>
|
|
</form>
|
|
|
|
{% if "webauthn" in MFA_SUPPORTED_TYPES %}
|
|
{% element hr %}
|
|
{% endelement %}
|
|
{% element h2 %}
|
|
{% translate "Alternative options" %}
|
|
{% endelement %}
|
|
|
|
<button class="btn btn-accent gap-2" type="button" form="webauthn_form" id="mfa_webauthn_authenticate">
|
|
{% lucide "usb" size=16 %} {% trans "Use a security key" %}
|
|
</button>
|
|
|
|
<form id="webauthn_form" method="post" action="{% url 'mfa_authenticate' %}">
|
|
{% csrf_token %}
|
|
{{ webauthn_form.credential }}
|
|
</form>
|
|
{{ js_data|json_script:"js_data" }}
|
|
{% include "mfa/webauthn/snippets/scripts.html" %}
|
|
<script data-allauth-onload="allauth.webauthn.forms.authenticateForm" type="application/json">
|
|
{
|
|
"ids": {
|
|
"authenticate": "mfa_webauthn_authenticate",
|
|
"credential": "{{ webauthn_form.credential.auto_id }}",
|
|
"data": "js_data"
|
|
}
|
|
}
|
|
</script>
|
|
{% endif %}
|
|
|
|
<form id="logout-from-stage" method="post" action="{% url 'account_logout' %}">
|
|
<input type="hidden" name="next" value="{% url 'account_login' %}">
|
|
{% csrf_token %}
|
|
</form>
|
|
{% endblock content %}
|