client-base-v5/src/client/RetrievePasswordStep2.vue

<template>
  <a-form
    :model="userDto"
    name="basic"
    :label-col="{span: 6}"
    :wrapper-col="{ span: 14 }"
    @finish="onFinish"
    @finish-failed="onFinishFailed"
  >
    <a-form-item
      :label="$t('lang.RetrievePasswordStep2.newPassword')"
      name="newPassword"
      :rules="[{ required: true, message: $t('lang.RetrievePasswordStep2.pleaseEnterYourNewPassword') }, {validator: handlerPasswordStrength}]"
    >
      <a-input
        v-model:value="userDto.newPassword"
        size="default"
        type="password"
      />
    </a-form-item>

    <a-form-item
      :label="$t('lang.RetrievePasswordStep2.enterAgain')"
      name="newPassword2"
      :rules="[{ required: true, message: $t('lang.RetrievePasswordStep2.pleaseEnterYourNewPasswordAgain') }, {validator: handlerPasswordStrength}, {validator: handleConfirmPass}]"
    >
      <a-input
        v-model:value="userDto.newPassword2"
        size="default"
        type="password"
      />
    </a-form-item>

    <div style="text-align: center;">
      <a-button
        type="primary"
        html-type="submit"
      >
        {{ $t('lang.RetrievePasswordStep2.submit') }}
      </a-button>
    </div>
  </a-form>
</template>

<script>
import Common from '../common/Common.js';
import UserResource from '../api/base/UserResource.js';
import UserVerificationCodeResource from '../api/base/UserVerificationCodeResource.js';
import { message } from 'ant-design-vue';
import PasswordService from '../common/PasswordService.js';
import { Notify, Uuid } from 'pc-component-v3';

export default {
  props: {
    userDtoProp: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  emits: ['next'],

  // 定义抛出的事件名称

  data: function () {
    return {
      userDto: {},
    };
  },

  watch: {
    userDtoProp: {
      handler(newVal, oldVal) {
        if (newVal != null) {
          this.userDto = JSON.parse(JSON.stringify(newVal));
          console.log(this.userDto);
        }
      },
      immediate: true,
    },
  },

  methods: {

    onFinish: function (values) {
      console.log('Success: %o', values);
      let _self = this;
      let data = {
        currentStep: 2,
        showPage: 2,
      };
      let newPassword = _self.userDto.newPassword;
      let newPassword2 = _self.userDto.newPassword2;
      if (newPassword == null && newPassword2 == null) {
        Notify.error(_self.$t('lang.Notify.prompt'), _self.$t('lang.RetrievePasswordStep2.describe1'), false);
        return;
      }
      if (newPassword.indexOf(' ') > -1) {
        Notify.error(_self.$t('lang.Notify.prompt'), _self.$t('lang.RetrievePasswordStep2.describe2'), false);
        return;
      }

      if (newPassword != newPassword2) {
        Notify.error(
          _self.$t('lang.Notify.prompt'),
          _self.$t('lang.RetrievePasswordStep2.describe3'),
          false,
        );
        return;
      }
      console.log(_self.userDto);
      $.ajax({
        url: Common.getApiURL('userResource/retrievePassword'),
        async: false,
        type: 'post',
        dataType: 'json',
        data: {
          loginName:_self.userDto.loginName,
          email:_self.userDto.email,
          verificationCode:_self.userDto.verificationCode,
          newPassword: newPassword,
          newPassword2: newPassword2,
        },
        beforeSend: function (request) {
          Common.addTokenToRequest(request);
        },
        success: function (baseObjectResponse) {
          if (baseObjectResponse.errorCode == 0) {
            _self.$emit('next', data);
          }else{
            message.error(baseObjectResponse.data);
          }
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
          Common.processException(
            XMLHttpRequest,
            textStatus,
            errorThrown,
          );
        },
      });
    },

    onFinishFailed: function (errorInfo) {
      console.log('Failed: %o', errorInfo);
    },

    handleConfirmPass: async function (rule, value) {
      if (this.userDto && this.userDto.newPassword && this.userDto.newPassword != value) {
        return Promise.reject(this.$t('lang.RetrievePasswordStep2.describe4'));
      } else {
        return Promise.resolve();
      }
    },

    handlerPasswordStrength: async function (rule, value) {
      let message = PasswordService.handlerPasswordStrength(this.$i18n.locale,value);
      if (message != null && message.length > 0) {
        return Promise.reject(message);
      } else {
        return Promise.resolve();
      }
    },

  },
};
</script>


<style scoped>
</style>