Redesign password generator web interface

[dk3yyyy]

Summary

• replace the generic dark interface with a restrained, responsive utility design
• align visible controls with backend limits and add accessible keyboard-operated tabs
• render results safely with inline validation, response-shape checks, and clipboard fallback
• remove the ruled results background that intersected the empty state
• update rendered-page accessibility/design contract tests and README copy

Verification

• uv run pytest -q — 64 passed
• uv run python -m py_compile main.py web.py
• git diff --check
• Playwright desktop/mobile interaction QA at 320, 390, 768, 1024, and 1440px
• Random, passphrase, 422, malformed-response, keyboard-tab, clipboard-denial, and overflow paths verified
• Independent engineering/security and visual reviews found no blocking issues

Summary by CodeRabbit

• New Features

  • Redesigned the interface with a light, responsive, and accessible layout.
  • Added separate Random Password and Passphrase modes with mode-specific options.
  • Added strength and entropy indicators to generated results.
  • Added one-click copying with inline feedback and a manual-copy fallback.
  • Added keyboard-friendly navigation, live results, and inline error messages.

• Bug Fixes

  • Improved validation and handling of unexpected generation responses.
  • Restored controls reliably after errors or completed requests.

• Documentation

  • Updated the Web Interface feature documentation to reflect current capabilities.

[coderabbitai]

Warning

Review limit reached

@dk3yyyy, you've reached your PR review limit, so we couldn't start this review.

Next review available in: 55 minutes

Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available.
You're only billed for reviews past your plan's rate limits ($0.25/file).

How can I continue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews.

How do review limits work?

CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability.

For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window.

Please refer docs for additional details.

Review details

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 7ee829e9-21a5-4e28-91c4-03c584d06891

📥 Commits

Reviewing files that changed from the base of the PR and between 38774c5 and e736089.

📒 Files selected for processing (1)

• templates/index.html

📝 Walkthrough

Walkthrough

The home page was redesigned with a responsive accessible interface supporting random passwords and passphrases. Client-side generation now validates responses, renders strength and entropy details, handles inline errors, and supports clipboard copying with fallback behavior.

Changes

Web interface redesign

Layer / File(s)	Summary
Responsive accessible interface templates/index.html, README.md, tests/test_web.py	The template adds light responsive styling, accessible password and passphrase tabs, mode-specific controls, live regions, inline errors, and updated results markup. Tests verify accessibility attributes, backend limits, inline error handling, and the absence of remote fonts and specified emoji icons. README feature bullets describe the updated interface.
Generation, validation, and copy flow templates/index.html	Client-side logic builds mode-specific FormData, submits to /generate, validates and renders password results, displays errors, restores button state, visualizes strength, and copies passwords through the Clipboard API with a manual-copy fallback.

Estimated code review effort: 3 (Moderate) | ~20 minutes

Sequence Diagram(s)

sequenceDiagram
  participant Browser
  participant GeneratorUI
  participant GenerateEndpoint
  participant ClipboardAPI
  Browser->>GeneratorUI: Select mode and submit form
  GeneratorUI->>GenerateEndpoint: POST mode-specific FormData to /generate
  GenerateEndpoint-->>GeneratorUI: Return passwords, strength, and entropy
  GeneratorUI->>GeneratorUI: Validate and render result cards
  Browser->>GeneratorUI: Select copy button
  GeneratorUI->>ClipboardAPI: Write password text
  ClipboardAPI-->>GeneratorUI: Report copy success or failure

Loading

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly summarizes the main change: a redesign of the password generator web interface.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch feat/polish-web-ui

---

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

_{Comment @coderabbitai help to get the list of available commands.}

[coderabbitai]

Actionable comments posted: 2

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@templates/index.html`:
- Around line 764-776: Update validateResults to first verify that data is a
non-null object with a passwords array containing 1–20 entries, rejecting null
and empty successful responses with the existing generic response error.
Preserve the current per-item validation and entropy normalization.
- Around line 641-653: Update selectMode so every control within randomPanel is
disabled when the selected mode is not random, and every control within
passphrasePanel is disabled when the selected mode is not passphrase, while
preserving the existing hidden behavior. Apply the disabled state to each
panel’s controls whenever the mode changes.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: c7477487-0026-47c8-b73e-c4cec4917f59

📥 Commits

Reviewing files that changed from the base of the PR and between 4601a6e and 38774c5.

📒 Files selected for processing (3)

• README.md
• templates/index.html
• tests/test_web.py