finish reset password & fix login

frontend/vben/mock/sys/user.ts

@@ -55,7 +55,7 @@ export default [
         (item) => item.username === username && password === item.password,
       )
       if (!checkUser) {
-        return resultError('Incorrect account or password！')
+        return resultError('Incorrect account or password!')
       }
       const { userId, username: _username, token, realName, desc, roles } = checkUser
       return resultSuccess({
@@ -68,6 +68,19 @@ export default [
       })
     },
   },
+  // mock reset password
+  {
+    url: '/basic-api/resetPassword',
+    timeout: 200,
+    method: 'post',
+    response: ({ body }) => {
+      const { username, phonenum } = body
+      return resultSuccess({
+        msg:
+          '已将用户' + username + '电话' + phonenum + '的重置请求上报, 请耐心等待管理员与您联系!',
+      })
+    },
+  },
   {
     url: '/basic-api/getUserInfo',
     method: 'get',

frontend/vben/src/api/sys/model/userModel.ts

@@ -6,6 +6,14 @@ export interface LoginParams {
   password: string
 }
 
+/**
+ * @description: Reset password interface parameters
+ */
+export interface ResetPasswordParams {
+  username: string
+  phonenum: string
+}
+
 export interface RoleInfo {
   roleName: string
   value: string
@@ -20,6 +28,13 @@ export interface LoginResultModel {
   role: RoleInfo
 }
 
+/**
+ * @description: Reset password interface return value
+ */
+export interface ResetPasswordResultModel {
+  msg: string
+}
+
 /**
  * @description: Get user information return value
  */

frontend/vben/src/api/sys/user.ts

@@ -1,11 +1,18 @@
 import { defHttp } from '/@/utils/http/axios'
-import { LoginParams, LoginResultModel, GetUserInfoModel } from './model/userModel'
+import {
+  LoginParams,
+  LoginResultModel,
+  GetUserInfoModel,
+  ResetPasswordParams,
+  ResetPasswordResultModel,
+} from './model/userModel'
 
 import { ErrorMessageMode } from '/#/axios'
 
 enum Api {
   Login = '/login',
   Logout = '/logout',
+  ResetPassword = '/resetPassword',
   GetUserInfo = '/getUserInfo',
   GetPermCode = '/getPermCode',
   TestRetry = '/testRetry',
@@ -26,6 +33,21 @@ export function loginApi(params: LoginParams, mode: ErrorMessageMode = 'modal')
   )
 }
 
+/**
+ * @description: reset password api
+ */
+export function resetPasswordApi(params: ResetPasswordParams, mode: ErrorMessageMode = 'modal') {
+  return defHttp.post<ResetPasswordResultModel>(
+    {
+      url: Api.ResetPassword,
+      params,
+    },
+    {
+      errorMessageMode: mode,
+    },
+  )
+}
+
 /**
  * @description: getUserInfo
  */

frontend/vben/src/views/sys/login/ForgetPasswordForm.vue

@@ -13,16 +13,16 @@
       <FormItem name="mobile" class="enter-x">
         <Input size="large" v-model:value="formData.mobile" :placeholder="t('sys.login.mobile')" />
       </FormItem>
-      <FormItem name="sms" class="enter-x">
-        <CountdownInput
-          size="large"
-          v-model:value="formData.sms"
-          :placeholder="t('sys.login.smsCode')"
-        />
-      </FormItem>
 
       <FormItem class="enter-x">
-        <Button type="primary" size="large" block @click="handleReset" :loading="loading">
+        <Button
+          type="primary"
+          size="large"
+          block
+          @click="handleReset"
+          :loading="loading"
+          :disabled="!(formData.account && formData.mobile)"
+        >
           {{ t('common.resetText') }}
         </Button>
         <Button size="large" block class="mt-4" @click="handleBackLogin">
@@ -36,13 +36,16 @@
   import { reactive, ref, computed, unref } from 'vue'
   import LoginFormTitle from './LoginFormTitle.vue'
   import { Form, Input, Button } from 'ant-design-vue'
-  import { CountdownInput } from '/@/components/CountDown'
   import { useI18n } from '/@/hooks/web/useI18n'
-  import { useLoginState, useFormRules, LoginStateEnum } from './useLogin'
+  import { useLoginState, useFormRules, LoginStateEnum, useFormValid } from './useLogin'
+  import { resetPasswordApi } from '/@/api/sys/user'
+  import { useMessage } from '/@/hooks/web/useMessage'
+  import { ResetPasswordParams } from '/@/api/sys/model/userModel'
 
   const FormItem = Form.Item
   const { t } = useI18n()
   const { handleBackLogin, getLoginState } = useLoginState()
+  const { notification } = useMessage()
   const { getFormRules } = useFormRules()
 
   const formRef = ref()
@@ -51,14 +54,39 @@
   const formData = reactive({
     account: '',
     mobile: '',
-    sms: '',
+    // sms: '',
   })
 
+  const { validForm } = useFormValid(formRef)
+
   const getShow = computed(() => unref(getLoginState) === LoginStateEnum.RESET_PASSWORD)
 
   async function handleReset() {
     const form = unref(formRef)
     if (!form) return
-    await form.resetFields()
+    const data = await validForm()
+    if (!data) return
+    try {
+      loading.value = true
+      const { msg } = await resetPasswordApi({
+        username: data.account,
+        phonenum: data.mobile,
+      } as ResetPasswordParams)
+      notification.info({
+        message: t('sys.login.forgetFormTitle'),
+        description: msg,
+        duration: 10,
+      })
+    } catch (error) {
+      notification.error({
+        message: (error as Error).name,
+        description: (error as Error).message,
+        duration: 3,
+      })
+    } finally {
+      loading.value = false
+      form.resetFields()
+      handleBackLogin()
+    }
   }
 </script>

frontend/vben/src/views/sys/login/LoginForm.vue

@@ -1,37 +1,28 @@
 <template>
   <LoginFormTitle v-show="getShow" class="enter-x" />
-  <!--<Form
+  <Form
     class="p-4 enter-x"
     :model="formData"
     :rules="getFormRules"
     ref="formRef"
     v-show="getShow"
     @keypress.enter="handleLogin"
-  >-->
-  <Form
-    class="p-4 enter-x"
-    :rules="getFormRules"
-    ref="formRef"
-    v-show="getShow"
-    @keypress.enter="handleLogin"
   >
     <FormItem name="account" class="enter-x">
-      <Input size="large" :placeholder="t('sys.login.userName')" class="fix-auto-fill" />
-      <!--<Input
+      <Input
         size="large"
         v-model:value="formData.account"
         :placeholder="t('sys.login.userName')"
         class="fix-auto-fill"
-      /> -->
+      />
     </FormItem>
     <FormItem name="password" class="enter-x">
-      <InputPassword size="large" visibilityToggle :placeholder="t('sys.login.password')" />
-      <!-- <InputPassword
+      <InputPassword
         size="large"
         visibilityToggle
         v-model:value="formData.password"
         :placeholder="t('sys.login.password')"
-      />-->
+      />
     </FormItem>
 
     <ARow class="enter-x">
@@ -54,7 +45,14 @@
     </ARow>
 
     <FormItem class="enter-x">
-      <Button type="primary" size="large" block @click="handleLogin" :loading="loading">
+      <Button
+        type="primary"
+        size="large"
+        block
+        @click="handleLogin"
+        :loading="loading"
+        :disabled="!(formData.account && formData.password)"
+      >
         {{ t('sys.login.loginButton') }}
       </Button>
       <Button
@@ -81,7 +79,7 @@
   </Form>
 </template>
 <script lang="ts" setup>
-  import { /*reactive,*/ ref, unref, computed } from 'vue'
+  import { reactive, ref, unref, computed } from 'vue'
 
   import { Checkbox, Form, Input, Row, Col, Button } from 'ant-design-vue'
   import LoginFormTitle from './LoginFormTitle.vue'
@@ -92,7 +90,7 @@
   import { useUserStore } from '/@/store/modules/user'
   import { LoginStateEnum, useLoginState, useFormRules, useFormValid } from './useLogin'
   import { useDesign } from '/@/hooks/web/useDesign'
-  //import { onKeyStroke } from '@vueuse/core';
+  import { onKeyStroke } from '@vueuse/core'
 
   const ACol = Col
   const ARow = Row
@@ -110,14 +108,14 @@
   const loading = ref(false)
   const rememberMe = ref(false)
 
-  /*const formData = reactive({
-    account: 'vben',
-    password: '123456',
-  })*/
+  const formData = reactive({
+    account: '',
+    password: '',
+  })
 
   const { validForm } = useFormValid(formRef)
 
-  //onKeyStroke('Enter', handleLogin);
+  onKeyStroke('Enter', handleLogin)
 
   const getShow = computed(() => unref(getLoginState) === LoginStateEnum.LOGIN)
 

frontend/vben/src/views/sys/login/useLogin.ts

@@ -44,7 +44,7 @@ export function useFormRules(formData?: Recordable) {
   const getAccountFormRule = computed(() => createRule(t('sys.login.accountPlaceholder')))
   const getPasswordFormRule = computed(() => createRule(t('sys.login.passwordPlaceholder')))
   // const getSmsFormRule = computed(() => createRule(t('sys.login.smsPlaceholder')))
-  // const getMobileFormRule = computed(() => createRule(t('sys.login.mobilePlaceholder')))
+  const getMobileFormRule = computed(() => createRule(t('sys.login.mobilePlaceholder')))
 
   const validatePolicy = async (_: RuleObject, value: boolean) => {
     return !value ? Promise.reject(t('sys.login.policyPlaceholder')) : Promise.resolve()
@@ -66,7 +66,7 @@ export function useFormRules(formData?: Recordable) {
     const accountFormRule = unref(getAccountFormRule)
     const passwordFormRule = unref(getPasswordFormRule)
     // const smsFormRule = unref(getSmsFormRule)
-    // const mobileFormRule = unref(getMobileFormRule)
+    const mobileFormRule = unref(getMobileFormRule)
 
     /*const mobileRule = {
       sms: smsFormRule,
@@ -89,7 +89,7 @@ export function useFormRules(formData?: Recordable) {
       case LoginStateEnum.RESET_PASSWORD:
         return {
           account: accountFormRule,
-          // ...mobileRule,
+          mobile: mobileFormRule,
         }
 
       // mobile form rules