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

Replace hCaptcha with Google reCAPTCHA in contact page

Browse Source
This commit is contained in:
Thatsaphorn
2025-06-29 00:48:46 +00:00
parent 5509927fd0
commit 6e2dbde3f9
4 changed files with 124 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -2,7 +2,8 @@
import React, {useState} from 'react'
import {motion} from 'framer-motion'
// import HCaptcha from '@hcaptcha/react-hcaptcha'
import {Button} from '@/components/ui/button'
import ReCAPTCHA from 'react-google-recaptcha'
const ContactFormSection = () => {
const [form, setForm] = useState({
@@ -30,6 +31,12 @@ const ContactFormSection = () => {
setLoading(true)
setError('')
if (!captchaToken) {
setError('Bitte bestätige, dass du kein Roboter bist.')
setLoading(false)
return
}
const res = await fetch('/api/contact', {
method: 'POST',
headers: {'Content-Type': 'application/json'},
@@ -38,10 +45,21 @@ const ContactFormSection = () => {
if (res.ok) {
setSubmitted(true)
setForm({name: '', email: '', company: '', phone: '', website: '', message: ''})
setForm({
name: '',
email: '',
company: '',
phone: '',
website: '',
message: '',
})
setCaptchaToken('')
} else {
const resJson = await res.json()
setError(resJson?.error || 'Ein Fehler ist aufgetreten. Bitte versuche es später erneut.')
setError(
resJson?.error ||
'Ein Fehler ist aufgetreten. Bitte versuche es später erneut.'
)
}
setLoading(false)
@@ -142,7 +160,9 @@ const ContactFormSection = () => {
viewport={{once: true}}
transition={{duration: 0.5, delay: 0.6}}
>
<label className="block font-semibold mb-1 text-foreground">Deine Nachricht *</label>
<label className="block font-semibold mb-1 text-foreground">
Deine Nachricht *
</label>
<textarea
name="message"
rows={4}
@@ -154,17 +174,18 @@ const ContactFormSection = () => {
/>
</motion.div>
{/*
<motion.div
className="pt-2"
initial={{ opacity: 0, y: 10 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.5, delay: 0.7 }}
>
<HCaptcha sitekey={hCaptchaSiteKey} onVerify={setCaptchaToken} />
</motion.div>
*/}
<motion.div
className="pt-2"
initial={{opacity: 0, y: 10}}
whileInView={{opacity: 1, y: 0}}
viewport={{once: true}}
transition={{duration: 0.5, delay: 0.7}}
>
<ReCAPTCHA
sitekey={process.env.NEXT_PUBLIC_RECAPTCHA_SITE_KEY!}
onChange={(token) => setCaptchaToken(token || '')}
/>
</motion.div>
{error && (
<div className="text-red-600 font-medium pt-2">
@@ -179,13 +200,9 @@ const ContactFormSection = () => {
viewport={{once: true}}
transition={{duration: 0.5, delay: 0.8}}
>
<button
type="submit"
disabled={loading}
className="px-6 py-3 bg-primary text-white text-sm sm:text-base font-semibold rounded-md shadow hover:bg-primary/90 transition-all disabled:opacity-50"
>
<Button type="submit" disabled={loading} size="lg">
{loading ? 'Sende...' : '📩 Nachricht senden'}
</button>
</Button>
</motion.div>
</form>
)}