Change wallet detection, login and logout functionality (#28)

- Use /wallet/files to see if the user has created a wallet on the default path (instead of /wallet/status)
- Change load function to POST
- Added login and logout functionality
- Enabled wallet loading
- Various small fixes

Breeze.UI/db.json

 {
-    "create":
-    {
-        "mnemonic": "foo bar buz"
-    },
-    "load":
-    {
-        "success": "true"
+    "files": {
+        "walletsPath": "/home/dev0tion/Desktop/Wallets",
+        "walletsFiles": [
+            "myFirstWallet.json",
+            "mySecondWallet.json"
+        ]
     },
     "status":
     {

Breeze.UI/src/app/app-routing.module.ts

@@ -8,7 +8,7 @@ const routes: Routes = [
 ];
 
 @NgModule({
-  imports: [ RouterModule.forRoot(routes) ],
+  imports: [ RouterModule.forRoot(routes, {useHash: true}) ],
   exports: [ RouterModule ]
 })
 

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

@@ -15,25 +15,26 @@ export class AppComponent implements OnInit {
   private responseMessage: any;
 
   ngOnInit() {
-    this.checkWalletStatus();
+    this.router.navigate(['/login']);
+    //this.checkWalletStatus();
   }
 
-  private checkWalletStatus(){
-    this.apiService.getWalletStatus()
-      .subscribe(
-        response => {
-          if (response.status >= 200 && response.status < 400) {
-            this.responseMessage = response;
-            this.router.navigate(['/login']);
-          }
-        },
-        error => {
-          this.errorMessage = <any>error;
-          if (error.status === 400 || error.status === 404) {
-            this.router.navigate(['/setup']);
-            console.log(this.errorMessage);
-          }
-        }
-      );
-  }
+  // private checkWalletStatus(){
+  //   this.apiService.getWalletStatus()
+  //     .subscribe(
+  //       response => {
+  //         if (response.status >= 200 && response.status < 400) {
+  //           this.responseMessage = response;
+  //           this.router.navigate(['/login']);
+  //         }
+  //       },
+  //       error => {
+  //         this.errorMessage = <any>error;
+  //         if (error.status === 400 || error.status === 404) {
+  //           this.router.navigate(['/setup']);
+  //           console.log(this.errorMessage);
+  //         }
+  //       }
+  //     );
+  // }
 }
\ No newline at end of file

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

-<h1>Welcome back</h1>
-<p>Please enter your password to decrypt your wallet</p>
-<form (ngSubmit)="onSubmit()" #passwordForm="ngForm">
+<h1>Welcome to Breeze</h1>
+<div *ngIf="hasWallet">
+  <p>Choose the wallet you want to open:</p>
   <div class="form-group">
-    <label for="password">Your password: </label>
-    <input type="password" class="form-control" id="password" required name="password">
+    <label for="walletLabel">Wallet to open:</label>
+    <select name="wallet" #walletName (change)="walletChanged(walletName.value)">
+      <option *ngFor="let wallet of wallets" [value]="wallet">{{wallet}}</option>
+    </select>
   </div>
-  <button type="submit" class="btn btn-success">Decrypt</button>
-</form>
\ No newline at end of file
+  <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 *ngIf="hasWallet;else no_wallet">
+  <p> If you like to create or restore a wallet please click the button below.</p>
+</div>
+<ng-template #no_wallet>
+  <p> Looks like you're new here. Please create or restore a wallet.</p>
+</ng-template>
+
+<button type="button" (click)="clickedCreate()" class="btn btn-success">Create or restore wallet</button>
\ No newline at end of file

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

@@ -10,35 +10,80 @@ import { WalletLoad } from '../shared/wallet-load';
 })
 export class LoginComponent implements OnInit {
   constructor(private apiService: ApiService, private router: Router) { }
+
+  private walletLoad: WalletLoad;
+  private hasWallet: boolean = false;
+  private currentWalletName: string;
+  private wallets: [any];
+  private walletPath: string;
+  private password: string;
   
   private responseMessage: any;
   private errorMessage: any;
-  private walletLoad: WalletLoad;
+  
 
   ngOnInit() {
+    this.apiService.getWalletFiles()
+      .subscribe(
+        response => {
+          if (response.status >= 200 && response.status < 400) {
+            this.responseMessage=response;
+            this.wallets = response.json().walletsFiles;
+            this.walletPath = response.json().walletsPath;
+            if (this.wallets.length > 0) {
+              this.hasWallet = true;
+              this.currentWalletName = this.wallets[0].slice(0, -5);
+            } else {
+              this.hasWallet = false;
+            }
+          }
+        },
+        error => {
+          this.errorMessage = <any>error;
+          if (error.status >= 400) {
+            alert(this.errorMessage);
+            console.log(this.errorMessage);
+          }
+        }
+      );
   }
 
   private onSubmit() {
+
     this.walletLoad = new WalletLoad();
-    this.walletLoad.password = "123";
-    this.walletLoad.name = "test"
-    this.walletLoad.folderPath = "folderPath"
+    this.walletLoad.password = this.password;
+    this.walletLoad.name = this.currentWalletName;
+    this.walletLoad.folderPath = this.walletPath;
+
+    console.log(this.walletLoad);
 
     this.apiService.loadWallet(this.walletLoad)
       .subscribe(
         response => {
+          console.log(response);
           if (response.status >= 200 && response.status < 400) {
             this.responseMessage = response;
-            this.router.navigate['/wallet']
+            this.router.navigate(['/wallet']);
           }
         },
         error => {
           this.errorMessage = <any>error;
-          if (error.status >= 400) {
+          if (error.status === 403 && error.json().errors[0].message === "Wrong password, please try again.") {
+            alert("Wrong password, try again.");
+          } else if (error.status >= 400) {
             alert(this.errorMessage);
             console.log(this.errorMessage);
           }
         }
       );
   }
+
+  private walletChanged(walletName: string) {
+    let walletNameNoJson: string = walletName.slice(0, -5);
+    this.currentWalletName = walletNameNoJson;
+  }
+
+  private clickedCreate() {
+    this.router.navigate(['/setup']);
+  }
 }
\ No newline at end of file

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

@@ -31,7 +31,7 @@ export class CreateComponent {
       .subscribe(
         response => {
           if (response.status >= 200 && response.status < 400){
-            this.responseMessage = response;
+            this.responseMessage = response.json();
           }
         },
         error => {

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

-<h1>Welcome to Breeze. Looks like you're new here.</h1>
+<h1>Welcome to Breeze.</h1>
 <p>
   If you haven't used Breeze before, please create a new wallet.
 </p>

Breeze.UI/src/app/shared/api/api.service.ts

@@ -21,6 +21,15 @@ export class ApiService {
     private webApiUrl = 'http://localhost:5000/api/v1';
     private headers = new Headers({'Content-Type': 'application/json'});
 
+    /**
+     * Gets available wallets at the default path
+     */
+     getWalletFiles(): Observable<any> {
+        return this.http
+          .get(this.mockApiUrl + '/wallet/files')
+          .map((response: Response) => response);
+     }
+
     /**
      * Create a new wallet.
      */
@@ -44,7 +53,7 @@ export class ApiService {
      */
     loadWallet(data: WalletLoad): Observable<any> {
       return this.http
-        .get(this.webApiUrl + '/wallet/load/', {headers: this.headers, body: JSON.stringify(data)})
+        .post(this.webApiUrl + '/wallet/load/', JSON.stringify(data), {headers: this.headers})
         .map((response: Response) => response);
     }
 
@@ -62,7 +71,7 @@ export class ApiService {
      */
     getWalletBalance(): Observable<any> {
       return this.http
-        .get(this.webApiUrl + '/wallet/balance')
+        .get(this.mockApiUrl + '/wallet/balance')
         .map((response: Response) => response);
     }
 
@@ -71,7 +80,7 @@ export class ApiService {
      */
     getWalletHistory(): Observable<any> {
       return this.http
-        .get(this.webApiUrl + '/wallet/history')
+        .get(this.mockApiUrl + '/wallet/history')
         .map((response: Response) => response);
     }
 
@@ -80,9 +89,7 @@ export class ApiService {
      */
     getUnusedReceiveAddresses(): Observable<any> {
       return this.http
-        .get(this.webApiUrl + '/wallet/receive')
+        .get(this.mockApiUrl + '/wallet/receive')
         .map((response: Response) => response);
     }
-
-  }
 }

Breeze.UI/src/app/wallet/history/history.component.ts

@@ -23,7 +23,7 @@ export class HistoryComponent {
       .subscribe(
         response => {
           if (response.status >= 200 && response.status < 400) {
-            this.transactions = response.history;
+            this.transactions = response.json().history;
           }
         },
         error => {

Breeze.UI/src/app/wallet/menu/dashboard.component.ts

@@ -23,7 +23,7 @@ export class DashboardComponent {
             .subscribe(
                 response =>  {
                     if (response.status >= 200 && response.status < 400) {
-                        this.balanceResponse = response
+                        this.balanceResponse = response.json();
                         this.confirmedBalance = this.balanceResponse.confirmed;
                         this.unconfirmedBalance = this.balanceResponse.unconfirmed;
                     } 

Breeze.UI/src/app/wallet/menu/menu.component.html

@@ -6,6 +6,7 @@
             <li class="nav-item"><a class="nav-link" routerLink="send">Send</a></li>
             <li class="nav-item"><a class="nav-link" routerLink="receive">Receive</a></li>
             <li class="nav-item"><a class="nav-link" routerLink="history">History</a></li>
+            <li class="nav-item"><a class="nav-link" (click)="logOut()">Logout</a></li>
         </ul>
     </div>
 </nav>

Breeze.UI/src/app/wallet/menu/menu.component.ts

 import { Component } from '@angular/core';
+import { Router } from '@angular/router';
 
 @Component({
   selector: 'app-menu',
@@ -6,5 +7,9 @@ import { Component } from '@angular/core';
   styleUrls: ['./menu.component.css'],
 })
 export class MenuComponent {
+  constructor(private router: Router) {}
 
+  private logOut() {
+    this.router.navigate(['/login']);
+  }
 }

Breeze.UI/src/app/wallet/receive/receive.component.ts

@@ -23,7 +23,7 @@ export class ReceiveComponent {
       .subscribe(
         response => {
           if (response.status >= 200 && response.status < 400) {
-            this.addresses = response.addresses;
+            this.addresses = response.json().addresses;
           }
         },
         error => {

Breeze.UI/src/electron.live.js

@@ -15,7 +15,7 @@ let mainWindow = null;
 function createWindow () {
   setTimeout(() => {
     // Create the browser window.
-    mainWindow = new BrowserWindow({width: 1000, height: 600, frame: true, minWidth: 1000, minHeight: 600, icon: "./assets/images/stratis-tray.png"})
+    mainWindow = new BrowserWindow({width: 1000, height: 600, frame: true, minWidth: 1000, minHeight: 600, icon: "./src/assets/images/stratis-tray.png"})
 
     mainWindow.loadURL(url.format({
         pathname: 'localhost:4200',