refactor: 首次登录重置密码

apps/web-antd/src/api/core/auth.ts

@@ -52,6 +52,7 @@ export namespace AuthApi {
     password: string;
     mobile: string;
     code: string;
+    username: string;
   }
 
   /** 社交快捷登录接口参数 */

apps/web-antd/src/locales/langs/en-US/page.json

@@ -4,7 +4,8 @@
     "register": "Register",
     "codeLogin": "Code Login",
     "qrcodeLogin": "Qr Code Login",
-    "forgetPassword": "Forget Password"
+    "forgetPassword": "Forget Password",
+    "resetPassword": "Reset Password"
   },
   "dashboard": {
     "title": "Dashboard",

apps/web-antd/src/locales/langs/zh-CN/page.json

@@ -4,7 +4,8 @@
     "register": "注册",
     "codeLogin": "验证码登录",
     "qrcodeLogin": "二维码登录",
-    "forgetPassword": "忘记密码"
+    "forgetPassword": "忘记密码",
+    "resetPassword": "重置密码"
   },
   "dashboard": {
     "title": "首页",

apps/web-antd/src/router/routes/core.ts

@@ -82,6 +82,15 @@ const coreRoutes: RouteRecordRaw[] = [
           title: $t('page.auth.forgetPassword'),
         },
       },
+      {
+        name: 'ResetPassword',
+        path: 'reset-password',
+        component: () =>
+          import('#/views/_core/authentication/reset-password.vue'),
+        meta: {
+          title: $t('page.auth.resetPassword'),
+        },
+      },
       {
         name: 'Register',
         path: 'register',

apps/web-antd/src/store/auth.ts

@@ -87,6 +87,11 @@ export const useAuthStore = defineStore('auth', () => {
             message: $t('authentication.loginSuccess'),
           });
         }
