bernard/RosterChief
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Give every auth button an icon, and lay out the password and MFA screens

Browse Source 
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:
Bernard Siebens
2026-07-13 23:53:35 +02:00
parent 0eb6838cba
commit bf86654e72
16 changed files with 4705 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
templates/mfa/webauthn/add_form.html Normal file
View File

@@ -0,0 +1,39 @@
{% extends "mfa/webauthn/base.html" %}
{% load allauth i18n static %}
{% block head_title %}
{% trans "Add Security Key" %}
{% endblock head_title %}
{% block content %}
{% element h1 %}
{% trans "Add Security Key" %}
{% endelement %}
{% url 'mfa_add_webauthn' as action_url %}
{% element form form=form method="post" action=action_url %}
{% slot body %}
{% csrf_token %}
{% element fields form=form %}
{% endelement %}
{% endslot %}
{% slot actions %}
{# type="button": the webauthn script takes over the click and posts the form itself. #}
{% element button id="mfa_webauthn_add" type="button" icon="usb" %}
{% trans "Add" %}
{% endelement %}
{% endslot %}
{% endelement %}
{% include "mfa/webauthn/snippets/scripts.html" %}
{{ js_data|json_script:"js_data" }}
<script data-allauth-onload="allauth.webauthn.forms.addForm" type="application/json">{
"ids": {
"add": "mfa_webauthn_add",
"passwordless": "{{ form.passwordless.auto_id }}",
"credential": "{{ form.credential.auto_id }}",
"data": "js_data"
}
}
</script>
{% endblock content %}

25
templates/mfa/webauthn/authenticator_confirm_delete.html Normal file
View File

@@ -0,0 +1,25 @@
{% extends "mfa/webauthn/base.html" %}
{% load allauth i18n %}
{% block head_title %}
{% trans "Remove Security Key" %}
{% endblock head_title %}
{% block content %}
{% element h1 %}
{% trans "Remove Security Key" %}
{% endelement %}
{% element p %}
{% blocktranslate %}Are you sure you want to remove this security key?{% endblocktranslate %}
{% endelement %}
{% url 'mfa_remove_webauthn' pk=authenticator.pk as action_url %}
{% element form method="post" action=action_url no_visible_fields=True %}
{% slot actions %}
{% csrf_token %}
{% element button type="submit" icon="trash-2" tags="danger" %}
{% translate "Remove" %}
{% endelement %}
{% endslot %}
{% endelement %}
{% endblock content %}

72
templates/mfa/webauthn/authenticator_list.html Normal file
View File

@@ -0,0 +1,72 @@
{% extends "mfa/webauthn/base.html" %}
{% load i18n %}
{% load static %}
{% load allauth %}
{% load humanize %}
{% block content %}
{% element h1 %}
{% trans "Security Keys" %}
{% endelement %}
{% if authenticators|length == 0 %}
{% element p %}
{% blocktranslate %}No security keys have been added.{% endblocktranslate %}
{% endelement %}
{% else %}
{% element table %}
{% element thead %}
{% element th %}
{% translate "Key" %}
{% endelement %}
{% element th %}
{% translate "Usage" %}
{% endelement %}
{% element th %}
{% endelement %}
{% endelement %}
{% element tbody %}
{% for authenticator in authenticators %}
{% element tr %}
{% element td %}
{{ authenticator }}
{% if authenticator.wrap.is_passwordless is True %}
{% element badge tags="mfa,key,primary" %}
{% translate "Passkey" %}
{% endelement %}
{% elif authenticator.wrap.is_passwordless is False %}
{% element badge tags="mfa,key,secondary" %}
{% translate "Security key" %}
{% endelement %}
{% else %}
{% element badge title=_("This key does not indicate whether it is a passkey.") tags="mfa,key,warning" %}
{% translate "Unspecified" %}
{% endelement %}
{% endif %}
{% endelement %}
{% element td %}
{% blocktranslate with created_at=authenticator.created_at|date:"SHORT_DATE_FORMAT" %}Added on {{ created_at }}{% endblocktranslate %}.
{% if authenticator.last_used_at %}
{% blocktranslate with last_used=authenticator.last_used_at|naturaltime %}Last used {{ last_used }}{% endblocktranslate %}
{% else %}
Not used.
{% endif %}
{% endelement %}
{% element td align="right" %}
{% url 'mfa_edit_webauthn' pk=authenticator.pk as edit_url %}
{% element button href=edit_url icon="pencil" tags="mfa,authenticator,edit,tool" %}
{% translate "Edit" %}
{% endelement %}
{% url 'mfa_remove_webauthn' pk=authenticator.pk as remove_url %}
{% element button href=remove_url icon="trash-2" tags="mfa,authenticator,danger,delete,tool" %}
{% translate "Remove" %}
{% endelement %}
{% endelement %}
{% endelement %}
{% endfor %}
{% endelement %}
{% endelement %}
{% endif %}
{% url 'mfa_add_webauthn' as add_url %}
{% element button href=add_url icon="usb" %}
{% translate "Add" %}
{% endelement %}
{% endblock %}