feat(portal): show/hide password toggle on login and setup (bd-2668) - #204
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.
Cherry-pick of
3592bbffromdevelop(merged there as #203) ontomain.Why a cherry-pick and not
develop → main: develop is 48 commits ahead of main — a full promotion would ship the Android OTA pipeline, conversation-state recovery, the bd-2540 Gamma strip, and Railway build changes to prod alongside this. Operator chose to isolate the toggle. The 47 other commits stay queued on develop for a separate, deliberate release.What ships
Eye toggle on PortalLogin and PortalSetup;
aria-labelon the pre-existing reset-screen toggle (it was icon-only, announced as just "button"). 4 files, all underportal/src/portal/pages/. No bot code, no DB, no env vars, no Meta assets.Setup gets ONE toggle driving both fields — the failure it fixes is "these two don't match and I can't see why", which needs both visible at once.
Verified on THIS base, not just develop
Since main is 48 commits behind, the commit was re-verified after the cherry-pick rather than assumed:
PortalLogincarries the bd-2569 session gate, so the test'suseAuthmock is faithful here tootsc --noEmit: clean ·vite build: cleanTests are red-first (6 failed / 1 passed against develop before the fix) and assert on the input's
typeattribute — what actually masks characters — not on which icon renders. The toggle beingtype=buttonis pinned, so peeking can't submit the login form.Blast radius
Login and account-setup are the two screens every NIETE teacher passes through. The change is additive — no auth logic, submit path, or API calls touched. Deploys via Railway auto-deploy from
main.Not covered: how it renders on a real phone — worth a post-deploy look.
Closes: bd-2668
🤖 Generated with Claude Code