忘记密码功能上传

src/api/system/user/index.ts

@@ -16,6 +16,7 @@ export interface UserVO {
   loginDate : Date
   createTime : Date
   userType : string
+  mailKey : string
 }
 
 export const getUserPage = async (params) => {
@@ -86,3 +87,13 @@ export const updateUserStatus = (id: number, status: number) => {
 export const getSimpleUserList = () : Promise<UserVO[]> => {
   return request.get({ url: '/system/user/list-all-simple' })
 }
+
+// 忘记密码
+export const forgetPassword = (data : UserVO) => {
+  return request.put({ url: '/system/user/forgetPassword', data })
+}
+
+// 忘记密码->修改密码
+export const updatePassword = (data : UserVO) => {
+  return request.put({ url: '/system/user/updatePassword', data })
+}

src/permission.ts

@@ -15,7 +15,8 @@ const { loadStart, loadDone } = usePageLoading()
 // 路由不重定向白名单
 const whiteList = [
   '/login',
-  '/aa',
+  '/forgetPassword',
+  '/updatePassword',
   '/social-login',
   '/auth-redirect',
   '/bind',

src/router/modules/remaining.ts

@@ -185,9 +185,19 @@ const remainingRouter: AppRouteRecordRaw[] = [
       noTagsView: true
     }
   },{
-    path: '/aa',
+    path: '/forgetPassword',
-    component: () => import('@/views/login/aa.vue'),
+    component: () => import('@/views/login/forgetPassword.vue'),
-    name: 'Aa',
+    name: 'ForgetPassword',
+    meta: {
+      hidden: true,
+      title: t('router.login'),
+      noTagsView: true
+    }
+  },
+  {
+    path: '/updatePassword',
+    component: () => import('@/views/login/updatePassword.vue'),
+    name: 'UpdatePassword',
     meta: {
       hidden: true,
       title: t('router.login'),

src/views/login/aa.vue

@@ -1,10 +0,0 @@
-<template>
-  <div>11</div>
-</template>
-<script lang="ts" setup>
-
-</script>
-
-<style lang="scss" scoped>
-
-</style>

src/views/login/components/LoginForm.vue

@@ -1,5 +1,6 @@
 <template>
-  <el-form v-show="getShow" ref="formLogin" :model="loginData.loginForm" :rules="LoginRules" class="login-form" label-position="top" label-width="120px" size="large">
+  <el-form v-show="getShow" ref="formLogin" :model="loginData.loginForm" :rules="LoginRules" class="login-form"
+    label-position="top" label-width="120px" size="large">
     <el-row style="margin-right: -10px; margin-left: -10px">
       <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
         <el-form-item>
@@ -8,23 +9,27 @@
       </el-col>
       <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
         <el-form-item v-if="loginData.tenantEnable === 'true'" prop="tenantName">
-          <el-input v-model="loginData.loginForm.tenantName" :placeholder="t('login.tenantNamePlaceholder')" :prefix-icon="iconHouse" link type="primary" />
+          <el-input v-model="loginData.loginForm.tenantName" :placeholder="t('login.tenantNamePlaceholder')"
+            :prefix-icon="iconHouse" link type="primary" />
         </el-form-item>
       </el-col>
       <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
         <el-form-item prop="username">
-          <el-input v-model="loginData.loginForm.username" :placeholder="t('login.usernamePlaceholder')" :prefix-icon="iconAvatar" style="height: 42px;" />
+          <el-input v-model="loginData.loginForm.username" :placeholder="t('login.usernamePlaceholder')"
+            :prefix-icon="iconAvatar" style="height: 42px;" />
         </el-form-item>
       </el-col>
       <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
         <el-form-item prop="password">
-          <el-input v-model="loginData.loginForm.password" :placeholder="t('login.passwordPlaceholder')" :prefix-icon="iconLock" show-password type="password" @keyup.enter="getCode()" style="height: 42px;" />
+          <el-input v-model="loginData.loginForm.password" :placeholder="t('login.passwordPlaceholder')"
+            :prefix-icon="iconLock" show-password type="password" @keyup.enter="getCode()" style="height: 42px;" />
         </el-form-item>
       </el-col>
       <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
         <el-form-item prop="code">
           <div class="flex w-[100%]">
-            <el-input v-model="loginData.loginForm.code" :placeholder="t('login.codePlaceholder')" style="width: 76%;margin-right: 10px;height: 42px;" @keyup.enter="handleLogin()">
+            <el-input v-model="loginData.loginForm.code" :placeholder="t('login.codePlaceholder')"
+              style="width: 76%;margin-right: 10px;height: 42px;" @keyup.enter="handleLogin()">
               <template #prefix>
                 <img src="@/assets/imgs/code.png" alt="" style="width: 16px;height: 16px;" />
               </template>
@@ -44,14 +49,17 @@
               </el-checkbox>
             </el-col>
             <el-col :offset="6" :span="12">
-              <el-link style="float: right" type="primary">{{ t('login.forgetPassword') }}</el-link>
+              <el-link style="float: right" type="primary"
+                @click="handleUpdate()">{{ t('login.forgetPassword') }}</el-link>
+              <!-- <el-button type="text" icon="Edit">忘记密码按钮</el-button> -->
             </el-col>
           </el-row>
         </el-form-item>
       </el-col>
       <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
         <el-form-item>
-          <XButton :loading="loginLoading" :title="t('login.login')" class="w-[100%]" type="primary" @click="handleLogin()" />
+          <XButton :loading="loginLoading" :title="t('login.login')" class="w-[100%]" type="primary"
+            @click="handleLogin()" />
         </el-form-item>
       </el-col>
       <!-- <Verify
@@ -76,7 +84,7 @@ import { usePermissionStore } from '@/store/modules/permission'
   import * as LoginApi from '@/api/login'
   import { LoginStateEnum, useFormValid, useLoginState } from './useLogin'
   import { getCodeImg } from "@/api/login";
-
+  import router from "@/router";
   import { CACHE_KEY, useCache } from '@/hooks/web/useCache'
   import * as DeptApi from '@/api/system/dept'
 
@@ -97,6 +105,7 @@ const loginLoading = ref(false)
   const verify = ref()
   const captchaType = ref('blockPuzzle') // blockPuzzle 滑块 clickWord 点击文字
 
+
   const getShow = computed(() => unref(getLoginState) === LoginStateEnum.LOGIN)
   // 验证码开关
   const captchaEnabled = ref(true);
@@ -169,6 +178,13 @@ const getCookie = () => {
       }
     }
   }
+
+  const handleUpdate = () => {
+    router.push({
+      name: 'ForgetPassword',
+    })
+  };
+
   const loading = ref() // ElLoading.service 返回的实例
   // 登录
   const handleLogin = async (params) => {

src/views/login/forgetPassword.vue

@@ -0,0 +1,71 @@
+<template>
+  <div v-loading="loading" style="display: flex; justify-content: center; align-items: center;">
+    <el-form ref="formSmsLogin" :model="loginData" :rules="rules" label-width="130px" label-position="top" size="large">
+      <div class="title" style="font-size:25px" margin-left="0px">忘记密码</div>
+      <el-row type="flex" justify="center" align="middle">
+        <el-col :span="13">
+          <el-form-item label="请输入用户名" prop="username" align="center">
+            <el-input v-model="loginData.username" placeholder="请输入用户名" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="13">
+          <el-form-item label="请输入邮箱" prop="email">
+            <el-input v-model="loginData.email" placeholder="请输入邮箱" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <div class="dialog-footer">
+      <el-button type="primary" @click="submitForm">确 定</el-button>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup name="forgetPassword">
+  import type { RouteLocationNormalizedLoaded } from 'vue-router'
+  import { useIcon } from '@/hooks/web/useIcon'
+  import { setTenantId, setToken } from '@/utils/auth'
+  import { usePermissionStore } from '@/store/modules/permission'
+  import { getTenantIdByName, sendSmsCode, smsLogin } from '@/api/login'
+  import * as UserApi from '@/api/system/user'
+
+  const { t } = useI18n()
+  const message = useMessage()
+  const permissionStore = usePermissionStore()
+  const formSmsLogin = ref()
+  const loginLoading = ref(false)
+  const iconHouse = useIcon({ icon: 'ep:house' })
+  const iconCellphone = useIcon({ icon: 'ep:cellphone' })
+  const iconCircleCheck = useIcon({ icon: 'ep:circle-check' })
+  const rules = {
+    username: [required],
+    email: [required]
+  }
+  const loginData = reactive({
+    username: '',
+    email: '',
+   
+  })
+  const loading = ref(false);
+  const submitForm = async () => {
+    try {
+      const data = loginData as unknown as UserApi.UserVO
+      await UserApi.forgetPassword(data)
+      message.success(t('common.updateSuccess'))
+      // 发送操作成功的事件
+    } finally {
+      // formLoading.value = false
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  :deep(.anticon) {
+    &:hover {
+      color: var(--el-color-primary) !important;
+    }
+  }
+
+  .smsbtn {
+    margin-top: 33px;
+  }
+</style>

src/views/login/updatePassword.vue

@@ -0,0 +1,77 @@
+<template>
+  <div v-loading="loading" style="display: flex; justify-content: center; align-items: center;">
+    <el-form ref="formSmsLogin" :model="loginData" :rules="rules" label-width="130px" label-position="top" size="large">
+      <div class="title" style="font-size:25px" margin-left="0px">重置密码</div>
+      <el-row type="flex" justify="center" align="middle">
+        <el-col :span="13">
+          <el-form-item label="新密码" prop="password" align="center">
+            <el-input v-model="loginData.password" placeholder="请输入新密码" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="13">
+          <el-form-item label="确认新密码" prop="againPassword">
+            <el-input v-model="loginData.againPassword" placeholder="请再次新密码" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <div class="dialog-footer">
+      <el-button type="primary" @click="submitForm">确 定</el-button>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup name="bb">
+  import type { RouteLocationNormalizedLoaded } from 'vue-router'
+  import { useIcon } from '@/hooks/web/useIcon'
+  import { setTenantId, setToken } from '@/utils/auth'
+  import { usePermissionStore } from '@/store/modules/permission'
+  import { getTenantIdByName, sendSmsCode, smsLogin } from '@/api/login'
+  import * as UserApi from '@/api/system/user'
+
+  const { t } = useI18n()
+  const message = useMessage()
+  const permissionStore = usePermissionStore()
+  const formSmsLogin = ref()
+  const loginLoading = ref(false)
+  const iconHouse = useIcon({ icon: 'ep:house' })
+  const iconCellphone = useIcon({ icon: 'ep:cellphone' })
+  const iconCircleCheck = useIcon({ icon: 'ep:circle-check' })
+  const route = useRoute() //路由信息
+  const rules = {
+    password: [required],
+    againPassword: [required]
+  }
+  const loginData = reactive({
+    password: '',
+    againPassword: '',
+    mailKey: '',
+  })
+  const loading = ref(false);
+  const submitForm = async () => {
+    try {
+      loginData.mailKey = route.query.mailKey;
+      if (loginData.password != loginData.againPassword) {
+        message.error('两次输入的密码不一致，请重新输入!')
+      } else {
+        const data = loginData as unknown as UserApi.UserVO
+        await UserApi.updatePassword(data)
+        // 发送操作成功的事件
+        message.success(t('common.updateSuccess'))
+      }
+    } finally {
+      // formLoading.value = false
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  :deep(.anticon) {
+    &:hover {
+      color: var(--el-color-primary) !important;
+    }
+  }
+
+  .smsbtn {
+    margin-top: 33px;
+  }
+</style>