[ Update ] 串接顧問登入 完成 50% (驗證碼以及忘記密碼 尚未 ) 、 新增 api 錯誤訊息 。

劉鈞霖

2021-11-23 1b57ac5bea14a750b5ddf961c3a8510da18f3637

[ Update ] 串接顧問登入 完成 50% (驗證碼以及忘記密碼 尚未 ) 、 新增 api 錯誤訊息 。

 PAMapp/assets/scss/vendors/_elementUI.scss

@@ -10,3 +10,4 @@
@import './elementUI/tag';
@import './elementUI/pagination';
@import './elementUI/dialog';
@import './elementUI/messageBox';

 PAMapp/assets/scss/vendors/elementUI/_messageBox.scss

¤ñ¹ï·sÀÉ®×
@@ -0,0 +1,28 @@
.el-message-box__wrapper{
    display: flex;
    align-items: center;
    justify-content: center;
    .pam-message-box.el-message-box{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width:300px;
        height: 150px;
        .el-message-box__content{
            padding: 15px;
            .el-message-box__message p{
                text-align: center;
                color: $PRIMARY_BLACK;
                letter-spacing: 2px;
                font-size: 20px;
            }
        }
       
        .el-message-box__btns{
            text-align: center;
        }
        .el-button.el-button--primary{
            color: $PRIMARY_WHITE;
        }
    }
}

 PAMapp/assets/ts/api/consultant.ts

@@ -1,6 +1,7 @@
import { service } from '~/assets/ts/api/share';
import { AxiosResponse } from 'axios';
import { AppointmentDetail } from '../models/AppointmentDetail';
import { ConsultantLoginInfo } from '../models/ConsultantLoginInfo';

// é¡§å®¢ç™»å…¥(TODO: OTP認證開發前 æš«æ™‚使用)
export function login(user: any) {
@@ -76,13 +77,8 @@
}

// é¡§å•ç™»å…¥
export function logInToConsultant(consultantDto:ConsultantLoginInfo):Promise<boolean>{
    console.log('consultantDto',consultantDto);
    return new Promise((resolve, reject)=>{
        setTimeout(()=>{
            resolve(true);
        },1000)
    })
export function logInToConsultant(consultantDto:ConsultantLoginInfo):Promise<AxiosResponse<RequestOfLoginSuccess>>{
    return service.post('/eService/authenticate',consultantDto);
}

// å–得預約單細節
@@ -91,11 +87,6 @@
        Authorization: 'Bearer ' + localStorage.getItem('id_token')
    }
    return service.get('/appointment/getDetail/'+apointmentId, {headers})
}
export interface ConsultantLoginInfo{
    account:string,
    password:string,
    verificationCode:string,
}
export interface Consultants {
    agentNo: string,

 PAMapp/assets/ts/api/share.ts

@@ -1,31 +1,47 @@
import axios from 'axios';
import { AxiosRequestConfig, AxiosError, AxiosResponse } from 'axios';  
import { AxiosRequestConfig, AxiosError, AxiosResponse } from 'axios';
import { MessageBox } from 'element-ui';

export const service = axios.create({
    baseURL: process.env.BASE_URL
})

service.interceptors.request.use(function (config: AxiosRequestConfig) {
  loadingStart();
service.interceptors.request.use(
  (config:AxiosRequestConfig)=>{
    loadingStart();
    return config;
}, function (error: AxiosError) {
  loadingFinish();
    return Promise.reject(error);
});
  }
);

service.interceptors.response.use(function (response: AxiosResponse) {
  loadingFinish();
    return response;
}, function (error: AxiosError) {
  loadingFinish();
service.interceptors.response.use(
  (response:AxiosResponse)=>{
    loadingFinish();
    return response;  // maybe can use response.data
  },
  (error:AxiosError)=>{
    loadingFinish();
    openErrorMessage();
    return Promise.reject(error);
});
  }
);



function loadingStart(): void {
  setTimeout(() => {
    window.$nuxt.$loading.start();
  });
}

function loadingFinish(): void {
    window.$nuxt.$loading.finish();
}

function openErrorMessage():void{
  MessageBox({
    message: '系統發生錯誤',
    showClose:false,
    showConfirmButton:true,
    confirmButtonText:'確認',
    customClass:'pam-message-box',
    closeOnClickModal:false,
  });
}

 PAMapp/assets/ts/models/ConsultantLoginInfo.ts

¤ñ¹ï·sÀÉ®×
@@ -0,0 +1,5 @@
export interface ConsultantLoginInfo {
    username: string;
    password: string;
    verificationCode: string;
}

 PAMapp/assets/ts/models/enum/Role.ts

¤ñ¹ï·sÀÉ®×
@@ -0,0 +1,5 @@
export enum Role{
    ADMIN = 'admin',
    USER = 'user',
    NOT_LOGIN = ''
}

