<template>
|
<div>
|
<div class="pam-consultant-login">
|
<div class="pam-consultant-login__header pam-paragraph">顧問登入</div>
|
<div class="pam-paragraph">
|
<div class="pam-consultant-login__title">帳號</div>
|
<div class="position-r mt-10">
|
<input type="text"
|
v-model="consultantDto.username"
|
class="pam-consultant-login__input"
|
placeholder="輸入eService帳號">
|
<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 class="position-r mt-10">
|
<input :type="[ isShowPassword ? 'text' : 'password']"
|
v-model="consultantDto.password"
|
class="pam-consultant-login__input"
|
placeholder="輸入eService密碼">
|
<div class="pam-consultant-login__inputIcon cursor--pointer fix-chrome-click--issue"
|
@click="isShowPassword = !isShowPassword">
|
<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>驗證碼 <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="verificationCode"
|
maxlength="4"
|
class="pam-consultant-login__input">
|
</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 fix-chrome-click--issue"
|
@click="sendInfo">送出</button>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script lang="ts">
|
import { Vue, Component , namespace } from 'nuxt-property-decorator';
|
import { AxiosError } from 'axios';
|
import { Role } from '~/assets/ts/models/enum/Role';
|
import ErrorMessageBox from '~/assets/ts/errorService';
|
import loginService from '~/assets/ts/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>
|
.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>
|
