refactor: move ts folder to shared folder

Tomas

2021-12-22 abfd26bb700d93a92da6a04703b0187d4acaaeb5

 PAMapp/pages/login/index.vue

@@ -170,7 +170,6 @@
      <PopUpFrame
        :isOpen.sync="registerDialogVisible"
        :dialogWidth="'90%'"
        :drawerSize="'95%'"
        class="pam-register-dialog"
        @closePopUp="isReadContract = false"
      >
@@ -198,8 +197,7 @@
              @scroll="detectContractReadStatus">
              <h3>蒐集個人資料告知事項</h3>
              <p class="mt-10">
              遵守個人資料保護法規定，在您提供個人資料予本處前，依法告
              知下列事項：
              遵守個人資料保護法規定，在您提供個人資料予本處前，依法告知下列事項：
              <p>

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

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

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

              <p class="mt-10">
@@ -282,12 +278,11 @@

      <PopUpFrame class="pam-popUpFrame"
        :isOpen.sync="emailOtpConfirmVisable"
        :drawerSize="'35%'"
      >
        <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"
@@ -300,18 +295,17 @@
      <PopUpFrame class="pam-popUpFrame"
        :isOpen.sync="registerSuccessConfirmVisable"
        @closePopUp="confirmApplySuccess"
        :drawerSize="'35%'"
      >
          <div class="pam-popUp-title text--center">
            歡迎您登入成功，如您預約諮詢，顧問會以您留下的{{ connectDevice === 'MOBILE' ? '手機號碼' : 'Email'}}與您聯繫
          </div>
          <div class="pam-popUp-txt text--center mb-10 mt-5"
          >即將轉跳頁面...{{autoRedirectCounter}}秒</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"
                  @click="confirmApplySuccess"
                  @click="registerSuccessConfirmVisable = false"
              >我知道了</el-button>
            </div>
          </div>
@@ -320,17 +314,16 @@
      <PopUpFrame class="pam-popUpFrame"
        :isOpen.sync="phoneSuccessConfirmVisable"
        @closePopUp="confirmApplySuccess"
        :drawerSize="'30%'"
      >
          <div class="pam-popUp-title text--center"
          >歡迎您登入成功</div>
          <div class="pam-popUp-txt text--center mb-30 mt-5 xsTxt"
          >即將轉跳頁面...{{autoRedirectCounter}}秒</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"
                  @click="confirmApplySuccess"
                  @click="phoneSuccessConfirmVisable = false"
              >我知道了</el-button>
            </div>
          </div>
@@ -342,10 +335,14 @@
<script lang="ts">
import { namespace } from 'nuxt-property-decorator';
import { Vue, Component, Ref } from 'vue-property-decorator';
import { LoginRequest, LoginVerify, loginVerify, OtpInfo, register, RegisterInfo, sendOtp } from '~/assets/ts/api/consultant';
import ErrorMessageBox from '~/assets/ts/errorService';
import { OtpErrorCode } from '~/assets/ts/models/enum/otpErrorCode';
import { Role } from '~/assets/ts/models/enum/Role';
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');

@@ -360,14 +357,14 @@
  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;
@@ -389,6 +386,8 @@
  applyAccount_onAction = false;

  previousPath = '';

  /////////////////////////////////////////////////////
  mounted() {
    const phoneOtpTime = localStorage.getItem('phoneOtpTime');
    const emailOtpTime = localStorage.getItem('emailOtpTime');
@@ -401,6 +400,22 @@
      this.emailDiffTime(parseEmailOtpTime);
    }
  }

  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);
@@ -452,7 +467,7 @@
      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);
@@ -491,8 +506,8 @@
    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();
@@ -505,33 +520,14 @@
  confirmApplySuccess(): void {
    this.phoneSuccessConfirmVisable = false;
    this.registerSuccessConfirmVisable = false;
    this.$router.push('/');
    this.redirect();
  }

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

      if (this.autoRedirectCounter === 0) {
        clearInterval(this.autoRedirectInterval);
        const backToPrevious = ['questionnaire', 'myConsultantList'];
        const find = backToPrevious.findIndex(item => this.previousPath.includes(item));
        find > -1 ? this.$router.go(-1) : this.$router.push('/');
      }
    }, 1000)
  }

  beforeRouteEnter (to, from, next) {
      next(vm => {
        vm.previousPath = from.path;
      })
    }

  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();
@@ -540,6 +536,9 @@
      this.checkHttpErrorStatus(error);
    });
  }


  //////////////////////////////////////////////////////////////////
  private checkHttpErrorStatus(error:any):void{
    switch (error.response.status) {
        case 401:
@@ -561,11 +560,22 @@
      }
  }

  destroyed() {
    this.removeOtpTime();
    clearInterval(this.otpInterval);
    clearInterval(this.emailResendInterval);
    clearInterval(this.autoRedirectInterval);
  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) {
@@ -608,11 +618,11 @@
    if (type === 'MOBILE') {
      clearInterval(this.otpInterval);
      this.otpResendCounter = 30;
      this.otpCounterSec = 900;
      this.otpCounterSec = 300;
    } else {
      clearInterval(this.emailResendInterval);
      this.emailResendCounter = 30;
      this.emailCounterSec = 900;
      this.emailCounterSec = 300;
    }
  }

@@ -741,10 +751,11 @@
  }

.pam-register-dialog__contract {
  $DEVICE_EXTRA_HEIGHT: 42px;
  $DEVICE_EXTRA_HEIGHT: 80px;
  $ALIGN_PADDING: 60px;
  $TOP_CONTENT_HEIGHT: 186px;
  $BOTTOM_CONTENT_HEIGHT: 131px;
  $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;