Give every auth button an icon, and lay out the password and MFA screens
The button element now takes an `icon`, so a page gets one by passing icon="name" rather than by hand-rolling its own button markup. Every button on the account and MFA screens carries one; a test walks each page and asserts no button is left bare. Change password: labels dropped (allauth already sets a placeholder on each field), the current password set apart from the new pair, help text kept on the new password, and Forgot Password promoted from a bare link to an accent button. MFA management: recovery-code actions are now ranked -- View is primary, Download and Generate are outline. Generate silently invalidates the codes you already hold, so it must not read as the obvious thing to click. Panel actions get breathing room from the body text (card-actions mt-4). Viewing recovery codes: Download and Generate sit side by side instead of stacking. TOTP activate: the code box loses its heading -- an otp field never takes a visible label, the boxes say what they are -- and the authenticator secret gets margin around it, since it is copied out by hand. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
128
templates/mfa/index.html
Normal file
128
templates/mfa/index.html
Normal file
@@ -0,0 +1,128 @@
|
||||
{% extends "mfa/base_manage.html" %}
|
||||
{% load allauth i18n %}
|
||||
|
||||
{% comment %}
|
||||
allauth's own index, with an icon on every button and the recovery-code actions given
|
||||
the ranking they deserve: View is the primary action, Download and Generate are outline
|
||||
(Generate silently invalidates the codes you already have, so it must not look like the
|
||||
obvious thing to click).
|
||||
{% endcomment %}
|
||||
|
||||
{% block head_title %}
|
||||
{% trans "Two-Factor Authentication" %}
|
||||
{% endblock head_title %}
|
||||
|
||||
{% block content %}
|
||||
{% element h1 tags="mfa,index" %}
|
||||
{% trans "Two-Factor Authentication" %}
|
||||
{% endelement %}
|
||||
|
||||
{% if "totp" in MFA_SUPPORTED_TYPES %}
|
||||
{% element panel %}
|
||||
{% slot title %}
|
||||
{% translate "Authenticator App" %}
|
||||
{% endslot %}
|
||||
{% slot body %}
|
||||
{% if authenticators.totp %}
|
||||
{% element p %}
|
||||
{% translate "Authentication using an authenticator app is active." %}
|
||||
{% endelement %}
|
||||
{% else %}
|
||||
{% element p %}
|
||||
{% translate "An authenticator app is not active." %}
|
||||
{% endelement %}
|
||||
{% endif %}
|
||||
{% endslot %}
|
||||
{% slot actions %}
|
||||
{% url 'mfa_deactivate_totp' as deactivate_url %}
|
||||
{% url 'mfa_activate_totp' as activate_url %}
|
||||
{% if authenticators.totp %}
|
||||
{% element button href=deactivate_url icon="power" tags="danger,delete,panel" %}
|
||||
{% translate "Deactivate" %}
|
||||
{% endelement %}
|
||||
{% else %}
|
||||
{% element button href=activate_url icon="smartphone" tags="panel" %}
|
||||
{% translate "Activate" %}
|
||||
{% endelement %}
|
||||
{% endif %}
|
||||
{% endslot %}
|
||||
{% endelement %}
|
||||
{% endif %}
|
||||
|
||||
{% if "webauthn" in MFA_SUPPORTED_TYPES %}
|
||||
{% element panel %}
|
||||
{% slot title %}
|
||||
{% translate "Security Keys" %}
|
||||
{% endslot %}
|
||||
{% slot body %}
|
||||
{% if authenticators.webauthn|length %}
|
||||
{% element p %}
|
||||
{% blocktranslate count count=authenticators.webauthn|length %}You have added {{ count }} security key.{% plural %}You have added {{ count }} security keys.{% endblocktranslate %}
|
||||
{% endelement %}
|
||||
{% else %}
|
||||
{% element p %}
|
||||
{% translate "No security keys have been added." %}
|
||||
{% endelement %}
|
||||
{% endif %}
|
||||
{% endslot %}
|
||||
{% slot actions %}
|
||||
{% if authenticators.webauthn|length %}
|
||||
{% url 'mfa_list_webauthn' as webauthn_list_url %}
|
||||
{% element button href=webauthn_list_url icon="settings" %}
|
||||
{% translate "Manage" %}
|
||||
{% endelement %}
|
||||
{% else %}
|
||||
{% url 'mfa_add_webauthn' as webauthn_add_url %}
|
||||
{% element button href=webauthn_add_url icon="usb" %}
|
||||
{% translate "Add" %}
|
||||
{% endelement %}
|
||||
{% endif %}
|
||||
{% endslot %}
|
||||
{% endelement %}
|
||||
{% endif %}
|
||||
|
||||
{% if "recovery_codes" in MFA_SUPPORTED_TYPES %}
|
||||
{% with total_count=authenticators.recovery_codes.generate_codes|length unused_count=authenticators.recovery_codes.get_unused_codes|length %}
|
||||
{% element panel %}
|
||||
{% slot title %}
|
||||
{% translate "Recovery Codes" %}
|
||||
{% endslot %}
|
||||
{% slot body %}
|
||||
{% if authenticators.recovery_codes %}
|
||||
{% element p %}
|
||||
{% blocktranslate count unused_count=unused_count %}There is {{ unused_count }} out of {{ total_count }} recovery codes available.{% plural %}There are {{ unused_count }} out of {{ total_count }} recovery codes available.{% endblocktranslate %}
|
||||
{% endelement %}
|
||||
{% else %}
|
||||
{% element p %}
|
||||
{% translate "No recovery codes set up." %}
|
||||
{% endelement %}
|
||||
{% endif %}
|
||||
{% endslot %}
|
||||
{% if is_mfa_enabled %}
|
||||
{% if authenticators.recovery_codes %}
|
||||
{% if unused_count > 0 and not MFA_RECOVERY_CODES_SHOW_ONCE %}
|
||||
{% slot actions %}
|
||||
{% url 'mfa_view_recovery_codes' as view_url %}
|
||||
{% element button href=view_url icon="eye" tags="panel" %}
|
||||
{% translate "View" %}
|
||||
{% endelement %}
|
||||
{% endslot %}
|
||||
{% slot actions %}
|
||||
{% url 'mfa_download_recovery_codes' as download_url %}
|
||||
{% element button href=download_url icon="download" tags="outline,panel" %}
|
||||
{% translate "Download" %}
|
||||
{% endelement %}
|
||||
{% endslot %}
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% slot actions %}
|
||||
{% url 'mfa_generate_recovery_codes' as generate_url %}
|
||||
{% element button href=generate_url icon="refresh-cw" tags="outline,panel" %}
|
||||
{% translate "Generate" %}
|
||||
{% endelement %}
|
||||
{% endslot %}
|
||||
{% endif %}
|
||||
{% endelement %}
|
||||
{% endwith %}
|
||||
{% endif %}
|
||||
{% endblock content %}
|
||||
Reference in New Issue
Block a user