From b447eada56299711ac3fb1bc9a698469441e8338 Mon Sep 17 00:00:00 2001
From: 劉鈞霖 <benson@gmail.com>
Date: 星期一, 29 十一月 2021 18:19:22 +0800
Subject: [PATCH] [ Update ] : 顧問登入驗證碼串接以及錯誤控制( 文案暫時 )完成
---
PAMapp/pages/consultantLogin/index.vue | 130 ++++++++++++++++++++++++------------------
1 files changed, 74 insertions(+), 56 deletions(-)
diff --git a/PAMapp/pages/consultantLogin/index.vue b/PAMapp/pages/consultantLogin/index.vue
index 5fa40b7..0c14a5f 100644
--- a/PAMapp/pages/consultantLogin/index.vue
+++ b/PAMapp/pages/consultantLogin/index.vue
@@ -10,24 +10,16 @@
class="pam-consultant-login__input"
placeholder="頛詨eService撣唾��">
<div class="pam-consultant-login__inputIcon text--primary cursor--pointer fix-chrome-click--issue"
- @click="isRemember = !isRemember">
- <i :class="[isRemember ? 'icon-checkbox-1' : 'icon-checkbox','pr-5']"></i>
+ @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 fix-chrome-click--issue"
- :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撖Ⅳ">
@@ -37,37 +29,37 @@
</div>
</div>
</div>
- <!-- <div class="pam-paragraph">
+ <div class="pam-paragraph">
<div class="pam-consultant-login__title">
<div>撽�Ⅳ</div>
<div class="text--dark-blue fs-16 cursor--pointer fix-chrome-click--issue"
- @click="regenerateCode">������</div>
+ @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>
<div class="pam-consultant-login__confirmBlock pam-paragraph">
<button class="pam-consultant-login__confirm cursor--pointer fix-chrome-click--issue"
- @click="loginWithConsultant">�</button>
+ @click="sendInfo">�</button>
</div>
</div>
</div>
</template>
<script lang="ts">
- import { namespace } from 'nuxt-property-decorator';
+ import { Vue, Component , namespace } from 'nuxt-property-decorator';
+ import { getImgOfVerification, logInToConsultant, getVerificationStatus } from '~/assets/ts/api/consultant';
import { Role } from '~/assets/ts/models/enum/Role';
- import { Vue, Component } from 'vue-property-decorator';
- import { getForgotPasswordLink, getVerificationCodeImg, logInToConsultant } from '~/assets/ts/api/consultant';
+ import { MessageBox } from 'element-ui';
const roleStorage = namespace('localStorage');
@Component({
@@ -77,63 +69,89 @@
@roleStorage.Mutation storageIdToken!: (token: string) => void;
@roleStorage.Mutation storageRole!: (role: string) => void;
- isRemember = false;
+ isRememberUserName = false;
isShowPassword = false;
- forgotPasswordLink = ''; // 撠
- imgOfVerificationCode = ''; // 撠
+ imgSrc = '';
+ verificationCode='';
consultantDto = {
username: '',
password: '',
- verificationCode: '',
+ }
+
+ get isAlreadyDone():boolean{
+ return !!(this.verificationCode && this.consultantDto.username && this.consultantDto.password);
}
mounted() {
- this.getRememberUserName();
- this.regenerateCode();
- this.getLinkOfForgotPassword();
+ this.getInitUserName();
+ this.regenerateImgOfVerification();
};
- private getRememberUserName(): void {
+ private getInitUserName(): void {
const username = localStorage.getItem('consultantUserName')
if (username) {
this.consultantDto.username = username;
- this.isRemember = true;
+ this.isRememberUserName = true;
}
}
- private getLinkOfForgotPassword(): void {
- getForgotPasswordLink().then(link => {
- this.forgotPasswordLink = link;
- });
- };
- public regenerateCode(): void {
- getVerificationCodeImg().then(imgOfbase64 => {
- this.imgOfVerificationCode = imgOfbase64;
- });
+ public regenerateImgOfVerification(): void {
+ getImgOfVerification().then( imgOfBase64 =>
+ this.imgSrc = imgOfBase64
+ );
};
- public loginWithConsultant(): void {
- this.recordAccount();
+ public isRememberChange():void{
+ this.isRememberUserName = !this.isRememberUserName;
+ this.storeUserName();
+ }
- logInToConsultant(this.consultantDto).then(res => {
- this.storageIdToken(res.data.id_token);
- this.storageRole(Role.ADMIN);
- this.$router.push('/myAppointmentList/appointmentList');
- }, (error) => {
- this.consultantDto.password = '';
- this.consultantDto.verificationCode = '';
+ public sendInfo():void{
+ this.isAlreadyDone ? this.verify() : this.showErrorMessageBox('隢Ⅱ隤董����Ⅳ隞亙���Ⅳ��憛怠神摰');
+ }
+
+ private verify():void{
+ getVerificationStatus(this.verificationCode).then( verifySuccess => {
+ verifySuccess.data ? this.loginWithConsultant() : this.showErrorMessageBox('撽�Ⅳ頛詨�隤�');
});
}
- private recordAccount(): void {
- localStorage.setItem('consultantUserName', this.isRemember ? this.consultantDto.username : '');
+ private loginWithConsultant(): void {
+ logInToConsultant(this.consultantDto).then(res => {
+ this.storageIdToken(res.data.id_token);
+ this.storageRole(Role.ADMIN);
+ this.storeUserName();
+ this.$router.push('/myAppointmentList/appointmentList');
+ }, (error) => {
+ this.clearValue();
+ });
+ }
+
+ private showErrorMessageBox(errorMsg:string):void{
+ this.clearValue();
+ MessageBox({
+ message: errorMsg,
+ showClose:false,
+ showConfirmButton:true,
+ confirmButtonText:'蝣箄��',
+ customClass:'pam-message-box',
+ closeOnClickModal:false,
+ });
+ }
+
+ private storeUserName(): void {
+ localStorage.setItem('consultantUserName', this.isRememberUserName ? this.consultantDto.username : '');
};
+
+ private clearValue():void{
+ this.consultantDto.password = '';
+ this.verificationCode = '';
+ }
};
</script>
-<style lang="scss"
- scoped>
+<style lang="scss" scoped>
.mt-20 {
margin-top: 20px;
}
@@ -193,9 +211,9 @@
}
&__forgot-password {
- color: $PRIMARY_RED;
+ color: $PRIMARY_RED;
text-decoration: none;
- font-size: 16px;
+ font-size: 16px;
}
&__verifyBlock {
@@ -205,8 +223,8 @@
&__verifyImg {
width: 126px;
- border: 1px black solid;
height: 50px;
+ border:1px #cccccc solid;
img {
width: 100%;
height: 100%;
--
Gitblit v1.8.0