setup wizard improvements

setup-wizard/src/app/pages/recover/recover.page.html

@@ -1,14 +1,14 @@
 <ion-content>
   <ion-grid style="padding-top: 32px; height: 100%; max-width: 540px;">
     <ion-row style="height: 100%;">
-      <ion-col class="ion-text-center">
+      <ion-col>
 
-        <div style="padding-bottom: 32px;">
+        <div style="padding-bottom: 32px;" class="ion-text-center">
           <img src="assets/png/logo.png" style="max-width: 240px;" />
         </div>
 
         <ion-card color="dark">
-          <ion-card-header class="ion-text-center" style="padding-bottom: 8px;">
+          <ion-card-header class="ion-text-center">
             <ion-card-title>Select Recovery Drive</ion-card-title>
             <ion-card-subtitle>Select the drive containing the Embassy you want to recover.</ion-card-subtitle>
           </ion-card-header>
@@ -29,10 +29,8 @@
 
             <ion-item-group>
               <ng-container *ngIf="loading">
-                <ion-item-divider color="light">
-                  <ion-skeleton-text animated style="width: 120px; height: 16px;"></ion-skeleton-text>
-                </ion-item-divider>
-                <ion-item color="light">
+                <ion-skeleton-text animated class="skeleton-header"></ion-skeleton-text>
+                <ion-item color="light" style="padding-bottom: 10px;">
                   <ion-avatar slot="start" style="margin-right: 24px;">
                     <ion-skeleton-text animated style="width: 30px; height: 30px; border-radius: 0;"></ion-skeleton-text>
                   </ion-avatar>
@@ -45,18 +43,18 @@
               </ng-container>
 
               <!-- loaded -->
-              <div *ngFor="let drive of drives">
-                <ion-item-divider color="light">
+              <div *ngFor="let drive of drives" class="ion-padding-bottom">
+                <h2 class="drive-label">
                   {{ drive.vendor || 'Unknown Vendor' }} - {{ drive.model || 'Unknown Model' }} - {{ drive.capacity | convertBytes }}
-                </ion-item-divider>
-                <ion-item color="light" button *ngFor="let partition of drive.partitions" [disabled]="!partitionClickable(partition)" (click)="choosePartition(partition)">
+                </h2>
+                <ion-item lines="none" button *ngFor="let partition of drive.partitions" [disabled]="!partitionClickable(partition)" (click)="choosePartition(partition)">
                   <ion-icon slot="start" name="save-outline"></ion-icon>
                   <ion-label>
                     <h1>{{ partition.label || partition.logicalname }}</h1>
-                    <h2>{{ drive.capacity | convertBytes }}</h2>
+                    <h2>{{ partition.capacity | convertBytes }}</h2>
                     <p *ngIf="partition['embassy-os'] && partition['embassy-os'].full">
                       <ion-text color="success">
-                        Embassy backups detected
+                        Embassy backup detected
                       </ion-text>
                     </p>
                   </ion-label>

setup-wizard/src/app/pages/recover/recover.page.scss

@@ -2,3 +2,19 @@
   border: 4px solid var(--ion-color-secondary);
   box-shadow: 4px 4px 16px var(--ion-color-light);
 }
+
+.drive-label {
+  font-weight: bold;
+  padding-bottom: 6px;
+}
+
+.skeleton-header {
+  width: 180px;
+  height: 18px;
+  --ion-text-color-rgb: var(--ion-color-light-rgb);
+  margin-bottom: 6px;
+}
+
+ion-item {
+  padding-bottom: 6px;
+}

setup-wizard/src/app/pages/recover/recover.page.ts

@@ -38,26 +38,25 @@ export class RecoverPage {
   }
 
   partitionClickable (partition: PartitionInfo) {
-    return partition['embassy-os']?.full && ((!this.stateService.hasProductKey && partition['embassy-os']?.version.startsWith('0.2') ) || this.stateService.hasProductKey)
+    return partition['embassy-os']?.full && (this.stateService.hasProductKey || this.is02x(partition))
   }
 
   async getDrives () {
     try {
-      this.drives = await this.apiService.getDrives()
+      this.drives = (await this.apiService.getDrives()).filter(d => d.partitions.length)
 
-      const importableDrive = this.drives.filter(d => !!d.guid)[0]
+      const importableDrive = this.drives.find(d => !!d.guid)
       if (!!importableDrive && !this.hasShownGuidAlert) {
         const alert = await this.alertCtrl.create({
-          header: 'Warning',
-          subHeader: 'Drive contains data!',
-          message: 'All data stored on this drive will be permanently deleted.',
+          header: 'Embassy Drive Detected',
+          message: 'A valid EmbassyOS data drive has been detected. To use this drive in its current state, simply click "Use Drive" below.',
           buttons: [
             {
               role: 'cancel',
-              text: 'Dismiss',
+              text: 'Cancel',
             },
             {
-              text: 'Use',
+              text: 'Use Drive',
               handler: async () => {
                 await this.importDrive(importableDrive.guid)
               },
@@ -113,6 +112,7 @@ export class RecoverPage {
 
       })
       await modal.present()
+    // if no product key, it means they are an upgrade kit user
     } else {
       const modal = await this.modalController.create({
         component: ProdKeyModal,
@@ -140,4 +140,8 @@ export class RecoverPage {
     }
     await this.navCtrl.navigateForward(`/embassy`)
   }
+
+  private is02x (partition: PartitionInfo): boolean {
+    return !this.stateService.hasProductKey && partition['embassy-os']?.version.startsWith('0.2')
+  }
 }