nothing

src/components/RegisterAndLogin.vue

@@ -1,7 +1,9 @@
 <script setup lang="ts">
+import { GetSelfAccount } from '@/api/account'
 import { QueryGetAPI, QueryPostAPI } from '@/api/query'
-import { ACCOUNT_API_URL } from '@/data/constants'
-import { FormInst, FormItemInst, FormItemRule, FormRules, NButton, NCard, NForm, NFormItem, NInput, NSpace, NSpin } from 'naive-ui'
+import { ACCOUNT_API_URL, TURNSTILE_KEY } from '@/data/constants'
+import { useLocalStorage } from '@vueuse/core'
+import { FormInst, FormItemInst, FormItemRule, FormRules, NAlert, NButton, NCard, NDivider, NForm, NFormItem, NInput, NSpace, NSpin, NTab, NTabPane, NTabs, useMessage } from 'naive-ui'
 import { ref } from 'vue'
 import VueTurnstile from 'vue-turnstile'
 
@@ -16,12 +18,16 @@ interface LoginModel {
   password: string
 }
 
+const message = useMessage()
+
 const isRegister = ref(false)
 const isLoading = ref(false)
 
 const registerModel = ref<RegisterModel>({} as RegisterModel)
 const loginModel = ref<LoginModel>({} as LoginModel)
-const token = ref()
+const token = ref('')
+const turnstile = ref()
+const cookie = useLocalStorage('JWT_Token', '')
 
 const formRef = ref<FormInst | null>(null)
 const rPasswordFormItemRef = ref<FormItemInst | null>(null)
