File
Implements
Index
Properties
|
|
|
Methods
|
|
|
Outputs
|
|
|
Accessors
|
|
|
Methods
|
stopPropagation
|
stopPropagation(event: Event)
|
|
|
Parameters :
| Name |
Type |
Optional |
| event |
Event
|
No
|
|
|
authInput
|
Type : string
|
Default value : ''
|
|
|
|
changeAmountInput
|
Type : ElementRef
|
Decorators :
@ViewChild('changeAmountInput')
|
|
|
|
changeAmountInputTwo
|
Type : ElementRef
|
Decorators :
@ViewChild('changeAmountInputTwo')
|
|
|
|
isLoading
|
Default value : false
|
|
|
|
loaderHeader
|
Type : string
|
Default value : 'Verifying Deposits'
|
|
|
|
message
|
Type : string
|
Default value : 'Please wait a moment while we verify the deposits.'
|
|
|
|
model
|
Default value : new VerifyTemplateModel()
|
|
|
|
showVerifyForm
|
Default value : true
|
|
|
|
state
|
Default value : VerifyType.None
|
|
|
|
subscription
|
Type : Subscription
|
|
|
import { Location } from '@angular/common';
import {
Component,
OnInit,
Output,
ViewChild,
ElementRef
} from '@angular/core';
import { ActivatedRoute, Params, Router } from '@angular/router';
import { EventEmitter } from 'events';
import 'rxjs/add/operator/switchMap';
import { VerifyType } from '../../../enums/verify-type.enum';
import { VerifyTemplateModel } from '../../../models/verify-template.model';
import { MaterialService, TemplateService } from '../../../providers';
import { Observable } from 'rxjs/Observable';
import { Template } from '../../../models';
import { Subscription } from 'rxjs/Subscription';
@Component({
selector: 'app-template-verify',
templateUrl: './template-verify.component.html',
styleUrls: ['./template-verify.component.css']
})
export class TemplateVerifyComponent implements OnInit {
@Output() closeVerifyDeposits = new EventEmitter();
@ViewChild('changeAmountInput') changeAmountInput: ElementRef;
@ViewChild('changeAmountInputTwo') changeAmountInputTwo: ElementRef;
state = VerifyType.None;
subscription:Subscription;
model = new VerifyTemplateModel();
name: string;
loaderHeader = 'Verifying Deposits';
message = 'Please wait a moment while we verify the deposits.';
auth: string;
isLoading = false;
showVerifyForm = true;
authInput = '';
constructor(
private materialService: MaterialService,
private templateService: TemplateService,
private route: ActivatedRoute
) {}
ngOnInit() {
this.subscription = this.route.params
.switchMap((params: Params) =>
this.templateService.getTemplateById(params['id'])
).subscribe(template => {
this.name = template.displayName ? template.displayName : template.name;
this.model.paymentTemplateId = template.id;
});
console.log('app-template component loaded');
this.materialService.render();
}
stopPropagation(event: Event) {
event.stopPropagation();
}
verify() {
this.isLoading = true;
this.showVerifyForm = false;
this.templateService.verify(this.model).subscribe(response => {
this.subscription.unsubscribe();
this.isLoading = false;
if (response.isFrozen) {
this.state = VerifyType.Frozen;
return;
}
this.state = response.isVerified ? VerifyType.Success : VerifyType.Failed;
});
}
get isSuccess(): boolean {
return this.state === VerifyType.Success;
}
get isFailure(): boolean {
return this.state === VerifyType.Failed;
}
get isFrozen(): boolean {
return this.state === VerifyType.Frozen;
}
tryAgain() {
this.state = VerifyType.None;
this.showVerifyForm = true;
}
}
<div class="overlay">
<div class="scroller" id="authenticateUserInput">
<div class="close-ctn">
<a id="closeButton" [routerLink]="['/templates']">
<i class="material-icons">close</i>
</a>
</div>
<h1 id="verifyAccountHeader" class="page-headers" [hidden]="isLoading || !showVerifyForm || isFrozen">Verify Account</h1>
<div class="pop-up-ctn-body">
<!-- Loader -->
<div *ngIf="isLoading">
<app-loader [header]="loaderHeader" [message]="message"></app-loader>
</div>
<div [hidden]="isLoading || !showVerifyForm || isFrozen">
<div class="page-description">
<p class="para-medium">
We have sent two small deposits to:
<br>
<!-- <span class="auth-sent-to-email" *ngIf="model.displayname && model.displayname > 1">{{model.displayname}}</span> -->
<span id="sentDepositTo" class="auth-sent-to-email">{{name}}</span>
</p>
</div>
<div class="form-ctn" id="enterAuthCodeCtn">
<form #verifyForm="ngForm" id="verifyForm" autocomplete="off" novalidate>
<div class="two-items-one-row">
<!-- Deposit One -->
<div class="item-one">
<p class="form-first-child text-center">Deposit One</p>
<app-atm-input id="firstMicroDepositAmount" (keydown.Enter)="verify()" name="firstMicroDepositAmount" [(ngModel)]="model.firstMicroDepositAmount"></app-atm-input>
</div>
<!-- Deposit Two -->
<div class="item-two">
<p class="form-first-child text-center">Deposit Two</p>
<app-atm-input id="secondMicroDepositAmount" (keydown.Enter)="verify()" name="secondMicroDepositAmount" [(ngModel)]="model.secondMicroDepositAmount"></app-atm-input>
</div>
</div>
<button id="verifyButton" type="button" class="action-button" (click)="verify()" form="authenticateForm" tabindex="3" [disabled]="model.firstMicroDepositAmount === 0 || model.secondMicroDepositAmount === 0">
<span class="button-inside">Verify</span>
</button>
</form>
</div>
<div class="two-action-ctn">
<p class="para-dark">
<a id="cancelAccountVerificationButton" [routerLink]="['/templates']" class="action-link">Cancel Account Verification</a>
</p>
</div>
</div>
<!-- Success Screen -->
<div *ngIf="isSuccess" id="successScreen">
<p class="status-icon-ctn">
<i class="material-icons status-positive status-icon">done</i>
</p>
<p id="accountVerifiedLabel" class="status-header status-positive">Account Verified</p>
<div id="swLabel" class="page-description">
<p class="para-medium">Account is verified to now send and receive funds with this account.</p>
</div>
<button id="transferButton" type="button" class="action-button" [routerLink]="['/start']">
<p class="button-inside">Start Transferring Money</p>
</button>
</div>
<!-- Failure Screen -->
<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">Account Not Verified</p>
<div id="swLabel" class="page-description">
<p class="para-medium">The amount you entered did not match the deposits we sent. Please try again.</p>
</div>
<button type="button" class="action-button" (click)="tryAgain()">
<p class="button-inside">Try Again</p>
</button>
</div>
</div>
<!-- Empty Search Screen -->
<div id="emptySearchCtn" class="empty-page-ctn" *ngIf="isFrozen">
<i class=" material-icons status-normal ">
lock</i>
<h3 class="status-header status-normal "> Frozen Account </h3>
<div class="page-description ">
<p class="para-medium ">This account is frozen because of too many failed attempts to verify it.
</p>
</div>
</div>
</div>
</div>
#authenticateUser .page-description {
max-width: 325px;
width: 86%;
}
.auth-sent-to-email {
font-weight: bold;
}
#enterAuthCodeCtn input {
text-align: center;
}
.close-ctn {
display: none;
}
.pop-up-ctn-body {
padding: 0px;
}
.pop-up-ctn-body p {
text-align: center;
}
.pop-up-ctn-body .page-description {
margin: -5px auto 20px auto;
}
.pop-up-ctn .loading-ctn {
margin-top: 30%;
}
.loading-ctn {
margin-top: 40%;
}
.status-header {
margin: 10px auto 2px auto;
}
#failureScreen,
#successScreen {
width: 80%;
max-width: 300px;
padding: 20px;
margin: 20% auto 0px auto;
text-align: center;
}
#failureScreen .action-button,
#successScreen .action-button {
margin-top: 0px;
}
#loadingData p.page-description {
text-align: center;
}
.form-ctn input {
padding: 0px 35px 0px 35px;
}
/*----- Overlay Styles -----*/
.overlay .scroller {
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 20px;
}
.overlay .form-ctn {
background-color: transparent;
box-shadow: none;
width: auto;
padding: 10px 0px;
margin-top: -10px;
}
.overlay .close-ctn {
display: block;
}
.overlay .page-headers {
margin-top: 0px;
}
.overlay .pop-up-ctn-body p {
text-align: center;
}
.overlay .pop-up-ctn-body .page-description {
margin-bottom: 10px;
}
.overlay .para-medium {
margin: 15px auto 15px 0px;
}
.overlay .two-action-ctn {
margin-top: -10px;
}
.overlay .approve {
margin-left: -35px;
z-index: 99999999;
padding-top: 0px;
float: right;
position: absolute;
}
.overlay .status-icon-ctn {
margin-top: 0px;
}
.overlay #failureScreen,
.overlay #successScreen {
width: 100%;
padding: 20px 0px 0px 0px;
margin: 0px auto 10px auto;
}
.overlay #failureScreen .action-button,
.overlay #successScreen .action-button {
margin-top: 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 .scroller:after {
display: none;
}
Legend
Html element with directive