From 6bb1af3c4def803b3c563f71ca1cdb2fd99fc53e Mon Sep 17 00:00:00 2001
From: Joe Pavitt <joepavit@uk.ibm.com>
Date: Tue, 18 Jul 2017 11:21:14 +0100
Subject: [PATCH 1/2] - add 'circular' class that, when combined with '.action'
 creates the circular hover state for action buttons

- add a skeleton 'removeIdentity()' function
---
 .../src/app/login/login.component.html             |  4 ++--
 .../src/app/login/login.component.scss             |  4 ++--
 .../src/app/login/login.component.ts               |  7 +++++++
 .../src/assets/styles/elements/_button.scss        | 14 ++++++++++++++
 4 files changed, 25 insertions(+), 4 deletions(-)

diff --git a/packages/composer-playground/src/app/login/login.component.html b/packages/composer-playground/src/app/login/login.component.html
index f9032599d9..333869b9e1 100644
--- a/packages/composer-playground/src/app/login/login.component.html
+++ b/packages/composer-playground/src/app/login/login.component.html
@@ -28,12 +28,12 @@ <h2>Identities for {{connectionProfile.name === '$default' ? 'Web Browser' : con
                         {{identity.userId}}
                     </div>
                     <div class="action-buttons">
-                        <button type="button" class="action">
+                        <button type="button" class="action circular" (click)="removeIdentity()">
                             <svg class="ibm-icon vertical-top" aria-hidden="true">
                                 <use xlink:href="#icon-trash_32"></use>
                             </svg>
                         </button>
-                        <button type="button" class="action">
+                        <button type="button" class="action circular">
                             <svg class="ibm-icon vertical-top" aria-hidden="true">
                                 <use xlink:href="#icon-upload_32"></use>
                             </svg>
diff --git a/packages/composer-playground/src/app/login/login.component.scss b/packages/composer-playground/src/app/login/login.component.scss
index 5d2c7f6289..d56b88b8aa 100644
--- a/packages/composer-playground/src/app/login/login.component.scss
+++ b/packages/composer-playground/src/app/login/login.component.scss
@@ -47,8 +47,8 @@ app-login {
                     }
 
                     .userId-image {
-                        background-color: $keyline-highlight;
-                        border: 1px solid $keyline-highlight;
+                        background-color: $fourth-highlight;
+                        border: 1px solid $fourth-highlight;
                         border-radius: 50%;
                         width: 75px;
                         height: 75px;
diff --git a/packages/composer-playground/src/app/login/login.component.ts b/packages/composer-playground/src/app/login/login.component.ts
index 07e590534b..597a5dff30 100644
--- a/packages/composer-playground/src/app/login/login.component.ts
+++ b/packages/composer-playground/src/app/login/login.component.ts
@@ -4,6 +4,7 @@ import { IdentityService } from '../services/identity.service';
 import { AdminService } from '../services/admin.service';
 import { ConnectionProfileService } from '../services/connectionprofile.service';
 import { ClientService } from '../services/client.service';
+import { WalletService } from '../services/wallet.service';
 import { InitializationService } from '../services/initialization.service';
 import { AlertService } from '../basic-modals/alert.service';
 
@@ -25,6 +26,7 @@ export class LoginComponent implements OnInit {
                 private connectionProfileService: ConnectionProfileService,
                 private clientService: ClientService,
                 private initializationService: InitializationService,
+                private walletService: WalletService,
                 private alertService: AlertService) {
 
     }
@@ -91,4 +93,9 @@ export class LoginComponent implements OnInit {
         delete this.editingConectionProfile;
         return this.loadConnectionProfiles();
     }
+
+    removeIdentity(): void {
+        // this.walletService.removeFromWallet();
+        console.log('Hello World');
+    }
 }
diff --git a/packages/composer-playground/src/assets/styles/elements/_button.scss b/packages/composer-playground/src/assets/styles/elements/_button.scss
index fc354798a5..301dc8d0ff 100644
--- a/packages/composer-playground/src/assets/styles/elements/_button.scss
+++ b/packages/composer-playground/src/assets/styles/elements/_button.scss
@@ -184,6 +184,20 @@
             }
         }
 
