XuanShengHua/xsh-assistant-next
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: 短信验证码发送错误校验

Browse Source
This commit is contained in:
Timothy Yin
2024-03-22 18:01:45 +08:00
parent 20e5abb963
commit ca05296317
2 changed files with 40 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app.vue
View File

@@ -8,7 +8,7 @@ const loginState = useLoginState()
onMounted(() => {
loginState.checkSession().then(res => {
if (!res) {
if (!res && loginState.token) {
toast.add({
title: '登录失效',
description: '登录已过期，请重新登录',

68
components/ModalAuthentication.vue
View File

@@ -1,6 +1,6 @@
<script setup lang="ts">
import {Label, PinInputInput, PinInputRoot} from 'radix-vue'
import {useFetchWrapped} from "~/composables/useFetchWrapped";
import {useFetchWrapped} from '~/composables/useFetchWrapped';
const toast = useToast()
const modal = useModal()
@@ -16,13 +16,13 @@ const items = [
key: 'sms',
label: '短信登录',
icon: 'i-tabler-message-2',
description: '使用短信验证码登录，未注册的账号将自动注册'
description: '使用短信验证码登录，未注册的账号将自动注册',
},
{
key: 'account',
label: '密码登录',
icon: 'i-tabler-key',
description: '使用已有账号和密码登录'
description: '使用已有账号和密码登录',
},
]
@@ -34,7 +34,7 @@ function onSubmit(form: req.user.Login) {
final_loading.value = true
useFetchWrapped<req.user.Login, BaseResponse<resp.user.Login>>('App.User_User.Login', {
username: form.username,
password: form.password
password: form.password,
}).then(res => {
final_loading.value = false
if (res.ret !== 200) {
@@ -42,7 +42,7 @@ function onSubmit(form: req.user.Login) {
title: '登录失败',
description: res.msg || '未知错误',
color: 'red',
icon: 'i-tabler-circle-x'
icon: 'i-tabler-circle-x',
})
return
}
@@ -51,7 +51,7 @@ function onSubmit(form: req.user.Login) {
title: '登录失败',
description: res.msg || '账号或密码错误',
color: 'red',
icon: 'i-tabler-circle-x'
icon: 'i-tabler-circle-x',
})
return
}
@@ -60,7 +60,7 @@ function onSubmit(form: req.user.Login) {
title: '登录失败',
description: res.msg || '无法获取登录状态',
color: 'red',
icon: 'i-tabler-circle-x'
icon: 'i-tabler-circle-x',
})
return
}
@@ -73,14 +73,14 @@ function onSubmit(form: req.user.Login) {
title: '登录成功',
description: `${loginState.user.username}, 欢迎回来`,
color: 'primary',
icon: 'i-tabler-login-2'
icon: 'i-tabler-login-2',
})
}).catch(err => {
toast.add({
title: '登录失败',
description: err.msg || '网络错误',
color: 'red',
icon: 'i-tabler-circle-x'
icon: 'i-tabler-circle-x',
})
}).finally(() => {
final_loading.value = false
@@ -90,7 +90,7 @@ function onSubmit(form: req.user.Login) {
title: '登录失败',
description: err.msg || '网络错误',
color: 'red',
icon: 'i-tabler-circle-x'
icon: 'i-tabler-circle-x',
})
})
}
@@ -100,8 +100,18 @@ const obtainSmsCode = () => {
sms_sending.value = true
useFetchWrapped<req.user.SmsLogin, BaseResponse<resp.user.SmsLogin>>('App.User_User.MobileLogin', {
mobile: smsForm.mobile
mobile: smsForm.mobile,
}).then(res => {
if (res.ret !== 200) {
sms_sending.value = false
toast.add({
title: '验证码发送失败',
description: res.msg || '未知错误',
color: 'red',
icon: 'i-tabler-circle-x',
})
return
}
sms_triggered.value = true
sms_sending.value = false
sms_counting_down.value = 60 // TODO: save timestamp to localstorage
@@ -117,7 +127,7 @@ const obtainSmsCode = () => {
title: '验证码发送失败',
description: err.msg || '网络错误',
color: 'red',
icon: 'i-tabler-circle-x'
icon: 'i-tabler-circle-x',
})
})
}
@@ -126,7 +136,7 @@ const handle_sms_verify = (e: string[]) => {
final_loading.value = true
useFetchWrapped<req.user.SmsLoginVerify, BaseResponse<resp.user.SmsLoginVerify>>('App.User_User.MobileLoginVerify', {
mobile: smsForm.mobile,
sms_code: e.join('')
sms_code: e.join(''),
}).then(res => {
if (res.ret !== 200) {
smsForm.sms_code = []
@@ -134,7 +144,7 @@ const handle_sms_verify = (e: string[]) => {
title: '登录失败',
description: res.msg || '未知错误',
color: 'red',
icon: 'i-tabler-circle-x'
icon: 'i-tabler-circle-x',
})
return
}
@@ -144,7 +154,7 @@ const handle_sms_verify = (e: string[]) => {
title: '登录失败',
description: res.msg || '无法获取登录状态',
color: 'red',
icon: 'i-tabler-circle-x'
icon: 'i-tabler-circle-x',
})
return
}
@@ -157,14 +167,14 @@ const handle_sms_verify = (e: string[]) => {
title: '登录成功',
description: `${loginState.user.username}, 欢迎回来`,
color: 'primary',
icon: 'i-tabler-login-2'
icon: 'i-tabler-login-2',
})
}).catch(err => {
toast.add({
title: '登录失败',
description: err.msg || '网络错误',
color: 'red',
icon: 'i-tabler-circle-x'
icon: 'i-tabler-circle-x',
})
}).finally(() => {
final_loading.value = false
@@ -232,20 +242,20 @@ const handle_sms_verify = (e: string[]) => {
<div v-if="sms_triggered">
<Label for="pin-input" class="pin-label">验证码</Label>
<PinInputRoot
id="sms-input"
v-model="smsForm.sms_code"
:disabled="sms_sending || final_loading"
placeholder="○"
class="w-full flex gap-2 justify-between md:justify-start items-center mt-1"
@complete="handle_sms_verify"
type="number" otp required
id="sms-input"
v-model="smsForm.sms_code"
:disabled="sms_sending || final_loading"
placeholder="○"
class="w-full flex gap-2 justify-between md:justify-start items-center mt-1"
@complete="handle_sms_verify"
type="number" otp required
>
<PinInputInput
v-for="(id, index) in 4"
:key="id"
:index="index"
class="pin-input"
:autofocus="index === 0"
v-for="(id, index) in 4"
:key="id"
:index="index"
class="pin-input"
:autofocus="index === 0"
/>
</PinInputRoot>
</div>