fix: [login] 客戶登入

Tomas

2022-07-20 508163a40bbd31520aab762d5be747c43af09e50

fix: [login] 客戶登入

 PAMapp/pages/login/index.vue

@@ -58,6 +58,26 @@
            </div>
          </div>

          <div class="pam-paragraph">
            <div class="pam-consultant-login__title">
              <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>
            </div>
            <div class="pam-consultant-login__verifyBlock mt-10">
              <div class="w-55">
                <input type="text"
                  v-model="verificationCode"
                  maxlength="4"
                  class="pam-consultant-login__input">
              </div>
              <div class="pam-consultant-login__verifyImg">
                <img :src="imgSrc" alt="驗證碼">
              </div>
            </div>
          </div>

          <!-- mobile 驗證碼 -->
          <template v-if="connectDevice === 'MOBILE'">
            <div v-show="showPhoneOtpCodeField">
@@ -99,7 +119,7 @@
            <el-row>
              <el-button
                  v-if="onPhoneVerifyStep === 'APPLY_OTP'"
                  :disabled="!phoneNumber || !phoneValid"
                  :disabled="!phoneNumber || !phoneValid || !verificationCode || verificationCode.length !== 4"
                  @click="applyOtpVerification('MOBILE')"
                  icon="icon-arrow"
                >
@@ -147,7 +167,7 @@

            <el-row v-show="!showEmailVerifyField">
              <el-button
                  :disabled="!email || !emailValid"
                  :disabled="!email || !emailValid || !verificationCode || verificationCode.length !== 4"
                  @click="applyOtpVerification('EMAIL')"
                  icon="icon-arrow"
                >
@@ -358,6 +378,9 @@
  emailResendInterval: any;
  emailOtpIndexKey!: string;

  verificationCode = '';
  imgSrc = '';

  autoRedirectCounter = 3;
  autoRedirectInterval: any;

@@ -386,6 +409,7 @@
  mounted() {
    this.parsePhoneOtpTimeFromStorage();
    this.parseEmailOtpTimeFromStorage();
    this.regenerateImgOfVerification();
  }

  private parsePhoneOtpTimeFromStorage() {
@@ -425,11 +449,17 @@

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

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

  //////////////////// 登入
  login() {
    const login: LoginVerify = this.setLoginInfo();
    this.removeOtpTime();
    loginService.loginVerify(login, this.otpCode).then(res => {
    loginService.loginVerify(login).then(res => {
      this.storageIdToken(res.id_token);
      this.storageRole(Role.USER);
      this.phoneSuccessConfirmVisable = true;
@@ -499,7 +529,7 @@
      loginType: isMobile ? 'SMS' : 'EMAIL',
      account: isMobile ? this.phoneNumber : this.email,
    }
    loginService.sendOtp(loginInfo).then(otpInfo => {
    loginService.sendOtp(loginInfo, this.verificationCode).then(otpInfo => {
      if (otpInfo.success) {
        this.storageOtpTime(type, otpInfo);
        this.startOtpSetting(type);
@@ -780,4 +810,82 @@
      font-size: 16px;
    }
  }
    .pam-consultant-login {
    margin: auto;
    width: 336px;
    font-size: 20px;
    color: $PRIMARY_BLACK;

    &__header {
      text-align: center;
      font-size: 24px;
      font-weight: bold;
      letter-spacing: 1.2;
      color: $PRIMARY_BLACK;
    }

    &__title {
      display: flex;
      // justify-content: space-between;
      align-items: center;
    }

    &__input {
      width: 100%;
      outline: 0;
      border: 1px solid #CCCCCC;
      border-radius: 10px;
      font-size: 20px;
      height: 50px;
      padding: 10px 90px 10px 15px;
      overflow: auto;
      box-sizing: border-box;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;

      &Icon {
        position: absolute;
        display: flex;
        align-items: center;
        top: 15px;
        right: 15px;
      }
    }

    &__forgot-password {
      color: $PRIMARY_RED;
      text-decoration: none;
      font-size: 16px;
    }

    &__verifyBlock {
      display: flex;
      // justify-content: space-between;
    }

    &__verifyImg {
      margin-left: 8px;
      width: 126px;
      height: 50px;
      border:1px #cccccc solid;
      img {
        width: 100%;
        height: 100%;
      }
    }

    &__confirmBlock {
      display: flex;
      justify-content: center;
    }

    &__confirm {
      color: $PRIMARY_WHITE;
      width: 80px;
      height: 50px;
      border-radius: 30px;
      border: 1px solid $LIGHT_GREY;
      background-color: $PRIMARY_RED;
    }
  }
</style>

 PAMapp/shared/services/login.service.ts

@@ -11,15 +11,14 @@

class LoginService {
    /** 顧客登入-發送OTP **/
  async sendOtp(loginInfo: LoginRequest):Promise<OtpInfo> {
    return http.post('/otp/sendOtp', loginInfo).then( res => res.data );
  async sendOtp(loginInfo: LoginRequest, verifyCode: string):Promise<OtpInfo> {
    return http.post(`/otp/sendOtp/${verifyCode}`, loginInfo).then( res => res.data );
  }

  /** 顧客登入-驗證OTP **/
  async loginVerify(loginVerify: LoginVerify, otpCode: string):Promise<LoginSuccessToken>{
    return http.post(`/otp/verify/${otpCode}`, loginVerify).then(res => res.data);
  async loginVerify(loginVerify: LoginVerify):Promise<LoginSuccessToken>{
    return http.post('/otp/verify', loginVerify).then(res => res.data);
  }

  /** 顧客註冊 **/
  async register(registerInfo: RegisterInfo):Promise<LoginSuccessToken>{
    return http.post('/otp/register', registerInfo).then(res => res.data);