From 1b57ac5bea14a750b5ddf961c3a8510da18f3637 Mon Sep 17 00:00:00 2001
From: 劉鈞霖 <benson@gmail.com>
Date: 星期二, 23 十一月 2021 12:07:02 +0800
Subject: [PATCH] [ Update ] 串接顧問登入 完成 50% (驗證碼以及忘記密碼 尚未 ) 、 新增 api 錯誤訊息 。
---
PAMapp/pages/consultantLogin/index.vue | 100 ++++++++++++++++++++++++++-----------------------
1 files changed, 53 insertions(+), 47 deletions(-)
diff --git a/PAMapp/pages/consultantLogin/index.vue b/PAMapp/pages/consultantLogin/index.vue
index dc5c7b8..e702a19 100644
--- a/PAMapp/pages/consultantLogin/index.vue
+++ b/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%;
}
--
Gitblit v1.8.0