feat: add ReCaptchaV2 & Turnstile

src/components/Board/BoardForm.vue

@@ -1,36 +1,32 @@
 <script setup>
-import { ref, computed } from 'vue';
-import VueHcaptcha from '@hcaptcha/vue3-hcaptcha';
+import { ref, computed, watch } from 'vue';
+import CAPTCHA from '../CAPTCHA.vue';
 
 const emit = defineEmits(['new-message']);
 const props = defineProps(['locked']);
 
 const text = ref('');
-const hcaptchaResponse = ref('');
+const captchaResponse = ref(null);
+const captchaVerified = computed(() => {
+  return captchaResponse.value !== null;
+});
 const maxLength = 200;
 
-const hcaptchaRef = ref(null);
-
-const handleHcaptchaVerify = (token) => {
-  hcaptchaResponse.value = token;
-};
-
-const handleHcaptchaExpired = () => {
-  hcaptchaResponse.value = '';
-};
-
 const remainingCharacters = computed(() => {
   return maxLength - text.value.length;
 });
 
+const handleCaptchaVerified = (response) => {
+  captchaResponse.value = response;
+};
+
 function submit() {
-  if (!text.value || props.locked || !hcaptchaResponse.value) {
+  if (!text.value || props.locked || !captchaVerified) {
     return;
   }
 
-  emit('new-message', { text: text.value, hcaptchaResponse: hcaptchaResponse.value });
+  emit('new-message', { text: text.value, captchaResponse: captchaResponse.value });
   text.value = '';
-  hcaptchaRef.value.reset();
 }
 </script>
 
@@ -52,15 +48,14 @@ function submit() {
           </div>
         </div>
       </div>
-      <VueHcaptcha
-        ref="hcaptchaRef"
-        :sitekey="$hcaptchaSitekey"
-        @verify="handleHcaptchaVerify"
-        @expired="handleHcaptchaExpired"
-        @reset="handleHcaptchaExpired"
+      <CAPTCHA
+        :hcaptchaSitekey="$hcaptchaSitekey"
+        :recaptchaSitekey="$recaptchaSitekey"
+        :turnstileSitekey="$turnstileSitekey"
+        @captchaVerified="handleCaptchaVerified"
       />
       <div class="ts-wrap has-top-spaced is-end-aligned">
-        <button class="ts-button" type="submit" :class="{'is-disabled': text === '' || props.locked || !hcaptchaResponse.value }">送出</button>
+        <button class="ts-button" type="submit" :class="{'is-disabled': text === '' || props.locked || !captchaVerified }">送出</button>
       </div>
     </fieldset>
   </form>

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>

src/components/Login/LoginForm.vue

@@ -1,26 +1,20 @@
 <script setup>
-import { ref, watch } from 'vue';
-import VueHcaptcha from '@hcaptcha/vue3-hcaptcha';
+import { ref, watch, computed } from 'vue';
+import CAPTCHA from '../CAPTCHA.vue';
 
 const emit = defineEmits(['login-submit']);
 
 const username = ref('');
 const password = ref('');
-const hcaptchaResponse = ref('');
+const captchaResponse = ref(null);
 
-const hcaptchaRef = ref(null);
+const captchaVerified = computed(() => {
+  return captchaResponse.value !== null;
+});
 
 const usernameError = ref('');
 const passwordError = ref('');
 
-const handleHcaptchaVerify = (token) => {
-  hcaptchaResponse.value = token;
-};
-
-const handleHcaptchaExpired = () => {
-  hcaptchaResponse.value = '';
-};
-
 function validateUsername() {
   if (!username.value) {
     usernameError.value = '使用者名稱為必填。';
@@ -55,16 +49,19 @@ watch(
   }
 );
 
+const handleCaptchaVerified = (response) => {
+  captchaResponse.value = response;
+};
+
 const submit = () => {
   validateUsername();
   validatePassword();
 
-  if (usernameError.value || passwordError.value || !hcaptchaResponse.value) {
+  if (usernameError.value || passwordError.value || !captchaVerified) {
     return;
   }
 
-  emit('login-submit', { username: username.value, password: password.value, hcaptchaResponse: hcaptchaResponse.value });
-  hcaptchaRef.value.reset();
+  emit('login-submit', { username: username.value, password: password.value, captchaResponse: captchaResponse.value });
 }
 </script>
 
@@ -92,16 +89,15 @@ const submit = () => {
           </div>
         </div>
       </div>
-      <VueHcaptcha
-        ref="hcaptchaRef"
-        :sitekey="$hcaptchaSitekey"
-        @verify="handleHcaptchaVerify"
-        @expired="handleHcaptchaExpired"
-        @reset="handleHcaptchaExpired"
+      <CAPTCHA
+        :hcaptchaSitekey="$hcaptchaSitekey"
+        :recaptchaSitekey="$recaptchaSitekey"
+        :turnstileSitekey="$turnstileSitekey"
+        @captchaVerified="handleCaptchaVerified"
       />
       <div class="ts-wrap has-top-spaced is-end-aligned">
         <button class="ts-button is-fluid" type="submit" :class="{
-          'is-disabled': username === '' || password === '' || usernameError !== '' || passwordError !== '' || !hcaptchaResponse
+          'is-disabled': username === '' || password === '' || usernameError !== '' || passwordError !== '' || !captchaVerified
         }">登入</button>
       </div>
     </div>

src/components/Profile/ProfileForm.vue

@@ -2,7 +2,7 @@
 import { ref, computed, defineProps } from 'vue';
 import { useRouter } from 'vue-router';
 import { uploadAvatar } from '../../lib/api';
-import VueHcaptcha from '@hcaptcha/vue3-hcaptcha';
+import CAPTCHA from '../CAPTCHA.vue';
 import { useAuthStore } from '../../stores/auth';
 
 const props = defineProps({
@@ -15,22 +15,20 @@ const props = defineProps({
 const authStore = useAuthStore();
 const router = useRouter();
 
-const hcaptchaRef = ref(null);
-
 const avatarFile = ref(null);
 const avatarError = ref('');
-const hcaptchaResponse = ref('');
+const captchaResponse = ref(null);
 
 const onFileChange = (event) => {
   avatarFile.value = event.target.files[0];
 };
 
-const handleHcaptchaVerify = (token) => {
-  hcaptchaResponse.value = token;
-};
+const captchaVerified = computed(() => {
+  return captchaResponse.value !== null;
+});
 
-const handleHcaptchaExpired = () => {
-  hcaptchaResponse.value = '';
+const handleCaptchaVerified = (response) => {
+  captchaResponse.value = response;
 };
 
 const onSubmit = async () => {
@@ -41,7 +39,7 @@ const onSubmit = async () => {
     return;
   }
 
-  if (!hcaptchaResponse.value) {
+  if (!captchaVerified) {
     avatarError.value = '請完成驗證。';
     return;
   }
@@ -57,9 +55,8 @@ const onSubmit = async () => {
   }
 
   try {
-    await uploadAvatar(avatarFile.value, authStore.jwt, hcaptchaResponse.value);
+    await uploadAvatar(avatarFile.value, authStore.jwt, captchaResponse.value);
     alert('Avatar uploaded successfully!');
-    hcaptchaRef.value.reset();
     // After successful upload, reload this page
     router.go(0);
   } catch (error) {
@@ -103,15 +100,14 @@ const avatarUrl = computed(() => {
           </div>
         </div>
       </div>
-      <VueHcaptcha
-        ref="hcaptchaRef"
-        :sitekey="$hcaptchaSitekey"
-        @verify="handleHcaptchaVerify"
-        @expired="handleHcaptchaExpired"
-        @reset="handleHcaptchaExpired"
+      <CAPTCHA
+        :hcaptchaSitekey="$hcaptchaSitekey"
+        :recaptchaSitekey="$recaptchaSitekey"
+        :turnstileSitekey="$turnstileSitekey"
+        @captchaVerified="handleCaptchaVerified"
       />
       <div class="ts-wrap has-top-spaced is-end-aligned">
-        <button class="ts-button" :disabled="!(avatarFile && avatarError === '' && hcaptchaResponse)" type="submit">更新</button>
+        <button class="ts-button" :disabled="!(avatarFile && avatarError === '' && captchaVerified)" type="submit">更新</button>
       </div>
     </fieldset>
   </form>

src/components/Register/RegisterForm.vue

@@ -1,25 +1,19 @@
 <script setup>
-import { ref, watch, onMounted } from 'vue';
-import VueHcaptcha from '@hcaptcha/vue3-hcaptcha';
+import { ref, watch, onMounted, computed } from 'vue';
+import CAPTCHA from '../CAPTCHA.vue';
 
 const emit = defineEmits(['new-user']);
 
 const username = ref('');
 const password = ref('');
-const hcaptchaResponse = ref('');
-
-const hcaptchaRef = ref(null);
+const captchaResponse = ref(null);
 
 const usernameError = ref('');
 const passwordError = ref('');
 
-const handleHcaptchaVerify = (token) => {
-  hcaptchaResponse.value = token;
-};
-
-const handleHcaptchaExpired = () => {
-  hcaptchaResponse.value = '';
-};
+const captchaVerified = computed(() => {
+  return captchaResponse.value !== null;
+});
 
 function validateUsername() {
   if (!username.value) {
@@ -55,17 +49,20 @@ watch(
   }
 );
 
+const handleCaptchaVerified = (response) => {
+  captchaResponse.value = response;
+};
+
 const submit = () => {
   validateUsername();
   validatePassword();
 
-  if (usernameError.value || passwordError.value || !hcaptchaResponse.value) {
+  if (usernameError.value || passwordError.value || !captchaVerified) {
     return;
   }
 
-  emit('new-user', { username: username.value, password: password.value, hcaptchaResponse: hcaptchaResponse.value });
-  hcaptchaRef.value.reset();
-}
+  emit('new-user', { username: username.value, password: password.value, captchaResponse: captchaResponse.value });
+};
 </script>
 
 <template>
@@ -94,15 +91,14 @@ const submit = () => {
           </div>
         </div>
       </div>
-      <VueHcaptcha
-        ref="hcaptchaRef"
-        :sitekey="$hcaptchaSitekey"
-        @verify="handleHcaptchaVerify"
-        @expired="handleHcaptchaExpired"
-        @reset="handleHcaptchaExpired"
+      <CAPTCHA
+        :hcaptchaSitekey="$hcaptchaSitekey"
+        :recaptchaSitekey="$recaptchaSitekey"
+        :turnstileSitekey="$turnstileSitekey"
+        @captchaVerified="handleCaptchaVerified"
       />
       <div class="ts-wrap has-top-spaced is-end-aligned">
-        <button class="ts-button" type="submit" :class="{'is-disabled': username === '' || password === '' || !hcaptchaResponse }">送出</button>
+        <button class="ts-button" type="submit" :class="{'is-disabled': username === '' || password === '' || !captchaVerified }">送出</button>
       </div>
     </div>
   </form>

src/lib/api.js

@@ -2,7 +2,7 @@ import { unauthRedirectToLogin } from '../router';
 
 const API_BASE_URL = '/api';
 
-export async function register(username, password, hCaptchaResponse) {
+export async function register(username, password, { hCaptchaResponse, recaptchaResponse, turnstileResponse }) {
   const formData = new FormData();
   const payload = { username, password };
 
@@ -10,6 +10,12 @@ export async function register(username, password, hCaptchaResponse) {
   if (hCaptchaResponse) {
     formData.append('h-captcha-response', hCaptchaResponse);
   }
+  if (recaptchaResponse) {
+    formData.append('g-recaptcha-response', recaptchaResponse);
+  }
+  if (turnstileResponse) {
+    formData.append('cf-turnstile-response', turnstileResponse);
+  }
 
   const response = await fetch(API_BASE_URL + "/register", {
     method: 'POST',
@@ -24,7 +30,7 @@ export async function register(username, password, hCaptchaResponse) {
   return response.json();
 }
 
-export async function login(username, password, hCaptchaResponse) {
+export async function login(username, password, { hCaptchaResponse, recaptchaResponse, turnstileResponse }) {
   const formData = new FormData();
   const payload = { username, password };
 
@@ -32,6 +38,12 @@ export async function login(username, password, hCaptchaResponse) {
   if (hCaptchaResponse) {
     formData.append('h-captcha-response', hCaptchaResponse);
   }
+  if (recaptchaResponse) {
+    formData.append('g-recaptcha-response', recaptchaResponse);
+  }
+  if (turnstileResponse) {
+    formData.append('cf-turnstile-response', turnstileResponse);
+  }
 
   const response = await fetch(API_BASE_URL + "/login", {
     method: 'POST',
@@ -46,7 +58,7 @@ export async function login(username, password, hCaptchaResponse) {
   return response.json();
 }
 
-export async function postMessage(message, jwt, hCaptchaResponse) {
+export async function postMessage(message, jwt, { hCaptchaResponse, recaptchaResponse, turnstileResponse }) {
   const formData = new FormData();
   const payload = { message };
 
@@ -54,6 +66,12 @@ export async function postMessage(message, jwt, hCaptchaResponse) {
   if (hCaptchaResponse) {
     formData.append('h-captcha-response', hCaptchaResponse);
   }
+  if (recaptchaResponse) {
+    formData.append('g-recaptcha-response', recaptchaResponse);
+  }
+  if (turnstileResponse) {
+    formData.append('cf-turnstile-response', turnstileResponse);
+  }
 
   const response = await fetch(API_BASE_URL + "/messages", {
     method: 'POST',
@@ -138,13 +156,18 @@ export async function getProfile(jwt) {
   return response.json();
 }
 
-export async function uploadAvatar(avatar, jwt, hCaptchaResponse) {
+export async function uploadAvatar(avatar, jwt, { hCaptchaResponse, recaptchaResponse, turnstileResponse }) {
   const formData = new FormData();
   formData.append('avatar', avatar);
-
   if (hCaptchaResponse) {
     formData.append('h-captcha-response', hCaptchaResponse);
   }
+  if (recaptchaResponse) {
+    formData.append('g-recaptcha-response', recaptchaResponse);
+  }
+  if (turnstileResponse) {
+    formData.append('cf-turnstile-response', turnstileResponse);
+  }
 
   const response = await fetch(API_BASE_URL + "/avatars", {
     method: 'PUT',
@@ -167,11 +190,17 @@ export async function uploadAvatar(avatar, jwt, hCaptchaResponse) {
   return data;
 }
 
-export async function generateMotto(jwt, hCaptchaResponse) {
+export async function generateMotto(jwt, { hCaptchaResponse, recaptchaResponse, turnstileResponse }) {
   const formData = new FormData();
   if (hCaptchaResponse) {
     formData.append('h-captcha-response', hCaptchaResponse);
   }
+  if (recaptchaResponse) {
+    formData.append('g-recaptcha-response', recaptchaResponse);
+  }
+  if (turnstileResponse) {
+    formData.append('cf-turnstile-response', turnstileResponse);
+  }
 
   try {
     const response = await fetch('/api/motto', {

src/lib/darkMode.js

@@ -0,0 +1,16 @@
+import { reactive } from 'vue';
+
+const darkModeMediaQuery = '(prefers-color-scheme: dark)';
+const matchMedia = window.matchMedia(darkModeMediaQuery);
+
+const darkMode = reactive({
+  value: matchMedia.matches,
+});
+
+matchMedia.addEventListener('change', (event) => {
+  darkMode.value = event.matches;
+});
+
+export const install = (app) => {
+ app.config.globalProperties.$darkMode = darkMode;
+}

src/main.js

@@ -3,13 +3,21 @@ import './style.css';
 import App from './App.vue';
 import router from './router';
 import { createPinia } from 'pinia';
+import { install as installRecaptcha } from "vue3-recaptcha-v2";
+import { install as installDarkMode } from './lib/darkMode';
 
 const pinia = createPinia();
 const app = createApp(App);
 
 app.use(pinia);
 app.use(router);
+app.use(installDarkMode);
+app.use(installRecaptcha, {
+  sitekey: import.meta.env.VITE_RECAPTCHA_SITEKEY
+});
 
 app.config.globalProperties.$hcaptchaSitekey = import.meta.env.VITE_HCAPTCHA_SITEKEY;
+app.config.globalProperties.$recaptchaSitekey = import.meta.env.VITE_RECAPTCHA_SITEKEY;
+app.config.globalProperties.$turnstileSitekey = import.meta.env.VITE_TURNSTILE_SITEKEY;
 
 app.mount('#app');

src/style.css

@@ -11,5 +11,4 @@ html, body, #app {
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 1em 0;
 }

src/views/DailyMottoView.vue

@@ -1,32 +1,32 @@
 <script setup>
-import { ref, onMounted } from 'vue';
+import { computed, ref } from 'vue';
 import { generateMotto as generateMottoApi } from '../lib/api';
 import { useAuthStore } from '../stores/auth';
-import VueHcaptcha from '@hcaptcha/vue3-hcaptcha';
+
+import CAPTCHA from '../components/CAPTCHA.vue';
 
 const motto = ref('');
 const mottoLoading = ref(false);
-const hcaptchaResponse = ref('');
 
 const authStore = useAuthStore();
 
-const hcaptchaRef = ref(null);
+const captcha = ref(null);
+const captchaResponse = ref(null);
+const captchaVerified = computed(() => {
+  return captchaResponse.value !== null;
+});
 
-const handleHcaptchaVerify = (token) => {
-  hcaptchaResponse.value = token;
-};
-
-const handleHcaptchaExpired = () => {
-  hcaptchaResponse.value = '';
+const handleCaptchaVerified = (captchaData) => {
+  captchaResponse.value = captchaData;
 };
 
 const generateMotto = async () => {
   mottoLoading.value = true;
 
   try {
-    const generatedMotto = await generateMottoApi(authStore.jwt, hcaptchaResponse.value);
+    const generatedMotto = await generateMottoApi(authStore.jwt, captchaResponse.value);
     motto.value = generatedMotto;
-    hcaptchaRef.value.reset();
+    captcha.value.reset();
   } catch (error) {
     console.error(error);
     alert('Failed to generate motto.');
@@ -42,14 +42,15 @@ const generateMotto = async () => {
       <div class="ts-box ts-content is-center-aligned">
         <div class="ts-header is-large is-center-aligned">每日金句生成器</div>
         <div class="ts-header is-secondary is-center-aligned">Powered By Cloudflare Workers AI</div>
-        <VueHcaptcha
-          ref="hcaptchaRef"
-          :sitekey="$hcaptchaSitekey"
-          @verify="handleHcaptchaVerify"
-          @expired="handleHcaptchaExpired"
-          @reset="handleHcaptchaExpired"
+        <CAPTCHA
+          ref="captcha"
+          @captchaVerified="handleCaptchaVerified"
+          :hcaptchaSitekey="$hcaptchaSitekey"
+          :recaptchaSitekey="$recaptchaSitekey"
+          :turnstileSitekey="$turnstileSitekey"
+          :isVertical="true"
         />
-        <button class="ts-button" @click="generateMotto" :disabled="!hcaptchaResponse">生成</button>
+        <button class="ts-button" @click="generateMotto" :disabled="!captchaVerified">生成</button>
       </div>
       <div class="ts-content is-center-aligned">
         <p class="ts-text">每日金句:</p>

src/views/LoginView.vue

@@ -7,9 +7,9 @@ import { login } from '../lib/api';
 const router = useRouter();
 const authStore = useAuthStore();
 
-const onSubmit = async ({ username, password, hcaptchaResponse }) => {
+const onSubmit = async ({ username, password, captchaResponse }) => {
   try {
-    const response = await login(username, password, hcaptchaResponse);
+    const response = await login(username, password, captchaResponse);
     const { jwt } = response;
     authStore.setJwt(jwt);
     alert('Login successful!');

src/views/RegisterView.vue

@@ -5,9 +5,9 @@ import { register } from '../lib/api';
 
 const router = useRouter();
 
-const handleNewUser = async ({ username, password, hcaptchaResponse }) => {
+const handleNewUser = async ({ username, password, captchaResponse }) => {
   try {
-    const response = await register(username, password, hcaptchaResponse);
+    const response = await register(username, password, captchaResponse);
 
     alert(response.message || 'Registration successful! Please log in.');
     // Redirect to login page