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.

api/app/Http/Controllers/Auth/RegisterController.php

@@ -12,7 +12,7 @@
 use Illuminate\Http\Request;
 use Illuminate\Support\Facades\Validator;
 use Illuminate\Validation\Rule;
-use App\Rules\ValidHCaptcha;
+use App\Rules\ValidReCaptcha;
 
 class RegisterController extends Controller
 {
@@ -71,8 +71,8 @@ protected function validator(array $data)
             'utm_data' => ['nullable', 'array'],
         ];
 
-        if (config('services.h_captcha.secret_key')) {
-            $rules['h-captcha-response'] = [new ValidHCaptcha()];
+        if (config('services.recaptcha.secret_key')) {
+            $rules['g-recaptcha-response'] = [new ValidReCaptcha()];
         }
 
         return Validator::make($data, $rules, [

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 @@
         '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,15 +36,15 @@
         'email' => '[email protected]',
         'password' => 'secret',
         'password_confirmation' => 'secret',
-        'h-captcha-response' => 'test-token',
+        'g-recaptcha-response' => 'test-token',
     ])
         ->assertStatus(422)
         ->assertJsonValidationErrors(['email']);
 });
 
 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 @@
         '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('requires hcaptcha token in production', function () {
-    config(['services.h_captcha.secret_key' => 'test-key']);
+    config(['services.recaptcha.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 @@
         'agree_terms' => true,
     ])
         ->assertStatus(422)
-        ->assertJsonValidationErrors(['h-captcha-response']);
+        ->assertJsonValidationErrors(['g-recaptcha-response']);
 });

client/components/pages/auth/components/RegisterForm.vue

@@ -52,18 +52,16 @@
         label="Confirm Password"
       />
 
-      <!-- hCaptcha -->
+      <!-- Captcha -->
       <div
-        v-if="hCaptchaSiteKey"
+        v-if="recaptchaSiteKey"
         class="mb-3 px-2 mt-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.