From 2b06c646649ed00ce4f7633a437ca6e4a45cc28b Mon Sep 17 00:00:00 2001
From: Trent Larson <trent@trentlarson.com>
Date: Thu, 28 Dec 2023 14:42:56 -0700
Subject: [PATCH 1/4] make a backup download for browsers that don't get it
 automatically

---
 src/views/AccountViewView.vue | 39 +++++++++++++++++++++++++++++------
 1 file changed, 33 insertions(+), 6 deletions(-)

diff --git a/src/views/AccountViewView.vue b/src/views/AccountViewView.vue
index 0cd3c58..f1164c6 100644
--- a/src/views/AccountViewView.vue
+++ b/src/views/AccountViewView.vue
@@ -162,7 +162,9 @@
     >
       Backup Identifier Seed
     </router-link>
+
     <a
+      v-bind:class="computedStartDownloadLinkClassNames()"
       class="block w-full text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md mb-6"
       @click="exportDatabase()"
     >
@@ -170,7 +172,13 @@
       <br />
       (excluding Identifier Data)
     </a>
-    <a ref="downloadLink" />
+    <a
+      ref="downloadLink"
+      v-bind:class="computedDownloadLinkClassNames()"
+      class="block w-full text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md mb-6"
+    >
+      If no download happened yet, click again here to download now.
+    </a>
 
     <div v-if="activeDid" class="flex py-2">
       <button class="text-center text-md text-blue-500" @click="checkLimits()">
@@ -438,6 +446,7 @@ export default class AccountViewView extends Vue {
   apiServer = "";
   apiServerInput = "";
   derivationPath = "";
+  downloadUrl = ""; // because DuckDuckGo doesn't download on automated call to "click" on the anchor
   givenName = "";
   isRegistered = false;
   numAccounts = 0;
@@ -580,6 +589,12 @@ export default class AccountViewView extends Vue {
     }
   }
 
