From 8a952e32515c95c7521659fb1f6948b129590e39 Mon Sep 17 00:00:00 2001
From: Tony Yang <t510599@gmail.com>
Date: Thu, 17 Apr 2025 02:04:35 +0800
Subject: [PATCH] fix: captcha ref not defined

---
 src/components/Board/BoardForm.vue       | 4 ++--
 src/components/Login/LoginForm.vue       | 4 +++-
 src/components/Profile/ProfileForm.vue   | 5 ++++-
 src/components/Register/RegisterForm.vue | 4 +++-
 src/views/DailyMottoView.vue             | 4 ++--
 5 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/src/components/Board/BoardForm.vue b/src/components/Board/BoardForm.vue
index 8b55936..5f2f683 100644
--- a/src/components/Board/BoardForm.vue
+++ b/src/components/Board/BoardForm.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { ref, computed } from 'vue';
+import { ref, computed, useTemplateRef } from 'vue';
 import CAPTCHA from '../CAPTCHA.vue';
 
 const emit = defineEmits(['new-message']);
@@ -7,7 +7,7 @@ const props = defineProps(['locked']);
 
 const text = ref('');
 
-const captcha = ref(null);
+const captcha = useTemplateRef('captcha');
 const captchaResponse = ref(null);
 const captchaVerified = computed(() => {
   return captchaResponse.value !== null;
diff --git a/src/components/Login/LoginForm.vue b/src/components/Login/LoginForm.vue
index 52713d3..4e9c7eb 100644
--- a/src/components/Login/LoginForm.vue
+++ b/src/components/Login/LoginForm.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { ref, watch, computed } from 'vue';
+import { ref, watch, computed, useTemplateRef } from 'vue';
 import CAPTCHA from '../CAPTCHA.vue';
 
 const emit = defineEmits(['login-submit']);
@@ -7,6 +7,7 @@ const emit = defineEmits(['login-submit']);
 const username = ref('');
 const password = ref('');
 
+const captcha = useTemplateRef('captcha');
 const captchaResponse = ref(null);
 const captchaVerified = computed(() => {
   return captchaResponse.value !== null;
@@ -91,6 +92,7 @@ const submit = () => {
         </div>
       </div>
       <CAPTCHA
+        ref="captcha"
         :hcaptchaSitekey="$hcaptchaSitekey"
         :recaptchaSitekey="$recaptchaSitekey"
         :turnstileSitekey="$turnstileSitekey"
diff --git a/src/components/Profile/ProfileForm.vue b/src/components/Profile/ProfileForm.vue
index 4f6d8a5..2c7c113 100644
--- a/src/components/Profile/ProfileForm.vue
+++ b/src/components/Profile/ProfileForm.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { ref, computed, defineProps } from 'vue';
+import { ref, computed, defineProps, useTemplateRef } from 'vue';
 import { useRouter } from 'vue-router';
 import { uploadAvatar } from '../../lib/api';
 import CAPTCHA from '../CAPTCHA.vue';
@@ -17,6 +17,8 @@ const router = useRouter();
 
 const avatarFile = ref(null);
 const avatarError = ref('');
+
+const captcha = useTemplateRef('captcha');
 const captchaResponse = ref(null);
 
 const onFileChange = (event) => {
@@ -101,6 +103,7 @@ const avatarUrl = computed(() => {
         </div>
       </div>
       <CAPTCHA
+        ref="captcha"
         :hcaptchaSitekey="$hcaptchaSitekey"
         :recaptchaSitekey="$recaptchaSitekey"
         :turnstileSitekey="$turnstileSitekey"
diff --git a/src/components/Register/RegisterForm.vue b/src/components/Register/RegisterForm.vue
index 9410f5d..fbf97e8 100644
--- a/src/components/Register/RegisterForm.vue
+++ b/src/components/Register/RegisterForm.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { ref, watch, computed } from 'vue';
+import { ref, watch, computed, useTemplateRef } from 'vue';
 import CAPTCHA from '../CAPTCHA.vue';
 
 const emit = defineEmits(['new-user']);
@@ -11,6 +11,7 @@ const captchaResponse = ref(null);
 const usernameError = ref('');
 const passwordError = ref('');
 
+const captcha = useTemplateRef('captcha');
 const captchaVerified = computed(() => {
   return captchaResponse.value !== null;
 });
@@ -62,6 +63,7 @@ const submit = () => {
   }
 
   emit('new-user', { username: username.value, password: password.value, captchaResponse: captchaResponse.value });
+  captcha.value.reset();
 };
 </script>
 
diff --git a/src/views/DailyMottoView.vue b/src/views/DailyMottoView.vue
index 5506160..ecd4709 100644
--- a/src/views/DailyMottoView.vue
+++ b/src/views/DailyMottoView.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { computed, ref } from 'vue';
+import { computed, ref, useTemplateRef } from 'vue';
 import { generateMotto as generateMottoApi } from '../lib/api';
 import { useAuthStore } from '../stores/auth';
 
@@ -10,7 +10,7 @@ const mottoLoading = ref(false);
 
 const authStore = useAuthStore();
 
-const captcha = ref(null);
+const captcha = useTemplateRef('captcha');
 const captchaResponse = ref(null);
 const captchaVerified = computed(() => {
   return captchaResponse.value !== null;