From d2f938803b94d21a46d90ea7ca41454578c7b8f0 Mon Sep 17 00:00:00 2001
From: Julien Nahum <julien@nahum.net>
Date: Thu, 27 Feb 2025 15:00:56 +0800
Subject: [PATCH] Improve Captcha Provider Handling and Availability Checks

- Add conditional rendering for captcha based on site key availability
- Dynamically generate captcha options based on configured providers
- Prevent displaying captcha input when no providers are configured
- Add runtime config checks for captcha site keys
---
 .../forms/components/CaptchaInput.vue         | 11 ++++++++-
 client/components/open/forms/OpenForm.vue     | 17 ++++++++++++-
 .../form-components/FormCustomSeo.vue         |  2 +-
 .../form-components/FormSecurityAccess.vue    | 24 +++++++++++++++----
 4 files changed, 46 insertions(+), 8 deletions(-)

diff --git a/client/components/forms/components/CaptchaInput.vue b/client/components/forms/components/CaptchaInput.vue
index d38647f3..7b2ab978 100644
--- a/client/components/forms/components/CaptchaInput.vue
+++ b/client/components/forms/components/CaptchaInput.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div v-if="showCaptcha">
+    <div v-if="showCaptcha && isSiteKeyAvailable">
       <RecaptchaV2
         v-if="provider === 'recaptcha'"
         :key="`recaptcha-${componentKey}`"
@@ -68,6 +68,15 @@ const componentKey = ref(0)
 
 const formFieldName = computed(() => props.provider === 'recaptcha' ? 'g-recaptcha-response' : 'h-captcha-response')
 
+const isSiteKeyAvailable = computed(() => {
+  if (props.provider === 'recaptcha') {
+    return !!recaptchaSiteKey
+  } else if (props.provider === 'hcaptcha') {
+    return !!hCaptchaSiteKey
+  }
+  return false
+})
+
 // Watch for provider changes to reset the form field
 watch(() => props.provider, async (newProvider, oldProvider) => {
   if (newProvider !== oldProvider) {
diff --git a/client/components/open/forms/OpenForm.vue b/client/components/open/forms/OpenForm.vue
index 29121ed7..59659ab9 100644
--- a/client/components/open/forms/OpenForm.vue
+++ b/client/components/open/forms/OpenForm.vue
@@ -78,7 +78,7 @@
     <!-- Captcha -->
     <div class="mb-3 px-2 mt-4 mx-auto w-max">
       <CaptchaInput
-        v-if="form.use_captcha && isLastPage"
+        v-if="form.use_captcha && isLastPage && hasCaptchaProviders && isCaptchaProviderAvailable"
         ref="captcha"
         :provider="form.captcha_provider"
         :form="dataForm"
@@ -178,6 +178,11 @@ export default {
     const recordsStore = useRecordsStore()
     const workingFormStore = useWorkingFormStore()
     const dataForm = ref(useForm())
+    const config = useRuntimeConfig()
+
+    const hasCaptchaProviders = computed(() => {
+      return config.public.hCaptchaSiteKey || config.public.recaptchaSiteKey
+    })
 
     return {
       dataForm,
@@ -191,6 +196,7 @@ export default {
       // Used for admin previews
       selectedFieldIndex: computed(() => workingFormStore.selectedFieldIndex),
       showEditFieldSidebar: computed(() => workingFormStore.showEditFieldSidebar),
+      hasCaptchaProviders
     }
   },
 
@@ -302,6 +308,15 @@ export default {
       return {
         '--form-color': this.form.color
       }
+    },
+    isCaptchaProviderAvailable() {
+      const config = useRuntimeConfig()
+      if (this.form.captcha_provider === 'recaptcha') {
+        return !!config.public.recaptchaSiteKey
+      } else if (this.form.captcha_provider === 'hcaptcha') {
+        return !!config.public.hCaptchaSiteKey
+      }
+      return false
     }
   },
 
diff --git a/client/components/open/forms/components/form-components/FormCustomSeo.vue b/client/components/open/forms/components/form-components/FormCustomSeo.vue
index 34d320e5..e62205d5 100644
--- a/client/components/open/forms/components/form-components/FormCustomSeo.vue
+++ b/client/components/open/forms/components/form-components/FormCustomSeo.vue
@@ -58,7 +58,7 @@
       </div>
     </template>
 
-    <div class="w-full border-t pt-4">
+    <div class="w-full border-t pt-4 mt-4">
       <h4 class="font-semibold">
         Link Privacy
       </h4>
diff --git a/client/components/open/forms/components/form-components/FormSecurityAccess.vue b/client/components/open/forms/components/form-components/FormSecurityAccess.vue
index 2a5edea3..fd9ad195 100644
--- a/client/components/open/forms/components/form-components/FormSecurityAccess.vue
+++ b/client/components/open/forms/components/form-components/FormSecurityAccess.vue
@@ -72,7 +72,7 @@
     <p class="text-gray-500 text-sm">
       Protect your form, and your sensitive files.
     </p>
-    <div class="flex items-start gap-6 flex-wrap">
+    <div v-if="hasCaptchaProviders" class="flex items-start gap-6 flex-wrap">
       <ToggleSwitchInput
         name="use_captcha"
         :form="form"
@@ -95,9 +95,23 @@
 <script setup>
 const workingFormStore = useWorkingFormStore()
 const { content: form } = storeToRefs(workingFormStore)
+const config = useRuntimeConfig()
 
-const captchaOptions = [
-  { name: 'reCAPTCHA', value: 'recaptcha' },
-  { name: 'hCaptcha', value: 'hcaptcha' },
-]
+const hasCaptchaProviders = computed(() => {
+  return config.public.hCaptchaSiteKey || config.public.recaptchaSiteKey
+})
+
+const captchaOptions = computed(() => {
+  const options = []
+  
+  if (config.public.recaptchaSiteKey) {
+    options.push({ name: 'reCAPTCHA', value: 'recaptcha' })
+  }
+  
+  if (config.public.hCaptchaSiteKey) {
+    options.push({ name: 'hCaptcha', value: 'hcaptcha' })
+  }
+  
+  return options
+})
 </script>