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

feat: 短信找回密码功能

Browse Source
This commit is contained in:
Timothy Yin
2025-01-20 02:57:50 +08:00
parent 4e8e15f183
commit 8ff6ebd836
1 changed files with 453 additions and 155 deletions
Download Patch File Download Diff File Expand all files Collapse all files

380
components/ModalAuthentication.vue
View File

@@ -1,5 +1,7 @@
<script setup lang="ts">
import { Label, PinInputInput, PinInputRoot } from 'radix-vue'
import { object, string, type InferType } from 'yup'
import type { FormSubmitEvent } from '#ui/types'
import { useFetchWrapped } from '~/composables/useFetchWrapped'
const toast = useToast()
@@ -24,18 +26,30 @@ const items = [
icon: 'i-tabler-key',
description: '使用已有账号和密码登录',
},
{
key: 'recovery',
label: '找回密码',
icon: 'i-tabler-lock',
description: '忘记密码时，可以通过手机号和验证码重置密码',
},
]
const accountForm = reactive<req.user.Login>({username: '', password: ''})
const smsForm = reactive({mobile: '', sms_code: []})
const currentTab = ref(0)
const accountForm = reactive<req.user.Login>({ username: '', password: '' })
const smsForm = reactive({ mobile: '', sms_code: [] })
function onSubmit(form: req.user.Login) {
console.log('Submitted form:', form)
final_loading.value = true
useFetchWrapped<req.user.Login, BaseResponse<resp.user.Login>>('App.User_User.Login', {
useFetchWrapped<req.user.Login, BaseResponse<resp.user.Login>>(
'App.User_User.Login',
{
username: form.username,
password: form.password,
}).then(res => {
}
)
.then((res) => {
final_loading.value = false
if (res.ret !== 200) {
toast.add({
@@ -66,7 +80,9 @@ function onSubmit(form: req.user.Login) {
}
loginState.token = res.data.token
loginState.user.id = res.data.user_id
loginState.updateProfile().then(() => {
loginState
.updateProfile()
.then(() => {
loginState.checkSession()
modal.close()
toast.add({
@@ -75,17 +91,20 @@ function onSubmit(form: req.user.Login) {
color: 'primary',
icon: 'i-tabler-login-2',
})
}).catch(err => {
})
.catch((err) => {
toast.add({
title: '登录失败',
description: err.msg || '网络错误',
color: 'red',
icon: 'i-tabler-circle-x',
})
}).finally(() => {
})
.finally(() => {
final_loading.value = false
})
}).catch(err => {
})
.catch((err) => {
toast.add({
title: '登录失败',
description: err.msg || '网络错误',
@@ -99,9 +118,13 @@ const obtainSmsCode = () => {
smsForm.sms_code = []
sms_sending.value = true
useFetchWrapped<req.user.SmsLogin, BaseResponse<resp.user.SmsLogin>>('App.User_User.MobileLogin', {
useFetchWrapped<req.user.SmsLogin, BaseResponse<resp.user.SmsLogin>>(
'App.User_User.MobileLogin',
{
mobile: smsForm.mobile,
}).then(res => {
}
)
.then((res) => {
if (res.ret !== 200) {
sms_sending.value = false
toast.add({
@@ -115,14 +138,19 @@ const obtainSmsCode = () => {
sms_triggered.value = true
sms_sending.value = false
sms_counting_down.value = 60 // TODO: save timestamp to localstorage
toast.add({title: '短信验证码已发送', color: 'indigo', icon: 'i-tabler-circle-check'})
toast.add({
title: '短信验证码已发送',
color: 'indigo',
icon: 'i-tabler-circle-check',
})
const interval = setInterval(() => {
sms_counting_down.value--
if (sms_counting_down.value <= 0) {
clearInterval(interval)
}
}, 1000)
}).catch(err => {
})
.catch((err) => {
toast.add({
title: '验证码发送失败',
description: err.msg || '网络错误',
@@ -134,10 +162,14 @@ const obtainSmsCode = () => {
const handle_sms_verify = (e: string[]) => {
final_loading.value = true
useFetchWrapped<req.user.SmsLoginVerify, BaseResponse<resp.user.SmsLoginVerify>>('App.User_User.MobileLoginVerify', {
useFetchWrapped<
req.user.SmsLoginVerify,
BaseResponse<resp.user.SmsLoginVerify>
>('App.User_User.MobileLoginVerify', {
mobile: smsForm.mobile,
sms_code: e.join(''),
}).then(res => {
})
.then((res) => {
if (res.ret !== 200) {
smsForm.sms_code = []
toast.add({
@@ -160,7 +192,9 @@ const handle_sms_verify = (e: string[]) => {
}
loginState.token = res.data.token
loginState.user.id = res.data.person_id
loginState.updateProfile().then(() => {
loginState
.updateProfile()
.then(() => {
loginState.checkSession()
modal.close()
toast.add({
@@ -169,17 +203,123 @@ const handle_sms_verify = (e: string[]) => {
color: 'primary',
icon: 'i-tabler-login-2',
})
}).catch(err => {
})
.catch((err) => {
toast.add({
title: '登录失败',
description: err.msg || '网络错误',
color: 'red',
icon: 'i-tabler-circle-x',
})
}).finally(() => {
})
.finally(() => {
final_loading.value = false
})
}).finally(() => final_loading.value = false)
})
.finally(() => (final_loading.value = false))
}
const forgetPasswordState = reactive({
mobile: '',
sms_code: '',
password: '',
})
const forgetPasswordSchema = object({
mobile: string()
.required('请输入手机号')
.matches(/^1[3-9]\d{9}$/, '手机号格式不正确'),
sms_code: string().required('请输入验证码').length(4, '验证码长度为4位'),
password: string().required('请输入新密码').min(6, '密码长度至少为6位'),
})
type ForgetPasswordSchema = InferType<typeof forgetPasswordSchema>
const obtainForgetSmsCode = () => {
forgetPasswordState.sms_code = ''
sms_sending.value = true
useFetchWrapped<req.user.SmsChangePasswordVerify, BaseResponse<{}>>(
'App.User_User.ForgotPasswordSms',
{
mobile: forgetPasswordState.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
toast.add({
title: '短信验证码已发送',
color: 'indigo',
icon: 'i-tabler-circle-check',
})
const interval = setInterval(() => {
sms_counting_down.value--
if (sms_counting_down.value <= 0) {
clearInterval(interval)
}
}, 1000)
})
.catch((err) => {
toast.add({
title: '验证码发送失败',
description: err.msg || '网络错误',
color: 'red',
icon: 'i-tabler-circle-x',
})
})
}
const onForgetPasswordSubmit = (
event: FormSubmitEvent<ForgetPasswordSchema>
) => {
final_loading.value = true
useFetchWrapped<req.user.SmsChangePassword, BaseResponse<{}>>(
'App.User_User.ForgotPassword',
{
mobile: event.data.mobile,
sms_code: event.data.sms_code,
new_password: event.data.password,
}
)
.then((res) => {
final_loading.value = false
if (res.ret !== 200) {
toast.add({
title: '重置密码失败',
description: res.msg || '未知错误',
color: 'red',
icon: 'i-tabler-circle-x',
})
return
}
toast.add({
title: '重置密码成功',
description: '请您继续登录',
color: 'green',
icon: 'i-tabler-circle-check',
})
currentTab.value = 1
})
.catch((err) => {
toast.add({
title: '重置密码失败',
description: err.msg || '未知错误',
color: 'red',
icon: 'i-tabler-circle-x',
})
})
}
</script>
@@ -188,25 +328,41 @@ const handle_sms_verify = (e: string[]) => {
<UCard>
<template #header>
<div class="flex items-center justify-between">
<h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
<h3
class="text-base font-semibold leading-6 text-gray-900 dark:text-white"
>
登录眩生花 AI 助手
</h3>
<UButton color="gray" variant="ghost" icon="i-heroicons-x-mark-20-solid" class="-my-1"
@click="modal.close()"/>
<UButton
color="gray"
variant="ghost"
icon="i-heroicons-x-mark-20-solid"
class="-my-1"
@click="modal.close()"
/>
</div>
</template>
<UTabs :items="items" class="w-full">
<UTabs
:items="items"
class="w-full"
v-model="currentTab"
>
<template #default="{ item, index, selected }">
<div class="flex items-center gap-2 relative truncate">
<span class="truncate">{{ item.label }}</span>
<span v-if="selected" class="absolute -right-4 w-2 h-2 rounded-full bg-primary-500 dark:bg-primary-400"/>
<span
v-if="selected"
class="absolute -right-4 w-2 h-2 rounded-full bg-primary-500 dark:bg-primary-400"
/>
</div>
</template>
<template #item="{ item }">
<UCard @submit.prevent="() => onSubmit(accountForm)">
<template #header>
<p class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
<p
class="text-base font-semibold leading-6 text-gray-900 dark:text-white"
>
{{ item.label }}
</p>
<p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
@@ -214,32 +370,80 @@ const handle_sms_verify = (e: string[]) => {
</p>
</template>
<div v-if="item.key === 'account'" class="space-y-3">
<UFormGroup label="用户名" name="username" required>
<UInput v-model="accountForm.username" :disabled="final_loading" required/>
<div
v-if="item.key === 'account'"
class="space-y-3"
>
<UFormGroup
label="用户名"
name="username"
required
>
<UInput
v-model="accountForm.username"
:disabled="final_loading"
required
/>
</UFormGroup>
<UFormGroup label="密码" name="password" required>
<UInput v-model="accountForm.password" :disabled="final_loading" type="password" required/>
<UFormGroup
label="密码"
name="password"
required
>
<UInput
v-model="accountForm.password"
:disabled="final_loading"
type="password"
required
/>
</UFormGroup>
</div>
<div v-else-if="item.key === 'sms'" class="space-y-3">
<UFormGroup label="手机号" name="mobile" required>
<div
v-else-if="item.key === 'sms'"
class="space-y-3"
>
<UFormGroup
label="手机号"
name="mobile"
required
>
<UButtonGroup class="w-full">
<UInput v-model="smsForm.mobile" :disabled="final_loading" type="sms" class="w-full" required>
<UInput
v-model="smsForm.mobile"
:disabled="final_loading"
type="sms"
class="w-full"
required
>
<template #leading>
<span class="text-gray-500 dark:text-gray-400 text-xs">+86</span>
<span class="text-gray-500 dark:text-gray-400 text-xs">
+86
</span>
</template>
</UInput>
<UButton :label="sms_counting_down ? `${sms_counting_down}秒后重发` : '获取验证码'"
<UButton
:label="
sms_counting_down
? `${sms_counting_down}秒后重发`
: '获取验证码'
"
@click="obtainSmsCode"
:loading="sms_sending" :disabled="!!sms_counting_down || final_loading"
class="text-xs font-bold" color="gray"/>
:loading="sms_sending"
:disabled="!!sms_counting_down || final_loading"
class="text-xs font-bold"
color="gray"
/>
</UButtonGroup>
</UFormGroup>
<Transition name="pin-root">
<div v-if="sms_triggered">
<Label for="pin-input" class="pin-label">验证码</Label>
<Label
for="pin-input"
class="pin-label"
>
验证码
</Label>
<PinInputRoot
id="sms-input"
v-model="smsForm.sms_code"
@@ -247,7 +451,9 @@ const handle_sms_verify = (e: string[]) => {
placeholder="○"
class="w-full flex gap-2 justify-between md:justify-start items-center mt-1"
@complete="handle_sms_verify"
type="number" otp required
type="number"
otp
required
>
<PinInputInput
v-for="(id, index) in 4"
@@ -261,15 +467,107 @@ const handle_sms_verify = (e: string[]) => {
</Transition>
</div>
<template #footer v-if="item.key !== 'sms'">
<UButton type="submit" color="black" :loading="final_loading">
<div
v-if="item.key === 'recovery'"
class="space-y-3"
>
<UForm
class="space-y-3"
:schema="forgetPasswordSchema"
:state="forgetPasswordState"
@submit="onForgetPasswordSubmit"
>
<UFormGroup
label="手机号"
name="mobile"
required
>
<UButtonGroup class="w-full">
<UInput
v-model="forgetPasswordState.mobile"
:disabled="final_loading"
type="tel"
class="w-full"
>
<template #leading>
<span class="text-gray-500 dark:text-gray-400 text-xs">
+86
</span>
</template>
</UInput>
<UButton
:label="
sms_counting_down
? `${sms_counting_down}秒后重发`
: '获取验证码'
"
@click="obtainForgetSmsCode"
:loading="sms_sending"
:disabled="!!sms_counting_down"
class="text-xs font-bold"
color="gray"
/>
</UButtonGroup>
</UFormGroup>
<UFormGroup
label="验证码"
name="sms_code"
required
>
<UInput
v-model="forgetPasswordState.sms_code"
type="sms"
class="w-full"
:disabled="final_loading"
/>
</UFormGroup>
<UFormGroup
label="新密码"
name="password"
required
>
<UInput
v-model="forgetPasswordState.password"
type="password"
:disabled="final_loading"
/>
</UFormGroup>
<div>
<UButton
type="submit"
:loading="final_loading"
>
重置密码
</UButton>
</div>
</UForm>
</div>
<template
#footer
v-if="item.key === 'account'"
>
<div class="flex items-center justify-between">
<UButton
type="submit"
color="black"
:loading="final_loading"
>
登录
</UButton>
<UButton
variant="link"
color="gray"
@click="currentTab = 2"
>
忘记密码
</UButton>
</div>
</template>
</UCard>
</template>
</UTabs>
</UCard>
</UModal>
</template>