Add reCAPTCHA support and update captcha provider handling

api/.env.example

@@ -72,6 +72,9 @@ STRIPE_TEST_DEFAULT_PRICING_YEARLY=
 H_CAPTCHA_SITE_KEY=
 H_CAPTCHA_SECRET_KEY=
 
+RE_CAPTCHA_SITE_KEY=
+RE_CAPTCHA_SECRET_KEY=
+
 MUX_WORKSPACE_ID=
 MUX_API_TOKEN=
 

api/app/Http/Requests/AnswerFormRequest.php

@@ -8,6 +8,7 @@
 use App\Rules\StorageFile;
 use App\Rules\ValidHCaptcha;
 use App\Rules\ValidPhoneInputRule;
+use App\Rules\ValidReCaptcha;
 use App\Rules\ValidUrl;
 use App\Service\Forms\FormLogicPropertyResolver;
 use Illuminate\Foundation\Http\FormRequest;
@@ -116,9 +117,13 @@ public function rules()
             $this->requestRules[$propertyId] = $rules;
         }
 
-        // Validate hCaptcha
+        // Validate Captcha
         if ($this->form->use_captcha) {
-            $this->requestRules['h-captcha-response'] = [new ValidHCaptcha()];
+            if ($this->form->captcha_provider === 'recaptcha') {
+                $this->requestRules['g-recaptcha-response'] = [new ValidReCaptcha()];
+            } elseif ($this->form->captcha_provider === 'hcaptcha') {
+                $this->requestRules['h-captcha-response'] = [new ValidHCaptcha()];
+            }
         }
 
         // Validate submission_id for edit mode

api/app/Http/Requests/UserFormRequest.php

@@ -118,6 +118,7 @@ public function rules()
             'can_be_indexed' => 'boolean',
             'password' => 'sometimes|nullable',
             'use_captcha' => 'boolean',
+            'captcha_provider' => ['sometimes', Rule::in(['recaptcha', 'hcaptcha'])],
 
             // Custom SEO
             'seo_meta' => 'nullable|array',

api/app/Models/Forms/Form.php

@@ -82,6 +82,7 @@ class Form extends Model implements CachableAttributes
         'submitted_text',
         'redirect_url',
         'use_captcha',
+        'captcha_provider',
         'closes_at',
         'closed_text',
         'max_submissions_count',

api/app/Rules/ValidReCaptcha.php

@@ -0,0 +1,51 @@
+<?php
+
+namespace App\Rules;
+
+use Closure;
+use Illuminate\Contracts\Validation\ImplicitRule;
+use Illuminate\Support\Facades\Http;
+
+class ValidReCaptcha implements ImplicitRule
+{
+    public const RECAPTCHA_VERIFY_URL = 'https://www.google.com/recaptcha/api/siteverify';
+
+    private $error = 'Invalid CAPTCHA. Please prove you\'re not a bot.';
+
+    /**
+     * Determine if the validation rule passes.
+     *
+     * @param  string  $attribute
+     * @param  mixed  $value
+     * @return bool
+     */
+    public function passes($attribute, $value)
+    {
+        if (empty($value)) {
+            $this->error = 'Please complete the captcha.';
+
+            return false;
+        }
+
+        return Http::asForm()->post(self::RECAPTCHA_VERIFY_URL, [
+            'secret' => config('services.re_captcha.secret_key'),
+            'response' => $value,
+        ])->json('success');
+    }
+    public function validate(string $attribute, mixed $value, Closure $fail): void
+    {
+        if (!$this->passes($attribute, $value)) {
+            $fail($this->message());
+        }
+    }
+
+    /**
+     * Get the validation error message.
+     *
+     * @return string
+     */
+    public function message()
+    {
+        return $this->error;
+    }
+}

api/config/services.php

@@ -40,6 +40,11 @@
         'secret_key' => env('H_CAPTCHA_SECRET_KEY'),
     ],
 
+    're_captcha' => [
+        'site_key' => env('RE_CAPTCHA_SITE_KEY'),
+        'secret_key' => env('RE_CAPTCHA_SECRET_KEY'),
+    ],
+
     'canny' => [
         'api_key' => env('CANNY_API_KEY'),
     ],

api/database/migrations/2024_03_21_000000_add_captcha_provider_to_forms_table.php

@@ -0,0 +1,21 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class () extends Migration {
+    public function up()
+    {
+        Schema::table('forms', function (Blueprint $table) {
+            $table->string('captcha_provider')->default('hcaptcha')->after('use_captcha');
+        });
+    }
+
+    public function down()
+    {
+        Schema::table('forms', function (Blueprint $table) {
+            $table->dropColumn('captcha_provider');
+        });
+    }
+};

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 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.',
+                ],
+            ],
+        ]);
+});

client/.env.example

@@ -6,4 +6,5 @@ NUXT_PUBLIC_CRISP_WEBSITE_ID=
 NUXT_PUBLIC_ENV=
 NUXT_PUBLIC_GOOGLE_ANALYTICS_CODE=
 NUXT_PUBLIC_H_CAPTCHA_SITE_KEY=
