feat: public profile page + richer hover card with "See full profile"

- 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>
2026-06-13 12:40:16 +02:00
parent 88fa5d19c8
commit 9a5e302a26
4 changed files with 84 additions and 2 deletions
@@ -0,0 +1,57 @@
+// 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) => ({
+  '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;',
+}[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();