cosmetics plus a slew of little frontend rendering bugs

ui/src/app/pages/server-routes/lan/lan.page.html

@@ -11,25 +11,27 @@
 
   <ion-item-group>
     <!-- about -->
-    <ion-item>
-      <ion-label class="ion-text-wrap">
-        <p class="ion-padding-bottom">About</p>
-        <h2>You can connect to your Embassy over your Local Area Network (LAN). This can be useful for achieving a faster experience, as well as a fallback in case the Tor network is experiencing issues.</h2>
+    <ion-item class="ion-padding-bottom">
+      <ion-label>
+        <h2>
+          Connecting to your Embassy over the Local Area Network (LAN) is great for achieving a faster experience, as well as a fallback in case Tor is experiencing issues.
+          <a [href]="docsUrl" target="_blank">View instructions</a>
+        </h2>
       </ion-label>
     </ion-item>
-    <ion-item [href]="docsUrl" target="_blank" detail="false">
-      <ion-icon slot="start" name="list-outline"></ion-icon>
-      <ion-label>View Instructions</ion-label>
-    </ion-item>
+
     <ion-item button (click)="installCert()" [disabled]="lanDisabled">
-      <ion-icon slot="start" name="download-outline"></ion-icon>
-      <ion-label>Download Root Certificate Authority</ion-label>
+      <ion-icon slot="start" name="download-outline" size="large"></ion-icon>
+      <ion-label>
+        <h1>Download Root CA</h1>
+        <p>Download and trust your Embassy's Root Certificate Authority to achieve a secure connection on the LAN.</p>
+      </ion-label>
     </ion-item>
 
     <ng-container *ngIf="lanDisabled">
       <ion-item-divider></ion-item-divider>
       <ion-item>
-        <ion-label class="ion-text-wrap">
+        <ion-label>
           <p class="ion-padding-bottom">Setup</p>
           <ion-text color="warning" [innerHtml]="lanDisabledExplanation[lanDisabled]"></ion-text>
         </ion-label>
@@ -37,16 +39,12 @@
     </ng-container>
 
     <!-- Refresh Network -->
-    <ion-item-divider></ion-item-divider>
-    <ion-item>
-      <ion-label class="ion-text-wrap">
-        <p style="padding-bottom: 6px;">Troubleshooting</p>
-        <h2>If you are having issues connecting to your Embassy over LAN, try refreshing your LAN services by clicking the button below.</h2>
-      </ion-label>
-    </ion-item>
     <ion-item button (click)="refreshLAN()" detail="false">
-      <ion-icon slot="start" name="refresh-outline"></ion-icon>
-      <ion-label>Refresh LAN</ion-label>
+      <ion-icon slot="start" name="refresh-outline" size="large"></ion-icon>
+      <ion-label>
+        <h1>Refresh LAN</h1>
+        <p>If you are having issues connecting to your Embassy over LAN, try refreshing your LAN services by clicking the button below.</p>
+      </ion-label>
     </ion-item>
   </ion-item-group>
 

ui/src/app/pages/server-routes/security-routes/sessions/sessions.page.html

@@ -8,14 +8,37 @@
 </ion-header>
 
 <ion-content class="ion-padding-top">
-  <text-spinner *ngIf="loading" text="Loading Sessions"></text-spinner>
 
+  <!-- loading -->
+  <ion-item-group *ngIf="loading">
+    <div *ngFor="let entry of ['first', 'second']">
+      <ion-item-divider>
+        <ion-skeleton-text animated style="width: 120px; height: 20px;"></ion-skeleton-text>
+      </ion-item-divider>
+  
+      <ion-item style="padding-bottom: 6px;">
+        <ion-avatar slot="start" style="margin-right: 30px;">
+          <ion-skeleton-text animated style="width: 40px; height: 40px; border-radius: 0;"></ion-skeleton-text>
+        </ion-avatar>
+        <ion-label>
+          <ion-skeleton-text animated style="width: 150px; height: 20px; margin-bottom: 10px;"></ion-skeleton-text>
+          <ion-skeleton-text animated style="width: 250px; height: 14px; margin-bottom: 12px;"></ion-skeleton-text>
+          <ion-skeleton-text animated style="width: 350px;"></ion-skeleton-text>
+        </ion-label>
+        <ion-button *ngIf="entry === 'second'" slot="end" fill="clear">
+          <ion-skeleton-text animated style="width: 60px; border-radius: 0"></ion-skeleton-text>
+        </ion-button>
+      </ion-item>
+    </div>
+  </ion-item-group>
+
+  <!-- not loading -->
   <ion-item-group *ngIf="!loading">
 
