Every page allauth renders is unstyled: the base templates fill a block nothing uses #63

New issue

Closed

opened 2026-09-06 16:05:56 +00:00 by tiagoagueda · 0 comments

tiagoagueda commented

2026-09-06 16:05:56 +00:00

Owner

What is wrong

account/base_entrance.html is written like this:

{% extends "base.html" %}
{% block content %}
  <div class="mx-auto max-w-md">
    <div class="card">
      {% block content_body %}{% endblock %}
    </div>
  </div>
{% endblock %}

Every allauth page fills {% block content %} — login.html opens with
{% block content %} and closes with {% endblock content %}. A child overriding a block
replaces it, so the wrapper above is discarded in its entirety and content_body is
never filled by anything.

Counted against the installed allauth: zero of its templates use content_body, and
31 page templates inherit one of Postulo's four overridden bases
(base_entrance, base_manage, base_manage_email, base_manage_password).

What it looks like

The sign-in page, after a wrong password, full width with no card:

the heading Sign In renders at body size;
the error, The username and/or password you specified are not correct, is plain black
text among the other plain black text, with no colour, no icon and no role;
the fields are labelled Login:, Password: and Remember Me: — allauth's
defaults, not Postulo's words;
the submit control is an unstyled <button> that reads as a line of text.

Settings → Account → Two-Factor Authentication is the same: Postulo's sidebar renders
correctly beside a content column that is unstyled top to bottom, where Activate is
indistinguishable from the sentence above it.

The compiled stylesheet has no rule for errorlist or helptext, allauth's default
classes, which is consistent with nobody having seen these pages rendered.

Why the tests did not catch it

The axe suite visits /accounts/login/ in both themes and passes, and it passes again on
the failed-attempt page when asked directly: zero violations. Everything axe checks is
correct — the labels are associated, the contrast of black on white is fine, the button is
a button. A page can be entirely unstyled and perfectly accessible to a machine.

It is not accessible to a person:

an error is signalled by nothing but its wording, so somebody scanning the page has no
cue that a submission failed;
controls do not look like controls, which is the thing the whole design system exists to
make obvious;
the heading hierarchy is in the markup and absent from the page, so it can be navigated
by a screen reader and not by eye;
lines run the full width of the window rather than the intended narrow column.

Shape

Fill the block allauth uses. Rename content_body to content and move Postulo's
wrapper out of the way — a {% block main %}-style wrapper in base.html, or a body
wrapper the entrance pages extend, so a child overriding content still lands inside
the card.
Override the element templates that render the form parts, under
templates/allauth/elements/ — field, button, h1, p, alert — so allauth's
pages use the same field partial, alert-error and btn-primary as everything else.
That is what turns Login: back into the project's own words and makes the error look
like an error.
A test that would have caught it. Not axe: assert that a known Postulo class from
the design system appears in the rendered body of each allauth page. One class, 31
pages, and it never happens again.

Classification

Bug, and the most visible one found in the audit: it is the first page anybody sees.
Accessibility and interface both. Not breaking.

Depends on

Nothing. #47 adds more allauth pages, so it should not land before this.

## What is wrong `account/base_entrance.html` is written like this: ```django {% extends "base.html" %} {% block content %} <div class="mx-auto max-w-md"> <div class="card"> {% block content_body %}{% endblock %} </div> </div> {% endblock %} ``` Every allauth page fills `{% block content %}` — `login.html` opens with `{% block content %}` and closes with `{% endblock content %}`. A child overriding a block **replaces** it, so the wrapper above is discarded in its entirety and `content_body` is never filled by anything. Counted against the installed allauth: **zero** of its templates use `content_body`, and **31** page templates inherit one of Postulo's four overridden bases (`base_entrance`, `base_manage`, `base_manage_email`, `base_manage_password`). ## What it looks like The sign-in page, after a wrong password, full width with no card: - the heading *Sign In* renders at body size; - the error, *The username and/or password you specified are not correct*, is plain black text among the other plain black text, with no colour, no icon and no `role`; - the fields are labelled **`Login:`**, **`Password:`** and **`Remember Me:`** — allauth's defaults, not Postulo's words; - the submit control is an unstyled `<button>` that reads as a line of text. *Settings → Account → Two-Factor Authentication* is the same: Postulo's sidebar renders correctly beside a content column that is unstyled top to bottom, where *Activate* is indistinguishable from the sentence above it. The compiled stylesheet has no rule for `errorlist` or `helptext`, allauth's default classes, which is consistent with nobody having seen these pages rendered. ## Why the tests did not catch it The axe suite visits `/accounts/login/` in both themes and passes, and it passes again on the failed-attempt page when asked directly: **zero violations**. Everything axe checks is correct — the labels are associated, the contrast of black on white is fine, the button is a button. A page can be entirely unstyled and perfectly accessible to a machine. It is not accessible to a person: - an error is signalled by nothing but its wording, so somebody scanning the page has no cue that a submission failed; - controls do not look like controls, which is the thing the whole design system exists to make obvious; - the heading hierarchy is in the markup and absent from the page, so it can be navigated by a screen reader and not by eye; - lines run the full width of the window rather than the intended narrow column. ## Shape 1. **Fill the block allauth uses.** Rename `content_body` to `content` and move Postulo's wrapper out of the way — a `{% block main %}`-style wrapper in `base.html`, or a body wrapper the entrance pages extend, so a child overriding `content` still lands inside the card. 2. **Override the element templates** that render the form parts, under `templates/allauth/elements/` — `field`, `button`, `h1`, `p`, `alert` — so allauth's pages use the same field partial, `alert-error` and `btn-primary` as everything else. That is what turns `Login:` back into the project's own words and makes the error look like an error. 3. **A test that would have caught it.** Not axe: assert that a known Postulo class from the design system appears in the rendered body of each allauth page. One class, 31 pages, and it never happens again. ## Classification Bug, and the most visible one found in the audit: it is the first page anybody sees. Accessibility and interface both. Not breaking. ## Depends on Nothing. #47 adds more allauth pages, so it should not land before this.

tiagoagueda added this to the 0.2.0 milestone

2026-09-06 16:05:56 +00:00

tiagoagueda added the

labels

2026-09-06 16:05:56 +00:00

tiagoagueda added a new dependency

2026-09-06 16:05:59 +00:00

#47 Passkeys, so signing in needs no password at all