This PR surfaces API validation errors from the registration endpoint
directly onto the corresponding form fields, instead of only showing a
generic "invalid data" message. A new `parseValidationErrors` helper
extracts field names and messages from the API's `invalid_fields` array
(e.g. `["email: email is not a valid email address"]`) and maps them to
the appropriate form fields. The Register component integrates this
parser into its error handling, prioritizing client-side validation but
falling back to server-side field errors when present. Errors are
cleared as the user types.
A follow-up commit addressed PR review feedback: the `ValidationError`
interface is now exported from the parser module and reused in
`Register.vue` (eliminating a duplicate `ApiValidationError` interface),
the type guard was tightened to check specifically for `invalid_fields`
rather than broadly matching any object with a `message` property, the
fallback error message always uses the localized translation key instead
of potentially surfacing raw backend messages, and the
`serverValidationErrors` ref uses `Partial<Record>` to accurately
reflect that keys are optional.
🐰 A parser hops through error fields,
Catching field names as each one yields,
Client and server now both agree,
Validation flows harmoniously free!
Whitespace trimmed, no colon? It hops along,
Register form now validated strong! ✨
---------
Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: kolaente <k@knt.li>
c6f0d8babe