feat 找回密码

packages/ui/certd-client/src/locales/langs/en-US/authentication.ts

@@ -57,6 +57,7 @@ export default {
   passwordPlaceholder: "Please enter your password",
   mobilePlaceholder: "Please enter your mobile number",
   loginButton: "Log In",
+  forgotPassword: "Forgot password?",
   forgotAdminPassword: "Forgot admin password?",
   registerLink: "Register",
 

packages/ui/certd-client/src/locales/langs/zh-CN/authentication.ts

@@ -57,6 +57,7 @@ export default {
   passwordPlaceholder: "请输入密码",
   mobilePlaceholder: "请输入手机号",
   loginButton: "登录",
+  forgotPassword: "忘记密码？",
   forgotAdminPassword: "忘记管理员密码？",
   registerLink: "注册",
 

packages/ui/certd-client/src/router/source/outside.ts

@@ -24,6 +24,14 @@ export const outsideResource = [
         path: "/register",
         component: "/framework/register/index.vue",
       },
+      {
+        meta: {
+          title: "找回密码",
+        },
+        name: "forgotPassword",
+        path: "/forgotPassword",
+        component: "/framework/forgot-password/index.vue",
+      },
     ],
   },
   ...errorPage,

packages/ui/certd-client/src/store/user/api.user.ts

@@ -20,6 +20,17 @@ export interface SmsLoginReq {
   randomStr: string;
 }
 
+export interface ForgotPasswordReq {
+  forgotPasswordType: string;
+  input: string;
+  randomStr: string;
+  imgCode: string;
+  validateCode: string;
+
+  password: string;
+  confirmPassword: string;
+}
+
 export interface UserInfoRes {
   id: string | number;
   username: string;
@@ -43,6 +54,13 @@ export async function register(user: RegisterReq): Promise<UserInfoRes> {
     data: user,
   });
 }