+NUXT_PUBLIC_RE_CAPTCHA_SITE_KEY=
 NUXT_API_SECRET=secret

client/components/forms/components/CaptchaInput.vue

@@ -0,0 +1,179 @@
+<template>
+  <div>
+    <div v-if="showCaptcha">
+      <RecaptchaV2
+        v-if="provider === 'recaptcha'"
+        :key="`recaptcha-${componentKey}`"
+        ref="captchaRef"
+        :sitekey="recaptchaSiteKey"
+        :theme="darkMode ? 'dark' : 'light'"
+        :language="language"
+        @verify="onCaptchaVerify"
+        @expired="onCaptchaExpired"
+        @opened="onCaptchaOpen"
+        @closed="onCaptchaClose"
+      />
+      <HCaptchaV2
+        v-else
+        :key="`hcaptcha-${componentKey}`"
+        ref="captchaRef"
+        :sitekey="hCaptchaSiteKey"
+        :theme="darkMode ? 'dark' : 'light'"
+        :language="language"
+        @verify="onCaptchaVerify"
+        @expired="onCaptchaExpired"
+        @opened="onCaptchaOpen"
+        @closed="onCaptchaClose"
+      />
+    </div>
+    <has-error
+      :form="form"
+      :field-id="formFieldName"
+    />
+  </div>
+</template>
+
+<script setup>
+import HCaptchaV2 from './HCaptchaV2.vue'
+import RecaptchaV2 from './RecaptchaV2.vue'
+
+const props = defineProps({
+  provider: {
+    type: String,
+    required: true,
+    validator: (value) => ['recaptcha', 'hcaptcha'].includes(value)
+  },
+  form: {
+    type: Object,
+    required: true
+  },
+  language: {
+    type: String,
+    required: true
+  },
+  darkMode: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const config = useRuntimeConfig()
+const recaptchaSiteKey = config.public.recaptchaSiteKey
+const hCaptchaSiteKey = config.public.hCaptchaSiteKey
+
+const captchaRef = ref(null)
+const isIframe = ref(false)
+const showCaptcha = ref(true)
+const componentKey = ref(0)
+
+const formFieldName = computed(() => props.provider === 'recaptcha' ? 'g-recaptcha-response' : 'h-captcha-response')
+
+// Watch for provider changes to reset the form field
+watch(() => props.provider, async (newProvider, oldProvider) => {
+  if (newProvider !== oldProvider) {
+    // Clear old provider's value
+    if (oldProvider === 'recaptcha') {
+      props.form['g-recaptcha-response'] = null
+    } else if (oldProvider === 'hcaptcha') {
+      props.form['h-captcha-response'] = null
+    }
+
+    // Force remount by toggling visibility and incrementing key
+    showCaptcha.value = false
+
+    // Wait longer to ensure complete cleanup
+    await new Promise(resolve => setTimeout(resolve, 1000))
+
+    componentKey.value++
+    await nextTick()
+
+    // Wait again before showing new captcha
+    await new Promise(resolve => setTimeout(resolve, 1000))
+
+    showCaptcha.value = true
+  }
+})
+
+onMounted(() => {
+  isIframe.value = window.self !== window.top
+})
+
+// Add a ref to track if captcha was completed
+const wasCaptchaCompleted = ref(false)
+
+// Handle captcha verification
+const onCaptchaVerify = (token) => {
+  wasCaptchaCompleted.value = true
+  props.form[formFieldName.value] = token
+  // Also set the DOM element value for compatibility with existing code
+  if (import.meta.client) {
+    const element = document.getElementsByName(formFieldName.value)[0]
+    if (element) element.value = token
+  }
+}
+
+// Handle captcha expiration
+const onCaptchaExpired = () => {
+  wasCaptchaCompleted.value = false
+  props.form[formFieldName.value] = null
+  // Also clear the DOM element value for compatibility with existing code
+  if (import.meta.client) {
+    const element = document.getElementsByName(formFieldName.value)[0]
+    if (element) element.value = ''
+  }
+}
+
+// Handle iframe resizing
+const resizeIframe = (height) => {
+  if (!isIframe.value) return
+
+  try {
+    window.parentIFrame?.size(height)
+  } catch (e) {
+    // Silently handle error
+  }
+}
+
+// Handle captcha open/close for iframe resizing
+const onCaptchaOpen = () => {
+  resizeIframe(500)
+  // Ensure the captcha is visible by scrolling to it
+  if (import.meta.client) {
+    nextTick(() => {
+      const captchaElement = captchaRef.value?.$el
+      if (captchaElement) {
+        captchaElement.scrollIntoView({ behavior: 'smooth', block: 'center' })
+      }
+    })
+  }
+}
+
+const onCaptchaClose = () => {
+  resizeIframe(0)
+}
+
+// Method to reset captcha - can be called from parent
+defineExpose({
+  reset: () => {
+    // Only do a full reset if the captcha was previously completed
+    if (captchaRef.value) {
+      if (wasCaptchaCompleted.value) {
+        wasCaptchaCompleted.value = false
+        captchaRef.value.reset()
+      }
+    }
+  }
+})
+</script>
+
+<style>
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.2s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>