import { Component, OnInit, OnDestroy } from '@angular/core'; import { Store, select } from '@ngrx/store'; import { Company } from '@ucap-webmessenger/api-external'; import * as AppStore from '@app/store'; import * as AuthenticationStore from '@app/store/account/authentication'; import * as CompanyStore from '@app/store/setting/company'; import { Observable, Subscription } from 'rxjs'; import { Router } from '@angular/router'; import { tap, map } from 'rxjs/operators'; import { DialogService, AlertDialogComponent, AlertDialogData, AlertDialogResult } from '@ucap-webmessenger/ui'; import { StringUtil } from '@ucap-webmessenger/core'; @Component({ selector: 'app-page-account-login', templateUrl: './login.page.component.html', styleUrls: ['./login.page.component.scss'] }) export class LoginPageComponent implements OnInit, OnDestroy { companyList$: Observable; loginFailureCount: Subscription; defatulLoginBtnText: string; loginBtnText: string; loginBtnEnable: boolean; timeChecker: any; defatulWaitingTime: number; waitingTime: number; constructor( private store: Store, private router: Router, private dialogService: DialogService ) {} ngOnInit(): void { this.defatulLoginBtnText = 'LOGIN'; this.defatulWaitingTime = 5 * 60; // sec this.store.dispatch( CompanyStore.companyList({ companyGroupCode: 'LG' }) ); this.companyList$ = this.store.pipe( select(AppStore.SettingSelector.CompanySelector.companyList) ); this.loginFailureCount = this.store .pipe( select(AppStore.AccountSelector.AuthenticationSelector.loginFailCount), map(count => { if (count > 0) { if (count < 5) { this.dialogService.open< AlertDialogComponent, AlertDialogData, AlertDialogResult >(AlertDialogComponent, { width: '360px', data: { title: '로그인', html: `아이디 또는 패스워드가
일치하지 않습니다.` } }); } if (count === 5) { this.dialogService.open< AlertDialogComponent, AlertDialogData, AlertDialogResult >(AlertDialogComponent, { width: '360px', data: { title: '로그인', html: `비밀번호 오류 횟수 초과입니다.
비밀번호를 확인하신 후
잠시 후 다시 시작해 주세요.` } }); this.timeChecker = setInterval(() => this.getCheckTime(), 1000); } return; } else { if (!!this.timeChecker) { clearInterval(this.timeChecker); } this.waitingTime = this.defatulWaitingTime; this.loginBtnText = this.defatulLoginBtnText; this.loginBtnEnable = true; } }) ) .subscribe(); } ngOnDestroy(): void { if (!!this.loginFailureCount) { this.loginFailureCount.unsubscribe(); } } getCheckTime() { if (this.waitingTime <= 0) { // reset. if (!!this.timeChecker) { clearInterval(this.timeChecker); } this.waitingTime = this.defatulWaitingTime; this.loginBtnText = this.defatulLoginBtnText; this.loginBtnEnable = true; } else { // wait. this.waitingTime = this.waitingTime - 1; this.loginBtnText = `${StringUtil.zeroFill( Math.floor(this.waitingTime / 60), 2 )}:${StringUtil.zeroFill(this.waitingTime % 60, 2)}`; this.loginBtnEnable = false; } } onLogin(value: { companyCode: string; loginId: string; loginPw: string; rememberMe: boolean; notValid: () => void; }) { this.store.dispatch( AuthenticationStore.webLogin({ loginInfo: { companyCode: value.companyCode, companyGroupType: 'C', loginId: value.loginId, loginPw: value.loginPw }, rememberMe: value.rememberMe }) ); } onClickTemplate() { this.router.navigate(['/template']); } }