<template>
|
<div class="pam-login-page">
|
<div class='mb-30'>
|
<div class="mdTxt">登入 | 註冊方式</div>
|
<div class="pam-field-title__hint mt-5 mb-10"
|
>顧問將會以此{{connectDevice === 'MOBILE' ? '手機號碼' : 'Email'}}為主要預約諮詢聯繫方式</div>
|
|
<div class="pam-tags">
|
<el-row type="flex" class="pt-30">
|
<el-button
|
:class="{ 'active': connectDevice === 'MOBILE'}"
|
@click="connectDevice = 'MOBILE'; regenerateImgOfVerification()">手機號碼</el-button>
|
<el-button
|
:class="{ 'active': connectDevice === 'EMAIL'}"
|
@click="connectDevice = 'EMAIL'; regenerateImgOfVerification()">Email</el-button>
|
</el-row>
|
</div>
|
|
<div class="pam-inputs mb-10">
|
<div class="pam-input-position pt-10" v-show="connectDevice === 'MOBILE'">
|
<input
|
class="pam-input"
|
:class="{
|
'is-invalid': !phoneValid
|
}"
|
v-model="phoneNumber"
|
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="pam-input-position pt-10" v-show="connectDevice === 'EMAIL'">
|
<input
|
class="pam-input"
|
:class="{
|
'is-invalid': !emailValid
|
}"
|
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>
|
|
<!-- mobile 驗證碼 -->
|
<template v-if="connectDevice === 'MOBILE'">
|
<div v-show="showPhoneOtpCodeField">
|
<el-row type="flex" justify="space-between">
|
<div class="mdTxt">輸入 OTP 驗證碼</div>
|
<div class="otp-count-timer">
|
{{counterTime(otpCounterSec)}}
|
</div>
|
</el-row>
|
|
<el-row>
|
<input
|
class="pam-input mt-10"
|
:class="{
|
'is-invalid': !otpCode
|
}"
|
v-model="otpCode"
|
placeholder="請輸入 OTP 驗證碼"
|
>
|
</el-row>
|
<div class="error mt-5 mb-10">
|
<span v-show="otpCounterSec === 0">OTP 驗證碼已過期，請重發 OTP 驗證碼</span>
|
</div>
|
|
<el-row>
|
<el-button
|
:disabled="!phoneNumber || otpResendCounter !== 0 || !phoneValid"
|
@click="resentOtp('MOBILE')"
|
icon="icon-arrow"
|
>
|
重發 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 || verificationCode.length !== 4"
|
@click="applyOtpVerification('MOBILE')"
|
icon="icon-arrow"
|
>
|
發送 OTP 驗證碼
|
</el-button>
|
</el-row>
|
|
</template>
|
|
<!-- 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')"
|
>
|
重發 OTP 驗證碼<span
|
v-if="emailResendCounter !== 0"
|
class="pam-｀field-title__hint pl-5"
|
>({{ emailResendCounter }})</span>
|
</el-button>
|
</el-row>
|
|
<el-row>
|
<el-button
|
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') || (connectDevice === 'EMAIL' && onEmailVerifyResendStatus === 'CAN_RESEND')"
|
:disabled="isSubmitBtnDisabled"
|
@click="login">
|
送出
|
</el-button>
|
</el-row>
|
|
<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"
|
:class="{
|
'is-invalid': !name
|
}"
|
v-model="name"
|
placeholder="請輸入姓名"
|
>
|
</el-row>
|
<el-row class="pt-30">
|
<div class="mdTxt">
|
請審閱條款，並核勾確認已閱讀且同意相關條款內容
|
</div>
|
</el-row>
|
<el-row class="pt-10">
|
<div
|
v-if="registerDialogVisible"
|
class="mdTxt pam-register-dialog__contract"
|
ref="contract"
|
@scroll="detectContractReadStatus">
|
<h3>保誠人壽保險股份有限公司蒐集個人資料告知事項</h3>
|
<p class="mt-10">
|
保誠人壽保險股份有限公司（下稱「本公司」）依據個人資料保護法（以下稱個資法）第六條第二項、第八條第一項規定，向台端告知下列事項，請台端詳閱：
|
<p>
|
|
<p class="mt-10">
|
一、個人資料蒐集之目的（參照法務部頒佈之「個資法之特定目的及個人資料之類別」）：身分確認
|
人身保險 (001)、行銷(040)、金融服務業依法令規定及金融監理需要，所為之蒐集處理及利用(059)、契約、類似契約或其他法律關係事務(069)、消費者、客戶管理與服務(090)、網路購物及其他電子商務服務(148)、調查、統計與研究分析(157)、其他經營合於營業登記項目或組織章程所定之業務(181)。
|
<p>
|
|
<p class="mt-10">
|
二、蒐集之個人資料：真實姓名、手機號碼、電子郵件信箱及其他基於本平台媒合顧問及預約諮詢服務之需要所提供之個人資料。
|
<p>
|
|
<p class="mt-10">
|
三、個人資料利用之期間、地區、對象、方式：
|
(一)期間：因前述目的及執行業務所必須及依法令規定應為保存之期間。
|
(二)地區：個人資料利用對象所在之地區。
|
(三)對象：本公司、依法有調查權機關或金融監理機關及本平台合作保經代公司（範圍限於 台端選擇之顧問所隸屬之公司）。
|
(四)方式：合於法令規定之利用方式。
|
</p>
|
|
<p class="mt-10">
|
四、依據個資法第三條規定， 台端就本公司保有 台端之個人資料得行使之權利及方式：
|
(一)得向本公司行使之權利：
|
向本公司查詢、請求閱覽或請求製給複製本。
|
向本公司請求補充或更正。
|
向本公司請求停止蒐集、處理或利用及請求刪除。
|
(二)行使權利之方式： 台端得撥打本公司免費客戶服務專線： 0809-0809-68 行使上述權利。(專員接聽時間 : 週一 ~ 週五 08:00-20:00 及週六、日及例假日 09:00-17:30；語音服務：週一-週日24小時)。
|
</p>
|
|
<p class="mt-10">
|
五、台端可自行決定是否提供個人資料予本公司， 台端於勾選同意後並於本平台提供個人資料時，視為已同意前述事項，惟若 台端不同意提供或未提供正確之資訊，將導致無法與使用本平台進行顧問媒合與預約諮詢等服務。
|
</p>
|
|
</div>
|
</el-row>
|
<el-row class="pt-30">
|
<div class="pam-agree-radio">
|
<label for="agreeContract" class="pam-radio"
|
:class="{disabled: !isReadContract}">
|
<input
|
type="radio"
|
id="agreeContract"
|
@click="agreeContract = !agreeContract"
|
:disabled="!isReadContract"
|
value="agreeContract">
|
<i :class="agreeContract ?'icon-checkbox-1': 'icon-checkbox'"></i>我同意並繼續
|
</label>
|
</div>
|
</el-row>
|
<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"
|
>
|
<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 mt-30">
|
<div class="text--center">
|
<el-button
|
type="primary"
|
@click="emailOtpConfirmVisable = false"
|
>我知道了</el-button>
|
</div>
|
</div>
|
</PopUpFrame>
|
|
<PopUpFrame class="pam-popUpFrame"
|
:isOpen.sync="registerSuccessConfirmVisable"
|
@closePopUp="confirmApplySuccess"
|
>
|
<div class="pam-popUp-title text--center">
|
歡迎您登入成功，如您預約諮詢，顧問會以您留下的{{ connectDevice === 'MOBILE' ? '手機號碼' : 'Email'}}與您聯繫
|
</div>
|
<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="registerSuccessConfirmVisable = false"
|
>我知道了</el-button>
|
</div>
|
</div>
|
</PopUpFrame>
|
|
<PopUpFrame class="pam-popUpFrame"
|
:isOpen.sync="phoneSuccessConfirmVisable"
|
@closePopUp="confirmApplySuccess"
|
>
|
<div class="pam-popUp-title text--center"
|
>歡迎您登入成功</div>
|
<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="phoneSuccessConfirmVisable = false"
|
>我知道了</el-button>
|
</div>
|
</div>
|
</PopUpFrame>
|
|
</div>
|
</template>
|
|
<script lang="ts">
|
import { namespace } from 'nuxt-property-decorator';
|
import { Vue, Component, Ref } 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
|
storageUserInfo!: (userInfo: RegisterInfo) => void;
|
|
@Ref('contract') readonly contract!: any;
|
|
connectDevice: 'MOBILE' | 'EMAIL' = 'MOBILE';
|
|
phoneNumber = '';
|
otpCode = '';
|
onPhoneVerifyStep: 'APPLY_OTP' | 'INPUT_OTP' | 'SUBMIT_OTP' = 'APPLY_OTP';
|
otpCounterSec = 300;
|
otpResendCounter = 30;
|
otpInterval: any;
|
phoneOtpIndexKey!: string;
|
|
email = '';
|
onEmailVerifyResendStatus: 'APPLY_OTP' | 'CAN_RESEND' = 'APPLY_OTP';
|
emailCounterSec = 300;
|
emailResendCounter = 30;
|
emailOtpCode = '';
|
emailResendInterval: any;
|
emailOtpIndexKey!: string;
|
|
verificationCode = '';
|
imgSrc = '';
|
|
autoRedirectCounter = 3;
|
autoRedirectInterval: any;
|
|
name = '';
|
agreeContract = false;
|
isReadContract = false;
|
|
phoneSuccessConfirmVisable = false;
|
emailOtpConfirmVisable = false;
|
|
registerDialogVisible = false;
|
registerSuccessConfirmVisable = false;
|
|
applyAccount_onAction = false;
|
|
previousPath = '';
|
|
/////////////////////////////////////////////////////
|
|
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))) {
|
this.isReadContract = true;
|
}
|
};
|
|
//////////////////// 發送/重發/刪除驗證碼
|
|
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();
|
this.regenerateImgOfVerification();
|
}
|
|
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 === 'CAN_RESEND';
|
};
|
|
get phoneValid() {
|
const rule = /^09[0-9]{8}$/;
|
return this.phoneNumber ? rule.test(this.phoneNumber) : true;
|
}
|
|
get emailValid() {
|
const rule = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
|
return this.email ? rule.test(this.email) : true;
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
.pam-login-page {
|
font-size: 20px !important;
|
display: flex;
|
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;
|
}
|
&.is-invalid {
|
border: 1px solid $PRIMARY_RED !important;
|
border-radius: 20px;
|
}
|
}
|
|
.pam-register-dialog__contract {
|
$DEVICE_EXTRA_HEIGHT: 80px;
|
$ALIGN_PADDING: 60px;
|
$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;
|
@include desktop {
|
height: 335px;
|
}
|
}
|
|
.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;
|
}
|
}
|
|
.pam-field-title__hint {
|
@extend .smTxt_bold;
|
color: #68737A;
|
}
|
|
.error {
|
@extend .smTxt_bold;
|
@extend .text--primary;
|
height: 16px;
|
}
|
|
.pam-popUp-title {
|
font-size: 20px;
|
line-height: 27px;
|
}
|
|
.pam-popUp-txt {
|
font-size: 18px;
|
color: $MID_GREY;
|
}
|
|
.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>
|
