refactor: move ts folder to shared folder

Tomas

2021-12-22 abfd26bb700d93a92da6a04703b0187d4acaaeb5

 PAMapp/pages/consultantLogin/index.vue

@@ -55,8 +55,211 @@
  </div>
</template>

<script src="./consultant-login.component.ts"></script>
<script lang="ts">
  import { Vue, Component , namespace } from 'nuxt-property-decorator';
  import { AxiosError } from 'axios';
  import { Role } from '~/shared/models/enum/role';
  import ErrorMessageBox from '~/shared/errorService';
  import loginService from '~/shared/services/login.service'

  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: '',
    }

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

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


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

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

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


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

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

    private loginWithConsultant(): void {
      loginService.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 = '';
    }
  };

</script>

<style lang="scss" scoped>
  @import "./consultant-login.component.scss";
  .mt-20 {
    margin-top: 20px;
  }

  .mt-25 {
    margin-top: 25px;
  }

  .w-55 {
    width: 55% !important;
  }

  .position-r {
    position: relative;
  }

  .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 {
      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>