feat: Add hCaptcha for public forms (#4017)

- added hCaptcha based verification for chatwoot signups

Co-authored-by: Sojan <sojan@pepalo.com>

app/javascript/dashboard/api/auth.js

@@ -30,6 +30,7 @@ export default {
           user_full_name: creds.fullName.trim(),
           email: creds.email,
           password: creds.password,
+          h_captcha_client_response: creds.hCaptchaClientResponse,
         })
         .then(response => {
           setAuthCredentials(response);

app/javascript/dashboard/routes/auth/Signup.vue

@@ -75,8 +75,14 @@
             "
             @blur="$v.credentials.confirmPassword.$touch"
           />
+          <div v-if="globalConfig.hCaptchaSiteKey" class="h-captcha--box">
+            <vue-hcaptcha
+              :sitekey="globalConfig.hCaptchaSiteKey"
+              @verify="onRecaptchaVerified"
+            />
+          </div>
           <woot-submit-button
-            :disabled="isSignupInProgress"
+            :disabled="isSignupInProgress || !hasAValidCaptcha"
             :button-text="$t('REGISTER.SUBMIT')"
             :loading="isSignupInProgress"
             button-class="large expanded"
@@ -107,8 +113,11 @@ import { mapGetters } from 'vuex';
 import globalConfigMixin from 'shared/mixins/globalConfigMixin';
 import alertMixin from 'shared/mixins/alertMixin';
 import { DEFAULT_REDIRECT_URL } from '../../constants';
-
+import VueHcaptcha from '@hcaptcha/vue-hcaptcha';
 export default {
+  components: {
+    VueHcaptcha,
+  },
   mixins: [globalConfigMixin, alertMixin],
   data() {
     return {
@@ -118,6 +127,7 @@ export default {
         email: '',
         password: '',
         confirmPassword: '',
+        hCaptchaClientResponse: '',
       },
       isSignupInProgress: false,
       error: '',
@@ -153,9 +163,7 @@ export default {
     },
   },
   computed: {
-    ...mapGetters({
-      globalConfig: 'globalConfig/get',
-    }),
+    ...mapGetters({ globalConfig: 'globalConfig/get' }),
     termsLink() {
       return this.$t('REGISTER.TERMS_ACCEPT')
         .replace('https://www.chatwoot.com/terms', this.globalConfig.termsURL)
@@ -164,6 +172,12 @@ export default {
           this.globalConfig.privacyURL
         );
     },
+    hasAValidCaptcha() {
+      if (this.globalConfig.hCaptchaSiteKey) {
+        return !!this.credentials.hCaptchaClientResponse;
+      }
+      return true;
+    },
   },
   methods: {
     async submit() {
@@ -187,6 +201,9 @@ export default {
         this.isSignupInProgress = false;
       }
     },
+    onRecaptchaVerified(token) {
+      this.credentials.hCaptchaClientResponse = token;
+    },
   },
 };
 </script>
@@ -234,5 +251,9 @@ export default {
     text-align: center;
     margin: var(--space-normal) 0 0 0;
   }
+
+  .h-captcha--box {
+    margin-bottom: var(--space-one);
+  }
 }
 </style>

app/javascript/shared/store/globalConfig.js

@@ -7,6 +7,7 @@ const {
   CREATE_NEW_ACCOUNT_FROM_DASHBOARD: createNewAccountFromDashboard,
   DIRECT_UPLOADS_ENABLED: directUploadsEnabled,
   DISPLAY_MANIFEST: displayManifest,
+  HCAPTCHA_SITE_KEY: hCaptchaSiteKey,
   INSTALLATION_NAME: installationName,
   LOGO_THUMBNAIL: logoThumbnail,
   LOGO: logo,
@@ -24,6 +25,7 @@ const state = {
   createNewAccountFromDashboard,
   directUploadsEnabled: directUploadsEnabled === 'true',
   displayManifest,
+  hCaptchaSiteKey,
   installationName,
   logo,
   logoThumbnail,