trent_larson
/
crowd-funder-for-time-pwa
4
1
Fork 2
Code Pull Requests 12 Releases 5 Wiki Activity
Browse Source

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

migrate-dexie-to-sqlite
Trent Larson 6 days ago
parent
3df5e19d9d
commit
452ae555bb
2 changed files with 143 additions and 46 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 8
      src/services/indexedDBMigrationService.ts
  2. 181
      src/views/DatabaseMigration.vue

8
src/services/indexedDBMigrationService.ts
View File

@ -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
*

181
src/views/DatabaseMigration.vue
View File

@ -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(),

Write Preview
Loading…
Cancel
Save