File
Implements
Index
Properties
|
|
|
Methods
|
|
|
Outputs
|
|
|
Methods
|
stopPropagation
|
stopPropagation(event: Event)
|
|
|
Parameters :
| Name |
Type |
Optional |
| event |
Event
|
No
|
|
|
toggleAuthMethod
|
toggleAuthMethod(event: Event)
|
|
|
Parameters :
| Name |
Type |
Optional |
| event |
Event
|
No
|
|
|
toggleAuthRepeat
|
toggleAuthRepeat(event: Event)
|
|
|
Parameters :
| Name |
Type |
Optional |
| event |
Event
|
No
|
|
|
toggleAuthRequest
|
toggleAuthRequest(event: Event)
|
|
|
Parameters :
| Name |
Type |
Optional |
| event |
Event
|
No
|
|
|
isLoading
|
Default value : false
|
|
|
|
loadingHeader
|
Type : string
|
Default value : 'Processing'
|
|
|
|
loadingMessage
|
Type : string
|
Default value : 'Please wait a moment.'
|
|
|
import { Location, DatePipe } from '@angular/common';
import { Component, ElementRef, OnInit, ViewChild, Output, EventEmitter } from '@angular/core';
import { Router } from '@angular/router';
import { MultiFactorService } from '../../providers/services/multi-factor.service';
import { AppStateStore } from '../../providers/stores/app-state.store';
import { ErrorStore } from '../../providers/stores/error.store';
@Component({
selector: 'app-authenticate-request',
templateUrl: './authenticate-request.component.html',
styleUrls: ['./authenticate-request.component.css'],
})
export class AuthenticateRequestComponent implements OnInit {
@Output() closeAuthRequest = new EventEmitter();
@Output() openAuthMethod = new EventEmitter();
@Output() openAuthRepeat = new EventEmitter();
loadingHeader = 'Processing';
loadingMessage = 'Please wait a moment.';
isLoading = false;
constructor(
private multiFactorService: MultiFactorService,
private app: AppStateStore,
private router: Router,
private errorService: ErrorStore
) {}
ngOnInit() {}
toggleAuthRequest(event: Event) {
this.closeAuthRequest.emit();
this.app.useMfaModal = false;
}
toggleAuthMethod(event: Event) {
this.closeAuthRequest.emit();
this.openAuthMethod.emit();
}
toggleAuthRepeat(event: Event) {
this.closeAuthRequest.emit();
this.openAuthRepeat.emit();
}
stopPropagation(event: Event) {
event.stopPropagation();
}
}
<div class="overlay scroller" (click)="toggleAuthRequest($event)">
<div class="pop-up-ctn" id="authenticateUserMethod" (click)="stopPropagation($event)">
<div class="close-ctn">
<a id="closeButton" (click)="toggleAuthRequest($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="authRequest" *ngIf="!isLoading">
<p>For security reasons we require a two-factor authentication per transaction as an extra layer of security.</p>
<div class="auth-request-container">
<!-- Already Has An Authentication Code -->
<div id="iAlreadyHaveAuthCodeButton" class="auth-request-method first" (click)="toggleAuthRepeat()">
<p>I already have an authentication code</p>
</div>
<!-- Requesting An Authentication Code -->
<div id="iNeedAnAuthCodeButton" class="auth-request-method last" (click)="toggleAuthMethod()">
<p>I need a new authentication code</p>
</div>
</div>
</div>
<div *ngIf="isLoading">
<app-loader [header]="loadingHeader" [message]="loadingMessage"></app-loader>
</div>
</div>
</div>
</div>
#authRequest p {
text-align: center;
}
.auth-request-method {
padding: 10px;
border: 1px solid #ccc;
border-radius: 3px;
}
.first {
margin-bottom: 0px;
border-bottom-left-radius: 0px !important;
border-bottom-right-radius: 0px !important;
border-bottom: none;
}
.last {
border-top-left-radius: 0px;
border-top-right-radius: 0px;
}
.auth-request-method p {
margin: 0px;
}
.auth-request-container {
cursor: pointer;
}
.auth-request-method:hover {
background-color: rgba(158,158,158,.2);
}
Legend
Html element with directive