-    <ion-item-divider>Current Session</ion-item-divider>
+    <ion-item-divider>This Session</ion-item-divider>
     <ion-item *ngIf="sessionInfo.sessions[sessionInfo.current] as current">
-      <ion-icon slot="start" [name]="getPlatformIcon(current.metadata.platforms)"></ion-icon>
-      <ion-label class="ion-text-wrap">
+      <ion-icon slot="start" size="large" [name]="getPlatformIcon(current.metadata.platforms)"></ion-icon>
+      <ion-label>
         <h1>{{ getPlatformName(current.metadata.platforms) }}</h1>
         <h2>Last Active: {{ current['last-active'] | date : 'medium' }}</h2>
         <p>{{ current['user-agent'] }}</p>
@@ -28,8 +51,8 @@
         [id]="session.key"
         *ngIf="session.key !== sessionInfo.current"
       >
-        <ion-icon slot="start" [name]="getPlatformIcon(session.value.metadata.platforms)"></ion-icon>
-        <ion-label class="ion-text-wrap">
+        <ion-icon slot="start" size="large" [name]="getPlatformIcon(session.value.metadata.platforms)"></ion-icon>
+        <ion-label>
           <h1>{{ getPlatformName(session.value.metadata.platforms) }}</h1>
           <h2>Last Active: {{ session.value['last-active'] | date : 'medium' }}</h2>
           <p>{{ session.value['user-agent'] }}</p>

ui/src/app/pages/server-routes/security-routes/ssh-keys/ssh-keys.page.html

@@ -4,38 +4,62 @@
       <pwa-back-button></pwa-back-button>
     </ion-buttons>
     <ion-title>SSH Keys</ion-title>
-    <ion-buttons slot="end">
-      <ion-button (click)="serverConfig.presentAlert('ssh')">
-        <ion-icon slot="icon-only" name="add-outline"></ion-icon>
-      </ion-button>
-    </ion-buttons>
   </ion-toolbar>
 </ion-header>
 
 <ion-content class="ion-padding-top">
-  <text-spinner *ngIf="loading" text="Loading Keys"></text-spinner>
 
-  <ion-item-group *ngIf="!loading">
-    <!-- about -->
+  <!-- always -->
+  <ion-item-group>
     <ion-item>
-      <ion-label class="ion-text-wrap">
-        <p class="ion-padding-bottom">About</p>
-        <h2>Adding an SSH key to your Embassy can be useful for advanced usage from the command line, as well as for debugging purposes.</h2>
+      <ion-label>
+        <h2>
+          Adding SSH keys to your Embassy is useful for command line access, as well as for debugging purposes.
+          <a [href]="docsUrl" target="_blank">View instructions</a>
+        </h2>
       </ion-label>
     </ion-item>
-    <ion-item [href]="docsUrl" target="_blank" detail="false">
-      <ion-icon slot="start" name="list-outline"></ion-icon>
-      <ion-label>View Instructions</ion-label>
-    </ion-item>
+
     <ion-item-divider>Saved Keys</ion-item-divider>
-    <ion-item *ngFor="let ssh of sshKeys | keyvalue : asIsOrder">
-      <ion-label class="ion-text-wrap">
-        {{ ssh.value.alg }} {{ ssh.key }} {{ ssh.value.hostname }}
-      </ion-label>
-      <ion-button slot="end" fill="clear" (click)="presentAlertDelete(ssh.key)">
-        <ion-icon slot="icon-only" name="close"></ion-icon>
-      </ion-button>
+
+    <ion-item button detail="false" (click)="serverConfig.presentInputModal('ssh')">
+      <ion-icon slot="start" name="add" size="large"></ion-icon>
+      <ion-label>Add new key</ion-label>
     </ion-item>
