File
Implements
Metadata
| selector |
app-authenticate-repeat |
| styleUrls |
authenticate-repeat.component.css |
| templateUrl |
./authenticate-repeat.component.html |
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
|
isLoading:
|
Default value : false
|
|
|
|
loadingHeader
|
loadingHeader: string
|
Type : string
|
Default value : 'Retrieving Data'
|
|
|
|
loadingMessage
|
loadingMessage: string
|
Type : string
|
Default value : 'Please wait a moment while we retrieve your information.'
|
|
|
|
showAuthRepeat
|
showAuthRepeat:
|
Default value : true
|
|
|
import { Component, EventEmitter, OnInit, Output } from '@angular/core';
import { Router } from '@angular/router';
import { MultiFactorModel, SelectedMultiFactorMethod } from '../models';
import { MultiFactorService } from '../services';
import { ErrorStore } from '../stores';
import { AppState } from '../stores/app-state.store';
@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: AppState,
private router: Router,
private errorService: ErrorStore
) {}
modelIsDefined() {
return this.model !== null && this.model !== undefined;
}
ngOnInit() {
this.isLoading = true;
this.multiFactorService.getMethods().subscribe(model => {
this.model = model;
if (model === null || model === undefined || !model.isValid) {
this.errorService.addError(
'You are missing the necessary contact information to use this feature.',
'Please contact your financial institution.'
);
this.errorService.displayErrors();
}
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 id="authHeader" class="header-text">Authenticate User</h1>
</div>
<div class="pop-up-ctn-body">
<div id="authMethods" *ngIf="!isLoading && modelIsDefined()">
<p id="authMethodLabel">Select the method that the authentication code was sent to you.</p>
<div class="auth-actions-ctn">
<!-- Send By Email -->
<div id="authMethodEmail" 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 class="method-output">{{model.emailAddress}}</p>
</div>
</div>
</div>
<!-- Send By Text -->
<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 id="authMethodSms" (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>
<!-- Send By Voice -->
<div *ngFor="let phone of model.phoneNumbers">
<div id="authMethodVoice" (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 *ngIf="isLoading">
<app-loader [header]="loadingHeader" [message]="loadingMessage"></app-loader>
</div>
</div>
</div>
</div>
Legend
Html element with directive