refactor: move ts folder to shared folder

Tomas

2021-12-22 abfd26bb700d93a92da6a04703b0187d4acaaeb5

 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>
@@ -147,26 +157,23 @@
          </template>
      </div>


      <el-row type="flex" justify="center" class="pam-login-page__action-bar mt-30">
        <el-button
          type="primary"
          v-if="(connectDevice === 'MOBILE' && onPhoneVerifyStep === 'INPUT_OTP') || (connectDevice === 'EMAIL' && onEmailVerifyResendStatus === 'CAN_RESEND')"
          :disabled="isLoginBtnDisabled"
          :disabled="isSubmitBtnDisabled"
          @click="login">
          送出
        </el-button>
      </el-row>

      <el-dialog
        title="歡迎新使用者"
        :custom-class="'pam-register-dialog'"
        :visible.sync="registerDialogVisable"
        :fullscreen="true"
        :close-on-click-modal="false"
        :show-close="false"
        center>
        <span>
      <PopUpFrame
        :isOpen.sync="registerDialogVisible"
        :dialogWidth="'90%'"
        class="pam-register-dialog"
        @closePopUp="isReadContract = false"
      >
          <div class="subTitle text--center mb-20">歡迎新使用者</div>
          <el-row>
            <input
              class="pam-input"
@@ -184,12 +191,13 @@
          </el-row>
          <el-row class="pt-10">
            <div
              v-if="registerDialogVisible"
              class="mdTxt pam-register-dialog__contract"
              @scroll="detectContructReadStatus">
              ref="contract"
              @scroll="detectContractReadStatus">
              <h3>蒐集個人資料告知事項</h3>
              <p class="mt-10">
              遵守個人資料保護法規定，在您提供個人資料予本處前，依法告
              知下列事項：
              遵守個人資料保護法規定，在您提供個人資料予本處前，依法告知下列事項：
              <p>

              <p class="mt-10">
@@ -208,13 +216,11 @@
              </p>

              <p class="mt-10">
              四、除蒐集之目的涉及國際業務或活動外，本處僅於中華民國領域內利用您的個人資
              料。
              四、除蒐集之目的涉及國際業務或活動外，本處僅於中華民國領域內利用您的個人資料。
              </p>

              <p class="mt-10">
              五、本處將於原蒐集之特定目的、本次以外之產業之推廣、宣導及輔導、以及其他公
              務機關請求行政協助之目的範圍內，合理利用您的個人資料。
              五、本處將於原蒐集之特定目的、本次以外之產業之推廣、宣導及輔導、以及其他公務機關請求行政協助之目的範圍內，合理利用您的個人資料。
              </p>

              <p class="mt-10">
@@ -248,35 +254,35 @@
          </el-row>
          <el-row class="pt-30">
            <div class="pam-agree-radio">
              <label for="agreeControct" class="pam-radio"
              <label for="agreeContract" class="pam-radio"
                :class="{disabled: !isReadContract}">
                <input
                  type="radio"
                  id="agreeControct"
                  @click="agreeControct = !agreeControct"
                  id="agreeContract"
                  @click="agreeContract = !agreeContract"
                  :disabled="!isReadContract"
                  value="agreeControct">
                  <i :class="agreeControct ?'icon-checkbox-1': 'icon-checkbox'"></i>我同意並繼續
                  value="agreeContract">
                  <i :class="agreeContract ?'icon-checkbox-1': 'icon-checkbox'"></i>我同意並繼續
              </label>
            </div>
          </el-row>
        </span>
        <span slot="footer" class="dialog-footer">
          <el-button
            type="primary"
            :disabled="!name || !agreeControct || !isReadContract"
            @click="applyAccount"
            >建立新帳號
          </el-button>
        </span>
      </el-dialog>
          <div class="text--center mt-10">
            <el-button
              type="primary"
              :disabled="!name || !agreeContract || !isReadContract"
              @click="applyAccount"
              >建立新帳號
            </el-button>
          </div>
      </PopUpFrame>

      <PopUpFrame class="pam-popUpFrame"
        :isOpen.sync="emailOtpConfirmVisable">
        :isOpen.sync="emailOtpConfirmVisable"
      >
        <div class="pam-popUp-title text--center">已將驗證訊息發送至</div>
        <div class="pam-popUp-title text--center">{{email}}</div>
        <div class="pam-popUp-title text--center">請查看電子郵件並完成驗證流程</div>
        <div class="pam-popUp-confirm-bolck pam-paragraph">
        <div class="pam-popUp-confirm-bolck mt-30">
          <div class="text--center">
            <el-button
                type="primary"
