Add generic modal for error handling and interaction

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

@@ -12,9 +12,11 @@ import { AppRoutingModule } from './app-routing.module';
 
 import { AppComponent } from './app.component';
 import { LoginComponent } from './login/login.component';
+import { GenericModalComponent } from './shared/components/generic-modal/generic-modal.component';
 
 import { ApiService } from './shared/services/api.service';
 import { GlobalService } from './shared/services/global.service';
+import { ModalService } from './shared/services/modal.service';
 
 import { SendComponent } from './wallet/send/send.component';
 import { SendConfirmationComponent } from './wallet/send/send-confirmation/send-confirmation.component';
@@ -37,6 +39,7 @@ import { LogoutConfirmationComponent } from './wallet/logout-confirmation/logout
   ],
   declarations: [
     AppComponent,
+    GenericModalComponent,
     LoginComponent,
     LogoutConfirmationComponent,
     SendComponent,
@@ -45,13 +48,14 @@ import { LogoutConfirmationComponent } from './wallet/logout-confirmation/logout
     TransactionDetailsComponent
   ],
   entryComponents: [
+    GenericModalComponent,
     SendComponent,
     SendConfirmationComponent,
     ReceiveComponent,
     TransactionDetailsComponent,
     LogoutConfirmationComponent
   ],
-  providers: [ ApiService, GlobalService, Title ],
+  providers: [ ApiService, GlobalService, ModalService, Title ],
   bootstrap: [ AppComponent ]
 })
 

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

@@ -4,6 +4,8 @@ import { Router } from '@angular/router';
 
 import { GlobalService } from '../shared/services/global.service';
 import { ApiService } from '../shared/services/api.service';
