From 078cdb2b41d1dec47e2d981c2d2e618d12beddb4 Mon Sep 17 00:00:00 2001
From: Mila <Mila@pollex.com.tw>
Date: 星期四, 26 十二月 2024 09:43:23 +0800
Subject: [PATCH] feat(顧問登入): 串接 otp 發送/驗證 api
---
PAMapp/pages/consultantLogin/index.vue | 142 +++++++++++++++++++++++++----------------------
1 files changed, 76 insertions(+), 66 deletions(-)
diff --git a/PAMapp/pages/consultantLogin/index.vue b/PAMapp/pages/consultantLogin/index.vue
index 34f930e..e7ee471 100644
--- a/PAMapp/pages/consultantLogin/index.vue
+++ b/PAMapp/pages/consultantLogin/index.vue
@@ -27,7 +27,7 @@
<div class="password-reset" @click="resetPassword">敹��Ⅳ</div>
</div>
<div class="position-r mt-10">
- <input :type="checkPasswordType ? 'text' : 'password'"
+ <input :type="checkInputType ? 'text' : 'password'"
v-model="consultantDto.password"
:disabled="onOTPVerifyStep === 'CAN_RESEND'"
class="pam-consultant-login__input"
@@ -57,7 +57,7 @@
</div>
</div>
- <!-- -->
+ <!-- OTP 撽�Ⅳ -->
<div v-show="onOTPVerifyStep === 'CAN_RESEND'">
<el-row type="flex" justify="space-between">
<div class="mdTxt">頛詨 OTP 撽�Ⅳ</div>
@@ -65,7 +65,6 @@
{{counterTime(otpCounterSec)}}
</div>
</el-row>
-
<el-row>
<input
class="pam-consultant-login__input mt-10"
@@ -79,7 +78,6 @@
<div class="error mt-5 mb-10">
<span v-show="otpCounterSec === 0">OTP 撽�Ⅳ撌脤����� OTP 撽�Ⅳ</span>
</div>
-
<el-row>
<el-button
:disabled="!consultantDto.password || otpResendCounter !== 0 || !consultantDto.username"
@@ -91,18 +89,11 @@
v-if="otpResendCounter !== 0"
>({{ otpResendCounter }})</span>
</el-button>
-
</el-row>
</div>
- <div class="pam-paragraph">
- <el-button v-if="onOTPVerifyStep === 'APPLY_OTP'" icon="icon-arrow"
- :disabled="!consultantDto.username || !consultantDto.password || verificationCode.length !== 4"
- @click="applyOtpVerification">
- ��� OTP 撽�Ⅳ</el-button>
- </div>
- <div class="pam-consultant-login__confirmBlock pam-paragraph" v-if="onOTPVerifyStep === 'CAN_RESEND'">
+ <div class="pam-consultant-login__confirmBlock pam-paragraph">
<button class="pam-consultant-login__confirm cursor--pointer fix-chrome-click--issue"
- :disabled="!consultantDto.username || !consultantDto.password || !otpCode || !otpCounterSec"
+ :disabled="isSentBtnDisabled"
@click="sendInfo">�</button>
</div>
</div>
@@ -111,8 +102,8 @@
:isOpen.sync="otpConfirmVisible"
>
<div class="pam-popUp-title text--center">撌脣������</div>
- <div class="pam-popUp-title text--center">{{'email'}}</div>
- <div class="pam-popUp-title text--center">隢��摮隞嗡蒂摰������</div>
+ <div class="pam-popUp-title text--center">蝪∟��mail</div>
+ <div class="pam-popUp-title text--center">隢�������摮隞嗡蒂摰������</div>
<div class="pam-popUp-confirm-bolck mt-30">
<div class="text--center">
<el-button
@@ -132,6 +123,7 @@
import messageBoxService from '~/shared/services/message-box.service';
import loginService from '~/shared/services/login.service'
import { AgentInfo } from '~/shared/models/agent-info.model';
+import { OtpErrorCode } from '~/shared/models/enum/otpErrorCode';
const loginStore = namespace('login.store');
const roleStorage = namespace('localStorage');
@@ -164,7 +156,7 @@
otpConfirmVisible = false;
otpCode = '';
onOTPVerifyStep: 'APPLY_OTP' | 'CAN_RESEND' = 'APPLY_OTP';
- otpCounterSec = 50;
+ otpCounterSec = 300;
otpResendCounter = 30;
otpInterval: NodeJS.Timeout | null = null;
otpIndexKey!: string;
@@ -210,33 +202,14 @@
this.storeUserName();
}
- public applyOtpVerification(type: string): void {
- // TODO: sendOTP
- const otpInfo = {
- indexKey: "string", /** ��撣嗅otp隤��� */
- success: true, /** Otp�������� */
- failCode: "string",
- failReason: "string",
- }
- if (otpInfo.success) {
- // this.storageOtpTime(type, otpInfo);
- this.startOtpSetting(type);
- this.startOtpCount();
- } else {
- // TODO: otp error
- // const errorMsg = OtpErrorCode[otpInfo.failCode] ? OtpErrorCode[otpInfo.failCode]:'OTP蝟餌絞�隤�';
- // messageBoxService.showErrorMessage(errorMsg);
- }
- }
-
public sendInfo():void{
- this.isAlreadyDone
+ if (this.onOTPVerifyStep === 'APPLY_OTP') {
+ this.isAlreadyDone
? this.verify()
: messageBoxService.showErrorMessage('隢Ⅱ隤董����Ⅳ隞亙���Ⅳ��憛怠神摰');
- }
-
- get isAlreadyDone():boolean{
- return !!(this.verificationCode && this.consultantDto.username && this.consultantDto.password);
+ } else {
+ this.login();
+ }
}
resetPassword() {
@@ -246,7 +219,7 @@
resetOtpSetting() {
clearInterval(this.otpInterval ?? undefined);
this.otpResendCounter = 30;
- this.otpCounterSec = 50;
+ this.otpCounterSec = 300;
this.onOTPVerifyStep = 'APPLY_OTP';
this.otpCode = '';
}
@@ -265,9 +238,22 @@
this.otpCode = '';
}
- get checkPasswordType(): boolean {
+ get isAlreadyDone():boolean{
+ return !!(this.verificationCode && this.consultantDto.username && this.consultantDto.password);
+ }
+
+ get checkInputType(): boolean {
return this.onOTPVerifyStep === 'CAN_RESEND' ? false : this.isShowPassword;
}
+
+ get isSentBtnDisabled(): boolean {
+ if (this.onOTPVerifyStep === 'APPLY_OTP') {
+ return !this.consultantDto.username || !this.consultantDto.password || this.verificationCode.length !== 4;
+ } else {
+ return !this.consultantDto.username || !this.consultantDto.password || !this.otpCode || !this.otpCounterSec;
+ }
+ }
+
////////////////////////////////////////////////////////////////////
private verify():void{
@@ -284,18 +270,15 @@
private loginWithConsultant(): void {
loginService.logInToConsultant(this.consultantDto, this.verificationCode).then(res => {
- this.getLoginConsultantDetail(this.consultantDto.username);
- this.storageIdToken(res.data.id_token);
- this.storageRole(Role.ADMIN);
- this.storageConsultantId(this.consultantDto.username)
- this.storeUserName();
- this.$router.push('/myAppointmentList/appointmentList');
+ this.applyOtpVerification();
}).catch((error:AxiosError)=>{
this.checkHttpErrorStatus(error);
});
}
+
private checkHttpErrorStatus(error:any):void{
this.clearValue();
+ this.onOTPVerifyStep = 'APPLY_OTP';
this.regenerateImgOfVerification();
switch (error.response.status) {
case 401:
@@ -320,26 +303,53 @@
this.verificationCode = '';
}
- private startOtpSetting(type: string) {
- this.onOTPVerifyStep = 'CAN_RESEND';
- this.otpConfirmVisible = true;
- }
-
- private startOtpCount() {
- this.otpInterval = setInterval(() => {
- this.otpCounterSec -= 1;
- if (this.otpResendCounter !== 0) {
- this.otpResendCounter -= 1;
- if (this.otpResendCounter === 0) {
- // this.regenerateImgOfVerification();
+ //////////////////// ���/��撽�Ⅳ
+ private applyOtpVerification(): void {
+ loginService.sentOtpWithConsultant(this.consultantDto.username).then(otpInfo => {
+ if (otpInfo.success) {
+ this.otpIndexKey = otpInfo.indexKey;
+ this.startOtpSetting();
+ this.startOtpCount();
+ } else {
+ const errorMsg = OtpErrorCode[otpInfo.failCode] ? OtpErrorCode[otpInfo.failCode]:'OTP蝟餌絞�隤�';
+ messageBoxService.showErrorMessage(errorMsg);
}
+ })
+ }
+
+ private startOtpSetting() {
+ this.onOTPVerifyStep = 'CAN_RESEND';
+ this.otpConfirmVisible = true;
+ }
+
+ private startOtpCount() {
+ this.otpInterval = setInterval(() => {
+ this.otpCounterSec -= 1;
+ if (this.otpResendCounter !== 0) {
+ this.otpResendCounter -= 1;
+ }
+ if (this.otpCounterSec === 0 && this.otpInterval) {
+ clearInterval(this.otpInterval);
+ }
+ }, 1000)
+ }
+
+ private login() {
+ const loginVerify = {
+ account: this.consultantDto.username,
+ indexKey: this.otpIndexKey,
+ otpCode: this.otpCode
}
- if (this.otpCounterSec === 0 && this.otpInterval) {
- clearInterval(this.otpInterval);
- }
- }, 1000)
- }
-};
+ loginService.loginVerifyWithConsultant(loginVerify).then(res => {
+ this.getLoginConsultantDetail(this.consultantDto.username);
+ this.storageIdToken(res.id_token);
+ this.storageRole(Role.ADMIN);
+ this.storageConsultantId(this.consultantDto.username)
+ this.storeUserName();
+ this.$router.push('/myAppointmentList/appointmentList');
+ })
+ }
+ };
</script>
<style lang="scss" scoped>
--
Gitblit v1.8.0