From 0f59df9b3532058c7b9f335018b06ec2d25be5cc Mon Sep 17 00:00:00 2001
From: Damjan Savic <info@damjan-savic.com>
Date: Sun, 25 Jan 2026 12:10:15 +0100
Subject: [PATCH] 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
---
 .auto-claude-status                    | 10 +++++-----
 src/components/contact/ContactForm.tsx | 26 ++++++++++++++++++++++++--
 src/messages/de.json                   | 13 ++++++++++++-
 src/messages/en.json                   | 13 ++++++++++++-
 src/messages/sr.json                   | 13 ++++++++++++-
 5 files changed, 65 insertions(+), 10 deletions(-)

diff --git a/.auto-claude-status b/.auto-claude-status
index 272c89b..c2d956d 100644
--- a/.auto-claude-status
+++ b/.auto-claude-status
@@ -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"
 }
\ No newline at end of file
diff --git a/src/components/contact/ContactForm.tsx b/src/components/contact/ContactForm.tsx
index cd87b6c..d15be49 100644
--- a/src/components/contact/ContactForm.tsx
+++ b/src/components/contact/ContactForm.tsx
@@ -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 }}
diff --git a/src/messages/de.json b/src/messages/de.json
index 0f68cc7..e6f97cf 100644
--- a/src/messages/de.json
+++ b/src/messages/de.json
@@ -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": {
diff --git a/src/messages/en.json b/src/messages/en.json
index 6ffe764..e5afd56 100644
--- a/src/messages/en.json
+++ b/src/messages/en.json
@@ -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": {
diff --git a/src/messages/sr.json b/src/messages/sr.json
index ac5b343..10259ba 100644
--- a/src/messages/sr.json
+++ b/src/messages/sr.json
@@ -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": {