+
+    <!-- loading  -->
+    <ng-container *ngIf="loading">
+      <ion-item *ngFor="let entry of ['', '']">
+        <ion-button slot="start" fill="clear">
+          <ion-skeleton-text animated style="width: 30px; height: 30px; border-radius: 0;"></ion-skeleton-text>
+        </ion-button>
+        <ion-label>
+          <ion-skeleton-text animated style="width: 15%; height: 20px; margin-bottom: 12px;"></ion-skeleton-text>
+          <ion-skeleton-text animated style="width: 50%; margin-bottom: 18px;"></ion-skeleton-text>
+          <ion-skeleton-text animated style="width: 20%;"></ion-skeleton-text>
+        </ion-label>
+        <ion-button slot="end" fill="clear">
+          <ion-skeleton-text animated style="width: 80px; border-radius: 0"></ion-skeleton-text>
+        </ion-button>
+      </ion-item>
+    </ng-container>
+
+    <!-- not loading -->
+    <ng-container *ngIf="!loading">
+      <ion-item *ngFor="let ssh of sshKeys | keyvalue : asIsOrder">
+        <ion-icon slot="start" name="key-outline" size="large"></ion-icon>
+        <ion-label>
+          <h1>{{ ssh.value.hostname }}</h1>
+          <h2>{{ ssh.value['created-at'] | date: 'short' }}</h2>
+          <p>{{ ssh.value.alg }} {{ ssh.key }}</p>
+        </ion-label>
+        <ion-button slot="end" fill="clear" color="danger" (click)="presentAlertDelete(ssh.key)">
+          <ion-icon slot="start" name="close"></ion-icon>
+          Remove
+        </ion-button>
+      </ion-item>
+    </ng-container> 
+
   </ion-item-group>
 
 </ion-content>

ui/src/app/pages/server-routes/server-backup/server-backup.page.html

@@ -4,11 +4,6 @@
       <pwa-back-button></pwa-back-button>
     </ion-buttons>
     <ion-title>Create Backup</ion-title>
-    <ion-buttons slot="end">
-      <ion-button (click)="doRefresh()">
-        <ion-icon slot="icon-only" name="refresh-outline"></ion-icon>
-      </ion-button>
-    </ion-buttons>
   </ion-toolbar>
 </ion-header>
 
@@ -18,45 +13,33 @@
   <ng-template #loaded>
 
     <ion-item class="ion-margin-bottom">
-      <ion-label class="ion-text-wrap">
-        <p class="ion-padding-bottom">About</p>
+      <ion-label>
         <h2>
-          Create frequent backups of your Embassy to avoid loss of data.
+          Select the drive where you want to create a backup of your Embassy, including all your installed services.
         </h2>
       </ion-label>
     </ion-item>
 
-    <ion-item-divider>Select Backup Drive</ion-item-divider>
-
     <ion-item *ngIf="allPartitionsMounted">
-      <ion-text *ngIf="type === 'create'" class="ion-text-wrap" color="warning">No partitions available. To begin a backup, insert a storage device into your Embassy.</ion-text>
-      <ion-text *ngIf="type === 'restore'" class="ion-text-wrap" color="warning">No partitions available. Insert the storage device containing the backup you wish to restore.</ion-text>
+      <ion-text class="ion-text-wrap" color="warning">No partitions available. To begin a backup, insert a storage device into your Embassy.</ion-text>
     </ion-item>
 
-    <ion-card *ngFor="let disk of disks | keyvalue">
-      <ion-card-header>
-        <ion-card-title>
-          {{ disk.value.size }}
-        </ion-card-title>
-        <ion-card-subtitle>
-          {{ disk.key }}
-        </ion-card-subtitle>
-      </ion-card-header>
-      <ion-card-content>
-        <ion-item-group>
-          <ion-item button *ngFor="let partition of disk.value.partitions | keyvalue" [disabled]="partition.value['is-mounted']" (click)="presentModal(partition.key)">
-            <ion-icon slot="start" name="save-outline"></ion-icon>
-            <ion-label>
-              <h2>{{ partition.value.label || partition.key }} ({{ partition.value.size || 'unknown size' }})</h2>
-              <p *ngIf="!partition.value['is-mounted']; else unavailable"><ion-text color="success">Available</ion-text></p>
-              <ng-template #unavailable>
-                <p><ion-text color="danger">Unavailable</ion-text></p>
-              </ng-template>
-            </ion-label>
-          </ion-item>
-        </ion-item-group>
-      </ion-card-content>
-    </ion-card>
+    <ion-item-group>
+      <div *ngFor="let disk of disks | keyvalue">
+        <ion-item-divider>{{ disk.key }} - {{ disk.value.size }}</ion-item-divider>
+        <ion-item button *ngFor="let partition of disk.value.partitions | keyvalue" [disabled]="partition.value['is-mounted']" (click)="presentModal(partition.key)">
+          <ion-icon slot="start" name="save-outline" size="large"></ion-icon>
+          <ion-label>
+            <h1>{{ partition.value.label || partition.key }}</h1>
+            <h2>{{ partition.value.size || 'unknown size' }}</h2>
+            <p *ngIf="!partition.value['is-mounted']; else unavailable"><ion-text color="success">Available</ion-text></p>
+            <ng-template #unavailable>
+              <p><ion-text color="danger">Unavailable</ion-text></p>
+            </ng-template>
+          </ion-label>
+        </ion-item>
+      </div>
+    </ion-item-group>
   </ng-template>
 
 </ion-content>

