rework modals and more

ui/src/app/modals/app-config-injectable.ts

@@ -0,0 +1,19 @@
+import { AppConfigObjectPage } from './app-config-object/app-config-object.page'
+import { AppConfigListPage } from './app-config-list/app-config-list.page'
+import { AppConfigUnionPage } from './app-config-union/app-config-union.page'
+import { AppConfigValuePage } from './app-config-value/app-config-value.page'
+import { Type } from '@angular/core'
+import { ValueType } from 'src/app/pkg-config/config-types'
+
+export const appConfigComponents: AppConfigComponentMapping = {
+  'string': AppConfigValuePage,
+  'number': AppConfigValuePage,
+  'enum': AppConfigValuePage,
+  'boolean': AppConfigValuePage,
+  'list': AppConfigListPage,
+  'object': AppConfigObjectPage,
+  'union': AppConfigUnionPage,
+  'pointer': undefined,
+}
+
+export type AppConfigComponentMapping = { [k in ValueType]: Type<any> }

ui/src/app/modals/app-config-injectable/modal-injectable-token.ts

@@ -1,3 +0,0 @@
-import { InjectionToken } from '@angular/core'
-
-export const APP_CONFIG_COMPONENT_MAPPING = new InjectionToken<string>('APP_CONFIG_COMPONENTS')

ui/src/app/modals/app-config-injectable/modal-injectable-type.ts

@@ -1,4 +0,0 @@
-import { Type } from '@angular/core'
-import { ValueType } from 'src/app/pkg-config/config-types'
-
-export type AppConfigComponentMapping = { [k in ValueType]: Type<any> }

ui/src/app/modals/app-config-injectable/modal-injectable-value.ts

@@ -1,16 +0,0 @@
-import { AppConfigObjectPage } from '../app-config-object/app-config-object.page'
-import { AppConfigListPage } from '../app-config-list/app-config-list.page'
-import { AppConfigUnionPage } from '../app-config-union/app-config-union.page'
-import { AppConfigValuePage } from '../app-config-value/app-config-value.page'
-import { AppConfigComponentMapping } from './modal-injectable-type'
-
-export const appConfigComponents: AppConfigComponentMapping = {
-  'string': AppConfigValuePage,
-  'number': AppConfigValuePage,
-  'enum': AppConfigValuePage,
-  'boolean': AppConfigValuePage,
-  'list': AppConfigListPage,
-  'object': AppConfigObjectPage,
-  'union': AppConfigUnionPage,
-  'pointer': undefined,
-}

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

@@ -1,8 +1,7 @@
 import { Component, Input } from '@angular/core'
 import { getDefaultConfigValue, getDefaultDescription, Range } from 'src/app/pkg-config/config-utilities'
-import { AlertController, ToastController } from '@ionic/angular'
+import { AlertController, ModalController, ToastController } from '@ionic/angular'
 import { LoaderService } from 'src/app/services/loader.service'
-import { TrackingModalController } from 'src/app/services/tracking-modal-controller.service'
 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'
@@ -31,7 +30,7 @@ export class AppConfigValuePage {
 
   constructor (
     private readonly loader: LoaderService,
-    private readonly trackingModalCtrl: TrackingModalController,
+    private readonly modalCtrl: ModalController,
     private readonly alertCtrl: AlertController,
     private readonly toastCtrl: ToastController,
   ) { }
@@ -58,7 +57,7 @@ export class AppConfigValuePage {
     if ((!!this.saveFn && this.edited) || (!this.saveFn && this.error)) {
       await this.presentAlert()
     } else {
-      await this.trackingModalCtrl.dismiss()
+      await this.modalCtrl.dismiss()
     }
   }
 
@@ -76,7 +75,7 @@ export class AppConfigValuePage {
       }),
     )
 
-    await this.trackingModalCtrl.dismiss(this.value)
+    await this.modalCtrl.dismiss(this.value)
   }
 
   refreshDefault () {
@@ -172,7 +171,7 @@ export class AppConfigValuePage {
           text: `Leave`,
           cssClass: 'alert-danger',
           handler: () => {
-            this.trackingModalCtrl.dismiss()
+            this.modalCtrl.dismiss()
           },
         },
       ],

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

