From 9de780116757fc0025b6bd47b0957af22bf2829b Mon Sep 17 00:00:00 2001
From: Mila <Mila@pollex.com.tw>
Date: 星期四, 23 十二月 2021 15:35:11 +0800
Subject: [PATCH] fixed: npm run build error
---
PAMapp/pages/login/index.vue | 813 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 810 insertions(+), 3 deletions(-)
diff --git a/PAMapp/pages/login/index.vue b/PAMapp/pages/login/index.vue
index c483bdd..effc075 100644
--- a/PAMapp/pages/login/index.vue
+++ b/PAMapp/pages/login/index.vue
@@ -1,12 +1,819 @@
<template>
- <div>login</div>
+ <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'">����Ⅳ</el-button>
+ <el-button
+ :class="{ 'active': connectDevice === 'EMAIL'}"
+ @click="connectDevice = 'EMAIL'">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>
+
+ <!-- mobile 撽�Ⅳ -->
+ <template v-if="connectDevice === 'MOBILE'">
+ <div v-show="showPhoneOtpCodeField">
+ <el-row type="flex" justify="space-between">
+ <div class="mdTxt">頛詨撽�Ⅳ</div>
+ <div class="otp-count-timer">
+ {{phoneCounter}}
+ </div>
+ </el-row>
+
+ <el-row>
+ <input
+ class="pam-input mt-10"
+ :class="{
+ 'is-invalid': !otpCode
+ }"
+ v-model="otpCode"
+ placeholder="隢撓�撽�Ⅳ"
+ >
+ </el-row>
+ <div class="error mt-5 mb-10">
+ <span v-show="otpCounterSec === 0">撽�Ⅳ撌脤�����撽�Ⅳ</span>
+ </div>
+
+ <el-row>
+ <el-button
+ :disabled="!phoneNumber || otpResendCounter !== 0 || !phoneValid"
+ @click="resentOtp('MOBILE')"
+ icon="icon-arrow"
+ >
+ ��撽�Ⅳ<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"
+ @click="applyOtpVerification('MOBILE')"
+ icon="icon-arrow"
+ >
+ ����Ⅳ
+ </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">頛詨撽�Ⅳ</div>
+ <div class="otp-count-timer">
+ {{emailOtpCounter}}
+ </div>
+ </el-row>
+
+ <el-row>
+ <input
+ class="pam-input mt-10"
+ :class="{
+ 'is-invalid': !emailOtpCode
+ }"
+ v-model="emailOtpCode"
+ placeholder="隢撓�撽�Ⅳ"
+ >
+ </el-row>
+ <div class="error mt-5 mb-10">
+ <span v-show="emailCounterSec === 0">撽�Ⅳ撌脤�����撽�Ⅳ</span>
+ </div>
+
+ <el-button
+ :disabled="!email || emailResendCounter !== 0 || !emailValid"
+ icon="icon-arrow"
+ @click="resentOtp('EMAIL')"
+ >
+ ��撽�Ⅳ<span
+ v-if="emailResendCounter !== 0"
+ class="pam-field-title__hint pl-5"
+ >({{ emailResendCounter }})</span>
+ </el-button>
+ </el-row>
+
+ <el-row v-show="!showEmailVerifyField">
+ <el-button
+ :disabled="!email || !emailValid"
+ @click="applyOtpVerification('EMAIL')"
+ icon="icon-arrow"
+ >
+ ����Ⅳ
+ </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"
+ >
+ <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">
+ 銝����銝��犖鞈��嚗�����僑�����澈���絞銝�蝺刻���批�璆准����
+ ��蝯⊥撘�(��雿���閰梯�Ⅳ�-MAIL����極雿��)蝑��隞�誑��
+ ���霅��犖銋����
+ <p>
+
+ <p class="mt-10">
+ 鈭������犖鞈��風瘜����誘銋�������蝘��風�蝑�����
+ ���������犖鞈���
+ <p>
+
+ <p class="mt-10">
+ 銝���������������������犖鞈���
+ </p>
+
+ <p class="mt-10">
+ �������������平���暑�������銝剛瘞���������犖鞈���
+ </p>
+
+ <p class="mt-10">
+ 鈭���������摰���甈∩誑憭�璆凋�撱��恐撠����誑��隞���������銋����嚗�������犖鞈���
+ </p>
+
+ <p class="mt-10">
+ ���靘�犖鞈��風瘜洵 3 璇���停����犖鞈�����蝙銋���嚗�
+ (銝�) �閰Ｘ���閬賬��
+ (鈭�) 隢�ˊ蝯西�ˊ���
+ (銝�) 隢����甇���
+ (���) 隢��迫����������
+ (鈭�) 隢����
+ ����蝙銝膩甈��撠������������������痊隞颯�靘�
+ �犖鞈��風瘜洵 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="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 { Vue, Component } from 'vue-property-decorator';
+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';
+
+const roleStorage = namespace('localStorage');
@Component
export default class Login extends Vue {
+ @roleStorage.Mutation storageIdToken!: (token:string) => void;
+ @roleStorage.Mutation storageRole!: (role:string) => 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;
+ phoneOtpInfo!: OtpInfo;
+
+ email = '';
+ onEmailVerifyResendStatus: 'APPLY_OTP' | 'CAN_RESEND' = 'APPLY_OTP';
+ emailCounterSec = 300;
+ emailResendCounter = 30;
+ emailOtpCode = '';
+ emailResendInterval: any;
+ emailOtpInfo!: OtpInfo;
+
+ autoRedirectCounter = 3;
+ autoRedirectInterval: any;
+
+ name = '';
+ agreeContract = false;
+ isReadContract = false;
+
+ phoneSuccessConfirmVisable = false;
+ emailOtpConfirmVisable = false;
+
+ registerDialogVisible = false;
+ registerSuccessConfirmVisable = false;
+
+ applyAccount_onAction = false;
+
+ previousPath = '';
+
+ /////////////////////////////////////////////////////
+ mounted() {
+ const phoneOtpTime = localStorage.getItem('phoneOtpTime');
+ const emailOtpTime = localStorage.getItem('emailOtpTime');
+ const parsePhoneOtpTime = phoneOtpTime ? JSON.parse(phoneOtpTime) : '';
+ const parseEmailOtpTime = emailOtpTime ? JSON.parse(emailOtpTime) : '';
+ if (parsePhoneOtpTime && parsePhoneOtpTime.contactType === 'SMS') {
+ this.phoneDiffTime(parsePhoneOtpTime);
+ }
+ if (parseEmailOtpTime && parseEmailOtpTime.contactType === 'EMAIL') {
+ this.emailDiffTime(parseEmailOtpTime);
+ }
+ }
+
+ beforeRouteEnter (to, from, next) {
+ next(vm => {
+ console.log(from.path, 'beforeRouteEnter');
+ vm.previousPath = from.path;
+ })
+ }
+
+ destroyed() {
+ this.removeOtpTime();
+ clearInterval(this.otpInterval);
+ clearInterval(this.emailResendInterval);
+ clearInterval(this.autoRedirectInterval);
+ }
+
+ //////////////////////////////////////////////////////////
+
+ 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;
+ }
+ };
+
+ get isSubmitBtnDisabled(): boolean {
+ return this.connectDevice === 'MOBILE'
+ ? (!this.otpCode || !this.phoneNumber || !this.phoneValid || !this.otpCounterSec)
+ : (!this.emailOtpCode || !this.email || !this.emailValid || !this.emailCounterSec)
+ }
+
+ get phoneCounter() {
+ let min = Math.floor(this.otpCounterSec / 60);
+ let sec = Math.floor(this.otpCounterSec % 60);
+ return `${min < 10 ? '0' + min : min}:${sec < 10 ? '0' + sec : sec}`;
+ }
+
+ get emailOtpCounter() {
+ let min = Math.floor(this.emailCounterSec / 60);
+ let sec = Math.floor(this.emailCounterSec % 60);
+ return `${min < 10 ? '0' + min : min}:${sec < 10 ? '0' + sec : sec}`;
+ }
+
+ 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;
+ }
+
+ 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).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);
+ }
+ });
+ };
+
+ resentOtp(type: string) {
+ this.resetOtpSetting(type);
+ this.applyOtpVerification(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();
+ }
+
+ 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;
+ });
+ };
+
+ confirmApplySuccess(): void {
+ this.phoneSuccessConfirmVisable = false;
+ this.registerSuccessConfirmVisable = false;
+ this.redirect();
+ }
+
+ 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);
+ });
+ }
+
+
+ //////////////////////////////////////////////////////////////////
+ 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:
+ messageBoxService.showErrorMessage('',error);
+ break;
+ }
+ }
+
+ 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));
+ console.log(this.previousPath, find, 'redirect');
+ find > -1 ? this.$router.go(-1) : this.$router.push('/');
+ }
+
+ private phoneDiffTime(parseOtpTime: any) {
+ const diffSecs = this.calcDiffSecs(parseOtpTime.time);
+
+ if (diffSecs < this.otpCounterSec) {
+ this.otpResendCounter = diffSecs < 30 ? 30 - diffSecs : 0;
+ this.otpCounterSec -= diffSecs;
+ this.phoneNumber = parseOtpTime.phone;
+ this.onPhoneVerifyStep = 'INPUT_OTP';
+ this.phoneOtpInfo = this.setOtpInfo(parseOtpTime);
+ this.startOtpCount('MOBILE');
+ } else {
+ localStorage.removeItem('phoneOtpTime');
+ }
+ }
+
+ private emailDiffTime(parseOtpTime: any) {
+ const diffSecs = this.calcDiffSecs(parseOtpTime.time);
+
+ if (diffSecs < this.emailCounterSec) {
+ this.emailResendCounter = diffSecs < 30 ? 30 - diffSecs : 0;
+ this.emailCounterSec -= diffSecs;
+ this.email = parseOtpTime.email;
+ this.onEmailVerifyResendStatus = 'CAN_RESEND';
+ this.emailOtpInfo = this.setOtpInfo(parseOtpTime);
+ this.startOtpCount('EMAIL');
+ } else {
+ localStorage.removeItem('emailOtpTime');
+ }
+ }
+
+ private calcDiffSecs(parseOtpTime) {
+ const currentTime = new Date().getTime();
+ const storageTime = new Date(parseOtpTime).getTime();
+ return Math.floor((currentTime - storageTime) / 1000);
+ }
+
+ private resetOtpSetting(type: string) {
+ if (type === 'MOBILE') {
+ clearInterval(this.otpInterval);
+ this.otpResendCounter = 30;
+ this.otpCounterSec = 300;
+ } else {
+ clearInterval(this.emailResendInterval);
+ this.emailResendCounter = 30;
+ this.emailCounterSec = 300;
+ }
+ }
+
+ private setOtpInfo(parseOtpTime) {
+ return {
+ indexKey: parseOtpTime.indexKey,
+ success: true,
+ failCode: '',
+ failReason: '',
+ }
+ }
+
+ private storageOtpTime(type: string, otpInfo: OtpInfo) {
+ type === 'MOBILE' ? this.phoneOtpInfo = otpInfo : this.emailOtpInfo = otpInfo;
+ const info = {...this.setRegisterInfo(), time: new Date()}
+ type === 'MOBILE' ? localStorage.setItem('phoneOtpTime',JSON.stringify(info))
+ : localStorage.setItem('emailOtpTime',JSON.stringify(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.emailCounterSec === 0) {
+ clearInterval(this.emailResendInterval);
+ }
+ }, 1000)
+ }
+
+ private startPhoneCounter() {
+ this.otpInterval = setInterval(() => {
+ this.otpCounterSec -= 1;
+ if (this.otpResendCounter !== 0) {
+ this.otpResendCounter -= 1;
+ }
+ if (this.otpCounterSec === 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'
+ }
+ }
+
+ private storagePhoneOrEmail(registerInfo:RegisterInfo):void{
+ const info = {...registerInfo, time: new Date()}
+ localStorage.setItem('userInfo',JSON.stringify(info));
+ }
+
+ private removeOtpTime() {
+ localStorage.removeItem('emailOtpTime');
+ localStorage.removeItem('phoneOtpTime');
+ }
+
+ private setLoginInfo() {
+ const isMobile = this.connectDevice === 'MOBILE'
+ return {
+ account: isMobile ? this.phoneNumber : this.email,
+ indexKey: isMobile ? this.phoneOtpInfo.indexKey : this.emailOtpInfo.indexKey,
+ otpCode: isMobile ? this.otpCode : this.emailOtpCode
+ }
+ }
}
-</script>
\ No newline at end of file
+</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;
+ }
+ }
+</style>
--
Gitblit v1.9.3