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

Tomas

2021-12-09 ac235850a9287dae6977c964213176fa7c86b140

 PAMapp/pages/consultantLogin/index.vue

@@ -6,220 +6,57 @@
        <div class="pam-consultant-login__title">帳號</div>
        <div class="position-r mt-10">
          <input type="text"
            v-model="consultantDto.account"
            v-model="consultantDto.username"
            class="pam-consultant-login__input"
            placeholder="輸入eService帳號">
          <div class="pam-consultant-login__inputIcon text--primary cursor--pointer"
            @click="recordAccount">
            <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>
          <a class="pam-consultant-login__forgot-password cursor--pointer" 
            :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密碼">
          <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"
              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 class="pam-consultant-login__confirmBlock pam-paragraph">
        <button class="pam-consultant-login__confirm cursor--pointer"
          @click="fakeLogin">送出</button>
        <button class="pam-consultant-login__confirm cursor--pointer fix-chrome-click--issue"
          @click="sendInfo">送出</button>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
  import { namespace } from 'nuxt-property-decorator';
  import { Vue, Component} from 'vue-property-decorator';
  import { getForgotPasswordLink , getVerificationCodeImg , login } from '~/assets/ts/api/consultant';
  import { Role } from '../../components/NavBar.vue';
<script src="./consultant-login.component.ts"></script>

  const localStorage = namespace('localStorage');
  @Component({
    layout: 'home'
  })
  export default class ConsultantLogin extends Vue {
    @localStorage.Mutation storageIdToken!: (token:string) => void;
    @localStorage.Mutation storageRole!: (role:string) => void;

    isRemember = false;
    isShowPassword = false;
    consultantDto = {
      account: '',
      password: '',
      verificationCode: '',
    }
    forgotPasswordLink = '';
    imgOfVerificationCode='';
    mounted() {
      this.regenerateCode();
      this.getLinkOfForgotPassword();
    };
    private getLinkOfForgotPassword():void{
      getForgotPasswordLink().then(link=>{
        console.log('link',link);
        this.forgotPasswordLink = link;
      });
    };
    recordAccount(): void {
      this.isRemember = !this.isRemember;
      if (this.isRemember) {
        console.log('sotre account');
      }
    };
    regenerateCode(): void {
      getVerificationCodeImg().then((imgOfbase64:any)=>{
        this.imgOfVerificationCode = imgOfbase64;
      });
    };
    // loginWithConsultant():void{
    //   console.log('consultantDto',this.consultantDto);
    //   logInToConsultant(this.consultantDto).then(res=>{
    //     localStorage.setItem('roleOfState',Role.CONSULTANT);
    //     this.$router.push('/myAppointmentList/appointmentList');
    //   });
    // }

    fakeLogin(): void {
        const user = {
            username: 'admin',
            password: 'admin'
        }
        login(user).then((res) => {
            this.storageIdToken(res.data.id_token);
            this.storageRole(Role.ADMIN);
            this.$router.push('/myAppointmentList/appointmentList');
        })
    }
  };

</script>
<style lang="scss"
  scoped>
  .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;
      border: 1px black solid;
      height: 50px;
      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 lang="scss" scoped>
  @import "./consultant-login.component.scss";
</style>