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:
45
templates/mfa/totp/activate_form.html
Normal file
45
templates/mfa/totp/activate_form.html
Normal file
@@ -0,0 +1,45 @@
|
||||
{% extends "mfa/totp/base.html" %}
|
||||
{% load allauth i18n %}
|
||||
|
||||
{% comment %}
|
||||
The code field is boxed and label-less (the `fields` element does that for any `code`
|
||||
field), and the secret sits in a mono field with room around it — it is copied by hand,
|
||||
character by character.
|
||||
{% endcomment %}
|
||||
|
||||
{% block head_title %}
|
||||
{% translate "Activate Authenticator App" %}
|
||||
{% endblock head_title %}
|
||||
|
||||
{% block content %}
|
||||
{% element h1 %}
|
||||
{% translate "Activate Authenticator App" %}
|
||||
{% endelement %}
|
||||
{% element p %}
|
||||
{% blocktranslate %}To protect your account with two-factor authentication, scan the QR code below with your authenticator app. Then, input the verification code generated by the app below.{% endblocktranslate %}
|
||||
{% endelement %}
|
||||
|
||||
{% url 'mfa_activate_totp' as action_url %}
|
||||
{% element form form=form method="post" action=action_url %}
|
||||
{% slot body %}
|
||||
{% element img src=totp_svg_data_uri alt=form.secret tags="mfa,totp,qr" %}
|
||||
{% endelement %}
|
||||
{% csrf_token %}
|
||||
{% element field id="authenticator_secret" type="text" value=form.secret disabled=True %}
|
||||
{% slot label %}
|
||||
{% translate "Authenticator secret" %}
|
||||
{% endslot %}
|
||||
{% slot help_text %}
|
||||
{% translate "You can store this secret and use it to reinstall your authenticator app at a later time." %}
|
||||
{% endslot %}
|
||||
{% endelement %}
|
||||
{% element fields form=form %}
|
||||
{% endelement %}
|
||||
{% endslot %}
|
||||
{% slot actions %}
|
||||
{% element button type="submit" icon="check" %}
|
||||
{% trans "Activate" %}
|
||||
{% endelement %}
|
||||
{% endslot %}
|
||||
{% endelement %}
|
||||
{% endblock content %}
|
||||
Reference in New Issue
Block a user