From abfd26bb700d93a92da6a04703b0187d4acaaeb5 Mon Sep 17 00:00:00 2001
From: Tomas <tomasysh@gmail.com>
Date: 星期三, 22 十二月 2021 10:13:02 +0800
Subject: [PATCH] refactor: move ts folder to shared folder

---
 PAMapp/pages/consultantLogin/index.vue |  207 +++++++++++++++++++++++++++++++++++++++++++++++++++
 1 files changed, 205 insertions(+), 2 deletions(-)

diff --git a/PAMapp/pages/consultantLogin/index.vue b/PAMapp/pages/consultantLogin/index.vue
index e59a9ca..3a90f3f 100644
--- a/PAMapp/pages/consultantLogin/index.vue
+++ b/PAMapp/pages/consultantLogin/index.vue
@@ -55,8 +55,211 @@
   </div>
 </template>
 
-<script src="./consultant-login.component.ts"></script>
+<script lang="ts">
+  import { Vue, Component , namespace } from 'nuxt-property-decorator';
+  import { AxiosError } from 'axios';
+  import { Role } from '~/shared/models/enum/role';
+  import ErrorMessageBox from '~/shared/errorService';
+  import loginService from '~/shared/services/login.service'
+
+  const roleStorage = namespace('localStorage');
+  @Component({
+    layout: 'home'
+  })
+  export default class ConsultantLogin extends Vue {
+    @roleStorage.Mutation storageIdToken!: (token: string) => void;
+    @roleStorage.Mutation storageRole!: (role: string) => void;
+    @roleStorage.Mutation storageConsultantId!:(id:string) => void;
+    isRememberUserName = false;
+    isShowPassword = false;
+    imgSrc = '';
+    verificationCode='';
+    consultantDto = {
+      username: '',
+      password: '',
+    }
+
+    ////////////////////////////////////////////////////////////////////
+    mounted() {
+      this.getInitUserName();
+      this.regenerateImgOfVerification();
+    };
+
+    get isAlreadyDone():boolean{
+      return !!(this.verificationCode && this.consultantDto.username && this.consultantDto.password);
+    }
+
+
+    ////////////////////////////////////////////////////////////////////
+    public regenerateImgOfVerification(): void {
+      loginService.getImgOfVerification().then( imgOfBase64 =>
+        this.imgSrc = imgOfBase64
+      );
+    };
+
+    public isRememberChange():void{
+      this.isRememberUserName = !this.isRememberUserName;
+      this.storeUserName();
+    }
+
+    public sendInfo():void{
+      this.isAlreadyDone ? this.verify() : ErrorMessageBox('隢Ⅱ隤董����Ⅳ隞亙���Ⅳ��憛怠神摰');
+    }
+
+
+    ////////////////////////////////////////////////////////////////////
+    private getInitUserName(): void {
+      const username = localStorage.getItem('consultantUserName')
+      if (username) {
+        this.consultantDto.username = username;
+        this.isRememberUserName = true;
+      }
+    }
+
+    private verify():void{
+      loginService.getVerificationStatus(this.verificationCode).then( verifySuccess => {
+        if(verifySuccess.data){
+          this.loginWithConsultant()
+        }else{
+          this.clearValue();
+          this.regenerateImgOfVerification();
+          ErrorMessageBox('撽�Ⅳ頛詨�隤�');
+        }
+      });
+    }
+
+    private loginWithConsultant(): void {
+      loginService.logInToConsultant(this.consultantDto).then(res => {
+        this.storageIdToken(res.data.id_token);
+        this.storageRole(Role.ADMIN);
+        this.storageConsultantId(this.consultantDto.username)
+        this.storeUserName();
+        this.$router.push('/myAppointmentList/appointmentList');
+      }).catch((error:AxiosError)=>{
+        this.checkHttpErrorStatus(error);
+      });
+    }
+    private checkHttpErrorStatus(error:any):void{
+      this.clearValue();
+      this.regenerateImgOfVerification();
+      switch (error.response.status) {
+        case 401:
+          const errorMsg = error.response.data.detail;
+          ErrorMessageBox(errorMsg);
+          break;
+
+        default:
+          ErrorMessageBox('',error);
+          break;
+      }
+    }
+
+    private storeUserName(): void {
+      localStorage.setItem('consultantUserName', this.isRememberUserName ? this.consultantDto.username : '');
+    };
+
+    private clearValue():void{
+      if (!this.isRememberUserName) this.consultantDto.username='';
+      this.consultantDto.password = '';
+      this.verificationCode = '';
+    }
+  };
+
+</script>
 
 <style lang="scss" scoped>
-  @import "./consultant-login.component.scss";
+  .mt-20 {
+    margin-top: 20px;
+  }
+
+  .mt-25 {
+    margin-top: 25px;
+  }
+
+  .w-55 {
+    width: 55% !important;
+  }
+
+  .position-r {
+    position: relative;
+  }
+
+  .pam-consultant-login {
+    margin: auto;
+    width: 336px;
+    font-size: 20px;
+    color: $PRIMARY_BLACK;
+
+    &__header {
+      text-align: center;
+      font-size: 24px;
+      font-weight: bold;
+      letter-spacing: 1.2;
+      color: $PRIMARY_BLACK;
+    }
+
+    &__title {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+
+    &__input {
+      width: 100%;
+      outline: 0;
+      border: 1px solid #CCCCCC;
+      border-radius: 10px;
+      font-size: 20px;
+      height: 50px;
+      padding: 10px 90px 10px 15px;
+      overflow: auto;
+      box-sizing: border-box;
+      -webkit-box-sizing: border-box;
+      -moz-box-sizing: border-box;
+
+      &Icon {
+        position: absolute;
+        display: flex;
+        align-items: center;
+        top: 15px;
+        right: 15px;
+      }
+    }
+
+    &__forgot-password {
+      color: $PRIMARY_RED;
+      text-decoration: none;
+      font-size: 16px;
+    }
+
+    &__verifyBlock {
+      display: flex;
+      justify-content: space-between;
+    }
+
+    &__verifyImg {
+      width: 126px;
+      height: 50px;
+      border:1px #cccccc solid;
+      img {
+        width: 100%;
+        height: 100%;
+      }
+    }
+
+    &__confirmBlock {
+      display: flex;
+      justify-content: center;
+    }
+
+    &__confirm {
+      color: $PRIMARY_WHITE;
+      width: 80px;
+      height: 50px;
+      border-radius: 30px;
+      border: 1px solid $LIGHT_GREY;
+      background-color: $PRIMARY_RED;
+    }
+  }
+
 </style>

--
Gitblit v1.8.0