Merge branch 'master' of https://192.168.0.10:8443/r/pcalife/PAM

HelenHuang

2021-12-06 9cb6d5f92ad7aeda45ad1fe6482dcfc63d17be2b

 PAMapp/pages/consultantLogin/index.vue

@@ -6,98 +6,163 @@
        <div class="pam-consultant-login__title">帳號</div>
        <div class="position-r mt-10">
          <input type="text"
            :model="loginDto.account"
            v-model="consultantDto.username"
            class="pam-consultant-login__input"
            placeholder="輸入eService帳號">
          <div class="pam-consultant-login__inputIcon text--primary cursor--pointer"
            @click="cookieAccount">
            <i :class="[isRemember ? 'icon-checkbox-1' : 'icon-checkbox','pr-5']"></i>
          <div class="pam-consultant-login__inputIcon text--primary cursor--pointer fix-chrome-click--issue"
            @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>
          <div class="text--primary fs-16 cursor--pointer"
            @click="forgetPassword">忘記密碼？</div>
        </div>
        <div class="pam-consultant-login__title ">密碼</div>
        <div class="position-r mt-10">
          <input :type="[isShowPassword ? 'text' : 'password']"
            :model="loginDto.password"
          <input :type="[ isShowPassword ? 'text' : 'password']"
            v-model="consultantDto.password"
            class="pam-consultant-login__input"
            placeholder="輸入eService密碼">
          <div class="pam-consultant-login__inputIcon cursor--pointer"
          <div class="pam-consultant-login__inputIcon cursor--pointer fix-chrome-click--issue"
            @click="isShowPassword = !isShowPassword">
            <i :class="[isShowPassword ? 'icon-eye-1 fs-25' : 'icon-eye' , 'text--primary']"></i>
            <i :class="[isShowPassword ? 'icon-eye':'icon-eye-1 fs-25', 'text--primary']"></i>
          </div>
        </div>
      </div>
      <div class="pam-paragraph">
        <div class="pam-consultant-login__title">
          <div>驗證碼</div>
          <div class="text--dark-blue fs-16 cursor--pointer"
            @click="regenerateCode">重新產生</div>
          <div>驗證碼 <span class="text--dark-blue fs-16">(區分大小寫)</span></div>
          <div class="text--primary fs-16 cursor--pointer fix-chrome-click--issue"
            @click="regenerateImgOfVerification">重新產生</div>
        </div>
        <div class="pam-consultant-login__verifyBlock mt-10">
          <div class="w-55">
            <input type="text"
              :modal="loginDto.verificationCode"
              v-model="verificationCode"
              maxlength="4"
              class="pam-consultant-login__input">
          </div>
          <div class="pam-consultant-login__verifyImg"></div>
          <div class="pam-consultant-login__verifyImg">
            <img :src="imgSrc" alt="驗證碼">
          </div>
        </div>
      </div>
      <div class="pam-consultant-login__confirmBlock pam-paragraph">
        <button class="pam-consultant-login__confirm cursor--pointer"
          @click="login">送出</button>
        <button class="pam-consultant-login__confirm cursor--pointer fix-chrome-click--issue"
          @click="sendInfo">送出</button>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
  import {
    Vue,
    Component
  } from 'vue-property-decorator';
  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';
  import ErrorMessageBox from '~/assets/ts/errorService';

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


    login(): void {
      console.log('login');
    get isAlreadyDone():boolean{
      return !!(this.verificationCode && this.consultantDto.username && this.consultantDto.password);
    }

    cookieAccount(): void {
      this.isRemember = !this.isRemember;
      if (this.isRemember) {
        console.log('sotre account');
    mounted() {
      this.getInitUserName();
      this.regenerateImgOfVerification();
    };

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

    forgetPassword(): void {
      console.log('forget password');
    public regenerateImgOfVerification(): void {
      getImgOfVerification().then( imgOfBase64 =>
        this.imgSrc = imgOfBase64
      );
    };

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

    regenerateCode(): void {
      console.log('call api regenerate verificationCode')
    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 = '';
    }
  };

</script>
<style lang="scss"
  scoped>

<style lang="scss" scoped>
  .mt-20 {
    margin-top: 20px;
  }
@@ -156,6 +221,12 @@
      }
    }

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

    &__verifyBlock {
      display: flex;
      justify-content: space-between;
@@ -163,7 +234,12 @@

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

    &__confirmBlock {