@@ -287,29 +293,37 @@
      </PopUpFrame>

      <PopUpFrame class="pam-popUpFrame"
        :isOpen.sync="registerSuccessConfirmVisable">
        :isOpen.sync="registerSuccessConfirmVisable"
        @closePopUp="confirmApplySuccess"
      >
          <div class="pam-popUp-title text--center">
            歡迎您登入成功，如您預約諮詢，顧問會以您留下的{{ connectDevice === 'MOBILE' ? '手機號碼' : 'Email'}}與您聯繫
          </div>
          <div class="pam-popUp-confirm-bolck pam-paragraph">
          <div class="pam-popUp-txt text--center mb-10 mt-5"
          >即將轉跳頁面...{{autoRedirectCounter}}秒</div>
          <div class="pam-popUp-confirm-bolck mt-30">
            <div class="text--center">
              <el-button
                  type="primary"
                  @click="confirmApplySuccess"
                  @click="registerSuccessConfirmVisable = false"
              >我知道了</el-button>
            </div>
          </div>
      </PopUpFrame>

      <PopUpFrame class="pam-popUpFrame"
        :isOpen.sync="phoneSuccessConfirmVisable">
          <div class="pam-popUp-title text--center mb-50"
        :isOpen.sync="phoneSuccessConfirmVisable"
        @closePopUp="confirmApplySuccess"
      >
          <div class="pam-popUp-title text--center"
          >歡迎您登入成功</div>
          <div class="pam-popUp-confirm-bolck pam-paragraph">
          <div class="pam-popUp-txt text--center mb-30 mt-5 xsTxt"
          >即將轉跳頁面...{{autoRedirectCounter}}秒</div>
          <div class="pam-popUp-confirm-bolck mt-30">
            <div class="text--center">
              <el-button
                  type="primary"
                  @click="confirmApplySuccess"
                  @click="phoneSuccessConfirmVisable = false"
              >我知道了</el-button>
            </div>
          </div>
@@ -320,9 +334,15 @@

<script lang="ts">
import { namespace } from 'nuxt-property-decorator';
import { Vue, Component } from 'vue-property-decorator';
import { LoginRequest, LoginVerify, loginVerify, OtpInfo, register, RegisterInfo, sendOtp } from '~/assets/ts/api/consultant';
import { Role } from '~/assets/ts/models/enum/Role';
import { Vue, Component, Ref } from 'vue-property-decorator';
import ErrorMessageBox from '~/shared/errorService';
import { OtpErrorCode } from '~/shared/models/enum/otpErrorCode';
import { Role } from '~/shared/models/enum/role';
import { LoginRequest } from '~/shared/models/loginRequest.model';
import { LoginVerify } from '~/shared/models/loginVerify.model';
import { OtpInfo } from '~/shared/models/otpInfo.model';
import { RegisterInfo } from '~/shared/models/registerInfo';
import loginService from '~/shared/services/login.service';

const roleStorage = namespace('localStorage');

@@ -330,37 +350,44 @@
export default class Login extends Vue {
  @roleStorage.Mutation storageIdToken!: (token:string) => void;
  @roleStorage.Mutation storageRole!: (role:string) => void;
  @Ref('contract') readonly contract!: any;

  connectDevice: 'MOBILE' | 'EMAIL' = 'MOBILE';

  phoneNumber = '';
  otpCode = '';
  onPhoneVerifyStep: 'APPLY_OTP' | 'INPUT_OTP' | 'SUBMIT_OTP' = 'APPLY_OTP';
  otpCounterSec = 900;
  otpCounterSec = 300;
  otpResendCounter = 30;
  otpInterval: any;
  phoneOtpInfo!: OtpInfo;

  email = '';
  onEmailVerifyResendStatus: 'APPLY_OTP' | 'CAN_RESEND' = 'APPLY_OTP';
  emailCounterSec = 900;
  emailCounterSec = 300;
  emailResendCounter = 30;
  emailOtpCode = '';
  emailResendInterval: any;
  emailOtpInfo!: OtpInfo;

