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.`

ui/src/app/components/logs/logs.page.html

@@ -6,9 +6,7 @@
   class="ion-padding"
 >
   <ion-infinite-scroll id="scroller" *ngIf="!loading && needInfinite" position="top" threshold="0" (ionInfinite)="loadData($event)">
-    <ion-infinite-scroll-content
-      loadingSpinner="bubbles">
-    </ion-infinite-scroll-content>
+    <ion-infinite-scroll-content loadingSpinner="lines"></ion-infinite-scroll-content>
   </ion-infinite-scroll>
 
   <text-spinner *ngIf="loading" text="Loading Logs"></text-spinner>
@@ -28,14 +26,14 @@
     [ngStyle]="{
       'position': 'fixed',
       'bottom': '50px',
-      'right': isOnBottom ? '-50px' : '30px',
+      'right': isOnBottom ? '-52px' : '30px',
       'background-color': 'var(--ion-color-medium)',
       'border-radius': '100%',
       'transition': 'right 0.4s ease-out'
     }"
   >
-    <ion-button style="width: 50px; height: 50px; --padding-start: 0px; --padding-end: 0px; --border-radius: 100%;" fill="clear" (click)="scrollToBottom()">
-      <ion-icon style="font-size: 60px; --ionicon-stroke-width: 8px;" name="chevron-down-circle-outline"></ion-icon>
+    <ion-button style="width: 50px; height: 50px; --padding-start: 0px; --padding-end: 0px; --border-radius: 100%;" color="dark" (click)="scrollToBottom()" strong>
+      <ion-icon name="chevron-down"></ion-icon>
     </ion-button>
   </div>