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":
{
"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",
......
......@@ -26,6 +26,6 @@
<label>Mnemonic:</label>
</div>
<div>
<label>{{body}}</label>
<label>{{responseMessage}}</label>
</div>
</div>
\ No newline at end of file
......@@ -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);
}
}
<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';
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({
......
<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
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'])
}
}
......@@ -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: []
......
......@@ -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);
}
......
export class SafeCreation {
export class WalletCreation {
password: string;
network: 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 @@
<head>
<meta charset="utf-8">
<title>Breeze</title>
<base href="/">
<base href="./">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<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