feat(vben5): Add changing password when login

apps/vben5/apps/app-antd/src/views/_core/authentication/login.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import type { TwoFactorError } from '@abp/account';
+import type { ShouldChangePasswordError, TwoFactorError } from '@abp/account';
 
 import type { ExtendedFormApi, VbenFormSchema } from '@vben/common-ui';
 import type { Recordable } from '@vben/types';
@@ -14,6 +14,7 @@ import { useAbpStore } from '@abp/core';
 import { useAbpConfigApi } from '#/api/core/useAbpConfigApi';
 import { useAuthStore } from '#/store';
 
+import ShouldChangePassword from './should-change-password.vue';
 import ThirdPartyLogin from './third-party-login.vue';
 import TwoFactorLogin from './two-factor-login.vue';
 
@@ -68,6 +69,9 @@ const formSchema = computed((): VbenFormSchema[] => {
 const [TwoFactorModal, twoFactorModalApi] = useVbenModal({
   connectedComponent: TwoFactorLogin,
 });
+const [ShouldChangePasswordModal, changePasswordModalApi] = useVbenModal({
+  connectedComponent: ShouldChangePassword,
+});
 async function onInit() {
   const abpConfig = await getConfigApi();
   abpStore.setApplication(abpConfig);
@@ -81,6 +85,7 @@ async function onLogin(params: Recordable<any>) {
     await authStore.authLogin(params);
   } catch (error) {
     onTwoFactorError(params, error);
+    onShouldChangePasswordError(params, error);
   }
 }
 function onTwoFactorError(params: Recordable<any>, error: any) {
@@ -93,6 +98,16 @@ function onTwoFactorError(params: Recordable<any>, error: any) {
     twoFactorModalApi.open();
   }
 }
+function onShouldChangePasswordError(params: Recordable<any>, error: any) {
+  const scpError = error as ShouldChangePasswordError;
+  if (scpError.changePasswordToken) {
+    changePasswordModalApi.setData({
+      ...scpError,
+      ...params,
+    });
+    changePasswordModalApi.open();
+  }
+}
 
 onMounted(onInit);
 </script>
@@ -111,5 +126,6 @@ onMounted(onInit);
       </template>
     </AuthenticationLogin>
     <TwoFactorModal />
+    <ShouldChangePasswordModal />
   </div>
 </template>

apps/vben5/apps/app-antd/src/views/_core/authentication/should-change-password.vue

@@ -0,0 +1,120 @@
+<script setup lang="ts">
+import { useVbenForm, useVbenModal, z } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+
+import { usePasswordValidator } from '@abp/identity';
+
+import { useAuthStore } from '#/store/auth';
+
+interface FormModel {
+  currentPassword: string;
+  newPassword: string;
+  newPasswordConfirm: string;
+}
+
+interface ModalState {
+  changePasswordToken: string;
+  password: string;
+  username: string;
+  userId: string;
+}
+
+const authStore = useAuthStore();
+const { validate } = usePasswordValidator();
+
+const [Form, formApi] = useVbenForm({
+  schema: [
+    {
+      component: 'InputPassword',
+      fieldName: 'password',
+      label: $t('AbpAccount.DisplayName:CurrentPassword'),
+      rules: 'required',
+    },
+    {
+      component: 'InputPassword',
+      fieldName: 'newPassword',
+      label: $t('AbpAccount.DisplayName:NewPassword'),
+      rules: z
+        .string()
+        .superRefine(async (newPassword, ctx) => {
+          try {
+            await validate(newPassword);
+          } catch (error) {
+            ctx.addIssue({
+              code: z.ZodIssueCode.custom,
+              message: String(error),
+            });
+          }
+        })
+        .refine(
+          async (newPassword) => {
+            const input = (await formApi.getValues()) as FormModel;
+            return input.currentPassword !== newPassword;
+          },
+          {
+            message: $t('AbpAccount.NewPasswordSameAsOld'),
+          },
+        )
+        .refine(
+          async (newPassword) => {
+            const input = (await formApi.getValues()) as FormModel;
+            return input.newPasswordConfirm === newPassword;
+          },
+          {
+            message: $t(
+              'AbpIdentity.Volo_Abp_Identity:PasswordConfirmationFailed',
+            ),
+          },
+        ),
+    },
+    {
+      component: 'InputPassword',
+      fieldName: 'newPasswordConfirm',
+      label: $t('AbpAccount.DisplayName:NewPasswordConfirm'),
+      rules: z.string().refine(
+        async (newPasswordConfirm) => {
+          const input = (await formApi.getValues()) as FormModel;
+          return input.newPassword === newPasswordConfirm;
+        },
+        {
+          message: $t(
+            'AbpIdentity.Volo_Abp_Identity:PasswordConfirmationFailed',
+          ),
+        },
+      ),
+    },
+  ],
+  showDefaultActions: false,
+  handleSubmit: onSubmit,
+});
+const [Modal, modalApi] = useVbenModal({
+  draggable: true,
+  closeOnClickModal: false,
+  closeOnPressEscape: false,
+  async onConfirm() {
+    await formApi.validateAndSubmitForm();
+  },
+});
+async function onSubmit(values: Record<string, any>) {
+  modalApi.setState({ submitting: true });
+  try {
+    const state = modalApi.getData<ModalState>();
+    await authStore.authLogin({
+      username: state.username,
+      password: state.password,
+      NewPassword: values.newPassword,
+      ChangePasswordToken: state.changePasswordToken,
+    });
+  } finally {
+    modalApi.setState({ submitting: false });
+  }
+}
+</script>
+
+<template>
+  <Modal :title="$t('AbpAccount.ResetMyPassword')">
+    <Form />
+  </Modal>
+</template>
+
+<style scoped></style>

apps/vben5/packages/@abp/account/src/types/token.ts

@@ -69,6 +69,11 @@ interface TwoFactorError extends OAuthError {
   userId: string;
 }
 
+interface ShouldChangePasswordError extends OAuthError {
+  changePasswordToken: string;
+  userId: string;
+}
+
 export type {
   OAuthError,
   OAuthTokenRefreshModel,
@@ -76,6 +81,7 @@ export type {
   PasswordTokenRequest,
   PasswordTokenRequestModel,
   QrCodeTokenRequest,
+  ShouldChangePasswordError,
   TokenRequest,
   TokenResult,
   TwoFactorError,