auto-claude: subtask-3-1 - Update ContactForm to call API route instead of simulating
Changes: - Replaced simulated API call with real fetch() to /api/contact - Added errorMessage state for custom error messages - Implemented proper response handling for different status codes: * 200: Success message and form reset * 429: Rate limit error with time until retry * 400/500: Display API error messages - Enhanced rate limit error display with human-readable time formatting - Added VERIFICATION_STEPS.md for manual testing guidance Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,55 @@
|
||||
# Verification Steps for ContactForm API Integration
|
||||
|
||||
## Manual Verification Required
|
||||
|
||||
The ContactForm has been updated to call the real API route at `/api/contact` instead of simulating the submission.
|
||||
|
||||
### Test in Browser
|
||||
|
||||
1. **Navigate to**: http://localhost:3000/en/contact
|
||||
|
||||
2. **Test Successful Submission**:
|
||||
- Fill in all form fields (name, email, message)
|
||||
- Click "Send Message"
|
||||
- Verify: Success message appears
|
||||
- Verify: Form fields are cleared
|
||||
- Verify: No console errors
|
||||
|
||||
3. **Test Rate Limiting**:
|
||||
- Submit the form 5 times rapidly
|
||||
- On the 6th submission, verify:
|
||||
- Error message appears with rate limit warning
|
||||
- Message shows time until retry (e.g., "Too many requests. Please try again in 60 minutes.")
|
||||
- Form is still functional (not broken)
|
||||
|
||||
4. **Test Validation**:
|
||||
- Try submitting with empty fields
|
||||
- Verify validation errors appear
|
||||
- Try submitting with invalid email
|
||||
- Verify email validation error appears
|
||||
|
||||
5. **Test Error Display**:
|
||||
- Verify error messages are clearly visible
|
||||
- Verify error messages disappear on successful submission
|
||||
- Check that UI remains user-friendly
|
||||
|
||||
### Expected Behavior
|
||||
|
||||
- ✅ Form submits to `/api/contact` with POST request
|
||||
- ✅ Success message displays on 200 response
|
||||
- ✅ Rate limit error displays on 429 response with countdown
|
||||
- ✅ Generic error message displays on other errors
|
||||
- ✅ Form validation works before API call
|
||||
- ✅ Loading state shows during submission
|
||||
- ✅ Form is disabled during submission
|
||||
|
||||
### Changes Made
|
||||
|
||||
1. Added `errorMessage` state to store custom error messages
|
||||
2. Replaced simulated API call with real `fetch()` to `/api/contact`
|
||||
3. Added response status handling:
|
||||
- 200 (OK): Success message, clear form
|
||||
- 429 (Rate Limited): Display time until retry
|
||||
- 400/500: Display API error message
|
||||
4. Improved error message display with custom messages
|
||||
|
||||
Reference in New Issue
Block a user