+        &.action.circular {
+            border-radius: 50%;
+            width: 42px;
+            box-sizing: border-box;
+            padding-top: 1px;
+            height: 42px;
+        }
+
+        &.action.circular:hover,
+        &.action.circular:focus {
+            background-color: $fourth-highlight;
+            border-bottom: 2px solid transparent;
+        }
+
         &.icon {
             background-color: transparent;
             min-width: 0;

From b0e376ef1ea2a39c9abef2eea3e21c854c6b4c38 Mon Sep 17 00:00:00 2001
From: Joe Pavitt <joepavit@uk.ibm.com>
Date: Tue, 18 Jul 2017 18:09:27 +0100
Subject: [PATCH 2/2] - implement a more flexible 'delete-confirm' modal

- implement the 'removeIdentity' function, calling upon the walletService
- write the unit tests for the new remove ID functionality
---
 .../delete-confirm.component.html             |  6 +-
 .../delete-confirm.component.ts               | 16 ++--
 .../src/app/login/login.component.html        |  2 +-
 .../src/app/login/login.component.spec.ts     | 94 ++++++++++++++++++-
 .../src/app/login/login.component.ts          | 49 +++++++++-
 5 files changed, 149 insertions(+), 18 deletions(-)

diff --git a/packages/composer-playground/src/app/basic-modals/delete-confirm/delete-confirm.component.html b/packages/composer-playground/src/app/basic-modals/delete-confirm/delete-confirm.component.html
index 13a5200548..d7162f5fd2 100644
--- a/packages/composer-playground/src/app/basic-modals/delete-confirm/delete-confirm.component.html
+++ b/packages/composer-playground/src/app/basic-modals/delete-confirm/delete-confirm.component.html
@@ -12,16 +12,18 @@ <h1>{{headerMessage}}</h1>
   </div>
   <section class="modal-body">
     <section class="information">
-        <p><b>You are about to delete:</b></p>
+        <p>You are about to remove the {{ fileType }} <b>{{ fileName }}</b>{{ deleteFrom ? ' from ' + deleteFrom + '.' : '.'}}</p>
+<!--
         <section class="items">
             <div class="item"><b>{{fileType}}</b></div>
             <div class="item"><i>{{fileName}}</i></div>
         </section>
+-->
         <p>{{deleteMessage}}</p>
     </section>
   </section>
   <footer>
     <button type="button" class="secondary" (click)="activeModal.dismiss()">Cancel</button>
-    <button type="button" class="delete" (click)="activeModal.close(true)">Delete File</button>
+    <button type="button" class="delete" (click)="activeModal.close(true)">{{ confirmButtonText || 'Delete File' }}</button>
   </footer>
 </div>
diff --git a/packages/composer-playground/src/app/basic-modals/delete-confirm/delete-confirm.component.ts b/packages/composer-playground/src/app/basic-modals/delete-confirm/delete-confirm.component.ts
index a8e5b5d152..489944a286 100644
--- a/packages/composer-playground/src/app/basic-modals/delete-confirm/delete-confirm.component.ts
+++ b/packages/composer-playground/src/app/basic-modals/delete-confirm/delete-confirm.component.ts
@@ -17,14 +17,16 @@ export class DeleteComponent implements OnInit {
     }
 
     ngOnInit() {
-        this.fileName = this.deleteFile.displayID;
+        if (!this.fileName) {
+            this.fileName = this.deleteFile.displayID;
 
-        if (this.deleteFile.model) {
-            this.fileType = 'Model File';
-        } else if (this.deleteFile.script) {
-            this.fileType = 'Script File';
-        } else {
-            this.fileType = 'File';
+            if (this.deleteFile.model) {
+                this.fileType = 'Model File';
+            } else if (this.deleteFile.script) {
+                this.fileType = 'Script File';
+            } else {
+                this.fileType = 'File';
+            }
         }
     }
 }
diff --git a/packages/composer-playground/src/app/login/login.component.html b/packages/composer-playground/src/app/login/login.component.html
index 333869b9e1..0b14dc3787 100644
--- a/packages/composer-playground/src/app/login/login.component.html
+++ b/packages/composer-playground/src/app/login/login.component.html
@@ -28,7 +28,7 @@ <h2>Identities for {{connectionProfile.name === '$default' ? 'Web Browser' : con
                         {{identity.userId}}
                     </div>
                     <div class="action-buttons">
-                        <button type="button" class="action circular" (click)="removeIdentity()">
+                        <button type="button" class="action circular" (click)="removeIdentity(connectionProfile.name, identity.userId)">
                             <svg class="ibm-icon vertical-top" aria-hidden="true">
                                 <use xlink:href="#icon-trash_32"></use>
                             </svg>
diff --git a/packages/composer-playground/src/app/login/login.component.spec.ts b/packages/composer-playground/src/app/login/login.component.spec.ts
index 5bba65b8a3..a2f05f5c75 100644
--- a/packages/composer-playground/src/app/login/login.component.spec.ts
+++ b/packages/composer-playground/src/app/login/login.component.spec.ts
@@ -23,6 +23,8 @@ import { InitializationService } from '../services/initialization.service';
 
 import { LoginComponent } from './login.component';
 import { AlertService } from '../basic-modals/alert.service';
+import { WalletService } from '../services/wallet.service';
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
 
 let should = chai.should();
 
@@ -86,6 +88,8 @@ describe(`LoginComponent`, () => {
     let mockInitializationService;
     let routerStub;
     let mockAlertService;
+    let mockWalletService;
+    let mockModal;
 
     beforeEach(() => {
 
@@ -95,12 +99,16 @@ describe(`LoginComponent`, () => {
         mockAdminService = sinon.createStubInstance(AdminService);
         mockInitializationService = sinon.createStubInstance(InitializationService);
         mockAlertService = sinon.createStubInstance(AlertService);
+        mockWalletService = sinon.createStubInstance(WalletService);
+        mockModal = sinon.createStubInstance(NgbModal);
 
         routerStub = new RouterStub();
 
-        mockAlertService.errorStatus$ = {
-            next: sinon.stub()
-        };
+        mockAlertService.successStatus$ = {next: sinon.stub()};
+        mockAlertService.busyStatus$ = {next: sinon.stub()};
+        mockAlertService.errorStatus$ = {next: sinon.stub()};
+
+        mockWalletService.removeFromWallet = sinon.stub().returns(Promise.resolve(true));
 
         TestBed.configureTestingModule({
             declarations: [
@@ -114,7 +122,9 @@ describe(`LoginComponent`, () => {
                 {provide: Router, useValue: routerStub},
                 {provide: AdminService, useValue: mockAdminService},
                 {provide: InitializationService, useValue: mockInitializationService},
-                {provide: AlertService, useValue: mockAlertService}
+                {provide: AlertService, useValue: mockAlertService},
+                {provide: WalletService, useValue: mockWalletService},
+                {provide: NgbModal, useValue: mockModal}
             ]
         });
 
@@ -222,4 +232,80 @@ describe(`LoginComponent`, () => {
             loadConnectionProfilesStub.should.have.been.called;
         });
     });
+
+    describe('removeIdentity', () => {
+        it('should open the delete-confirm modal', fakeAsync(() => {
+            mockModal.open = sinon.stub().returns({
+                componentInstance: {},
+                result: Promise.resolve(0)
+            });
+
+            component.removeIdentity('profile', 'name');
+            tick();
+            mockModal.open.should.have.been.called;
+        }));
+
+        it('should open delete-confirm modal and handle error', fakeAsync(() => {
+            mockModal.open = sinon.stub().returns({
+                componentInstance: {},
+                result: Promise.reject('some error')
+            });
+
+            component.removeIdentity('profile', 'name');
+            tick();
+            mockAlertService.busyStatus$.next.should.have.been.called;
+            mockAlertService.errorStatus$.next.should.have.been.called;
+        }));
+
+        it('should open delete-confirm modal and handle cancel', fakeAsync(() => {
+            mockModal.open = sinon.stub().returns({
+                componentInstance: {},
+                result: Promise.reject(null)
+            });
+
+            component.removeIdentity('profile', 'name');
+            tick();
+            mockAlertService.busyStatus$.next.should.not.have.been.called;
+            mockAlertService.errorStatus$.next.should.not.have.been.called;
+        }));
+
+        it('should refresh the connection profiles after successfully calling walletService.removeFromWallet()', fakeAsync(() => {
+            mockModal.open = sinon.stub().returns({
+                componentInstance: {},
+                result: Promise.resolve(true)
+            });
+
+            component.loadConnectionProfiles = sinon.stub();
+
+            component.removeIdentity('profile', 'name');
+            tick();
+
+            // check services called
+            component.loadConnectionProfiles.should.have.been.called;
+            mockAlertService.busyStatus$.next.should.have.been.called;
+            mockAlertService.successStatus$.next.should.have.been.called;
+
+            mockAlertService.errorStatus$.next.should.not.have.been.called;
+        }));
+
+        it('should handle errors when calling walletService.removeFromWallet()', fakeAsync(() => {
+            mockModal.open = sinon.stub().returns({
+                componentInstance: {},
+                result: Promise.resolve(true)
+            });
+
+            component.loadConnectionProfiles = sinon.stub();
+            mockWalletService.removeFromWallet = sinon.stub().returns(Promise.reject('some error'));
+
+            component.removeIdentity('profile', 'name');
+            tick();
+
+            // check services called
+            mockAlertService.busyStatus$.next.should.have.been.called;
+            mockAlertService.errorStatus$.next.should.have.been.called;
+
+            mockAlertService.successStatus$.next.should.not.have.been.called;
+            component.loadConnectionProfiles.should.not.have.been.called;
+        }));
+    });
 });
diff --git a/packages/composer-playground/src/app/login/login.component.ts b/packages/composer-playground/src/app/login/login.component.ts
index 597a5dff30..16693f1bd1 100644
--- a/packages/composer-playground/src/app/login/login.component.ts
+++ b/packages/composer-playground/src/app/login/login.component.ts
@@ -4,9 +4,11 @@ import { IdentityService } from '../services/identity.service';
 import { AdminService } from '../services/admin.service';
 import { ConnectionProfileService } from '../services/connectionprofile.service';
 import { ClientService } from '../services/client.service';
-import { WalletService } from '../services/wallet.service';
 import { InitializationService } from '../services/initialization.service';
 import { AlertService } from '../basic-modals/alert.service';
+import { DeleteComponent } from '../basic-modals/delete-confirm/delete-confirm.component';
+import { WalletService } from '../services/wallet.service';
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
 
 @Component({
     selector: 'app-login',
@@ -27,6 +29,7 @@ export class LoginComponent implements OnInit {
                 private clientService: ClientService,
                 private initializationService: InitializationService,
                 private walletService: WalletService,
+                private modalService: NgbModal,
                 private alertService: AlertService) {
 
     }
@@ -94,8 +97,46 @@ export class LoginComponent implements OnInit {
         return this.loadConnectionProfiles();
     }
 
-    removeIdentity(): void {
-        // this.walletService.removeFromWallet();
-        console.log('Hello World');
+    removeIdentity(connectionProfile, userId): void {
+        const confirmModalRef = this.modalService.open(DeleteComponent);
+        confirmModalRef.componentInstance.headerMessage = 'Remove ID Card';
+        confirmModalRef.componentInstance.fileName = userId;
+        confirmModalRef.componentInstance.fileType = 'ID Card';
+        confirmModalRef.componentInstance.deleteMessage = 'Are you sure you want to do this?';
+        confirmModalRef.componentInstance.deleteFrom = 'My Wallet';
+        confirmModalRef.componentInstance.confirmButtonText = 'Remove';
+
+        confirmModalRef.result
+            .then((result) => {
+                if (result) {
+                    this.alertService.busyStatus$.next({
+                        title: 'Removing ID card',
+                        text: 'removing the ID card ' + userId
+                    });
+                    this.walletService.removeFromWallet(connectionProfile, userId)
+                        .then(() => {
+                            this.loadConnectionProfiles();
+                            this.alertService.busyStatus$.next(null);
+                            this.alertService.successStatus$.next({
+                                title: 'ID Card Removed',
+                                text: 'The ID card was successfully removed from My Wallet.',
+                                icon: '#icon-trash_32'
+                            });
+                        })
+                        .catch((error) => {
+                            this.alertService.busyStatus$.next(null);
+                            this.alertService.errorStatus$.next(error);
+                        });
+                }
+            }, (reason) => {
+                if (reason && reason !== 1) {
+                    this.alertService.busyStatus$.next(null);
+                    this.alertService.errorStatus$.next(reason);
+                }
+            })
+            .catch((error) => {
+                this.alertService.busyStatus$.next(null);
+                this.alertService.errorStatus$.next(error);
+            });
     }
 }