+import { ModalService } from '../shared/services/modal.service';
+
 import { WalletLoad } from '../shared/classes/wallet-load';
 
 @Component({
@@ -13,7 +15,7 @@ import { WalletLoad } from '../shared/classes/wallet-load';
 })
 
 export class LoginComponent implements OnInit {
-  constructor(private globalService: GlobalService, private apiService: ApiService, private router: Router, private fb: FormBuilder) {
+  constructor(private globalService: GlobalService, private apiService: ApiService, private genericModalService: ModalService, private router: Router, private fb: FormBuilder) {
     this.buildDecryptForm();
   }
 
@@ -84,13 +86,13 @@ export class LoginComponent implements OnInit {
         },
         error => {
           if (error.status === 0) {
-            alert("Something went wrong while connecting to the API. Please restart the application.");
+            this.genericModalService.openModal(null, null);
           } else if (error.status >= 400) {
             if (!error.json().errors[0]) {
               console.log(error);
             }
             else {
-              alert(error.json().errors[0].message);
+              this.genericModalService.openModal(null, error.json().errors[0].message);
             }
           }
         }
@@ -137,13 +139,13 @@ export class LoginComponent implements OnInit {
         error => {
           this.isDecrypting = false;
           if (error.status === 0) {
-            alert("Something went wrong while connecting to the API. Please restart the application.");
+            this.genericModalService.openModal(null, null);
           } else if (error.status >= 400) {
             if (!error.json().errors[0]) {
               console.log(error);
             }
             else {
-              alert(error.json().errors[0].message);
+              this.genericModalService.openModal(null, error.json().errors[0].message);
             }
           }
         },
@@ -164,13 +166,13 @@ export class LoginComponent implements OnInit {
         error => {
           this.isDecrypting = false;
           if (error.status === 0) {
-            alert("Something went wrong while connecting to the API. Please restart the application.");
+            this.genericModalService.openModal(null, null);
           } else if (error.status >= 400) {
             if (!error.json().errors[0]) {
               console.log(error);
             }
             else {
-              alert(error.json().errors[0].message);
+              this.genericModalService.openModal(null, error.json().errors[0].message);
             }
           }
         }

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

@@ -4,6 +4,7 @@ import { Router } from '@angular/router';
 
 import { GlobalService } from '../../shared/services/global.service';
 import { ApiService } from '../../shared/services/api.service';
+import { ModalService } from '../../shared/services/modal.service';
 
 import { PasswordValidationDirective } from '../../shared/directives/password-validation.directive';
 
@@ -17,7 +18,7 @@ import { Mnemonic } from '../../shared/classes/mnemonic';
 })
 
 export class CreateComponent implements OnInit {
-  constructor(private globalService: GlobalService, private apiService: ApiService, private router: Router, private fb: FormBuilder) {
+  constructor(private globalService: GlobalService, private apiService: ApiService, private genericModalService: ModalService, private router: Router, private fb: FormBuilder) {
     this.buildCreateForm();
   }
 
@@ -125,13 +126,13 @@ export class CreateComponent implements OnInit {
         error => {
           console.log(error);
           if (error.status === 0) {
-            alert("Something went wrong while connecting to the API. Please restart the application.");
+            this.genericModalService.openModal(null, null);
           } else if (error.status >= 400) {
             if (!error.json().errors[0]) {
               console.log(error);
             }
             else {
-              alert(error.json().errors[0].message);
+              this.genericModalService.openModal(null, error.json().errors[0].message);
             }
           }
         }
@@ -152,13 +153,13 @@ export class CreateComponent implements OnInit {
           console.log(error);
           this.isCreating = false;
           if (error.status === 0) {
-            alert("Something went wrong while connecting to the API. Please restart the application.");
+            this.genericModalService.openModal(null, null);
           } else if (error.status >= 400) {
             if (!error.json().errors[0]) {
               console.log(error);
             }
             else {
-              alert(error.json().errors[0].message);
+              this.genericModalService.openModal(null, error.json().errors[0].message);
             }
           }
         },
@@ -173,7 +174,8 @@ export class CreateComponent implements OnInit {
       .subscribe(
         response => {
           if (response.status >= 200 && response.status < 400){
-            alert("Your wallet has been created.\n\nPlease write down your 12 word passphrase: \n" + this.mnemonic + "\n\nYou can recover your wallet on any computer with:\n- your passphrase AND\n- your password AND\n- the wallet creation time\n\nUnlike most other wallets if an attacker acquires your passphrase, it will not be able to hack your wallet without knowing your password. On the contrary, unlike other wallets, you will not be able to recover your wallet only with your passphrase if you lose your password.");
+            let walletBody = "Your wallet has been created.<br><br>Please write down your 12 word passphrase: <br>" + this.mnemonic + "<br><br>You can recover your wallet on any computer with:<br>- your passphrase AND<br>- your password AND<br>- the wallet creation time<br><br>Unlike most other wallets if an attacker acquires your passphrase, it will not be able to hack your wallet without knowing your password. On the contrary, unlike other wallets, you will not be able to recover your wallet only with your passphrase if you lose your password.";
+            this.genericModalService.openModal("Wallet Info", walletBody);
             this.router.navigate(['']);
           }
         },
@@ -181,13 +183,13 @@ export class CreateComponent implements OnInit {
           this.isCreating = false;
           console.log(error);
           if (error.status === 0) {
-            alert("Something went wrong while connecting to the API. Please restart the application.");
+            this.genericModalService.openModal(null, null);
           } else if (error.status >= 400) {
             if (!error.json().errors[0]) {
               console.log(error);
             }
             else {
-              alert(error.json().errors[0].message);
+              this.genericModalService.openModal(null, error.json().errors[0].message);
             }
           }
         }

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

@@ -5,6 +5,7 @@ import { BsDatepickerConfig } from 'ngx-bootstrap/datepicker';
 
 import { GlobalService } from '../../shared/services/global.service';
 import { ApiService } from '../../shared/services/api.service';
+import { ModalService } from '../../shared/services/modal.service';
 
 import { WalletRecovery } from '../../shared/classes/wallet-recovery';
 
@@ -15,7 +16,7 @@ import { WalletRecovery } from '../../shared/classes/wallet-recovery';
 })
 export class RecoverComponent implements OnInit {
 
-  constructor(private globalService: GlobalService, private apiService: ApiService, private router: Router, private fb: FormBuilder) {
+  constructor(private globalService: GlobalService, private apiService: ApiService, private genericModalService: ModalService, private router: Router, private fb: FormBuilder) {
     this.buildRecoverForm();
   }
 
@@ -128,7 +129,7 @@ export class RecoverComponent implements OnInit {
           this.isRecovering = false;
           console.log(error);
           if (error.status === 0) {
-            alert("Something went wrong while connecting to the API. Please restart the application.");
+            this.genericModalService.openModal(null, null);
           } else if (error.status >= 400) {
             if (!error.json().errors[0]) {
               console.log(error);
@@ -150,7 +151,8 @@ export class RecoverComponent implements OnInit {
       .subscribe(
         response => {
           if (response.status >= 200 && response.status < 400) {
-            alert("Your wallet has been recovered. \nYou will be redirected to the decryption page.");
+            let body = "Your wallet has been recovered. \nYou will be redirected to the decryption page.";
+            this.genericModalService.openModal("Wallet Recovered", body);
             this.router.navigate([''])
           }
             this.AlertIfNeeded(bitcoinErrorMessage, stratisErrorMessage);
@@ -159,7 +161,7 @@ export class RecoverComponent implements OnInit {
           this.isRecovering = false;
           console.log(error);
           if (error.status === 0) {
-            alert("Something went wrong while connecting to the API. Please restart the application.");
+            this.genericModalService.openModal(null, null);
           } else if (error.status >= 400) {
             if (!error.json().errors[0]) {
               console.log(error);
@@ -177,7 +179,7 @@ export class RecoverComponent implements OnInit {
   private AlertIfNeeded(bitcoinErrorMessage: string, stratisErrorMessage: string) {
         if(bitcoinErrorMessage !== "" || stratisErrorMessage !== "") {
           let errorMessage = "Bitcoin wallet recovery:\n" + bitcoinErrorMessage + "\n\nStratis wallet recovery:\n" + stratisErrorMessage;
-          alert(errorMessage);
+          this.genericModalService.openModal(null, errorMessage);
     }
   }
 }

Breeze.UI/src/app/shared/components/generic-modal/generic-modal.component.html

+<div id="modalGeneric" tabindex="-1">
+    <div class="modal-dialog modalBg">
+      <div>
+        <div class="modal-header">
+          <div class="bubble"><i class="icon-download"></i></div>
+        </div>
+        <div class="modal-body">
+          <h5 class="modal-title text-uppercase" id="modalReceive">{{ title }}</h5>
+          <div [innerHTML]="body">
+
+          </div>
+        </div>
+        <div class="modal-footer">
+          <button type="button" class="btn btn-lg btn-primary" (click)="activeModal.close('Close click')">OK</button>
+        </div>
+      </div>
+    </div>
+  </div>

Breeze.UI/src/app/shared/components/generic-modal/generic-modal.component.spec.ts

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

Breeze.UI/src/app/shared/components/generic-modal/generic-modal.component.ts

+import { Component, OnInit, Input } from '@angular/core';
+
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
+
+@Component({
+  selector: 'app-generic-modal',
+  templateUrl: './generic-modal.component.html',
+  styleUrls: ['./generic-modal.component.css']
+})
+export class GenericModalComponent implements OnInit {
+
+  @Input() public title: string = "Something went wrong";
+  @Input() public body: string = "Something went wrong while connecting to the API. Please restart the application.";
+
+  constructor(public activeModal: NgbActiveModal) {}
+
+  ngOnInit() {
+  }
+}

Breeze.UI/src/app/shared/services/modal.service.ts

+import {Injectable} from "@angular/core";
+
+import { NgbModal, NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
+
+import { GenericModalComponent } from '../components/generic-modal/generic-modal.component';
+
+@Injectable()
+export class ModalService {
+  constructor(private modalService: NgbModal) {}
+
+  public openModal(title, body) {
+    const modalRef = this.modalService.open(GenericModalComponent)
+    if (title) {
+      modalRef.componentInstance.title = title;
+    }
+
+    if (body) {
+      modalRef.componentInstance.body = body;
+    }
+  }
+}

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

@@ -3,6 +3,7 @@ import { NgbModal, NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
 
 import { ApiService } from '../../shared/services/api.service';
 import { GlobalService } from '../../shared/services/global.service';
+import { ModalService } from '../../shared/services/modal.service';
 import { WalletInfo } from '../../shared/classes/wallet-info';
 import { TransactionInfo } from '../../shared/classes/transaction-info';
 
@@ -20,7 +21,7 @@ import { Subscription } from 'rxjs/Subscription';
 })
 
 export class DashboardComponent implements OnInit {
-  constructor(private apiService: ApiService, private globalService: GlobalService, private modalService: NgbModal) {}
+  constructor(private apiService: ApiService, private globalService: GlobalService, private modalService: NgbModal, private genericModalService: ModalService) {}
 
   public walletName: string;
   public coinUnit: string;
@@ -68,14 +69,14 @@ export class DashboardComponent implements OnInit {
           console.log(error);
           if (error.status === 0) {
             this.cancelSubscriptions();
-            alert("Something went wrong while connecting to the API. Please restart the application.");
+            this.genericModalService.openModal(null, null);
           } else if (error.status >= 400) {
             if (!error.json().errors[0]) {
               console.log(error);
             }
             else {
               if (error.json().errors[0].description) {
-                alert(error.json().errors[0].description);
+                this.genericModalService.openModal(null, error.json().errors[0].description);
               } else {
                 this.cancelSubscriptions();
                 this.startSubscriptions();
@@ -105,14 +106,14 @@ export class DashboardComponent implements OnInit {
           console.log(error);
           if (error.status === 0) {
             this.cancelSubscriptions();
-            alert("Something went wrong while connecting to the API. Please restart the application.");
+            this.genericModalService.openModal(null, null);
           } else if (error.status >= 400) {
             if (!error.json().errors[0]) {
               console.log(error);
             }
             else {
               if (error.json().errors[0].description) {
-                alert(error.json().errors[0].description);
+                this.genericModalService.openModal(null, error.json().errors[0].description);
               } else {
                 this.cancelSubscriptions();
                 this.startSubscriptions();

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

@@ -3,6 +3,7 @@ import { NgbModal, NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
 
 import { ApiService } from '../../shared/services/api.service';
 import { GlobalService } from '../../shared/services/global.service';
+import { ModalService } from '../../shared/services/modal.service';
 
 import { WalletInfo } from '../../shared/classes/wallet-info';
 import { TransactionInfo } from '../../shared/classes/transaction-info';
@@ -19,7 +20,7 @@ import { TransactionDetailsComponent } from '../transaction-details/transaction-
 })
 
 export class HistoryComponent {
-  constructor(private apiService: ApiService, private globalService: GlobalService, private modalService: NgbModal) {}
+  constructor(private apiService: ApiService, private globalService: GlobalService, private modalService: NgbModal, private genericModalService: ModalService) {}
 
   public transactions: TransactionInfo[];
   public coinUnit: string;
@@ -58,14 +59,14 @@ export class HistoryComponent {
           console.log(error);
           if (error.status === 0) {
             this.cancelSubscriptions();
-            alert("Something went wrong while connecting to the API. Please restart the application.");
+            this.genericModalService.openModal(null, null);
           } else if (error.status >= 400) {
             if (!error.json().errors[0]) {
               console.log(error);
             }
             else {
               if (error.json().errors[0].description) {
-                alert(error.json().errors[0].description);
+                this.genericModalService.openModal(null, error.json().errors[0].description);
               } else {
                 this.cancelSubscriptions();
                 this.startSubscriptions();

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

@@ -2,6 +2,7 @@ import { Component, OnInit } from '@angular/core';
 
 import { ApiService } from '../../shared/services/api.service';
 import { GlobalService } from '../../shared/services/global.service';
+import { ModalService } from '../../shared/services/modal.service';
 
 import { WalletInfo } from '../../shared/classes/wallet-info';
 
@@ -14,7 +15,7 @@ import { NgbModal, NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
 })
 
 export class ReceiveComponent {
-  constructor(private apiService: ApiService, private globalService: GlobalService, public activeModal: NgbActiveModal) {}
+  constructor(private apiService: ApiService, private globalService: GlobalService, public activeModal: NgbActiveModal, private genericModalService: ModalService) {}
 
   public address: any = "";
   public copied: boolean = false;
@@ -40,13 +41,13 @@ export class ReceiveComponent {
         error => {
           console.log(error);
           if (error.status === 0) {
-            alert("Something went wrong while connecting to the API. Please restart the application.");
+            this.genericModalService.openModal(null, null);
           } else if (error.status >= 400) {
             if (!error.json().errors[0]) {
               console.log(error);
             }
             else {
-              alert(error.json().errors[0].description);
+              this.genericModalService.openModal(null, error.json().errors[0].description);
             }
           }
         }

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

 import { Component, OnInit } from '@angular/core';
+import { FormGroup, FormControl, Validators, FormBuilder } from '@angular/forms';
+
 import { ApiService } from '../../shared/services/api.service';
 import { GlobalService } from '../../shared/services/global.service';
-import { FormGroup, FormControl, Validators, FormBuilder } from '@angular/forms';
+import { ModalService } from '../../shared/services/modal.service';
 
 import { NgbModal, NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
 
@@ -17,7 +19,7 @@ import { SendConfirmationComponent } from './send-confirmation/send-confirmation
 })
 
 export class SendComponent implements OnInit {
-  constructor(private apiService: ApiService, private globalService: GlobalService, private modalService: NgbModal, public activeModal: NgbActiveModal, private fb: FormBuilder) {
+  constructor(private apiService: ApiService, private globalService: GlobalService, private modalService: NgbModal, private genericModalService: ModalService, public activeModal: NgbActiveModal, private fb: FormBuilder) {
     this.buildSendForm();
   }
 
@@ -106,13 +108,13 @@ export class SendComponent implements OnInit {
         error => {
           console.log(error);
           if (error.status === 0) {
-            alert("Something went wrong while connecting to the API. Please restart the application.");
+            this.genericModalService.openModal(null, "Something went wrong while connecting to the API. Please restart the application.");
           } else if (error.status >= 400) {
             if (!error.json().errors[0]) {
               console.log(error);
             }
             else {
-              alert(error.json().errors[0].description);
+              this.genericModalService.openModal(null, error.json().errors[0].description);
             }
           }
         },
@@ -145,13 +147,13 @@ export class SendComponent implements OnInit {
         error => {
           console.log(error);
           if (error.status === 0) {
-            alert("Something went wrong while connecting to the API. Please restart the application.");
+            this.genericModalService.openModal(null, null);
           } else if (error.status >= 400) {
             if (!error.json().errors[0]) {
               console.log(error);
             }
             else {
-              alert(error.json().errors[0].description);
+              this.genericModalService.openModal(null, error.json().errors[0].description);
             }
           }
         },
@@ -185,13 +187,13 @@ export class SendComponent implements OnInit {
           console.log(error);
           this.isSending = false;
           if (error.status === 0) {
-            alert("Something went wrong while connecting to the API. Please restart the application.");
+            this.genericModalService.openModal(null, null);
           } else if (error.status >= 400) {
             if (!error.json().errors[0]) {
               console.log(error);
             }
             else {
-              alert(error.json().errors[0].description);
+              this.genericModalService.openModal(null, error.json().errors[0].description);
             }
           }
         },

Breeze.UI/src/app/wallet/status-bar/status-bar.component.ts

 import { Component, OnInit, OnDestroy } from '@angular/core';
 
+import { Observable } from 'rxjs/Rx';
+import { Subscription } from 'rxjs/Subscription';
+
 import { ApiService } from '../../shared/services/api.service';
 import { GlobalService } from '../../shared/services/global.service';
-import { WalletInfo } from '../../shared/classes/wallet-info';
+import { ModalService } from '../../shared/services/modal.service';
 
-import { Observable } from 'rxjs/Rx';
-import { Subscription } from 'rxjs/Subscription';
+import { WalletInfo } from '../../shared/classes/wallet-info';
 
 @Component({
   selector: 'status-bar',
@@ -22,7 +24,7 @@ export class StatusBarComponent implements OnInit {
   private percentSyncedNumber: number = 0;
   public percentSynced: string;
 
-  constructor(private apiService: ApiService, private globalService: GlobalService) { }
+  constructor(private apiService: ApiService, private globalService: GlobalService, private genericModalService: ModalService) { }
 
   ngOnInit() {
     this.startSubscriptions();
@@ -61,14 +63,14 @@ export class StatusBarComponent implements OnInit {
           console.log(error);
           if (error.status === 0) {
             this.cancelSubscriptions();
-            alert("Something went wrong while connecting to the API. Please restart the application.");
+            this.genericModalService.openModal(null, null);
           } else if (error.status >= 400) {
             if (!error.json().errors[0]) {
               console.log(error);
             }
             else {
               if (error.json().errors[0].description) {
-                alert(error.json().errors[0].description);
+                this.genericModalService.openModal(null, error.json().errors[0].description);
               } else {
                 this.cancelSubscriptions();
                 this.startSubscriptions();

Breeze.UI/src/app/wallet/transaction-details/transaction-details.component.ts

@@ -2,10 +2,12 @@ import { Component, Input, OnInit, OnDestroy } from '@angular/core';
 import { NgbModal, NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
 import { Subscription } from 'rxjs/Subscription';
 
-import { WalletInfo } from '../../shared/classes/wallet-info';
-import { TransactionInfo } from '../../shared/classes/transaction-info';
 import { ApiService } from '../../shared/services/api.service';
 import { GlobalService } from '../../shared/services/global.service';
+import { ModalService } from '../../shared/services/modal.service';
+
+import { WalletInfo } from '../../shared/classes/wallet-info';
+import { TransactionInfo } from '../../shared/classes/transaction-info';
 
 @Component({
   selector: 'transaction-details',
@@ -15,7 +17,7 @@ import { GlobalService } from '../../shared/services/global.service';
 export class TransactionDetailsComponent implements OnInit, OnDestroy {
 
   @Input() transaction: TransactionInfo;
-  constructor(private apiService: ApiService, private globalService: GlobalService, public activeModal: NgbActiveModal) {}
+  constructor(private apiService: ApiService, private globalService: GlobalService, private genericModalService: ModalService, public activeModal: NgbActiveModal) {}
 
   public copied: boolean = false;
   public coinUnit: string;
@@ -50,14 +52,14 @@ export class TransactionDetailsComponent implements OnInit, OnDestroy {
         error => {
           console.log(error);
           if (error.status === 0) {
-            alert("Something went wrong while connecting to the API. Please restart the application.");
+            this.genericModalService.openModal(null, null);
           } else if (error.status >= 400) {
             if (!error.json().errors[0]) {
               console.log(error);
             }
             else {
               if (error.json().errors[0].description) {
-                alert(error.json().errors[0].description);
+                this.genericModalService.openModal(null, error.json().errors[0].description);
               } else {
                 this.cancelSubscriptions();
                 this.startSubscriptions();