auto-claude: subtask-3-2 - Add rate limit feedback to ContactForm UI

- Added rate limit translations for en, de, and sr locales
- Added state to track remaining attempts from X-RateLimit-Remaining header
- Display warning when remaining attempts are low (<=2)
- Show user-friendly error messages with time until reset for 429 errors
- Added AlertTriangle icon for visual feedback on warnings
- All messages now use i18n translation keys for multilingual support
This commit is contained in:
2026-01-25 12:10:15 +01:00
parent 24dbadf5d6
commit 0f59df9b35
5 changed files with 65 additions and 10 deletions
+5 -5
View File
@@ -3,23 +3,23 @@
"spec": "017-replace-in-memory-rate-limiter-with-persistent-sol",
"state": "building",
"subtasks": {
"completed": 5,
"completed": 7,
"total": 12,
"in_progress": 1,
"failed": 0
},
"phase": {
"current": "Add New Persistent Rate Limiter",
"current": "Migrate Contact Form",
"id": null,
"total": 4
"total": 2
},
"workers": {
"active": 0,
"max": 1
},
"session": {
"number": 3,
"number": 5,
"started_at": "2026-01-25T11:52:31.718294"
},
"last_update": "2026-01-25T11:56:14.044309"
"last_update": "2026-01-25T12:07:33.420389"
}
+24 -2
View File
@@ -3,7 +3,7 @@
import { useState } from 'react';
import { useTranslations } from 'next-intl';
import { motion } from 'framer-motion';
import { MapPin, Phone, Mail, Send, Loader2, CheckCircle2 } from 'lucide-react';
import { MapPin, Phone, Mail, Send, Loader2, CheckCircle2, AlertTriangle } from 'lucide-react';
import Image from 'next/image';
interface FormData {
@@ -24,6 +24,7 @@ export function ContactForm() {
message: ''
});
const [errors, setErrors] = useState<Partial<FormData>>({});
const [remainingAttempts, setRemainingAttempts] = useState<number | null>(null);
const validateForm = () => {
const newErrors: Partial<FormData> = {};
@@ -76,12 +77,19 @@ export function ContactForm() {
const data = await response.json();
// Parse rate limit headers
const rateLimitRemaining = response.headers.get('X-RateLimit-Remaining');
if (rateLimitRemaining !== null) {
setRemainingAttempts(parseInt(rateLimitRemaining, 10));
}
if (response.ok) {
setSubmitStatus('success');
setFormData({ name: '', email: '', message: '' });
} else if (response.status === 429) {
// Rate limit exceeded
setSubmitStatus('error');
setRemainingAttempts(0);
const retryAfter = data.retryAfter || 0;
const minutes = Math.ceil(retryAfter / 60);
const hours = Math.floor(minutes / 60);
@@ -95,7 +103,7 @@ export function ContactForm() {
}
setErrorMessage(
`Too many requests. Please try again in ${timeMessage}.`
t('contactForm.rateLimit.error', { time: timeMessage })
);
} else {
// Other errors (400, 500, etc.)
@@ -314,6 +322,20 @@ export function ContactForm() {
</div>
</div>
{/* Rate limit warning - show when attempts are low */}
{remainingAttempts !== null && remainingAttempts > 0 && remainingAttempts <= 2 && (
<motion.div
initial={{ opacity: 0, y: 10 }}
animate={{ opacity: 1, y: 0 }}
className="flex items-center gap-2 p-3 bg-yellow-900/20 border border-yellow-900/50 rounded-lg"
>
<AlertTriangle className="h-4 w-4 text-yellow-500 flex-shrink-0" />
<p className="text-yellow-400 text-sm">
{t('contactForm.rateLimit.warning', { count: remainingAttempts })}
</p>
</motion.div>
)}
{submitStatus === 'success' && (
<motion.div
initial={{ opacity: 0, y: 10 }}
+12 -1
View File
@@ -396,7 +396,18 @@
},
"submit": "Nachricht senden",
"successMessage": "Vielen Dank für Ihre Nachricht! Ich werde mich so schnell wie möglich bei Ihnen melden.",
"errorMessage": "Entschuldigung, beim Senden Ihrer Nachricht ist ein Fehler aufgetreten."
"errorMessage": "Entschuldigung, beim Senden Ihrer Nachricht ist ein Fehler aufgetreten.",
"rateLimit": {
"warning": "Sie haben noch {count} {count, plural, one {Versuch} other {Versuche}}",
"error": "Zu viele Anfragen. Bitte versuchen Sie es in {time} erneut.",
"blockedUntil": "Ratenlimit überschritten. Sie können es in {time} erneut versuchen."
},
"errors": {
"nameRequired": "Name ist erforderlich",
"emailRequired": "E-Mail ist erforderlich",
"emailInvalid": "Bitte geben Sie eine gültige E-Mail-Adresse ein",
"messageRequired": "Nachricht ist erforderlich"
}
}
},
"privacy": {
+12 -1
View File
@@ -411,7 +411,18 @@
},
"submit": "Send Message",
"successMessage": "Thank you for your message! I will get back to you as soon as possible.",
"errorMessage": "Sorry, there was an error sending your message."
"errorMessage": "Sorry, there was an error sending your message.",
"rateLimit": {
"warning": "You have {count} {count, plural, one {attempt} other {attempts}} remaining",
"error": "Too many requests. Please try again in {time}.",
"blockedUntil": "Rate limit exceeded. You can try again in {time}."
},
"errors": {
"nameRequired": "Name is required",
"emailRequired": "Email is required",
"emailInvalid": "Please enter a valid email address",
"messageRequired": "Message is required"
}
}
},
"privacy": {
+12 -1
View File
@@ -418,7 +418,18 @@
},
"submit": "Posalji poruku",
"successMessage": "Hvala vam na poruci! Javicu vam se sto je pre moguce.",
"errorMessage": "Izvinite, doslo je do greske prilikom slanja vase poruke."
"errorMessage": "Izvinite, doslo je do greske prilikom slanja vase poruke.",
"rateLimit": {
"warning": "Preostalo vam je {count} {count, plural, one {pokusaj} other {pokusaja}}",
"error": "Previse zahteva. Molimo pokusajte ponovo za {time}.",
"blockedUntil": "Dostignut limit. Mozete pokusati ponovo za {time}."
},
"errors": {
"nameRequired": "Ime je obavezno",
"emailRequired": "E-mail je obavezan",
"emailInvalid": "Molimo unesite validnu e-mail adresu",
"messageRequired": "Poruka je obavezna"
}
}
},
"privacy": {