Bernard Siebens
bf86654e72
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>
23 lines
1.3 KiB
HTML
23 lines
1.3 KiB
HTML
{% load allauth lucide %}
|
|
|
|
{% comment %}
|
|
allauth tags every button it renders, and mapping those tags is what styles the MFA
|
|
and account pages without overriding each one. The ranking matters: those pages put
|
|
three buttons in a row (Deactivate / View / Download) and rely on the tags to say
|
|
which is destructive and which is secondary. Flattening them all to btn-primary makes
|
|
"Deactivate" look exactly as safe as "View".
|
|
{% endcomment %}
|
|
{% comment %} djlint:off {% endcomment %}
|
|
<{% if attrs.href %}a href="{{ attrs.href }}"{% else %}button{% endif %}
|
|
class="btn gap-2 {% if attrs.tags and 'danger' in attrs.tags %}btn-error{% elif attrs.tags and 'link' in attrs.tags %}btn-link{% elif attrs.tags and 'secondary' in attrs.tags %}btn-outline btn-neutral{% elif attrs.tags and 'outline' in attrs.tags %}btn-outline btn-primary{% else %}btn-primary{% endif %}"
|
|
{% if attrs.form %}form="{{ attrs.form }}"{% endif %}
|
|
{% if attrs.id %}id="{{ attrs.id }}"{% endif %}
|
|
{% if attrs.name %}name="{{ attrs.name }}"{% endif %}
|
|
{% if attrs.value %}value="{{ attrs.value }}"{% endif %}
|
|
{% if attrs.type %}type="{{ attrs.type }}"{% endif %}
|
|
>
|
|
{% if attrs.icon %}{% lucide attrs.icon size=16 %}{% endif %}
|
|
{% slot %}
|
|
{% endslot %}
|
|
</{% if attrs.href %}a{% else %}button{% endif %}>
|