ui: modal direction

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

@@ -0,0 +1,37 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-title>
+      Confirm Backup
+    </ion-title>
+    <ion-buttons slot="start">
+      <ion-button slot="start" (click)="cancel()">
+        <ion-icon name="close-outline"></ion-icon>
+      </ion-button>
+    </ion-buttons>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+  <!-- <ion-label class="ion-text-wrap" style="margin: 20px">{{message}}</ion-label> -->
+  <form (submit)="submit()">
+    <ion-item-group>
+      <ion-item>
+        <ion-input [type]="unmasked ? 'text' : 'password'" name="password" placeholder="password" [(ngModel)]="password" (ionChange)="$error$.next('')"></ion-input>
+        <!-- <ion-button fill="clear" [color]="unmasked ? 'danger' : 'primary'" (click)="toggleMask()">
+          <ion-icon slot="icon-only" [name]="unmasked ? 'eye-off-outline' : 'eye-outline'" size="small"></ion-icon>
+        </ion-button> -->
+      </ion-item>
+      <ion-item *ngIf="$error$ | async as e" lines="none">
+        <ion-label class="ion-text-wrap" color="danger">{{ e }}</ion-label>
+      </ion-item>
+      <ion-item-divider></ion-item-divider>
+      <ion-item>
+        <ion-label>Eject drive when backup complete?</ion-label>
+        <ion-checkbox color="primary" checked slot="end" [(ngModel)]="eject"></ion-checkbox>
+      </ion-item>
+    </ion-item-group>
+    <ion-button type="submit" [disabled]="!password" style="margin-top: 30px" expand="block" fill="outline">
+      Backup
+    </ion-button>
+  </form>
+</ion-content>

ui/src/app/components/app-backup-confirmation/app-backup-confirmation.component.module.ts

@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core'
+import { CommonModule } from '@angular/common'
+import { AppBackupConfirmationComponent } from './app-backup-confirmation.component'
+import { IonicModule } from '@ionic/angular'
+import { RouterModule } from '@angular/router'
+import { SharingModule } from 'src/app/modules/sharing.module'
+
+@NgModule({
+  declarations: [
+    AppBackupConfirmationComponent,
+  ],
+  imports: [
+    CommonModule,
+    IonicModule,
+    RouterModule.forChild([]),
+    SharingModule,
+  ],
+  exports: [AppBackupConfirmationComponent],
+})
+export class AppBackupConfirmationComponentModule { }

ui/src/app/components/app-backup-confirmation/app-backup-confirmation.component.scss

@@ -0,0 +1,10 @@
+.error-message {
+  --background: var(--ion-color-danger);
+  margin: 12px;
+  border-radius: 3px;
+  font-weight: bold;
+}
+
+.legacy-error-message {
+  margin: 5px;
+}

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

@@ -0,0 +1,43 @@
+import { Component, Input, OnInit } from '@angular/core'
+import { IonicSafeString, ModalController } from '@ionic/angular'
+import { BehaviorSubject } from 'rxjs'
+import { AppInstalledFull } from 'src/app/models/app-types'
+import { DiskPartition } from 'src/app/models/server-model'
+
+@Component({
+  selector: 'app-backup-confirmation',
+  templateUrl: './app-backup-confirmation.component.html',
+  styleUrls: ['./app-backup-confirmation.component.scss'],
+})
+export class AppBackupConfirmationComponent implements OnInit {
+  unmasked = false
+  password: string
+  $error$: BehaviorSubject<string> = new BehaviorSubject('')
+  eject = true
+  message: string
+
+  @Input() app: AppInstalledFull
+  @Input() partition: DiskPartition
+
+  constructor (private readonly modalCtrl: ModalController) { }
+  ngOnInit () {
+    this.message = `Enter your master password to create an encrypted backup of ${this.app.title} to "${this.partition.label || this.partition.logicalname}".`
+  }
+
+  toggleMask () {
+    this.unmasked = !this.unmasked
+  }
+
+  cancel() {
+    this.modalCtrl.dismiss({ cancel: true })
+  }
+
+  submit () {
+    if (!this.password || this.password.length < 12) {
+      this.$error$.next('Password must be at least 12 characters in length.')
+      return
+    }
+    const { password, eject } = this
+    this.modalCtrl.dismiss({ password, eject })
+  }
+}