Fix registration status reactivity in HomeView

Resolved issue where registration banner persisted despite successful API registration.
Root cause was loadSettings() being called after initializeIdentity(), overwriting
updated isRegistered value with stale database data.

Changes:
- Remove redundant loadSettings() call from mounted() lifecycle
- Add $nextTick() to force template re-render after registration updates
- Create isUserRegistered computed property for template reactivity
- Clean up debugging console.log statements for production readiness
- Simplify template logic to use standard v-if/v-else pattern

Registration banner now properly disappears when users are registered, and
"Record something given by:" section appears correctly. Fix maintains existing
functionality while ensuring proper Vue reactivity.
This commit is contained in:
Matthew Raymer
2025-07-18 05:10:28 +00:00
parent 901186cbc7
commit 216e245d60
6 changed files with 150 additions and 25 deletions

View File

@@ -83,7 +83,7 @@ Raymer * @version 1.0.0 */
-->
<div class="mb-4">
<div
v-if="!isRegistered"
v-if="!isUserRegistered"
id="noticeSomeoneMustRegisterYou"
class="bg-amber-200 rounded-md overflow-hidden text-center px-4 py-3 mb-4"
>
@@ -460,7 +460,7 @@ export default class HomeView extends Vue {
async mounted() {
try {
await this.initializeIdentity();
await this.loadSettings();
// Settings already loaded in initializeIdentity()
await this.loadContacts();
// Registration check already handled in initializeIdentity()
await this.loadFeedData();
@@ -471,6 +471,17 @@ export default class HomeView extends Vue {
}
}
/**
* Watch for changes in the current activeDid
* Reload settings when user switches identities
*/
async onActiveDidChanged(newDid: string | null, oldDid: string | null) {
if (newDid !== oldDid) {
// Re-initialize identity with new settings (loads settings internally)
await this.initializeIdentity();
}
}
/**
* Initializes user identity
* - Retrieves existing DIDs
@@ -577,10 +588,13 @@ export default class HomeView extends Vue {
this.axios,
this.activeDid,
);
if (resp.status === 200) {
// Ultra-concise settings update with automatic cache invalidation!
await this.$saveMySettings({ isRegistered: true });
this.isRegistered = true;
// Force Vue to re-render the template
await this.$nextTick();
}
} catch (error) {
// Consolidate logging: Only log unexpected errors, not expected 400s
@@ -671,17 +685,8 @@ export default class HomeView extends Vue {
* Called by mounted() and reloadFeedOnChange()
*/
private async loadSettings() {
// First get the active DID from master settings
const masterSettings = await this.$settings({
apiServer: "",
activeDid: "",
filterFeedByVisible: false,
filterFeedByNearby: false,
isRegistered: false,
});
// Then get the full merged settings including account-specific overrides
const settings = await this.$accountSettings(masterSettings.activeDid, {
// Use the current activeDid (set in initializeIdentity) to get user-specific settings
const settings = await this.$accountSettings(this.activeDid, {
apiServer: "",
activeDid: "",
filterFeedByVisible: false,
@@ -743,6 +748,8 @@ export default class HomeView extends Vue {
// Ultra-concise settings update with automatic cache invalidation!
await this.$saveMySettings({ isRegistered: true });
this.isRegistered = true;
// Force Vue to re-render the template
await this.$nextTick();
}
} catch (e) {
// ignore the error... just keep us unregistered
@@ -1827,5 +1834,15 @@ export default class HomeView extends Vue {
this.showProjectsDialog = true;
(this.$refs.customDialog as GiftedDialog).open();
}
/**
* Computed property for registration status
*
* @public
* Used in template for registration-dependent UI elements
*/
get isUserRegistered() {
return this.isRegistered;
}
}
</script>