Switch decrypt form to a reactive form

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

 <h1>Welcome to Breeze</h1>
-<div *ngIf="hasWallet">
+<form *ngIf="hasWallet" [formGroup]="openWalletForm" (ngSubmit)="onDecryptClicked()">
   <p>Choose the wallet you want to open:</p>
   <div class="form-group">
-    <label for="walletLabel">Wallet to open:</label>
-    <select name="wallet" #walletName (change)="walletChanged(walletName.value)">
+    <label>Select wallet name to open:</label>
+    <select class="form-control" formControlName="selectWallet">
       <option *ngFor="let wallet of wallets" [value]="wallet">{{wallet}}</option>
     </select>
   </div>
   <p>Please enter your password to decrypt your wallet</p>
-  <form (ngSubmit)="onSubmit()" #passwordForm="ngForm">
-    <div class="form-group">
-      <label for="password">Your password: </label>
-      <input type="password" class="form-control" id="password" [(ngModel)]="password" required name="password">
-    </div>
-    <button type="submit" class="btn btn-success">Decrypt</button>
-  </form>
-  <p></p>
-</div>
+  <div class="form-group">
+    <label>Your password: </label>
+    <input class="form-control" type="password" formControlName="password" placeholder="Enter password here">
+  </div>
+  <div class="form-group">
+    <button type="submit" [disabled]="!openWalletForm.valid" class="btn btn-success">Decrypt</button>
+  </div>
+</form>
+
 <div *ngIf="hasWallet;else no_wallet">
   <p> If you like to create or restore a wallet please click the button below.</p>
 </div>

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

@@ -3,6 +3,7 @@ import { Router } from '@angular/router';
 import { GlobalService } from '../shared/services/global.service';
 import { ApiService } from '../shared/services/api.service';
 import { WalletLoad } from '../shared/classes/wallet-load';
+import { FormGroup, FormControl, Validators, FormBuilder } from '@angular/forms';
 
 @Component({
   selector: 'app-login',
@@ -10,13 +11,40 @@ import { WalletLoad } from '../shared/classes/wallet-load';
   styleUrls: ['./login.component.css']
 })
 export class LoginComponent implements OnInit {
-  constructor(private globalService: GlobalService, private apiService: ApiService, private router: Router) { }
+  constructor(private globalService: GlobalService, private apiService: ApiService, private router: Router, private fb: FormBuilder) {
+    this.openWalletForm = fb.group({
+      "selectWallet": ["", Validators.required],
+      "password": ["", Validators.required]
+    });
+   }
 
+  private openWalletForm: FormGroup;
   private hasWallet: boolean = false;
   private wallets: [string];
-  private password: string;
 
   ngOnInit() {
+    this.getWalletFiles();
+  }
+
+  private updateWalletFileDisplay(walletName: string) {
+    this.openWalletForm.patchValue({selectWallet: walletName})
+  }
+
+  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);
+    this.loadWallet(walletLoad);
+  }
+
+  private onCreateClicked() {
+    this.router.navigate(['/setup']);
+  }
+
+  private setGlobalWalletName(walletName: string) {
+    this.globalService.setCurrentWalletName(walletName);
+  }
+
+  private getWalletFiles() {
     this.apiService.getWalletFiles()
       .subscribe(
         response => {
@@ -29,7 +57,7 @@ export class LoginComponent implements OnInit {
               for (let wallet in this.wallets) {
                 this.wallets[wallet] = this.wallets[wallet].slice(0, -5);
               }
-              this.globalService.setCurrentWalletName(this.wallets[0]);
+              this.updateWalletFileDisplay(this.wallets[0]);
             } else {
               this.hasWallet = false;
             }
@@ -45,9 +73,7 @@ export class LoginComponent implements OnInit {
       );
   }
 
-  private onSubmit() {
-    let walletLoad = new WalletLoad(this.password, this.globalService.getWalletPath(), this.globalService.getCurrentWalletName());
-
+  private loadWallet(walletLoad: WalletLoad) {
     this.apiService.loadWallet(walletLoad)
       .subscribe(
         response => {
@@ -68,12 +94,4 @@ export class LoginComponent implements OnInit {
         }
       );
   }
-
-  private walletChanged(walletName: string) {
-    this.globalService.setCurrentWalletName(walletName);
-  }
-
-  private onCreateClicked() {
-    this.router.navigate(['/setup']);
-  }
 }