preload icons and pause on setup complete for kiosk mode (#1997)

* preload two icons * pause on setup complete for 4 seconds before redirecting kiosk mode
Start9Labs · Nov 30, 2022 · e0678cc · e0678cc
1 parent 74ddf71
commit e0678cc
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 57 deletions.
diff --git a/frontend/projects/setup-wizard/src/app/pages/success/success.page.html b/frontend/projects/setup-wizard/src/app/pages/success/success.page.html
@@ -35,15 +35,11 @@ <h3 class="ion-padding-top">
                     ></ion-icon>
                     <h1>Setup Complete!</h1>
                   </div>
-                  <h3
-                    *ngIf="recoverySource && recoverySource.type === 'backup'"
-                  >
+                  <h3 *ngIf="setupType === 'restore'">
                     You can now safely unplug your backup drive
                   </h3>
-                  <h3
-                    *ngIf="recoverySource && recoverySource.type === 'migrate'"
-                  >
-                    You can now safely unplug your old drive
+                  <h3 *ngIf="setupType === 'transfer'">
+                    You can now safely unplug your old Embassy drive
                   </h3>
                 </div>
                 <div class="card-container">
@@ -82,8 +78,7 @@ <h1>Setup Complete!</h1>
                 </div>
               </ion-col>
             </ion-row>
-            <!-- cert elem -->
-            <a hidden id="install-cert" download="embassy.crt"></a>
+
             <!-- download elem -->
             <div hidden id="downloadable">
               <div

diff --git a/frontend/projects/setup-wizard/src/app/pages/success/success.page.ts b/frontend/projects/setup-wizard/src/app/pages/success/success.page.ts
@@ -8,11 +8,10 @@ import {
   Output,
   ViewChild,
 } from '@angular/core'
-import { IonContent, ToastController } from '@ionic/angular'
 import {
-  copyToClipboard,
   DownloadHTMLService,
   ErrorToastService,
+  pauseFor,
 } from '@start9labs/shared'
 import { ApiService } from 'src/app/services/api/api.service'
 import { StateService } from 'src/app/services/state.service'
@@ -24,8 +23,6 @@ import { StateService } from 'src/app/services/state.service'
   providers: [DownloadHTMLService],
 })
 export class SuccessPage {
-  @ViewChild(IonContent)
-  private content?: IonContent
   @ViewChild('canvas', { static: true })
   private canvas: ElementRef<HTMLCanvasElement> = {} as ElementRef<HTMLCanvasElement>
   private ctx: CanvasRenderingContext2D = {} as CanvasRenderingContext2D
@@ -35,7 +32,6 @@ export class SuccessPage {
   torAddress = ''
   lanAddress = ''
   cert = ''
-  isOnBottom = true
 
   tileSize = 16
   // a higher fade factor will make the characters fade quicker
@@ -46,16 +42,15 @@ export class SuccessPage {
 
   constructor(
     @Inject(DOCUMENT) private readonly document: Document,
-    private readonly toastCtrl: ToastController,
     private readonly errCtrl: ErrorToastService,
     private readonly stateService: StateService,
-    private api: ApiService,
+    private readonly api: ApiService,
     private readonly downloadHtml: DownloadHTMLService,
-    private ngZone: NgZone,
+    private readonly ngZone: NgZone,
   ) {}
 
-  get recoverySource() {
-    return this.stateService.recoverySource
+  get setupType() {
+    return this.stateService.setupType
   }
 
   get isKiosk() {
@@ -66,45 +61,19 @@ export class SuccessPage {
     this.ngZone.runOutsideAngular(() => this.initMatrix())
     try {
       const ret = await this.api.complete()
-      if (!this.isKiosk) {
-        setTimeout(() => this.checkBottom(), 42)
-
+      if (this.isKiosk) {
+        await pauseFor(4000)
+      } else {
         this.torAddress = ret['tor-address']
         this.lanAddress = ret['lan-address']
         this.cert = ret['root-ca']
-
-        this.document
-          .getElementById('install-cert')
-          ?.setAttribute(
-            'href',
-            'data:application/x-x509-ca-cert;base64,' +
-              encodeURIComponent(this.cert),
-          )
       }
       await this.api.exit()
     } catch (e: any) {
       await this.errCtrl.present(e)
     }
   }
 
-  async copy(address: string): Promise<void> {
-    const success = await copyToClipboard(address)
-    const message = success
-      ? 'Copied to clipboard!'
-      : 'Failed to copy to clipboard.'
-
-    const toast = await this.toastCtrl.create({
-      header: message,
-      position: 'bottom',
-      duration: 1000,
-    })
-    await toast.present()
-  }
-
-  installCert() {
-    this.document.getElementById('install-cert')?.click()
-  }
-
   download() {
     const torAddress = this.document.getElementById('tor-addr')
     const lanAddress = this.document.getElementById('lan-addr')
@@ -125,22 +94,15 @@ export class SuccessPage {
     })
   }
 
-  checkBottom() {
-    const bottomDiv = document.getElementById('bottom-div')
-    this.isOnBottom =
-      !!bottomDiv &&
-      bottomDiv.getBoundingClientRect().top - 192 < window.innerHeight
-  }
-
-  initMatrix() {
+  private initMatrix() {
     this.ctx = this.canvas.nativeElement.getContext('2d')!
     this.canvas.nativeElement.width = window.innerWidth
     this.canvas.nativeElement.height = window.innerHeight
     this.setupMatrixGrid()
     this.tick()
   }
 
-  setupMatrixGrid() {
+  private setupMatrixGrid() {
     this.maxStackHeight = Math.ceil(this.ctx.canvas.height / this.tileSize)
     // divide the canvas into columns
     for (let i = 0; i < this.ctx.canvas.width / this.tileSize; ++i) {

diff --git a/frontend/projects/ui/src/app/app/preloader/preloader.component.ts b/frontend/projects/ui/src/app/app/preloader/preloader.component.ts
@@ -39,6 +39,7 @@ const ICONS = [
   'finger-print-outline',
   'flash-outline',
   'folder-open-outline',
+  'globe-outline',
   'grid-outline',
   'help-circle-outline',
   'hammer-outline',
@@ -70,6 +71,7 @@ const ICONS = [
   'remove',
   'remove-circle-outline',
   'remove-outline',
+  'repeat-outline',
   'rocket-outline',
   'save-outline',
   'settings-outline',