NB-1: password visibility toggle on all auth forms#59
Merged
Conversation
Template-only design adding an accessible show/hide toggle to all four auth password surfaces. Records the resolved scope decision to build a branded password_reset_confirm.html (currently the admin fallback) and the choice of Material Symbols + a single delegated script over per- template duplication.
Shared toggle include + delegated script; login password field wrapped with the toggle. NB-1.
The login toggle test counted the data-pw-toggle literal, which also appears in the delegated script's selector (double-count). Count the markup-only aria-label token instead and restore the clean selector. NB-1.
Move default_token_generator import to Task 4 (avoids F401/I001), switch the JS wrapper contract from .relative to data-pw-wrapper, add an HTMX partial-swap test, and record the compiled-Tailwind build step.
Key the script off a semantic data-pw-wrapper attribute instead of the .relative presentation class (silent-failure risk), remove the unused default_token_generator import (F401/I001), and add a test for the HTMX partial-swap path. NB-1.
Both password fields wrapped with the shared toggle. NB-1.
All three password fields wrapped with the shared toggle. NB-1.
Replaces the Django-admin fallback with a base.html-styled page; both new-password fields wrapped with the shared toggle. NB-1.
Mirrors templates/registration/password_change.html structure; no behavioral change. NB-1.
NB-1 adds pr-12 and the toggle button positioning utilities; compile them into the built stylesheet so the feature is styled in prod.
Drop value= on the password input branch so a failed login/register Post no longer echoes the cleartext password into the response HTML (email/username still prefill). Correct the HTMX-partial test docstring and assert a fragment was returned. Render the toggle script only on the valid-link reset-confirm branch. NB-1.
Owner
Author
|
Browser verification completed (real Google Chrome via Playwright, headless, against the live Django dev server). 26/26 behavioral checks passed on /login/ and /register/:
password_change and password_reset_confirm reuse the identical shared |
The PasswordToggleTests fixtures (Str0ngPass!9, wrong-password) tripped the detect-secrets pre-commit/CI hook. Mark them with inline `pragma: allowlist secret` (repo convention, as in base.html) rather than baselining them, and commit the hook's refreshed .secrets.baseline (line-number/timestamp bookkeeping only — no new or removed secrets). NB-1.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Adds an accessible show/hide toggle to every password input across the four auth surfaces (login, register, change-password, password-reset-confirm). Template-only — no backend/form/model/urls changes.
templates/snippets/password_toggle.html(button) +password_toggle_js.html(onedocument.body-delegated, idempotent vanilla-JS handler keyed offdata-pw-toggle/data-pw-wrapper). Material Symbolsvisibility/visibility_off, consistent with the existing icon convention anddesign_reference/.widget.input_type == 'password'; change-password wraps its 3 hardcoded inputs.templates/registration/password_reset_confirm.html— the project had none, so this page was rendering Django admin's unstyled fallback. Now extendsbase.html; the project-template override works viaTEMPLATES.DIRSprecedence (nourls.pychange).value=on the password input branch so a failed login/register POST no longer reflects the submitted cleartext password back into the response HTML (email/username still prefill).static/css/tailwind.min.cssso the newpr-12/positioning utilities are compiled (Tailwind is compiled, not CDN).Spec & plan:
docs/superpowers/specs/2026-05-16-password-visibility-toggle-design.md,docs/superpowers/plans/2026-05-16-password-visibility-toggle.md.Test plan
manage.py test account blog); 5 newPasswordToggleTests(login full page, login HTMX partial-swap fragment, register ×2, change ×3, reset-confirm branded ×2). Baseline was 251.ruff check .clean (CI lint).blog.tests.test_password_reset_loadsstill green.aria-labelswap, Enter/Space activate, button does not submit, field height stable, masked again on reload, toggle still works on the HTMX-swapped login/register form after a failed submit.Deploy note
Prod serves static from DO Spaces — after merge, deploy must run
npm run build:css(done here) andcollectstaticso the rebuilt CSS reaches the bucket; an rsync-only deploy ships an unstyled toggle.