ui/src/app/pages/server-routes/server-backup/server-backup.page.ts

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core'
-import { LoadingController, ModalController } from '@ionic/angular'
+import { ModalController } from '@ionic/angular'
 import { ApiService } from 'src/app/services/api/embassy-api.service'
 import { BackupConfirmationComponent } from 'src/app/modals/backup-confirmation/backup-confirmation.component'
 import { DiskInfo } from 'src/app/services/api/api.types'
@@ -19,7 +19,6 @@ export class ServerBackupPage {
     private readonly modalCtrl: ModalController,
     private readonly embassyApi: ApiService,
     private readonly errToast: ErrorToastService,
-    private readonly loadingCtrl: LoadingController,
   ) { }
 
   ngOnInit () {
@@ -45,36 +44,21 @@ export class ServerBackupPage {
   async presentModal (logicalname: string): Promise<void> {
     const m = await this.modalCtrl.create({
       componentProps: {
-        type: 'backup',
+        title: 'Create Backup',
+        message: `Enter your master password to create an encrypted backup of your Embassy and all its installed services.`,
+        label: 'Password',
+        useMask: true,
+        buttonText: 'Create Backup',
+        submitFn: async (value: string) => await this.create(logicalname, value),
       },
       cssClass: 'alertlike-modal',
       component: BackupConfirmationComponent,
-      backdropDismiss: false,
-    })
-
-    m.onWillDismiss().then(res => {
-      const data = res.data
-      if (data.cancel) return
-      this.create(logicalname, data.password)
     })
 
     return await m.present()
   }
 
   private async create (logicalname: string, password: string): Promise<void> {
-    const loader = await this.loadingCtrl.create({
-      spinner: 'lines',
-      message: 'Starting backup...',
-      cssClass: 'loader',
-    })
-    await loader.present()
-
-    try {
-      await this.embassyApi.createBackup({ logicalname, password })
-    } catch (e) {
-      this.errToast.present(e)
-    } finally {
-      loader.dismiss()
-    }
+    await this.embassyApi.createBackup({ logicalname, password })
   }
 }

ui/src/app/pages/server-routes/server-metrics/server-metrics.page.html

@@ -8,7 +8,7 @@
 </ion-header>
 
 <ion-content class="ion-padding">
-  <skeleton-list *ngIf="loading; else loaded" groups="3"></skeleton-list>
+  <skeleton-list *ngIf="loading; else loaded" groups="2"></skeleton-list>
 
   <ng-template #loaded>
     <ion-item-group *ngFor="let metricGroup of metrics | keyvalue : asIsOrder">

ui/src/app/pages/server-routes/server-specs/server-specs.page.html

@@ -40,7 +40,7 @@
       </ion-button>
     </ion-item>
 
-    <ion-item-divider>Specs</ion-item-divider>
+    <ion-item-divider>Hardware Specs</ion-item-divider>
 
     <ion-item *ngFor="let spec of server.specs | keyvalue : asIsOrder">
       <ion-label>

ui/src/app/pages/server-routes/wifi/wifi.page.html

@@ -15,7 +15,7 @@
 <ion-content class="ion-padding-top">
   <ion-item-group>
     <ion-item>
-      <ion-label class="ion-text-wrap">
+      <ion-label>
         <p style="padding-bottom: 6px;">About</p>
         <h2>Embassy will automatically connect to saved WiFi networks when they are available, allowing you to remove the Ethernet cable.</h2>
       </ion-label>