error handling and refresh

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>

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() {
+  async ngOnInit () {
-    this.recoveryDrives = (await this.apiService.getDrives()).filter(d => !!d['embassy_os'])
+    await this.getDrives()
-    this.loading = false
+  }
+
+  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) {

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',

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%;