From 9cb6d5f92ad7aeda45ad1fe6482dcfc63d17be2b Mon Sep 17 00:00:00 2001
From: HelenHuang <LinHuang@pollex.com.tw>
Date: 星期一, 06 十二月 2021 12:35:26 +0800
Subject: [PATCH] Merge branch 'master' of https://192.168.0.10:8443/r/pcalife/PAM
---
PAMapp/pages/consultantLogin/index.vue | 164 ++++++++++++++++++++++++++++++++++++++++--------------
1 files changed, 120 insertions(+), 44 deletions(-)
diff --git a/PAMapp/pages/consultantLogin/index.vue b/PAMapp/pages/consultantLogin/index.vue
index c20ae68..283f867 100644
--- a/PAMapp/pages/consultantLogin/index.vue
+++ b/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 {
--
Gitblit v1.9.3