update: login - regenerateImgOfVerification mechanism

Tomas

2022-08-28 9f9b7a95f358aafae44557336d7015ef98bd5634

 PAMapp/pages/login/index.vue

@@ -9,10 +9,10 @@
            <el-row type="flex" class="pt-30">
              <el-button
                :class="{ 'active': connectDevice === 'MOBILE'}"
                @click="connectDevice = 'MOBILE'">手機號碼</el-button>
                @click="connectDevice = 'MOBILE'; regenerateImgOfVerification()">手機號碼</el-button>
              <el-button
                :class="{ 'active': connectDevice === 'EMAIL'}"
                @click="connectDevice = 'EMAIL'">Email</el-button>
                @click="connectDevice = 'EMAIL'; regenerateImgOfVerification()">Email</el-button>
            </el-row>
          </div>

@@ -58,9 +58,9 @@
            </div>
          </div>

          <div class="pam-paragraph">
          <div class="pam-paragraph" v-if="(!showPhoneOtpCodeField && !showEmailVerifyField)">
            <div class="pam-consultant-login__title">
              <div>驗證碼 <span class="text--dark-blue fs-16">(區分大小寫)</span></div>
              <div>圖型驗證碼 <span class="text--dark-blue fs-16">(區分大小寫)</span></div>
              <div class="text--primary fs-16 cursor--pointer fix-chrome-click--issue"
                style="margin-left: 16px"
                @click="regenerateImgOfVerification">重新產生</div>
@@ -113,17 +113,18 @@
                    v-if="otpResendCounter !== 0"
                  >({{ otpResendCounter }})</span>
                </el-button>

              </el-row>
            </div>

            <el-row>
              <el-button
                  v-if="onPhoneVerifyStep === 'APPLY_OTP'"
                  :disabled="!phoneNumber || !phoneValid || !verificationCode || verificationCode.length !== 4"
                  :disabled="!phoneNumber || !phoneValid || verificationCode.length !== 4"
                  @click="applyOtpVerification('MOBILE')"
                  icon="icon-arrow"
                >
                  發送驗證碼
                  發送 OTP 驗證碼
                </el-button>
            </el-row>

@@ -160,18 +161,19 @@
              >
                重發 OTP 驗證碼<span
                    v-if="emailResendCounter !== 0"
                    class="pam-field-title__hint pl-5"
                    class="pam-｀field-title__hint pl-5"
                  >({{ emailResendCounter }})</span>
              </el-button>
            </el-row>

            <el-row v-show="!showEmailVerifyField">
            <el-row>
              <el-button
                  :disabled="!email || !emailValid || !verificationCode || verificationCode.length !== 4"
                  v-if="onEmailVerifyResendStatus === 'APPLY_OTP'"
                  :disabled="!email || !emailValid || verificationCode.length !== 4"
                  @click="applyOtpVerification('EMAIL')"
                  icon="icon-arrow"
                >
                  發送驗證碼
                  發送 OTP 驗證碼
                </el-button>
            </el-row>
          </template>
@@ -334,7 +336,7 @@

<script lang="ts">
import { namespace } from 'nuxt-property-decorator';
import { Vue, Component, Ref } from 'vue-property-decorator';
import { Vue, Component, Ref, Watch } from 'vue-property-decorator';
import { OtpErrorCode } from '~/shared/models/enum/otpErrorCode';
import { Role } from '~/shared/models/enum/Role';
import { LoginRequest } from '~/shared/models/loginRequest.model';
@@ -398,6 +400,20 @@

  previousPath = '';

  @Watch('onEmailVerifyResendStatus')
  onEmailVerifyResendStatusChange() {
    if (this.onEmailVerifyResendStatus === 'APPLY_OTP') {
      this.regenerateImgOfVerification();
    }
  }

  @Watch('onPhoneVerifyStep')
  onPhoneVerifyStepChange() {
    if (this.onPhoneVerifyStep === 'APPLY_OTP') {
        this.regenerateImgOfVerification();
    }
  }

  /////////////////////////////////////////////////////

  beforeRouteEnter (to, from, next) {
@@ -450,8 +466,10 @@
  //////////////////////////////////////////////////////////

  regenerateImgOfVerification(): void {
    loginService.getImgOfVerification().then( imgOfBase64 =>
      this.imgSrc = imgOfBase64
    loginService.getImgOfVerification().then( imgOfBase64 => {
        this.imgSrc = imgOfBase64;
        this.verificationCode = '';
      }
    );
  };

@@ -566,10 +584,11 @@
      this.emailCounterSec -= 1;
      if (this.emailResendCounter !== 0) {
        this.emailResendCounter -= 1;
        if (this.emailResendCounter === 0) {
          // this.regenerateImgOfVerification();
        }
      }
      if (this.emailCounterSec === 0) {
        this.verificationCode = '';
        this.regenerateImgOfVerification();
        clearInterval(this.emailResendInterval);
      }
    }, 1000)
@@ -580,10 +599,11 @@
      this.otpCounterSec -= 1;
      if (this.otpResendCounter !== 0) {
        this.otpResendCounter -= 1;
        if (this.otpResendCounter === 0) {
          // this.regenerateImgOfVerification();
        }
      }
      if (this.otpCounterSec === 0) {
        this.verificationCode = '';
        this.regenerateImgOfVerification();
        clearInterval(this.otpInterval);
      }
    }, 1000)
@@ -591,7 +611,6 @@

  resentOtp(type: string) {
    this.resetOtpSetting(type);
    this.applyOtpVerification(type);
  }

  deleteOtpInfo(type: string) {
@@ -613,10 +632,12 @@
      clearInterval(this.otpInterval);
      this.otpResendCounter = 30;
      this.otpCounterSec = 300;
      this.onPhoneVerifyStep = 'APPLY_OTP';
    } else {
      clearInterval(this.emailResendInterval);
      this.emailResendCounter = 30;
      this.emailCounterSec = 300;
      this.onEmailVerifyResendStatus = 'APPLY_OTP';
    }
  }