From e7ff00f062bd800f6dc1bcf701f162cf179d2d2f Mon Sep 17 00:00:00 2001
From: Thatsaphorn Atchariyaphap <thatsaphorn@outlook.de>
Date: Sun, 29 Jun 2025 17:46:28 +0900
Subject: [PATCH] Replace reCAPTCHA with hCaptcha in contact form and implement
 captcha reset functionality

---
 .../Contact/Section/ContactFormSection.tsx    | 31 ++++++++++---------
 1 file changed, 17 insertions(+), 14 deletions(-)

diff --git a/frontend/components/Contact/Section/ContactFormSection.tsx b/frontend/components/Contact/Section/ContactFormSection.tsx
index 61073cf..79dc36f 100644
--- a/frontend/components/Contact/Section/ContactFormSection.tsx
+++ b/frontend/components/Contact/Section/ContactFormSection.tsx
@@ -1,11 +1,13 @@
 'use client'
 
-import React, {useState} from 'react'
+import React, {useRef, useState} from 'react'
 import {motion} from 'framer-motion'
 import {Button} from '@/components/ui/button'
-import ReCAPTCHA from 'react-google-recaptcha'
+import HCaptcha from '@hcaptcha/react-hcaptcha'
 
 const ContactFormSection = () => {
+    const captchaRef = useRef<HCaptcha | null>(null)
+
     const [form, setForm] = useState({
         name: '',
         email: '',
@@ -54,6 +56,7 @@ const ContactFormSection = () => {
                 message: '',
             })
             setCaptchaToken('')
+            captchaRef.current?.resetCaptcha()
         } else {
             const resJson = await res.json()
             setError(
@@ -84,7 +87,8 @@ const ContactFormSection = () => {
                 viewport={{once: true}}
                 transition={{duration: 0.5, delay: 0.2}}
             >
-                Wir freuen uns über dein Interesse und melden uns schnellstmöglich bei dir zurück.
+                Wir freuen uns über dein Interesse und melden uns schnellstmöglich bei
+                dir zurück.
             </motion.p>
 
             {submitted ? (
@@ -100,35 +104,35 @@ const ContactFormSection = () => {
                                 name: 'name',
                                 type: 'text',
                                 required: true,
-                                placeholder: 'Max Mustermann'
+                                placeholder: 'Max Mustermann',
                             },
                             {
                                 label: 'Deine E-Mail *',
                                 name: 'email',
                                 type: 'email',
                                 required: true,
-                                placeholder: 'max@example.com'
+                                placeholder: 'max@example.com',
                             },
                             {
                                 label: 'Firmenname (optional)',
                                 name: 'company',
                                 type: 'text',
                                 required: false,
-                                placeholder: 'Mustermann GmbH'
+                                placeholder: 'Mustermann GmbH',
                             },
                             {
                                 label: 'Telefonnummer (optional)',
                                 name: 'phone',
                                 type: 'tel',
                                 required: false,
-                                placeholder: '+49 123 456789'
+                                placeholder: '+49 123 456789',
                             },
                             {
                                 label: 'Webseite (optional)',
                                 name: 'website',
                                 type: 'url',
                                 required: false,
-                                placeholder: 'https://...'
+                                placeholder: 'https://...',
                             },
                         ].map((field, index) => (
                             <motion.div
@@ -181,16 +185,15 @@ const ContactFormSection = () => {
                         viewport={{once: true}}
                         transition={{duration: 0.5, delay: 0.7}}
                     >
-                        <ReCAPTCHA
-                            sitekey={process.env.NEXT_PUBLIC_RECAPTCHA_SITE_KEY!}
-                            onChange={(token) => setCaptchaToken(token ?? '')}
+                        <HCaptcha
+                            sitekey={process.env.NEXT_PUBLIC_HCAPTCHA_SITE_KEY!}
+                            onVerify={(token) => setCaptchaToken(token)}
+                            ref={captchaRef}
                         />
                     </motion.div>
 
                     {error && (
-                        <div className="text-red-600 font-medium pt-2">
-                            ❌ {error}
-                        </div>
+                        <div className="text-red-600 font-medium pt-2">❌ {error}</div>
                     )}
 
                     <motion.div