[cruzzer]

This PR adds a show/hide toggle to the password field on the login page, so users can quickly check what they typed (e.g. to catch a typo) before submitting.

Changes

• A faded eye icon sits inside the right edge of the password input and becomes fully visible on hover or keyboard focus
• Clicking it switches the input between type="password" and type="text" and swaps the icon between Eye and EyeOff (lucide-react, already a dependency)
• The toggle is a type="button" so it never submits the form, and it is disabled while a login is in progress, like the input
• Accessibility: translated aria-label plus aria-pressed for the current state, and the same focus ring as the existing inputs and buttons
• New translation key loginPasswordToggle in en.json and en-US.json
• The e2e LoginFixture now uses getByLabel('Password', { exact: true }), since the default substring match would also hit the toggle's "Toggle password visibility" label

No backend, configuration or storage changes.

Verification

• make lint-webui passes with no new warnings
• Playwright e2e passes on all browsers (37 passed), run with the repository's e2e workflow on my fork: https://github.com/cruzzer/tinyauth/actions/runs/42210461926
• Manually checked in a local build (light and dark mode): toggling keeps the typed value, the form isn't submitted, clicking the "Password" label still focuses the input, Tab + Enter works on the toggle, and the "Forgot your password?" link position is unchanged

Before / After

AI disclosure

Per AI_POLICY.md: this change was written with the help of Claude Code. It is small (one component, one translation key, one test selector), and I have reviewed every line and can explain it.

🤖 Generated with Claude Code

Summary by CodeRabbit

• New Features
  • Added a control on the login form to show or hide the password while typing.

[coderabbitai]

No actionable comments were generated in the recent review.

Walkthrough

The login form now lets users show or hide the password. The login fixture matches the exact Password label, and English locale files include the toggle label.

Changes: Login Password Visibility

Layer / File(s)	Summary
Password visibility control frontend/src/components/auth/login-form.tsx, frontend/src/lib/i18n/locales/en-US.json, frontend/src/lib/i18n/locales/en.json, e2e/fixtures/auth.fixtures.ts	The login form toggles the password input between password and text, shows the corresponding icon, and disables the toggle while loading. The locale files add the toggle label. The login fixture now uses an exact Password label match.

Estimated code review effort: 2 (Simple) | ~10 minutes

Change: Feature

Suggested reviewers: steveiliop56

Merge Risk: Minimal · up to ece5c

The login form adds a password visibility control. No merge-blocking risk was identified.

Pre-merge checks: 5

Check name	Status	Explanation
Description Check		Check skipped - CodeRabbit’s high-level summary is enabled.
Title check		The title clearly describes the main change: a password visibility toggle in the login form.
Docstring Coverage		No eligible functions found in the changed files. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff with cyclomatic complexity of at least 2. Documentat…
Linked Issues check		Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check		Check skipped because no linked issues were found for this pull request.

Full details: Docstring Coverage

Explanation

No eligible functions found in the changed files. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff with cyclomatic complexity of at least 2. Documentation-only edits and deletions within surviving functions are included; unchanged diff context and fully deleted functions are excluded. Analyzed 0 functions across 2 files. (2 skipped: 2 unsupported.)

Finishing Touches

Generate unit tests (beta)

• Create a new PR

• Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Tip

🎯 Customize your risk assessments

Guide how CodeRabbit assesses merge risk and security architecture risk. Highlight sensitive changes and explain your security boundaries using Merge Risk Instructions and Security Risk Instructions in your review settings. Security architecture risk assessments require the Advanced plan or above.

✅ Automatic approvals, with your rules

Let CodeRabbit approve pull requests once required threads are resolved, pre-merge checks pass, and your risk limits are met. Enable Automatic approvals in review settings, with overrides for teams or file paths.

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

Share

• X
• Mastodon
• Reddit
• LinkedIn

Recent review info

Run configuration

• Source mode: Auto
• Repository: tinyauthapp/tinyauth
• Branch: main
• File: .coderabbit.yaml
• Commit: 35bdfa8
• Layers: Repository YAML
• Review profile: CHILL
• Plan: Advanced
• Run ID: 38c5fd6e-79d0-4d0d-aaca-236909376c40

Commits

Reviewing files that changed from the base of the PR and between 35bdfa8 and ece5c22.

Files selected for processing: 4

• e2e/fixtures/auth.fixtures.ts
• frontend/src/components/auth/login-form.tsx
• frontend/src/lib/i18n/locales/en-US.json
• frontend/src/lib/i18n/locales/en.json

Included review availability: This review used your included allowance. Your plan provides up to 8 included reviews per hour; 7 remain after this review.