File
Implements
Index
Properties
|
|
|
Methods
|
|
|
Outputs
|
|
|
Methods
|
modelIsDefined
|
modelIsDefined()
|
|
|
|
|
|
stopPropagation
|
stopPropagation(event: Event)
|
|
|
Parameters :
| Name |
Type |
Optional |
| event |
Event
|
No
|
|
|
toggleAuthInput
|
toggleAuthInput(event: Event)
|
|
|
Parameters :
| Name |
Type |
Optional |
| event |
Event
|
No
|
|
|
toggleAuthMethod
|
toggleAuthMethod(event: Event)
|
|
|
Parameters :
| Name |
Type |
Optional |
| event |
Event
|
No
|
|
|
isLoading
|
Default value : false
|
|
|
|
loadingHeader
|
Type : string
|
Default value : 'Retrieving Data'
|
|
|
|
loadingMessage
|
Type : string
|
Default value : 'Please wait a moment while we retrieve your information.'
|
|
|
import { Component, EventEmitter, OnInit, Output } from '@angular/core';
import { Router } from '@angular/router';
import { MultiFactorModel } from '../../models/multifactor.model';
import { SelectedMultiFactorMethod } from '../../models/select-multi-factor-method.model';
import { MultiFactorService } from '../../providers/services/multi-factor.service';
import { AppStateStore } from '../../providers/stores/app-state.store';
import { ErrorStore } from '../../providers/stores/error.store';
import { map } from 'rxjs/operators/map';
import { distinctUntilChanged } from 'rxjs/operators';
@Component({
selector: 'app-authenticate-method',
templateUrl: './authenticate-method.component.html',
styleUrls: ['./authenticate-method.component.css'],
})
export class AuthenticateMethodComponent implements OnInit {
@Output() closeAuthMethod = new EventEmitter();
@Output() openAuthInput = new EventEmitter();
isLoading = false;
model: MultiFactorModel;
loadingHeader = 'Retrieving Data';
loadingMessage = 'Please wait a moment while we retrieve your information.';
constructor(
public app: AppStateStore,
private router: Router,
private multiFactorService: MultiFactorService,
private errorService: ErrorStore
) {}
modelIsDefined() {
return this.model !== null && this.model !== undefined;
}
ngOnInit() {
this.isLoading = true;
// distinctUntilChanged to prevent pushing "ok" on error-screen to be in loop
this.app.state$
.pipe(
map((state) => state.multiFactorModel),
distinctUntilChanged()
)
.subscribe((model) => {
console.log('update model', model);
this.model = model;
if (model === null || model === undefined || !model.isValid) {
this.errorService.addError(
'User Missing Contact Information',
'Please Contact Your Financial Institution'
);
this.errorService.displayErrors();
}
if (
!model.allowsEmailMfa &&
(!model.phoneNumbers || model.phoneNumbers.length === 0)
) {
this.errorService.addError(
'You are missing a Phone Number to use this feature.',
'Please contact your financial institution.'
);
this.errorService.displayErrors();
}
this.isLoading = false;
});
}
select(method: string, target: string) {
this.loadingHeader = 'Sending Code';
this.loadingMessage = 'Please wait a moment while we are sending a code to you.';
this.isLoading = true;
this.multiFactorService.requestCode(method, target).subscribe((wasSent) => {
if (!wasSent) {
return this.errorService.showError(
'Error',
'An unexpected error occurred. Please try again. Otherwise, please contact your financial insitution.'
);
}
this.app.selectedMethod = new SelectedMultiFactorMethod(method, target);
this.isLoading = false;
if (!this.app.useMfaModal) {
this.router.navigate(['/authenticate-input']);
} else {
this.toggleAuthInput(event);
}
});
}
toggleAuthMethod(event: Event) {
if (this.isLoading) return;
this.closeAuthMethod.emit();
this.app.useMfaModal = false;
}
toggleAuthInput(event: Event) {
this.closeAuthMethod.emit();
this.openAuthInput.emit();
}
stopPropagation(event: Event) {
event.stopPropagation();
}
}
<div
[ngClass]="{ overlay: app.useMfaModal }"
class="scroller"
(click)="toggleAuthMethod($event)"
>
<div class="pop-up" id="authenticateUserMethod" (click)="stopPropagation($event)">
<div class="close-ctn">
<a id="closeButton" (click)="toggleAuthMethod($event)">
<i class="material-icons">close</i>
</a>
</div>
<h1
id="authenticateUserHeader"
class="page-headers"
[hidden]="isLoading && !app.useMfaModal"
>
Authenticate User
</h1>
<div class="pop-up-ctn-body">
<div *ngIf="!isLoading && modelIsDefined()">
<div class="page-description">
<p class="para-medium">
Select a method below to determine how you will receive the authentication code.
</p>
</div>
<div class="auth-actions-ctn">
<!-- Send By Email -->
<div
*ngIf="model.allowsEmailMfa"
id="sendAuthByEmailButton"
class="auth-send-row"
(click)="select('EMAIL', model.emailAddress)"
>
<div class="auth-send-row-inner">
<div class="auth-send-label">
<p class="auth-send-method">Send authentication code by email</p>
<p class="method-output">{{ model.emailAddress }}</p>
</div>
</div>
</div>
<!-- Send By Text -->
<div id="selectSMSMethod">
<div *ngFor="let phone of model.phoneNumbers">
<!-- TODO Remove after DCI fix SSO issue for isTextCapable always egauls false -->
<!-- <div (click)="select('SMS', phone.number)" class="auth-send-row" *ngIf="phone.isTextCapable"> -->
<div
(click)="select('SMS', phone.number)"
class="auth-send-row"
[ngClass]="
phone.isTextCapable ? 'show-text-auth-option' : 'hide-text-auth-option'
"
>
<div class="auth-send-row-inner">
<div class="auth-send-label">
<p class="auth-send-method">Send authentication code by text</p>
<p class="method-output">{{ phone.maskedNumber }}</p>
</div>
</div>
</div>
</div>
</div>
<!-- Send By Voice -->
<div id="selectVoiceMethod">
<div *ngFor="let phone of model.phoneNumbers">
<div (click)="select('VOICE', phone.number)" class="auth-send-row">
<div class="auth-send-row-inner">
<div class="auth-send-label">
<p class="auth-send-method">Send authentication code by phone call</p>
<p class="method-output">{{ phone.maskedNumber }}</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div *ngIf="isLoading" class="loading-ctn">
<app-loader [header]="loadingHeader" [message]="loadingMessage"></app-loader>
</div>
</div>
</div>
</div>
.page-headers {
margin-top: 40px;
}
.authenticate-icon {
text-align: center;
margin: 40px 0px 0px 0px;
}
.authenticate-icon i {
font-size: 70px;
}
.authenticateUser .page-headers {
margin-top:0px;
}
.authenticateUser .page-description {
max-width: 325px;
width: 86%;
}
.auth-actions-ctn {
max-width: 360px;
width: 90%;
margin: 0px auto;
border: 1px solid #ccc;
border-bottom: none;
border-radius: 3px;
}
.auth-send-row {
padding: 10px 0px;
border-bottom: 1px solid #ccc;
width: 100%;
cursor: pointer;
}
.auth-send-row p,
.auth-send-row-second p {
margin-bottom: 0px;
color: #707173;
}
.auth-send-row-inner {
text-align: center;
padding: 0px 10px;
}
.auth-send-row-second {
padding: 10px 0px;
width: 100%;
}
.auth-send-row:hover,
.auth-send-row-second:hover {
background-color: rgba(158,158,158,.2);
}
.auth-send-method {
line-height: 18px;
}
.auth-send-row-inner .method-output {
line-height: 18px;
color: #3393a1;
}
.close-ctn {
display: none;
}
.pop-up-ctn-body {
padding: 0px;
}
.pop-up-ctn .loading-ctn {
margin-top: 30%;
}
.pop-up-ctn-body p {
text-align: center;
}
.pop-up-ctn-body .page-description {
margin-bottom: 15px;
}
.para-medium {
margin-top: 10px;
}
.loading-ctn {
margin-top: 150px;
}
/*----- Overlay Styles -----*/
.overlay .pop-up {
display: inline-block;
width: 90%;
max-width: 360px;
z-index: 9999;
background-color: #fff;
margin: 125px auto 20px auto;
box-shadow: 0 9px 46px 8px rgba(0, 0, 0, 0.14), 0 11px 15px -7px rgba(0, 0, 0, 0.12), 0 24px 38px 3px rgba(0, 0, 0, 0.2);
overflow-y: auto;
height: auto;
}
.overlay .pop-up-ctn-body {
padding: 20px;
}
.overlay .close-ctn {
display: block;
}
.overlay .page-headers {
margin-top: 0px;
}
.overlay .pop-up-ctn-body p {
text-align: center;
}
.overlay .para-medium {
margin: 0px auto 0px 0px;
}
.overlay h1 {
width: 100%;
background-color: #f7f8fc;
border-bottom: 1px solid #ccc;
padding: 15px;
box-sizing: border-box;
color: #39474f!important;
font-size: 16px;
}
.overlay .auth-actions-ctn {
width: 100%;
}
.page-description p,
.empty-page-ctn p {
text-align: center;
}
Legend
Html element with directive