feat(vben5): Implement phone number change

apps/vben5/packages/@abp/account/src/api/useProfileApi.ts

@@ -2,9 +2,11 @@ import type {
   AuthenticatorDto,
   AuthenticatorRecoveryCodeDto,
   ChangePasswordInput,
+  ChangePhoneNumberInput,
   ChangePictureInput,
   ConfirmEmailInput,
   ProfileDto,
+  SendChangePhoneNumberCodeInput,
   SendEmailConfirmCodeDto,
   TwoFactorEnabledDto,
   UpdateProfileDto,
@@ -49,6 +51,30 @@ export function useProfileApi() {
     });
   }
 
+  /**
+   * 发送修改手机号验证码
+   * @param input 参数
+   */
+  function sendChangePhoneNumberCodeApi(
+    input: SendChangePhoneNumberCodeInput,
+  ): Promise<void> {
+    return request('/api/account/my-profile/send-phone-number-change-code', {
+      data: input,
+      method: 'POST',
+    });
+  }
+
+  /**
+   * 修改手机号
+   * @param input 参数
+   */
+  function changePhoneNumberApi(input: ChangePhoneNumberInput): Promise<void> {
+    return request('/api/account/my-profile/change-phone-number', {
+      data: input,
+      method: 'PUT',
+    });
+  }
+
   /**
    * 修改头像
    * @param input 参数
@@ -158,6 +184,7 @@ export function useProfileApi() {
   return {
     cancel,
     changePasswordApi,
+    changePhoneNumberApi,
     changePictureApi,
     changeTwoFactorEnabledApi,
     confirmEmailApi,
@@ -166,6 +193,7 @@ export function useProfileApi() {
     getPictureApi,
     getTwoFactorEnabledApi,
     resetAuthenticatorApi,
+    sendChangePhoneNumberCodeApi,
     sendEmailConfirmLinkApi,
     updateApi,
     verifyAuthenticatorCodeApi,

apps/vben5/packages/@abp/account/src/components/MySetting.vue

@@ -96,6 +96,11 @@ const [ChangePasswordModal, changePasswordModalApi] = useVbenModal({
     () => import('./components/ChangePasswordModal.vue'),
   ),
 });
+const [ChangePhoneNumberModal, changePhoneNumberModalApi] = useVbenModal({
+  connectedComponent: defineAsyncComponent(
+    () => import('./components/ChangePhoneNumberModal.vue'),
+  ),
+});
 function onEmailConfirm() {
   if (query?.confirmToken) {
     emailConfirmModalApi.setData({
@@ -109,6 +114,11 @@ async function onGetProfile() {
   const profile = await getApi();
   myProfile.value = profile;
 }
+async function onPhoneNumberChange(phoneNumber: string) {
+  userStore.$patch((state) => {
+    state.userInfo && (state.userInfo.phoneNumber = phoneNumber);
+  });
+}
 async function onUpdateProfile(input: UpdateProfileDto) {
   Modal.confirm({
     centered: true,
@@ -128,8 +138,7 @@ function onChangePassword() {
   changePasswordModalApi.open();
 }
 function onChangePhoneNumber() {
-  // TODO: onChangePhoneNumber 暂时未实现!
-  console.warn('onChangePhoneNumber 暂时未实现!');
+  changePhoneNumberModalApi.open();
 }
 onMounted(async () => {
   await onGetProfile();
@@ -174,6 +183,7 @@ onMounted(async () => {
     </Card>
     <EmailConfirmModal />
     <ChangePasswordModal />
+    <ChangePhoneNumberModal @change="onPhoneNumberChange" />
   </div>
 </template>
 

apps/vben5/packages/@abp/account/src/components/components/ChangePhoneNumberModal.vue

@@ -0,0 +1,82 @@
+<script setup lang="ts">
+import { useVbenForm, useVbenModal } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+
+import { message } from 'ant-design-vue';
+
+import { useProfileApi } from '../../api';
+
+const emits = defineEmits<{
+  (event: 'change', data: string): void;
+}>();
+
+const { changePhoneNumberApi, sendChangePhoneNumberCodeApi } = useProfileApi();
+
+const [Form, formApi] = useVbenForm({
+  handleSubmit: onSubmit,
+  schema: [
+    {
+      component: 'Input',
+      fieldName: 'newPhoneNumber',
+      label: $t('AbpIdentity.DisplayName:NewPhoneNumber'),
+      rules: 'required',
+    },
+    {
+      component: 'VbenPinInput',
+      componentProps: {
+        createText: (countdown: number) => {
+          const text =
+            countdown > 0
+              ? $t('authentication.sendText', [countdown])
+              : $t('authentication.sendCode');
+          return text;
+        },
+        handleSendCode: onSendCode,
+      },
+      fieldName: 'code',
+      label: $t('AbpIdentity.DisplayName:SmsVerifyCode'),
+      rules: 'required',
+    },
+  ],
+  showDefaultActions: false,
+});
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    await formApi.validateAndSubmitForm();
+  },
+});
+
+async function onSendCode() {
+  const result = await formApi.validateField('newPhoneNumber');
+  if (!result.valid) {
+    throw new Error(result.errors.join('\n'));
+  }
+  const input = await formApi.getValues();
+  await sendChangePhoneNumberCodeApi({
+    newPhoneNumber: input.newPhoneNumber,
+  });
+}
+
+async function onSubmit(values: Record<string, any>) {
+  try {
+    modalApi.setState({ submitting: true });
+    await changePhoneNumberApi({
+      code: values.code,
+      newPhoneNumber: values.newPhoneNumber,
+    });
+    message.success($t('AbpAccount.PhoneNumberChangedMessage'));
+    emits('change', values.newPhoneNumber);
+    modalApi.close();
+  } finally {
+    modalApi.setState({ submitting: false });
+  }
+}
+</script>
+
+<template>
+  <Modal :title="$t('AbpIdentity.PhoneNumber')">
+    <Form />
+  </Modal>
+</template>
+
+<style scoped></style>

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

@@ -36,6 +36,15 @@ interface ChangePasswordInput {
   newPassword: string;
 }
 
+interface ChangePhoneNumberInput {
+  code: string;
+  newPhoneNumber: string;
+}
+
+interface SendChangePhoneNumberCodeInput {
+  newPhoneNumber: string;
+}
+
 interface ChangePictureInput {
   file: File;
 }
@@ -73,9 +82,11 @@ export type {
   AuthenticatorDto,
   AuthenticatorRecoveryCodeDto,
   ChangePasswordInput,
+  ChangePhoneNumberInput,
   ChangePictureInput,
   ConfirmEmailInput,
   ProfileDto,
+  SendChangePhoneNumberCodeInput,
   SendEmailConfirmCodeDto,
   TwoFactorEnabledDto,
   UpdateProfileDto,

apps/vben5/packages/@abp/settings/src/components/settings/SettingForm.vue

@@ -78,7 +78,7 @@ async function onSubmit() {
 }
 
 function onCheckChange(setting: SettingDetail) {
-  setting.value = setting.value === 'true' ? 'false' : 'true';
+  setting.value = setting.value?.toLowerCase() === 'true' ? 'false' : 'true';
   onValueChange(setting);
 }
 
@@ -202,7 +202,7 @@ onMounted(onGet);
                   </Select>
                   <Checkbox
                     v-if="detail.valueType === ValueType.Boolean"
-                    :checked="detail.value === 'true'"
+                    :checked="detail.value?.toLowerCase() === 'true'"
                     @change="onCheckChange(detail)"
                   >
                     {{ detail.displayName }}