IndexedDB migration: add ability to see mnemonic and download settings & contacts

src/services/indexedDBMigrationService.ts

@@ -21,6 +21,8 @@
  * @since 2024
  */
 
+import "dexie-export-import";
+
 import { PlatformServiceFactory } from "./PlatformServiceFactory";
 import { db, accountsDBPromise } from "../db/index";
 import { Contact, ContactMethod } from "../db/tables/contacts";
@@ -108,6 +110,12 @@ export interface MigrationResult {
   warnings: string[];
 }
 
+export async function getDexieExportBlob(): Promise<Blob> {
+  await db.open();
+  const blob = db.export({ prettyJson: true });
+  return blob;
+}
+
 /**
  * Retrieves all contacts from the Dexie (IndexedDB) database
  *

src/views/DatabaseMigration.vue

@@ -53,17 +53,87 @@
         </div>
       </div>
 
-      <div class="mt-4">
-        <h3
+      <div 
+        class="text-lg leading-6 font-medium text-red-900 mt-4"
+      >
+        <p
           v-if="comparison && (comparison.sqliteAccounts.length > 1 || comparison.sqliteSettings.length > 1 || comparison.sqliteContacts.length > 0)"
-          class="text-lg leading-6 font-medium text-red-900 mb-4"
         >
-          Beware: you have unexpected existing data in the SQLite database that will be overwritten. You should talk with Trent.
-        </h3>
+          Beware: you have unexpected existing data in the SQLite database that will be overwritten. Talk with Trent.
+        </p>
+        <p
+          v-if="cannotfindMainAccount"
+        >
+          We cannot find your main account. Talk with Trent.
+        </p>
+        <p
+          v-if="hasMultipleMnemonics"
+        >
+          You have multiple accounts. If you didn't mean to, talk with Trent.
+        </p>
+      </div>
+      <div>
+        <p v-if="downloadMnemonic" class="text-green-500">
+          Here is your seed. Write it down!
+          <br />
+          {{ downloadMnemonic }}
+        </p>
       </div>
 
       <!-- Action Buttons -->
       <div class="mt-4 mb-8 flex flex-wrap gap-4">
+        <button
+          :disabled="isLoading"
+          class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed"
+          @click="downloadAccount"
+        >
+          <IconRenderer
+            v-if="isLoading"
+            icon-name="spinner"
+            svg-class="animate-spin -ml-1 mr-3 h-5 w-5 text-white"
+            fill="currentColor"
+          />
+          <IconRenderer
+            v-else
+            icon-name="chart"
+            svg-class="-ml-1 mr-3 h-5 w-5"
+          />
+          Download Account
+        </button>
+
+        <button
+          :disabled="isLoading"
+          class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed"
+          @click="downloadSettingsContacts"
+        >
+          <IconRenderer
+            v-if="isLoading"
+            icon-name="spinner"
+            svg-class="animate-spin -ml-1 mr-3 h-5 w-5 text-white"
+            fill="currentColor"
+          />
+          <IconRenderer
+            v-else
+            icon-name="chart"
+            svg-class="-ml-1 mr-3 h-5 w-5"
+          />
+          Download Settings &amp; Contacts
+        </button>
+
+        <div>
+          <a ref="downloadLink">
+            <!-- No content necessary -->
+            <p
+              v-if="downloadSettingsContactsBlob"
+              class="block w-full text-center text-md bg-gradient-to-b from-green-500 to-green-800 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-2 rounded-md mb-6"
+            >
+              If no download happened yet, click here to download now.
+            </p>
+          </a>
+        </div>
+
+        <div class="w-full border-t border-gray-200 my-4"></div>
+
         <button
           :disabled="isLoading"
           class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed"
@@ -84,7 +154,7 @@
         </button>
 
         <button
-          :disabled="isLoading || !comparison"
+          :disabled="isLoading"
           class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 disabled:opacity-50 disabled:cursor-not-allowed"
           @click="migrateAll"
         >
@@ -124,7 +194,7 @@
         </button>
 
         <button
-          :disabled="isLoading || !comparison"
+          :disabled="isLoading || !downloadSettingsContactsBlob || !comparison"
           class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 disabled:opacity-50 disabled:cursor-not-allowed"
           @click="migrateContacts"
         >
@@ -133,7 +203,7 @@
         </button>
 
         <button
-          :disabled="isLoading || !comparison"
+          :disabled="isLoading || !downloadSettingsContactsBlob || !comparison"
           class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-purple-600 hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 disabled:opacity-50 disabled:cursor-not-allowed"
           @click="migrateSettings"
         >
@@ -142,7 +212,7 @@
         </button>
 
         <button
-          :disabled="isLoading || !comparison"
+          :disabled="isLoading || !downloadMnemonic || !comparison"
           class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-orange-600 hover:bg-orange-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-orange-500 disabled:opacity-50 disabled:cursor-not-allowed"
           @click="migrateAccounts"
         >
@@ -440,7 +510,7 @@
                       svg-class="h-5 w-5 text-yellow-600 mr-2"
                     />
                     <span class="text-sm font-medium text-yellow-900"
-                      >Modified</span
+                      >Modify</span
                     >
                   </div>
                   <span class="text-sm font-bold text-yellow-900">{{
@@ -457,7 +527,7 @@
                       svg-class="h-5 w-5 text-red-600 mr-2"
                     />
                     <span class="text-sm font-medium text-red-900"
-                      >Missing</span
+                      >Keep</span
                     >
                   </div>
                   <span class="text-sm font-bold text-red-900">{{
@@ -489,13 +559,13 @@
                 </div>
               </div>
 
-              <!-- Modified Accounts -->
+              <!-- Modify Accounts -->
               <div
                 v-if="comparison.differences.accounts.modified.length > 0"
                 class="mt-4"
               >
                 <h4 class="text-sm font-medium text-gray-900 mb-2">
-                  Modified Accounts ({{ comparison.differences.accounts.modified.length }}):
+                  Modify Accounts ({{ comparison.differences.accounts.modified.length }}):
                 </h4>
                 <div class="space-y-1">
                   <div
@@ -512,13 +582,13 @@
                 </div>
               </div>
 
-              <!-- Missing Accounts -->
+              <!-- Keep Accounts -->
               <div
                 v-if="comparison.differences.accounts.missing.filter(a => a.did).length > 0"
                 class="mt-4"
               >
                 <h4 class="text-sm font-medium text-gray-900 mb-2">
-                  Missing Accounts ({{ comparison.differences.accounts.missing.filter(a => a.did).length }}):
+                  Keep Accounts ({{ comparison.differences.accounts.missing.filter(a => a.did).length }}):
                 </h4>
                 <div class="space-y-1">
                   <div
@@ -569,7 +639,7 @@
                       svg-class="h-5 w-5 text-yellow-600 mr-2"
                     />
                     <span class="text-sm font-medium text-yellow-900"
-                      >Modified</span
+                      >Modify</span
                     >
                   </div>
                   <span class="text-sm font-bold text-yellow-900">{{
@@ -586,7 +656,7 @@
                       svg-class="h-5 w-5 text-red-600 mr-2"
                     />
                     <span class="text-sm font-medium text-red-900"
-                      >Missing</span
+                      >Keep</span
                     >
                   </div>
                   <span class="text-sm font-bold text-red-900">{{
@@ -616,13 +686,13 @@
                 </div>
               </div>
 
-              <!-- Modified Settings -->
+              <!-- Modify Settings -->
               <div
                 v-if="comparison.differences.settings.modified.length > 0"
                 class="mt-4"
               >
                 <h4 class="text-sm font-medium text-gray-900 mb-2">
-                  Modified Settings ({{ comparison.differences.settings.modified.length }}):
+                  Modify Settings ({{ comparison.differences.settings.modified.length }}):
                 </h4>
                 <div class="space-y-1">
                   <div
@@ -637,13 +707,13 @@
                 </div>
               </div>
 
-              <!-- Missing Settings -->
+              <!-- Keep Settings -->
               <div
                 v-if="comparison.differences.settings.missing.filter(s => s.accountDid || s.activeDid).length > 0"
                 class="mt-4"
               >
                 <h4 class="text-sm font-medium text-gray-900 mb-2">
-                  Missing Settings ({{ comparison.differences.settings.missing.filter(s => s.accountDid || s.activeDid).length }}):
+                  Keep Settings ({{ comparison.differences.settings.missing.filter(s => s.accountDid || s.activeDid).length }}):
                 </h4>
                 <div class="space-y-1">
                   <div
@@ -692,7 +762,7 @@
                       svg-class="h-5 w-5 text-yellow-600 mr-2"
                     />
                     <span class="text-sm font-medium text-yellow-900"
-                      >Modified</span
+                      >Modify</span
                     >
                   </div>
                   <span class="text-sm font-bold text-yellow-900">{{
@@ -709,7 +779,7 @@
                       svg-class="h-5 w-5 text-red-600 mr-2"
                     />
                     <span class="text-sm font-medium text-red-900"
-                      >Missing</span
+                      >Keep</span
                     >
                   </div>
                   <span class="text-sm font-bold text-red-900">{{
@@ -739,13 +809,13 @@
                 </div>
               </div>
 
-              <!-- Modified Contacts -->
+              <!-- Modify Contacts -->
               <div
                 v-if="comparison.differences.contacts.modified.length > 0"
                 class="mt-4"
               >
                 <h4 class="text-sm font-medium text-gray-900 mb-2">
-                  Modified Contacts ({{ comparison.differences.contacts.modified.length }}):
+                  Modify Contacts ({{ comparison.differences.contacts.modified.length }}):
                 </h4>
                 <div class="space-y-1">
                   <div
@@ -760,13 +830,13 @@
                 </div>
               </div>
 
-              <!-- Missing Contacts -->
+              <!-- Keep Contacts -->
               <div
                 v-if="comparison.differences.contacts.missing.filter(c => c.did).length > 0"
                 class="mt-4"
               >
                 <h4 class="text-sm font-medium text-gray-900 mb-2">
-                  Missing Contacts ({{ comparison.differences.contacts.missing.filter(c => c.did).length }}):
+                  Keep Contacts ({{ comparison.differences.contacts.missing.filter(c => c.did).length }}):
                 </h4>
                 <div class="space-y-1">
                   <div
@@ -801,6 +871,7 @@
 </template>
 
 <script lang="ts">
+import { ref } from "vue";
 import { Component, Vue } from "vue-facing-decorator";
 import { useClipboard } from "@vueuse/core";
 
@@ -817,6 +888,7 @@ import {
   getDexieAccounts,
   getDexieSettings,
   getDexieContacts,
+  getDexieExportBlob,
 } from "../services/indexedDBMigrationService";
 import { logger } from "../utils/logger";
 
@@ -847,13 +919,17 @@ import { logger } from "../utils/logger";
 })
 export default class DatabaseMigration extends Vue {
   // Component state
+  private comparison: DataComparison | null = null;
+  private cannotfindMainAccount = false;
+  private downloadSettingsContactsBlob?: Blob;
+  private downloadMnemonic?: string;
+  private hasMultipleMnemonics = false;
   private isLoading = false;
   private loadingMessage = "";
   private error = "";
   private exportedData: Record<string, any> | null = null;
-  private successMessage = "";
-  private comparison: DataComparison | null = null;
   private overwriteExisting = true;
+  private successMessage = "";
 
   useClipboard = useClipboard;
 
@@ -876,23 +952,6 @@ export default class DatabaseMigration extends Vue {
     return `${type} (${did || 'no DID'})`;
   }
 
-  /**
-   * Computed property to get the DID for a setting
-   * Handles both live comparison data and exported JSON format
-   *
-   * @param {any} setting - The setting object
-   * @returns {string} The DID for the setting
-   */
-  getSettingDid(setting: any): string {
-    // Handle exported JSON format (has 'did' field)
-    if (setting.did) {
-      return setting.did;
-    }
-    
-    // Handle live comparison data (has 'activeDid' or 'accountDid' fields)
-    return setting.activeDid || setting.accountDid || 'no DID';
-  }
-
   /**
    * Computed property to check if an account has identity
    * Handles both live comparison data and exported JSON format
@@ -947,6 +1006,36 @@ export default class DatabaseMigration extends Vue {
     }
   }
 
+  async downloadAccount() {
+    const accounts = await getDexieAccounts();
+    this.hasMultipleMnemonics = accounts.length > 1;
+    const settings = await getDexieSettings();
+    let primaryAccount;
+    if (settings.length > 0) {
+      const primaryDid = settings[0].activeDid;
+      primaryAccount = accounts.find(acc => acc.did === primaryDid);
+      if (!primaryAccount) {
+        this.cannotfindMainAccount = true;
+        // abort everything
+      }
+    } else {
+      // should never happen
+      this.cannotfindMainAccount = true;
+    }
+    if (primaryAccount) {
+      this.downloadMnemonic = primaryAccount.mnemonic;
+    }
+  }
+
+  async downloadSettingsContacts() {
+    this.downloadSettingsContactsBlob = await getDexieExportBlob();
+    const downloadUrl = URL.createObjectURL(this.downloadSettingsContactsBlob);
+    const downloadAnchor = this.$refs.downloadLink as HTMLAnchorElement;
+    downloadAnchor.href = downloadUrl;
+    downloadAnchor.download = `TimeSafari-settings-contacts-backup.json`;
+    downloadAnchor.click(); // doesn't work for some browsers, eg. DuckDuckGo
+  }
+
   async displayDatabases() {
     this.exportedData = {
       accounts: await getDexieAccounts(),