BUG fix: send register code

src/components/verification-code/Code.vue

@@ -1,8 +1,7 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, watch } from 'vue'
 
 import { useKUNGalgameUserStore } from '@/store/modules/kungalgamer'
-// Using global notifications
 import { useKUNGalgameMessageStore } from '@/store/modules/message'
 const info = useKUNGalgameMessageStore()
 
@@ -16,12 +15,9 @@ const isSending = ref(false)
 
 const countdown = ref(0)
 
-const sendCode = () => {
+watch(
-  // If the parent component passes a false value, return directly
+  () => props.isSendCode,
-  if (!props.isSendCode) {
+  async () => {
-    return
-  }
-
     if (!isSending.value) {
       isSending.value = true
       countdown.value = 30
@@ -35,15 +31,16 @@ const sendCode = () => {
       }, 1000)
 
       // Send the verification code
-    useKUNGalgameUserStore().sendCode(props.email)
+      await useKUNGalgameUserStore().sendCode(props.email)
 
       info.info('AlertInfo.code.code')
     }
-}
+  }
+)
 </script>
 
 <template>
-  <button @click="sendCode" :disabled="isSending">
+  <button :disabled="isSending">
     {{ isSending ? countdown : $tm('login.register.send') }}
   </button>
 </template>

src/views/login/components/Register.vue

@@ -110,15 +110,14 @@ const handleSendCode = () => {
     return
   }
 
-  // If human verification is not completed
+  if (isCaptureSuccessful.value) {
-  if (!isCaptureSuccessful.value) {
+    // Change isSendCode, because Code component use watch
+    isSendCode.value = !isSendCode.value
+    isCaptureSuccessful.value = false
+  } else {
     // Show human verification
     isShowCapture.value = true
-    return
   }
-
-  // Mark that the code has been sent
-  isSendCode.value = true
 }
 
 const handleRegister = async () => {