Django Admin built-in password reset feature has UI issues

[Yaniv Toledano]

The documentation refers to adding password reset features to the admin site here: ​https://docs.djangoproject.com/en/dev/ref/contrib/admin/#adding-a-password-reset-feature.

The resulting pages are, however, visually inconsistent with the rest of the admin.

Some examples:

1. Spacing is off.
2. No use of a class="submit-row" css class which makes the button look off.
3. Header is hardcoded to "Django administration" even though the rest of the admin has a different branding (e.g., when set under admin.site.site_header, admin.site.site_title, etc.).
4. The issues can be resolved here ​https://github.com/django/django/tree/650ce967825aa192222391bfe3003c8d97e6f1d0/django/contrib/admin/templates/registration (specifically only the password_reset_ templates).

[Andrew Northall]

The header issues are due to the fact that the view providing the password reset functionality is not actually part of the admin site, so the site_header context variable is never inserted and reverts to the default.

This does seem like behaviour which should at least be mentioned in the documentation. An 'easy' solution to this particular problem would be to update the documentation to give the following example code, which will ensure the correct site header is used in the views:

from django.contrib import admin

admin.site.site_header = "My Admin Site"

urlpatterns = [
    path(
        "admin/password_reset/",
        auth_views.PasswordResetView.as_view(
            extra_context={"site_header": admin.site.site_header}
        ),
        name="admin_password_reset",
    ),
    path(
        "admin/password_reset/done/",
        auth_views.PasswordResetDoneView.as_view(
            extra_context={"site_header": admin.site.site_header}
        ),
        name="password_reset_done",
    ),
    path(
        "reset/<uidb64>/<token>/",
        auth_views.PasswordResetConfirmView.as_view(
            extra_context={"site_header": admin.site.site_header}
        ),
        name="password_reset_confirm",
    ),
    path(
        "reset/done/",
        auth_views.PasswordResetCompleteView.as_view(
            extra_context={"site_header": admin.site.site_header}
        ),
        name="password_reset_complete",
    ),
    path("admin/", admin.site.urls),
]

The alternative solutions to the header issue (refactoring class based views or the admin site) seem overly complex.

I'd be happy to work on this solution (and the CSS) if there is consensus on it.

[Natalia Bidart]

Accepting considering I have reproduced the issue about lack of consistency for admin site header/title and button CSS. I think the solution for the former should be to update the docs, but do note that we should provide a code snippet that sets all the relevant variables.

[Natalia Bidart]

Is worth noting that the lack of class="submit-row" affects more than one template, so all password reset related templates should be audited/fixed.

[Yaniv Toledano]

Replying to Natalia Bidart:

Is worth noting that the lack of class="submit-row" affects more than one template, so all password reset related templates should be audited/fixed.

Agree with this point. I believe the email input field is malformed as well in comparison to the normal admin layouts.

[Bhuvnesh]

​PR

[priyank-panchal-inferenz]

I'm happy for any guidance on what needs to be improved.

[Mariusz Felisiak]

Priyank, please check comments.

[Howard Qiu]

The ​link to the Django document and the version is dev, but the ticket's version is 4.2. Which is the right version?

[Mariusz Felisiak <felisiak.mariusz@…>]

In 0016a429:

Fixed #34677 -- Made admin password reset templates more consistent.