From 4aaddb233a041b02fd7ec1f0660fe4124c26e4c1 Mon Sep 17 00:00:00 2001
From: Aaron Greenspan <afg419@gmail.com>
Date: Thu, 7 Jan 2021 14:33:10 -0700
Subject: [PATCH] ui: finalize toast

---
 .../app-backup-confirmation.component.html    | 54 ++++++++----------
 ...pp-backup-confirmation.component.module.ts |  2 +
 .../modals/app-backup/app-backup.page.scss    |  3 +
 .../app/modals/app-backup/app-backup.page.ts  | 56 +++----------------
 .../app-installed-show.module.ts              |  1 +
 ui/src/global.scss                            | 28 +++++++++-
 ui/use-mocks.json                             |  2 +-
 7 files changed, 66 insertions(+), 80 deletions(-)

diff --git a/ui/src/app/components/app-backup-confirmation/app-backup-confirmation.component.html b/ui/src/app/components/app-backup-confirmation/app-backup-confirmation.component.html
index 5892fcf34..21f208b0b 100644
--- a/ui/src/app/components/app-backup-confirmation/app-backup-confirmation.component.html
+++ b/ui/src/app/components/app-backup-confirmation/app-backup-confirmation.component.html
@@ -1,37 +1,29 @@
-<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> -->
+  <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>
+      <p><ion-text color="medium">Enter your master password to create an encrypted 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>
+        <ion-input style="border-style: solid; border-width: 0px 0px 1px 0px; border-color: var(--ion-color-dark);" [(ngModel)]="password" type="password" (ionChange)="$error$.next('')"></ion-input>
       </ion-item>
-      <ion-item *ngIf="$error$ | async as e" lines="none">
-        <ion-label class="ion-text-wrap" color="danger">{{ e }}</ion-label>
+      <ion-item *ngIf="$error$ | async as e" lines="none" style="--background: var(--ion-background-color);">
+        <ion-label style="font-size: small" color="danger" class="ion-text-wrap">{{e}}</ion-label>
       </ion-item>
-      <ion-item-divider></ion-item-divider>
-      <ion-item>
-        <ion-label>Eject drive when backup complete?</ion-label>
+      <ion-item lines="none" style="--background: var(--ion-background-color)">
+        <ion-label class="ion-text-wrap" color="medium" style="font-size: small">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>
+    </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>
+    </div>
+  </div>
 </ion-content>
diff --git a/ui/src/app/components/app-backup-confirmation/app-backup-confirmation.component.module.ts b/ui/src/app/components/app-backup-confirmation/app-backup-confirmation.component.module.ts
index a58887404..96a63136a 100644
--- a/ui/src/app/components/app-backup-confirmation/app-backup-confirmation.component.module.ts
+++ b/ui/src/app/components/app-backup-confirmation/app-backup-confirmation.component.module.ts
@@ -4,6 +4,7 @@ import { AppBackupConfirmationComponent } from './app-backup-confirmation.compon
 import { IonicModule } from '@ionic/angular'
 import { RouterModule } from '@angular/router'
 import { SharingModule } from 'src/app/modules/sharing.module'
+import { FormsModule } from '@angular/forms';
 
 @NgModule({
   declarations: [
@@ -14,6 +15,7 @@ import { SharingModule } from 'src/app/modules/sharing.module'
     IonicModule,
     RouterModule.forChild([]),
     SharingModule,
+    FormsModule,
   ],
   exports: [AppBackupConfirmationComponent],
 })
diff --git a/ui/src/app/modals/app-backup/app-backup.page.scss b/ui/src/app/modals/app-backup/app-backup.page.scss
index e69de29bb..7b51120cb 100644
--- a/ui/src/app/modals/app-backup/app-backup.page.scss
+++ b/ui/src/app/modals/app-backup/app-backup.page.scss
@@ -0,0 +1,3 @@
+.toast-close-button {
+  color: var(--ion-color-primary) !important;
+}
diff --git a/ui/src/app/modals/app-backup/app-backup.page.ts b/ui/src/app/modals/app-backup/app-backup.page.ts
index 0825310a6..2499f83f8 100644
--- a/ui/src/app/modals/app-backup/app-backup.page.ts
+++ b/ui/src/app/modals/app-backup/app-backup.page.ts
@@ -90,7 +90,9 @@ export class AppBackupPage {
         app: this.app,
         partition,
       },
+      cssClass: 'alertlike-modal',
       component: AppBackupConfirmationComponent,
