Restore complete UsageLimitsSection functionality with detailed limits display

- Restored proper section container with bg-slate-100 styling and accessibility attributes
- Added FontAwesome spinner with proper ARIA labels for loading state
- Restored detailed limits information showing claims/week, registrations/month, and images/week
- Added proper pluralization and date formatting for reset timers
- Enhanced button styling to match original design with slate gradient
- Added activeDid, endorserLimits, and imageLimits props to component
- Maintained comprehensive debugging for troubleshooting User #00 limits issue
- Added readableDate helper method for consistent date formatting

Fixes missing functionality that was lost during component extraction from AccountViewView.
This commit is contained in:
Matthew Raymer
2025-07-18 03:30:29 +00:00
parent f35155acdb
commit 901186cbc7
2 changed files with 153 additions and 10 deletions

View File

@@ -251,6 +251,9 @@
<UsageLimitsSection
:loading-limits="loadingLimits"
:limits-message="limitsMessage"
:active-did="activeDid"
:endorser-limits="endorserLimits"
:image-limits="imageLimits"
@recheck-limits="onRecheckLimits"
/>
@@ -964,6 +967,14 @@ export default class AccountViewView extends Vue {
this.loadingProfile = false;
}
// Check limits for registered users
if (this.isRegistered && this.activeDid) {
console.log('[DEBUG] Calling checkLimits from mounted for registered user');
await this.checkLimits();
} else {
console.log('[DEBUG] Not calling checkLimits - isRegistered:', this.isRegistered, 'activeDid:', this.activeDid);
}
// Only check service worker on web platform - Capacitor/Electron don't support it
if (!Capacitor.isNativePlatform()) {
try {
@@ -1005,6 +1016,8 @@ export default class AccountViewView extends Vue {
const settings: AccountSettings = await this.$accountSettings();
this.activeDid = settings.activeDid || "";
console.log('[DEBUG] initializeState - activeDid:', this.activeDid);
console.log('[DEBUG] initializeState - settings.isRegistered:', settings?.isRegistered);
this.apiServer = settings.apiServer || "";
this.apiServerInput = settings.apiServer || "";
this.givenName =
@@ -1033,6 +1046,9 @@ export default class AccountViewView extends Vue {
this.warnIfTestServer = !!settings.warnIfTestServer;
this.webPushServer = settings.webPushServer || this.webPushServer;
this.webPushServerInput = settings.webPushServer || this.webPushServerInput;
console.log('[DEBUG] initializeState complete - isRegistered:', this.isRegistered);
console.log('[DEBUG] initializeState complete - activeDid:', this.activeDid);
}
// call fn, copy text to the clipboard, then redo fn after 2 seconds
@@ -1375,10 +1391,17 @@ export default class AccountViewView extends Vue {
}
async checkLimits(): Promise<void> {
console.log('[DEBUG] checkLimits called');
console.log('[DEBUG] activeDid:', this.activeDid);
console.log('[DEBUG] isRegistered:', this.isRegistered);
this.loadingLimits = true;
try {
const did = this.activeDid;
console.log('[DEBUG] did value:', did);
if (!did) {
console.log('[DEBUG] No DID found, setting NO_IDENTIFIER message');
this.limitsMessage = ACCOUNT_VIEW_CONSTANTS.LIMITS.NO_IDENTIFIER;
return;
}
@@ -1389,10 +1412,16 @@ export default class AccountViewView extends Vue {
webPushServer: this.webPushServer,
});
console.log('[DEBUG] Calling fetchImageRateLimits for DID:', did);
const imageResp = await fetchImageRateLimits(this.axios, did);
console.log('[DEBUG] Image rate limits response status:', imageResp.status);
console.log('[DEBUG] Image rate limits response data:', imageResp.data);
if (imageResp.status === 200) {
this.imageLimits = imageResp.data;
console.log('[DEBUG] Image limits set successfully');
} else {
console.log('[DEBUG] Image rate limits failed, status:', imageResp.status);
await this.$saveSettings({
profileImageUrl: "",
});
@@ -1402,14 +1431,21 @@ export default class AccountViewView extends Vue {
return;
}
console.log('[DEBUG] Calling fetchEndorserRateLimits for DID:', did);
console.log('[DEBUG] API server:', this.apiServer);
const endorserResp = await fetchEndorserRateLimits(
this.apiServer,
this.axios,
did,
);
console.log('[DEBUG] Endorser rate limits response status:', endorserResp.status);
console.log('[DEBUG] Endorser rate limits response data:', endorserResp.data);
if (endorserResp.status === 200) {
this.endorserLimits = endorserResp.data;
console.log('[DEBUG] Endorser limits set successfully');
} else {
console.log('[DEBUG] Endorser rate limits failed, status:', endorserResp.status);
await this.$saveSettings({
profileImageUrl: "",
});
@@ -1419,11 +1455,14 @@ export default class AccountViewView extends Vue {
return;
}
} catch (error) {
console.log('[DEBUG] Error in checkLimits:', error);
this.limitsMessage =
ACCOUNT_VIEW_CONSTANTS.LIMITS.ERROR_RETRIEVING_LIMITS;
this.notify.error(this.limitsMessage, TIMEOUTS.STANDARD);
} finally {
console.log('[DEBUG] Setting loadingLimits to false');
this.loadingLimits = false;
console.log('[DEBUG] Final limitsMessage:', this.limitsMessage);
}
}
@@ -1676,6 +1715,8 @@ export default class AccountViewView extends Vue {
}
onRecheckLimits() {
console.log('[DEBUG] onRecheckLimits called - button clicked');
console.log('[DEBUG] Current state - loadingLimits:', this.loadingLimits, 'limitsMessage:', this.limitsMessage);
this.checkLimits();
}
}