Commit 86d060a2 authored by Pieterjan Vanhoof's avatar Pieterjan Vanhoof Committed by GitHub

Merge pull request #51 from stratisproject/ui

- Show five transactions on dashboard
- Add wallet recovery option (with date picker)
parents 1ee990f6 48998d5c
...@@ -33,6 +33,7 @@ ...@@ -33,6 +33,7 @@
"@angular/platform-browser-dynamic": "^4.1.2", "@angular/platform-browser-dynamic": "^4.1.2",
"@angular/platform-server": "^4.1.2", "@angular/platform-server": "^4.1.2",
"@angular/router": "^4.1.2", "@angular/router": "^4.1.2",
"angular2-material-datepicker": "^0.5.0",
"bootstrap": "^4.0.0-alpha.6", "bootstrap": "^4.0.0-alpha.6",
"core-js": "^2.4.1", "core-js": "^2.4.1",
"rxjs": "^5.4.0", "rxjs": "^5.4.0",
......
...@@ -2,6 +2,7 @@ import { NgModule } from '@angular/core'; ...@@ -2,6 +2,7 @@ import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser'; import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from "@angular/forms"; import { FormsModule, ReactiveFormsModule } from "@angular/forms";
import { HttpModule } from '@angular/http'; import { HttpModule } from '@angular/http';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { SharedModule } from './shared/shared.module'; import { SharedModule } from './shared/shared.module';
...@@ -18,6 +19,7 @@ import { GlobalService } from './shared/services/global.service'; ...@@ -18,6 +19,7 @@ import { GlobalService } from './shared/services/global.service';
imports: [ imports: [
AppRoutingModule, AppRoutingModule,
BrowserModule, BrowserModule,
BrowserAnimationsModule,
ReactiveFormsModule, ReactiveFormsModule,
FormsModule, FormsModule,
HttpModule, HttpModule,
......
<h1>Recover your wallet</h1> <div class="container">
<p> <div class="row">
Welcome, please complete the form below to recover your wallet. <div class="col">
</p> <h1>Recover your wallet</h1>
<form [formGroup]="recoverWalletForm" (ngSubmit)="onRecoverClicked()"> </div>
<div class="form-group">
<label>Mnemonic:</label>
<input class="form-control" formControlName="walletMnemonic" type="text" placeholder="Enter your saved mnemonic.">
</div> </div>
<div class="form-group"> <div class="row">
<label>Wallet password: </label> <div class="col">
<input class="form-control" type="password" formControlName="walletPassword" placeholder="Enter password here."> <p>Welcome, please complete the form below to recover your wallet.</p>
</div>
</div> </div>
<div class="form-group"> <div class="row">
<label>Name:</label> <div class="col">
<input class="form-control" formControlName="walletName" type="text" placeholder="Enter a name for your wallet."> <form [formGroup]="recoverWalletForm" (ngSubmit)="onRecoverClicked()">
<div class="form-group">
<label>Mnemonic:</label>
<input class="form-control" formControlName="walletMnemonic" type="text" placeholder="Enter your saved mnemonic.">
</div>
<div class="form-group">
<label>Wallet password: </label>
<input class="form-control" type="password" formControlName="walletPassword" placeholder="Enter password here.">
</div>
<div class="form-group">
<label>Name:</label>
<input class="form-control" formControlName="walletName" type="text" placeholder="Enter a name for your wallet.">
</div>
<div class="form-group">
<label>Network:</label>
<select name="network" formControlName="selectNetwork">
<option value="main">Main</option>
<option value="test">Testnet</option>
</select>
</div>
<div class="form-group">
<label>Creation date:</label>
<material-datepicker [(date)]="creationDate"></material-datepicker>
</div>
<div class="form-group">
<button type="submit" [disabled]="!recoverWalletForm.valid" class="btn btn-success">Recover Wallet</button>
</div>
<div class="form-group">
<button type="button" class="btn btn-success" (click)="onBackClicked()">Back</button>
</div>
</form>
</div>
</div> </div>
<div class="form-group"> </div>
<label>Network:</label>
<select name="network" formControlName="selectNetwork">
<option value="main">Main</option>
<option value="test">Testnet</option>
</select>
</div>
<div class="form-group">
<button type="submit" [disabled]="!recoverWalletForm.valid" class="btn btn-success">Recover Wallet</button>
</div>
<div class="form-group">
<button type="button" class="btn btn-success" (click)="onBackClicked()">Back</button>
</div>
</form>
...@@ -24,6 +24,7 @@ export class RecoverComponent implements OnInit { ...@@ -24,6 +24,7 @@ export class RecoverComponent implements OnInit {
} }
private recoverWalletForm: FormGroup; private recoverWalletForm: FormGroup;
private creationDate: Date;
private walletRecovery: WalletRecovery; private walletRecovery: WalletRecovery;
private responseMessage: string; private responseMessage: string;
...@@ -42,7 +43,8 @@ export class RecoverComponent implements OnInit { ...@@ -42,7 +43,8 @@ export class RecoverComponent implements OnInit {
this.recoverWalletForm.get("walletPassword").value, this.recoverWalletForm.get("walletPassword").value,
this.recoverWalletForm.get("selectNetwork").value, this.recoverWalletForm.get("selectNetwork").value,
this.globalService.getWalletPath(), this.globalService.getWalletPath(),
this.recoverWalletForm.get("walletName").value this.recoverWalletForm.get("walletName").value,
this.creationDate
); );
this.recoverWallet(this.walletRecovery); this.recoverWallet(this.walletRecovery);
} }
......
import { CommonModule } from '@angular/common'; import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core'; import { NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms'; import { ReactiveFormsModule } from '@angular/forms';
import { DatepickerModule } from 'angular2-material-datepicker'
import { SetupComponent } from './setup.component'; import { SetupComponent } from './setup.component';
import { CreateComponent } from './create/create.component'; import { CreateComponent } from './create/create.component';
...@@ -13,6 +14,7 @@ import { RecoverComponent } from './recover/recover.component'; ...@@ -13,6 +14,7 @@ import { RecoverComponent } from './recover/recover.component';
@NgModule({ @NgModule({
imports: [ imports: [
CommonModule, CommonModule,
DatepickerModule,
ReactiveFormsModule, ReactiveFormsModule,
SetupRoutingModule, SetupRoutingModule,
SharedModule.forRoot() SharedModule.forRoot()
......
export class WalletRecovery { export class WalletRecovery {
constructor(mnemonic: string, password: string, network:string, folderPath: string, name: string) { constructor(mnemonic: string, password: string, network:string, folderPath: string, walletName: string, creationDate: Date) {
this.mnemonic = mnemonic; this.mnemonic = mnemonic;
this.password = password; this.password = password;
this.network = network; this.network = network;
this.folderPath = folderPath; this.folderPath = folderPath;
this.name = name; this.name = walletName;
this.creationDate = creationDate;
} }
mnemonic: string; mnemonic: string;
...@@ -13,4 +14,5 @@ export class WalletRecovery { ...@@ -13,4 +14,5 @@ export class WalletRecovery {
folderPath: string; folderPath: string;
name: string; name: string;
network: string; network: string;
creationDate: Date;
} }
...@@ -8,6 +8,12 @@ ...@@ -8,6 +8,12 @@
<div>Current Value</div> <div>Current Value</div>
<div>Over 9000</div> <div>Over 9000</div>
</div> </div>
<div class="col">
<div>
<button (click)="openSendDialog()" class="btn">SEND</button>
<button (click)="openReceiveDialog()" class="btn">RECEIVE</button>
</div>
</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col"> <div class="col">
...@@ -20,17 +26,15 @@ ...@@ -20,17 +26,15 @@
<th>Transaction ID</th> <th>Transaction ID</th>
</thead> </thead>
<tr *ngFor="let transaction of transactions; let i=index"> <tr *ngFor="let transaction of transactions; let i=index">
<div *ngIf="i<5"> <!--<td *ngIf="{{ transaction.amount }} < 0">SENT</td>
<!--<td *ngIf="{{ transaction.amount }} < 0; else received">SENT</td> <td *ngIf="{{ transaction.amount }} > 0">RECEIVED</td>-->
<td #received>RECEIVED</td>--> <td *ngIf="i<5">{{ transaction.timestamp }}</td>
<td>{{ transaction.timestamp }}</td> <td *ngIf="i<5">{{ transaction.amount }}</td>
<td>{{ transaction.amount }}</td> <td *ngIf="i<5">{{ transaction.confirmed }}</td>
<td>{{ transaction.confirmed }}</td> <td *ngIf="i<5">{{ transaction.txId }}</td>
<td>{{ transaction.txId }}</td>
</div>
</tr> </tr>
</table> </table>
<ng-template #noTransactions>Looks like you haven't had any transactions yet</ng-template> <ng-template #noTransactions>Looks like you haven't made any transactions yet</ng-template>
</div> </div>
</div> </div>
</div> </div>
...@@ -23,6 +23,14 @@ export class DashboardComponent { ...@@ -23,6 +23,14 @@ export class DashboardComponent {
this.getHistory(); this.getHistory();
}; };
private openSendDialog() {
};
private openReceiveDialog() {
};
private getWalletBalance() { private getWalletBalance() {
let walletInfo = new WalletInfo(this.globalService.getWalletName(), this.globalService.getCoinType()) let walletInfo = new WalletInfo(this.globalService.getWalletName(), this.globalService.getCoinType())
this.apiService.getWalletBalance(walletInfo) this.apiService.getWalletBalance(walletInfo)
......
...@@ -14,7 +14,7 @@ let mainWindow = null; ...@@ -14,7 +14,7 @@ let mainWindow = null;
function createWindow () { function createWindow () {
// Create the browser window. // 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: 1200, height: 700, frame: true, minWidth: 1200, minHeight: 700, icon: "./assets/images/stratis-tray.png"})
// and load the index.html of the app. // and load the index.html of the app.
mainWindow.loadURL(url.format({ mainWindow.loadURL(url.format({
......
...@@ -15,7 +15,7 @@ let mainWindow = null; ...@@ -15,7 +15,7 @@ let mainWindow = null;
function createWindow () { function createWindow () {
setTimeout(() => { setTimeout(() => {
// Create the browser window. // Create the browser window.
mainWindow = new BrowserWindow({width: 1000, height: 600, frame: true, minWidth: 1000, minHeight: 600, icon: "./src/assets/images/stratis-tray.png"}) mainWindow = new BrowserWindow({width: 1200, height: 700, frame: true, minWidth: 1200, minHeight: 700, icon: "./src/assets/images/stratis-tray.png"})
mainWindow.loadURL(url.format({ mainWindow.loadURL(url.format({
pathname: 'localhost:4200', pathname: 'localhost:4200',
......
...@@ -4,6 +4,7 @@ ...@@ -4,6 +4,7 @@
<meta charset="utf-8"> <meta charset="utf-8">
<title>Breeze</title> <title>Breeze</title>
<base href="./"> <base href="./">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
</head> </head>
<body> <body>
......
/* You can add global styles to this file, and also import other style files */ /* You can add global styles to this file, and also import other style files */
* {
font-family: "Lato";
}
.content-wrapper { .content-wrapper {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
\ No newline at end of file
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