update: TODO#130897 調整登入流程-輸入手機或email後 disabled input, 並增加刪除按鈕

Mila

2021-11-30 2aee22fb6d8c0caa8e33bd03cc76d99cb96b8238

 PAMapp/pages/login/index.vue

@@ -17,7 +17,7 @@
          </div>

          <div class="pam-inputs mb-10">
            <div class="pt-10" v-show="connectDevice === 'MOBILE'">
            <div class="pam-input-position pt-10" v-show="connectDevice === 'MOBILE'">
              <input
                  class="pam-input"
                  :class="{
@@ -27,12 +27,17 @@
                  placeholder="請輸入手機號碼"
                  :disabled="showPhoneOtpCodeField"
                >
              <i
                class="icon-close"
                v-if="onPhoneVerifyStep !== 'APPLY_OTP'"
                @click="deleteOtpInfo('MOBILE')"
              ></i>
              <div class="error mt-5 mb-5">
                  <span v-show="!phoneValid">手機號碼格式有誤</span>
              </div>
            </div>

            <div class="pt-10" v-show="connectDevice === 'EMAIL'">
            <div class="pam-input-position pt-10" v-show="connectDevice === 'EMAIL'">
              <input
                class="pam-input"
                :class="{
@@ -42,6 +47,11 @@
                placeholder="請輸入 Email 地址"
                :disabled="showEmailVerifyField"
              >
              <i
                class="icon-close"
                v-if="showEmailVerifyField"
                @click="deleteOtpInfo('EMAIL')"
              ></i>
              <div class="error mt-5 mb-5">
                  <span v-show="!emailValid">Email格式有誤</span>
              </div>
@@ -420,12 +430,6 @@
    return this.email ? rule.test(this.email) : true;
  }

  get isLoginBtnDisabled() {
    return this.connectDevice === 'MOBILE'
      ? (!this.otpCode || !this.phoneNumber || !this.phoneValid || !this.otpCounterSec)
      : (!this.emailOtpCode || !this.email || !this.emailValid || !this.emailCounterSec)
  }

  applyOtpVerification(type: string): void {
    const isMobile = this.connectDevice === 'MOBILE';
    const loginInfo: LoginRequest = {
@@ -442,16 +446,22 @@
  };

  resentOtp(type: string) {
    if (type === 'MOBILE') {
      clearInterval(this.otpInterval);
      this.otpResendCounter = 30;
      this.otpCounterSec = 900;
    } else {
      clearInterval(this.emailResendInterval);
      this.emailResendCounter = 30;
      this.emailCounterSec = 900;
    }
    this.resetOtpSetting(type);
    this.applyOtpVerification(type);
  }

  deleteOtpInfo(type: string) {
    this.resetOtpSetting(type);
    if (type === 'MOBILE') {
      this.onPhoneVerifyStep = 'APPLY_OTP';
      this.phoneNumber = '';
      this.otpCode = '';
    } else {
      this.onEmailVerifyResendStatus = 'APPLY_OTP';
      this.email = '';
      this.emailOtpCode = '';
    }
    this.removeOtpTime();
  }

  applyAccount(): void {
@@ -539,6 +549,18 @@
    const currentTime = new Date().getTime();
    const storageTime = new Date(parseOtpTime).getTime();
    return Math.floor((currentTime - storageTime) / 1000);
  }

  private resetOtpSetting(type: string) {
    if (type === 'MOBILE') {
      clearInterval(this.otpInterval);
      this.otpResendCounter = 30;
      this.otpCounterSec = 900;
    } else {
      clearInterval(this.emailResendInterval);
      this.emailResendCounter = 30;
      this.emailCounterSec = 900;
    }
  }

  private setOtpInfo(parseOtpTime) {
@@ -747,4 +769,15 @@
  .disabled {
    color: #A7A8AA;
  }

  .pam-input-position {
    position: relative;
    .icon-close {
      cursor: pointer;
      position: absolute;
      right: 15px;
      top: 28px;
      font-size: 16px;
    }
  }
</style>