 PAMapp/components/BackActionBar.vue

@@ -9,12 +9,13 @@
<script lang="ts">
import { namespace } from 'nuxt-property-decorator';
import { Vue, Component,} from 'vue-property-decorator';
import { Role } from '~/assets/ts/models/enum/Role';
import * as _ from 'lodash';
import { Role } from './NavBar.vue';
const localStorage = namespace('localStorage');

const roleStorage = namespace('localStorage');
@Component
export default class UiCarousel extends Vue {
  @localStorage.Getter currentRole!:string;
  @roleStorage.Getter currentRole!:string;
  get label(): string {
    if (this.$route.name) {
      const routeName = this.$route.name.split('-')[0];

 PAMapp/components/NavBar.vue

@@ -34,13 +34,15 @@
<script lang="ts">
  import { Vue, Component } from 'vue-property-decorator';
  import { namespace } from 'nuxt-property-decorator';
  import { Role } from '~/assets/ts/models/enum/Role';
  import * as _ from 'lodash';
  const localStorage = namespace('localStorage');
  
  const roleStorage = namespace('localStorage');
  @Component
  export default class NavBar extends Vue {
    @localStorage.Mutation storageClear!: () => void;
    @localStorage.Getter idToken!: string | null;
    @localStorage.Getter currentRole!: string | null;
    @roleStorage.Mutation storageClear!: () => void;
    @roleStorage.Getter idToken!: string | null;
    @roleStorage.Getter currentRole!: string | null;

    navBarList = [{
        authorityOfRoleList: [Role.NOT_LOGIN],
@@ -99,11 +101,6 @@
      this.storageClear();
      _.isEqual(this.$route.name, 'index') ? location.reload() : this.$router.push('/');
    }
  }
  export enum Role {
    USER = 'user',
    ADMIN = 'admin',
    NOT_LOGIN = '',
  }

</script>

 PAMapp/pages/consultantLogin/index.vue

@@ -6,11 +6,11 @@
        <div class="pam-consultant-login__title">帳號</div>
        <div class="position-r mt-10">
          <input type="text"
            v-model="consultantDto.account"
            v-model="consultantDto.username"
            class="pam-consultant-login__input"
            placeholder="輸入eService帳號">
          <div class="pam-consultant-login__inputIcon text--primary cursor--pointer"
            @click="recordAccount">
          <div class="pam-consultant-login__inputIcon text--primary cursor--pointer fix-chrome-click--issue"
            @click="isRemember = !isRemember">
            <i :class="[isRemember ? 'icon-checkbox-1' : 'icon-checkbox','pr-5']"></i>
            è¨˜ä½
          </div>
@@ -19,7 +19,7 @@
      <div class="pam-paragraph">
        <div class="pam-consultant-login__title ">
          <div>密碼</div>
          <a class="pam-consultant-login__forgot-password cursor--pointer" 
          <a class="pam-consultant-login__forgot-password cursor--pointer fix-chrome-click--issue"
            :href="forgotPasswordLink" 
            target="_blank" 
            rel="保誠人壽">
@@ -31,16 +31,16 @@
            v-model="consultantDto.password"
            class="pam-consultant-login__input"
            placeholder="輸入eService密碼">
          <div class="pam-consultant-login__inputIcon cursor--pointer"
          <div class="pam-consultant-login__inputIcon cursor--pointer fix-chrome-click--issue"
            @click="isShowPassword = !isShowPassword">
            <i :class="[isShowPassword ? 'icon-eye-1 fs-25' : 'icon-eye' , 'text--primary']"></i>
            <i :class="[isShowPassword ? 'icon-eye':'icon-eye-1 fs-25', 'text--primary']"></i>
          </div>
        </div>
      </div>
      <div class="pam-paragraph">
        <div class="pam-consultant-login__title">
          <div>驗證碼</div>
          <div class="text--dark-blue fs-16 cursor--pointer"
          <div class="text--dark-blue fs-16 cursor--pointer fix-chrome-click--issue"
            @click="regenerateCode">重新產生</div>
        </div>
        <div class="pam-consultant-login__verifyBlock mt-10">
@@ -50,13 +50,14 @@
              class="pam-consultant-login__input">
          </div>
          <div class="pam-consultant-login__verifyImg">
            <img src="~/assets/images/logo.png" alt="驗證碼">
            <img src="~/assets/images/logo.png"
              alt="驗證碼">
          </div>
        </div>
      </div>
      <div class="pam-consultant-login__confirmBlock pam-paragraph">
        <button class="pam-consultant-login__confirm cursor--pointer"
          @click="fakeLogin">送出</button>
        <button class="pam-consultant-login__confirm cursor--pointer fix-chrome-click--issue"
          @click="loginWithConsultant">送出</button>
      </div>
    </div>
  </div>
@@ -64,70 +65,73 @@

<script lang="ts">
  import { namespace } from 'nuxt-property-decorator';
  import { Vue, Component} from 'vue-property-decorator';
  import { getForgotPasswordLink , getVerificationCodeImg , login } from '~/assets/ts/api/consultant';
  import { Role } from '../../components/NavBar.vue';
  import { Role } from '~/assets/ts/models/enum/Role';
  import { Vue, Component } from 'vue-property-decorator';
  import { getForgotPasswordLink, getVerificationCodeImg, logInToConsultant } from '~/assets/ts/api/consultant';

  const localStorage = namespace('localStorage');
  const roleStorage = namespace('localStorage');
  @Component({
    layout: 'home'
  })
  export default class ConsultantLogin extends Vue {
    @localStorage.Mutation storageIdToken!: (token:string) => void;
    @localStorage.Mutation storageRole!: (role:string) => void;
    @roleStorage.Mutation storageIdToken!: (token: string) => void;
    @roleStorage.Mutation storageRole!: (role: string) => void;

    isRemember = false;
    isShowPassword = false;
    forgotPasswordLink = ''; // å°šæœª
    imgOfVerificationCode = ''; // å°šæœª
    consultantDto = {
      account: '',
      username: '',
      password: '',
      verificationCode: '',
    }
    forgotPasswordLink = '';
    imgOfVerificationCode='';

    mounted() {
      this.getRememberUserName();
      this.regenerateCode();
      this.getLinkOfForgotPassword();
    };
    private getLinkOfForgotPassword():void{
      getForgotPasswordLink().then(link=>{
        console.log('link',link);

    private getRememberUserName(): void {
      const username = localStorage.getItem('consultantUserName')
      if (username) {
        this.consultantDto.username = username;
        this.isRemember = true;
      }
    }

    private getLinkOfForgotPassword(): void {
      getForgotPasswordLink().then(link => {
        this.forgotPasswordLink = link;
      });
    };
    recordAccount(): void {
      this.isRemember = !this.isRemember;
      if (this.isRemember) {
        console.log('sotre account');
      }
    };
    regenerateCode(): void {
      getVerificationCodeImg().then((imgOfbase64:any)=>{
    public regenerateCode(): void {
      getVerificationCodeImg().then(imgOfbase64 => {
        this.imgOfVerificationCode = imgOfbase64;
      });
    };
    // loginWithConsultant():void{
    //   console.log('consultantDto',this.consultantDto);
    //   logInToConsultant(this.consultantDto).then(res=>{
    //     localStorage.setItem('roleOfState',Role.CONSULTANT);
    //     this.$router.push('/myAppointmentList/appointmentList');
    //   });
    // }

    fakeLogin(): void {
        const user = {
            username: 'admin',
            password: 'admin'
        }
        login(user).then((res) => {
    public loginWithConsultant(): void {
      this.recordAccount();

      logInToConsultant(this.consultantDto).then(res => {
            this.storageIdToken(res.data.id_token);
            this.storageRole(Role.ADMIN);
            this.$router.push('/myAppointmentList/appointmentList');
        })
      }, (error) => {
        this.consultantDto.password = '';
        this.consultantDto.verificationCode = '';
      });
    }

    private recordAccount(): void {
      localStorage.setItem('consultantUserName', this.isRemember ? this.consultantDto.username : '');
    };
  };

</script>

<style lang="scss"
  scoped>
  .mt-20 {
@@ -187,11 +191,13 @@
        right: 15px;
      }
    }
    &__forgot-password{

    &__forgot-password {
        color: $PRIMARY_RED;
        text-decoration:none;
      text-decoration: none;
        font-size: 16px; 
    }

    &__verifyBlock {
      display: flex;
      justify-content: space-between;
@@ -201,7 +207,7 @@
      width: 126px;
      border: 1px black solid;
      height: 50px;
      img{
      img {
        width: 100%;
        height: 100%;
      }

 PAMapp/pages/login/index.vue

@@ -235,14 +235,14 @@
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';
import { Role } from '~/assets/ts/models/enum/Role';

const localStorage = namespace('localStorage');
const roleStorage = namespace('localStorage');

@Component
export default class Login extends Vue {
  @localStorage.Mutation storageIdToken!: (token:string) => void;
  @localStorage.Mutation storageRole!: (role:string) => void;
  @roleStorage.Mutation storageIdToken!: (token:string) => void;
  @roleStorage.Mutation storageRole!: (role:string) => void;

  connectDevice: 'MOBILE' | 'EMAIL' = 'MOBILE';


 PAMapp/store/localStorage.ts

@@ -2,8 +2,8 @@

@Module
export default class LocalStorage extends VuexModule {
  id_token:string|null = null;
  role_State:string|null = null;
  id_token = localStorage.getItem('id_token');
  role_State= localStorage.getItem('current_role');

  get idToken(): string|null {
    return this.id_token;