+export async function forgotPassword(data: ForgotPasswordReq): Promise<any> {
+  return await request({
+    url: "/forgotPassword",
+    method: "post",
+    data: data,
+  });
+}
 export async function logout() {
   return await request({
     url: "/logout",

packages/ui/certd-client/src/store/user/index.ts

@@ -4,7 +4,7 @@ import router from "../../router";
 import { LocalStorage } from "/src/utils/util.storage";
 // @ts-ignore
 import * as UserApi from "./api.user";
-import { RegisterReq, SmsLoginReq } from "./api.user";
+import { ForgotPasswordReq, RegisterReq, SmsLoginReq } from "./api.user";
 // @ts-ignore
 import { LoginReq, UserInfoRes } from "/@/store/user/api.user";
 import { message, Modal, notification } from "ant-design-vue";
@@ -67,6 +67,13 @@ export const useUserStore = defineStore({
       });
       await router.replace("/login");
     },
+    async forgotPassword(params: ForgotPasswordReq): Promise<any> {
+      await UserApi.forgotPassword(params);
+      notification.success({
+        message: "密码已重置，请登录",
+      });
+      await router.replace("/login");
+    },
     /**
      * @description: login
      */

packages/ui/certd-client/src/views/framework/forgot-password/index.vue

@@ -0,0 +1,163 @@
+<template>
+  <div class="main forgot-password-page">
+    <a-form
+      ref="formRef"
+      class="user-layout-forgot-password"
+      name="custom-validation"
+      :model="formState"
+      :rules="rules"
+      v-bind="layout"
+      :label-col="{ span: 6 }"
+      @finish="handleFinish"
+      @finish-failed="handleFinishFailed"
+    >
+      <a-tabs v-model:active-key="forgotPasswordType" :destroyInactiveTabPane="true">
+        <a-tab-pane key="email" tab="邮箱找回">
+          <a-form-item has-feedback name="input" label="邮箱">
+            <a-input v-model:value="formState.input" placeholder="邮箱" size="large" autocomplete="off">
+              <template #prefix>
+                <fs-icon icon="ion:mail-outline"></fs-icon>
+              </template>
+            </a-input>
+          </a-form-item>
+          <a-form-item has-feedback name="validateCode" label="邮件验证码">
+            <email-code v-model:value="formState.validateCode" :img-code="formState.imgCode" :email="formState.input" :random-str="formState.randomStr" />
+          </a-form-item>
+        </a-tab-pane>
+        <a-tab-pane key="mobile" tab="手机号找回">
+          <a-form-item required has-feedback name="input" label="手机号">
+            <a-input v-model:value="formState.input" placeholder="手机号" autocomplete="off">
+              <template #prefix>
+                <fs-icon icon="ion:phone-portrait-outline"></fs-icon>
+              </template>
+            </a-input>
+          </a-form-item>
+          <a-form-item name="validateCode" label="手机验证码">
+            <sms-code v-model:value="formState.validateCode" :img-code="formState.imgCode" :mobile="formState.input" :phone-code="formState.phoneCode" :random-str="formState.randomStr" />
+          </a-form-item>
+        </a-tab-pane>
+      </a-tabs>
+
+      <a-form-item has-feedback name="imgCode" label="图片验证码">
+        <image-code ref="imageCodeRef" v-model:value="formState.imgCode" v-model:random-str="formState.randomStr"></image-code>
+      </a-form-item>
+
+      <a-form-item has-feedback name="password" label="新密码">
+        <a-input-password v-model:value="formState.password" placeholder="新密码" size="large" autocomplete="off">
+          <template #prefix>
+            <fs-icon icon="ion:lock-closed-outline"></fs-icon>
+          </template>
+        </a-input-password>
+      </a-form-item>
+      <a-form-item has-feedback name="confirmPassword" label="确认密码">
+        <a-input-password v-model:value="formState.confirmPassword" placeholder="确认密码" size="large" autocomplete="off">
+          <template #prefix>
+            <fs-icon icon="ion:lock-closed-outline"></fs-icon>
+          </template>
+        </a-input-password>
+      </a-form-item>
+      <a-form-item>
+        <a-button type="primary" size="large" html-type="submit" class="submit-button"> 找回密码</a-button>
+
+        <div class="mt-2">
+          <a href="https://certd.docmirror.cn/guide/use/forgotpasswd/" target="_blank"> 管理员无绑定邮箱或MFA丢失找回 </a>
+        </div>
+      </a-form-item>
+    </a-form>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, reactive, ref, toRaw, watch } from "vue";
+import ImageCode from "/@/views/framework/login/image-code.vue";
+import EmailCode from "/@/views/framework/register/email-code.vue";
+import SmsCode from "/@/views/framework/login/sms-code.vue";
+import { utils } from "@fast-crud/fast-crud";
+import { useUserStore } from "/@/store/user";
+
+defineOptions({
+  name: "ForgotPasswordPage",
+});
+
+const rules = {
+  input: [{ required: true }],
+  validateCode: [{ required: true }],
+  imgCode: [{ required: true }, { min: 4, max: 4, message: "请输入4位图片验证码" }],
+  password: [{ required: true, trigger: "change", message: "请输入密码" }],
+  confirmPassword: [
+    { required: true, trigger: "change", message: "请确认密码" },
+    {
+      validator: async (rule: any, value: any) => {
+        if (value && value !== formState.password) {
+          throw new Error("两次输入密码不一致");
+        }
+        return true;
+      },
+    },
+  ],
+};
+const layout = {
+  labelCol: {
+    span: 0,
+  },
+  wrapperCol: {
+    span: 24,
+  },
+};
+
+const forgotPasswordType = ref();
+const userStore = useUserStore();
+const formRef = ref();
+const imageCodeRef = ref();
+
+const formState: any = reactive({
+  input: "",
+  randomStr: "",
+  imgCode: "",
+  phoneCode: "86",
+  validateCode: "",
+
+  password: "",
+  confirmPassword: "",
+});
+
+// TODO 这里配置不同的找回方式
+onMounted(() => {
+  forgotPasswordType.value = "email";
+});
+
+// 监控找回类型变化
+watch(forgotPasswordType, () => {
+  formState.input = "";
+  formState.validateCode = "";
+  imageCodeRef.value.resetImageCode();
+  formRef.value.clearValidate(Object.keys(formState).filter(key => !["password", "confirmPassword"].includes(key)));
+});
+
+const handleFinish = async (values: any) => {
+  await userStore.forgotPassword(
+    toRaw({
+      type: forgotPasswordType.value,
+      input: formState.input,
+      randomStr: formState.randomStr,
+      imgCode: formState.imgCode,
+      validateCode: formState.validateCode,
+      password: formState.password,
+      confirmPassword: formState.confirmPassword,
+    }) as any
+  );
+};
+
+const handleFinishFailed = (errors: any) => {
+  utils.logger.log(errors);
+};
+</script>
+<style scoped lang="less">
+.forgot-password-page {
+  .user-layout-forgot-password {
+    .submit-button {
+      width: 100%;
+    }
+  }
+}
+</style>

packages/ui/certd-client/src/views/framework/login/image-code.vue

@@ -11,7 +11,7 @@
   </div>
 </template>
 <script setup lang="ts">
-import { ref, useAttrs } from "vue";
+import { ref, useAttrs, defineExpose } from "vue";
 import { nanoid } from "nanoid";
 
 const props = defineProps<{
@@ -32,5 +32,10 @@ function resetImageCode() {
   imageCodeUrl.value = url + "?randomStr=" + randomStr;
   emit("update:randomStr", randomStr);
 }
+
+defineExpose({
+  resetImageCode,
+})
+
 resetImageCode();
 </script>

packages/ui/certd-client/src/views/framework/login/index.vue

@@ -48,9 +48,9 @@
         </a-button>
 
         <div v-if="!settingStore.isComm" class="mt-2">
-          <a href="https://certd.docmirror.cn/guide/use/forgotpasswd/" target="_blank">
-            {{ t("authentication.forgotAdminPassword") }}
-          </a>
+          <router-link :to="{name: 'forgotPassword'}">
+            {{ t("authentication.forgotPassword") }}
+          </router-link>
         </div>
       </a-form-item>
 

packages/ui/certd-server/src/controller/user/login/forgot-password-controller.ts

@@ -0,0 +1,45 @@
+import { ALL, Body, Controller, Inject, Post, Provide } from '@midwayjs/core';
+import { BaseController, CommonException, Constants, SysSettingsService } from "@certd/lib-server";
+import { CodeService } from '../../../modules/basic/service/code-service.js';
+import { UserService } from '../../../modules/sys/authority/service/user-service.js';
+
+/**
+ */
+@Provide()
+@Controller('/api')
+export class LoginController extends BaseController {
+  @Inject()
+  userService: UserService;
+  @Inject()
+  codeService: CodeService;
+
+  @Inject()
+  sysSettingsService: SysSettingsService;
+
+  @Post('/forgotPassword', { summary: Constants.per.guest })
+  public async forgotPassword(
+    @Body(ALL)
+    body: any,
+  ) {
+    if(body.type === 'email') {
+      this.codeService.checkEmailCode({
+        email: body.input,
+        randomStr: body.randomStr,
+        validateCode: body.validateCode,
+        throwError: true,
+      });
+    } else if(body.type === 'mobile') {
+      await this.codeService.checkSmsCode({
+        mobile: body.input,
+        randomStr: body.randomStr,
+        phoneCode: body.phoneCode,
+        smsCode: body.validateCode,
+        throwError: true,
+      });
+    } else {
+      throw new CommonException('暂不支持的找回类型,请联系管理员找回');
+    }
+    await this.userService.forgotPassword(body);
+    return this.ok();
+  }
+}

packages/ui/certd-server/src/modules/sys/authority/service/user-service.ts

@@ -15,6 +15,7 @@ import { DbAdapter } from '../../../db/index.js';
 import { simpleNanoId, utils } from '@certd/basic';
 
 export type RegisterType = 'username' | 'mobile' | 'email';
+export type ForgotPasswordType = 'mobile' | 'email';
 
 export const AdminRoleId = 1
 /**
@@ -229,6 +230,28 @@ export class UserService extends BaseService<UserEntity> {
     return newUser;
   }
 
+  async forgotPassword(
+    data: {
+      type: ForgotPasswordType; input?: string, phoneCode?: string,
+      randomStr: string, imgCode:string, validateCode: string,
+      password: string, confirmPassword: string,
+    }
+  ) {
+    if(!data.type) {
+      throw new CommonException('找回类型不能为空');
+    }
+    if(data.password !== data.confirmPassword) {
+      throw new CommonException('两次输入的密码不一致');
+    }
+    const user = await this.findOne([{ [data.type]: data.input }]);
+    console.log('user', user)
+    if(!user) {
+      throw new CommonException('用户不存在');
+      // return;
+    }
+    await this.resetPassword(user.id, data.password)
+  }
+
   async changePassword(userId: any, form: any) {
     const user = await this.info(userId);
     const passwordChecked = await this.checkPassword(form.password, user.password, user.passwordVersion);