fix(ui): show proper error when signup username has invalid characters

When a username like 'christianlouis.de' (containing a dot) was submitted
on the signup page, FastAPI returned a 422 with detail as an array of
Pydantic validation error objects. The JS code assigned that array directly
to `this.error`, causing Alpine.js x-text to render '[object Object]'.

Two fixes applied in signup.html:
1. Client-side validation: check username length and pattern in submit()
   before the API call, with clear human-readable error messages.
2. Server error handling: detect when data.detail is an Array and extract
   each entry's .msg field, joining them into a readable string.

Also adds a regression test to confirm the 422 response format for an
invalid username (with dot) includes a list detail with msg fields.

Co-authored-by: christianlouis <361235+christianlouis@users.noreply.github.com>
This commit is contained in:
copilot-swe-agent[bot]
2026-03-19 18:58:19 +00:00
parent f7e4f81773
commit 689c616e44
2 changed files with 43 additions and 1 deletions
+29
View File
@@ -322,6 +322,35 @@ def test_signup_duplicate_username(la_client, active_user):
assert "Username" in resp.json()["detail"]
@pytest.mark.integration
def test_signup_invalid_username_with_dot(la_client):
"""POST /api/auth/signup returns 422 with a list detail when username contains a dot.
This is a regression test for the bug where ``data.detail`` was an array,
causing the frontend to display ``[object Object]`` instead of a message.
"""
with patch("app.api.local_auth.settings") as mock_settings:
mock_settings.allow_local_signup = True
mock_settings.multi_user_enabled = True
mock_settings.email_host = "smtp.example.com"
resp = la_client.post(
"/api/auth/signup",
json={
"email": "a@example.com",
"username": "christian.louis",
"password": "password1",
"password_confirm": "password1",
},
)
assert resp.status_code == 422
detail = resp.json()["detail"]
# FastAPI returns a list of validation errors for Pydantic constraint failures.
# Each entry must be a dict with a "msg" key so the frontend can extract a readable message.
assert isinstance(detail, list), "detail should be a list for Pydantic validation errors"
assert len(detail) > 0
assert "msg" in detail[0]
@pytest.mark.integration
def test_signup_smtp_failure_cleans_up(la_client, la_session):
"""POST /api/auth/signup cleans up user records if email send fails."""