diff --git a/app/[locale]/contact/page.tsx b/app/[locale]/contact/page.tsx index 2404abc..5836508 100644 --- a/app/[locale]/contact/page.tsx +++ b/app/[locale]/contact/page.tsx @@ -19,7 +19,8 @@ import { } from '@mui/icons-material' import { useRouter } from 'next/navigation' import { useTranslations, useLocale } from 'next-intl' -import { useState } from 'react' +import { useState, useEffect } from 'react' +import RefreshIcon from '@mui/icons-material/Refresh' export default function Contact() { const theme = useTheme() @@ -33,10 +34,37 @@ export default function Contact() { subject: '', message: '' }) + const [captcha, setCaptcha] = useState<{ + id: string + question: string + answer: string + }>({ id: '', question: '', answer: '' }) + const [captchaError, setCaptchaError] = useState(false) const [isSubmitting, setIsSubmitting] = useState(false) const [showSuccess, setShowSuccess] = useState(false) const [showError, setShowError] = useState(false) + const loadCaptcha = async () => { + try { + const response = await fetch('/api/captcha') + const data = await response.json() + if (data.success) { + setCaptcha({ + id: data.captchaId, + question: data.question, + answer: '' + }) + setCaptchaError(false) + } + } catch (error) { + console.error('Failed to load captcha:', error) + } + } + + useEffect(() => { + loadCaptcha() + }, []) + const handleInputChange = (field: string) => (event: React.ChangeEvent) => { setFormData(prev => ({ ...prev, @@ -44,8 +72,23 @@ export default function Contact() { })) } + const handleCaptchaChange = (event: React.ChangeEvent) => { + setCaptcha(prev => ({ + ...prev, + answer: event.target.value + })) + setCaptchaError(false) + } + const handleSubmit = async (event: React.FormEvent) => { event.preventDefault() + + // Validate captcha answer is provided + if (!captcha.answer.trim()) { + setCaptchaError(true) + return + } + setIsSubmitting(true) try { @@ -54,7 +97,11 @@ export default function Contact() { headers: { 'Content-Type': 'application/json', }, - body: JSON.stringify(formData) + body: JSON.stringify({ + ...formData, + captchaId: captcha.id, + captchaAnswer: captcha.answer + }) }) const data = await response.json() @@ -67,13 +114,19 @@ export default function Contact() { message: '' }) setShowSuccess(true) + // Load new captcha + loadCaptcha() } else { console.error('Contact form error:', data.error) setShowError(true) + // Reload captcha on error + loadCaptcha() } } catch (error) { console.error('Contact form submission error:', error) setShowError(true) + // Reload captcha on error + loadCaptcha() } finally { setIsSubmitting(false) } @@ -171,6 +224,52 @@ export default function Contact() { variant="outlined" /> + {/* Captcha */} + + + + Security Check + + + + + + What is {captcha.question}? + + + + +