From b6c2b93c908b017309b321f430577bca16642c6c Mon Sep 17 00:00:00 2001
From: Linda Eskilsson <eskilsson.linda@hotmail.se>
Date: Thu, 23 Apr 2026 12:51:38 +0200
Subject: [PATCH 1/2] fix: add client-side validation for future birth dates in
 PetForm

---
 frontend/src/components/PetForm.jsx | 58 +++++++++++++++++++++++++----
 1 file changed, 51 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/PetForm.jsx b/frontend/src/components/PetForm.jsx
index 22f92e7..4c3b1fc 100644
--- a/frontend/src/components/PetForm.jsx
+++ b/frontend/src/components/PetForm.jsx
@@ -10,9 +10,21 @@ const PetForm = ({ onCancel, onSave }) => {
         weight: ''
     });
     const [isSubmitting, setIsSubmitting] = useState(false);
+    const [fieldErrors, setFieldErrors] = useState({});
+
+    const today = new Date().toISOString().split('T')[0];
+
 
     const handleSubmit = async (e) => {
         e.preventDefault();
+        setFieldErrors({});
+
+                // Klient-validering: framtida datum
+        if (formData.dob && formData.dob > today) {
+            setFieldErrors({ dob: 'Födelsedatum kan inte vara i framtiden.' });
+            return;
+        }
+
         setIsSubmitting(true);
 
         try {
@@ -32,11 +44,31 @@ const PetForm = ({ onCancel, onSave }) => {
             onSave();
         } catch (error) {
             console.error("Kunde inte spara djuret:", error);
-            alert("Något gick fel vid sparning. Kontrollera att alla obligatoriska fält är ifyllda.");
-        } finally {
-            setIsSubmitting(false);
-        }
-    };
+            if (error.response?.status === 400) {
+                const data = error.response.data;
+                const errors = {};
+                if (data?.errors) {
+                    // Spring returnerar vanligtvis { errors: [{ field, defaultMessage }] }
+                    data.errors.forEach(err => {
+                        if (err.field === 'dateOfBirth') {
+                            errors.dob = 'Födelsedatum kan inte vara i framtiden.';
+                        } else {
+                            errors[err.field] = err.defaultMessage;
+                        }
+                    });
+                } else if (data?.dateOfBirth || data?.message?.toLowerCase().includes('date')) {
+                    errors.dob = 'Födelsedatum kan inte vara i framtiden.';
+                } else {
+                    errors.general = 'Något gick fel vid sparning. Kontrollera att alla obligatoriska fält är ifyllda.';
+                }
+                setFieldErrors(errors);
+            } else {
+                setFieldErrors({ general: 'Något gick fel vid sparning. Försök igen.' });
+        }   }
+    finally {
+        setIsSubmitting(false);
+    }
+};
 
     return (
         <div className="max-w-2xl mx-auto animate-in slide-in-from-bottom-4 duration-500">
@@ -111,10 +143,17 @@ const PetForm = ({ onCancel, onSave }) => {
                             <input
                                 type="date"
                                 value={formData.dob}
-                                onChange={(e) => setFormData({...formData, dob: e.target.value})}
-                                className="w-full px-4 py-3 rounded-lg border border-slate-200 bg-slate-50 focus:ring-2 focus:ring-blue-500 focus:bg-white outline-none transition font-medium italic"
+                                max={today}
+                                onChange={(e) => {
+                                    setFormData({...formData, dob: e.target.value});
+                                    if (fieldErrors.dob) setFieldErrors({...fieldErrors, dob: undefined});
+                                }}
+                                className={`w-full px-4 py-3 rounded-lg border bg-slate-50 focus:ring-2 focus:ring-blue-500 focus:bg-white outline-none transition font-medium italic ${fieldErrors.dob ? 'border-red-400 focus:ring-red-400' : 'border-slate-200'}`}
                                 required
                             />
+                            {fieldErrors.dob && (
+                                <p className="text-red-500 text-xs font-semibold ml-1 mt-1">{fieldErrors.dob}</p>
+                            )}
                         </div>
 
                         {/* VIKT */}
@@ -132,6 +171,11 @@ const PetForm = ({ onCancel, onSave }) => {
                         </div>
                     </div>
 
+                    {fieldErrors.general && (
+                        <div className="bg-red-50 border border-red-200 rounded-lg ...">
+                            {fieldErrors.general}
+                        </div>
+                    )}
                     {/* KNAPPAR */}
                     <div className="pt-8 border-t border-slate-100 flex flex-col sm:flex-row gap-4">
                         <button

From 59a30978cfc9ca335f5f94bb25bc7b4be7000792 Mon Sep 17 00:00:00 2001
From: Linda Eskilsson <eskilsson.linda@hotmail.se>
Date: Thu, 23 Apr 2026 13:28:21 +0200
Subject: [PATCH 2/2] fix: resolve catch block structure and finalize error
 handling in PetForm

---
 frontend/src/components/PetForm.jsx | 45 +++++++++++++++++++----------
 1 file changed, 30 insertions(+), 15 deletions(-)

diff --git a/frontend/src/components/PetForm.jsx b/frontend/src/components/PetForm.jsx
index 4c3b1fc..5040ec9 100644
--- a/frontend/src/components/PetForm.jsx
+++ b/frontend/src/components/PetForm.jsx
@@ -12,7 +12,8 @@ const PetForm = ({ onCancel, onSave }) => {
     const [isSubmitting, setIsSubmitting] = useState(false);
     const [fieldErrors, setFieldErrors] = useState({});
 
-    const today = new Date().toISOString().split('T')[0];
+    const now = new Date();
+    const today = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')}`;
 
 
     const handleSubmit = async (e) => {
@@ -48,14 +49,27 @@ const PetForm = ({ onCancel, onSave }) => {
                 const data = error.response.data;
                 const errors = {};
                 if (data?.errors) {
-                    // Spring returnerar vanligtvis { errors: [{ field, defaultMessage }] }
-                    data.errors.forEach(err => {
-                        if (err.field === 'dateOfBirth') {
-                            errors.dob = 'Födelsedatum kan inte vara i framtiden.';
-                        } else {
-                            errors[err.field] = err.defaultMessage;
-                        }
-                    });
+                    const fieldMap = {
+                        dateOfBirth: 'dob',
+                        weightKg: 'weight'
+                    };
+
+                    const addFieldError = (field, message) => {
+                        const formField = fieldMap[field] || field;
+                        errors[formField] = field === 'dateOfBirth'
+                            ? 'Födelsedatum kan inte vara i framtiden.'
+                            : message;
+                    };
+
+                    if (Array.isArray(data.errors)) {
+                        data.errors.forEach(err => {
+                            addFieldError(err.field, err.defaultMessage);
+                        });
+                    } else {
+                        Object.entries(data.errors).forEach(([field, messages]) => {
+                            addFieldError(field, Array.isArray(messages) ? messages[0] : messages);
+                        });
+                    }
                 } else if (data?.dateOfBirth || data?.message?.toLowerCase().includes('date')) {
                     errors.dob = 'Födelsedatum kan inte vara i framtiden.';
                 } else {
@@ -64,11 +78,11 @@ const PetForm = ({ onCancel, onSave }) => {
                 setFieldErrors(errors);
             } else {
                 setFieldErrors({ general: 'Något gick fel vid sparning. Försök igen.' });
-        }   }
-    finally {
-        setIsSubmitting(false);
-    }
-};
+            }
+        } finally {
+            setIsSubmitting(false);
+        }
+    };
 
     return (
         <div className="max-w-2xl mx-auto animate-in slide-in-from-bottom-4 duration-500">
@@ -171,8 +185,9 @@ const PetForm = ({ onCancel, onSave }) => {
                         </div>
                     </div>
 
+                    {/* GENERELLT FEL */}
                     {fieldErrors.general && (
-                        <div className="bg-red-50 border border-red-200 rounded-lg ...">
+                        <div className="bg-red-50 border border-red-200 rounded-lg px-4 py-3 text-red-600 text-sm font-semibold">
                             {fieldErrors.general}
                         </div>
                     )}