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:
2026-07-13 23:53:35 +02:00
parent 0eb6838cba
commit bf86654e72
16 changed files with 4705 additions and 9 deletions

View File

@@ -0,0 +1,40 @@
{% extends "account/base_manage_password.html" %}
{% load allauth i18n lucide %}
{% comment %}
Overridden for layout: the fields lose their visible labels (allauth already gives each
a placeholder), the current password is set apart from the new one, and the actions
become real buttons.
The two field groups are rendered by two `fields` calls with complementary excludes —
that is what puts air between "what you have now" and "what you want it to be", rather
than three identical boxes in a stack.
{% endcomment %}
{% block head_title %}
{% trans "Change Password" %}
{% endblock head_title %}
{% block content %}
{% element h1 %}
{% trans "Change Password" %}
{% endelement %}
<form class="mt-8" method="post" action="{% url 'account_change_password' %}">
{% csrf_token %}
{{ redirect_field }}
{% element fields form=form unlabeled=True exclude="password1,password2" %}
{% endelement %}
<div class="mt-10">
{% element fields form=form unlabeled=True exclude="oldpassword" %}
{% endelement %}
</div>
<div class="mt-10 flex flex-wrap items-center justify-end gap-2">
<a class="btn btn-accent gap-2" href="{% url 'account_reset_password' %}">{% lucide "life-buoy" size=16 %} {% trans "Forgot Password?" %}</a>
<button class="btn btn-primary gap-2" type="submit">{% lucide "key-round" size=16 %} {% trans "Change Password" %}</button>
</div>
</form>
{% endblock content %}