@@ -89,8 +95,9 @@ function onPasswordInput() {
 }
 function onregisterButtonClick(e: MouseEvent) {
   e.preventDefault()
-  isLoading.value = true
+
   formRef.value?.validate().then(async () => {
+    isLoading.value = true
     await QueryPostAPI(
       ACCOUNT_API_URL + 'register',
       {
@@ -98,12 +105,12 @@ function onregisterButtonClick(e: MouseEvent) {
         email: registerModel.value.email,
         password: registerModel.value.password,
       },
-      {
-        Turnstile: token.value,
-      }
+      [['Turnstile', token.value]]
     )
       .then((data) => {
         if (data.code == 200) {
+        } else {
+          message.error(data.message)
         }
       })
       .catch((err) => {
@@ -111,25 +118,33 @@ function onregisterButtonClick(e: MouseEvent) {
       })
       .finally(() => {
         isLoading.value = false
+        turnstile.value?.reset()
       })
   })
 }
 function onLoginButtonClick(e: MouseEvent) {
   e.preventDefault()
-  isLoading.value = true
+
   formRef.value?.validate().then(async () => {
-    await QueryPostAPI(
+    isLoading.value = true
+    await QueryPostAPI<string>(
       ACCOUNT_API_URL + 'login',
       {
         nameOrEmail: loginModel.value.account,
         password: loginModel.value.password,
       },
-      {
-        Turnstile: token.value,
-      }
+      [['Turnstile', token.value]]
     )
-      .then((data) => {
+      .then(async (data) => {
         if (data.code == 200) {
+          cookie.value = data.data
+          setTimeout(() => {
+            GetSelfAccount().then((data) => {
+              message.success(`成功登陆为 ${data?.name}`)
+            })
+          }, 1)
+        } else {
+          message.error(data.message)
         }
       })
       .catch((err) => {
@@ -137,6 +152,7 @@ function onLoginButtonClick(e: MouseEvent) {
       })
       .finally(() => {
         isLoading.value = false
+        turnstile.value?.reset()
       })
   })
 }
@@ -145,49 +161,55 @@ function onLoginButtonClick(e: MouseEvent) {
 <template>
   <NSpin :show="isLoading">
     <NCard embedded>
-      <template #header>
-        <Transition name="fade" mode="out-in">
-          <span v-if="isRegister"> 注册 </span>
-          <span v-else> 登陆 </span>
-        </Transition>
+      <template #header-extra>
+        <slot name="header-extra"> </slot>
+      </template>
+      <template v-if="cookie">
+        <NAlert type="warning"> 你已经登录 </NAlert>
+      </template>
+      <template v-else>
+        <NTabs default-value="login" size="large" animated pane-wrapper-style="margin: 0 -4px" pane-style="padding-left: 4px; padding-right: 4px; box-sizing: border-box;">
+          <NTabPane name="login" tab="登陆">
+            <NForm ref="formRef" :rules="loginRules" :model="loginModel">
+              <NFormItem path="account" label="用户名或邮箱">
+                <NInput v-model:value="loginModel.account" />
+              </NFormItem>
+              <NFormItem path="password" label="密码">
+                <NInput v-model:value="loginModel.password" type="password" @input="onPasswordInput" @keydown.enter.prevent />
+              </NFormItem>
+            </NForm>
+            <NSpace vertical justify="center" align="center">
+              <NSpin :show="!token">
+                <NButton type="primary" size="large" @click="onLoginButtonClick"> 登陆 </NButton>
+              </NSpin>
+            </NSpace>
+          </NTabPane>
+          <NTabPane name="register" tab="注册">
+            <NForm ref="formRef" :rules="registerRules" :model="registerModel">
+              <NFormItem path="username" label="用户名">
+                <NInput v-model:value="registerModel.username" />
+              </NFormItem>
+              <NFormItem path="email" label="邮箱">
+                <NInput v-model:value="registerModel.email" />
+              </NFormItem>
+              <NFormItem path="password" label="密码">
+                <NInput v-model:value="registerModel.password" type="password" @input="onPasswordInput" @keydown.enter.prevent />
+              </NFormItem>
+              <NFormItem ref="rPasswordFormItemRef" first path="reenteredPassword" label="重复密码">
+                <NInput v-model:value="registerModel.reenteredPassword" :disabled="!registerModel.password" type="password" @keydown.enter.prevent />
+              </NFormItem>
+            </NForm>
+            <NSpace vertical justify="center" align="center">
+              <NSpin :show="!token">
+                <NButton type="primary" size="large" @click="onregisterButtonClick"> 注册 </NButton>
+              </NSpin>
+            </NSpace>
+          </NTabPane>
+        </NTabs>
+
+        <NDivider />
+        <VueTurnstile ref="turnstile" :site-key="TURNSTILE_KEY" v-model="token" theme="auto" style="text-align: center" />
       </template>
-      <Transition name="scale" mode="out-in">
-        <div v-if="isRegister">
-          <NForm ref="formRef" :rules="registerRules" :model="registerModel">
-            <NFormItem path="username" label="用户名">
-              <NInput v-model:value="registerModel.username" />
-            </NFormItem>
-            <NFormItem path="email" label="邮箱">
-              <NInput v-model:value="registerModel.email" />
-            </NFormItem>
-            <NFormItem path="password" label="密码">
-              <NInput v-model:value="registerModel.password" type="password" @input="onPasswordInput" @keydown.enter.prevent />
-            </NFormItem>
-            <NFormItem ref="rPasswordFormItemRef" first path="reenteredPassword" label="重复密码">
-              <NInput v-model:value="registerModel.reenteredPassword" :disabled="!registerModel.password" type="password" @keydown.enter.prevent />
-            </NFormItem>
-          </NForm>
-          <NSpace vertical justify="center" align="center">
-            <NButton type="primary" size="large" @click="onregisterButtonClick"> 注册 </NButton>
-            <NButton @click="isRegister = false" size="small" text> 或者现在去登陆 </NButton>
-          </NSpace>
-        </div>
-        <div v-else>
-          <NForm ref="formRef" :rules="loginRules" :model="loginModel">
-            <NFormItem path="account" label="用户名或邮箱">
-              <NInput v-model:value="loginModel.account" />
-            </NFormItem>
-            <NFormItem path="password" label="密码">
-              <NInput v-model:value="loginModel.password" type="password" @input="onPasswordInput" @keydown.enter.prevent />
-            </NFormItem>
-          </NForm>
-          <NSpace vertical justify="center" align="center">
-            <NButton type="primary" size="large" @click="onLoginButtonClick"> 登陆 </NButton>
-            <NButton @click="isRegister = true" size="small" text> 或者现在去注册 </NButton>
-          </NSpace>
-        </div>
-      </Transition>
-      <VueTurnstile site-key="0x4AAAAAAAETUSAKbds019h0" v-model="token" theme="auto" style="text-align: center" />
     </NCard>
   </NSpin>
 </template>