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
|
|
|
toggleAuthRepeat
|
toggleAuthRepeat(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.'
|
|
|
|
showAuthRepeat
|
Default value : true
|
|
|
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';
@Component({
selector: 'app-authenticate-repeat',
templateUrl: './authenticate-repeat.component.html',
styleUrls: ['./authenticate-repeat.component.css']
})
export class AuthenticateRepeatComponent implements OnInit {
@Output() closeAuthRepeat = new EventEmitter();
@Output() openAuthInput = new EventEmitter();
isLoading = false;
showAuthRepeat = true;
model: MultiFactorModel;
loadingHeader = 'Retrieving Data';
loadingMessage = 'Please wait a moment while we retrieve your information.';
constructor(
private multiFactorService: MultiFactorService,
private app: AppStateStore,
private router: Router,
private errorService: ErrorStore
) {}
modelIsDefined() {
return this.model !== null && this.model !== undefined;
}
ngOnInit() {
this.isLoading = true;
this.app.state$
.pipe(map(state => state.multiFactorModel))
.subscribe(model => {
this.model = model;
if (model === null || model === undefined || !model.isValid) {
this.errorService.showError(
'User Missing Contact Information',
'Please Contact Your Financial Institution'
);
}
this.isLoading = false;
});
}
toggleAuthRepeat(event: Event) {
this.closeAuthRepeat.emit();
this.app.useMfaModal = false;
}
toggleAuthInput(event: Event) {
this.closeAuthRepeat.emit();
this.openAuthInput.emit();
}
select(method: string, target: string) {
this.app.selectedMethod = new SelectedMultiFactorMethod(method, target);
this.toggleAuthInput(event);
}
stopPropagation(event: Event) {
event.stopPropagation();
}
}
<div class="overlay scroller" (click)="toggleAuthRepeat($event)">
<div class="pop-up-ctn" id="authenticateUserMethod" (click)="stopPropagation($event)">
<div class="close-ctn">
<a id="closeButton" (click)="toggleAuthRepeat($event)">
<i class="material-icons">close</i>
</a>
</div>
<div class="pop-up-ctn-header">
<h1 class="header-text">Authenticate User</h1>
</div>
<div class="pop-up-ctn-body">
<div id="authMethods" *ngIf="!isLoading && modelIsDefined()">
<p>Select the method that the authentication code was sent to you.</p>
<div class="auth-actions-ctn">
<!-- Send By Email -->
<div 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">Authentication code was sent by email:</p>
<p id="authByEmail" class="method-output">{{model.emailAddress}}</p>
</div>
</div>
</div>
<!-- Send By Text -->
<div id="authByPhone">
<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">Authentication code was sent by text:</p>
<p class="method-output">{{phone.maskedNumber}}</p>
</div>
</div>
</div>
</div>
</div>
<!-- Send By Voice -->
<div id="authByVoice">
<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">Authentication code was sent by phone call:</p>
<p class="method-output">{{phone.maskedNumber}}</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div *ngIf="isLoading">
<app-loader [header]="loadingHeader" [message]="loadingMessage"></app-loader>
</div>
</div>
</div>
</div>
#authMethods p {
text-align: center;
}
.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: 100%;
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:nth-last-child {
border-bottom: none;
}
.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;
}
Legend
Html element with directive