feat: refine login process, make turnstile happy (#202)

LightNovelShelf · Sep 11, 2024 · 615b36d · 615b36d
1 parent a506578
commit 615b36d
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 9 deletions.
diff --git a/src/views/Login/Login.vue b/src/views/Login/Login.vue
@@ -31,15 +31,31 @@
               <q-icon :name="isPwd ? icon.mdiEyeOff : icon.mdiEye" class="cursor-pointer" @click="isPwd = !isPwd" />
             </template>
           </q-input>
-          <vue-turnstile ref="turnstile" v-model="token" />
+          <vue-turnstile
+            ref="turnstile"
+            v-model="token"
+            theme="auto"
+            @passed="() => (canLogin = true) && (loading = false)"
+          />
           <div class="row">
             <q-btn rounded flat :to="{ name: 'Register' }">注册</q-btn>
             <q-space />
             <q-btn rounded flat :to="{ name: 'Reset' }">忘记密码</q-btn>
           </div>
-          <q-btn :loading="loading" color="primary" style="height: 50px" class="full-width" type="submit">
+          <q-btn
+            :loading="loading"
+            :color="canLogin ? 'primary' : 'secondary'"
+            style="height: 50px"
+            class="full-width"
+            type="submit"
+            :disable="!canLogin"
+          >
             登录
             <q-icon right size="24px" :name="icon.mdiSend" />
+            <template v-slot:loading>
+              <q-spinner-hourglass class="on-left" />
+              加载中
+            </template>
           </q-btn>
         </q-form>
       </div>
@@ -66,9 +82,10 @@ const password = ref('')
 const token = ref()
 const turnstile = ref()
 const isPwd = ref(true)
-const loading = ref(false)
+const loading = ref(true)
 const route = useRoute()
 const router = useRouter()
+const canLogin = ref(false)
 
 const _login = async () => {
   if (!turnstile.value?.loaded || !token.value) {

diff --git a/src/views/Login/VueTurnstile.vue b/src/views/Login/VueTurnstile.vue
@@ -2,9 +2,13 @@
   <div ref="box" />
 </template>
 
-<script setup>
-const props = defineProps({ modelValue: String })
-const emits = defineEmits(['update:modelValue'])
+<script setup lang="ts">
+const props = defineProps({
+  modelValue: String,
+  theme: String as PropType<'light' | 'dark' | 'auto'>,
+  size: String as PropType<'normal' | 'flexible' | 'compact'>
+})
+const emits = defineEmits(['update:modelValue', 'passed'])
 
 const loaded = ref(!!window.turnstile)
 const widgetId = ref()
@@ -13,9 +17,28 @@ const box = ref()
 function render() {
   widgetId.value = window.turnstile.render(box.value, {
     sitekey: VUE_CAPTCHA_SITE_KEY,
-    callback: (response) => emits('update:modelValue', response),
-    'expired-callback': emits('update:modelValue', null),
-    'error-callback': emits('update:modelValue', null)
+    callback: (response) => {
+      emits('passed')
+      emits('update:modelValue', response)
+    },
+    'expired-callback': () => {
+      emits('passed')
+      emits('update:modelValue', null)
+    },
+    'error-callback': () => {
+      emits('passed')
+      emits('update:modelValue', null)
+    },
+    'unsupported-callback': () => {
+      emits('passed')
+      emits('update:modelValue', null)
+    },
+    'timeout-callback': () => {
+      emits('passed')
+      emits('update:modelValue', null)
+    },
+    theme: props.theme ?? 'auto',
+    size: props.size ?? 'flexible'
   })
 }
 
@@ -29,6 +52,7 @@ onMounted(() => {
     script.defer = true
     document.head.appendChild(script)
 
+    //@ts-expect-error
     window.onloadTurnstileCallback = () => {
       loaded.value = true
       render()