Bind the design-system input to TanStack Form v2 and move sign-up onto it #418

New issue

Closed

opened 2026-10-15 12:34:19 +00:00 by root · 15 comments

root commented

2026-10-15 12:34:19 +00:00

(Migrated from gitlab.core-project.space)

Parent

#410

What to build

A shared form module binds the design-system input, the form's refusal line and its submit button to TanStack Form v2 once, and the sign-up page runs on it. A Player signing up sees the same fields, live Username check, refusals and Guest-Games choice as today; after a refused submit, focus goes to the first invalid field.

Seam: S1 — the sign-up page with the auth harness and MSW; S2 — accounts.spec in apps/e2e, unchanged.

Acceptance criteria

@tanstack/react-form is pinned to an exact 2.0.0 alpha, chosen after reading its release notes and TanStack/form#2341, #2306, #2296, #2299, #2360.
The shared module in lib/ holds every read of a field's state; pages pass rules and fields only.
The Username check is an async validator debounced at 300 ms, reading availability through Query's existing query options.
Server refusals are mapped from the refusal code and the rate limit and returned from onSubmit with createValidationError, never thrown.
A refused Username stays marked until the Player types in that field again, even after typing in another field (new test).
Focus moves to the first invalid field after a refused submit (new test).
Errors carry our refusal unions and are translated at render (ADR 0025).
The existing sign-up tests and accounts.spec pass unchanged in what they assert.

## Parent #410 ## What to build A shared form module binds the design-system input, the form's refusal line and its submit button to TanStack Form v2 once, and the sign-up page runs on it. A Player signing up sees the same fields, live Username check, refusals and Guest-Games choice as today; after a refused submit, focus goes to the first invalid field. Seam: S1 — the sign-up page with the auth harness and MSW; S2 — `accounts.spec` in `apps/e2e`, unchanged. ## Acceptance criteria - [ ] `@tanstack/react-form` is pinned to an exact 2.0.0 alpha, chosen after reading its release notes and TanStack/form#2341, #2306, #2296, #2299, #2360. - [ ] The shared module in `lib/` holds every read of a field's state; pages pass rules and fields only. - [ ] The Username check is an async validator debounced at 300 ms, reading availability through Query's existing query options. - [ ] Server refusals are mapped from the refusal code and the rate limit and returned from `onSubmit` with `createValidationError`, never thrown. - [ ] A refused Username stays marked until the Player types in that field again, even after typing in another field (new test). - [ ] Focus moves to the first invalid field after a refused submit (new test). - [ ] Errors carry our refusal unions and are translated at render (ADR 0025). - [ ] The existing sign-up tests and `accounts.spec` pass unchanged in what they assert.

root commented

2026-10-15 12:34:20 +00:00

(Migrated from gitlab.core-project.space)

marked this issue as related to #410