+      backdropDismiss: false,
     })
 
     m.onWillDismiss().then(res => {
@@ -100,43 +102,6 @@ export class AppBackupPage {
     })
 
     return await m.present()
-    // const alert = await this.alertCtrl.create({
-    //   backdropDismiss: false,
-    //   header: `Ready to Backup`,
-    //   message: `Enter your master password to create an encrypted backup of ${this.app.title} to "${partition.label || partition.logicalname}".`,
-    //   inputs: [
-    //     {
-    //       name: 'password',
-    //       label: 'Password',
-    //       type: 'password',
-    //       placeholder: 'Master Password',
-    //     },
-    //     {
-    //       name: 'eject',
-    //       label: 'Eject drive when finished',
-    //       placeholder: 'Eject drive when',
-    //       type: 'checkbox',
-    //     },
-    //   ],
-    //   buttons: [
-    //     {
-    //       text: 'Cancel',
-    //       role: 'cancel',
-    //     },
-    //     {
-    //       text: 'Create Backup',
-    //       handler: async (data) => {
-    //         if (!data.password || data.password.length < 12) {
-    //           alert.message = new IonicSafeString(alert.message + '<br /><br /><ion-text color="danger">Password must be at least 12 characters in length.</ion-text>')
-    //           return false
-    //         } else {
-    //           return this.create(disk, partition, data.password, data.eject)
-    //         }
-    //       },
-    //     },
-    //   ],
-    // })
-    // await alert.present()
   }
 
   private async presentAlertWarn (partition: DiskPartition): Promise<void> {
@@ -223,8 +188,8 @@ export class AppBackupPage {
         this.appModel.watchForBackup(this.app.id).pipe(concatMap(
           () => this.apiService.ejectExternalDisk(disk.logicalname),
         )).subscribe({
-          next: () => this.toastEjection(true),
-          error: () => this.toastEjection(false),
+          next: () => this.toastEjection(disk, true),
+          error: () => this.toastEjection(disk, false),
         })
       }
       await this.dismiss()
@@ -236,24 +201,21 @@ export class AppBackupPage {
     }
   }
 
-  private async toastEjection (success: boolean) {
+  private async toastEjection (disk: DiskInfo, success: boolean) {
     const { header, message, cssClass } = success ? {
       header: 'Success',
-      message: 'Drive ejected successfully',
-      cssClass: '',
+      message: `Drive ${disk.logicalname} ejected successfully`,
+      cssClass: 'notification-toast',
     } : {
       header: 'Error',
-      message: 'Drive did not eject successfully',
+      message: `Drive ${disk.logicalname} did not eject successfully`,
       cssClass: 'alert-error-message',
     }
     const t = await this.toastCtrl.create({
       header,
       message,
       cssClass,
-      buttons: [{
-        icon: 'close-outline',
-        role: 'cancel',
-      }]
+      duration: 2000,
     })
     await t.present()
   }
diff --git a/ui/src/app/pages/apps-routes/app-installed-show/app-installed-show.module.ts b/ui/src/app/pages/apps-routes/app-installed-show/app-installed-show.module.ts
index c49ec7883..0d5ecdfce 100644
--- a/ui/src/app/pages/apps-routes/app-installed-show/app-installed-show.module.ts
+++ b/ui/src/app/pages/apps-routes/app-installed-show/app-installed-show.module.ts
@@ -40,3 +40,4 @@ const routes: Routes = [
   declarations: [AppInstalledShowPage],
 })
 export class AppInstalledShowPageModule { }
+
diff --git a/ui/src/global.scss b/ui/src/global.scss
index 1b9948100..5142d3276 100644
--- a/ui/src/global.scss
+++ b/ui/src/global.scss
@@ -91,7 +91,7 @@
   --button-color: var(--ion-color-primary);
   --border-color: var(--ion-color-warning);
   --border-style: solid;
-  --border-width: 2px;
+  --border-width: 1px;
   --color: white;
 }
 
@@ -194,6 +194,32 @@ ion-popover {
   }
 }
 
+
+@media (min-width:1000px) {
+  .alertlike-modal {
+    --backdrop-opacity: 0.7 !important;
+    .modal-wrapper {
+      height: 46% !important;
+      width: 46% !important;
+      left: 26% !important;
+      top: 26% !important;
+      --box-shadow: none !important;
+    }
+  }
+}
+
+
+.alertlike-modal {
+  --backdrop-opacity: 0.7 !important;
+  .modal-wrapper {
+    height: 60% !important;
+    width: 80% !important;
+    left: 10% !important;
+    top: 20% !important;
+    --box-shadow: none !important;
+  }
+}
+
 .alert-error-message {
   .alert-message {
     color: var(--ion-color-danger);
diff --git a/ui/use-mocks.json b/ui/use-mocks.json
index 2caee7215..3425efc8a 100644
--- a/ui/use-mocks.json
+++ b/ui/use-mocks.json
@@ -1,3 +1,3 @@
 {
-  "useMocks": true
+  "useMocks": false
 }