Make recovery form a reactive form

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

@@ -33,7 +33,11 @@ export class LoginComponent implements OnInit {
 
   private onDecryptClicked() {
     this.setGlobalWalletName(this.openWalletForm.get("selectWallet").value);
-    let walletLoad = new WalletLoad(this.openWalletForm.get("password").value, this.globalService.getWalletPath(), this.openWalletForm.get("selectWallet").value);
+    let walletLoad = new WalletLoad(
+      this.openWalletForm.get("password").value,
+      this.globalService.getWalletPath(),
+      this.openWalletForm.get("selectWallet").value
+      );
     this.loadWallet(walletLoad);
   }
 

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

@@ -22,14 +22,19 @@ export class CreateComponent {
     });
   }
 
-  private newWallet: WalletCreation;
   private createWalletForm: FormGroup;
+  private newWallet: WalletCreation;
 
   private responseMessage: string;
   private errorMessage: string;
 
   private onCreateClicked() {
-    this.newWallet = new WalletCreation(this.createWalletForm.get("walletPassword").value, this.createWalletForm.get("selectNetwork").value, this.globalService.getWalletPath(), this.createWalletForm.get("walletName").value);
+    this.newWallet = new WalletCreation(
+      this.createWalletForm.get("walletPassword").value,
+      this.createWalletForm.get("selectNetwork").value,
+      this.globalService.getWalletPath(),
+      this.createWalletForm.get("walletName").value
+      );
     this.createWallet(this.newWallet);
   }
 

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

@@ -2,27 +2,27 @@
 <p>
   Welcome, please complete the form below to recover your wallet.
 </p>
-<div class="form-group">
-  <label for="name">Mnemonic:</label>
-  <input class="form-control" type="text" #walletMnemonic required>
-</div>
-<div class="form-group">
-  <label for="name">Password:</label>
-  <input class="form-control" type="password" #walletPassword required>
-</div>
-<div class="form-group">
-  <label for="name">Wallet Path:</label>
-  <input class="form-control" type="text" #walletPath required>
-</div>
-<div class="form-group">
-  <label for="name">Wallet Name:</label>
-  <input class="form-control" type="text" #walletName required>
-</div>
-<div class="form-group">
-  <label for="networklabel">Network:</label>
-  <select name="network" #walletNetwork>
+<form [formGroup]="recoverWalletForm" (ngSubmit)="onRecoverClicked()">
+  <div class="form-group">
+    <label>Mnemonic:</label>
+    <input class="form-control" formControlName="walletMnemonic" type="text" placeholder="Enter your saved mnemonic.">
+  </div>
+  <div class="form-group">
+    <label>Wallet password: </label>
+    <input class="form-control" type="password" formControlName="walletPassword" placeholder="Enter password here.">
+  </div>
+  <div class="form-group">
+    <label>Name:</label>
+    <input class="form-control" formControlName="walletName" type="text" placeholder="Enter a name for your wallet.">
+  </div>
+  <div class="form-group">
+    <label>Network:</label>
+    <select name="network" formControlName="selectNetwork">
       <option value="main">Main</option>
       <option value="test">Testnet</option>
     </select>
-</div>
-<button type="submit" (click)="recoverWallet(walletMnemonic.value, walletPassword.value, walletPath.value, walletName.value, walletNetwork.value)">Recover</button>
\ No newline at end of file
+  </div>
+  <div class="form-group">
+    <button type="submit" [disabled]="!recoverWalletForm.valid" class="btn btn-success">Recover Wallet</button>
+  </div>
+</form>

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

 import { Component, OnInit } from '@angular/core';
-import { ApiService } from '../../shared/services/api.service'
-import { WalletRecovery } from '../../shared/classes/wallet-recovery'
+import { FormGroup, FormControl, Validators, FormBuilder } from '@angular/forms';
+
+import { GlobalService } from '../../shared/services/global.service';
+import { ApiService } from '../../shared/services/api.service';
+
+import { WalletRecovery } from '../../shared/classes/wallet-recovery';
 
 @Component({
   selector: 'app-recover',
@@ -9,8 +13,16 @@ import { WalletRecovery } from '../../shared/classes/wallet-recovery'
 })
 export class RecoverComponent implements OnInit {
 
-  constructor(private apiService: ApiService) { }
+  constructor(private globalService: GlobalService, private apiService: ApiService, private fb: FormBuilder) {
+    this.recoverWalletForm = fb.group({
+      "walletMnemonic": ["", Validators.required],
+      "walletPassword": ["", Validators.required],
+      "walletName": ["", Validators.required],
+      "selectNetwork": ["main", Validators.required]
+    });
+  }
 
+  private recoverWalletForm: FormGroup;
   private walletRecovery: WalletRecovery;
 
   private responseMessage: string;
@@ -19,16 +31,21 @@ export class RecoverComponent implements OnInit {
   ngOnInit() {
   }
 
-  private recoverWallet(mnemonic: string, password: string, folderPath: string, name: string, network: string) {
-    this.walletRecovery = new WalletRecovery();
-    this.walletRecovery.mnemonic = mnemonic;
-    this.walletRecovery.password = password;
-    this.walletRecovery.folderPath = folderPath;
-    this.walletRecovery.name = name;
-    this.walletRecovery.network = network;
+  private onRecoverClicked(){
+    this.walletRecovery = new WalletRecovery(
+      this.recoverWalletForm.get("walletMnemonic").value,
+      this.recoverWalletForm.get("walletPassword").value,
+      this.recoverWalletForm.get("selectNetwork").value,
+      this.globalService.getWalletPath(),
+      this.recoverWalletForm.get("walletName").value
+      );
+    this.recoverWallet(this.walletRecovery);
+  }
+
+  private recoverWallet(recoverWallet: WalletRecovery) {
 
     this.apiService
-      .recoverWallet(this.walletRecovery)
+      .recoverWallet(recoverWallet)
       .subscribe(
         response => {
           if (response.status >= 200 && response.status < 400) {

Breeze.UI/src/app/shared/classes/wallet-recovery.ts

 export class WalletRecovery {
+
+  constructor(mnemonic: string, password: string, network:string, folderPath: string, name: string) {
+    this.mnemonic = mnemonic;
+    this.password = password;
+    this.network = network;
+    this.folderPath = folderPath;
+    this.name = name;
+  }
+
   mnemonic: string;
   password: string;
   folderPath: string;