feat: hcaptcha

src/views/DailyMottoView.vue

@@ -2,17 +2,27 @@
 import { ref, onMounted } from 'vue';
 import { generateMotto as generateMottoApi } from '../lib/api';
 import { useAuthStore } from '../stores/auth';
+import VueHcaptcha from '@hcaptcha/vue3-hcaptcha';
 
 const motto = ref('');
 const mottoLoading = ref(false);
+const hcaptchaResponse = ref('');
 
 const authStore = useAuthStore();
 
+const handleHcaptchaVerify = (token) => {
+  hcaptchaResponse.value = token;
+};
+
+const handleHcaptchaExpired = () => {
+  hcaptchaResponse.value = '';
+};
+
 const generateMotto = async () => {
   mottoLoading.value = true;
 
   try {
-    const generatedMotto = await generateMottoApi(authStore.jwt);
+    const generatedMotto = await generateMottoApi(authStore.jwt, hcaptchaResponse.value);
     motto.value = generatedMotto;
   } catch (error) {
     console.error(error);
@@ -28,9 +38,15 @@ const generateMotto = async () => {
     <div class="ts-box ts-content is-center-aligned">
       <div class="ts-header is-large is-center-aligned">每日金句生成器</div>
       <p class="ts-text">Powered By Cloudflare Workers AI</p>
-      <button class="ts-button" @click="generateMotto">生成</button>
+      <VueHcaptcha
+        :sitekey="$hcaptchaSitekey"
+        @verify="handleHcaptchaVerify"
+        @expired="handleHcaptchaExpired"
+      />
+      <button class="ts-button" @click="generateMotto" :disabled="!hcaptchaResponse">生成</button>
       <p class="ts-text">每日金句:</p>
+      <div class="ts-loading" v-if="mottoLoading"></div>
       <p class="ts-text">{{ motto }}</p>
     </div>
   </div>
-</template>
+</template>