From 3b67c26216da845d1f7bd962d297d11666ed1f37 Mon Sep 17 00:00:00 2001
From: elpatron <m.busche@gmail.com>
Date: Tue, 7 Oct 2025 10:19:43 +0200
Subject: [PATCH] =?UTF-8?q?feat:=20Altersbest=C3=A4tigung=20(16+)=20im=20B?=
 =?UTF-8?q?uchungsformular?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Neue Pflicht-Checkbox: Mindestalter 16 Jahre
- Direkt unter der AGB-Checkbox platziert
- Validierung beim Absenden des Formulars
- Wird nach erfolgreicher Buchung zurückgesetzt
---
 src/client/components/booking-form.tsx | 24 +++++++++++++++++++++++-
 1 file changed, 23 insertions(+), 1 deletion(-)

diff --git a/src/client/components/booking-form.tsx b/src/client/components/booking-form.tsx
index 0759933..5fa5b4e 100644
--- a/src/client/components/booking-form.tsx
+++ b/src/client/components/booking-form.tsx
@@ -11,6 +11,7 @@ export function BookingForm() {
   const [selectedTime, setSelectedTime] = useState("");
   const [notes, setNotes] = useState("");
   const [agbAccepted, setAgbAccepted] = useState(false);
+  const [ageConfirmed, setAgeConfirmed] = useState(false);
   const [inspirationPhoto, setInspirationPhoto] = useState<string>("");
   const [photoPreview, setPhotoPreview] = useState<string>("");
   const [errorMessage, setErrorMessage] = useState<string>("");
@@ -189,6 +190,10 @@ export function BookingForm() {
       setErrorMessage("Bitte bestätige die Kenntnisnahme der Allgemeinen Geschäftsbedingungen.");
       return;
     }
+    if (!ageConfirmed) {
+      setErrorMessage("Bitte bestätige, dass du mindestens 16 Jahre alt bist.");
+      return;
+    }
 
     // Email validation now handled in backend before booking creation
     const appointmentTime = selectedTime;
@@ -223,6 +228,7 @@ export function BookingForm() {
           setSelectedTime("");
           setNotes("");
           setAgbAccepted(false);
+          setAgeConfirmed(false);
           setInspirationPhoto("");
           setPhotoPreview("");
           setErrorMessage("");
@@ -425,7 +431,7 @@ export function BookingForm() {
         </div>
 
         {/* AGB Acceptance */}
-        <div className="bg-gray-50 border border-gray-200 rounded-lg p-4">
+        <div className="bg-gray-50 border border-gray-200 rounded-lg p-4 space-y-4">
           <div className="flex items-start space-x-3">
             <input
               type="checkbox"
@@ -451,6 +457,22 @@ export function BookingForm() {
               </p>
             </div>
           </div>
+          
+          <div className="flex items-start space-x-3">
+            <input
+              type="checkbox"
+              id="age-confirmation"
+              checked={ageConfirmed}
+              onChange={(e) => setAgeConfirmed(e.target.checked)}
+              className="mt-1 h-4 w-4 text-pink-600 focus:ring-pink-500 border-gray-300 rounded"
+              required
+            />
+            <div className="flex-1">
+              <label htmlFor="age-confirmation" className="text-sm font-medium text-gray-700 cursor-pointer">
+                Ich bestätige, dass ich mindestens 16 Jahre alt bin *
+              </label>
+            </div>
+          </div>
         </div>
 
         {/* Error Message */}