updates

Frontend/src/pages/ContactPage.tsx

@@ -5,6 +5,8 @@ import { pageContentService } from '../services/api';
 import type { PageContent } from '../services/api/pageContentService';
 import { useCompanySettings } from '../contexts/CompanySettingsContext';
 import { toast } from 'react-toastify';
+import Recaptcha from '../components/common/Recaptcha';
+import { recaptchaService } from '../services/api/systemSettingsService';
 
 const ContactPage: React.FC = () => {
   const { settings } = useCompanySettings();
@@ -18,6 +20,7 @@ const ContactPage: React.FC = () => {
   });
   const [loading, setLoading] = useState(false);
   const [errors, setErrors] = useState<Record<string, string>>({});
+  const [recaptchaToken, setRecaptchaToken] = useState<string | null>(null);
 
   const validateForm = (): boolean => {
     const newErrors: Record<string, string> = {};
@@ -53,6 +56,22 @@ const ContactPage: React.FC = () => {
       return;
     }
 
+    // Verify reCAPTCHA if enabled
+    if (recaptchaToken) {
+      try {
+        const verifyResponse = await recaptchaService.verifyRecaptcha(recaptchaToken);
+        if (verifyResponse.status === 'error' || !verifyResponse.data.verified) {
+          toast.error('reCAPTCHA verification failed. Please try again.');
+          setRecaptchaToken(null);
+          return;
+        }
+      } catch (error) {
+        toast.error('reCAPTCHA verification failed. Please try again.');
+        setRecaptchaToken(null);
+        return;
+      }
+    }
+
     setLoading(true);
     try {
       await submitContactForm(formData);
@@ -67,9 +86,11 @@ const ContactPage: React.FC = () => {
         message: '',
       });
       setErrors({});
+      setRecaptchaToken(null);
     } catch (error: any) {
       const errorMessage = error?.response?.data?.detail || error?.message || 'Failed to send message. Please try again.';
       toast.error(errorMessage);
+      setRecaptchaToken(null);
     } finally {
       setLoading(false);
     }
@@ -400,6 +421,20 @@ const ContactPage: React.FC = () => {
                     )}
                   </div>
 
+                  {/* reCAPTCHA */}
+                  <div className="pt-2 sm:pt-3">
+                    <Recaptcha
+                      onChange={(token) => setRecaptchaToken(token)}
+                      onError={(error) => {
+                        console.error('reCAPTCHA error:', error);
+                        setRecaptchaToken(null);
+                      }}
+                      theme="dark"
+                      size="normal"
+                      className="flex justify-center"
+                    />
+                  </div>
+
                   {/* Submit Button */}
                   <div className="pt-2 sm:pt-3 md:pt-4">
                     <button