Add password confirmation box, add password strength checker

Breeze.UI/src/app/setup/create/create.component.html

@@ -16,6 +16,12 @@
             <input type="password" class="form-control form-control-success" formControlName="walletPassword" id="walletPassword" placeholder="Enter a password.">
             <div *ngIf="formErrors.walletPassword" class="form-control-feedback">{{ formErrors.walletPassword }}</div>
           </div>
+          <div class="form-group">
+            <label class="text-left" for="walletPasswordConfirmation">Confirm Password</label>
+            <input type="password" class="form-control form-control-success" formControlName="walletPasswordConfirmation" id="walletPasswordConfirmation" placeholder="Enter a password.">
+            <div *ngIf="formErrors.walletPasswordConfirmation" class="form-control-feedback">{{ formErrors.walletPasswordConfirmation }}</div>
+            <div class="form-control-feedback">Your password will be required to recover your wallet in the future. Keep it safe.</div>
+          </div>
           <div class="form-group">
             <label class="text-left" for="walletNetwork">Network</label>
             <select class="form-control custom-select" name="network" formControlName="selectNetwork">

Breeze.UI/src/app/setup/create/create.component.ts

@@ -5,6 +5,8 @@ import { Router } from '@angular/router';
 import { GlobalService } from '../../shared/services/global.service';
 import { ApiService } from '../../shared/services/api.service';
 
+import { PasswordValidationDirective } from '../../shared/directives/password-validation.directive';
+
 import { WalletCreation } from '../../shared/classes/wallet-creation';
 import { Mnemonic } from '../../shared/classes/mnemonic';
 
@@ -25,14 +27,23 @@ export class CreateComponent {
 
   private buildCreateForm(): void {
     this.createWalletForm = this.fb.group({
-      "walletName": ["", [
+      "walletName": ["",
+        Validators.compose([
           Validators.required,
           Validators.minLength(3),
-          Validators.maxLength(24)
-        ]
+          Validators.maxLength(24),
+          Validators.pattern(/^[a-zA-Z0-9]*$/)
+        ])
+      ],
+      "walletPassword": ["", 
+        Validators.compose([
+          Validators.required,
+          Validators.pattern(/^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.{10,})/)])
         ],
-      "walletPassword": ["", Validators.required],
+      "walletPasswordConfirmation": ["", Validators.required],
       "selectNetwork": ["test", Validators.required]
+    }, {
+      validator: PasswordValidationDirective.MatchPassword
     });
 
     this.createWalletForm.valueChanges
@@ -58,17 +69,24 @@ export class CreateComponent {
 
   formErrors = {
     'walletName': '',
-    'walletPassword': ''
+    'walletPassword': '',
+    'walletPasswordConfirmation': ''
   };
 
   validationMessages = {
     'walletName': {
       'required': 'Name is required.',
       'minlength': 'Name must be at least 3 characters long.',
-      'maxlength':     'Name cannot be more than 24 characters long.'
+      'maxlength': 'Name cannot be more than 24 characters long.',
+      'pattern': 'Enter a valid wallet name. [a-Z] and [0-9] are the only characters allowed.'
     },
     'walletPassword': {
-      'required': 'A password is required.'
+      'required': 'A password is required.',
+      'pattern': 'A password must be at least 10 characters long and contain one lowercase and uppercase alphabetical character and a number.'
+    },
+    'walletPasswordConfirmation': {
+      'required': 'Confirm your password.',
+      'walletPasswordConfirmation': 'Passwords do not match.'
     }
   };
 

Breeze.UI/src/app/shared/directives/password-validation.directive.spec.ts

+import { PasswordValidationDirective } from './password-validation.directive';
+
+describe('PasswordValidationDirective', () => {
+  it('should create an instance', () => {
+    const directive = new PasswordValidationDirective();
+    expect(directive).toBeTruthy();
+  });
+});

Breeze.UI/src/app/shared/directives/password-validation.directive.ts

+import { Directive } from '@angular/core';
+import { AbstractControl } from '@angular/forms';
+
+@Directive({
+  selector: '[appPasswordValidation]'
+})
+export class PasswordValidationDirective {
+  constructor() { }
+
+  static MatchPassword(AC: AbstractControl) {
+    let password = AC.get('walletPassword').value;
+    let confirmPassword = AC.get('walletPasswordConfirmation').value;
+    if(password != confirmPassword) {
+      AC.get('walletPasswordConfirmation').setErrors( { walletPasswordConfirmation: true } )
+    } else {
+      return null
+    }
+  }
+}
\ No newline at end of file

Breeze.UI/src/app/shared/shared.module.ts

@@ -2,10 +2,11 @@ import { NgModule, ModuleWithProviders } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { CoinNotationPipe } from './pipes/coin-notation.pipe';
 import { AutoFocusDirective } from './directives/auto-focus.directive';
+import { PasswordValidationDirective } from './directives/password-validation.directive';
 
 @NgModule({
   imports: [CommonModule],
-  declarations: [CoinNotationPipe, AutoFocusDirective],
+  declarations: [CoinNotationPipe, AutoFocusDirective, PasswordValidationDirective],
   exports: [CoinNotationPipe, AutoFocusDirective]
 })
 

Breeze.UI/src/app/wallet/wallet.module.ts

@@ -7,7 +7,7 @@ import { MenuComponent } from './menu/menu.component';
 import { DashboardComponent } from './dashboard/dashboard.component';
 import { HistoryComponent } from './history/history.component';
 
-import {SharedModule} from '../shared/shared.module';
+import { SharedModule } from '../shared/shared.module';
 import { WalletRoutingModule } from './wallet-routing.module';
 import { SidebarComponent } from './sidebar/sidebar.component';
 import { StatusBarComponent } from './status-bar/status-bar.component';