Gitlab-Migration/rheinsw-mono-repo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Replace reCAPTCHA with hCaptcha in contact form and implement captcha reset functionality

Browse Source
This commit is contained in:
Thatsaphorn
2025-06-29 17:46:28 +09:00
parent 9e28977e38
commit e7ff00f062
1 changed files with 17 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
frontend/components/Contact/Section/ContactFormSection.tsx
View File

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