settings: add nav visibility prefs and per-user Strava credentials

- user_prefs table in db.py with get/set helpers
- GET/PUT /api/me/prefs endpoints for bulk pref management
- GET/PUT/DELETE /api/me/strava-credentials; PUT preserves existing
  secret when client_secret field is left blank
- _strava_creds() helper resolves per-user → instance fallback across
  all five Strava endpoints
- Settings page: Navigation card (hide Feed/Community/About toggles)
  and Strava credentials card
- Base.astro: ids on feed/community/about nav links; applies
  nav_hide_* prefs after login
This commit is contained in:
Davide Scaini
2026-04-15 20:37:42 +02:00
parent 4fd5ba428e
commit 87a69bcc8b
4 changed files with 358 additions and 13 deletions
+22 -3
View File
@@ -166,7 +166,7 @@ try {
<div class="nav-links flex items-center gap-5 overflow-x-auto flex-1 min-w-0">
<!-- Feed tab: only shown for multi-user (more than one shard) -->
{!singleHandle && (
<a href={baseUrl} class="text-sm text-zinc-400 hover:text-white transition-colors shrink-0">Feed</a>
<a id="nav-feed" href={baseUrl} class="text-sm text-zinc-400 hover:text-white transition-colors shrink-0">Feed</a>
)}
<!-- Single-user: static handle link. Multi-user: populated by user-widget script. -->
{singleHandle
@@ -177,7 +177,7 @@ try {
<a id="nav-stats" href={singleHandle ? `${baseUrl}u/${singleHandle}/stats/` : `${baseUrl}stats/`} data-user-path="stats/" class="text-sm text-zinc-400 hover:text-white transition-colors shrink-0">Stats</a>
<a id="nav-athlete" href={singleHandle ? `${baseUrl}u/${singleHandle}/athlete/` : `${baseUrl}athlete/`} data-user-path="athlete/" class="text-sm text-zinc-400 hover:text-white transition-colors shrink-0">Athlete</a>
{!singleHandle && (
<a href={`${baseUrl}community/`} class="text-sm text-zinc-400 hover:text-white transition-colors shrink-0">Community</a>
<a id="nav-community" href={`${baseUrl}community/`} class="text-sm text-zinc-400 hover:text-white transition-colors shrink-0">Community</a>
)}
{mobileApp && (
<a id="nav-record" href={singleHandle ? `${baseUrl}u/${singleHandle}/record/` : `${baseUrl}record/`} data-user-path="record/" class="text-sm text-zinc-400 hover:text-white transition-colors shrink-0">Record</a>
@@ -185,7 +185,7 @@ try {
{mobileApp && (
<a href={`${baseUrl}convert/`} class="text-sm text-zinc-400 hover:text-white transition-colors shrink-0">Convert</a>
)}
<a href={`${baseUrl}about/`} class="text-sm text-zinc-400 hover:text-white transition-colors shrink-0">About</a>
<a id="nav-about" href={`${baseUrl}about/`} class="text-sm text-zinc-400 hover:text-white transition-colors shrink-0">About</a>
</div>
)}
@@ -511,6 +511,25 @@ try {
const chk = document.getElementById('upload-keep-original');
if (chk && user.store_originals_default) chk.checked = true;
// Apply nav visibility prefs
try {
const pr = await fetch('/api/me/prefs', { credentials: 'include' });
if (pr.ok) {
const prefs = await pr.json();
const navHideMap: Record<string, string> = {
'nav_hide_feed': 'nav-feed',
'nav_hide_community': 'nav-community',
'nav_hide_about': 'nav-about',
};
for (const [key, elId] of Object.entries(navHideMap)) {
if (prefs[key] === 'true') {
const el = document.getElementById(elId);
if (el) el.style.display = 'none';
}
}
}
} catch (_) {}
// Admin: show admin link and poll for active jobs
if (user.is_admin) {
const adminLink = document.getElementById('nav-admin');
+172
View File
@@ -85,6 +85,58 @@ import Base from '../../layouts/Base.astro';
</form>
</section>
<!-- Navigation visibility card -->
<section class="mb-6 rounded-xl bg-zinc-900 border border-zinc-800 p-5">
<h2 class="text-sm font-semibold text-zinc-400 uppercase tracking-wider mb-1">Navigation</h2>
<p class="text-xs text-zinc-600 mb-4">Hide items from the top nav bar. Affects only your view.</p>
<div class="space-y-3">
<label class="flex items-center gap-3 cursor-pointer group">
<input id="nav-hide-feed" type="checkbox" class="accent-[--accent]" />
<span class="text-sm text-zinc-300 group-hover:text-white transition-colors">Hide Feed</span>
</label>
<label class="flex items-center gap-3 cursor-pointer group">
<input id="nav-hide-community" type="checkbox" class="accent-[--accent]" />
<span class="text-sm text-zinc-300 group-hover:text-white transition-colors">Hide Community</span>
</label>
<label class="flex items-center gap-3 cursor-pointer group">
<input id="nav-hide-about" type="checkbox" class="accent-[--accent]" />
<span class="text-sm text-zinc-300 group-hover:text-white transition-colors">Hide About</span>
</label>
</div>
<p id="nav-prefs-status" class="text-xs mt-3 hidden"></p>
</section>
<!-- Strava credentials card -->
<section class="mb-6 rounded-xl bg-zinc-900 border border-zinc-800 p-5">
<h2 class="text-sm font-semibold text-zinc-400 uppercase tracking-wider mb-1">Strava API credentials</h2>
<p id="strava-creds-desc" class="text-xs text-zinc-600 mb-4">Loading…</p>
<form id="strava-creds-form" class="space-y-3">
<div>
<label class="block text-xs text-zinc-500 mb-1" for="strava-client-id">Client ID</label>
<input id="strava-client-id" type="text" autocomplete="off"
class="w-full px-3 py-2 rounded-lg bg-zinc-800 border border-zinc-700 text-white placeholder-zinc-500 focus:outline-none focus:border-[--accent] text-sm"
placeholder="123456" />
</div>
<div>
<label class="block text-xs text-zinc-500 mb-1" for="strava-client-secret">Client secret</label>
<input id="strava-client-secret" type="password" autocomplete="off"
class="w-full px-3 py-2 rounded-lg bg-zinc-800 border border-zinc-700 text-white placeholder-zinc-500 focus:outline-none focus:border-[--accent] text-sm"
placeholder="Leave blank to keep existing" />
</div>
<p id="strava-creds-status" class="text-xs hidden"></p>
<div class="flex gap-2">
<button type="submit"
class="px-4 py-2 rounded-lg text-sm bg-zinc-700 hover:bg-zinc-600 text-white transition-colors">
Save
</button>
<button type="button" id="strava-creds-clear"
class="px-4 py-2 rounded-lg text-sm bg-zinc-800 hover:bg-red-900 hover:text-red-300 text-zinc-400 transition-colors">
Use instance credentials
</button>
</div>
</form>
</section>
<!-- Danger zone -->
<section class="rounded-xl bg-zinc-900 border border-red-900/40 p-5">
<h2 class="text-sm font-semibold text-red-400/70 uppercase tracking-wider mb-4">Danger zone</h2>
@@ -342,8 +394,128 @@ import Base from '../../layouts/Base.astro';
document.getElementById('del-activities-btn')?.addEventListener('click', () => openConfirm('activities'));
document.getElementById('del-account-btn')?.addEventListener('click', () => openConfirm('account'));
// ── Navigation prefs ─────────────────────────────────────────────────────────
const NAV_PREF_KEYS: Record<string, string> = {
'nav-hide-feed': 'nav_hide_feed',
'nav-hide-community': 'nav_hide_community',
'nav-hide-about': 'nav_hide_about',
};
async function loadNavPrefs() {
try {
const r = await fetch('/api/me/prefs', { credentials: 'include' });
if (!r.ok) return;
const prefs = await r.json();
for (const [elId, key] of Object.entries(NAV_PREF_KEYS)) {
const el = document.getElementById(elId) as HTMLInputElement | null;
if (el) el.checked = prefs[key] === 'true';
}
} catch {}
}
async function saveNavPref(key: string, value: boolean) {
const statusEl = document.getElementById('nav-prefs-status')!;
try {
const r = await fetch('/api/me/prefs', {
method: 'PUT',
credentials: 'include',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ [key]: String(value) }),
});
if (r.ok) {
setStatus(statusEl, 'Saved.', true);
setTimeout(() => statusEl.classList.add('hidden'), 2000);
} else {
const d = await r.json();
setStatus(statusEl, d.detail ?? 'Failed', false);
}
} catch {
setStatus(statusEl, 'Could not reach server', false);
}
}
for (const [elId, key] of Object.entries(NAV_PREF_KEYS)) {
document.getElementById(elId)?.addEventListener('change', (e) => {
saveNavPref(key, (e.target as HTMLInputElement).checked);
});
}
// ── Strava credentials ────────────────────────────────────────────────────────
async function loadStravaCreds() {
const desc = document.getElementById('strava-creds-desc')!;
try {
const r = await fetch('/api/me/strava-credentials', { credentials: 'include' });
if (!r.ok) { desc.textContent = 'Not available.'; return; }
const d = await r.json();
if (d.has_user_creds) {
desc.textContent = `Using your own credentials (Client ID: ${d.client_id}).`;
(document.getElementById('strava-client-id') as HTMLInputElement).value = d.client_id ?? '';
} else if (d.instance_configured) {
desc.textContent = 'Using instance-level credentials. Enter your own below to override.';
} else {
desc.textContent = 'Strava is not configured on this instance. You can set your own API credentials below.';
}
} catch {
desc.textContent = 'Could not load Strava settings.';
}
}
document.getElementById('strava-creds-form')?.addEventListener('submit', async (e) => {
e.preventDefault();
const statusEl = document.getElementById('strava-creds-status')!;
const clientId = (document.getElementById('strava-client-id') as HTMLInputElement).value.trim();
const clientSecret = (document.getElementById('strava-client-secret') as HTMLInputElement).value.trim();
if (!clientId) {
setStatus(statusEl, 'Client ID is required.', false);
return;
}
try {
const body: Record<string, string> = { client_id: clientId };
if (clientSecret) body.client_secret = clientSecret;
const r = await fetch('/api/me/strava-credentials', {
method: 'PUT',
credentials: 'include',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(body),
});
const d = await r.json();
if (r.ok) {
setStatus(statusEl, 'Saved.', true);
(document.getElementById('strava-client-secret') as HTMLInputElement).value = '';
loadStravaCreds();
} else {
setStatus(statusEl, d.detail ?? 'Failed', false);
}
} catch {
setStatus(statusEl, 'Could not reach server', false);
}
});
document.getElementById('strava-creds-clear')?.addEventListener('click', async () => {
const statusEl = document.getElementById('strava-creds-status')!;
if (!confirm('Remove your custom Strava credentials and fall back to instance credentials?')) return;
try {
const r = await fetch('/api/me/strava-credentials', { method: 'DELETE', credentials: 'include' });
if (r.ok) {
setStatus(statusEl, 'Cleared — using instance credentials.', true);
(document.getElementById('strava-client-id') as HTMLInputElement).value = '';
(document.getElementById('strava-client-secret') as HTMLInputElement).value = '';
loadStravaCreds();
} else {
const d = await r.json();
setStatus(statusEl, d.detail ?? 'Failed', false);
}
} catch {
setStatus(statusEl, 'Could not reach server', false);
}
});
// ── Init ─────────────────────────────────────────────────────────────────────
loadMe();
loadStorage();
loadNavPrefs();
loadStravaCreds();
</script>