fix(admin-ui): improve login errors and add password autocomplete attributes#156
fix(admin-ui): improve login errors and add password autocomplete attributes#156
Conversation
…butes - Map 'invalid credentials' API error to 'Invalid email or password' for better UX - Add autocomplete="current-password" to sign-in password field - Add autocomplete="new-password" to sign-up and setup wizard password fields Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
There was a problem hiding this comment.
Pull request overview
This PR improves the login user experience by mapping technical API error messages to user-friendly text and adding HTML autocomplete attributes to password fields for better password manager integration. The changes focus on the authentication flow in the admin UI.
Changes:
- Transform raw API credential errors (e.g., "invalid credentials", "unauthorized") to "Invalid email or password" in the login flow
- Add
autocomplete="current-password"to sign-in password fields - Add
autocomplete="new-password"to sign-up and setup wizard password fields
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 3 comments.
| File | Description |
|---|---|
| ui/src/store/authStore.ts | Added error message transformation logic in login() to map credential-related errors to a user-friendly message |
| ui/src/components/auth/SetupWizard.tsx | Added autocomplete="new-password" attributes to both password fields in the setup wizard |
| ui/src/components/auth/LoginPage.tsx | Added conditional autocomplete attributes to password fields based on signin/signup mode |
| const raw = err instanceof Error ? err.message : 'Login failed'; | ||
| const friendly = /invalid.*(cred|password|user)|unauthorized|401/i.test(raw) | ||
| ? 'Invalid email or password' | ||
| : raw; | ||
| set({ isLoading: false, error: friendly }); |
There was a problem hiding this comment.
The new error message transformation logic lacks test coverage. The existing test in authStore.test.ts at line 134 expects the raw "Invalid credentials" message, but with this change it would now receive "Invalid email or password". Consider adding test cases that verify:
- Various API error messages (e.g., "invalid credentials", "unauthorized", "invalid password") are correctly mapped to "Invalid email or password"
- Non-credential errors are passed through unchanged
- The regex pattern correctly matches expected error formats
| const raw = err instanceof Error ? err.message : 'Login failed'; | ||
| const friendly = /invalid.*(cred|password|user)|unauthorized|401/i.test(raw) | ||
| ? 'Invalid email or password' | ||
| : raw; | ||
| set({ isLoading: false, error: friendly }); |
There was a problem hiding this comment.
Consider applying similar user-friendly error message transformation to the register() function for consistency. Registration errors like "email already exists" or validation failures could also benefit from clearer messaging, following the same pattern established here for login errors.
- Use word boundaries (\b401\b) in login error regex to prevent
false matches on strings like "4010" or "14015"
- Add user-friendly error mapping to register() for duplicate email
errors ("already exists", "already registered", "duplicate email")
- Fix mockFetchFailure helper to return json() for proper error parsing
- Update existing tests to expect transformed friendly messages
- Add comprehensive test coverage for login/register error transformation
including pass-through of non-matching errors
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Use strings.EqualFold instead of manual ToLower comparison (gocritic) - Define private contextKey type for context.WithValue to satisfy staticcheck SA1029, update both http_router.go and http_trigger.go - Run go mod tidy in example/ to sync dependencies Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Summary
invalid credentials→Invalid email or passwordin login flowautocomplete="current-password"to sign-in password fieldautocomplete="new-password"to sign-up and setup wizard password fieldsTest plan
🤖 Generated with Claude Code