feat: add ReCaptchaV2 & Turnstile

src/components/CAPTCHA.vue

@@ -0,0 +1,109 @@
+<script setup>
+import { defineEmits, defineExpose, defineProps, watch, ref, onMounted } from 'vue';
+
+import VueHcaptcha from '@hcaptcha/vue3-hcaptcha';
+import { RecaptchaV2, useRecaptcha } from "vue3-recaptcha-v2";
+import VueTurnstile from 'vue-turnstile';
+
+const { handleReset: handleRecaptchaReset } = useRecaptcha();
+
+const props = defineProps({
+  isVertical: {
+    type: Boolean,
+    default: false,
+  },
+  hcaptchaSitekey: {
+    type: String,
+    required: true,
+  },
+  recaptchaSitekey: {
+    type: String,
+    required: true,
+  },
+  turnstileSitekey: {
+    type: String,
+    required: true,
+  },
+});
+const emit = defineEmits(['captchaVerified']);
+
+const hcaptchaResponse = ref('');
+const recaptchaResponse = ref('');
+const turnstileToken = ref('');
+
+const hcaptchaRef = ref(null);
+const recaptchaWidgetId = ref('');
+const turnstileRef = ref(null);
+
+const handleHcaptchaVerify = (token) => {
+  hcaptchaResponse.value = token;
+};
+
+const handleHcaptchaExpired = () => {
+  hcaptchaResponse.value = '';
+};
+
+const handleRecaptchaLoad = (response) => {
+  recaptchaResponse.value = response;
+}
+
+const handleRecaptchaExpired = () => {
+  recaptchaResponse.value = '';
+};
+
+const handleWidgetId = (widgetId) => {
+  recaptchaWidgetId.value = widgetId;
+};
+
+watch(
+  () => [hcaptchaResponse.value, recaptchaResponse.value, turnstileToken.value],
+  ([hcaptcha, recaptcha, turnstile]) => {
+    if (hcaptcha && recaptcha && turnstile) {
+      // All tokens are available
+      emit('captchaVerified', {
+        hCaptchaResponse: hcaptcha,
+        recaptchaResponse: recaptcha,
+        turnstileResponse: turnstile
+      });
+    }
+  }
+);
+
+const reset = () => {
+  hcaptchaRef.value?.reset();
+  if (recaptchaWidgetId.value) handleRecaptchaReset(recaptchaWidgetId.value);
+  turnstileRef.value?.reset();
+};
+
+defineExpose({
+  reset,
+});
+
+onMounted(() => {
+  console.log(props);
+});
+</script>
+
+<template>
+  <div class="ts-content is-horizontally-fitted">
+    <div class="ts-wrap is-center-aligned is-middle-aligned" :class="{ 'is-vertical': props.isVertical }">
+      <VueHcaptcha
+        ref="hcaptchaRef"
+        :sitekey="props.hcaptchaSitekey"
+        @verify="handleHcaptchaVerify"
+        @expired="handleHcaptchaExpired"
+        @reset="handleHcaptchaExpired"
+        :reCaptchaCompat="false"
+        :theme="$darkMode ? 'dark' : 'light'"
+      />
+      <RecaptchaV2
+        :sitekey="props.recaptchaSitekey"
+        @widgetId="handleWidgetId"
+        @expired-callback="handleRecaptchaExpired"
+        @load-callback="handleRecaptchaLoad"
+        :theme="$darkMode ? 'dark' : 'light'"
+      />
+      <VueTurnstile :site-key="props.turnstileSitekey" ref="turnstileRef" v-model="turnstileToken" />
+    </div>
+  </div>
+</template>