feat: 短信找回密码功能

components/ModalAuthentication.vue

@@ -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,162 +26,300 @@ const items = [
     icon: 'i-tabler-key',
     description: '使用已有账号和密码登录',
   },
+  {
+    key: 'recovery',
+    label: '找回密码',
+    icon: 'i-tabler-lock',
+    description: '忘记密码时，可以通过手机号和验证码重置密码',
+  },
 ]
 
-const accountForm = reactive<req.user.Login>({username: '', password: ''})
+const currentTab = ref(0)
-const smsForm = reactive({mobile: '', sms_code: []})
+
+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>>(
-    username: form.username,
+    'App.User_User.Login',
-    password: form.password,
+    {
-  }).then(res => {
+      username: form.username,
-    final_loading.value = false
+      password: form.password,
-    if (res.ret !== 200) {
-      toast.add({
-        title: '登录失败',
-        description: res.msg || '未知错误',
-        color: 'red',
-        icon: 'i-tabler-circle-x',
-      })
-      return
     }
-    if (!res.data.is_login) {
+  )
-      toast.add({
+    .then((res) => {
-        title: '登录失败',
+      final_loading.value = false
-        description: res.msg || '账号或密码错误',
+      if (res.ret !== 200) {
-        color: 'red',
+        toast.add({
-        icon: 'i-tabler-circle-x',
+          title: '登录失败',
-      })
+          description: res.msg || '未知错误',
-      return
+          color: 'red',
-    }
+          icon: 'i-tabler-circle-x',
-    if (!res.data.token || !res.data.user_id) {
+        })
-      toast.add({
+        return
-        title: '登录失败',
+      }
-        description: res.msg || '无法获取登录状态',
+      if (!res.data.is_login) {
-        color: 'red',
+        toast.add({
-        icon: 'i-tabler-circle-x',
+          title: '登录失败',
-      })
+          description: res.msg || '账号或密码错误',
-      return
+          color: 'red',
-    }
+          icon: 'i-tabler-circle-x',
-    loginState.token = res.data.token
+        })
-    loginState.user.id = res.data.user_id
+        return
-    loginState.updateProfile().then(() => {
+      }
-      loginState.checkSession()
+      if (!res.data.token || !res.data.user_id) {
-      modal.close()
+        toast.add({
-      toast.add({
+          title: '登录失败',
-        title: '登录成功',
+          description: res.msg || '无法获取登录状态',
-        description: `${loginState.user.username}, 欢迎回来`,
+          color: 'red',
-        color: 'primary',
+          icon: 'i-tabler-circle-x',
-        icon: 'i-tabler-login-2',
+        })
-      })
+        return
-    }).catch(err => {
+      }
+      loginState.token = res.data.token
+      loginState.user.id = res.data.user_id
+      loginState
+        .updateProfile()
+        .then(() => {
+          loginState.checkSession()
+          modal.close()
+          toast.add({
+            title: '登录成功',
+            description: `${loginState.user.username}, 欢迎回来`,
+            color: 'primary',
+            icon: 'i-tabler-login-2',
+          })
+        })
+        .catch((err) => {
+          toast.add({
+            title: '登录失败',
+            description: err.msg || '网络错误',
+            color: 'red',
+            icon: 'i-tabler-circle-x',
+          })
+        })
+        .finally(() => {
+          final_loading.value = false
+        })
+    })
+    .catch((err) => {
       toast.add({
         title: '登录失败',
         description: err.msg || '网络错误',
         color: 'red',
         icon: 'i-tabler-circle-x',
       })
-    }).finally(() => {
-      final_loading.value = false
     })
-  }).catch(err => {
-    toast.add({
-      title: '登录失败',
-      description: err.msg || '网络错误',
-      color: 'red',
-      icon: 'i-tabler-circle-x',
-    })
-  })
 }
 
 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>>(
-    mobile: smsForm.mobile,
+    'App.User_User.MobileLogin',
-  }).then(res => {
+    {
-    if (res.ret !== 200) {
+      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
+      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: 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 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(''),
-  }).then(res => {
-    if (res.ret !== 200) {
-      smsForm.sms_code = []
-      toast.add({
-        title: '登录失败',
-        description: res.msg || '未知错误',
-        color: 'red',
-        icon: 'i-tabler-circle-x',
-      })
-      return
-    }
-    if (!res.data.token || !res.data.person_id) {
-      smsForm.sms_code = []
-      toast.add({
-        title: '登录失败',
-        description: res.msg || '无法获取登录状态',
-        color: 'red',
-        icon: 'i-tabler-circle-x',
-      })
-      return
-    }
-    loginState.token = res.data.token
-    loginState.user.id = res.data.person_id
-    loginState.updateProfile().then(() => {
-      loginState.checkSession()
-      modal.close()
-      toast.add({
-        title: '登录成功',
-        description: `${loginState.user.username}, 欢迎回来`,
-        color: 'primary',
-        icon: 'i-tabler-login-2',
-      })
-    }).catch(err => {
-      toast.add({
-        title: '登录失败',
         description: err.msg || '网络错误',
         color: 'red',
         icon: 'i-tabler-circle-x',
       })
-    }).finally(() => {
-      final_loading.value = false
     })
-  }).finally(() => final_loading.value = false)
+}
+
+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(''),
+  })
+    .then((res) => {
+      if (res.ret !== 200) {
+        smsForm.sms_code = []
+        toast.add({
+          title: '登录失败',
+          description: res.msg || '未知错误',
+          color: 'red',
+          icon: 'i-tabler-circle-x',
+        })
+        return
+      }
+      if (!res.data.token || !res.data.person_id) {
+        smsForm.sms_code = []
+        toast.add({
+          title: '登录失败',
+          description: res.msg || '无法获取登录状态',
+          color: 'red',
+          icon: 'i-tabler-circle-x',
+        })
+        return
+      }
+      loginState.token = res.data.token
+      loginState.user.id = res.data.person_id
+      loginState
+        .updateProfile()
+        .then(() => {
+          loginState.checkSession()
+          modal.close()
+          toast.add({
+            title: '登录成功',
+            description: `${loginState.user.username}, 欢迎回来`,
+            color: 'primary',
+            icon: 'i-tabler-login-2',
+          })
+        })
+        .catch((err) => {
+          toast.add({
+            title: '登录失败',
+            description: err.msg || '网络错误',
+            color: 'red',
+            icon: 'i-tabler-circle-x',
+          })
+        })
+        .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"
+          <UButton
-                   @click="modal.close()"/>
+            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">
+            <div
-              <UFormGroup label="用户名" name="username" required>
+              v-if="item.key === 'account'"
-                <UInput v-model="accountForm.username" :disabled="final_loading" required/>
+              class="space-y-3"
+            >
+              <UFormGroup
+                label="用户名"
+                name="username"
+                required
+              >
+                <UInput
+                  v-model="accountForm.username"
+                  :disabled="final_loading"
+                  required
+                />
               </UFormGroup>
-              <UFormGroup label="密码" name="password" required>
+              <UFormGroup
-                <UInput v-model="accountForm.password" :disabled="final_loading" type="password" required/>
+                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">
+            <div
-              <UFormGroup label="手机号" name="mobile" required>
+              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
-                           @click="obtainSmsCode"
+                    :label="
-                           :loading="sms_sending" :disabled="!!sms_counting_down || final_loading"
+                      sms_counting_down
-                           class="text-xs font-bold" color="gray"/>
+                        ? `${sms_counting_down}秒后重发`
+                        : '获取验证码'
+                    "
+                    @click="obtainSmsCode"
+                    :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'">
+            <div
-              <UButton type="submit" color="black" :loading="final_loading">
+              v-if="item.key === 'recovery'"
-                登录
+              class="space-y-3"
-              </UButton>
+            >
+              <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>