refactor loaders, better err toasts, rework Embassy tab organization

ui/src/app/modals/app-action-input/app-action-input.page.ts

@@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core'
 import { LoadingController, ModalController } from '@ionic/angular'
 import { ConfigCursor } from 'src/app/pkg-config/config-cursor'
 import { ValueSpecObject } from 'src/app/pkg-config/config-types'
-import { LoaderService } from 'src/app/services/loader.service'
+import { ErrorToastService } from 'src/app/services/error-toast.service'
 import { Action } from 'src/app/services/patch-db/data-model'
 
 @Component({
@@ -20,8 +20,8 @@ export class AppActionInputPage {
 
   constructor (
     private readonly modalCtrl: ModalController,
+    private readonly errToast: ErrorToastService,
     private readonly loadingCtrl: LoadingController,
-    private loaderService: LoaderService,
   ) { }
 
   ngOnInit () {
@@ -35,18 +35,21 @@ export class AppActionInputPage {
   }
 
   async save (): Promise<void> {
-    this.loaderService.of({
+    const loader = await this.loadingCtrl.create({
       spinner: 'lines',
       message: 'Executing action',
       cssClass: 'loader-ontop-of-all',
-    }).displayDuringAsync(async () => {
-      try {
-        await this.execute()
-        this.modalCtrl.dismiss()
-      } catch (e) {
-        this.error = e.message
-      }
     })
+    await loader.present()
+
+    try {
+      await this.execute()
+      this.modalCtrl.dismiss()
+    } catch (e) {
+      this.errToast.present(e)
+    } finally {
+      loader.dismiss()
+    }
   }
 
   handleObjectEdit (): void {

ui/src/app/modals/app-config-value/app-config-value.page.ts

@@ -1,10 +1,10 @@
 import { Component, Input } from '@angular/core'
 import { getDefaultConfigValue, getDefaultDescription, Range } from 'src/app/pkg-config/config-utilities'
-import { AlertController, ModalController, ToastController } from '@ionic/angular'
-import { LoaderService } from 'src/app/services/loader.service'
+import { AlertController, LoadingController, ModalController, ToastController } from '@ionic/angular'
 import { ConfigCursor } from 'src/app/pkg-config/config-cursor'
 import { ValueSpecOf } from 'src/app/pkg-config/config-types'
 import { copyToClipboard } from 'src/app/util/web.util'
+import { ErrorToastService } from 'src/app/services/error-toast.service'
 
 @Component({
   selector: 'app-config-value',
@@ -29,10 +29,11 @@ export class AppConfigValuePage {
   rangeDescription: string
 
   constructor (
-    private readonly loader: LoaderService,
+    private readonly loadingCtrl: LoadingController,
     private readonly modalCtrl: ModalController,
     private readonly alertCtrl: AlertController,
     private readonly toastCtrl: ToastController,
+    private readonly errToast: ErrorToastService,
   ) { }
 
   ngOnInit () {
@@ -68,14 +69,21 @@ export class AppConfigValuePage {
       this.value = Number(this.value)
     }
 
-    this.loader.displayDuringP(
-      this.saveFn(this.value).catch(e => {
-        console.error(e)
-        this.error = e.message
-      }),
-    )
+    const loader = await this.loadingCtrl.create({
+      spinner: 'lines',
+      message: 'Saving...',
+      cssClass: 'loader',
+    })
+    await loader.present()
 
-    await this.modalCtrl.dismiss(this.value)
+    try {
+      await this.saveFn(this.value)
+      this.modalCtrl.dismiss(this.value)
+    } catch (e) {
+      this.errToast.present(e)
+    } finally {
+      loader.dismiss()
+    }
   }
 
   refreshDefault () {

ui/src/app/modals/backup-confirmation/backup-confirmation.component.html

@@ -20,10 +20,10 @@
     </div>
 
     <div style="display: flex; justify-content: flex-end; align-items: center;">
-      <ion-button fill="clear" color="medium" (click)="cancel()">
+      <ion-button fill="clear" (click)="cancel()">
         Cancel
       </ion-button>
-      <ion-button fill="clear" (click)="submit()">
+      <ion-button fill="clear" (click)="submit()" [disabled]="!password.length">
         {{ type === 'backup' ? 'Create Backup' : 'Restore Backup' }}
       </ion-button>
     </div>

ui/src/app/modals/markdown/markdown.page.ts

@@ -24,8 +24,7 @@ export class MarkdownPage {
     try {
       this.content = await this.embassyApi.getStatic(this.contentUrl)
     } catch (e) {
-      console.error(e.message)
-      this.errToast.present(e.message)
+      this.errToast.present(e)
     } finally {
       this.loading = false
     }

ui/src/app/modals/os-welcome/os-welcome.page.html

@@ -1,16 +1,15 @@
 <ion-header>
   <ion-toolbar>
-    <ion-title >
-      <ion-label style="font-size: 20px;" class="ion-text-wrap">Welcome to {{ version }}!</ion-label>
-    </ion-title>
+    <ion-title>Welcome to {{ version }}!</ion-title>
   </ion-toolbar>
 </ion-header>
 
 <ion-content class="ion-padding">
   <div style="display: flex; flex-direction: column; justify-content: space-between; height: 100%">
-    <h2>Highlights</h2>
+    <h2>A Whole New Embassy</h2>
     <div class="main-content">
-      <p>This release fixes a bug with certificate generation that caused the Embassy web interface to become inaccessible</p>
+      <p>Version {{ version }} is something new.</p>
+      <p>This release also enables displaying Service license information and contains utilities to facilitate the next major release of EmbassyOS.</p>
     </div>
 
     <div class="close-button">

ui/src/app/modals/os-welcome/os-welcome.page.ts

@@ -1,7 +1,5 @@
 import { Component, Input } from '@angular/core'
 import { ModalController } from '@ionic/angular'
-import { ApiService } from 'src/app/services/api/embassy/embassy-api.service'
-import { ConfigService } from 'src/app/services/config.service'
 
 @Component({
   selector: 'os-welcome',
@@ -13,16 +11,9 @@ export class OSWelcomePage {
 
   constructor (
     private readonly modalCtrl: ModalController,
-    private readonly embassyApi: ApiService,
-    private readonly config: ConfigService,
   ) { }
 
   async dismiss () {
-    this.embassyApi.setDbValue({ pointer: '/welcome-ack', value: this.config.version })
-    .catch(console.error)
-
-    // return false to skip subsequent alert modals (e.g. check for updates modals)
-    // return true to show subsequent alert modals
-    return this.modalCtrl.dismiss(true)
+    return this.modalCtrl.dismiss()
   }
 }