Merge pull request #68 from stratisproject/ui

Add basic validation to login and recovery components

Breeze.UI/src/app/login/login.component.html

@@ -17,6 +17,7 @@
         <div class="form-group">
           <label>Your password: </label>
           <input class="form-control" type="password" formControlName="password" placeholder="Enter password here">
+          <div *ngIf="formErrors.password" class="alert alert-danger">{{formErrors.password}}</div>
         </div>
         <div class="form-group">
           <button type="submit" [disabled]="!openWalletForm.valid" class="btn btn-success">Decrypt</button>

Breeze.UI/src/app/login/login.component.ts

@@ -13,10 +13,7 @@ import { WalletLoad } from '../shared/classes/wallet-load';
 })
 export class LoginComponent implements OnInit {
   constructor(private globalService: GlobalService, private apiService: ApiService, private router: Router, private fb: FormBuilder) {
-    this.openWalletForm = fb.group({
-      "selectWallet": ["", Validators.required],
-      "password": ["", Validators.required]
-    });
+    this.buildDecryptForm();
    }
 
   private openWalletForm: FormGroup;
@@ -27,6 +24,43 @@ export class LoginComponent implements OnInit {
     this.getWalletFiles();
   }
 
+  private buildDecryptForm(): void {
+    this.openWalletForm = this.fb.group({
+      "selectWallet": ["", Validators.required],
+      "password": ["", Validators.required]
+    });
+
+    this.openWalletForm.valueChanges
+      .subscribe(data => this.onValueChanged(data));
+
+    this.onValueChanged();
+  }
+
+  onValueChanged(data?: any) {
+    if (!this.openWalletForm) { return; }
+    const form = this.openWalletForm;
+    for (const field in this.formErrors) {
+      this.formErrors[field] = '';
+      const control = form.get(field);
+      if (control && control.dirty && !control.valid) {
+        const messages = this.validationMessages[field];
+        for (const key in control.errors) {
+          this.formErrors[field] += messages[key] + ' ';
+        }
+      }
+    }
+  }
+
+  formErrors = {
+    'password': ''
+  };
+
+  validationMessages = {
+    'password': {
+      'required': 'Please enter your password.'
+    }
+  };
+
   private updateWalletFileDisplay(walletName: string) {
     this.openWalletForm.patchValue({selectWallet: walletName})
   }

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

@@ -15,14 +15,17 @@
         <div class="form-group">
           <label>Mnemonic:</label>
           <input class="form-control" formControlName="walletMnemonic" type="text" placeholder="Enter your saved mnemonic.">
+          <div *ngIf="formErrors.walletMnemonic" class="alert alert-danger">{{formErrors.walletMnemonic}}</div>
         </div>
         <div class="form-group">
           <label>Wallet password: </label>
           <input class="form-control" type="password" formControlName="walletPassword" placeholder="Enter password here.">
+          <div *ngIf="formErrors.walletPassword" class="alert alert-danger">{{formErrors.walletPassword}}</div>
         </div>
         <div class="form-group">
           <label>Name:</label>
           <input class="form-control" formControlName="walletName" type="text" placeholder="Enter a name for your wallet.">
+          <div *ngIf="formErrors.walletName" class="alert alert-danger">{{formErrors.walletName}}</div>
         </div>
         <div class="form-group">
           <label>Network:</label>

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

@@ -15,12 +15,8 @@ import { WalletRecovery } from '../../shared/classes/wallet-recovery';
 export class RecoverComponent implements OnInit {
 
   constructor(private globalService: GlobalService, private apiService: ApiService, private router: Router, private fb: FormBuilder) {
-    this.recoverWalletForm = fb.group({
-      "walletMnemonic": ["", Validators.required],
-      "walletPassword": ["", Validators.required],
-      "walletName": ["", Validators.required],
-      "selectNetwork": ["test", Validators.required]
-    });
+    this.buildRecoverForm();
+
   }
 
   private recoverWalletForm: FormGroup;
@@ -33,6 +29,60 @@ export class RecoverComponent implements OnInit {
   ngOnInit() {
   }
 
+  private buildRecoverForm(): void {
+    this.recoverWalletForm = this.fb.group({
+      "walletMnemonic": ["", Validators.required],
+      "walletPassword": ["", Validators.required],
+      "walletName": ["", [
+          Validators.required,
+          Validators.minLength(3),
+          Validators.maxLength(24)
+        ]
+      ],
+      "selectNetwork": ["test", Validators.required]
+    });
+
+    this.recoverWalletForm.valueChanges
+      .subscribe(data => this.onValueChanged(data));
+
+    this.onValueChanged();
+  }
+
+  onValueChanged(data?: any) {
+    if (!this.recoverWalletForm) { return; }
+    const form = this.recoverWalletForm;
+    for (const field in this.formErrors) {
+      this.formErrors[field] = '';
+      const control = form.get(field);
+      if (control && control.dirty && !control.valid) {
+        const messages = this.validationMessages[field];
+        for (const key in control.errors) {
+          this.formErrors[field] += messages[key] + ' ';
+        }
+      }
+    }
+  }
+
+  formErrors = {
+    'walletMnemonic': '',
+    'walletPassword': '',
+    'walletName': ''
+  };
+
+  validationMessages = {
+    'walletMnemonic': {
+      'required': 'Please enter your 12 word phrase.'
+    },
+    'walletPassword': {
+      'required': 'A password is required.'
+    },
+    'walletName': {
+      'required':      'Name is required.',
+      'minlength':     'Name must be at least 3 characters long.',
+      'maxlength':     'Name cannot be more than 24 characters long.'
+    }
+  };
+
   private onBackClicked() {
     this.router.navigate(["/setup"]);
   }