Add reCAPTCHA support and update captcha provider handling (#647)

* Add reCAPTCHA support and update captcha provider handling

- Introduced reCAPTCHA as an additional captcha provider alongside hCaptcha.
- Updated form request validation to handle different captcha providers based on user selection.
- Added a new validation rule for reCAPTCHA.
- Modified the forms model to include a 'captcha_provider' field.
- Created a migration to add the 'captcha_provider' column to the forms table.
- Updated frontend components to support dynamic rendering of captcha based on the selected provider.
- Enhanced tests to cover scenarios for both hCaptcha and reCAPTCHA.

These changes improve the flexibility of captcha options available to users, enhancing form security and user experience.

* fix pint

* change comment text

* Refactor captcha implementation and integrate new captcha components

- Removed the old RecaptchaV2 component and replaced it with a new implementation that supports both reCAPTCHA and hCaptcha through a unified CaptchaInput component.
- Updated the OpenForm component to utilize the new CaptchaInput for dynamic captcha rendering based on user-selected provider.
- Cleaned up the package.json by removing the deprecated @hcaptcha/vue3-hcaptcha dependency.
- Enhanced form initialization to set a default captcha provider.
- Improved error handling and cleanup for both reCAPTCHA and hCaptcha scripts.

These changes streamline captcha integration, improve maintainability, and enhance user experience by providing a more flexible captcha solution.

* Refactor captcha error messages and localization support

* Refactor registration process to integrate reCAPTCHA

- Replaced hCaptcha implementation with reCAPTCHA in RegisterController and related test cases.
- Updated validation rules to utilize g-recaptcha-response instead of h-captcha-response.
- Modified RegisterForm component to support reCAPTCHA, including changes to the form data structure and component references.
- Enhanced test cases to reflect the new reCAPTCHA integration, ensuring proper validation and response handling.

These changes improve security and user experience during the registration process by adopting a more widely used captcha solution.

* Fix reCAPTCHA configuration and update RegisterForm styling

- Corrected the configuration key for reCAPTCHA in RegisterController from 'services.recaptcha.secret_key' to 'services.re_captcha.secret_key'.
- Updated the styling of the Captcha input section in RegisterForm.vue to improve layout consistency.

These changes ensure proper reCAPTCHA functionality and enhance the user interface during the registration process.

* Fix reCAPTCHA configuration in RegisterTest to use the correct key format

- Updated the configuration key for reCAPTCHA in RegisterTest from 'services.recaptcha.secret_key' to 'services.re_captcha.secret_key' to ensure proper functionality during tests.

This change aligns the test setup with the recent updates in the reCAPTCHA integration, improving the accuracy of the registration process tests.

---------

Co-authored-by: Julien Nahum <julien@nahum.net>

client/components/open/forms/OpenForm.vue

@@ -76,21 +76,16 @@
     </transition>
 
     <!-- Captcha -->
-    <template v-if="form.use_captcha && isLastPage">
-      <div class="mb-3 px-2 mt-2 mx-auto w-max">
-        <vue-hcaptcha
-          ref="hcaptcha"
-          :sitekey="hCaptchaSiteKey"
-          :theme="darkMode?'dark':'light'"
-          @opened="setMinHeight(500)"
-          @closed="setMinHeight(0)"
-        />
-        <has-error
-          :form="dataForm"
-          field-id="h-captcha-response"
-        />
-      </div>
-    </template>
+    <div class="mb-3 px-2 mt-4 mx-auto w-max">
+      <CaptchaInput
+        v-if="form.use_captcha && isLastPage"
+        ref="captcha"
+        :provider="form.captcha_provider"
+        :form="dataForm"
+        :language="form.language"
+        :dark-mode="darkMode"
+      />
+    </div>
 
     <!--  Submit, Next and previous buttons  -->
     <div class="flex flex-wrap justify-center w-full">
@@ -132,7 +127,7 @@
 import clonedeep from 'clone-deep'
 import draggable from 'vuedraggable'
 import OpenFormButton from './OpenFormButton.vue'
-import VueHcaptcha from "@hcaptcha/vue3-hcaptcha"
+import CaptchaInput from '~/components/forms/components/CaptchaInput.vue'
 import OpenFormField from './OpenFormField.vue'
 import {pendingSubmission} from "~/composables/forms/pendingSubmission.js"
 import FormLogicPropertyResolver from "~/lib/forms/FormLogicPropertyResolver.js"
@@ -143,7 +138,7 @@ import { storeToRefs } from 'pinia'
 
 export default {
   name: 'OpenForm',
-  components: {draggable, OpenFormField, OpenFormButton, VueHcaptcha, FormTimer},
+  components: {draggable, OpenFormField, OpenFormButton, CaptchaInput, FormTimer},
   props: {
     form: {
       type: Object,
@@ -206,14 +201,10 @@ export default {
        * Used to force refresh components by changing their keys
        */
       isAutoSubmit: false,
-      minHeight: 0
     }
   },
 
   computed: {
-    hCaptchaSiteKey() {
-      return useRuntimeConfig().public.hCaptchaSiteKey
-    },
     /**
      * Create field groups (or Page) using page breaks if any
      */
@@ -309,7 +300,6 @@ export default {
     },
     computedStyle() {
       return {
-        ...this.minHeight ? {minHeight: this.minHeight + 'px'} : {},
         '--form-color': this.form.color
       }
     }
@@ -369,8 +359,7 @@ export default {
       if (!this.isAutoSubmit && this.formPageIndex !== this.fieldGroups.length - 1) return
 
       if (this.form.use_captcha && import.meta.client) {
-        this.dataForm['h-captcha-response'] = document.getElementsByName('h-captcha-response')[0].value
-        this.$refs.hcaptcha.reset()
+        this.$refs.captcha?.reset()
       }
 
       if (this.form.editable_submissions && this.form.submission_id) {
@@ -584,16 +573,6 @@ export default {
       }
       this.formPageIndex = this.fieldGroups.length - 1
     },
-    setMinHeight(minHeight) {
-      if (!this.isIframe) return
-
-      this.minHeight = minHeight
-      try {
-        window.parentIFrame.size()
-      } catch (e) {
-        console.error(e)
-      }
-    }
   }
 }
 </script>

client/components/open/forms/components/form-components/FormSecurityAccess.vue

@@ -72,29 +72,32 @@
     <p class="text-gray-500 text-sm">
       Protect your form, and your sensitive files.
     </p>
-    <ToggleSwitchInput
-      name="use_captcha"
-      :form="form"
-      class="mt-4"
-      label="Bot Protection"
-      help="Protects your form from spam and abuse with a captcha"
-    />
+    <div class="flex items-start gap-6 flex-wrap">
+      <ToggleSwitchInput
+        name="use_captcha"
+        :form="form"
+        class="mt-4"
+        label="Bot Protection"
+        help="Protects your form from spam and abuse with a captcha"
+      />
+      <FlatSelectInput
+        v-if="form.use_captcha"
+        name="captcha_provider"
+        :form="form"
+        :options="captchaOptions"
+        class="mt-4 w-80"
+        label="Select a captcha provider"
+      />
+    </div>
   </SettingsSection>
 </template>
 
-<script>
-import { useWorkingFormStore } from '../../../../../stores/working_form'
+<script setup>
+const workingFormStore = useWorkingFormStore()
+const { content: form } = storeToRefs(workingFormStore)
 
-export default {
-  components: { },
-  props: {},
-  setup () {
-    const workingFormStore = useWorkingFormStore()
-    return {
-      workingFormStore,
-      form: storeToRefs(workingFormStore).content,
-      crisp: useCrisp()
-    }
-  }
-}
+const captchaOptions = [
+  { name: 'reCAPTCHA', value: 'recaptcha' },
+  { name: 'hCaptcha', value: 'hcaptcha' },
+]
 </script>