Commit 31db50fa authored by Pieterjan Vanhoof's avatar Pieterjan Vanhoof Committed by GitHub

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
parents 59e00306 9cc57b90
{ {
"create": "create":
{ {
"success": "true",
"mnemonic": "foo bar buz" "mnemonic": "foo bar buz"
}, },
"load": "load":
...@@ -10,7 +9,6 @@ ...@@ -10,7 +9,6 @@
}, },
"status": "status":
{ {
"success": "true",
"connectedNodeCount": "7", "connectedNodeCount": "7",
"maxConnextedNodeCount": "8", "maxConnextedNodeCount": "8",
"headerChainHeight": "1048", "headerChainHeight": "1048",
...@@ -22,14 +20,12 @@ ...@@ -22,14 +20,12 @@
}, },
"balance": "balance":
{ {
"success": "true",
"synced": "true", "synced": "true",
"confirmed": "0.144", "confirmed": "0.144",
"unconfirmed": "-6.23" "unconfirmed": "-6.23"
}, },
"history": "history":
{ {
"success": "true",
"history": "history":
[ [
{ {
...@@ -48,7 +44,6 @@ ...@@ -48,7 +44,6 @@
}, },
"receive": "receive":
{ {
"success": "true",
"addresses": "addresses":
[ [
"mzz63n3n89KVeHQXRqJEVsQX8MZj5zeqCw", "mzz63n3n89KVeHQXRqJEVsQX8MZj5zeqCw",
......
...@@ -26,6 +26,6 @@ ...@@ -26,6 +26,6 @@
<label>Mnemonic:</label> <label>Mnemonic:</label>
</div> </div>
<div> <div>
<label>{{body}}</label> <label>{{responseMessage}}</label>
</div> </div>
</div> </div>
\ No newline at end of file
...@@ -2,7 +2,7 @@ import { Component, Injectable } from '@angular/core'; ...@@ -2,7 +2,7 @@ import { Component, Injectable } from '@angular/core';
import { ApiService } from '../../shared/api/api.service'; import { ApiService } from '../../shared/api/api.service';
import { SafeCreation } from '../../shared/safe-creation'; import { WalletCreation } from '../../shared/wallet-creation';
import { Mnemonic } from '../../shared/mnemonic'; import { Mnemonic } from '../../shared/mnemonic';
@Component({ @Component({
...@@ -14,10 +14,11 @@ import { Mnemonic } from '../../shared/mnemonic'; ...@@ -14,10 +14,11 @@ import { Mnemonic } from '../../shared/mnemonic';
export class CreateComponent { export class CreateComponent {
constructor(private apiService: ApiService) {} constructor(private apiService: ApiService) {}
private newWallet: SafeCreation; private newWallet: WalletCreation;
private body: string; private responseMessage: string;
private createWallet(password: string, network: string, folderPath: string, name: string, ) { private createWallet(password: string, network: string, folderPath: string, name: string, ) {
this.newWallet = new WalletCreation();
this.newWallet.password = password; this.newWallet.password = password;
this.newWallet.network = network; this.newWallet.network = network;
this.newWallet.folderPath = folderPath; this.newWallet.folderPath = folderPath;
...@@ -25,8 +26,6 @@ export class CreateComponent { ...@@ -25,8 +26,6 @@ export class CreateComponent {
this.apiService this.apiService
.createWallet(this.newWallet) .createWallet(this.newWallet)
//.map(res => {let body = res.text()}) .subscribe((response: string) => this.responseMessage = response);
.subscribe((response: string) => this.body = response,
() => console.log("createWallet() complete from init"));
} }
} }
<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
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();
});
});
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
...@@ -2,9 +2,13 @@ import { NgModule } from '@angular/core'; ...@@ -2,9 +2,13 @@ import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router'; import { RouterModule, Routes } from '@angular/router';
import { SetupComponent } from './setup.component'; import { SetupComponent } from './setup.component';
import { CreateComponent } from './create/create.component';
import { RecoverComponent } from './recover/recover.component';
const routes: Routes = [ const routes: Routes = [
{ path: 'setup', component: SetupComponent } { path: 'setup', component: SetupComponent },
{ path: 'setup/create', component: CreateComponent },
{ path: 'setup/recover', component: RecoverComponent }
]; ];
@NgModule({ @NgModule({
......
<h1>Welcome to setup</h1> <h1>Welcome to Breeze. Looks like you're new here.</h1>
<create-component></create-component> <p>
\ No newline at end of file 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
import { Component } from '@angular/core'; import { Component } from '@angular/core';
import { Router } from '@angular/router';
@Component({ @Component({
selector: 'setup-component', selector: 'setup-component',
...@@ -6,5 +7,12 @@ import { Component } from '@angular/core'; ...@@ -6,5 +7,12 @@ import { Component } from '@angular/core';
styleUrls: ['./setup.component.css'], styleUrls: ['./setup.component.css'],
}) })
export class SetupComponent { export class SetupComponent {
constructor(private router: Router) {}
private createWallet() {
this.router.navigate(['/setup/create'])
}
private recoverWallet() {
this.router.navigate(['/setup/recover'])
}
} }
...@@ -9,6 +9,7 @@ import { CreateComponent } from './create/create.component'; ...@@ -9,6 +9,7 @@ import { CreateComponent } from './create/create.component';
import { SharedModule } from '../shared/shared.module'; import { SharedModule } from '../shared/shared.module';
import { SetupRoutingModule } from './setup-routing.module'; import { SetupRoutingModule } from './setup-routing.module';
import { RecoverComponent } from './recover/recover.component';
@NgModule({ @NgModule({
imports: [ imports: [
...@@ -19,7 +20,8 @@ import { SetupRoutingModule } from './setup-routing.module'; ...@@ -19,7 +20,8 @@ import { SetupRoutingModule } from './setup-routing.module';
], ],
declarations: [ declarations: [
CreateComponent, CreateComponent,
SetupComponent SetupComponent,
RecoverComponent
], ],
exports: [ SetupComponent ], exports: [ SetupComponent ],
providers: [] providers: []
......
...@@ -4,7 +4,8 @@ import { Observable } from 'rxjs/Observable'; ...@@ -4,7 +4,8 @@ import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map'; import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch'; import 'rxjs/add/operator/catch';
import { SafeCreation } from '../safe-creation'; import { WalletCreation } from '../wallet-creation';
import { WalletRecovery } from '../wallet-recovery';
import { Mnemonic } from '../mnemonic'; import { Mnemonic } from '../mnemonic';
/** /**
...@@ -15,16 +16,25 @@ import { Mnemonic } from '../mnemonic'; ...@@ -15,16 +16,25 @@ import { Mnemonic } from '../mnemonic';
export class ApiService { export class ApiService {
constructor(private http: Http) {}; 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'}); private headers = new Headers({'Content-Type': 'application/json'});
/** /**
* Create a new wallet. * Create a new wallet.
*/ */
createWallet(data: SafeCreation): Observable<any> { createWallet(data: WalletCreation): Observable<any> {
console.log(JSON.stringify(data));
return this.http 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()); .map(response => response.json());
} }
...@@ -43,7 +53,7 @@ export class ApiService { ...@@ -43,7 +53,7 @@ export class ApiService {
*/ */
getWalletStatus(): Observable<any> { getWalletStatus(): Observable<any> {
return this.http return this.http
.get(this.webApiUrl + '/wallet/status') .get(this.mockApiUrl + '/wallet/status')
.map((response:Response) => response.json()) .map((response:Response) => response.json())
.catch(this.handleError); .catch(this.handleError);
} }
......
export class SafeCreation { export class WalletCreation {
password: string; password: string;
network: string; network: string;
folderPath: string; folderPath: string;
......
export class WalletRecovery {
mnemonic: string;
password: string;
folderPath: string;
name: string;
network: string;
}
\ No newline at end of file
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Breeze</title> <title>Breeze</title>
<base href="/"> <base href="./">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
</head> </head>
<body> <body>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment