<template>
|
<div class="pam-login-page">
|
<div class="text--middle">登入</div>
|
|
<div class="pam-paragraph">
|
<div class="mdTxt">
|
綁定方式
|
</div>
|
<div class="pam-tags">
|
<el-row type="flex" class="pt-10">
|
<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>
|
<el-row type="flex" class="pt-10" v-show="connectDevice === 'MOBILE'">
|
<input
|
class="pam-input"
|
:class="{
|
'is-invalid': !phoneNumber
|
}"
|
v-model="phoneNumber"
|
placeholder="請輸入手機號碼"
|
>
|
</el-row>
|
|
<el-row class="pt-10" v-show="connectDevice === 'EMAIL'">
|
<input
|
class="pam-input"
|
:class="{
|
'is-invalid': !phoneNumber
|
}"
|
v-model="email"
|
placeholder="請輸入 Email 地址"
|
>
|
</el-row>
|
|
<div class="pt-30" v-show="showPhoneOtpCodeField">
|
<el-row type="flex" justify="space-between">
|
<div class="mdTxt">輸入驗證碼</div>
|
<div class="otp-count-timer">
|
13:50
|
</div>
|
</el-row>
|
|
<el-row class="pt-10">
|
<input
|
class="pam-input"
|
:class="{
|
'is-invalid': !otpCode
|
}"
|
v-model="otpCode"
|
placeholder="請輸入驗證碼"
|
>
|
</el-row>
|
|
<el-row class="pt-10">
|
<button
|
class="pam-otp-resend-btn"
|
:class="{'disabled': true}">
|
<i class="icon-arrow"></i>
|
重發驗證碼({{ otpResendCounter }})
|
</button>
|
</el-row>
|
</div>
|
|
<div v-show="showEmailVerifyField">
|
<el-row class="pt-10">
|
<button
|
class="pam-otp-resend-btn"
|
:class="{'disabled': onEmailVerifyResendStatus === 'CANNOT_RESEND'}">
|
<i class="icon-arrow"></i>
|
重發驗證碼({{ emailResendCounter }})
|
</button>
|
</el-row>
|
</div>
|
</div>
|
|
<el-row type="flex" justify="center" class="pam-login-page__action-bar">
|
<div v-if="connectDevice === 'MOBILE'">
|
<el-button
|
type="primary"
|
v-if="onPhoneVerifyStep === 'APPLY_OTP'"
|
:disabled="!phoneNumber"
|
@click="applyOtpVerification">
|
發送驗證碼
|
</el-button>
|
|
<el-button
|
type="primary"
|
v-if="connectDevice === 'MOBILE' && onPhoneVerifyStep === 'INPUT_OTP'"
|
:disabled="!otpCode"
|
@click="registerDialogVisable = true">
|
送出
|
</el-button>
|
</div>
|
|
</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>
|
<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
|
class="mdTxt pam-register-dialog__contract"
|
@scroll="detectContructReadStatus">
|
<h3>蒐集個人資料告知事項</h3>
|
<p class="mt-10">
|
遵守個人資料保護法規定，在您提供個人資料予本處前，依法告
|
知下列事項：
|
<p>
|
|
<p class="mt-10">
|
一、獲取您下列個人資料類別：姓名、出生年月日、國民身分證統一編號、性別、職業、教育、
|
連絡方式(包括但不限於電話號碼、E-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="agreeControct" class="pam-radio">
|
<input
|
type="radio"
|
id="agreeControct"
|
@click="agreeControct = !agreeControct"
|
value="agreeControct">
|
<i :class="agreeControct ?'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>
|
|
|
|
<el-button class="mt-30" @click="fakeLogin">客戶登入</el-button>
|
</div>
|
</template>
|
|
<script lang="ts">
|
import { namespace } from 'nuxt-property-decorator';
|
import { Vue, Component } from 'vue-property-decorator';
|
import { login } from '~/assets/ts/api/consultant';
|
import { Role } from '../../components/NavBar.vue';
|
const localStorage = namespace('localStorage');
|
@Component
|
export default class Login extends Vue {
|
@localStorage.Mutation storageIdToken!: (token:string) => void;
|
@localStorage.Mutation storageRole!: (role:string) => void;
|
|
connectDevice: 'MOBILE' | 'EMAIL' = 'MOBILE';
|
|
phoneNumber = '';
|
otpCode = '';
|
onPhoneVerifyStep: 'APPLY_OTP' | 'INPUT_OTP' | 'SUBMIT_OTP' = 'APPLY_OTP';
|
otpResendCounter = 30;
|
|
email = '';
|
onEmailVerifyResendStatus: 'CAN_RESEND' | 'CANNOT_RESEND' = 'CANNOT_RESEND';
|
emailResendCounter = 30;
|
|
registerDialogVisable = false;
|
name = '';
|
agreeControct = false;
|
isReadContract = false;
|
|
detectContructReadStatus(event: any): void {
|
this.isReadContract = event.target.scrollTop === (event.target.scrollHeight - event.target.clientHeight);
|
};
|
|
get showPhoneOtpCodeField(): boolean {
|
return this.connectDevice === 'MOBILE' && this.onPhoneVerifyStep === 'INPUT_OTP';
|
};
|
|
get showEmailVerifyField(): boolean {
|
return this.connectDevice === 'EMAIL';
|
};
|
|
applyOtpVerification(): void {
|
this.onPhoneVerifyStep = 'INPUT_OTP';
|
};
|
|
applyAccount(): void {
|
console.log('apply new account!')
|
};
|
|
// TODO: 僅OTP認證開發前 暫時使用
|
fakeLogin() {
|
const user = {
|
username: 'user',
|
password: 'user',
|
}
|
login(user).then((res) => {
|
this.storageIdToken(res.data.id_token);
|
this.storageRole(Role.USER);
|
this.$router.go(-1);
|
})
|
};
|
|
}
|
</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;
|
}
|
}
|
|
.pam-input {
|
height: 26px;
|
width: calc(100% - 36px);
|
border-radius: 10px !important;
|
padding: 12px 18px !important;
|
border-width: 1px;
|
outline: none;
|
@extend .text--middle;
|
&::placeholder {
|
color: $PRUDENTIAL_GREY;
|
}
|
&.is-invalid {
|
border: 1px solid $PRIMARY_RED !important;
|
border-radius: 20px;
|
}
|
}
|
|
.pam-otp-resend-btn {
|
background: transparent;
|
border: none;
|
color: $PRIMARY_RED;
|
font-weight: bold;
|
i {
|
margin-right: 10px;
|
}
|
&.disabled {
|
color: $LIGHT_GREY;
|
}
|
}
|
|
.pam-register-dialog__contract {
|
$DEVICE_EXTRA_HEIGHT: 42px;
|
$ALIGN_PADDING: 60px;
|
$TOP_CONTENT_HEIGHT: 186px;
|
$BOTTOM_CONTENT_HEIGHT: 131px;
|
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;
|
}
|
}
|
|
.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;
|
}
|
}
|
.el-dialog__body {
|
flex: 1;
|
padding: 0;
|
margin-bottom: 30px;
|
}
|
.el-dialog__footer {
|
padding: 0 !important;
|
}
|
}
|
|
</style>
|
