feat: Add reset password (#123)

Author: cwandev

mock/modules/user.mock.ts

@@ -48,4 +48,12 @@ export default defineMock([
       return builder(code)
     },
   },
+  {
+    url: '/api/user/reset-password',
+    delay: 1000,
+    body: () => {
+      const res = true
+      return builder(res)
+    },
+  },
 ])

src/api/user.ts

@@ -30,3 +30,7 @@ export function getUserInfo() {
 export function getEmailCode(): Promise<any> {
   return request.get('/user/email-code')
 }
+
+export function resetPassword(): Promise<any> {
+  return request.post('/user/reset-password')
+}

src/locales/en-US.json

@@ -46,30 +46,31 @@
     "logout": "Sign Out",
     "email": "Email",
     "password": "Password",
-    "pleaseEnterEmail;": "Please enter email",
+    "pleaseEnterEmail": "Please enter email",
     "pleaseEnterPassword": "Please enter password",
     "sign-up": "Click to sign up",
-    "forgot-password": "Forgot Password?"
+    "forgot-password": "Forgot password?"
   },
   "forgot-password": {
     "email": "Email",
     "code": "Code",
     "password": "Password",
     "comfirmPassword": "Password again",
     "pleaseEnterEmail": "Please enter email",
-    "pleaseEnterCode": "Please enter Code",
+    "pleaseEnterCode": "Please enter code",
     "pleaseEnterPassword": "Please enter password",
     "pleaseEnterConfirmPassword": "Please enter password again",
+    "passwordsDoNotMatch": "Passwords do not match",
     "confirm": "Confirm",
     "backToLogin": "Back to login",
     "getCode": "Get code",
-    "gettingCode": "Getting Code",
-    "sendCodeSuccess": "Sent, the code is"
-
+    "gettingCode": "Getting code",
+    "sendCodeSuccess": "Sent, the code is",
+    "passwordResetSuccee": "Password reset succeeded"
   },
   "settings": {
     "logout": "Sign Out",
-    "currentVersion": "Current version",
+    "currentVersion": "Current Version",
     "comfirmTitle": "Confirm Exit?"
   }
 }

src/locales/zh-CN.json

@@ -60,11 +60,13 @@
     "pleaseEnterCode": "请输入验证码",
     "pleaseEnterPassword": "请输入密码",
     "pleaseEnterConfirmPassword": "请再次输入密码",
+    "passwordsDoNotMatch": "两次输入的密码不一致",
     "confirm": "确认",
     "backToLogin": "返回登录",
     "getCode": "获取验证码",
     "gettingCode": "获取中",
-    "sendCodeSuccess": "已发送，验证码为"
+    "sendCodeSuccess": "已发送，验证码为",
+    "passwordResetSuccee": "密码重置成功"
   },
   "settings": {
     "logout": "退出登录",

src/pages/forgot-password/index.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { type RouteMap, useRouter } from 'vue-router'
+import { useRouter } from 'vue-router'
+import type { FieldRule } from 'vant'
 import { useUserStore } from '@/stores'
 
 const { t } = useI18n()
@@ -14,6 +15,8 @@ const postData = reactive({
   confirmPassword: '',
 })
 
+const validatorPassword = (val: string) => val === postData.password
+
 const rules = reactive({
   email: [
     { required: true, message: t('forgot-password.pleaseEnterEmail') },
@@ -26,20 +29,20 @@ const rules = reactive({
   ],
   confirmPassword: [
     { required: true, message: t('forgot-password.pleaseEnterConfirmPassword') },
-  ],
+    { required: true, validator: validatorPassword, message: t('forgot-password.passwordsDoNotMatch') },
+  ] as FieldRule[],
 })
 
-async function reset(values: any) {
+async function reset() {
   try {
     loading.value = true
-    await userStore.login({ ...postData, ...values })
-    const { redirect, ...othersQuery } = router.currentRoute.value.query
-    router.push({
-      name: (redirect as keyof RouteMap) || 'home',
-      query: {
-        ...othersQuery,
-      },
-    })
+
+    const res = await userStore.reset()
+
+    if (res.code === 0) {
+      showNotify({ type: 'success', message: t('forgot-password.passwordResetSuccee') })
+      router.push({ name: 'login' })
+    }
   }
   finally {
     loading.value = false
@@ -68,13 +71,13 @@ async function getCode() {
 }
 
 function handleBackLogin() {
-  router.replace({ name: 'login' })
+  router.push({ name: 'login' })
 }
 </script>
 
 <template>
   <div class="m-x-a w-7xl text-center">
-    <van-form :model="postData" :rules="rules" @submit="reset">
+    <van-form :model="postData" :rules="rules" validate-trigger="onSubmit" @submit="reset">
       <div class="overflow-hidden rounded-3xl">
         <van-field
           v-model.trim="postData.email"

src/pages/login/index.vue

@@ -61,7 +61,7 @@ function handleReset() {
       <van-image :src="dark ? logoDark : logo" class="h-120 w-120" />
     </div>
 
-    <van-form :model="postData" :rules="rules" @submit="login">
+    <van-form :model="postData" :rules="rules" validate-trigger="onSubmit" @submit="login">
       <div class="overflow-hidden rounded-3xl">
         <van-field
           v-model="postData.email"

src/stores/modules/user.ts

@@ -1,6 +1,6 @@
 import { defineStore } from 'pinia'
 import type { LoginData, UserState } from '@/api/user'
-import { getEmailCode, getUserInfo, login as userLogin, logout as userLogout } from '@/api/user'
+import { getEmailCode, getUserInfo, resetPassword, login as userLogin, logout as userLogout } from '@/api/user'
 import { clearToken, setToken } from '@/utils/auth'
 
 const InitUserInfo = {
@@ -57,12 +57,21 @@ export const useUserStore = defineStore('user', () => {
     catch {}
   }
 
+  const reset = async () => {
+    try {
+      const data = await resetPassword()
+      return data
+    }
+    catch {}
+  }
+
   return {
     userInfo,
     info,
     login,
     logout,
     getCode,
+    reset,
   }
 }, {
   persist: true,