damjan_savicandClaude Sonnet 4.5
24dbadf5d6
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>
56 lines
1.9 KiB
Markdown
56 lines
1.9 KiB
Markdown
# 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
|
|
|