+  beforeUnmount() {
+    if (this.downloadUrl) {
+      URL.revokeObjectURL(this.downloadUrl);
+    }
+  }
+
   /**
    * Initializes component state with values from the database or defaults.
    * @param {SettingsType} settings - Object containing settings from the database.
@@ -681,13 +696,13 @@ export default class AccountViewView extends Vue {
       const blob = await this.generateDatabaseBlob();
 
       // Create a temporary URL for the blob
-      const url = this.createBlobURL(blob);
+      this.downloadUrl = this.createBlobURL(blob);
 
       // Trigger the download
-      this.downloadDatabaseBackup(url);
+      this.downloadDatabaseBackup(this.downloadUrl);
 
-      // Revoke the temporary URL
-      URL.revokeObjectURL(url);
+      // Revoke the temporary URL -- not yet because of DuckDuckGo download failure
+      //URL.revokeObjectURL(this.downloadUrl);
 
       // Notify the user that the download has started
       this.notifyDownloadStarted();
@@ -724,7 +739,19 @@ export default class AccountViewView extends Vue {
     const downloadAnchor = this.$refs.downloadLink as HTMLAnchorElement;
     downloadAnchor.href = url;
     downloadAnchor.download = `${db.name}-backup.json`;
-    downloadAnchor.click();
+    downloadAnchor.click(); // doesn't work for some browsers, eg. DuckDuckGo
+  }
+
+  public computedStartDownloadLinkClassNames() {
+    return {
+      invisible: this.downloadUrl,
+    };
+  }
+
+  public computedDownloadLinkClassNames() {
+    return {
+      invisible: !this.downloadUrl,
+    };
   }
 
   /**

From c79dfac1feaa1360e1bd2251fac401e01fc4110f Mon Sep 17 00:00:00 2001
From: Trent Larson <trent@trentlarson.com>
Date: Fri, 29 Dec 2023 12:46:47 -0700
Subject: [PATCH 2/4] add a way to import contacts & settings

---
 src/views/AccountViewView.vue | 92 +++++++++++++++++++++++++++++------
 1 file changed, 76 insertions(+), 16 deletions(-)

diff --git a/src/views/AccountViewView.vue b/src/views/AccountViewView.vue
index f1164c6..7c26246 100644
--- a/src/views/AccountViewView.vue
+++ b/src/views/AccountViewView.vue
@@ -82,6 +82,7 @@
     <router-link
       :to="{ name: 'new-edit-account' }"
       class="block text-center text-lg font-bold uppercase bg-slate-500 text-white px-2 py-3 rounded-md mb-2"
+      v-if="activeDid"
     >
       Edit Identity
     </router-link>
@@ -153,7 +154,7 @@
       </label>
     </div>
 
-    <h3 class="text-sm uppercase font-semibold mb-3">Data</h3>
+    <h3 class="text-sm uppercase font-semibold mb-3">Data Export</h3>
 
     <router-link
       :to="{ name: 'seed-backup' }"
@@ -180,7 +181,7 @@
       If no download happened yet, click again here to download now.
     </a>
 
-    <div v-if="activeDid" class="flex py-2">
+    <div v-if="activeDid" class="flex mt-8 py-2">
       <button class="text-center text-md text-blue-500" @click="checkLimits()">
         Check Limits
       </button>
@@ -306,6 +307,21 @@
         </div>
       </label>
 
+      <div class="grid-cols-2">
+        <span class="text-slate-500 text-sm font-bold mb-2">Data Import</span>
+        <input type="file" @change="uploadFile" class="ml-2" />
+        <div v-if="showContactImport()">
+          <button
+            class="block text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md mb-6"
+            @click="submitFile()"
+          >
+            Import Settings & Contacts
+            <br />
+            (excluding Identifier Data)
+          </button>
+        </div>
+      </div>
+
       <div class="flex py-2">
         <button class="text-blue-500">
           <router-link :to="{ name: 'statistics' }" class="block text-center">
@@ -407,7 +423,9 @@
 
 <script lang="ts">
 import { AxiosError, AxiosRequestConfig } from "axios";
+import Dexie from "dexie";
 import "dexie-export-import";
+import { ref } from "vue";
 import { Component, Vue } from "vue-facing-decorator";
 import { useClipboard } from "@vueuse/core";
 
@@ -418,6 +436,7 @@ import { MASTER_SETTINGS_KEY, Settings } from "@/db/tables/settings";
 import { accessToken } from "@/libs/crypto";
 import { IIdentifier } from "@veramo/core";
 import { ErrorResponse, RateLimits } from "@/libs/endorserServer";
+import { ImportProgress } from "dexie-export-import/dist/import";
 
 // eslint-disable-next-line @typescript-eslint/no-var-requires
 const Buffer = require("buffer/").Buffer;
@@ -436,6 +455,8 @@ interface IAccount {
   derivationPath: string;
 }
 
+const inputFileNameRef = ref<Blob>();
+
 @Component({ components: { QuickNav } })
 export default class AccountViewView extends Vue {
   $notify!: (notification: Notification, timeout?: number) => void;
@@ -480,26 +501,18 @@ export default class AccountViewView extends Vue {
     try {
       // Open the accounts database
       await accountsDB.open();
-    } catch (error) {
-      console.error("Failed to open accounts database:", error);
-      return null;
-    }
 
-    let account: { identity?: string } | undefined;
-
-    try {
       // Search for the account with the matching DID (decentralized identifier)
-      account = await accountsDB.accounts
-        .where("did")
-        .equals(activeDid)
-        .first();
+      const account: { identity?: string } | undefined =
+        await accountsDB.accounts.where("did").equals(activeDid).first();
+
+      accountsDB.close();
+      // Return parsed identity or null if not found
+      return JSON.parse((account?.identity as string) || "null");
     } catch (error) {
       console.error("Failed to find account:", error);
       return null;
     }
-
-    // Return parsed identity or null if not found
-    return JSON.parse((account?.identity as string) || "null");
   }
 
   /**
@@ -548,6 +561,7 @@ export default class AccountViewView extends Vue {
   async beforeCreate() {
     await accountsDB.open();
     this.numAccounts = await accountsDB.accounts.count();
+    accountsDB.close();
   }
 
   /**
@@ -572,6 +586,7 @@ export default class AccountViewView extends Vue {
       if (identity) {
         this.processIdentity(identity);
       }
+      db.close();
     } catch (err: unknown) {
       this.handleError(err);
     }
@@ -668,6 +683,7 @@ export default class AccountViewView extends Vue {
       db.settings.update(MASTER_SETTINGS_KEY, {
         showContactGivesInline: this.showContactGives,
       });
+      db.close();
     } catch (err) {
       this.$notify(
         {
@@ -787,6 +803,43 @@ export default class AccountViewView extends Vue {
     console.error("Export Error:", error);
   }
 
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  async uploadFile(event: any) {
+    inputFileNameRef.value = event.target.files[0];
+  }
+
+  showContactImport() {
+    return !!inputFileNameRef.value;
+  }
+
+  /**
+   * Asynchronously imports the database from a downloadable JSON file.
+   *
+   * @throws Will notify the user if there is an export error.
+   */
+  async submitFile() {
+    if (inputFileNameRef.value != null) {
+      if (
+        confirm(
+          "This will replace all settings and contacts, so we recommend you first do the backup step above." +
+            " Are you sure you want to import and replace all contacts and settings?",
+        )
+      ) {
+        await db.delete();
+        await Dexie.import(inputFileNameRef.value, {
+          progressCallback: this.progressCallback,
+        });
+      }
+    }
+  }
+
+  private progressCallback(progress: ImportProgress) {
+    console.log(
+      `Import progress: ${progress.completedRows} of ${progress.totalRows} rows completed.`,
+    );
+    return true;
+  }
+
   async checkLimits() {
     const identity = await this.getIdentity(this.activeDid);
     if (identity) {
@@ -815,6 +868,7 @@ export default class AccountViewView extends Vue {
               isRegistered: true,
             });
             this.isRegistered = true;
+            db.close();
           } catch (err) {
             console.error("Got an error updating settings:", err);
             this.$notify(
@@ -886,6 +940,7 @@ export default class AccountViewView extends Vue {
     } else {
       await this.switchToAccountNumber(accountNum);
     }
+    db.close();
   }
 
   /**
@@ -916,9 +971,12 @@ export default class AccountViewView extends Vue {
     const accounts = await accountsDB.accounts.toArray();
     const account = accounts[accountNum - 1];
 
+    await db.open();
     await db.settings.update(MASTER_SETTINGS_KEY, { activeDid: account.did });
 
     this.updateActiveAccountProperties(account);
+    db.close();
+    accountsDB.close();
   }
 
   /**
@@ -946,6 +1004,7 @@ export default class AccountViewView extends Vue {
       apiServer: this.apiServerInput,
     });
     this.apiServer = this.apiServerInput;
+    db.close();
   }
 
   async onClickSavePushServer() {
@@ -963,6 +1022,7 @@ export default class AccountViewView extends Vue {
       },
       -1,
     );
+    db.close();
   }
 }
 </script>

From 11070755d6ec4894c509f116a7949ccdf53fe223 Mon Sep 17 00:00:00 2001
From: Trent Larson <trent@trentlarson.com>
Date: Fri, 29 Dec 2023 13:10:07 -0700
Subject: [PATCH 3/4] refine error message when duplicate contact is input

---
 src/views/ContactsView.vue | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/views/ContactsView.vue b/src/views/ContactsView.vue
index 01df405..e0a2f14 100644
--- a/src/views/ContactsView.vue
+++ b/src/views/ContactsView.vue
@@ -587,12 +587,19 @@ export default class ContactsView extends Vue {
       })
       .catch((err) => {
         console.error("Error when adding contact to storage:", err);
+        let message = "An error prevented this import.";
+        if (
+          err.message?.indexOf("Key already exists in the object store.") > -1
+        ) {
+          message =
+            "A contact with that DID is already in your contact list. Edit them directly below.";
+        }
         this.$notify(
           {
             group: "alert",
             type: "danger",
             title: "Contact Not Added",
-            text: "An error prevented this import.",
+            text: message,
           },
           -1,
         );

From 7a099183ae1e684de5a9824d22d663aaba5a6bc8 Mon Sep 17 00:00:00 2001
From: Trent Larson <trent@trentlarson.com>
Date: Fri, 29 Dec 2023 13:14:35 -0700
Subject: [PATCH 4/4] remove db.close calls that caused an error when trying to
 download

---
 src/views/AccountViewView.vue | 10 ----------
 1 file changed, 10 deletions(-)

diff --git a/src/views/AccountViewView.vue b/src/views/AccountViewView.vue
index 7c26246..f739816 100644
--- a/src/views/AccountViewView.vue
+++ b/src/views/AccountViewView.vue
@@ -506,7 +506,6 @@ export default class AccountViewView extends Vue {
       const account: { identity?: string } | undefined =
         await accountsDB.accounts.where("did").equals(activeDid).first();
 
-      accountsDB.close();
       // Return parsed identity or null if not found
       return JSON.parse((account?.identity as string) || "null");
     } catch (error) {
@@ -561,7 +560,6 @@ export default class AccountViewView extends Vue {
   async beforeCreate() {
     await accountsDB.open();
     this.numAccounts = await accountsDB.accounts.count();
-    accountsDB.close();
   }
 
   /**
@@ -586,7 +584,6 @@ export default class AccountViewView extends Vue {
       if (identity) {
         this.processIdentity(identity);
       }
-      db.close();
     } catch (err: unknown) {
       this.handleError(err);
     }
@@ -683,7 +680,6 @@ export default class AccountViewView extends Vue {
       db.settings.update(MASTER_SETTINGS_KEY, {
         showContactGivesInline: this.showContactGives,
       });
-      db.close();
     } catch (err) {
       this.$notify(
         {
@@ -868,7 +864,6 @@ export default class AccountViewView extends Vue {
               isRegistered: true,
             });
             this.isRegistered = true;
-            db.close();
           } catch (err) {
             console.error("Got an error updating settings:", err);
             this.$notify(
@@ -940,7 +935,6 @@ export default class AccountViewView extends Vue {
     } else {
       await this.switchToAccountNumber(accountNum);
     }
-    db.close();
   }
 
   /**
@@ -975,8 +969,6 @@ export default class AccountViewView extends Vue {
     await db.settings.update(MASTER_SETTINGS_KEY, { activeDid: account.did });
 
     this.updateActiveAccountProperties(account);
-    db.close();
-    accountsDB.close();
   }
 
   /**
@@ -1004,7 +996,6 @@ export default class AccountViewView extends Vue {
       apiServer: this.apiServerInput,
     });
     this.apiServer = this.apiServerInput;
-    db.close();
   }
 
   async onClickSavePushServer() {
@@ -1022,7 +1013,6 @@ export default class AccountViewView extends Vue {
       },
       -1,
     );
-    db.close();
   }
 }
 </script>