global click protections, install wizard fixes, better login, better marketplace search, fix mocks

ui/src/app/components/install-wizard/install-wizard.component.html

@@ -49,12 +49,12 @@
       <!-- next/finish buttons -->
       <ng-container *ngIf="!(currentSlide.loading$ | async)">
         <!-- next -->
-        <ion-button slot="end" *ngIf="currentBottomBar.next as next" (click)="transitions.next()" fill="outline" class="toolbar-button enter-click">
+        <ion-button slot="end" *ngIf="currentBottomBar.next as next" (click)="callTransition(transitions.next)" fill="outline" class="toolbar-button enter-click" [class.no-click]="transitioning">
           <ion-text [class.smaller-text]="next.length > 16">{{ next }}</ion-text>
         </ion-button>
 
         <!-- finish -->
-        <ion-button slot="end" *ngIf="currentBottomBar.finish as finish" (click)="transitions.final()" fill="outline" class="toolbar-button enter-click">
+        <ion-button slot="end" *ngIf="currentBottomBar.finish as finish" (click)="callTransition(transitions.final)" fill="outline" class="toolbar-button enter-click" [class.no-click]="transitioning">
           <ion-text [class.smaller-text]="finish.length > 16">{{ finish }}</ion-text>
         </ion-button>
       </ng-container>

ui/src/app/components/install-wizard/install-wizard.component.ts

@@ -14,6 +14,8 @@ import { WizardAction } from './wizard-types'
   styleUrls: ['./install-wizard.component.scss'],
 })
 export class InstallWizardComponent {
+  transitioning = false
+
   @Input() params: {
     // defines each slide along with bottom bar
     slideDefinitions: SlideDefinition[]
@@ -86,6 +88,12 @@ export class InstallWizardComponent {
       await this.slideContainer.lockSwipes(true)
     })
   }
+
+  async callTransition (transition: Function) {
+    this.transitioning = true
+    await transition()
+    this.transitioning = false
+  }
 }
 
 export interface SlideDefinition {

ui/src/app/components/install-wizard/prebaked-wizards.ts

@@ -271,9 +271,8 @@ export class WizardBaker {
     id: string
     title: string
     version: string
-    breakages: Breakages
   }): InstallWizardComponent['params'] {
-    const { breakages, title, version } = values
+    const { title, version, id } = values
 
     const action = 'stop'
     const toolbar: TopbarParams  = { action, title, version }
@@ -286,10 +285,22 @@ export class WizardBaker {
             action,
             verb: 'stopping',
             title,
-            fetchBreakages: () => Promise.resolve(breakages),
+            fetchBreakages: () => this.embassyApi.dryStopPackage({ id }).then(breakages => breakages),
           },
         },
-        bottomBar: { cancel: { afterLoading: { text: 'Cancel' } }, next: 'Stop Anyways' },
+        bottomBar: { cancel: { whileLoading: { }, afterLoading: { text: 'Cancel' } }, next: 'Stop Service' },
+      },
+      {
+        slide: {
+          selector: 'complete',
+          params: {
+            action,
+            verb: 'stopping',
+            title,
+            executeAction: () => this.embassyApi.stopPackage({ id }),
+          },
+        },
+        bottomBar: { finish: 'Dismiss', cancel: { whileLoading: { } } },
       },
     ]
     return { toolbar, slideDefinitions }
@@ -321,4 +332,4 @@ export class WizardBaker {
   }
 }
 
-const defaultUninstallWarning = serviceName => `Uninstalling ${ serviceName } will result in the deletion of its data.`
+const defaultUninstallWarning = (serviceName: string) => `Uninstalling ${ serviceName } will result in the deletion of its data.`