update: [login] 客戶登入 新增圖驗證碼

Tomas

2022-07-20 38d7cc3ee70e1de015ea03ee3f1330be0054b6c7

update: [login] 客戶登入 新增圖驗證碼

 PAMapp/pages/login/index.vue

@@ -82,7 +82,7 @@
          <template v-if="connectDevice === 'MOBILE'">
            <div v-show="showPhoneOtpCodeField">
              <el-row type="flex" justify="space-between">
                  <div class="mdTxt">輸入驗證碼</div>
                  <div class="mdTxt">輸入 OTP 驗證碼</div>
                  <div class="otp-count-timer">
                    {{counterTime(otpCounterSec)}}
                  </div>
@@ -95,11 +95,11 @@
                    'is-invalid': !otpCode
                  }"
                  v-model="otpCode"
                  placeholder="請輸入驗證碼"
                  placeholder="請輸入 OTP 驗證碼"
                  >
              </el-row>
              <div class="error mt-5 mb-10">
                  <span v-show="otpCounterSec === 0">驗證碼已過期，請重發驗證碼</span>
                  <span v-show="otpCounterSec === 0">OTP 驗證碼已過期，請重發 OTP 驗證碼</span>
              </div>

              <el-row>
@@ -108,7 +108,7 @@
                  @click="resentOtp('MOBILE')"
                  icon="icon-arrow"
                >
                  重發驗證碼<span
                  重發 OTP 驗證碼<span
                    class="pam-field-title__hint pl-5"
                    v-if="otpResendCounter !== 0"
                  >({{ otpResendCounter }})</span>
@@ -133,7 +133,7 @@
          <template v-if="connectDevice === 'EMAIL'">
            <el-row v-show="showEmailVerifyField">
              <el-row type="flex" justify="space-between">
                  <div class="mdTxt">輸入驗證碼</div>
                  <div class="mdTxt">輸入 OTP 驗證碼</div>
                  <div class="otp-count-timer">
                    {{counterTime(emailCounterSec)}}
                  </div>
@@ -146,11 +146,11 @@
                    'is-invalid': !emailOtpCode
                  }"
                  v-model="emailOtpCode"
                  placeholder="請輸入驗證碼"
                  placeholder="請輸入 OTP 驗證碼"
                  >
              </el-row>
              <div class="error mt-5 mb-10">
                  <span v-show="emailCounterSec === 0">驗證碼已過期，請重發驗證碼</span>
                  <span v-show="emailCounterSec === 0">OTP 驗證碼已過期，請重發 OTP 驗證碼</span>
              </div>

              <el-button
@@ -158,7 +158,7 @@
                icon="icon-arrow"
                @click="resentOtp('EMAIL')"
              >
                重發驗證碼<span
                重發 OTP 驗證碼<span
                    v-if="emailResendCounter !== 0"
                    class="pam-field-title__hint pl-5"
                  >({{ emailResendCounter }})</span>
@@ -568,6 +568,8 @@
        this.emailResendCounter -= 1;
      }
      if (this.emailCounterSec === 0) {
        this.verificationCode = '';
        this.regenerateImgOfVerification();
        clearInterval(this.emailResendInterval);
      }
    }, 1000)
@@ -580,7 +582,9 @@
        this.otpResendCounter -= 1;
      }
      if (this.otpCounterSec === 0) {
        clearInterval(this.otpInterval)
        this.verificationCode = '';
        this.regenerateImgOfVerification();
        clearInterval(this.otpInterval);
      }
    }, 1000)
  }

 PAMapp/shared/services/httpClient.ts

@@ -6,7 +6,7 @@

const notRequireInterceptorErrorUrl = [
  '/otp/verify',
  '/otp/sendOtp',
  // '/otp/sendOtp',
  '/eService/authenticate',
  '/login/validate/get_img_code',
  '/login/validate/verify_img_code',
@@ -66,8 +66,13 @@

function showErrorMessageBox(error: any): void {
  setTimeout(() => {
    console.log('errorerrorerror', error.config);
    // NOTE: 此為 HOT FIX 顧問登入失敗後，會出現逾時的 dialog [Tomas, 2022/7/20 14:21]
    if(error.config.url.include('api/eService/authenticate')) return;
    if(error.config.url.includes('api/eService/authenticate')) return;
    if (error.config.url.includes('/otp/sendOtp')) {
      messageBoxService.showErrorMessage('', error);
      return
    }
    if (!_.includes(notRequireInterceptorErrorUrl, error.config.url)) {
      switch (error.response.status) {
        case 401: