[ Update ] 更新 navbar 清單 根據 角色 顯示清單

劉鈞霖

2021-11-15 cd4a64b39c429f2f5b45cb042d1b66f1cd3904cd

 PAMapp/pages/login/index.vue

@@ -1,12 +1,341 @@
<template>
    <div>登入</div>
    <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">
              蒐集個人資料告知事項
              遵守個人資料保護法規定，在您提供個人資料予本處前，依法告
              知下列事項：
              一、獲取您下列個人資料類別：姓名、出生年月日、國民身分證統一編號、性別、職業、教育、
              連絡方式(包括但不限於電話號碼、E-MAIL、居住或工作地址)等，或其他得以直接
              或間接識別您個人之資料。
              二、本處將依個人資料保護法及相關法令之規定下，依本處隱私權保護政策，蒐集、
              處理及利用您的個人資料。
              三、本處將於蒐集目的之存續期間合理利用您的個人資料。
              四、除蒐集之目的涉及國際業務或活動外，本處僅於中華民國領域內利用您的個人資
              料。
              五、本處將於原蒐集之特定目的、本次以外之產業之推廣、宣導及輔導、以及其他公
              務機關請求行政協助之目的範圍內，合理利用您的個人資料。
              六、您可依個人資料保護法第 3 條規定，就您的個人資料向本處行使之下列權利：
              (一) 查詢或請求閱覽。
              (二) 請求製給複製本。
              (三) 請求補充或更正。
              (四) 請求停止蒐集、處理及利用。
              (五) 請求刪除。
              您因行使上述權利而導致對您的權益產生減損時，本處不負相關賠償責任。另依
              個人資料保護法第 14 條規定，本處得酌收行政作業費用。
              七、若您未提供正確之個人資料，本處將無法為您提供特定目的之相關業務。
              八、本處因業務需要而委託其他機關處理您的個人資料時，本處將會善盡監督之責。
              九、您瞭解此一同意書符合個人資料保護法及相關法規之要求，且同意本處留存此同
              意書，供日後取出查驗。
              個人資料之同意提供
              一、本人已充分知悉貴處上述告知事項。
              二、本人同意貴處蒐集、處理、利用本人之個人資料，以及其他公務機關請求行政協
              助目的之提供。
            </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"
            @click="applyAccount"
            >建立新帳號
          </el-button>
        </span>
      </el-dialog>



      <el-button class="mt-30" @click="fakeLogin">客戶登入</el-button>
    </div>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';

import { login } from '~/assets/ts/api/consultant';
import { Role } from '../../components/NavBar.vue';
@Component
export default class Login extends Vue {
  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;

  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) => {
            localStorage.setItem('id_token', res.data.id_token);
            localStorage.setItem('roleOfState',Role.USER);
            this.$router.go(-1);
        })


  }
}
</script>
</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>