feat: rebuild login check

src/components/top-bar/KUNGalgameUserInfo.vue

@@ -14,6 +14,7 @@ import { resetRouter } from '@/router'
 
 const { uid, name, moemoepoint } = storeToRefs(useKUNGalgameUserStore())
 
+const router = useRouter()
 const container = ref<HTMLElement>()
 const routerRedirectTo = `/kungalgamer/${uid.value}/info`
 
@@ -39,7 +40,7 @@ const logOut = async () => {
   )
   if (res) {
     kungalgameStoreReset()
-    useRouter().push('/login')
+    router.push('/login')
     resetRouter()
     message('Logout successfully!', '登出成功', 'success')
   }

src/views/forgot/Forgot.vue

@@ -111,11 +111,11 @@ const handleChangePassword = async () => {
         <div class="password" v-else-if="!flag">
           <div class="input">
             <span>更改密码：</span>
-            <input v-model="input.newPassword" type="text" />
+            <input v-model="input.newPassword" type="password" />
           </div>
           <div class="input">
             <span>确认密码：</span>
-            <input v-model="input.confirmPassword" type="text" />
+            <input v-model="input.confirmPassword" type="password" />
           </div>
         </div>
       </Transition>

src/views/kungalgamer/content/Password.vue

@@ -20,6 +20,7 @@ defineProps<{
   user: UserInfo
 }>()
 
+const router = useRouter()
 // 当前用户的邮箱
 const email = ref('')
 // 已经发送验证码的邮箱
@@ -114,7 +115,7 @@ const handleChangePassword = async () => {
 
   if (res.code === 200) {
     kungalgameStoreReset()
-    useRouter().push('/login')
+    router.push('/login')
     resetRouter()
     Message('Password change successfully!', '密码更改成功', 'success')
   } else {
@@ -131,6 +132,11 @@ onMounted(async () => {
     Message('Get email failed!', '获取邮箱失败！', 'error')
   }
 })
+
+// 忘记密码
+const handleClickForgotPassword = () => {
+  router.push('/forgot')
+}
 </script>
 
 <template>
@@ -156,6 +162,7 @@ onMounted(async () => {
         <button @click="handleResetEmail">确定更改邮箱</button>
       </div>
     </div>
+
     <!-- 用户更改密码 -->
     <div class="password">
       <div class="title">更改密码:</div>
@@ -176,6 +183,11 @@ onMounted(async () => {
         <button @click="handleChangePassword">确定更改密码</button>
       </div>
     </div>
+
+    <!-- 忘记密码 -->
+    <span @click="handleClickForgotPassword" class="forget">
+      {{ $tm('login.login.forget') }}
+    </span>
   </div>
 </template>
 
@@ -242,6 +254,18 @@ onMounted(async () => {
   }
 }
 
+.password {
+  margin-bottom: 20px;
+}
+
+/* 忘记密码 */
+.forget {
+  font-size: medium;
+  cursor: pointer;
+  text-decoration: none;
+  color: var(--kungalgame-blue-4);
+}
+
 @media (max-width: 700px) {
   .article {
     font-size: small;

src/views/login/components/Login.vue

@@ -6,92 +6,105 @@ import { useRouter } from 'vue-router'
 import { useKUNGalgameMessageStore } from '@/store/modules/message'
 import { storeToRefs } from 'pinia'
 // 全局消息组件（顶部）
-import message from '@/components/alert/Message'
+import Message from '@/components/alert/Message'
 // 导入设置
 import Settings from './Settings.vue'
+// 导入 i18n
+import { useI18n } from 'vue-i18n'
 
 // 导入验证表单是否合法的函数
 import { isValidEmail, isValidName, isValidPassword } from '@/utils/validate'
 
-// 导入 i18n
+const router = useRouter()
-import { useI18n } from 'vue-i18n'
-const { tm } = useI18n()
 
+const { tm } = useI18n()
+const info = useKUNGalgameMessageStore()
 // 使用消息 store
 const { isShowCapture, isCaptureSuccessful } = storeToRefs(
   useKUNGalgameMessageStore()
 )
 
-const router = useRouter()
-
-const info = useKUNGalgameMessageStore()
-
-const useStore = useKUNGalgameUserStore()
-
 // 用户登录的表单
 const loginForm = reactive({
   name: '',
   password: '',
 })
 
-const isEmptyInput = (): boolean => {
+// 检查用户名
+const checkUsername = (name: string) => {
   // 如果输入的字段为空
-  if (!loginForm.name.trim()) {
+  if (!name.trim()) {
     // 提示用户输入的名字为空
-    message('Username cannot be empty', '用户名不可为空', 'warn')
+    Message('Username cannot be empty', '用户名不可为空', 'warn')
     return false
   }
 
-  if (!loginForm.password.trim()) {
+  if (!isValidName(name) && !isValidEmail(name)) {
-    // 提示用户输入的密码为空
+    // 输入的用户名格式错误时的逻辑
-    message('Password cannot be empty', '密码不可为空', 'warn')
+    info.info(tm('AlertInfo.login.invalidUsername'))
     return false
   }
 
   return true
 }
 
-// 判断输入的用户名和密码字段是否合法
+const checkPassword = (password: string) => {
-const isValidInput = (): boolean => {
+  if (!password.trim()) {
-  // 如果输入为空直接返回 false
+    // 提示用户输入的密码为空
-  if (!isEmptyInput()) {
+    Message('Password cannot be empty', '密码不可为空', 'warn')
-    return false
-  }
-  if (!isValidName(loginForm.name) && !isValidEmail(loginForm.name)) {
-    // 输入的用户名格式错误时的逻辑
-    info.info(tm('AlertInfo.login.invalidUsername'))
     return false
   }
   // 输入的密码格式不正确时（为用户名或邮箱）
-  if (!isValidPassword(loginForm.password)) {
+  if (!isValidPassword(password)) {
     // 如果密码非法的话返回非法密码
     info.info(tm('AlertInfo.login.invalidPassword'))
     return false
   }
+
+  return true
+}
+
+const checkLogin = (
+  name: string,
+  password: string,
+  isCaptureSuccessful: boolean
+) => {
+  // 检查用户名和密码
+  if (!checkUsername(name) || !checkPassword(password)) {
+    return false
+  }
+
+  // 未完成人机身份验证提示信息，直接返回
+  if (!isCaptureSuccessful) {
+    Message(
+      'Please click above to complete the human verification',
+      '请点击上方完成人机身份验证',
+      'warn'
+    )
+    return false
+  }
+
   return true
 }
 
 // 处理用户点击登陆时的逻辑
 const handleLogin = async () => {
-  // 保证输入格式和人机验证通过才能发送登录请求
+  // 检查用户输入,人机验证
-  if (!isValidInput()) {
+  const result = checkLogin(
-    return
+    loginForm.name,
-  }
+    loginForm.password,
-  // 未完成人机身份验证提示信息，直接返回
+    isCaptureSuccessful.value
-  if (!isCaptureSuccessful.value) {
-    message(
-      'Please click above to complete the human verification',
-      '请点击上方完成人机身份验证',
-      'warn'
   )
+  if (!result) {
     return
   }
+
   // 所有的验证都通过了再向后端发送请求
-  const res = await useStore.login(loginForm)
+  const res = await useKUNGalgameUserStore().login(loginForm)
   // 如果请求成功跳转到主页
   if (res.code === 200) {
     router.push('/kun')
-    message(
+    Message(
       'Login Successfully! Welcome to KUN Visual Novel ~ ',
       '登陆成功!欢迎来到 鲲 Galgame ~ ',
       'success',
@@ -190,7 +203,7 @@ const handleClickForgotPassword = () => {
   transition: 0.2s linear;
 }
 
-/* 获取验证码 */
+/* 忘记密码 */
 .forget {
   cursor: pointer;
   text-decoration: none;

src/views/login/components/Register.vue

@@ -33,7 +33,7 @@ const info = useKUNGalgameMessageStore()
 const router = useRouter()
 const isSendCode = ref(false)
 
-import { registerFormItem } from './registerForm'
+import { registerFormItem } from '../utils/registerForm'
 
 const registerForm = reactive<Record<string, string>>({
   name: '',
@@ -97,7 +97,7 @@ const handleSendCode = () => {
   isSendCode.value = true
 }
 
-const handleRegister = () => {
+const handleRegister = async () => {
   if (!isSendCode.value) {
     message(
       'Need to send an email verification code',
@@ -126,25 +126,21 @@ const handleRegister = () => {
   }
 
   // 执行注册逻辑，发送请求，后端校验验证码
-  useKUNGalgameUserStore()
+  const res = await useKUNGalgameUserStore().register({
-    .register({
     name: registerForm.name,
     email: registerForm.email,
     password: registerForm.password,
     code: registerForm.code,
   })
-    .then((res) => {
+
   // 如果请求成功跳转到主页
   if (res.code === 200) {
     router.push('/')
     message('Register successfully!', '注册成功！', 'success')
     info.info(tm('AlertInfo.login.success'))
   } else {
+    message('Register failed!', '注册失败！', 'error')
   }
-    })
-    .catch((error) => {
-      console.log(error)
-    })
 }
 </script>