fix(web): explain password requirements on signup instead of generic error

Merged
RI
2d ago
+73-3

Problem

A user (tech@hellobello.at) couldn't sign up on capgo.app/register using their browser's suggested strong password and only got "Invalid registration request".

The /auth/register API requires an uppercase letter, a lowercase letter, a number and a special character. Chrome's generated passwords often have no symbol (e.g. xY7kq2mPzR9wB4n), so the API rejects them. It does return the reason in an errors array, but the landing page ignored it and showed only the generic message. The form also had no hint and no client-side check.

Fix

  • Requirements hint under the password field, linked with aria-describedby.
  • passwordrules attribute on the input so Safari/Chrome password managers generate passwords that meet the policy.
  • Client-side check that matches the API policy (getPasswordRequirementErrors) and lists exactly what's missing before submitting. It also sets aria-invalid and moves focus to the field.
  • API error details: if the API returns errors, those are shown instead of "Invalid registration request".
  • New copy key password_requirements with translator context.

Screenshot

Submitting a Chrome-style generated password with no symbol:

register weak password

Tests

  • bun test apps/web/src/services/registration.test.ts: 5 pass. New tests cover API errors being shown and the client-side policy.
  • oxlint is clean on the changed files.

šŸ¤– Generated with Claude Code


View with [code]smith Autofix with [code]smith
Need help on this PR? Tag @codesmith-bot with what you need.

Summary by CodeRabbit

  • New Features

    • Added clear password requirements to the registration form: 6–72 characters, including uppercase, lowercase, a number, and a special character.
    • Added localized guidance explaining password requirements.
  • Bug Fixes

    • Registration now validates passwords before submission and highlights invalid entries with focused feedback.
    • Password-related registration errors now display clearer messages from the service.