feat: Add get verification code (#123)

Author: cwandev

mock/modules/user.mock.ts

@@ -1,4 +1,5 @@
 import { defineMock } from 'vite-plugin-mock-dev-server'
+import { builder } from '../util'
 
 export default defineMock([
   {
@@ -39,4 +40,12 @@ export default defineMock([
       }
     },
   },
+  {
+    url: '/api/user/email-code',
+    delay: 1000,
+    body: () => {
+      const code = '123456'
+      return builder(code)
+    },
+  },
 ])

src/api/typing.ts

@@ -26,3 +26,7 @@ export function logout() {
 export function getUserInfo() {
   return request<UserState>('/user/me')
 }
+
+export function getEmailCode(): Promise<any> {
+  return request.get('/user/email-code')
+}

src/api/user.ts

@@ -62,7 +62,9 @@
     "pleaseEnterConfirmPassword": "Please enter password again",
     "confirm": "Confirm",
     "backToLogin": "Back to login",
-    "getCode": "Get code"
+    "getCode": "Get code",
+    "gettingCode": "Getting Code",
+    "sendCodeSuccess": "Sent, the code is"
 
   },
   "settings": {

src/locales/en-US.json

@@ -62,7 +62,9 @@
     "pleaseEnterConfirmPassword": "请再次输入密码",
     "confirm": "确认",
     "backToLogin": "返回登录",
-    "getCode": "获取验证码"
+    "getCode": "获取验证码",
+    "gettingCode": "获取中",
+    "sendCodeSuccess": "已发送，验证码为"
   },
   "settings": {
     "logout": "退出登录",

src/locales/zh-CN.json

@@ -15,7 +15,7 @@ const postData = reactive({
 })
 
 const rules = reactive({
-  eamil: [
+  email: [
     { required: true, message: t('forgot-password.pleaseEnterEmail') },
   ],
   code: [
@@ -46,6 +46,27 @@ async function reset(values: any) {
   }
 }
 
+const isGettingCode = ref(false)
+
+const buttonText = computed(() => {
+  return isGettingCode.value ? t('forgot-password.gettingCode') : t('forgot-password.getCode')
+})
+
+async function getCode() {
+  if (!postData.email) {
+    showNotify({ type: 'warning', message: t('forgot-password.pleaseEnterEmail') })
+    return
+  }
+
+  isGettingCode.value = true
+  const res = await userStore.getCode()
+  if (res.code === 0) {
+    showNotify({ type: 'success', message: `${t('forgot-password.sendCodeSuccess')}: ${res.result}` })
+  }
+
+  isGettingCode.value = false
+}
+
 function handleBackLogin() {
   router.replace({ name: 'login' })
 }
@@ -56,31 +77,31 @@ function handleBackLogin() {
     <van-form :model="postData" :rules="rules" @submit="reset">
       <div class="overflow-hidden rounded-3xl">
         <van-field
-          v-model="postData.email"
-          :rules="rules.eamil"
+          v-model.trim="postData.email"
+          :rules="rules.email"
           name="email"
           :placeholder="t('forgot-password.email')"
         />
       </div>
 
       <div class="mt-16 overflow-hidden rounded-3xl">
         <van-field
-          v-model="postData.code"
+          v-model.trim="postData.code"
           :rules="rules.code"
           name="code"
           :placeholder="t('forgot-password.code')"
         >
           <template #button>
-            <van-button size="small" type="primary" plain>
-              {{ $t('forgot-password.getCode') }}
+            <van-button size="small" type="primary" plain @click="getCode">
+              {{ buttonText }}
             </van-button>
           </template>
         </van-field>
       </div>
 
       <div class="mt-16 overflow-hidden rounded-3xl">
         <van-field
-          v-model="postData.password"
+          v-model.trim="postData.password"
           type="password"
           :rules="rules.password"
           name="password"
@@ -90,7 +111,7 @@ function handleBackLogin() {
 
       <div class="mt-16 overflow-hidden rounded-3xl">
         <van-field
-          v-model="postData.confirmPassword"
+          v-model.trim="postData.confirmPassword"
           type="password"
           :rules="rules.confirmPassword"
           name="confirmPassword"

src/pages/forgot-password/index.vue

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

src/stores/modules/user.ts

@@ -102,6 +102,7 @@ declare global {
   const shallowReactive: typeof import('vue')['shallowReactive']
   const shallowReadonly: typeof import('vue')['shallowReadonly']
   const shallowRef: typeof import('vue')['shallowRef']
+  const showNotify: typeof import('vant/es')['showNotify']
   const suite: typeof import('vitest')['suite']
   const syncRef: typeof import('@vueuse/core')['syncRef']
   const syncRefs: typeof import('@vueuse/core')['syncRefs']