forked from jsnbuchanan/crowd-funder-for-time-pwa
feat: Add seed backup tracking with database migration
- Add hasBackedUpSeed boolean flag to Settings interface - Create database migration 003_add_hasBackedUpSeed_to_settings - Update SeedBackupView to set flag when user reveals seed phrase - Modify DataExportSection to conditionally show notification dot - Implement robust error handling for database operations The notification dot on the "Backup Identifier Seed" button only appears while the user hasn't backed up their seed phrase. Once they visit SeedBackupView and click "Reveal my Seed Phrase", the setting is persisted and the notification dot disappears.
This commit is contained in:
@@ -16,6 +16,12 @@ messages * - Conditional UI based on platform capabilities * * @component *
|
||||
:to="{ name: 'seed-backup' }"
|
||||
:class="backupButtonClasses"
|
||||
>
|
||||
<!-- Notification dot - show while the user has not yet backed up their seed phrase -->
|
||||
<font-awesome
|
||||
v-if="!hasBackedUpSeed"
|
||||
icon="circle"
|
||||
class="absolute -right-[8px] -top-[8px] text-rose-500 text-[14px] border border-white rounded-full"
|
||||
></font-awesome>
|
||||
Backup Identifier Seed
|
||||
</router-link>
|
||||
|
||||
@@ -98,6 +104,12 @@ export default class DataExportSection extends Vue {
|
||||
*/
|
||||
isExporting = false;
|
||||
|
||||
/**
|
||||
* Flag indicating if the user has backed up their seed phrase
|
||||
* Used to control the visibility of the notification dot
|
||||
*/
|
||||
hasBackedUpSeed = false;
|
||||
|
||||
/**
|
||||
* Notification helper for consistent notification patterns
|
||||
* Created as a getter to ensure $notify is available when called
|
||||
@@ -129,7 +141,7 @@ export default class DataExportSection extends Vue {
|
||||
* CSS classes for the backup button (router link)
|
||||
*/
|
||||
get backupButtonClasses(): string {
|
||||
return "block w-full text-center text-md bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-2 rounded-md mb-2 mt-2";
|
||||
return "block relative w-full text-center text-md bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-2 rounded-md mb-2 mt-2";
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -218,6 +230,22 @@ export default class DataExportSection extends Vue {
|
||||
|
||||
created() {
|
||||
this.notify = createNotifyHelpers(this.$notify);
|
||||
this.loadSeedBackupStatus();
|
||||
}
|
||||
|
||||
/**
|
||||
* Loads the seed backup status from account settings
|
||||
* Updates the hasBackedUpSeed flag to control notification dot visibility
|
||||
*/
|
||||
private async loadSeedBackupStatus(): Promise<void> {
|
||||
try {
|
||||
const settings = await this.$accountSettings();
|
||||
this.hasBackedUpSeed = !!settings.hasBackedUpSeed;
|
||||
} catch (err: unknown) {
|
||||
logger.error("Failed to load seed backup status:", err);
|
||||
// Default to false (show notification dot) if we can't load the setting
|
||||
this.hasBackedUpSeed = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user