| | |
| | | </div> |
| | | </div> |
| | | <div class="pam-paragraph"> |
| | | <div class="pam-consultant-login__title ">密碼</div> |
| | | <div class="password-Txt"> |
| | | <div class="pam-consultant-login__title ">密碼</div> |
| | | <div class="password-reset" @click="resetPassword">忘記密碼</div> |
| | | </div> |
| | | <div class="position-r mt-10"> |
| | | <input :type="[ isShowPassword ? 'text' : 'password']" |
| | | v-model="consultantDto.password" |
| | |
| | | <script lang="ts"> |
| | | import { Vue, Component , namespace } from 'nuxt-property-decorator'; |
| | | import { AxiosError } from 'axios'; |
| | | import { Role } from '~/shared/models/enum/role'; |
| | | import { Role } from '~/shared/models/enum/Role'; |
| | | import messageBoxService from '~/shared/services/message-box.service'; |
| | | import loginService from '~/shared/services/login.service' |
| | | import { AgentInfo } from '~/shared/models/agent-info.model'; |
| | | |
| | | const loginStore = namespace('login.store'); |
| | | 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; |
| | | @roleStorage.Mutation |
| | | storageIdToken!: (token: string) => void; |
| | | |
| | | @roleStorage.Mutation |
| | | storageRole!: (role: string) => void; |
| | | |
| | | @roleStorage.Mutation |
| | | storageConsultantId!:(id:string) => void; |
| | | |
| | | @loginStore.Action |
| | | getLoginConsultantDetail!: (agentNo: string) => Promise<AgentInfo>; |
| | | |
| | | consultantDto = { |
| | | password: '', |
| | | username: '', |
| | | }; |
| | | imgSrc = ''; |
| | | 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); |
| | | private getInitUserName(): void { |
| | | const username = localStorage.getItem('consultantUserName') |
| | | if (username) { |
| | | this.consultantDto.username = username; |
| | | this.isRememberUserName = true; |
| | | } |
| | | } |
| | | |
| | | |
| | | //////////////////////////////////////////////////////////////////// |
| | | |
| | | |
| | | public regenerateImgOfVerification(): void { |
| | | loginService.getImgOfVerification().then( imgOfBase64 => |
| | | this.imgSrc = imgOfBase64 |
| | |
| | | } |
| | | |
| | | public sendInfo():void{ |
| | | this.isAlreadyDone ? this.verify() : messageBoxService.showErrorMessage('請確認帳號、密碼以及驗證碼是否填寫完畢'); |
| | | this.isAlreadyDone |
| | | ? this.verify() |
| | | : messageBoxService.showErrorMessage('請確認帳號、密碼以及驗證碼是否填寫完畢'); |
| | | } |
| | | |
| | | get isAlreadyDone():boolean{ |
| | | return !!(this.verificationCode && this.consultantDto.username && this.consultantDto.password); |
| | | } |
| | | |
| | | resetPassword() { |
| | | window.open(process.env.CONSULTANT_FORGET_PASSWORD_URL); |
| | | } |
| | | |
| | | |
| | | //////////////////////////////////////////////////////////////////// |
| | | 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() |
| | | this.loginWithConsultant(); |
| | | }else{ |
| | | this.clearValue(); |
| | | this.regenerateImgOfVerification(); |
| | |
| | | |
| | | private loginWithConsultant(): void { |
| | | loginService.logInToConsultant(this.consultantDto).then(res => { |
| | | this.getLoginConsultantDetail(this.consultantDto.username); |
| | | this.storageIdToken(res.data.id_token); |
| | | this.storageRole(Role.ADMIN); |
| | | this.storageConsultantId(this.consultantDto.username) |
| | |
| | | break; |
| | | |
| | | default: |
| | | messageBoxService.showErrorMessage('',error); |
| | | const defaultErrorMsg = error.response.data.title |
| | | messageBoxService.showErrorMessage('',defaultErrorMsg); |
| | | break; |
| | | } |
| | | } |
| | |
| | | .position-r { |
| | | position: relative; |
| | | } |
| | | .password-Txt { |
| | | display: flex; |
| | | justify-content: space-between; |
| | | align-items: flex-end; |
| | | } |
| | | .password-reset { |
| | | font-size: 16px ; |
| | | cursor: pointer; |
| | | |
| | | } |
| | | |
| | | .pam-consultant-login { |
| | | margin: auto; |