From 74e563da7fa6886449fd2be5933e2d4ca5c85f48 Mon Sep 17 00:00:00 2001 From: jack <jack.su@pollex.com.tw> Date: 星期二, 12 九月 2023 11:25:52 +0800 Subject: [PATCH] [UPDATE] 解決弱點Se: Incorrect definition of Serializable class [UPDATE] 解決弱點Information exposure to log file [UPDATE] 解決弱點Use of hard-coded password --- PAMapp/pages/login/index.vue | 953 ++++++++++++++++++++++++++++++++++++++++------------------- 1 files changed, 641 insertions(+), 312 deletions(-) diff --git a/PAMapp/pages/login/index.vue b/PAMapp/pages/login/index.vue index a7b8fa1..f25eae7 100644 --- a/PAMapp/pages/login/index.vue +++ b/PAMapp/pages/login/index.vue @@ -9,28 +9,35 @@ <el-row type="flex" class="pt-30"> <el-button :class="{ 'active': connectDevice === 'MOBILE'}" - @click="connectDevice = 'MOBILE'">����Ⅳ</el-button> + @click="connectDevice = 'MOBILE'; regenerateImgOfVerification()">����Ⅳ</el-button> <el-button :class="{ 'active': connectDevice === 'EMAIL'}" - @click="connectDevice = 'EMAIL'">Email</el-button> + @click="connectDevice = 'EMAIL'; regenerateImgOfVerification()">Email</el-button> </el-row> </div> <div class="pam-inputs mb-10"> - <div class="pt-10" v-show="connectDevice === 'MOBILE'"> + <div class="pam-input-position pt-10" v-show="connectDevice === 'MOBILE'"> <input class="pam-input" :class="{ 'is-invalid': !phoneValid }" v-model="phoneNumber" - placeholder="隢撓�����Ⅳ"> + placeholder="隢撓�����Ⅳ" + :disabled="showPhoneOtpCodeField" + > + <i + class="icon-close" + v-if="onPhoneVerifyStep !== 'APPLY_OTP'" + @click="deleteOtpInfo('MOBILE')" + ></i> <div class="error mt-5 mb-5"> <span v-show="!phoneValid">����Ⅳ�撘�炊</span> </div> </div> - <div class="pt-10" v-show="connectDevice === 'EMAIL'"> + <div class="pam-input-position pt-10" v-show="connectDevice === 'EMAIL'"> <input class="pam-input" :class="{ @@ -38,9 +45,35 @@ }" v-model="email" placeholder="隢撓� Email ���" + :disabled="showEmailVerifyField" > + <i + class="icon-close" + v-if="showEmailVerifyField" + @click="deleteOtpInfo('EMAIL')" + ></i> <div class="error mt-5 mb-5"> <span v-show="!emailValid">Email�撘�炊</span> + </div> + </div> + </div> + + <div class="pam-paragraph" v-if="(!showPhoneOtpCodeField && !showEmailVerifyField)"> + <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" + style="margin-left: 16px" + @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> @@ -49,22 +82,25 @@ <template v-if="connectDevice === 'MOBILE'"> <div v-show="showPhoneOtpCodeField"> <el-row type="flex" justify="space-between"> - <div class="mdTxt">頛詨撽�Ⅳ</div> + <div class="mdTxt">頛詨 OTP 撽�Ⅳ</div> <div class="otp-count-timer"> - {{otpCounter}} + {{counterTime(otpCounterSec)}} </div> </el-row> - <el-row class="mb-30"> + <el-row> <input class="pam-input mt-10" :class="{ 'is-invalid': !otpCode }" v-model="otpCode" - placeholder="隢撓�撽�Ⅳ" + placeholder="隢撓� OTP 撽�Ⅳ" > </el-row> + <div class="error mt-5 mb-10"> + <span v-show="otpCounterSec === 0">OTP 撽�Ⅳ撌脤����� OTP 撽�Ⅳ</span> + </div> <el-row> <el-button @@ -72,19 +108,23 @@ @click="resentOtp('MOBILE')" icon="icon-arrow" > - ��撽�Ⅳ<span class="pam-field-title__hint pl-5">({{ otpResendCounter }})</span> + �� OTP 撽�Ⅳ<span + class="pam-field-title__hint pl-5" + v-if="otpResendCounter !== 0" + >({{ otpResendCounter }})</span> </el-button> + </el-row> </div> <el-row> <el-button v-if="onPhoneVerifyStep === 'APPLY_OTP'" - :disabled="!phoneNumber || !phoneValid" + :disabled="!phoneNumber || !phoneValid || verificationCode.length !== 4" @click="applyOtpVerification('MOBILE')" icon="icon-arrow" > - ����Ⅳ + ��� OTP 撽�Ⅳ </el-button> </el-row> @@ -93,48 +133,69 @@ <!-- email 撽�Ⅳ --> <template v-if="connectDevice === 'EMAIL'"> <el-row v-show="showEmailVerifyField"> + <el-row type="flex" justify="space-between"> + <div class="mdTxt">頛詨 OTP 撽�Ⅳ</div> + <div class="otp-count-timer"> + {{counterTime(emailCounterSec)}} + </div> + </el-row> + + <el-row> + <input + class="pam-input mt-10" + :class="{ + 'is-invalid': !emailOtpCode + }" + v-model="emailOtpCode" + placeholder="隢撓� OTP 撽�Ⅳ" + > + </el-row> + <div class="error mt-5 mb-10"> + <span v-show="emailCounterSec === 0">OTP 撽�Ⅳ撌脤����� OTP 撽�Ⅳ</span> + </div> + <el-button :disabled="!email || emailResendCounter !== 0 || !emailValid" icon="icon-arrow" @click="resentOtp('EMAIL')" > - ��撽�Ⅳ<span class="pam-field-title__hint pl-5">({{ emailResendCounter }})</span> + �� OTP 撽�Ⅳ<span + v-if="emailResendCounter !== 0" + class="pam-嚚�field-title__hint pl-5" + >({{ emailResendCounter }})</span> </el-button> - <div class="mt-10 smTxt_bold text--primary">! 隢�����mail敺�</div> </el-row> - <el-row v-show="!showEmailVerifyField"> + <el-row> <el-button - :disabled="!email || !emailValid" + v-if="onEmailVerifyResendStatus === 'APPLY_OTP'" + :disabled="!email || !emailValid || verificationCode.length !== 4" @click="applyOtpVerification('EMAIL')" icon="icon-arrow" > - ����Ⅳ + ��� OTP 撽�Ⅳ </el-button> </el-row> </template> </div> - <el-row type="flex" justify="center" class="pam-login-page__action-bar mt-30"> <el-button type="primary" - v-if="connectDevice === 'MOBILE' && onPhoneVerifyStep === 'INPUT_OTP'" - :disabled="!otpCode || !phoneNumber || !phoneValid" - @click="phoneLogin"> + v-if="(connectDevice === 'MOBILE' && onPhoneVerifyStep === 'INPUT_OTP') || (connectDevice === 'EMAIL' && onEmailVerifyResendStatus === 'CAN_RESEND')" + :disabled="isSubmitBtnDisabled" + @click="login"> � </el-button> </el-row> - <el-dialog - title="甇∟�雿輻��" - :custom-class="'pam-register-dialog'" - :visible.sync="registerDialogVisable" - :fullscreen="true" - :close-on-click-modal="false" - :show-close="false" - center> - <span> + <PopUpFrame + :isOpen.sync="registerDialogVisible" + :dialogWidth="'90%'" + class="pam-register-dialog" + @closePopUp="isReadContract = false;agreeContract = false" + > + <div class="subTitle text--center mb-20">甇∟�雿輻��</div> <el-row> <input class="pam-input" @@ -152,99 +213,78 @@ </el-row> <el-row class="pt-10"> <div + v-if="registerDialogVisible" class="mdTxt pam-register-dialog__contract" - @scroll="detectContructReadStatus"> - <h3>����犖鞈��鈭��</h3> + ref="contract" + @scroll="detectContractReadStatus"> + <h3>靽�犖憯賭��隞賣�������犖鞈��鈭��</h3> <p class="mt-10"> - �摰�犖鞈��風瘜��������犖鞈���������� - �銝����� + 靽�犖憯賭��隞賣���嚗�迂��������犖鞈��風瘜�誑銝迂����洵�璇洵鈭��洵�璇洵銝�������蝡臬�銝�����蝡航底�嚗� <p> <p class="mt-10"> - 銝����銝��犖鞈��嚗�����僑�����澈���絞銝�蝺刻���批�璆准���� - ��蝯⊥撘�(��雿���閰梯�Ⅳ�-MAIL����極雿��)蝑��隞�誑�� - ���霅��犖銋���� + 銝���犖鞈�������市�瘜����������摰����犖鞈汙銋����澈��Ⅱ隤� + 鈭箄澈靽 (001)��(040)�����平靘�成閬����鴽日�閬���銋���坐���(059)�����撮鴾��隞�������(069)��祥��恥�蝞∴坐�����(090)�雯鴾瑁頃���隞摮�����(148)�矽��絞閮��弦����(157)�隞�����平�閮��������摰�平���(181)�� <p> <p class="mt-10"> - 鈭������犖鞈��風瘜����誘銋�������蝘��風�蝑����� - ���������犖鞈��� + 鈭�����犖鞈汙嚗�祕憪�����Ⅳ�摮隞嗡縑蝞勗�隞��撟喳慦�“�����垣閰X����閬������犖鞈��� <p> <p class="mt-10"> - 銝���������������������犖鞈��� + 銝��犖鞈汙鴽銋�������情�撘�� + (銝�)������膩����翵平���敹����成閬��靽������ + (鈭�)���嚗�犖鞈��撠情���銋���� + (銝�)撠情嚗������矽�甈����������撟喳�����誨��嚗������蝡舫���“����撅砌��嚗�� + (���)�撘��瘜成閬����撘�� </p> <p class="mt-10"> - �������������平���暑�������銝剛瘞���������犖鞈� - ���� + ��������洵銝�������蝡臬停���靽����蝡臭��犖鞈汙敺�蝙銋���撘�� + (銝�)敺���翵蝙銋���� + �����閰U���閬賣���ˊ蝯西�ˊ��� + ����隢�����迤�� + ����隢��迫�����坐���������� + (鈭�)翵蝙甈��撘����蝡臬�������祥摰X������� 0809-0809-68 銵蝙銝膩甈��(撠������ : �曹� ~ �曹�� 08:00-20:00 ���勗����� 09:00-17:30嚗������曹�-�望24撠��)�� </p> <p class="mt-10"> - 鈭���������摰���甈∩誑憭�璆凋�撱��恐撠����誑��隞 - ���������銋����嚗�������犖鞈��� + 鈭�蝡臬�銵捱摰�����犖鞈����嚗���蝡舀������蒂��撟喳����犖鞈����撌脣���膩鈭������蝡臭���������迤蝣箔�������瘜�蝙��撟喳�脰�“�������垣閰Y����� </p> - <p class="mt-10"> - ���靘�犖鞈��風瘜洵 3 璇���停����犖鞈�����蝙銋���嚗� - (銝�) �閰X���閬賬�� - (鈭�) 隢�ˊ蝯西�ˊ��� - (銝�) 隢����甇��� - (���) 隢��迫���������� - (鈭�) 隢���� - ����蝙銝膩甈��撠������������������痊隞颯�靘� - �犖鞈��風瘜洵 14 璇�������銵雿平鞎餌�� - </p> - - <p class="mt-10"> - 銝������迤蝣箔��犖鞈�����瘜����摰�����平���� - </p> - - <p class="mt-10"> - �����平���閬���隞�������犖鞈����������銋痊�� - </p> - - <p class="mt-10"> - 銋��閫�甇支����蝚血��犖鞈��風瘜����������������迨��� - ��嚗�敺��撽�� - �犖鞈������� - 銝��鈭箏歇�����眼���膩��鈭��� - 鈭�鈭箏��眼����������鈭箔��犖鞈��誑��隞���������� - ��������� - </p> </div> </el-row> <el-row class="pt-30"> <div class="pam-agree-radio"> - <label for="agreeControct" class="pam-radio" + <label for="agreeContract" class="pam-radio" :class="{disabled: !isReadContract}"> <input type="radio" - id="agreeControct" - @click="agreeControct = !agreeControct" + id="agreeContract" + @click="agreeContract = !agreeContract" :disabled="!isReadContract" - value="agreeControct"> - <i :class="agreeControct ?'icon-checkbox-1': 'icon-checkbox'"></i>����蒂蝜潛�� + value="agreeContract"> + <i :class="agreeContract ?'icon-checkbox-1': 'icon-checkbox'"></i>����蒂蝜潛�� </label> </div> </el-row> - </span> - <span slot="footer" class="dialog-footer"> - <el-button - type="primary" - :disabled="!name || !agreeControct || !isReadContract" - @click="applyAccount" - >撱箇�撣唾�� - </el-button> - </span> - </el-dialog> + <div class="text--center mt-10"> + <el-button + type="primary" + :disabled="!name || !agreeContract || !isReadContract" + @click="applyAccount" + >撱箇�撣唾�� + </el-button> + </div> + </PopUpFrame> <PopUpFrame class="pam-popUpFrame" - :isOpen.sync="emailOtpConfirmVisable"> + :isOpen.sync="emailOtpConfirmVisable" + > <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-confirm-bolck pam-paragraph"> + <div class="pam-popUp-confirm-bolck mt-30"> <div class="text--center"> <el-button type="primary" @@ -255,29 +295,37 @@ </PopUpFrame> <PopUpFrame class="pam-popUpFrame" - :isOpen.sync="registerSuccessConfirmVisable"> + :isOpen.sync="registerSuccessConfirmVisable" + @closePopUp="confirmApplySuccess" + > <div class="pam-popUp-title text--center"> 甇∟�����������垣閰g�“���誑�����{ connectDevice === 'MOBILE' ? '����Ⅳ' : 'Email'}}���蝜� </div> - <div class="pam-popUp-confirm-bolck pam-paragraph"> + <div class="pam-popUp-txt text--center mb-10 mt-5" + >�撠�歲��...{{autoRedirectCounter}}蝘�</div> + <div class="pam-popUp-confirm-bolck mt-30"> <div class="text--center"> <el-button type="primary" - @click="confirmApplySuccess" + @click="registerSuccessConfirmVisable = false" >������</el-button> </div> </div> </PopUpFrame> <PopUpFrame class="pam-popUpFrame" - :isOpen.sync="phoneSuccessConfirmVisable"> - <div class="pam-popUp-title text--center mb-50" + :isOpen.sync="phoneSuccessConfirmVisable" + @closePopUp="confirmApplySuccess" + > + <div class="pam-popUp-title text--center" >甇∟�������</div> - <div class="pam-popUp-confirm-bolck pam-paragraph"> + <div class="pam-popUp-txt text--center mb-30 mt-5 xsTxt" + >�撠�歲��...{{autoRedirectCounter}}蝘�</div> + <div class="pam-popUp-confirm-bolck mt-30"> <div class="text--center"> <el-button type="primary" - @click="confirmApplySuccess" + @click="phoneSuccessConfirmVisable = false" >������</el-button> </div> </div> @@ -288,46 +336,202 @@ <script lang="ts"> import { namespace } from 'nuxt-property-decorator'; -import { Vue, Component } from 'vue-property-decorator'; -import { LoginRequest, loginVerify, OtpInfo, register, RegisterInfo, sendOtp } from '~/assets/ts/api/consultant'; -import { Role } from '~/assets/ts/models/enum/Role'; +import { Vue, Component, Ref, Watch } from 'vue-property-decorator'; +import { OtpErrorCode } from '~/shared/models/enum/otpErrorCode'; +import { Role } from '~/shared/models/enum/Role'; +import { LoginRequest } from '~/shared/models/loginRequest.model'; +import { LoginVerify } from '~/shared/models/loginVerify.model'; +import { OtpInfo } from '~/shared/models/otpInfo.model'; +import { RegisterInfo } from '~/shared/models/registerInfo'; +import loginService from '~/shared/services/login.service'; +import messageBoxService from '~/shared/services/message-box.service'; +import otpService, { OtpStorageName } from '~/shared/services/otp.service'; const roleStorage = namespace('localStorage'); @Component export default class Login extends Vue { - @roleStorage.Mutation storageIdToken!: (token:string) => void; - @roleStorage.Mutation storageRole!: (role:string) => void; + @roleStorage.Mutation + storageIdToken!: (token:string) => void; + + @roleStorage.Mutation + storageRole!: (role:string) => void; + + @roleStorage.Mutation + storageUserInfo!: (userInfo: RegisterInfo) => void; + + @Ref('contract') readonly contract!: any; connectDevice: 'MOBILE' | 'EMAIL' = 'MOBILE'; phoneNumber = ''; otpCode = ''; onPhoneVerifyStep: 'APPLY_OTP' | 'INPUT_OTP' | 'SUBMIT_OTP' = 'APPLY_OTP'; - otpCounter = '15:00'; + otpCounterSec = 300; otpResendCounter = 30; otpInterval: any; - phoneOtpInfo!: OtpInfo; + phoneOtpIndexKey!: string; email = ''; onEmailVerifyResendStatus: 'APPLY_OTP' | 'CAN_RESEND' = 'APPLY_OTP'; + emailCounterSec = 300; emailResendCounter = 30; + emailOtpCode = ''; emailResendInterval: any; - emailOtpInfo!: OtpInfo; + emailOtpIndexKey!: string; + + verificationCode = ''; + imgSrc = ''; + + autoRedirectCounter = 3; + autoRedirectInterval: any; name = ''; - agreeControct = false; + agreeContract = false; isReadContract = false; phoneSuccessConfirmVisable = false; emailOtpConfirmVisable = false; - registerDialogVisable = false; + registerDialogVisible = false; registerSuccessConfirmVisable = false; applyAccount_onAction = false; - detectContructReadStatus(event: any): void { + previousPath = ''; + + @Watch('onEmailVerifyResendStatus') + onEmailVerifyResendStatusChange() { + if (this.onEmailVerifyResendStatus === 'APPLY_OTP') { + this.regenerateImgOfVerification(); + } + } + + @Watch('onPhoneVerifyStep') + onPhoneVerifyStepChange() { + if (this.onPhoneVerifyStep === 'APPLY_OTP') { + this.regenerateImgOfVerification(); + } + } + + ///////////////////////////////////////////////////// + + beforeRouteEnter (to, from, next) { + next(vm => { + vm.previousPath = from.path; + }) + } + + mounted() { + this.parsePhoneOtpTimeFromStorage(); + this.parseEmailOtpTimeFromStorage(); + this.regenerateImgOfVerification(); + } + + private parsePhoneOtpTimeFromStorage() { + const parsePhoneOtpTime = otpService.parseOtpTime(OtpStorageName.PHONE); + const diffSecs = otpService.diffOtpTime(OtpStorageName.PHONE, this.otpCounterSec); + + if (parsePhoneOtpTime && diffSecs) { + this.otpResendCounter = diffSecs < 30 ? 30 - diffSecs : 0; + this.otpCounterSec -= diffSecs; + this.phoneNumber = parsePhoneOtpTime.phone ? parsePhoneOtpTime.phone : ''; + this.onPhoneVerifyStep = 'INPUT_OTP'; + this.phoneOtpIndexKey = parsePhoneOtpTime.indexKey; + this.startOtpCount('MOBILE'); + } + } + + private parseEmailOtpTimeFromStorage() { + const parseEmailOtpTime = otpService.parseOtpTime(OtpStorageName.EMAIL); + const diffSecs = otpService.diffOtpTime(OtpStorageName.EMAIL, this.emailCounterSec); + + if (parseEmailOtpTime && diffSecs) { + this.emailResendCounter = diffSecs < 30 ? 30 - diffSecs : 0; + this.emailCounterSec -= diffSecs; + this.email = parseEmailOtpTime.email ? parseEmailOtpTime.email : ''; + this.onEmailVerifyResendStatus = 'CAN_RESEND'; + this.emailOtpIndexKey = parseEmailOtpTime.indexKey; + this.startOtpCount('EMAIL'); + } + } + + destroyed() { + this.removeOtpTime(); + clearInterval(this.otpInterval); + clearInterval(this.emailResendInterval); + clearInterval(this.autoRedirectInterval); + } + + ////////////////////////////////////////////////////////// + + regenerateImgOfVerification(): void { + loginService.getImgOfVerification().then( imgOfBase64 => { + this.imgSrc = imgOfBase64; + this.verificationCode = ''; + } + ); + }; + + //////////////////// �� + login() { + const login: LoginVerify = this.setLoginInfo(); + this.removeOtpTime(); + loginService.loginVerify(login).then(res => { + this.storageIdToken(res.id_token); + this.storageRole(Role.USER); + this.phoneSuccessConfirmVisable = true; + this.autoRedirect(); + this.storagePhoneOrEmail(this.setRegisterInfo()); + }).catch(error => { + this.checkHttpErrorStatus(error); + }); + } + + confirmApplySuccess(): void { + this.phoneSuccessConfirmVisable = false; + this.registerSuccessConfirmVisable = false; + this.redirect(); + } + + //////////////////// 閮餃�� + applyAccount(): void { + if (this.applyAccount_onAction) { + return ; + } + + this.applyAccount_onAction = true; + const registerInfo = this.setRegisterInfo(); + + loginService.register(registerInfo).then(res => { + this.storageIdToken(res.id_token); + this.storageRole(Role.USER); + this.storagePhoneOrEmail(registerInfo); + this.autoRedirect(); + this.registerSuccessConfirmVisable = true; + }).catch(() => { + this.applyAccount_onAction = false; + }); + }; + + private autoRedirect() { + this.autoRedirectInterval = setInterval(() => { + this.autoRedirectCounter -= 1; + + if (this.autoRedirectCounter === 0) { + clearInterval(this.autoRedirectInterval); + this.redirect(); + } + }, 1000) + } + + private redirect() { + const backToPrevious = ['questionnaire', 'myConsultantList']; + const find = backToPrevious.findIndex(item => this.previousPath.includes(item)); + find > -1 ? this.$router.go(-1) : this.$router.push('/'); + } + + detectContractReadStatus(event: any): void { const scrollTop = Math.round(event.target.scrollTop); const height = event.target.scrollHeight - event.target.clientHeight; if (Math.floor(scrollTop/10) === (Math.floor(height/10))) { @@ -335,12 +539,190 @@ } }; + //////////////////// ���/��/��撽�Ⅳ + + applyOtpVerification(type: string): void { + const isMobile = this.connectDevice === 'MOBILE'; + const loginInfo: LoginRequest = { + loginType: isMobile ? 'SMS' : 'EMAIL', + account: isMobile ? this.phoneNumber : this.email, + } + loginService.sendOtp(loginInfo, this.verificationCode).then(otpInfo => { + if (otpInfo.success) { + this.storageOtpTime(type, otpInfo); + this.startOtpSetting(type); + this.startOtpCount(type); + } else { + const errorMsg = OtpErrorCode[otpInfo.failCode] ? OtpErrorCode[otpInfo.failCode]:'OTP蝟餌絞�隤�'; + messageBoxService.showErrorMessage(errorMsg); + } + }); + }; + + private storageOtpTime(type: string, otpInfo: OtpInfo) { + type === 'MOBILE' ? this.phoneOtpIndexKey = otpInfo.indexKey : this.emailOtpIndexKey = otpInfo.indexKey; + const info = {...this.setRegisterInfo(), time: new Date()} + const storageName = type === 'MOBILE' ? OtpStorageName.PHONE : OtpStorageName.EMAIL; + otpService.setOtpTimeToStorage(storageName, info); + } + + private startOtpSetting(type: string) { + if (type === 'MOBILE') { + this.onPhoneVerifyStep = 'INPUT_OTP'; + } else { + this.onEmailVerifyResendStatus = 'CAN_RESEND'; + this.emailOtpConfirmVisable = true; + } + } + + private startOtpCount(type: string) { + type === 'MOBILE' ? this.startPhoneCounter() : this.startEmailCounter();; + } + + private startEmailCounter() { + this.emailResendInterval = setInterval(() => { + this.emailCounterSec -= 1; + if (this.emailResendCounter !== 0) { + this.emailResendCounter -= 1; + if (this.emailResendCounter === 0) { + // this.regenerateImgOfVerification(); + } + } + if (this.emailCounterSec === 0) { + clearInterval(this.emailResendInterval); + } + }, 1000) + } + + private startPhoneCounter() { + this.otpInterval = setInterval(() => { + this.otpCounterSec -= 1; + if (this.otpResendCounter !== 0) { + this.otpResendCounter -= 1; + if (this.otpResendCounter === 0) { + // this.regenerateImgOfVerification(); + } + } + if (this.otpCounterSec === 0) { + clearInterval(this.otpInterval); + } + }, 1000) + } + + resentOtp(type: string) { + this.resetOtpSetting(type); + } + + deleteOtpInfo(type: string) { + this.resetOtpSetting(type); + if (type === 'MOBILE') { + this.onPhoneVerifyStep = 'APPLY_OTP'; + this.phoneNumber = ''; + this.otpCode = ''; + } else { + this.onEmailVerifyResendStatus = 'APPLY_OTP'; + this.email = ''; + this.emailOtpCode = ''; + } + this.removeOtpTime(); + } + + private resetOtpSetting(type: string) { + if (type === 'MOBILE') { + clearInterval(this.otpInterval); + this.otpResendCounter = 30; + this.otpCounterSec = 300; + this.onPhoneVerifyStep = 'APPLY_OTP'; + } else { + clearInterval(this.emailResendInterval); + this.emailResendCounter = 30; + this.emailCounterSec = 300; + this.onEmailVerifyResendStatus = 'APPLY_OTP'; + } + } + + counterTime(counterSec) { + let min = Math.floor(counterSec / 60); + let sec = Math.floor(counterSec % 60); + return `${min < 10 ? '0' + min : min}:${sec < 10 ? '0' + sec : sec}`; + } + + ////////////////////////////////////////////////////////////////// + + private checkHttpErrorStatus(error:any):void{ + switch (error.response.status) { + case 401: + const errorMsg = OtpErrorCode[error.response?.data?.detail] ? OtpErrorCode[error.response?.data?.detail]:'OTP蝟餌絞�隤�'; + messageBoxService.showErrorMessage(errorMsg); + break; + case 403: + this.registerDialogVisible = true; + setTimeout(() => { + const isScrollBarNeedless = this.contract.scrollHeight <= this.contract.clientHeight; + if (isScrollBarNeedless) { + this.isReadContract = true; + } + }, 1000); + break; + default: + const defaultErrorMsg = OtpErrorCode[error.response?.data?.title] + messageBoxService.showErrorMessage('',defaultErrorMsg); + break; + } + } + + private storagePhoneOrEmail(registerInfo:RegisterInfo):void{ + const info = {...registerInfo, time: new Date()} + // storageUserInfo!: (userInfo: RegisterInfo) => void; + this.storageUserInfo(info); + // localStorage.setItem('userInfo',JSON.stringify(info)); + } + + private removeOtpTime() { + otpService.removeOtpTimeToStorage(OtpStorageName.PHONE); + otpService.removeOtpTimeToStorage(OtpStorageName.EMAIL); + } + + + private setLoginInfo() { + const isMobile = this.connectDevice === 'MOBILE' + return { + account: isMobile ? this.phoneNumber : this.email, + indexKey: isMobile ? this.phoneOtpIndexKey : this.emailOtpIndexKey, + otpCode: isMobile ? this.otpCode : this.emailOtpCode + } + } + + private setRegisterInfo(): RegisterInfo { + return this.connectDevice === 'MOBILE' + ? { + phone: this.phoneNumber, + indexKey: this.phoneOtpIndexKey, + otpCode: this.otpCode, + name: this.name, + contactType: 'SMS' + } + : { + email: this.email, + indexKey: this.emailOtpIndexKey, + otpCode: this.emailOtpCode, + name: this.name, + contactType: 'EMAIL' + } + } + + get isSubmitBtnDisabled(): boolean { + return this.connectDevice === 'MOBILE' + ? (!this.otpCode || !this.phoneNumber || !this.phoneValid || !this.otpCounterSec) + : (!this.emailOtpCode || !this.email || !this.emailValid || !this.emailCounterSec) + } + get showPhoneOtpCodeField(): boolean { return this.connectDevice === 'MOBILE' && this.onPhoneVerifyStep === 'INPUT_OTP'; }; get showEmailVerifyField(): boolean { - return this.connectDevice === 'EMAIL' && this.onEmailVerifyResendStatus !== 'APPLY_OTP'; + return this.connectDevice === 'EMAIL' && this.onEmailVerifyResendStatus === 'CAN_RESEND'; }; get phoneValid() { @@ -352,236 +734,183 @@ const rule = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/; return this.email ? rule.test(this.email) : true; } - - applyOtpVerification(type: string): void { - const isMobile = this.connectDevice === 'MOBILE'; - const loginInfo: LoginRequest = { - loginType: isMobile ? 'SMS' : 'EMAIL', - account: isMobile ? this.phoneNumber : this.email, - } - sendOtp(loginInfo).then(otpInfo => { - if (otpInfo.success) { - this.startOtpCount(type, otpInfo); - } - }); - }; - - resentOtp(type: string) { - if (type === 'MOBILE') { - clearInterval(this.otpInterval); - this.otpResendCounter = 30; - this.otpCounter = '15:00'; - this.startPhoneCounter(); - } else { - this.emailResendCounter = 30; - this.startEmailCounter(); - this.emailOtpConfirmVisable = true; - } - } - - private startOtpCount(type: string, otpInfo) { - type === 'MOBILE' ? this.phoneOtpInfo = otpInfo : this.emailOtpInfo = otpInfo; - if (type === 'MOBILE') { - this.onPhoneVerifyStep = 'INPUT_OTP'; - this.startPhoneCounter(); - } else { - this.onEmailVerifyResendStatus = 'CAN_RESEND'; - this.startEmailCounter(); - this.emailOtpConfirmVisable = true; - } - } - - private startEmailCounter() { - this.emailResendInterval = setInterval(() => { - this.emailResendCounter -= 1; - if (this.emailResendCounter === 0) { - clearInterval(this.emailResendInterval) - } - }, 1000) - } - - private startPhoneCounter() { - const minCount = this.otpCounter.split(':'); - let secCount = (+minCount[0] * 60) + (+minCount[1]); - let min = 0; - let sec = 0; - this.otpInterval = setInterval(() => { - secCount -= 1; - min = Math.floor(secCount/60); - sec = Math.floor(secCount%60); - this.otpCounter = `${min < 10 ? '0' + min : min}:${sec < 10 ? '0' + sec : sec}`; - - if (this.otpResendCounter !== 0) { - this.otpResendCounter -= 1; - } - - if (secCount === 0) { - clearInterval(this.otpInterval) - } - }, 1000) - } - - private setRegisterInfo(): RegisterInfo { - return this.connectDevice === 'MOBILE' - ? { - phone: this.phoneNumber, - indexKey: this.phoneOtpInfo.indexKey, - otpCode: this.otpCode, - name: this.name, - contactType: 'SMS' - } - : { - email: this.email, - indexKey: this.emailOtpInfo.indexKey, - otpCode: this.otpCode, - name: this.name, - contactType: 'EMAIL' - } - } - - applyAccount(): void { - if (this.applyAccount_onAction) { - return ; - } - - this.applyAccount_onAction = true; - const registerInfo = this.setRegisterInfo(); - register(registerInfo).then(res => { - this.storageIdToken(res.data.id_token); - this.storageRole(Role.USER); - this.registerSuccessConfirmVisable = true; - }).catch(() => { - this.applyAccount_onAction = false; - }); - }; - - confirmApplySuccess(): void { - this.phoneSuccessConfirmVisable = false; - this.registerSuccessConfirmVisable = false; - this.$router.go(-1); - } - - phoneLogin() { - const login = { - account: this.phoneNumber, - indexKey: this.phoneOtpInfo.indexKey, - otpCode: this.otpCode - } - loginVerify(login).then(res => { - this.storageIdToken(res.data.id_token); - this.storageRole(Role.USER); - this.phoneSuccessConfirmVisable = true; - }).catch(error => { - if (error.response.status === 401) { - this.registerDialogVisable = true; - } - }) - } - - destroyed() { - clearInterval(this.otpInterval); - clearInterval(this.emailResendInterval); - } - } </script> <style lang="scss"> .pam-login-page { - font-size: 20px !important; - display: flex; - flex-direction: column; - .pam-login-page__action-bar { + font-size: 20px !important; display: flex; - flex: 1; - align-items: flex-end; + flex-direction: column; + .pam-login-page__action-bar { + display: flex; + flex: 1; + align-items: flex-end; + @include desktop { + margin-bottom: 30px; + } + } } -} -.pam-input { - height: 26px; - width: calc(100% - 36px); - border-radius: 10px !important; - padding: 12px 18px !important; - border:1px solid #CCCCCC; - outline: 0; - @extend .text--middle; - &::placeholder { - color: $PRUDENTIAL_GREY; + .pam-input { + height: 26px; + width: calc(100% - 36px); + border-radius: 10px !important; + padding: 12px 18px !important; + border:1px solid #CCCCCC; + outline: 0; + @extend .text--middle; + &::placeholder { + color: $PRUDENTIAL_GREY; + } + &.is-invalid { + border: 1px solid $PRIMARY_RED !important; + border-radius: 20px; + } } - &.is-invalid { - border: 1px solid $PRIMARY_RED !important; - border-radius: 20px; - } -} .pam-register-dialog__contract { - $DEVICE_EXTRA_HEIGHT: 42px; + $DEVICE_EXTRA_HEIGHT: 80px; $ALIGN_PADDING: 60px; - $TOP_CONTENT_HEIGHT: 186px; - $BOTTOM_CONTENT_HEIGHT: 131px; + $TOP_CONTENT_HEIGHT: 211px; + $BOTTOM_CONTENT_HEIGHT: 141px; + // text-align:start; max-height: calc(100vh - $DEVICE_EXTRA_HEIGHT - $ALIGN_PADDING - $TOP_CONTENT_HEIGHT - $BOTTOM_CONTENT_HEIGHT); overflow-y: scroll; border-radius: 6px; border: 1px solid #707070; padding: 20px; -} - -.pam-radio { - color: $PRIMARY_RED; - align-items: center; - display: flex; - font-size: 20px; - font-weight: bold; - input { - display: none; - } - i { - font-size: 27px; - padding-right: 5px; + @include desktop { + height: 335px; } } -.pam-register-dialog { - padding: 30px 20px; - display: flex; - flex-direction: column; - border-radius: 0; - &.el-dialog { - border-radius: 0; - } - .el-dialog__header { - padding: 0; - margin-bottom: 30px; - .el-dialog__title { - @extend .subTitle; + .pam-radio { + color: $PRIMARY_RED; + align-items: center; + display: flex; + font-size: 20px; + font-weight: bold; + input { + display: none; + } + i { + font-size: 27px; + padding-right: 5px; } } - .el-dialog__body { - flex: 1; - padding: 0; - margin-bottom: 30px; + + .pam-field-title__hint { + @extend .smTxt_bold; + color: #68737A; } - .el-dialog__footer { - padding: 0 !important; + + .error { + @extend .smTxt_bold; + @extend .text--primary; + height: 16px; } -} -.pam-field-title__hint { - @extend .smTxt_bold; - color: #68737A; -} + .pam-popUp-title { + font-size: 20px; + line-height: 27px; + } -.error { - @extend .smTxt_bold; - @extend .text--primary; - height: 16px; -} + .pam-popUp-txt { + font-size: 18px; + color: $MID_GREY; + } -.pam-popUp-title { - line-height: 24px; -} -.disabled { - color: #A7A8AA; -} + .disabled { + color: #A7A8AA; + } + + .pam-input-position { + position: relative; + .icon-close { + cursor: pointer; + position: absolute; + right: 15px; + top: 28px; + font-size: 16px; + } + } + .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 { + margin-left: 8px; + 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> -- Gitblit v1.8.0