Merge remote-tracking branch 'origin/master'

wayne

2021-11-29 14bd6ba7ea80a0c47301371404754b6a77849cdc

Merge remote-tracking branch 'origin/master'

 PAMapp/assets/ts/api/consultant.ts

@@ -2,6 +2,7 @@
import { AxiosResponse } from 'axios';
import { AppointmentDetail } from '../models/AppointmentDetail';
import { ConsultantLoginInfo } from '../models/ConsultantLoginInfo';
import _ from 'lodash';

// 顧客登入(TODO: OTP認證開發前 暫時使用)
export function login(user: any) {
@@ -77,18 +78,19 @@
    return service.delete('/consultant/favorite/'+agentId, {headers})
}

// 忘記密碼網址
export function getForgotPasswordLink():Promise<string>{
    return new Promise((resolve, reject)=>{
        resolve('https://www.google.com/');
    })
// 取得驗證碼圖片
export function getImgOfVerification():Promise<string>{
  return service.get('/login/validate/get_img_code',{ responseType : 'arraybuffer' })
    .then(response=>{
      const toBase64 = window.btoa(_.reduce(new Uint8Array(response.data),(data,byte)=>data + String.fromCharCode(byte),''));
      const imgSrc = `data:image/jpeg;base64,${toBase64}`;
      return imgSrc;
  });
}

// 取得驗證碼圖片
export function getVerificationCodeImg():Promise<string>{
    return new Promise((resolve, reject)=>{
        resolve('');
    })
// 驗證碼 驗證
export function getVerificationStatus(imgCode:string):Promise<AxiosResponse<boolean>>{
  return service.get('/login/validate/verify_img_code/'+imgCode);
}

// 顧問登入
@@ -175,7 +177,7 @@
    new:           boolean;
}
export interface RequestOfLoginSuccess{
    id_token:string;
  id_token: string;
}

export interface LoginRequest {

 PAMapp/assets/ts/models/ConsultantLoginInfo.ts

@@ -1,5 +1,4 @@
export interface ConsultantLoginInfo {
    username: string;
    password: string;
    verificationCode: string;
}

 PAMapp/pages/consultantLogin/index.vue

@@ -10,24 +10,16 @@
            class="pam-consultant-login__input"
            placeholder="輸入eService帳號">
          <div class="pam-consultant-login__inputIcon text--primary cursor--pointer fix-chrome-click--issue"
            @click="isRemember = !isRemember">
            <i :class="[isRemember ? 'icon-checkbox-1' : 'icon-checkbox','pr-5']"></i>
            @click="isRememberChange">
            <i :class="[isRememberUserName ? 'icon-checkbox-1' : 'icon-checkbox','pr-5']"></i>
            記住
          </div>
        </div>
      </div>
      <div class="pam-paragraph">
        <div class="pam-consultant-login__title ">
          <div>密碼</div>
          <a class="pam-consultant-login__forgot-password cursor--pointer fix-chrome-click--issue"
            :href="forgotPasswordLink"
            target="_blank"
            rel="保誠人壽">
            忘記密碼？
          </a>
        </div>
        <div class="pam-consultant-login__title ">密碼</div>
        <div class="position-r mt-10">
          <input :type="[isShowPassword ? 'text' : 'password']"
          <input :type="[ isShowPassword ? 'text' : 'password']"
            v-model="consultantDto.password"
            class="pam-consultant-login__input"
            placeholder="輸入eService密碼">
@@ -37,37 +29,37 @@
          </div>
        </div>
      </div>
      <!-- <div class="pam-paragraph">
      <div class="pam-paragraph">
        <div class="pam-consultant-login__title">
          <div>驗證碼</div>
          <div class="text--dark-blue fs-16 cursor--pointer fix-chrome-click--issue"
            @click="regenerateCode">重新產生</div>
            @click="regenerateImgOfVerification">重新產生</div>
        </div>
        <div class="pam-consultant-login__verifyBlock mt-10">
          <div class="w-55">
            <input type="text"
              v-model="consultantDto.verificationCode"
              v-model="verificationCode"
              maxlength="4"
              class="pam-consultant-login__input">
          </div>
          <div class="pam-consultant-login__verifyImg">
            <img src="~/assets/images/logo.png"
              alt="驗證碼">
            <img :src="imgSrc" alt="驗證碼">
          </div>
        </div>
      </div> -->
      </div>
      <div class="pam-consultant-login__confirmBlock pam-paragraph">
        <button class="pam-consultant-login__confirm cursor--pointer fix-chrome-click--issue"
          @click="loginWithConsultant">送出</button>
          @click="sendInfo">送出</button>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
  import { namespace } from 'nuxt-property-decorator';
  import { Vue, Component , namespace } from 'nuxt-property-decorator';
  import { getImgOfVerification, logInToConsultant, getVerificationStatus } from '~/assets/ts/api/consultant';
  import { Role } from '~/assets/ts/models/enum/Role';
  import { Vue, Component } from 'vue-property-decorator';
  import { getForgotPasswordLink, getVerificationCodeImg, logInToConsultant } from '~/assets/ts/api/consultant';
  import { MessageBox } from 'element-ui';

  const roleStorage = namespace('localStorage');
  @Component({
@@ -77,63 +69,89 @@
    @roleStorage.Mutation storageIdToken!: (token: string) => void;
    @roleStorage.Mutation storageRole!: (role: string) => void;

    isRemember = false;
    isRememberUserName = false;
    isShowPassword = false;
    forgotPasswordLink = ''; // 尚未
    imgOfVerificationCode = ''; // 尚未
    imgSrc = '';
    verificationCode='';
    consultantDto = {
      username: '',
      password: '',
      verificationCode: '',
    }

    get isAlreadyDone():boolean{
      return !!(this.verificationCode && this.consultantDto.username && this.consultantDto.password);
    }

    mounted() {
      this.getRememberUserName();
      this.regenerateCode();
      this.getLinkOfForgotPassword();
      this.getInitUserName();
      this.regenerateImgOfVerification();
    };

    private getRememberUserName(): void {
    private getInitUserName(): void {
      const username = localStorage.getItem('consultantUserName')
      if (username) {
        this.consultantDto.username = username;
        this.isRemember = true;
        this.isRememberUserName = true;
      }
    }

    private getLinkOfForgotPassword(): void {
      getForgotPasswordLink().then(link => {
        this.forgotPasswordLink = link;
      });
    };
    public regenerateCode(): void {
      getVerificationCodeImg().then(imgOfbase64 => {
        this.imgOfVerificationCode = imgOfbase64;
      });
    public regenerateImgOfVerification(): void {
      getImgOfVerification().then( imgOfBase64 =>
        this.imgSrc = imgOfBase64
      );
    };

    public loginWithConsultant(): void {
      this.recordAccount();
    public isRememberChange():void{
      this.isRememberUserName = !this.isRememberUserName;
      this.storeUserName();
    }

      logInToConsultant(this.consultantDto).then(res => {
            this.storageIdToken(res.data.id_token);
            this.storageRole(Role.ADMIN);
            this.$router.push('/myAppointmentList/appointmentList');
      }, (error) => {
        this.consultantDto.password = '';
        this.consultantDto.verificationCode = '';
    public sendInfo():void{
      this.isAlreadyDone ? this.verify() : this.showErrorMessageBox('請確認帳號、密碼以及驗證碼是否填寫完畢');
    }

    private verify():void{
      getVerificationStatus(this.verificationCode).then( verifySuccess => {
        verifySuccess.data ? this.loginWithConsultant() : this.showErrorMessageBox('驗證碼輸入錯誤');
      });
    }

    private recordAccount(): void {
      localStorage.setItem('consultantUserName', this.isRemember ? this.consultantDto.username : '');
    private loginWithConsultant(): void {
      logInToConsultant(this.consultantDto).then(res => {
        this.storageIdToken(res.data.id_token);
        this.storageRole(Role.ADMIN);
        this.storeUserName();
        this.$router.push('/myAppointmentList/appointmentList');
      }, (error) => {
          this.clearValue();
      });
    }

    private showErrorMessageBox(errorMsg:string):void{
      this.clearValue();
      MessageBox({
        message: errorMsg,
        showClose:false,
        showConfirmButton:true,
        confirmButtonText:'確認',
        customClass:'pam-message-box',
        closeOnClickModal:false,
      });
    }

    private storeUserName(): void {
      localStorage.setItem('consultantUserName', this.isRememberUserName ? this.consultantDto.username : '');
    };

    private clearValue():void{
      this.consultantDto.password = '';
      this.verificationCode = '';
    }
  };

</script>

<style lang="scss"
  scoped>
<style lang="scss" scoped>
  .mt-20 {
    margin-top: 20px;
  }
@@ -193,9 +211,9 @@
    }

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

    &__verifyBlock {
@@ -205,8 +223,8 @@

    &__verifyImg {
      width: 126px;
      border: 1px black solid;
      height: 50px;
      border:1px #cccccc solid;
      img {
        width: 100%;
        height: 100%;