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>

templates/mfa/recovery_codes/index.html

@@ -0,0 +1,65 @@
+{% extends "mfa/recovery_codes/base.html" %}
+{% load i18n allauth static %}
+
+{% comment %}
+    Overridden for layout: Download and Generate sit side by side under the codes rather
+    than stacking. Generate is outline-only — it silently invalidates the codes on screen,
+    so it must not be the button your eye lands on.
+{% endcomment %}
+
+{% block content %}
+    {% element h1 %}
+        {% translate "Recovery Codes" %}
+    {% endelement %}
+    {% element p %}
+        {% blocktranslate count unused_count=unused_codes|length %}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 %}
+
+    {% if can_view_codes %}
+        {% element field id="recovery_codes" type="textarea" rows=unused_codes|length readonly=True %}
+            {% slot label %}
+                {% translate "Unused codes" %}
+            {% endslot %}
+            {# djlint:off #}
+{% slot value %}{% for code in unused_codes %}{% if forloop.counter0 %}
+{% endif %}{{ code }}{% endfor %}{% endslot %}
+            {# djlint:on #}
+        {% endelement %}
+    {% endif %}
+
+    <div class="mt-6 flex flex-wrap items-center gap-2">
+        {% if can_download_codes %}
+            {% url 'mfa_download_recovery_codes' as download_url %}
+            {% element button href=download_url icon="download" %}
+                {% translate "Download codes" %}
+            {% endelement %}
+        {% endif %}
+        {% if can_generate_codes %}
+            {% url 'mfa_generate_recovery_codes' as generate_url %}
+            {% element button href=generate_url icon="refresh-cw" tags="outline" %}
+                {% translate "Generate new codes" %}
+            {% endelement %}
+        {% endif %}
+    </div>
+
+    {% if MFA_RECOVERY_CODES_SHOW_ONCE and can_view_codes %}
+        {% element field type="checkbox" id="codes_saved" %}
+            {% slot label %}
+                {% translate "I have saved my recovery codes" %}
+            {% endslot %}
+        {% endelement %}
+    {% endif %}
+{% endblock content %}
+
+{% block extra_body %}
+    {{ block.super }}
+    <script src="{% static 'mfa/js/recovery_codes.js' %}"></script>
+    <script src="{% static 'account/js/onload.js' %}"></script>
+    <script data-allauth-onload="allauth.recoveryCodes.forms.viewForm" type="application/json">{
+    "ids": {
+        "saveConfirmation": "codes_saved",
+        "recoveryCodes": "recovery_codes"
+    }
+}
+    </script>
+{% endblock extra_body %}