From 453a3e6eb13aaa9cac655833cf778428e4e4e224 Mon Sep 17 00:00:00 2001 From: KUN1007 Date: Fri, 13 Oct 2023 18:49:15 +0800 Subject: [PATCH] feat: rebuild login check --- src/components/top-bar/KUNGalgameUserInfo.vue | 3 +- src/views/forgot/Forgot.vue | 4 +- src/views/kungalgamer/content/Password.vue | 26 +++++- src/views/login/components/Login.vue | 93 +++++++++++-------- src/views/login/components/Register.vue | 38 ++++---- .../{components => utils}/registerForm.ts | 0 6 files changed, 99 insertions(+), 65 deletions(-) rename src/views/login/{components => utils}/registerForm.ts (100%) diff --git a/src/components/top-bar/KUNGalgameUserInfo.vue b/src/components/top-bar/KUNGalgameUserInfo.vue index c13f610e..2f193c78 100644 --- a/src/components/top-bar/KUNGalgameUserInfo.vue +++ b/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() 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') } diff --git a/src/views/forgot/Forgot.vue b/src/views/forgot/Forgot.vue index 0e8fa08c..5d22ed49 100644 --- a/src/views/forgot/Forgot.vue +++ b/src/views/forgot/Forgot.vue @@ -111,11 +111,11 @@ const handleChangePassword = async () => {
更改密码： - +
确认密码： - +
diff --git a/src/views/kungalgamer/content/Password.vue b/src/views/kungalgamer/content/Password.vue index 4040c2d3..e39682df 100644 --- a/src/views/kungalgamer/content/Password.vue +++ b/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') +} @@ -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; diff --git a/src/views/login/components/Login.vue b/src/views/login/components/Login.vue index 6df6c271..96cd78c9 100644 --- a/src/views/login/components/Login.vue +++ b/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 -import { useI18n } from 'vue-i18n' -const { tm } = useI18n() +const router = useRouter() +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()) { - // 提示用户输入的密码为空 - message('Password cannot be empty', '密码不可为空', 'warn') + if (!isValidName(name) && !isValidEmail(name)) { + // 输入的用户名格式错误时的逻辑 + info.info(tm('AlertInfo.login.invalidUsername')) return false } return true } -// 判断输入的用户名和密码字段是否合法 -const isValidInput = (): boolean => { - // 如果输入为空直接返回 false - if (!isEmptyInput()) { - return false - } - if (!isValidName(loginForm.name) && !isValidEmail(loginForm.name)) { - // 输入的用户名格式错误时的逻辑 - info.info(tm('AlertInfo.login.invalidUsername')) +const checkPassword = (password: string) => { + if (!password.trim()) { + // 提示用户输入的密码为空 + Message('Password cannot be empty', '密码不可为空', 'warn') 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()) { - return - } - // 未完成人机身份验证提示信息，直接返回 - if (!isCaptureSuccessful.value) { - message( - 'Please click above to complete the human verification', - '请点击上方完成人机身份验证', - 'warn' - ) + // 检查用户输入,人机验证 + const result = checkLogin( + loginForm.name, + loginForm.password, + isCaptureSuccessful.value + ) + 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; diff --git a/src/views/login/components/Register.vue b/src/views/login/components/Register.vue index f67cbd72..d6e0da67 100644 --- a/src/views/login/components/Register.vue +++ b/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>({ 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() - .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 { - } - }) - .catch((error) => { - console.log(error) - }) + const res = await useKUNGalgameUserStore().register({ + name: registerForm.name, + email: registerForm.email, + password: registerForm.password, + code: registerForm.code, + }) + + // 如果请求成功跳转到主页 + if (res.code === 200) { + router.push('/') + message('Register successfully!', '注册成功！', 'success') + info.info(tm('AlertInfo.login.success')) + } else { + message('Register failed!', '注册失败！', 'error') + } } diff --git a/src/views/login/components/registerForm.ts b/src/views/login/utils/registerForm.ts similarity index 100% rename from src/views/login/components/registerForm.ts rename to src/views/login/utils/registerForm.ts