Added components, adjust to latest API spec (#23)

- Added recovery component
- Adjusted setup component to choose between recovery or creation
- Updated mock data to reflect API spec
- Updated components to latest API spec
- Small fixes

Breeze.UI/db.json

 {
     "create":
     {
-        "success": "true",
         "mnemonic": "foo bar buz"
     },
     "load":
@@ -10,7 +9,6 @@
     },
     "status":
     {
-        "success": "true",
         "connectedNodeCount": "7",
         "maxConnextedNodeCount": "8",
         "headerChainHeight": "1048",
@@ -22,14 +20,12 @@
     },
     "balance": 
     {
-        "success": "true",
         "synced": "true",
         "confirmed": "0.144",
         "unconfirmed": "-6.23"
     },
     "history":
     {
-        "success": "true",
         "history": 
         [
             {
@@ -48,7 +44,6 @@
     },
     "receive":
     {
-        "success": "true",
         "addresses":
         [
             "mzz63n3n89KVeHQXRqJEVsQX8MZj5zeqCw",

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

@@ -26,6 +26,6 @@
   <label>Mnemonic:</label>
 </div>
 <div>
-  <label>{{body}}</label>
+  <label>{{responseMessage}}</label>
 </div>
 </div>
\ No newline at end of file

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

@@ -2,7 +2,7 @@ import { Component, Injectable } from '@angular/core';
 
 import { ApiService } from '../../shared/api/api.service';
 
-import { SafeCreation } from '../../shared/safe-creation';
+import { WalletCreation } from '../../shared/wallet-creation';
 import { Mnemonic } from '../../shared/mnemonic';
 
 @Component({
@@ -14,10 +14,11 @@ import { Mnemonic } from '../../shared/mnemonic';
 export class CreateComponent {
   constructor(private apiService: ApiService) {}
 
-  private newWallet: SafeCreation;
-  private body: string;
+  private newWallet: WalletCreation;
+  private responseMessage: string;
 
   private createWallet(password: string, network: string, folderPath: string, name: string, ) {
+    this.newWallet = new WalletCreation();
     this.newWallet.password = password;
     this.newWallet.network = network;
     this.newWallet.folderPath = folderPath;
@@ -25,8 +26,6 @@ export class CreateComponent {
 
     this.apiService
       .createWallet(this.newWallet)
-      //.map(res => {let body = res.text()})
-      .subscribe((response: string) => this.body = response,
-      () => console.log("createWallet() complete from init"));
+      .subscribe((response: string) => this.responseMessage = response);
   }
 }

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

+<h1>Recover your wallet</h1>
+<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>
+    <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

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

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { RecoverComponent } from './recover.component';
+
+describe('RecoverComponent', () => {
+  let component: RecoverComponent;
+  let fixture: ComponentFixture<RecoverComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ RecoverComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(RecoverComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

+import { Component, OnInit } from '@angular/core';
+import { ApiService } from '../../shared/api/api.service'
+import { WalletRecovery } from '../../shared/wallet-recovery'
+
+@Component({
+  selector: 'app-recover',
+  templateUrl: './recover.component.html',
+  styleUrls: ['./recover.component.css']
+})
+export class RecoverComponent implements OnInit {
+
+  constructor(private apiService: ApiService) { }
+  private walletRecovery: WalletRecovery;
+  private responseBody: string;
+
+  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;
+
+    this.apiService
+      .recoverWallet(this.walletRecovery)
+      .subscribe((response: string) => this.responseBody = response,
+      () => console.log("recoverWallet() completed"));
+  }
+}
\ No newline at end of file

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

@@ -2,9 +2,13 @@ import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 
 import { SetupComponent } from './setup.component';
+import { CreateComponent } from './create/create.component';
+import { RecoverComponent } from './recover/recover.component';
 
 const routes: Routes = [
-  { path: 'setup', component: SetupComponent }
+  { path: 'setup', component: SetupComponent },
+  { path: 'setup/create', component: CreateComponent },
+  { path: 'setup/recover', component: RecoverComponent }
 ];
 
 @NgModule({

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

-<h1>Welcome to setup</h1>
-<create-component></create-component>
\ No newline at end of file
+<h1>Welcome to Breeze. Looks like you're new here.</h1>
+<p>
+  If you haven't used Breeze before, please create a new wallet.
+</p>
+<p>
+  Users who have previously used Breeze, can choose to recover their wallet.
+</p>
+<button (click)="createWallet()">Create</button>
+<button (click)="recoverWallet()">Recover</button>
\ No newline at end of file

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

 import { Component } from '@angular/core';
+import { Router } from '@angular/router';
 
 @Component({
   selector: 'setup-component',
@@ -6,5 +7,12 @@ import { Component } from '@angular/core';
   styleUrls: ['./setup.component.css'],
 })
 export class SetupComponent {
+  constructor(private router: Router) {}
+  private createWallet() {
+    this.router.navigate(['/setup/create'])
+  }
 
+  private recoverWallet() {
+    this.router.navigate(['/setup/recover'])
+  }
 }

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

@@ -9,6 +9,7 @@ import { CreateComponent } from './create/create.component';
 import { SharedModule } from '../shared/shared.module';
 
 import { SetupRoutingModule } from './setup-routing.module';
+import { RecoverComponent } from './recover/recover.component';
 
 @NgModule({
   imports: [
@@ -19,7 +20,8 @@ import { SetupRoutingModule } from './setup-routing.module';
   ],
   declarations: [
     CreateComponent,
-    SetupComponent
+    SetupComponent,
+    RecoverComponent
   ],
   exports: [ SetupComponent ],
   providers: []

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

@@ -4,7 +4,8 @@ import { Observable } from 'rxjs/Observable';
 import 'rxjs/add/operator/map';
 import 'rxjs/add/operator/catch';
 
-import { SafeCreation } from '../safe-creation';
+import { WalletCreation } from '../wallet-creation';
+import { WalletRecovery } from '../wallet-recovery';
 import { Mnemonic } from '../mnemonic';
 
 /**
@@ -15,16 +16,25 @@ import { Mnemonic } from '../mnemonic';
 export class ApiService {
     constructor(private http: Http) {};
 
-    private webApiUrl = 'http://localhost:3000/api/v1';
+    private mockApiUrl = 'http://localhost:3000/api/v1';
+    private webApiUrl = 'http://localhost:5000/api/v1';
     private headers = new Headers({'Content-Type': 'application/json'});
 
     /**
      * Create a new wallet.
      */
-    createWallet(data: SafeCreation): Observable<any> {
-      console.log(JSON.stringify(data));
+    createWallet(data: WalletCreation): Observable<any> {
       return this.http
-        .post(this.webApiUrl + 'api/safe', JSON.stringify(data), {headers: this.headers})
+        .post(this.webApiUrl + '/wallet/create/', JSON.stringify(data), {headers: this.headers})
+        .map(response => response.json());
+    }
+
+    /**
+     * Recover a wallet.
+     */
+    recoverWallet(data: WalletRecovery): Observable<any> {
+      return this.http
+        .post(this.webApiUrl + '/wallet/recover/', JSON.stringify(data), {headers: this.headers})
         .map(response => response.json());
     }
 
@@ -43,7 +53,7 @@ export class ApiService {
      */
     getWalletStatus(): Observable<any> {
       return this.http
-        .get(this.webApiUrl + '/wallet/status')
+        .get(this.mockApiUrl + '/wallet/status')
         .map((response:Response) => response.json())
         .catch(this.handleError);
     }

Breeze.UI/src/app/shared/safe-creation.ts → Breeze.UI/src/app/shared/wallet-creation.ts

-export class SafeCreation {
+export class WalletCreation {
   password: string;
   network: string;
   folderPath: string;

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

+export class WalletRecovery {
+  mnemonic: string;
+  password: string;
+  folderPath: string;
+  name: string;
+  network: string;
+}
\ No newline at end of file

Breeze.UI/src/index.html

@@ -3,7 +3,7 @@
 <head>
   <meta charset="utf-8">
   <title>Breeze</title>
-  <base href="/">
+  <base href="./">
   <meta name="viewport" content="width=device-width, initial-scale=1">
 </head>
 <body>