From 13d9293f570b6343c1b2e31a325b9c14f6e7aea7 Mon Sep 17 00:00:00 2001
From: Drew Ansbacher <drew.ansbacher@spiredigital.com>
Date: Wed, 15 Sep 2021 10:39:07 -0600
Subject: [PATCH] error handling and refresh

---
 .../src/app/pages/recover/recover.page.html   |  3 ++-
 .../src/app/pages/recover/recover.page.ts     | 27 ++++++++++++++++---
 .../src/app/services/error-toast.service.ts   |  1 +
 setup-wizard/src/global.scss                  |  8 ++++++
 4 files changed, 34 insertions(+), 5 deletions(-)

diff --git a/setup-wizard/src/app/pages/recover/recover.page.html b/setup-wizard/src/app/pages/recover/recover.page.html
index 54d7b6dfb..669b59a7f 100644
--- a/setup-wizard/src/app/pages/recover/recover.page.html
+++ b/setup-wizard/src/app/pages/recover/recover.page.html
@@ -19,7 +19,7 @@
               <h2 color="light">No recovery drives found</h2>
               <p color="light">Please connect a recovery drive to your Embassy and refresh the page.</p>
               <ion-button 
-                (click)="window.location.reload()"
+                (click)="refresh()"
                 style="text-align:center"
                 class="claim-button"
               >
@@ -62,6 +62,7 @@
                 color="light"
                 [disabled]="!selectedDrive || (!passwords[selectedDrive.logicalname] && !selectedDrive['embassy_os'].version.startsWith('0.2'))"
                 class="claim-button"
+                *ngIf="recoveryDrives.length"
               >
                 Next
               </ion-button>
diff --git a/setup-wizard/src/app/pages/recover/recover.page.ts b/setup-wizard/src/app/pages/recover/recover.page.ts
index fd25ff782..3bf5f3949 100644
--- a/setup-wizard/src/app/pages/recover/recover.page.ts
+++ b/setup-wizard/src/app/pages/recover/recover.page.ts
@@ -1,6 +1,7 @@
 import { Component } from '@angular/core'
 import { iosTransitionAnimation, ModalController, NavController } from '@ionic/angular'
 import { ApiService, DiskInfo } from 'src/app/services/api/api.service'
+import { ErrorToastService } from 'src/app/services/error-toast.service'
 import { StateService } from 'src/app/services/state.service'
 import { PasswordPage } from '../password/password.page'
 
@@ -20,12 +21,30 @@ export class RecoverPage {
     private readonly apiService: ApiService,
     private readonly navCtrl: NavController,
     private readonly  modalController: ModalController,
-    private readonly stateService: StateService
+    private readonly stateService: StateService,
+    private readonly errorToastService: ErrorToastService,
   ) {}
 
-  async ngOnInit() {
-    this.recoveryDrives = (await this.apiService.getDrives()).filter(d => !!d['embassy_os'])
-    this.loading = false
+  async ngOnInit () {
+    await this.getDrives()
+  }
+
+  async refresh () {
+    this.recoveryDrives = []
+    this.selectedDrive = null
+    this.loading = true
+    await this.getDrives()
+  }
+
+  async getDrives () {
+    try {
+      this.recoveryDrives = (await this.apiService.getDrives()).filter(d => !!d['embassy_os'])
+    } catch (e) {
+      console.log(e)
+      this.errorToastService.present(e.message)
+    } finally {
+      this.loading = false
+    }
   }
 
   async chooseDrive(drive: DiskInfo) {
diff --git a/setup-wizard/src/app/services/error-toast.service.ts b/setup-wizard/src/app/services/error-toast.service.ts
index c21e0e947..81ef97265 100644
--- a/setup-wizard/src/app/services/error-toast.service.ts
+++ b/setup-wizard/src/app/services/error-toast.service.ts
@@ -20,6 +20,7 @@ export class ErrorToastService {
       duration: 0,
       position: 'top',
       cssClass: 'error-toast',
+      animated: true,
       buttons: [
         {
           side: 'end',
diff --git a/setup-wizard/src/global.scss b/setup-wizard/src/global.scss
index 74be8558f..fb8c737e2 100644
--- a/setup-wizard/src/global.scss
+++ b/setup-wizard/src/global.scss
@@ -53,6 +53,14 @@ ion-item {
   }
 }
 
+ion-toast {
+  --background: var(--ion-color-light);
+  --button-color: var(--ion-color-dark);
+  --border-style: solid;
+  --border-width: 1px;
+  --color: white;
+}
+
 .error-toast {
   --border-color: var(--ion-color-danger);
   width: 40%;