+      } else if (type === 'username') {
+        router.push({
+          name: 'ResetPassword',
+          query: { username: params.username },
+        });
       }
     } finally {
       loginLoading.value = false;

apps/web-antd/src/views/_core/authentication/reset-password.vue

@@ -0,0 +1,174 @@
+<script lang="ts" setup>
+import type { VbenFormSchema } from '@vben/common-ui';
+import type { Recordable } from '@vben/types';
+
+import type { AuthApi } from '#/api';
+
+import { computed, onMounted, ref } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+
+import { AuthenticationResetPassword, z } from '@vben/common-ui';
+import { isTenantEnable } from '@vben/hooks';
+import { $t } from '@vben/locales';
+import { useAccessStore } from '@vben/stores';
+
+import { message } from 'ant-design-vue';
+
+import { smsResetPassword } from '#/api';
+import { getTenantByWebsite, getTenantSimpleList } from '#/api/core/auth';
+import { useAuthStore } from '#/store';
+
+defineOptions({ name: 'ForgetPassword' });
+
+const authStore = useAuthStore();
+
+const route = useRoute();
+
+const accessStore = useAccessStore();
+const router = useRouter();
+const tenantEnable = isTenantEnable();
+
+const loading = ref(false);
+const CODE_LENGTH = 4;
+const forgetPasswordRef = ref();
+
+/** 获取租户列表，并默认选中 */
+const tenantList = ref<AuthApi.TenantResult[]>([]); // 租户列表
+async function fetchTenantList() {
+  if (!tenantEnable) {
+    return;
+  }
+  try {
+    // 获取租户列表、域名对应租户
+    const websiteTenantPromise = getTenantByWebsite(window.location.hostname);
+    tenantList.value = await getTenantSimpleList();
+
+    // 选中租户：域名 > store 中的租户 > 首个租户
+    let tenantId: null | number = null;
+    const websiteTenant = await websiteTenantPromise;
+    if (websiteTenant?.id) {
+      tenantId = websiteTenant.id;
+    }
+    // 如果没有从域名获取到租户，尝试从 store 中获取
+    if (!tenantId && accessStore.tenantId) {
+      tenantId = accessStore.tenantId;
+    }
+    // 如果还是没有租户，使用列表中的第一个
+    if (!tenantId && tenantList.value?.[0]?.id) {
+      tenantId = tenantList.value[0].id;
+    }
+
+    // 设置选中的租户编号
+    accessStore.setTenantId(tenantId);
+    forgetPasswordRef.value
+      .getFormApi()
+      .setFieldValue('tenantId', tenantId?.toString());
+  } catch (error) {
+    console.error('获取租户列表失败:', error);
+  }
+}
+
+/** 组件挂载时获取租户信息 */
+onMounted(() => {
+  fetchTenantList();
+});
+
+const formSchema = computed((): VbenFormSchema[] => {
+  return [
+    {
+      component: 'VbenSelect',
+      componentProps: {
+        options: tenantList.value.map((item) => ({
+          label: item.name,
+          value: item.id.toString(),
+        })),
+        placeholder: $t('authentication.tenantTip'),
+      },
+      fieldName: 'tenantId',
+      label: $t('authentication.tenant'),
+      rules: z.string().min(1, { message: $t('authentication.tenantTip') }),
+      dependencies: {
+        triggerFields: ['tenantId'],
+        if: tenantEnable,
+        trigger(values) {
+          if (values.tenantId) {
+            accessStore.setTenantId(Number(values.tenantId));
+          }
+        },
+      },
+    },
+    {
+      component: 'VbenInputPassword',
+      componentProps: {
+        passwordStrength: true,
+        placeholder: $t('authentication.password'),
+      },
+      fieldName: 'password',
+      label: $t('authentication.password'),
+      renderComponentContent() {
+        return {
+          strengthText: () => $t('authentication.passwordStrength'),
+        };
+      },
+      rules: z.string().min(1, { message: $t('authentication.passwordTip') }),
+    },
+    {
+      component: 'VbenInputPassword',
+      componentProps: {
+        placeholder: $t('authentication.confirmPassword'),
+      },
+      dependencies: {
+        rules(values) {
+          const { password } = values;
+          return z
+            .string({ required_error: $t('authentication.passwordTip') })
+            .min(1, { message: $t('authentication.passwordTip') })
+            .refine((value) => value === password, {
+              message: $t('authentication.confirmPasswordTip'),
+            });
+        },
+        triggerFields: ['password'],
+      },
+      fieldName: 'confirmPassword',
+      label: $t('authentication.confirmPassword'),
+    },
+  ];
+});
+
+/**
+ * 处理重置密码操作
+ * @param values 表单数据
+ */
+async function handleSubmit(values: Recordable<any>) {
+  loading.value = true;
+  try {
+    const { mobile, code, password } = values;
+    const resetForm = {
+      mobile,
+      code,
+      password,
+      username: Array.isArray(route?.query?.username)
+        ? (route.query.username[0] ?? '')
+        : (route?.query?.username ?? ''),
+    };
+    await smsResetPassword(resetForm);
+    await message.success($t('authentication.resetPasswordSuccess'), 1);
+    // 重置成功后跳转到首页
+    // router.push('/');
+    await authStore.authLogin('username', resetForm);
+  } catch (error) {
+    console.error('重置密码失败:', error);
+  } finally {
+    loading.value = false;
+  }
+}
+</script>
+
+<template>
+  <AuthenticationResetPassword
+    ref="forgetPasswordRef"
+    :form-schema="formSchema"
+    :loading="loading"
+    @submit="handleSubmit"
+  />
+</template>

packages/effects/common-ui/src/ui/authentication/index.ts

@@ -6,4 +6,5 @@ export { default as AuthenticationLoginExpiredModal } from './login-expired-moda
 export { default as AuthenticationLogin } from './login.vue';
 export { default as AuthenticationQrCodeLogin } from './qrcode-login.vue';
 export { default as AuthenticationRegister } from './register.vue';
+export { default as AuthenticationResetPassword } from './reset-password.vue';
 export type { AuthenticationProps } from './types';

packages/effects/common-ui/src/ui/authentication/reset-password.vue

@@ -0,0 +1,116 @@
+<script setup lang="ts">
+import type { VbenFormSchema } from '@vben-core/form-ui';
+
+import { computed, reactive } from 'vue';
+import { useRouter } from 'vue-router';
+
+import { $t } from '@vben/locales';
+
+import { useVbenForm } from '@vben-core/form-ui';
+import { VbenButton } from '@vben-core/shadcn-ui';
+
+import Title from './auth-title.vue';
+
+interface Props {
+  formSchema: VbenFormSchema[];
+  /**
+   * @zh_CN 是否处于加载处理状态
+   */
+  loading?: boolean;
+  /**
+   * @zh_CN 登录路径
+   */
+  loginPath?: string;
+  /**
+   * @zh_CN 标题
+   */
+  title?: string;
+  /**
+   * @zh_CN 描述
+   */
+  subTitle?: string;
+  /**
+   * @zh_CN 按钮文本
+   */
+  submitButtonText?: string;
+}
+
+defineOptions({
+  name: 'ForgetPassword',
+});
+
+const props = withDefaults(defineProps<Props>(), {
+  loading: false,
+  loginPath: '/auth/login',
+  submitButtonText: '',
+  subTitle: '',
+  title: '',
+});
+
+const emit = defineEmits<{
+  submit: [Record<string, any>];
+}>();
+
+const [Form, formApi] = useVbenForm(
+  reactive({
+    commonConfig: {
+      hideLabel: true,
+      hideRequiredMark: true,
+    },
+    schema: computed(() => props.formSchema),
+    showDefaultActions: false,
+  }),
+);
+
+const router = useRouter();
+
+async function handleSubmit() {
+  const { valid } = await formApi.validate();
+  const values = await formApi.getValues();
+  if (valid) {
+    emit('submit', values);
+  }
+}
+
+function goToLogin() {
+  router.push(props.loginPath);
+}
+
+defineExpose({
+  getFormApi: () => formApi,
+});
+</script>
+
+<template>
+  <div>
+    <Title>
+      <slot name="title">
+        {{ title || $t('authentication.resetPassword') }}
+      </slot>
+      <template #desc>
+        <slot name="subTitle">
+          {{ subTitle || $t('authentication.firstLoginResetPassword') }}
+        </slot>
+      </template>
+    </Title>
+    <Form />
+
+    <div>
+      <VbenButton
+        :class="{
+          'cursor-wait': loading,
+        }"
+        aria-label="submit"
+        class="mt-2 w-full"
+        @click="handleSubmit"
+      >
+        <slot name="submitButtonText">
+          {{ submitButtonText || $t('authentication.resetPassword') }}
+        </slot>
+      </VbenButton>
+      <VbenButton class="mt-4 w-full" variant="outline" @click="goToLogin()">
+        {{ $t('common.back') }}
+      </VbenButton>
+    </div>
+  </div>
+</template>

packages/locales/src/langs/en-US/authentication.json

@@ -33,6 +33,7 @@
   "passwordStrength": "Use 8 or more characters with a mix of letters, numbers & symbols",
   "forgetPassword": "Forget Password?",
   "forgetPasswordSubtitle": "Enter your email and we'll send you instructions to reset your password",
+  "firstLoginResetPassword": "Please reset your password on first login",
   "resetPasswordSuccess": "Reset password success",
   "emailTip": "Please enter email",
   "emailValidErrorTip": "The email format you entered is incorrect",

packages/locales/src/langs/zh-CN/authentication.json

@@ -33,6 +33,7 @@
   "passwordStrength": "使用 8 个或更多字符，混合字母、数字和符号",
   "forgetPassword": "忘记密码?",
   "forgetPasswordSubtitle": "输入您的电子邮件，我们将向您发送重置密码的连接",
+  "firstLoginResetPassword": "首次登录请重置密码",
   "resetPasswordSuccess": "重置密码成功",
   "emailTip": "请输入邮箱",
   "emailValidErrorTip": "你输入的邮箱格式不正确",