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/pages/auth/components/RegisterForm.vue

@@ -52,18 +52,16 @@
         label="Confirm Password"
       />
 
-      <!-- hCaptcha -->
+      <!-- Captcha -->
       <div
-        v-if="hCaptchaSiteKey"
-        class="mb-3 px-2 mt-2 mx-auto w-max"
+        v-if="recaptchaSiteKey"
+        class="my-4 px-2 mx-auto w-max"
       >
-        <vue-hcaptcha
-          ref="hcaptcha"
-          :sitekey="hCaptchaSiteKey"
-        />
-        <has-error
+        <CaptchaInput
+          ref="captcha"
+          provider="recaptcha"
           :form="form"
-          field-id="h-captcha-response"
+          language="en"
         />
       </div>
 
@@ -141,11 +139,10 @@
 <script>
 import {opnFetch} from "~/composables/useOpnApi.js"
 import { fetchAllWorkspaces } from "~/stores/workspaces.js"
-import VueHcaptcha from '@hcaptcha/vue3-hcaptcha'
 
 export default {
   name: "RegisterForm",
-  components: {VueHcaptcha},
+  components: {},
   props: {
     isQuick: {
       type: Boolean,
@@ -177,15 +174,14 @@ export default {
       agree_terms: false,
       appsumo_license: null,
       utm_data: null,
-      'h-captcha-response': null
+      'g-recaptcha-response': null
     }),
     disableEmail: false,
-    hcaptcha: null
   }),
 
   computed: {
-    hCaptchaSiteKey() {
-      return this.runtimeConfig.public.hCaptchaSiteKey
+    recaptchaSiteKey() {
+      return this.runtimeConfig.public.recaptchaSiteKey
     },
     hearAboutUsOptions() {
       const options = [
@@ -209,10 +205,6 @@ export default {
   },
 
   mounted() {
-    if (this.hCaptchaSiteKey) {
-      this.hcaptcha = this.$refs.hcaptcha
-    }
-
     // Set appsumo license
     if (
       this.$route.query.appsumo_license !== undefined &&
@@ -234,9 +226,9 @@ export default {
     async register() {
       let data
       this.form.utm_data = this.$utm.value
-      if (this.hCaptchaSiteKey) {
-        this.form['h-captcha-response'] = document.getElementsByName('h-captcha-response')[0].value
-        this.hcaptcha.reset()
+      // Reset captcha after submission
+      if (import.meta.client && this.recaptchaSiteKey) {
+        this.$refs.captcha.reset()
       }
       try {
         // Register the user.