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/components/BackActionBar.vue | 7 +
PAMapp/pages/consultantLogin/index.vue | 100 +++++++++++++-----------
PAMapp/pages/login/index.vue | 8 +-
PAMapp/assets/ts/models/ConsultantLoginInfo.ts | 5 +
PAMapp/components/NavBar.vue | 15 +--
PAMapp/assets/scss/vendors/elementUI/_messageBox.scss | 28 +++++++
PAMapp/assets/ts/api/share.ts | 46 +++++++---
PAMapp/store/localStorage.ts | 4
PAMapp/assets/scss/vendors/_elementUI.scss | 1
PAMapp/assets/ts/api/consultant.ts | 15 ---
PAMapp/assets/ts/models/enum/Role.ts | 5 +
11 files changed, 142 insertions(+), 92 deletions(-)
diff --git a/PAMapp/assets/scss/vendors/_elementUI.scss b/PAMapp/assets/scss/vendors/_elementUI.scss
index 3e05d7e..74d916c 100644
--- a/PAMapp/assets/scss/vendors/_elementUI.scss
+++ b/PAMapp/assets/scss/vendors/_elementUI.scss
@@ -10,3 +10,4 @@
@import './elementUI/tag';
@import './elementUI/pagination';
@import './elementUI/dialog';
+@import './elementUI/messageBox';
diff --git a/PAMapp/assets/scss/vendors/elementUI/_messageBox.scss b/PAMapp/assets/scss/vendors/elementUI/_messageBox.scss
new file mode 100644
index 0000000..3d08461
--- /dev/null
+++ b/PAMapp/assets/scss/vendors/elementUI/_messageBox.scss
@@ -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;
+ }
+ }
+}
diff --git a/PAMapp/assets/ts/api/consultant.ts b/PAMapp/assets/ts/api/consultant.ts
index ff47e80..d0299bb 100644
--- a/PAMapp/assets/ts/api/consultant.ts
+++ b/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,
diff --git a/PAMapp/assets/ts/api/share.ts b/PAMapp/assets/ts/api/share.ts
index 12fa904..3ded86e 100644
--- a/PAMapp/assets/ts/api/share.ts
+++ b/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,
+ });
+}
\ No newline at end of file
diff --git a/PAMapp/assets/ts/models/ConsultantLoginInfo.ts b/PAMapp/assets/ts/models/ConsultantLoginInfo.ts
new file mode 100644
index 0000000..c45cc32
--- /dev/null
+++ b/PAMapp/assets/ts/models/ConsultantLoginInfo.ts
@@ -0,0 +1,5 @@
+export interface ConsultantLoginInfo {
+ username: string;
+ password: string;
+ verificationCode: string;
+}
diff --git a/PAMapp/assets/ts/models/enum/Role.ts b/PAMapp/assets/ts/models/enum/Role.ts
new file mode 100644
index 0000000..acae4db
--- /dev/null
+++ b/PAMapp/assets/ts/models/enum/Role.ts
@@ -0,0 +1,5 @@
+export enum Role{
+ ADMIN = 'admin',
+ USER = 'user',
+ NOT_LOGIN = ''
+}
\ No newline at end of file
diff --git a/PAMapp/components/BackActionBar.vue b/PAMapp/components/BackActionBar.vue
index 428fab1..d5da906 100644
--- a/PAMapp/components/BackActionBar.vue
+++ b/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];
diff --git a/PAMapp/components/NavBar.vue b/PAMapp/components/NavBar.vue
index 85e5ac2..20578a1 100644
--- a/PAMapp/components/NavBar.vue
+++ b/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>
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%;
}
diff --git a/PAMapp/pages/login/index.vue b/PAMapp/pages/login/index.vue
index 11a3927..39bb3ea 100644
--- a/PAMapp/pages/login/index.vue
+++ b/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';
diff --git a/PAMapp/store/localStorage.ts b/PAMapp/store/localStorage.ts
index a9e8ca3..bafde21 100644
--- a/PAMapp/store/localStorage.ts
+++ b/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;
--
Gitblit v1.8.0