  autoRedirectCounter = 3;
  autoRedirectInterval: any;

  name = '';
  agreeControct = false;
  agreeContract = false;
  isReadContract = false;

  phoneSuccessConfirmVisable = false;
  emailOtpConfirmVisable = false;

  registerDialogVisable = false;
  registerDialogVisible = false;
  registerSuccessConfirmVisable = false;

  applyAccount_onAction = false;

  previousPath = '';

  /////////////////////////////////////////////////////
  mounted() {
    const phoneOtpTime = localStorage.getItem('phoneOtpTime');
    const emailOtpTime = localStorage.getItem('emailOtpTime');
@@ -374,7 +401,23 @@
    }
  }

  detectContructReadStatus(event: any): void {
  beforeRouteEnter (to, from, next) {
      next(vm => {
        console.log(from.path, 'beforeRouteEnter');
        vm.previousPath = from.path;
      })
  }

  destroyed() {
    this.removeOtpTime();
    clearInterval(this.otpInterval);
    clearInterval(this.emailResendInterval);
    clearInterval(this.autoRedirectInterval);
  }

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

  detectContractReadStatus(event: any): void {
    const scrollTop = Math.round(event.target.scrollTop);
    const height = event.target.scrollHeight - event.target.clientHeight;
    if (Math.floor(scrollTop/10) === (Math.floor(height/10))) {
@@ -382,16 +425,22 @@
    }
  };

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

  get phoneCounter() {
    let min = Math.floor(this.otpCounterSec / 60);
    let sec = Math.floor(this.otpCounterSec % 60);
    return `${min < 10 ? '0' + min : min} : ${sec < 10 ? '0' + sec : sec}`;
    return `${min < 10 ? '0' + min : min}:${sec < 10 ? '0' + sec : sec}`;
  }

  get emailOtpCounter() {
    let min = Math.floor(this.emailCounterSec / 60);
    let sec = Math.floor(this.emailCounterSec % 60);
    return `${min < 10 ? '0' + min : min} : ${sec < 10 ? '0' + sec : sec}`;
    return `${min < 10 ? '0' + min : min}:${sec < 10 ? '0' + sec : sec}`;
  }

  get showPhoneOtpCodeField(): boolean {
@@ -412,38 +461,41 @@
    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 = {
      loginType: isMobile ? 'SMS' : 'EMAIL',
      account: isMobile ? this.phoneNumber : this.email,
    }
    sendOtp(loginInfo).then(otpInfo => {
    loginService.sendOtp(loginInfo).then(otpInfo => {
      if (otpInfo.success) {
        this.storageOtpTime(type, otpInfo);
        this.startOtpSetting(type);
        this.startOtpCount(type);
      } else {
        const errorMsg = OtpErrorCode[otpInfo.failCode] ? OtpErrorCode[otpInfo.failCode]:'OTP系統錯誤';
        ErrorMessageBox(errorMsg);
      }
    });
  };

  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 {
@@ -454,10 +506,11 @@
    this.applyAccount_onAction = true;
    const registerInfo = this.setRegisterInfo();

    register(registerInfo).then(res => {
      this.storageIdToken(res.data.id_token);
    loginService.register(registerInfo).then(res => {
      this.storageIdToken(res.id_token);
      this.storageRole(Role.USER);
      this.storagePhoneOrEmail(registerInfo);
      this.autoRedirect();
      this.registerSuccessConfirmVisable = true;
    }).catch(() => {
      this.applyAccount_onAction = false;
@@ -467,28 +520,62 @@
  confirmApplySuccess(): void {
    this.phoneSuccessConfirmVisable = false;
    this.registerSuccessConfirmVisable = false;
    this.$router.go(-1);
    this.redirect();
  }

  login() {
    const login: LoginVerify = this.setLoginInfo();
    this.removeOtpTime();
    loginVerify(login).then(res => {
      this.storageIdToken(res.data.id_token);
    loginService.loginVerify(login).then(res => {
      this.storageIdToken(res.id_token);
      this.storageRole(Role.USER);
      this.phoneSuccessConfirmVisable = true;
      this.autoRedirect();
      this.storagePhoneOrEmail(this.setRegisterInfo());
    }).catch(error => {
      if (error.response.status === 401) {
        this.registerDialogVisable = true;
      }
    })
      this.checkHttpErrorStatus(error);
    });
  }

  destroyed() {
    this.removeOtpTime();
    clearInterval(this.otpInterval);
    clearInterval(this.emailResendInterval);

  //////////////////////////////////////////////////////////////////
  private checkHttpErrorStatus(error:any):void{
    switch (error.response.status) {
        case 401:
          const errorMsg = OtpErrorCode[error.response?.data?.detail] ? OtpErrorCode[error.response?.data?.detail]:'OTP系統錯誤';
          ErrorMessageBox(errorMsg);
          break;
        case 403:
          this.registerDialogVisible = true;
          setTimeout(() => {
            const isScrollBarNeedless = this.contract.scrollHeight <= this.contract.clientHeight;
            if (isScrollBarNeedless) {
              this.isReadContract = true;
            }
          }, 1000);
          break;
        default:
          ErrorMessageBox('',error);
          break;
      }
  }

  private autoRedirect() {
    this.autoRedirectInterval = setInterval(() => {
      this.autoRedirectCounter -= 1;

      if (this.autoRedirectCounter === 0) {
        clearInterval(this.autoRedirectInterval);
        this.redirect();
      }
    }, 1000)
  }

  private redirect() {
    const backToPrevious = ['questionnaire', 'myConsultantList'];
    const find = backToPrevious.findIndex(item => this.previousPath.includes(item));
    console.log(this.previousPath, find, 'redirect');
    find > -1 ? this.$router.go(-1) : this.$router.push('/');
  }

  private phoneDiffTime(parseOtpTime: any) {
@@ -525,6 +612,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 = 300;
    } else {
      clearInterval(this.emailResendInterval);
      this.emailResendCounter = 30;
      this.emailCounterSec = 300;
    }
  }

  private setOtpInfo(parseOtpTime) {
@@ -628,6 +727,9 @@
      display: flex;
      flex: 1;
      align-items: flex-end;
      @include desktop {
        margin-bottom: 30px;
      }
    }
  }

@@ -648,17 +750,21 @@
    }
  }

  .pam-register-dialog__contract {
    $DEVICE_EXTRA_HEIGHT: 42px;
    $ALIGN_PADDING: 60px;
    $TOP_CONTENT_HEIGHT: 186px;
    $BOTTOM_CONTENT_HEIGHT: 131px;
    max-height: calc(100vh - $DEVICE_EXTRA_HEIGHT - $ALIGN_PADDING - $TOP_CONTENT_HEIGHT - $BOTTOM_CONTENT_HEIGHT);
    overflow-y: scroll;
    border-radius: 6px;
    border: 1px solid #707070;
    padding: 20px;
.pam-register-dialog__contract {
  $DEVICE_EXTRA_HEIGHT: 80px;
  $ALIGN_PADDING: 60px;
  $TOP_CONTENT_HEIGHT: 211px;
  $BOTTOM_CONTENT_HEIGHT: 141px;
  // text-align:start;
  max-height: calc(100vh - $DEVICE_EXTRA_HEIGHT - $ALIGN_PADDING - $TOP_CONTENT_HEIGHT - $BOTTOM_CONTENT_HEIGHT);
  overflow-y: scroll;
  border-radius: 6px;
  border: 1px solid #707070;
  padding: 20px;
  @include desktop {
    height: 335px;
  }
}

  .pam-radio {
    color: $PRIMARY_RED;
@@ -672,31 +778,6 @@
    i {
      font-size: 27px;
      padding-right: 5px;
    }
  }

  .pam-register-dialog {
    padding: 30px 20px;
    display: flex;
    flex-direction: column;
    border-radius: 0;
    &.el-dialog {
      border-radius: 0;
    }
    .el-dialog__header {
      padding: 0;
      margin-bottom: 30px;
      .el-dialog__title {
        @extend .subTitle;
      }
    }
    .el-dialog__body {
      flex: 1;
      padding: 0;
      margin-bottom: 30px;
    }
    .el-dialog__footer {
      padding: 0 !important;
    }
  }

@@ -715,7 +796,24 @@
      font-size: 20px;
      line-height: 27px;
  }

  .pam-popUp-txt {
    font-size: 18px;
    color: $MID_GREY;
  }

  .disabled {
    color: #A7A8AA;
  }

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