Implement reliability improvements across frontend

- api.js: add exponential backoff retry (3 attempts, 500/1000/2000ms) for
  GET requests on network errors and 5xx responses; mutating methods are
  not retried since they are not idempotent
- api.js: add offline indicator — fixed pill banner appears at bottom of
  page when navigator goes offline, disappears when back online
- style.css: add styles for offline banner and session expiry warning
- auth.js: show amber warning banner below nav when session expires within
  24 hours (with exact hours remaining); dismissible with X button
- auth.js: fix password min-length client-side check from 6 to 10 to
  match the backend
- log.js, flock.js, budget.js: disable submit button during async request
  and re-enable in finally block to prevent double-submits and make loading
  state visible
- dashboard.js: fix chart date labels to use user's configured timezone
  instead of the browser's local timezone

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-03-18 00:09:36 -07:00
parent 60fed6d464
commit ce1e9c5134
7 changed files with 122 additions and 17 deletions

View File

@@ -377,3 +377,40 @@ td input[type="date"] {
border-top: 1px solid var(--border);
margin: 1.25rem 0;
}
/* ── Offline banner ───────────────────────────────────────────────────────── */
#offline-banner {
position: fixed;
bottom: 1rem;
left: 50%;
transform: translateX(-50%);
background: #333;
color: #fff;
padding: 0.5rem 1.25rem;
border-radius: 99px;
font-size: 0.875rem;
z-index: 1000;
box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
/* ── Session expiry warning ───────────────────────────────────────────────── */
#session-warning {
background: #fff3cd;
color: #856404;
border-bottom: 1px solid #ffc107;
padding: 0.5rem 1.5rem;
font-size: 0.875rem;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
}
#session-warning button {
background: none;
border: none;
font-size: 1rem;
cursor: pointer;
color: inherit;
padding: 0 0.25rem;
line-height: 1;
}