client-base-v5/src/confirm/ResetPassword.vue

<template>
  <div class="container">
    <div role="form">
      <div class="form-group" :class="{'has-error has-feedback': (newPasswordCheckResult.length > 0)}">
        <label for="newPassword" class="control-label">{{ $t("lang.ResetPassword.newPassword") }}</label>
        <input
          id="newPassword" v-model="newPassword" type="password" class="form-control" autocomplete="off" :placeholder="$t('lang.ResetPassword.enterNewPassword')" 
          @input="handlerPasswordStrength1"
        />
        <span v-if="newPasswordCheckResult.length > 0" class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true" />
        <span v-if="newPasswordCheckResult.length > 0" class="control-label" for="newPassword">{{ newPasswordCheckResult }}</span>
      </div>
  
      <div class="form-group" :class="{'has-error has-feedback': (newPassword2CheckResult.length > 0)}">
        <label for="newPassword2" class="control-label">{{ $t("lang.ResetPassword.confirmPassword") }}</label>
        <input
          id="newPassword2" v-model="newPassword2" autocomplete="off" class="form-control" type="password"
          :placeholder="$t('lang.ResetPassword.enterConfirmPassword')"
          @input="handlerPasswordStrength2"
        />
        <span v-if="newPassword2CheckResult.length > 0" class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true" />
        <span v-if="newPassword2CheckResult.length > 0" class="control-label" for="newPassword">{{ newPassword2CheckResult }}</span>
      </div>
  
      <div class="form-group">
        <div class="col-sm-offset-4 col-sm-4">
          <button type="primary" class="btn btn-default" @click="resetPassword">{{ $t("lang.ResetPassword.resetPassword") }}</button>
        </div>
      </div>
    </div>
    <Loading v-if="loading" />
  </div>
</template>

<script>
import Common from '../common/Common.js';
import { Notify } from 'pc-component-v3';
import PasswordService from '../common/PasswordService.js';

export default {
  components: {},

  props: {},

  emits: ['finishTask'],
  
  data: function () {
    return {
      newPassword: null,
      newPasswordCheckResult: '',
      newPassword2: null,
      newPassword2CheckResult: '',
      loading: false,
    };
  },

  watch: {
  },

  mounted: function () {
  },

  methods: {

    resetPassword: function () {
      let _self = this;
      let newPassword = _self.newPassword;
      let newPassword2 = _self.newPassword2;
      if (newPassword == null && newPassword2 == null) {
        Notify.error(_self.$t('lang.Notify.prompt'), _self.$t('lang.ResetPassword.describe1'), false);
        return;
      }
      if (newPassword.indexOf(' ') > -1) {
        Notify.error(_self.$t('lang.Notify.prompt'), _self.$t('lang.ResetPassword.describe2'), false);
        return;
      }

      if (newPassword != newPassword2) {
        Notify.error(
          _self.$t('lang.Notify.prompt'),
          _self.$t('lang.ResetPassword.describe3'),
          false,
        );
        return;
      }

      let message = PasswordService.handlerPasswordStrength(this.$i18n.locale,newPassword);
      if(message != null && message.length > 0){
        Notify.error(_self.$t('lang.Notify.warning'), message, false);
        return;
      }

      this.loading = true;
      $.ajax({
        url: Common.getApiURL('userResource/resetPassword'),
        async: false,
        type: 'post',
        dataType: 'json',
        data: {
          newPassword: newPassword,
          newPassword2: newPassword2,
        },
        beforeSend: function (request) {
          Common.addTokenToRequest(request);
        },
        success: function (data) {
          console.log(data);
          _self.loading = false;
          if (data.errorCode == 0) {
            Notify.success(_self.$t('lang.ResetPassword.resetPassword'), data.errorMessage, 1500);
            _self.$emit('finishTask');
          }else{
            Notify.error(_self.$t('lang.ResetPassword.resetPassword'), data.errorMessage, false);
          }
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
          _self.loading = true;
          Common.processException(
            XMLHttpRequest,
            textStatus,
            errorThrown,
          );
        },
      });
    },


    
    handlerPasswordStrength1: function(){
      if(this.newPassword == null || this.newPassword.length == 0){
        this.newPasswordCheckResult = '';
        return;
      }

      let message = PasswordService.handlerPasswordStrength(this.$i18n.locale,this.newPassword);
      if(message != null && message.length > 0){
        this.newPasswordCheckResult = message;
      }else{
        this.newPasswordCheckResult = '';
      }
    },

    
    handlerPasswordStrength2: function(){
      if(this.newPassword2 == null || this.newPassword2.length2 == 0){
        this.newPassword2CheckResult = '';
        return;
      }

      if(this.newPassword != this.newPassword2){
        this.newPassword2CheckResult = this.$t('lang.ResetPassword.describe4');
      }else{
        this.newPassword2CheckResult = '';
      }
    },

  },
};
</script>
<style scoped>
  .grid-container {
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 10% 90%;
    /*视口被均分为 100 单位的 vh 占据整个窗口，扣掉顶部 topNav 的距离后，计算得到 responseOrganizationSelect 的高度*/
    height: calc(100vh - 85px);
    width: 100%;
  }

  .grid-item-1 {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
  }
</style>