src/app/authenticate-input/authenticate-input.component.ts
| selector | app-authenticate-input |
| styleUrls | authenticate-input.component.css |
| templateUrl | ./authenticate-input.component.html |
Properties |
Methods |
Outputs |
constructor(app: AppState, multiFactorService: MultiFactorService, router: Router, templateService: TemplateService, paymentService: PaymentService, location: Location)
|
|||||||||||||||||||||
|
Parameters :
|
closeAuthInput
|
$event type: EventEmitter
|
openAuthMethod
|
$event type: EventEmitter
|
| goBack |
goBack()
|
|
Returns :
void
|
| mfaFailed |
mfaFailed()
|
|
Returns :
void
|
| mfaSuccess |
mfaSuccess()
|
|
Returns :
void
|
| ngOnInit |
ngOnInit()
|
|
Returns :
void
|
| stopPropagation | ||||||
stopPropagation(event: Event)
|
||||||
|
Parameters :
Returns :
void
|
| toggleAuthInput | ||||||
toggleAuthInput(event: Event)
|
||||||
|
Parameters :
Returns :
void
|
| toggleAuthMethod | ||||||
toggleAuthMethod(event: Event)
|
||||||
|
Parameters :
Returns :
void
|
| verify |
verify()
|
|
Returns :
void
|
| verifyCode |
verifyCode(code: string, sentTo: string)
|
|
Returns :
void
|
| Public app |
app:
|
Type : AppState
|
| auth |
auth:
|
Type : string
|
| authFailed |
authFailed:
|
Default value : false
|
| authinput |
authinput:
|
Type : ElementRef
|
Decorators : ViewChild
|
| authInput |
authInput:
|
Type : string
|
Default value : ''
|
| authMethod |
authMethod:
|
Type : string
|
| isFailure |
isFailure:
|
Default value : false
|
| isLoading |
isLoading:
|
Default value : false
|
| isSuccess |
isSuccess:
|
Default value : false
|
| loaderHeader |
loaderHeader:
|
Type : string
|
Default value : 'Verifying Code'
|
| maskedNumber |
maskedNumber:
|
Type : string
|
| message |
message:
|
Type : string
|
Default value : 'Please wait a moment while we authenticate your identity.'
|
| selectMethod |
selectMethod:
|
Type : SelectedMultiFactorMethod
|
| showAuthenticationMethod |
showAuthenticationMethod:
|
Default value : false
|
import { Location } from '@angular/common';
import {
Component,
ElementRef,
EventEmitter,
OnInit,
Output,
ViewChild
} from '@angular/core';
import { Router } from '@angular/router';
import { SelectedMultiFactorMethod } from '../models';
import {
MultiFactorService,
PaymentService,
TemplateService
} from '../services';
import { AppState } from '../stores/app-state.store';
@Component({
selector: 'app-authenticate-input',
templateUrl: './authenticate-input.component.html',
styleUrls: ['./authenticate-input.component.css']
})
export class AuthenticateInputComponent implements OnInit {
@Output()
closeAuthInput = new EventEmitter();
@Output()
openAuthMethod = new EventEmitter();
@ViewChild('authInput')
authinput: ElementRef;
isSuccess = false;
isFailure = false;
showAuthenticationMethod = false;
loaderHeader = 'Verifying Code';
message = 'Please wait a moment while we authenticate your identity.';
maskedNumber: string;
authMethod: string;
// multiFactorModel: MultiFactorModel;
selectMethod: SelectedMultiFactorMethod;
auth: string;
authFailed = false;
isLoading = false;
authInput = '';
constructor(
public app: AppState,
private multiFactorService: MultiFactorService,
private router: Router,
private templateService: TemplateService,
private paymentService: PaymentService,
private location: Location
) {}
ngOnInit() {
this.selectMethod = this.app.selectedMethod;
this.authMethod = this.app.selectedMethod.method.toLowerCase();
if (this.authMethod === 'sms') {
const phoneNumber = this.app.selectedMethod.target;
this.maskedNumber = phoneNumber.substr(phoneNumber.length - 4);
}
}
toggleAuthInput(event: Event) {
this.closeAuthInput.emit();
this.app.useMfaModal = false;
}
toggleAuthMethod(event: Event) {
this.closeAuthInput.emit();
this.openAuthMethod.emit();
}
goBack() {
if (!this.app.useMfaModal) {
this.router.navigate(['/authenticate-method']);
} else {
this.toggleAuthMethod(event);
}
}
verify() {
this.verifyCode(this.auth, this.selectMethod.target);
}
verifyCode(code: string, sentTo: string) {
this.isLoading = true;
this.multiFactorService.verifyCode(code, sentTo).subscribe(wasVerified => {
this.app.hasPassedMfa = wasVerified;
if (!wasVerified) {
return this.mfaFailed();
}
this.mfaSuccess();
});
}
mfaFailed(): void {
this.isLoading = false;
this.isFailure = true;
this.authFailed = true;
}
mfaSuccess() {
if (this.app.useMfaModal) {
this.isSuccess = true;
this.isLoading = false;
return;
}
this.router.navigate(['/payment/create']);
}
stopPropagation(event: Event) {
event.stopPropagation();
}
}
<div [ngClass]="{ overlay: app.useMfaModal }" class="scroller" (click)="toggleAuthInput($event)">
<div class="pop-up" id="authenticateUserInput" (click)="stopPropagation($event)">
<div class="close-ctn">
<a id="closeButton" (click)="toggleAuthInput($event)">
<i class="material-icons">close</i>
</a>
</div>
<h1
id="authHeader"
class="page-headers"
[hidden]="(isLoading && !app.useMfaModal) || (isFailure && !app.useMfaModal)"
>
Authenticate User
</h1>
<div class="pop-up-ctn-body">
<div [hidden]="isLoading || isSuccess || isFailure">
<div class="page-description">
<p id="authTo" class="para-medium">
We have sent the authentication code to:
<br />
<span class="auth-sent-to-email">
<div id="authToEmail">
<ng-container *ngIf="authMethod === 'email'"> {{ selectMethod.target }}</ng-container>
</div>
<div id="authToSms">
<ng-container id="authToSms" *ngIf="authMethod === 'sms'">
XXX-{{ maskedNumber }}</ng-container
>
</div>
</span>
</p>
</div>
<div class="form-ctn" id="enterAuthCodeCtn">
<p>Please Enter the 4 digit authentication code</p>
<form #authUser="ngForm" id="authenticateForm" autocomplete="off">
<input
id="authInput"
type="tel"
#authInput
[(ngModel)]="auth"
pattern=".{4,}"
id="auth"
name="authInput"
placeholder="0000"
tabindex="1"
maxlength="4"
(keydown.Enter)="verify()"
required
/>
<span class="approve">
<i class="material-icons status-positive">check</i>
</span>
<button
id="authenticateFormButton"
(click)="verify()"
type="button"
form="authenticateForm"
class="action-button"
tabindex="2"
[disabled]="!authUser.form.valid"
>
<p class="button-inside" *ngIf="app.useMfaModal">Authenticate User</p>
<p class="button-inside" *ngIf="!app.useMfaModal">
Authenticate User & Send Payment Request
</p>
</button>
</form>
</div>
<div class="two-action-ctn">
<p class="para-dark">
<a id="newAuthCode" (click)="goBack()" class="action-link">Send A New Authentication Code</a>
</p>
</div>
</div>
<div *ngIf="isLoading">
<app-loader [header]="loaderHeader" [message]="message"></app-loader>
</div>
<div *ngIf="isSuccess" id="successScreen">
<p class="status-icon-ctn">
<i class="material-icons status-positive status-icon">done</i>
</p>
<p class="status-header status-positive">Authenticated</p>
<div id="swLabel" class="page-description">
<p class="para-medium">
You are successfully authenticated for the next payment during this session.
</p>
</div>
<button id="continueToMoney" type="button" class="action-button" (click)="toggleAuthInput($event)">
<p class="button-inside">Continue To Send Money</p>
</button>
</div>
<div *ngIf="isFailure" id="failureScreen">
<p class="status-icon-ctn">
<i class="material-icons status-negative status-icon">cancel</i>
</p>
<p class="status-header status-negative">Authentication Failed</p>
<div id="swLabel" class="page-description">
<p class="para-medium">
Authentication was not successful. <br />
Please try again.
</p>
</div>
<button id="authTryAgainButton" type="button" class="action-button" (click)="goBack()">
<p class="button-inside">Try Again</p>
</button>
</div>
</div>
</div>
</div>