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/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> 

client/components/forms/components/HCaptchaV2.vue

@@ -0,0 +1,186 @@
+<template>
+  <div class="hcaptcha-container">
+    <div ref="hcaptchaContainer" />
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  sitekey: {
+    type: String,
+    required: true
+  },
+  theme: {
+    type: String,
+    default: 'light'
+  },
+  language: {
+    type: String,
+    default: 'en'
+  }
+})
+
+const emit = defineEmits(['verify', 'expired', 'opened', 'closed'])
+const hcaptchaContainer = ref(null)
+let widgetId = null
+
+// Global script loading state
+const SCRIPT_ID = 'hcaptcha-script'
+let scriptLoadPromise = null
+
+// Add this cleanup function at the script level
+const cleanupHcaptcha = () => {
+  // Remove all hCaptcha iframes
+  document.querySelectorAll('iframe[src*="hcaptcha.com"]').forEach(iframe => {
+    iframe.remove()
+  })
+
+  // Remove all hCaptcha scripts
+  document.querySelectorAll('script[src*="hcaptcha.com"]').forEach(script => {
+    script.remove()
+  })
+
+  // Remove specific script
+  const script = document.getElementById(SCRIPT_ID)
+  if (script) {
+    script.remove()
+  }
+
+  // Remove hCaptcha styles
+  document.querySelectorAll('style[data-emotion]').forEach(style => {
+    style.remove()
+  })
+
+  // Clean up global variables
+  if (window.hcaptcha) {
+    delete window.hcaptcha
+  }
+
+  // Clean up any potential callbacks
+  Object.keys(window).forEach(key => {
+    if (key.startsWith('hcaptchaOnLoad_')) {
+      delete window[key]
+    }
+  })
+
+  scriptLoadPromise = null
+}
+
+const loadHcaptchaScript = () => {
+  if (scriptLoadPromise) return scriptLoadPromise
+
+  // Clean up before loading new script
+  cleanupHcaptcha()
+
+  scriptLoadPromise = new Promise((resolve, reject) => {
+    // If hcaptcha is already available and ready, use it
+    if (window.hcaptcha?.render) {
+      resolve(window.hcaptcha)
+      return
+    }
+
+    // Create a unique callback name
+    const callbackName = `hcaptchaOnLoad_${Date.now()}`
+
+    // Create the script
+    const script = document.createElement('script')
+    script.id = SCRIPT_ID
+    script.src = `https://js.hcaptcha.com/1/api.js?render=explicit&onload=${callbackName}&recaptchacompat=off`
+    script.async = true
+    script.defer = true
+
+    let timeoutId = null
+
+    // Set up the callback before adding the script
+    window[callbackName] = () => {
+      if (timeoutId) clearTimeout(timeoutId)
+      if (window.hcaptcha?.render) {
+        resolve(window.hcaptcha)
+        delete window[callbackName]
+      } else {
+        reject(new Error('hCaptcha failed to initialize'))
+      }
+    }
+
+    script.onerror = (error) => {
+      if (timeoutId) clearTimeout(timeoutId)
+      delete window[callbackName]
+      scriptLoadPromise = null
+      reject(error)
+    }
+
+    timeoutId = setTimeout(() => {
+      delete window[callbackName]
+      scriptLoadPromise = null
+      reject(new Error('hCaptcha script load timeout'))
+    }, 10000)
+
+    document.head.appendChild(script)
+  })
+
+  return scriptLoadPromise
+}
+
+const renderHcaptcha = async () => {
+  try {
+    // Clear any existing content first
+    if (hcaptchaContainer.value) {
+      hcaptchaContainer.value.innerHTML = ''
+    }
+
+    const hcaptcha = await loadHcaptchaScript()
+    
+    // Double check container still exists after async operation
+    if (!hcaptchaContainer.value) return
+
+    // Render new widget
+    widgetId = hcaptcha.render(hcaptchaContainer.value, {
+      sitekey: props.sitekey,
+      theme: props.theme,
+      hl: props.language,
+      'callback': (token) => emit('verify', token),
+      'expired-callback': () => emit('expired'),
+      'error-callback': () => {
+        if (widgetId !== null) {
+          hcaptcha.reset(widgetId)
+        }
+      },
+      'open-callback': () => emit('opened'),
+      'close-callback': () => emit('closed')
+    })
+  } catch (error) {
+    scriptLoadPromise = null // Reset promise on error
+  }
+}
+
+onMounted(() => {
+  renderHcaptcha()
+})
+
+onBeforeUnmount(() => {
+  // Clean up widget and reset state
+  if (window.hcaptcha && widgetId !== null) {
+    try {
+      window.hcaptcha.remove(widgetId)
+    } catch (e) {
+      // Silently handle error
+    }
+  }
+  
+  cleanupHcaptcha()
+  
+  if (hcaptchaContainer.value) {
+    hcaptchaContainer.value.innerHTML = ''
+  }
+  
+  widgetId = null
+})
+
+// Expose reset method that properly reloads the captcha
+defineExpose({
+  reset: async () => {
+    cleanupHcaptcha()
+    await renderHcaptcha()
+  }
+})
+</script> 

