update: reset captcha after submission

src/components/Board/BoardForm.vue

@@ -9,6 +9,8 @@ const text = ref('');
 const hcaptchaResponse = ref('');
 const maxLength = 200;
 
+const hcaptchaRef = ref(null);
+
 const handleHcaptchaVerify = (token) => {
   hcaptchaResponse.value = token;
 };
@@ -28,6 +30,7 @@ function submit() {
 
   emit('new-message', { text: text.value, hcaptchaResponse: hcaptchaResponse.value });
   text.value = '';
+  hcaptchaRef.value.reset();
 }
 </script>
 
@@ -50,9 +53,11 @@ function submit() {
         </div>
       </div>
       <VueHcaptcha
+        ref="hcaptchaRef"
         :sitekey="$hcaptchaSitekey"
         @verify="handleHcaptchaVerify"
         @expired="handleHcaptchaExpired"
+        @reset="handleHcaptchaExpired"
       />
       <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>

src/components/Login/LoginForm.vue

@@ -8,6 +8,8 @@ const username = ref('');
 const password = ref('');
 const hcaptchaResponse = ref('');
 
+const hcaptchaRef = ref(null);
+
 const usernameError = ref('');
 const passwordError = ref('');
 
@@ -62,6 +64,7 @@ const submit = () => {
   }
 
   emit('login-submit', { username: username.value, password: password.value, hcaptchaResponse: hcaptchaResponse.value });
+  hcaptchaRef.value.reset();
 }
 </script>
 
@@ -90,9 +93,11 @@ const submit = () => {
         </div>
       </div>
       <VueHcaptcha
+        ref="hcaptchaRef"
         :sitekey="$hcaptchaSitekey"
         @verify="handleHcaptchaVerify"
         @expired="handleHcaptchaExpired"
+        @reset="handleHcaptchaExpired"
       />
       <div class="ts-wrap has-top-spaced is-end-aligned">
         <button class="ts-button is-fluid" type="submit" :class="{

src/components/Profile/ProfileForm.vue

@@ -15,6 +15,8 @@ const props = defineProps({
 const authStore = useAuthStore();
 const router = useRouter();
 
+const hcaptchaRef = ref(null);
+
 const avatarFile = ref(null);
 const avatarError = ref('');
 const hcaptchaResponse = ref('');
@@ -57,6 +59,7 @@ const onSubmit = async () => {
   try {
     await uploadAvatar(avatarFile.value, authStore.jwt, hcaptchaResponse.value);
     alert('Avatar uploaded successfully!');
+    hcaptchaRef.value.reset();
     // After successful upload, reload this page
     router.go(0);
   } catch (error) {
@@ -101,9 +104,11 @@ const avatarUrl = computed(() => {
         </div>
       </div>
       <VueHcaptcha
+        ref="hcaptchaRef"
         :sitekey="$hcaptchaSitekey"
         @verify="handleHcaptchaVerify"
         @expired="handleHcaptchaExpired"
+        @reset="handleHcaptchaExpired"
       />
       <div class="ts-wrap has-top-spaced is-end-aligned">
         <button class="ts-button" :disabled="!(avatarFile && avatarError === '' && hcaptchaResponse)" type="submit">更新</button>

src/components/Register/RegisterForm.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, watch } from 'vue';
+import { ref, watch, onMounted } from 'vue';
 import VueHcaptcha from '@hcaptcha/vue3-hcaptcha';
 
 const emit = defineEmits(['new-user']);
@@ -8,6 +8,8 @@ const username = ref('');
 const password = ref('');
 const hcaptchaResponse = ref('');
 
+const hcaptchaRef = ref(null);
+
 const usernameError = ref('');
 const passwordError = ref('');
 
@@ -62,6 +64,7 @@ const submit = () => {
   }
 
   emit('new-user', { username: username.value, password: password.value, hcaptchaResponse: hcaptchaResponse.value });
+  hcaptchaRef.value.reset();
 }
 </script>
 
@@ -92,9 +95,11 @@ const submit = () => {
         </div>
       </div>
       <VueHcaptcha
+        ref="hcaptchaRef"
         :sitekey="$hcaptchaSitekey"
         @verify="handleHcaptchaVerify"
         @expired="handleHcaptchaExpired"
+        @reset="handleHcaptchaExpired"
       />
       <div class="ts-wrap has-top-spaced is-end-aligned">
         <button class="ts-button" type="submit" :class="{'is-disabled': username === '' || password === '' || !hcaptchaResponse }">送出</button>

src/views/DailyMottoView.vue

@@ -10,6 +10,8 @@ const hcaptchaResponse = ref('');
 
 const authStore = useAuthStore();
 
+const hcaptchaRef = ref(null);
+
 const handleHcaptchaVerify = (token) => {
   hcaptchaResponse.value = token;
 };
@@ -24,6 +26,7 @@ const generateMotto = async () => {
   try {
     const generatedMotto = await generateMottoApi(authStore.jwt, hcaptchaResponse.value);
     motto.value = generatedMotto;
+    hcaptchaRef.value.reset();
   } catch (error) {
     console.error(error);
     alert('Failed to generate motto.');
@@ -39,9 +42,11 @@ const generateMotto = async () => {
       <div class="ts-header is-large is-center-aligned">每日金句生成器</div>
       <p class="ts-text">Powered By Cloudflare Workers AI</p>
       <VueHcaptcha
+        ref="hcaptchaRef"
         :sitekey="$hcaptchaSitekey"
         @verify="handleHcaptchaVerify"
         @expired="handleHcaptchaExpired"
+        @reset="handleHcaptchaExpired"
       />
       <button class="ts-button" @click="generateMotto" :disabled="!hcaptchaResponse">生成</button>
       <p class="ts-text">每日金句:</p>