add DB export

package-lock.json

@@ -26,6 +26,7 @@
         "class-transformer": "^0.5.1",
         "core-js": "^3.26.1",
         "dexie": "^3.2.2",
+        "dexie-export-import": "^4.0.6",
         "did-jwt": "^6.9.0",
         "ethereum-cryptography": "^1.1.2",
         "ethereumjs-util": "^7.1.5",
@@ -12187,6 +12188,14 @@
         "node": ">=6.0"
       }
     },
+    "node_modules/dexie-export-import": {
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/dexie-export-import/-/dexie-export-import-4.0.6.tgz",
+      "integrity": "sha512-WFTSm/XB4MNHBZVQJTrWjWvqur7vfpx1mWEWMuTUB9zdW3FTXvkpm7SvsUX55r6y6wmJ3libwA5eRCbVUKmuTw==",
+      "peerDependencies": {
+        "dexie": "^2.0.4 || ^3.0.0 || ^4.0.1-alpha.5"
+      }
+    },
     "node_modules/did-jwt": {
       "version": "6.9.0",
       "resolved": "https://registry.npmjs.org/did-jwt/-/did-jwt-6.9.0.tgz",

package.json

@@ -26,6 +26,7 @@
     "class-transformer": "^0.5.1",
     "core-js": "^3.26.1",
     "dexie": "^3.2.2",
+    "dexie-export-import": "^4.0.6",
     "did-jwt": "^6.9.0",
     "ethereum-cryptography": "^1.1.2",
     "ethereumjs-util": "^7.1.5",

project.yaml

@@ -16,6 +16,9 @@
   - .2 show error to user when adding a duplicate contact
   - parse input more robustly (with CSV lib and not commas)
 
+- refactor alerts:
+  - They show at the top and can be missed, eg. account bakcup download
+
 - commit screen
 
 - discover screen

src/db/index.ts

@@ -27,7 +27,7 @@ type NonsensitiveTables = {
  *   https://9to5answer.com/how-to-bypass-warning-unexpected-any-specify-a-different-type-typescript-eslint-no-explicit-any
  */
 export type SensitiveDexie<T extends unknown = SensitiveTables> = BaseDexie & T;
-export const accountsDB = new BaseDexie("KickStartSensitive") as SensitiveDexie;
+export const accountsDB = new BaseDexie("KickStartAccounts") as SensitiveDexie;
 const SensitiveSchemas = Object.assign({}, AccountsSchema);
 
 export type NonsensitiveDexie<T extends unknown = NonsensitiveTables> =

src/views/AccountViewView.vue

@@ -122,29 +122,34 @@
     <router-link
       :to="{ name: 'new-edit-account' }"
       class="block text-center text-lg font-bold uppercase bg-blue-600 text-white px-2 py-3 rounded-md mb-8"
-      >Edit Identity</router-link
     >
+      Edit Identity
+    </router-link>
 
     <h3 class="text-sm uppercase font-semibold mb-3">Contact Actions</h3>
 
     <a
       href="contact-scan.html"
       class="block w-full text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md mb-6"
-      >Scan New Contact</a
     >
+      Scan New Contact
+    </a>
 
-    <h3 class="text-sm uppercase font-semibold mb-3">Identity Actions</h3>
+    <h3 class="text-sm uppercase font-semibold mb-3">Data</h3>
 
     <a
       href=""
       class="block w-full text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md mb-2"
-      >Backup Seed</a
     >
+      Backup Identifier Seed
+    </a>
     <a
-      href=""
       class="block w-full text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md mb-6"
-      >Backup Other Data</a
+      @click="exportDatabase()"
     >
+      Download Settings & Contacts (excluding Identifier Data)
+    </a>
+    <a ref="downloadLink" />
 
     <!-- QR code popup -->
     <dialog id="dlgQR" class="backdrop:bg-black/75 rounded-md">
@@ -198,6 +203,7 @@
 </template>
 
 <script lang="ts">
+import "dexie-export-import";
 import { Options, Vue } from "vue-class-component";
 import { useClipboard } from "@vueuse/core";
 import { db, accountsDB } from "@/db";
@@ -299,6 +305,30 @@ export default class AccountViewView extends Vue {
     };
   }
 
+  public async exportDatabase() {
+    try {
+      const blob = await db.export({ prettyJson: true });
+      const url = URL.createObjectURL(blob);
+
+      console.log("typeof", typeof this.$refs.downloadLink);
+      const downloadAnchor = this.$refs.downloadLink as HTMLAnchorElement;
+      downloadAnchor.href = url;
+      downloadAnchor.download = db.name + "-backup.json";
+      downloadAnchor.click();
+
+      URL.revokeObjectURL(url);
+
+      this.alertTitle = "Download Started";
+      this.alertMessage = "See your downloads directory for the backup.";
+      this.isAlertVisible = true;
+    } catch (error) {
+      this.alertTitle = "Export Error";
+      this.alertMessage = "See console logs for more info.";
+      this.isAlertVisible = true;
+      console.error("Export Error:", error);
+    }
+  }
+
   alertMessage = "";
   alertTitle = "";
   isAlertVisible = false;