refactor: 首次登录重置密码

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": "你输入的邮箱格式不正确",