Merge branch 'refactor/separate-vue' of ssh://192.168.0.10:29418/pcalife/PA...

Tomas

2021-12-09 ac235850a9287dae6977c964213176fa7c86b140

 PAMapp/pages/consultantLogin/consultant-login.component.ts

¤ñ¹ï·sÀÉ®×
@@ -0,0 +1,103 @@
import { Vue, Component , namespace } from 'nuxt-property-decorator';
import { AxiosError } from 'axios';
import { getImgOfVerification, logInToConsultant, getVerificationStatus } from '~/assets/ts/api/consultant';
import { Role } from '~/assets/ts/models/enum/role.enum';
import ErrorMessageBox from '~/assets/ts/errorService';

const roleStorage = namespace('localStorage');
@Component({
  layout: 'home'
})
export default class ConsultantLogin extends Vue {
  @roleStorage.Mutation storageIdToken!: (token: string) => void;
  @roleStorage.Mutation storageRole!: (role: string) => void;
  @roleStorage.Mutation storageConsultantId!:(id:string) => void;
  isRememberUserName = false;
  isShowPassword = false;
  imgSrc = '';
  verificationCode='';
  consultantDto = {
    username: '',
    password: '',
  }

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

  mounted() {
    this.getInitUserName();
    this.regenerateImgOfVerification();
  };

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

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

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

  public sendInfo():void{
    this.isAlreadyDone ? this.verify() : ErrorMessageBox('請確認帳號、密碼以及驗證碼是否填寫完畢');
  }

  private verify():void{
    getVerificationStatus(this.verificationCode).then( verifySuccess => {
      if(verifySuccess.data){
        this.loginWithConsultant()
      }else{
        this.clearValue();
        this.regenerateImgOfVerification();
        ErrorMessageBox('驗證碼輸入錯誤');
      }
    });
  }

  private loginWithConsultant(): void {
    logInToConsultant(this.consultantDto).then(res => {
      this.storageIdToken(res.data.id_token);
      this.storageRole(Role.ADMIN);
      this.storageConsultantId(this.consultantDto.username)
      this.storeUserName();
      this.$router.push('/myAppointmentList/appointmentList');
    }).catch((error:AxiosError)=>{
      this.checkHttpErrorStatus(error);
    });
  }
  private checkHttpErrorStatus(error:any):void{
    this.clearValue();
    this.regenerateImgOfVerification();
    switch (error.response.status) {
      case 401:
        const errorMsg = error.response.data.detail;
        ErrorMessageBox(errorMsg);
        break;

      default:
        ErrorMessageBox('',error);
        break;
    }
  }

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

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