File
Implements
Metadata
| selector |
app-creating-secret-word |
| styleUrls |
creating-secret-word.component.css |
| templateUrl |
./creating-secret-word.component.html |
Methods
|
isSecretValid
|
isSecretValid()
|
|
|
|
|
|
toggleWhatIsSW
|
toggleWhatIsSW()
|
|
|
|
|
|
createsecretword
|
createsecretword:
|
Decorators : ViewChild
|
|
|
|
isLoading
|
isLoading:
|
Default value : false
|
|
|
|
loaderHeader
|
loaderHeader: string
|
Type : string
|
Default value : 'Processing Payment'
|
|
|
|
message
|
message: string
|
Type : string
|
Default value : 'Please wait a moment while we authenticate your identity.'
|
|
|
|
showWhatIsSW
|
showWhatIsSW:
|
Default value : false
|
|
|
import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
import { Router } from '@angular/router';
import { Payment, Template } from '../models';
import { AppState } from '../stores/app-state.store';
@Component({
selector: 'app-creating-secret-word',
templateUrl: './creating-secret-word.component.html',
styleUrls: ['./creating-secret-word.component.css'],
})
export class CreatingSecretWordComponent implements OnInit {
@ViewChild('secretWord')
secretword: ElementRef;
@ViewChild('createSecretWord')
createsecretword;
template: Template;
payment: Payment;
showWhatIsSW = false;
secret = '';
isLoading = false;
loaderHeader = 'Processing Payment';
message = 'Please wait a moment while we authenticate your identity.';
constructor(public app: AppState, private router: Router) {}
ngOnInit() {
this.payment = this.app.payment;
this.template = this.app.template;
this.secretword.nativeElement.focus();
}
toggleWhatIsSW() {
this.showWhatIsSW = !this.showWhatIsSW;
}
submit() {
if (!this.isSecretValid()) {
return;
}
this.app.setSecretWord(this.secret.trim());
this.isLoading = true;
this.router.navigate(['payment/create']);
}
isSecretValid() {
let word: string = this.createsecretword.form.value.secretWord;
word = word ? word.trim() : word;
const regExpression = /[A-Za-z0-9!]{5,}/;
const isValid = regExpression.test(word);
// min length 5 // max length 15
if (!word || word === '') {
return false;
} else if (word.length < 5 || length > 15) {
return false;
}
return isValid;
}
}
<span *ngIf="showWhatIsSW">
<app-what-is-secret-word (closeWhatIsSW)="toggleWhatIsSW()"></app-what-is-secret-word>
</span>
<div class="scroller" id="creatingSW" [hidden]="isLoading">
<h1 id="secretWordHeader" class="page-headers">Create A Secret Word</h1>
<div class="page-description">
<p class="para-medium">Please create a unique secret word for {{ template.name }}.</p>
</div>
<div class="form-ctn" id="whoToSendTo">
<p id="noSecretWordLabel">Please provide a secret word</p>
<form (ngSubmit)="submit()" #createSecretWord="ngForm" autocomplete="off">
<input
type="text"
#secretWord
[(ngModel)]="secret"
minlength="5"
maxlength="15"
id="secret"
name="secretWord"
placeholder="Secret Word:"
tabindex="1"
autofocus
required
/>
<span class="approve">
<i class="material-icons status-positive">check</i>
</span>
<span>
<div id="invalidFormatLabel" [hidden]="isSecretValid() || secret.length == 0" class="alert alert-danger">
Please follow the requested format
</div>
</span>
<p class="sw-criteria">
Use a <span class="sw-criteria-require"> single word with no spaces </span> that is
<span class="sw-criteria-require"> 5-15 characters </span> using only
<span class="sw-criteria-require"> A-Z, a-z, 0-9 </span> or
<span class="sw-criteria-require"> ! </span>
</p>
<button
id="submitSecretWord"
(click)="submit()"
type="button"
class="action-button"
tabindex="2"
[disabled]="!isSecretValid()"
>
<p class="button-inside" *ngIf="!app.hasPassedMfa">Create Secret Word & Continue</p>
<p class="button-inside" *ngIf="app.hasPassedMfa">Create Secret Word & Send Money</p>
</button>
</form>
</div>
<div class="two-action-ctn">
<p class="para-dark">
<a id="whatIsSW" (click)="toggleWhatIsSW()" class="action-link">What is this and why do I need it?</a>
</p>
</div>
<div class="two-action-ctn second-action">
<p class="para-dark">
<a id="cancelPayment" [routerLink]="['/start']" class="action-link">Cancel Current Payment</a>
</p>
</div>
</div>
<div *ngIf="isLoading">
<app-loader [header]="loaderHeader" [message]="message"></app-loader>
</div>
Legend
Html element with directive