client/components/forms/components/RecaptchaV2.vue

@@ -0,0 +1,179 @@
+<template>
+  <div class="recaptcha-container">
+    <div ref="recaptchaContainer" />
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  sitekey: {
+    type: String,
+    required: true
+  },
+  theme: {
+    type: String,
+    default: 'light'
+  },
+  language: {
+    type: String,
+    default: 'en'
+  }
+})
+
+const emit = defineEmits(['verify', 'expired', 'opened', 'closed'])
+const recaptchaContainer = ref(null)
+let widgetId = null
+
+// Global script loading state
+const SCRIPT_ID = 'recaptcha-script'
+let scriptLoadPromise = null
+
+// Add cleanup function similar to hCaptcha
+const cleanupRecaptcha = () => {
+  // Remove all reCAPTCHA iframes
+  document.querySelectorAll('iframe[src*="google.com/recaptcha"]').forEach(iframe => {
+    iframe.remove()
+  })
+
+  // Remove all reCAPTCHA scripts
+  document.querySelectorAll('script[src*="google.com/recaptcha"]').forEach(script => {
+    script.remove()
+  })
+
+  // Remove specific script
+  const script = document.getElementById(SCRIPT_ID)
+  if (script) {
+    script.remove()
+  }
+
+  // Clean up global variables
+  if (window.grecaptcha) {
+    delete window.grecaptcha
+  }
+
+  scriptLoadPromise = null
+}
+
+const loadRecaptchaScript = () => {
+  if (scriptLoadPromise) return scriptLoadPromise
+
+  // Clean up before loading new script
+  cleanupRecaptcha()
+
+  scriptLoadPromise = new Promise((resolve, reject) => {
+    // If grecaptcha is already available and ready, use it
+    if (window.grecaptcha?.render) {
+      resolve(window.grecaptcha)
+      return
+    }
+
+    const script = document.createElement('script')
+    script.id = SCRIPT_ID
+    script.src = 'https://www.google.com/recaptcha/api.js?render=explicit'
+    script.async = true
+    script.defer = true
+
+    let timeoutId = null
+
+    script.onload = () => {
+      const checkGrecaptcha = () => {
+        if (window.grecaptcha?.render) {
+          if (timeoutId) clearTimeout(timeoutId)
+          resolve(window.grecaptcha)
+        } else {
+          setTimeout(checkGrecaptcha, 100)
+        }
+      }
+      checkGrecaptcha()
+    }
+
+    script.onerror = (error) => {
+      if (timeoutId) clearTimeout(timeoutId)
+      scriptLoadPromise = null
+      reject(error)
+    }
+
+    timeoutId = setTimeout(() => {
+      scriptLoadPromise = null
+      reject(new Error('reCAPTCHA script load timeout'))
+    }, 10000)
+
+    document.head.appendChild(script)
+  })
+
+  return scriptLoadPromise
+}
+
+const renderRecaptcha = async () => {
+  try {
+    // Clear any existing content first
+    if (recaptchaContainer.value) {
+      recaptchaContainer.value.innerHTML = ''
+    }
+
+    const grecaptcha = await loadRecaptchaScript()
+    
+    // Double check container still exists after async operation
+    if (!recaptchaContainer.value) return
+
+    // Render new widget
+    widgetId = grecaptcha.render(recaptchaContainer.value, {
+      sitekey: props.sitekey,
+      theme: props.theme,
+      hl: props.language,
+      callback: (token) => emit('verify', token),
+      'expired-callback': () => emit('expired'),
+      'error-callback': () => {
+        if (widgetId !== null) {
+          grecaptcha.reset(widgetId)
+        }
+      }
+    })
+  } catch (error) {
+    scriptLoadPromise = null // Reset promise on error
+  }
+}
+
+onMounted(() => {
+  renderRecaptcha()
+})
+
+onBeforeUnmount(() => {
+  // Clean up widget and reset state
+  if (window.grecaptcha && widgetId !== null) {
+    try {
+      window.grecaptcha.reset(widgetId)
+    } catch (e) {
+      // Silently handle error
+    }
+  }
+  
+  cleanupRecaptcha()
+  
+  if (recaptchaContainer.value) {
+    recaptchaContainer.value.innerHTML = ''
+  }
+  
+  widgetId = null
+})
+
+// Expose reset method that properly reloads the captcha
+defineExpose({
+  reset: async () => {
+    if (window.grecaptcha && widgetId !== null) {
+      try {
+        // Try simple reset first
+        window.grecaptcha.reset(widgetId)
+      } catch (e) {
+        // If simple reset fails, do a full cleanup and reload
+        cleanupRecaptcha()
+        await renderRecaptcha()
+      }
+    } else {
+      // If no widget exists, do a full reload
+      cleanupRecaptcha()
+      await renderRecaptcha()
+    }
+  }
+})
+</script>

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>

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.