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>
)}

47
frontend/package-lock.json generated
View File

@@ -25,6 +25,7 @@
"prop-types": "^15.8.1",
"react": "^19.0.0",
"react-dom": "^19.0.0",
"react-google-recaptcha": "^3.1.0",
"react-icons": "^5.4.0",
"react-scroll": "^1.9.3",
"react-simple-typewriter": "^5.0.1",
@@ -43,6 +44,7 @@
"@types/nodemailer": "^6.4.17",
"@types/react": "^19",
"@types/react-dom": "^19",
"@types/react-google-recaptcha": "^2.1.9",
"@types/react-scroll": "^1.8.10",
"@types/react-vertical-timeline-component": "^3.3.6",
"autoprefixer": "^10.4.21",
@@ -2104,6 +2106,16 @@
"@types/react": "^19.0.0"
}
},
"node_modules/@types/react-google-recaptcha": {
"version": "2.1.9",
"resolved": "https://registry.npmjs.org/@types/react-google-recaptcha/-/react-google-recaptcha-2.1.9.tgz",
"integrity": "sha512-nT31LrBDuoSZJN4QuwtQSF3O89FVHC4jLhM+NtKEmVF5R1e8OY0Jo4//x2Yapn2aNHguwgX5doAq8Zo+Ehd0ug==",
"dev": true,
"license": "MIT",
"dependencies": {
"@types/react": "*"
}
},
"node_modules/@types/react-scroll": {
"version": "1.8.10",
"resolved": "https://registry.npmjs.org/@types/react-scroll/-/react-scroll-1.8.10.tgz",
@@ -4715,6 +4727,15 @@
"node": ">= 0.4"
}
},
"node_modules/hoist-non-react-statics": {
"version": "3.3.2",
"resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
"integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
"license": "BSD-3-Clause",
"dependencies": {
"react-is": "^16.7.0"
}
},
"node_modules/ignore": {
"version": "5.3.2",
"resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
@@ -6433,6 +6454,19 @@
"node": ">=0.10.0"
}
},
"node_modules/react-async-script": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/react-async-script/-/react-async-script-1.2.0.tgz",
"integrity": "sha512-bCpkbm9JiAuMGhkqoAiC0lLkb40DJ0HOEJIku+9JDjxX3Rcs+ztEOG13wbrOskt3n2DTrjshhaQ/iay+SnGg5Q==",
"license": "MIT",
"dependencies": {
"hoist-non-react-statics": "^3.3.0",
"prop-types": "^15.5.0"
},
"peerDependencies": {
"react": ">=16.4.1"
}
},
"node_modules/react-dom": {
"version": "19.1.0",
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.1.0.tgz",
@@ -6445,6 +6479,19 @@
"react": "^19.1.0"
}
},
"node_modules/react-google-recaptcha": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/react-google-recaptcha/-/react-google-recaptcha-3.1.0.tgz",
"integrity": "sha512-cYW2/DWas8nEKZGD7SCu9BSuVz8iOcOLHChHyi7upUuVhkpkhYG/6N3KDiTQ3XAiZ2UAZkfvYKMfAHOzBOcGEg==",
"license": "MIT",
"dependencies": {
"prop-types": "^15.5.0",
"react-async-script": "^1.2.0"
},
"peerDependencies": {
"react": ">=16.4.1"
}
},
"node_modules/react-icons": {
"version": "5.5.0",
"resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.5.0.tgz",

2
frontend/package.json
View File

@@ -26,6 +26,7 @@
"prop-types": "^15.8.1",
"react": "^19.0.0",
"react-dom": "^19.0.0",
"react-google-recaptcha": "^3.1.0",
"react-icons": "^5.4.0",
"react-scroll": "^1.9.3",
"react-simple-typewriter": "^5.0.1",
@@ -44,6 +45,7 @@
"@types/nodemailer": "^6.4.17",
"@types/react": "^19",
"@types/react-dom": "^19",
"@types/react-google-recaptcha": "^2.1.9",
"@types/react-scroll": "^1.8.10",
"@types/react-vertical-timeline-component": "^3.3.6",
"autoprefixer": "^10.4.21",