feat: add ability to restore backups without accessing filesystem (#513)

* feat: add ability to restore backups without accessing filesystem

* fix

android/app/build.gradle

@@ -7,8 +7,8 @@ android {
         applicationId "com.moimob.drinkable"
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 14900
-        versionName "1.49.0"
+        versionCode 15000
+        versionName "1.50.0"
         testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
         aaptOptions {
              // Files and dirs to omit from the packaged assets dir, modified to accommodate modern web apps.

fastlane/metadata/android/en-US/changelogs/15000.txt

@@ -0,0 +1 @@
+• Added ability to restore backup without accessing files in the filesystem

src/locales/en/translation.json

@@ -182,5 +182,8 @@
     "create-backup": "Create Backup",
     "backup-restore-warning-text": "Are you sure you want to restore this backup? This will overwrite your current data.",
     "backup-restored-successfully": "Backup restored successfully",
-    "backup-name-placeholder": "Backup {{date}}"
+    "backup-name-placeholder": "Backup {{date}}",
+    "paste-backup-content-title": "Paste Backup Content",
+    "paste-backup-content": "Paste the content of your backup file here to restore it",
+    "android-storage-limitations": "Due to Android 11 storage limitations, backups cannot be loaded if the app was reinstalled or backup was modified externally"
 }

src/modules/user/backups/backups.html

@@ -1,7 +1,31 @@
 <template>
     <div class="p-4 pt-0">
-        <div class="flex justify-end items-center mb-3">
-            <button click.delegate="openDialog()" class="btn btn-secondary" t="create" data-cy="create-backup"></button>
+        <div role="alert" class="alert alert-warning">
+            <svg
+                xmlns="http://www.w3.org/2000/svg"
+                class="stroke-current shrink-0 h-6 w-6"
+                fill="none"
+                viewBox="0 0 24 24">
+                <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+            </svg>
+            <span class="text-sm" t="android-storage-limitations"> </span>
+        </div>
+
+        <div class="flex justify-between items-center my-6">
+            <button
+                click.delegate="openLoadBackupDialog()"
+                class="btn"
+                t="restore-backup"
+                data-cy="load-backup"></button>
+            <button
+                click.delegate="openDialog()"
+                class="btn btn-secondary"
+                t="create-backup"
+                data-cy="create-backup"></button>
         </div>
         <div data-cy="backups-container">
             <div class="text-sm text-error font-semibold">${errorMessage}</div>

src/modules/user/backups/backups.ts

@@ -5,6 +5,7 @@ import { LocalStorageService } from 'services/local-storage-service';
 import { BackupDrawer } from './backup-drawer';
 import { drinkableBackupsPath } from './constants';
 import { RestoreBackupDialog } from './restore-backup-dialog';
+import { LoadBackupDialog } from './load-backup-dialog';
 
 @autoinject
 export class Backups {
@@ -82,6 +83,12 @@ export class Backups {
         });
     }
 
+    openLoadBackupDialog() {
+        this._dialogService.open({ viewModel: LoadBackupDialog, model: null, lock: true }).whenClosed(async () => {
+            await this.attached();
+        });
+    }
+
     restoreBackup(backup: BackupFileMetadata) {
         this._dialogService
             .open({

src/modules/user/backups/load-backup-dialog.html

@@ -0,0 +1,26 @@
+<template>
+    <ux-dialog class="small-dialog" data-cy="manage-cocktail-row-dialog">
+        <div click.delegate="cancel()">
+            <div click.delegate="$event.stopPropagation()" class="bg-base-100 modal-box relative m-auto p-4">
+                <label class="btn btn-sm btn-circle absolute right-2 top-2" click.trigger="cancel()">✕</label>
+                <h3 class="text-lg font-bold" t="paste-backup-content-title"></h3>
+
+                <div class="divider mt-2"></div>
+
+                <p class="text-sm font-semibold mb-2" t="paste-backup-content"></p>
+
+                <textarea class="textarea textarea-bordered w-full" value.bind="backupJson" rows="10"></textarea>
+
+                <div class="text-sm text-error font-semibold">${errorMessage}</div>
+
+                <div class="flex w-full justify-end mt-2">
+                    <button
+                        click.delegate="restoreBackup()"
+                        disabled.bind="isValid === false"
+                        class="btn btn-warning"
+                        t="restore-backup"></button>
+                </div>
+            </div>
+        </div>
+    </ux-dialog>
+</template>

src/modules/user/backups/load-backup-dialog.ts

@@ -0,0 +1,64 @@
+import { DialogController } from 'aurelia-dialog';
+import { autoinject, observable } from 'aurelia-framework';
+import { I18N } from 'aurelia-i18n';
+import { ToastService } from 'components/toast/toast-service';
+import { CocktailService } from 'services/cocktail-service';
+import { IngredientService } from 'services/ingredient-service';
+import { LocalStorageService } from 'services/local-storage-service';
+
+@autoinject()
+export class LoadBackupDialog {
+    public controller: DialogController;
+    @observable public backupJson: string;
+    public isValid = false;
+    errorMessage: string;
+
+    constructor(
+        private _dialogContoller: DialogController,
+        private _localStorageService: LocalStorageService,
+        private _ingredientService: IngredientService,
+        private _cocktailService: CocktailService,
+        private _toastService: ToastService,
+        private _i18n: I18N
+    ) {}
+
+    backupJsonChanged(newValue: string) {
+        this.isValid = this.IsValidJsonString(newValue.trim());
+    }
+
+    private IsValidJsonString(str: string): boolean {
+        try {
+            const json = JSON.parse(str);
+            console.log(json);
+            return typeof json === 'object';
+        } catch (e) {
+            console.log(e);
+            return false;
+        }
+    }
+
+    async restoreBackup() {
+        try {
+            this.errorMessage = '';
+            const backup = JSON.parse(this.backupJson);
+
+            await this._localStorageService.restoreBackup(backup);
+            this._ingredientService.reloadService();
+            this._cocktailService.reloadService();
+
+            this._toastService.addToastElement({
+                className: 'alert-success',
+                text: this._i18n.tr('backup-restored-successfully')
+            });
+
+            this._dialogContoller.ok();
+        } catch (error) {
+            console.log(error);
+            this.errorMessage = (error as Error).message;
+        }
+    }
+
+    cancel() {
+        this._dialogContoller.cancel();
+    }
+}