etalon
9a5e302a26
- New /users/{id} page renders a user's full profile from the card endpoint:
avatar, roles, full bio, contact (location/phone), links and custom detail
fields (internal extra keys hidden; link schemes sanitized).
- The hover user-card now shows a longer bio, phone, up to 3 links, and a
"See full profile →" button linking to /users/{id}.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
58 lines
2.6 KiB
JavaScript
58 lines
2.6 KiB
JavaScript
// Public profile view (/users/{id}): full bio, contact, links and custom
|
|
// details from the user's profile card.
|
|
import { api } from '/static/js/api.js';
|
|
|
|
const root = document.getElementById('profile-root');
|
|
const errorBox = document.getElementById('error');
|
|
const uid = root.dataset.userId;
|
|
|
|
const HIDDEN_EXTRA = new Set(['ticketingIdentities', 'savedBoardFilters']);
|
|
|
|
const esc = (s) => String(s ?? '').replace(/[&<>"']/g, (c) => ({
|
|
'&': '&', '<': '<', '>': '>', '"': '"', "'": ''',
|
|
}[c]));
|
|
|
|
// only allow safe link schemes; bare domains get https://, others are blocked
|
|
export function safeUrl(u) {
|
|
const s = String(u ?? '').trim();
|
|
if (/^(https?:\/\/|mailto:)/i.test(s)) return s;
|
|
if (/^[a-z][a-z0-9+.-]*:/i.test(s)) return '#';
|
|
return s ? 'https://' + s : '#';
|
|
}
|
|
|
|
async function load() {
|
|
try {
|
|
const res = await api('GET', `/api/v1/users/${uid}/card`);
|
|
const c = res.card;
|
|
const roles = ['admin', 'consultant', 'developer'].filter((r) => c.roles && c.roles[r]);
|
|
const links = ((c.contact && c.contact.links) || []).filter(Boolean);
|
|
const extra = Object.entries(c.extra || {})
|
|
.filter(([k, v]) => !HIDDEN_EXTRA.has(k) && v !== null && typeof v !== 'object');
|
|
const hasContact = (c.contact && (c.contact.phone || c.contact.location)) || links.length;
|
|
root.innerHTML = `
|
|
<div class="card">
|
|
<div style="display:flex;gap:16px;align-items:center">
|
|
${c.avatarFileId
|
|
? `<img class="avatar large" src="/files/${c.avatarFileId}" alt="">`
|
|
: `<span class="avatar large">${esc((c.name || '?').slice(0, 1).toUpperCase())}</span>`}
|
|
<div>
|
|
<h1 style="margin:0">${esc(c.name)}</h1>
|
|
<p style="margin:4px 0">${roles.map((r) => `<span class="badge">${r}</span>`).join(' ')}</p>
|
|
</div>
|
|
</div>
|
|
${c.bio ? `<h2 class="mt">Bio</h2><p style="white-space:pre-wrap">${esc(c.bio)}</p>` : ''}
|
|
${hasContact ? '<h2 class="mt">Contact</h2>' : ''}
|
|
${c.contact && c.contact.location ? `<p class="muted">📍 ${esc(c.contact.location)}</p>` : ''}
|
|
${c.contact && c.contact.phone ? `<p class="muted">📞 ${esc(c.contact.phone)}</p>` : ''}
|
|
${links.length ? `<ul>${links.map((l) =>
|
|
`<li><a href="${esc(safeUrl(l))}" target="_blank" rel="noopener">${esc(l)}</a></li>`).join('')}</ul>` : ''}
|
|
${extra.length ? `<h2 class="mt">Details</h2>${extra.map(([k, v]) =>
|
|
`<p class="muted"><strong>${esc(k)}:</strong> ${esc(String(v))}</p>`).join('')}` : ''}
|
|
</div>`;
|
|
} catch (e) {
|
|
errorBox.textContent = 'Could not load this profile.';
|
|
}
|
|
}
|
|
|
|
load();
|