Bernard Siebens
b3f153a2dc
Sign In and "Sign in with a passkey" (btn-accent) now sit side by side with "Remember Me" on the same row, and the email/password block is given room above and below. The passkey button was dead. It submits a *different* form -- the hidden `mfa_login` that allauth renders from its `extra_body` block -- and our layout base never defined that block, so neither the form nor the webauthn script was ever emitted and clicking the button did nothing. _base.html now has the block, and there is a test asserting the form and script are on the page. The `fields` element grows an `exclude`, so a page can lay a field out itself (here: "remember", moved onto the button row). It splits on commas rather than testing for a substring -- "password" is a substring of "password2", and a page excluding one would otherwise silently drop the other. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
58 lines
2.9 KiB
HTML
58 lines
2.9 KiB
HTML
{% load lucide ui %}
|
|
|
|
{% comment %}
|
|
allauth passes `unlabeled=True` on the entrance forms (login, signup, reset) and
|
|
already sets a placeholder on each of their fields ("Email address", "Password"),
|
|
so dropping the visible label loses nothing on screen. The label is still emitted
|
|
sr-only inside the wrapper: a placeholder is not a label, and it disappears the
|
|
moment you start typing.
|
|
|
|
Fields with an icon use daisyUI's icon-in-field layout, where the `input` class
|
|
goes on the *wrapping label* and the input itself carries only `grow`. Putting
|
|
`input` on both draws a box inside a box.
|
|
{% endcomment %}
|
|
{% for field in attrs.form.hidden_fields %}{{ field }}{% endfor %}
|
|
{% for error in attrs.form.non_field_errors %}
|
|
<div class="alert alert-error my-2">
|
|
<span>{{ error }}</span>
|
|
</div>
|
|
{% endfor %}
|
|
{% for field in attrs.form.visible_fields %}
|
|
{# `exclude` lets a page lay a field out itself — the login page puts "remember" on the button row. #}
|
|
{% if not field|excluded:attrs.exclude %}
|
|
<div class="form-control my-3 w-full">
|
|
{% if field.field.widget.input_type == "checkbox" %}
|
|
<label class="label cursor-pointer justify-start gap-3" for="{{ field.id_for_label }}">
|
|
{{ field|daisy }}
|
|
<span class="label-text">{{ field.label }}</span>
|
|
</label>
|
|
{% else %}
|
|
{% if not attrs.unlabeled %}
|
|
<label class="label" for="{{ field.id_for_label }}">
|
|
<span class="label-text">{{ field.label }}</span>
|
|
</label>
|
|
{% endif %}
|
|
{% with icon=field|field_icon %}
|
|
{% if icon %}
|
|
<label class="input flex w-full items-center gap-2 {% if field.errors %}input-error{% endif %}" for="{{ field.id_for_label }}">
|
|
<span class="opacity-50">{% lucide icon size=16 %}</span>
|
|
{% if attrs.unlabeled %}<span class="sr-only">{{ field.label }}</span>{% endif %}
|
|
{{ field|daisy:"grow" }}
|
|
</label>
|
|
{% else %}
|
|
{{ field|daisy }}
|
|
{% endif %}
|
|
{% endwith %}
|
|
{% endif %}
|
|
{% comment %}
|
|
The password field's help_text is allauth's "Forgot your password?" link, so it
|
|
gets room to breathe. The id is not decorative: Django points the input's
|
|
aria-describedby at `<auto_id>_helptext`, and without it that reference dangles
|
|
and the link is never announced.
|
|
{% endcomment %}
|
|
{% if field.help_text %}<span id="{{ field.auto_id }}_helptext" class="label-text-alt mt-3 block text-base-content/70">{{ field.help_text }}</span>{% endif %}
|
|
{% for error in field.errors %}<span class="label-text-alt mt-1 text-error">{{ error }}</span>{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
{% endfor %}
|