@@ -1,10 +1,14 @@
-<!-- TODO: EJECT-DISKS, add a check box to allow a user to eject a disk on backup completion. -->
 <ion-content>
-  <div style="height: 85%; margin: 20px; display: flex; flex-direction: column; justify-content: space-between;">
-    <div>
-      <h4><ion-text color="dark">Ready to Backup</ion-text></h4>
+  <div style="height: 85%; margin: 24px; display: flex; flex-direction: column; justify-content: space-between;">
+    <div *ngIf="type === 'backup'">
+      <h4><ion-text color="dark">Encrypt Backup</ion-text></h4>
       <p><ion-text color="medium">Enter your master password to create an encrypted backup.</ion-text></p>  
     </div>
+    <div *ngIf="type === 'restore'">
+      <h4><ion-text color="dark">Decrypt Backup</ion-text></h4>
+      <p><ion-text color="medium">Enter the password that was originally used to encrypt this backup.</ion-text></p>  
+    </div>
+
     <div>
       <ion-item lines="none" style="--background: var(--ion-background-color); --border-color: var(--ion-color-medium);">
         <ion-label style="font-size: small" position="floating">Master Password</ion-label>
@@ -14,12 +18,13 @@
         <ion-label style="font-size: small" color="danger" class="ion-text-wrap">{{ error }}</ion-label>
       </ion-item>
     </div>
+
     <div style="display: flex; justify-content: flex-end; align-items: center;">
       <ion-button fill="clear" color="medium" (click)="cancel()">
         Cancel
       </ion-button>
-      <ion-button fill="clear" color="primary" (click)="submit()">
-        Create Backup
+      <ion-button fill="clear" (click)="submit()">
+        {{ type === 'backup' ? 'Create Backup' : 'Restore Backup' }}
       </ion-button>
     </div>
   </div>

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

@@ -1,6 +1,5 @@
 import { Component, Input } from '@angular/core'
 import { ModalController } from '@ionic/angular'
-import { PartitionInfo } from 'src/app/services/api/api-types'
 
 @Component({
   selector: 'backup-confirmation',
@@ -8,20 +7,15 @@ import { PartitionInfo } from 'src/app/services/api/api-types'
   styleUrls: ['./backup-confirmation.component.scss'],
 })
 export class BackupConfirmationComponent {
-  @Input() name: string
+  @Input() type: 'backup' | 'restore'
   unmasked = false
-  password: string
-  message: string
+  password = ''
   error = ''
 
   constructor (
     private readonly modalCtrl: ModalController,
   ) { }
 
-  ngOnInit () {
-    this.message = `Enter your master password to create an encrypted backup on "${this.name}".`
-  }
-
   toggleMask () {
     this.unmasked = !this.unmasked
   }

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

@@ -0,0 +1,15 @@
+import { NgModule } from '@angular/core'
+import { CommonModule } from '@angular/common'
+import { IonicModule } from '@ionic/angular'
+import { MarkdownPage } from './markdown.page'
+import { SharingModule } from 'src/app/modules/sharing.module'
+
+@NgModule({
+  imports: [
+    CommonModule,
+    IonicModule,
+    SharingModule,
+  ],
+  declarations: [MarkdownPage],
+})
+export class MarkdownPageModule { }

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

@@ -0,0 +1,3 @@
+<ion-content>
+  <div [innerHTML]="content | markdown"></div>
+</ion-content>

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

@@ -0,0 +1,19 @@
+import { Component, Input } from '@angular/core'
+import { ModalController } from '@ionic/angular'
+
+@Component({
+  selector: 'markdown',
+  templateUrl: './markdown.page.html',
+  styleUrls: ['./markdown.page.scss'],
+})
+export class MarkdownPage {
+  @Input() content: string
+
+  constructor (
+    private readonly modalCtrl: ModalController,
+  ) { }
+
+  async dismiss () {
+    return this.modalCtrl.dismiss(true)
+  }
+}