Add login component (#16)

- Added login component
- Use temporary navigation (based on success parameter in the body)
Todo: use HTTP Status

Breeze.UI/db.json

 {
+    "create":
+    {
+        "success": "true",
+        "mnemonic": "foo bar buz"
+    },
+    "load":
+    {
+        "success": "true"
+    },
     "status":
     {
         "success": "true",

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

 import { NgModule }             from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 
+import { LoginComponent } from './login/login.component';
+
 const routes: Routes = [
-  
+  { path: 'login', component: LoginComponent}
 ];
 
 @NgModule({

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

@@ -24,15 +24,18 @@ export class AppComponent implements OnInit {
   private checkWalletStatus(){
     this.apiService.getWalletStatus()
       .subscribe(
-        response => this.response = response.success,
-        error => this.errorMessage = <any>error
+        response => this.response = response,
+        error => this.errorMessage = <any>error,
+        () => this.navigate()
       );
+  }
 
-    if (this.response = "true") {
+  private navigate() {
+    if (this.response.success === "true") {
       // remote.dialog.showMessageBox({message: remote.app.getPath('userData')})
-      this.router.navigateByUrl('/wallet')
+      this.router.navigate(['/login'])
     } else {
-      this.router.navigateByUrl('/setup')
+      this.router.navigate(['/setup'])
     }
   }
 

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

@@ -9,12 +9,14 @@ import { SharedModule } from './shared/shared.module';
 import { AppRoutingModule } from './app-routing.module';
 
 import { AppComponent } from './app.component';
+import { LoginComponent } from './login/login.component';
 
 import { ApiService } from './shared/api/api.service';
 
 
 @NgModule({
   imports: [
+    
     AppRoutingModule,
     BrowserModule,
     HttpModule,
@@ -23,7 +25,8 @@ import { ApiService } from './shared/api/api.service';
     SharedModule.forRoot()
   ],
   declarations: [
-    AppComponent
+    AppComponent,
+    LoginComponent
   ],
   providers: [ ApiService ],
   bootstrap: [ AppComponent ]

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">
+  <div class="form-group">
+    <label for="password">Your password: </label>
+    <input type="password" class="form-control" id="password" required name="password">
+  </div>
+  <button type="submit" class="btn btn-success">Decrypt</button>
+</form>
\ No newline at end of file

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

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

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

+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { ApiService } from '../shared/api/api.service';
+
+@Component({
+  selector: 'app-login',
+  templateUrl: './login.component.html',
+  styleUrls: ['./login.component.css']
+})
+export class LoginComponent implements OnInit {
+  constructor(private apiService: ApiService, private router: Router) { }
+  
+  private response: any;
+  private errorMessage: string;
+
+  ngOnInit() {
+  }
+
+  private onSubmit() {
+    this.apiService.loadWallet("123")
+      .subscribe(
+        response => this.response = response,
+        error => this.errorMessage = error,
+        () => this.loadWallet()
+      );
+  }
+
+  private loadWallet() {
+    if (this.response.success === "true") {
+      this.router.navigate(['/wallet/send']);
+
+    } else {
+      alert("Something went wrong.")
+    }
+  }
+}

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

@@ -7,6 +7,10 @@ import 'rxjs/add/operator/catch';
 import { SafeCreation } from '../safe-creation';
 import { Mnemonic } from '../mnemonic';
 
+/**
+ * For information on the API specification have a look at our Github:
+ * https://github.com/stratisproject/Breeze/blob/master/Breeze.Documentation/ApiSpecification.md
+ */
 @Injectable()
 export class ApiService {
     constructor(private http: Http) {};
@@ -14,13 +18,29 @@ export class ApiService {
     private webApiUrl = 'http://localhost:3000/api/v1';
     private headers = new Headers({'Content-Type': 'application/json'});
 
-    isConnected(): Observable<any> {
+    /**
+     * Create a new wallet.
+     */
+    createWallet(data: SafeCreation): Observable<any> {
+      console.log(JSON.stringify(data));
       return this.http
-        .get(this.webApiUrl + '/safe/connected')
-        .map((response:Response) => response.json())
+        .post(this.webApiUrl + 'api/safe', JSON.stringify(data), {headers: this.headers})
+        .map(response => response.json());
+    }
+
+    /**
+     * Load a wallet
+     */
+    loadWallet(password: string): Observable<any> {
+      return this.http
+        .get(this.webApiUrl + '/wallet/load/', {headers: this.headers, body: JSON.stringify(password)})
+        .map(response => response.json())
         .catch(this.handleError);
     }
 
+    /**
+     * Get wallet status info from the API.
+     */
     getWalletStatus(): Observable<any> {
       return this.http
         .get(this.webApiUrl + '/wallet/status')
@@ -28,6 +48,9 @@ export class ApiService {
         .catch(this.handleError);
     }
 
+    /**
+     * Get wallet balance info from the API. 
+     */
     getWalletBalance(): Observable<any> {
       return this.http
         .get(this.webApiUrl + '/wallet/balance')
@@ -35,6 +58,9 @@ export class ApiService {
         .catch(this.handleError);
     }
 
+    /**
+     * Get a wallets transaction history info from the API.
+     */
     getWalletHistory(): Observable<any> {
       return this.http
         .get(this.webApiUrl + '/wallet/history')
@@ -42,20 +68,20 @@ export class ApiService {
         .catch(this.handleError);
     }
 
+    /**
+     * Get unused receive addresses for a certain wallet from the API.
+     */
     getUnusedReceiveAddresses(): Observable<any> {
       return this.http
         .get(this.webApiUrl + '/wallet/receive')
         .map((response:Response) => response.json())
         .catch(this.handleError);
     }
-
-    createWallet(data: SafeCreation): Observable<any> {
-      console.log(JSON.stringify(data));
-      return this.http
-        .post(this.webApiUrl + 'api/safe', JSON.stringify(data), {headers: this.headers})
-        .map(response => response.json());
-    }
-
+    
+    /**
+     * Handle errors from the API.
+     * @param error 
+     */
     private handleError (error: Response | any) {
     let errMsg: string;
     if (error instanceof Response) {

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

 <div class="content-wrapper">
-    <h1>Send</h1>
-    <form (ngSubmit)="onSubmit()" #sendForm="ngForm">
+  <h1>Send</h1>
+  <form (ngSubmit)="onSubmit()" #sendForm="ngForm">
       <div class="form-group">
         <label for="toAddress">Pay To: </label>
         <input type="text" class="form-control" id="name" required name="toAddress">
@@ -10,5 +10,5 @@
         <input type="text" class="form-control" id="amount" required name="amount">
       </div>
       <button type="submit" class="btn btn-success">Submit</button>
-    </form>
+  </form>
 </div>
\ No newline at end of file

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

@@ -27,7 +27,7 @@ import { WalletRoutingModule } from './wallet-routing.module';
     DashboardComponent,
     ReceiveComponent,
     SendComponent,
-    HistoryComponent,
+    HistoryComponent
   ],
   exports: [
     WalletComponent

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>