feat(portal): show/hide password toggle on login and setup (bd-2668) - #203
Merged
Conversation
The login and setup screens were the two places a teacher typed a password completely blind. Setup is the worse of the two: an 8-character-plus-a-digit password, typed twice, with "Passwords do not match" as the only feedback — and it cannot tell you which of the two you fat-fingered. On a phone keyboard that is a dead end. PortalPasswordResetVerify already had this toggle, so the pattern is copied from there rather than invented: the input type flips between 'password' and 'text', the button sits absolutely inside a relative wrapper, and the field gets pr-10 so a long password does not run under the icon. Setup gets ONE toggle driving both fields, matching the reset screen. The failure being fixed is "these two do not match and I cannot see why", which needs both visible at once; a per-field toggle makes that comparison harder, not easier. Also gives the pre-existing reset-screen toggle an aria-label — it was an icon-only button with no accessible name, so a screen reader announced it as just "button". Same three-line pattern, and shipping two inconsistent copies of it was the worse option. Tests assert on the input's type attribute, which is what actually determines whether characters are masked; asserting on which icon renders would pass even if the wiring were broken. Also pinned: the toggle is type=button, so peeking at your password does not submit the form. Tests: 7 new (red-first against develop: 6 failed, 1 passed), portal suite 18 files / 97 tests green, tsc clean, vite build clean. Root Jest is at its pre-existing 33-suite baseline (needs bot/ deps, installed separately in CI). Closes: bd-2668
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.
Adds the eye toggle to the two password screens that were still typed blind: PortalLogin and PortalSetup.
PortalPasswordResetVerifyalready had this, so the pattern is copied from there rather than invented — input type flipspassword↔text, button absolutely positioned in arelativewrapper,pr-10so long passwords don't run under the icon.Decisions worth a look
aria-labelto the pre-existing reset-screen toggle. It was icon-only with no accessible name, so a screen reader announced just "button". Same three lines; shipping two inconsistent copies was the worse option.Tests
7 new, red-first against
develop(6 failed / 1 passed before the fix). They assert on the input'stypeattribute — what actually masks the characters — because asserting on which icon renders would pass even with the wiring broken. Also pinned: the toggle istype=button, so peeking doesn't submit the form.tsc --noEmit: clean ·vite build: cleanbot/ npm ci). Diffed failures by name against cleandevelop— the one differing suite (exam-confirm-routing) passes in isolation, references zero portal files, and the run-to-run failure count varies on identical code, so it's parallel-load flake, not this change.Not covered: how it looks on a real phone — worth a human eye.
Closes: bd-2668
🤖 Generated with Claude Code