| | |
| | | </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="{ |
| | |
| | | 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="{ |
| | |
| | | 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> |
| | | |
| | | |
| | | <el-row type="flex" justify="center" class="pam-login-page__action-bar mt-30 mb-30"> |
| | | <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')" |
| | |
| | | return this.email ? rule.test(this.email) : true; |
| | | } |
| | | |
| | | get isLoginBtnDisabled() { |
| | | return this.connectDevice === 'MOBILE' |
| | | ? (!this.otpCode || !this.phoneNumber || !this.phoneValid || !this.otpCounterSec) |
| | | : (!this.emailOtpCode || !this.email || !this.emailValid || !this.emailCounterSec) |
| | | } |
| | | |
| | | applyOtpVerification(type: string): void { |
| | | const isMobile = this.connectDevice === 'MOBILE'; |
| | | const loginInfo: LoginRequest = { |
| | |
| | | }; |
| | | |
| | | resentOtp(type: string) { |
| | | if (type === 'MOBILE') { |
| | | clearInterval(this.otpInterval); |
| | | this.otpResendCounter = 30; |
| | | this.otpCounterSec = 900; |
| | | } else { |
| | | clearInterval(this.emailResendInterval); |
| | | this.emailResendCounter = 30; |
| | | this.emailCounterSec = 900; |
| | | } |
| | | 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 { |
| | |
| | | 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 = 900; |
| | | } else { |
| | | clearInterval(this.emailResendInterval); |
| | | this.emailResendCounter = 30; |
| | | this.emailCounterSec = 900; |
| | | } |
| | | } |
| | | |
| | | private setOtpInfo(parseOtpTime) { |
| | |
| | | display: flex; |
| | | flex: 1; |
| | | align-items: flex-end; |
| | | @include desktop { |
| | | margin-bottom: 30px; |
| | | } |
| | | } |
| | | } |
| | | |
| | |
| | | .disabled { |
| | | color: #A7A8AA; |
| | | } |
| | | |
| | | .pam-input-position { |
| | | position: relative; |
| | | .icon-close { |
| | | cursor: pointer; |
| | | position: absolute; |
| | | right: 15px; |
| | | top: 28px; |
| | | font-size: 16px; |
| | | } |
| | | } |
| | | </style> |