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>

api/tests/Feature/Forms/FormCaptchaTest.php

@@ -1,10 +1,11 @@
 <?php
 
-it('create form with captcha and raise validation issue', function () {
+it('create form with hcaptcha and raise validation issue', function () {
     $user = $this->actingAsUser();
     $workspace = $this->createUserWorkspace($user);
     $form = $this->createForm($user, $workspace, [
         'use_captcha' => true,
+        'captcha_provider' => 'hcaptcha',
     ]);
 
     $this->postJson(route('forms.answer', $form->slug), [])
@@ -18,3 +19,23 @@ it('create form with captcha and raise validation issue', function () {
             ],
         ]);
 });
+
+it('create form with recaptcha and raise validation issue', function () {
+    $user = $this->actingAsUser();
+    $workspace = $this->createUserWorkspace($user);
+    $form = $this->createForm($user, $workspace, [
+        'use_captcha' => true,
+        'captcha_provider' => 'recaptcha',
+    ]);
+
+    $this->postJson(route('forms.answer', $form->slug), [])
+        ->assertStatus(422)
+        ->assertJson([
+            'message' => 'Please complete the captcha.',
+            'errors' => [
+                'g-recaptcha-response' => [
+                    'Please complete the captcha.',
+                ],
+            ],
+        ]);
+});

api/tests/Feature/RegisterTest.php

@@ -1,13 +1,13 @@
 <?php
 
 use App\Models\User;
-use App\Rules\ValidHCaptcha;
+use App\Rules\ValidReCaptcha;
 use Illuminate\Support\Facades\Http;
 
 it('can register', function () {
 
     Http::fake([
-        ValidHCaptcha::H_CAPTCHA_VERIFY_URL => Http::response(['success' => true])
+        ValidReCaptcha::RECAPTCHA_VERIFY_URL => Http::response(['success' => true])
     ]);
 
     $this->postJson('/register', [
@@ -17,7 +17,7 @@ it('can register', function () {
         'password' => 'secret',
         'password_confirmation' => 'secret',
         'agree_terms' => true,
-        'h-captcha-response' => 'test-token', // Mock token for testing
+        'g-recaptcha-response' => 'test-token', // Mock token for testing
     ])
         ->assertSuccessful()
         ->assertJsonStructure(['id', 'name', 'email']);
@@ -36,7 +36,7 @@ it('cannot register with existing email', function () {
         'email' => 'test@test.app',
         'password' => 'secret',
         'password_confirmation' => 'secret',
-        'h-captcha-response' => 'test-token',
+        'g-recaptcha-response' => 'test-token',
     ])
         ->assertStatus(422)
         ->assertJsonValidationErrors(['email']);
@@ -44,7 +44,7 @@ it('cannot register with existing email', function () {
 
 it('cannot register with disposable email', function () {
     Http::fake([
-        ValidHCaptcha::H_CAPTCHA_VERIFY_URL => Http::response(['success' => true])
+        ValidReCaptcha::RECAPTCHA_VERIFY_URL => Http::response(['success' => true])
     ]);
 
     // Select random email
@@ -62,7 +62,7 @@ it('cannot register with disposable email', function () {
         'password' => 'secret',
         'password_confirmation' => 'secret',
         'agree_terms' => true,
-        'h-captcha-response' => 'test-token',
+        'g-recaptcha-response' => 'test-token',
     ])
         ->assertStatus(422)
         ->assertJsonValidationErrors(['email'])
@@ -77,10 +77,10 @@ it('cannot register with disposable email', function () {
 });
 
 it('requires hcaptcha token in production', function () {
-    config(['services.h_captcha.secret_key' => 'test-key']);
+    config(['services.re_captcha.secret_key' => 'test-key']);
 
     Http::fake([
-        ValidHCaptcha::H_CAPTCHA_VERIFY_URL => Http::response(['success' => true])
+        ValidReCaptcha::RECAPTCHA_VERIFY_URL => Http::response(['success' => true])
     ]);
 
     $this->postJson('/register', [
@@ -92,5 +92,5 @@ it('requires hcaptcha token in production', function () {
         'agree_terms' => true,
     ])
         ->assertStatus(422)
-        ->assertJsonValidationErrors(['h-captcha-response']);
+        ->assertJsonValidationErrors(['g-recaptcha-response']);
 });