First

backend/public/admin/admin.js

@@ -0,0 +1,158 @@
+let friends = [];
+let shareTargetId = null;
+
+async function checkSession() {
+  const res = await fetch('/api/session');
+  const data = await res.json();
+  if (data.role !== 'admin') {
+    window.location.href = '/';
+  }
+}
+
+async function loadFriends() {
+  const res = await fetch('/api/friends');
+  if (res.status === 401) { window.location.href = '/'; return; }
+  const data = await res.json();
+  friends = data.friends || [];
+  renderFriends();
+}
+
+function renderFriends() {
+  const grid = document.getElementById('friendGrid');
+  const emptyMsg = document.getElementById('emptyMsg');
+  grid.innerHTML = '';
+  emptyMsg.style.display = friends.length ? 'none' : 'block';
+
+  friends.forEach((f) => {
+    const el = document.createElement('div');
+    el.className = 'friend-card';
+    const thumbHtml = f.profileImage
+      ? `<img class="friend-thumb" src="/uploads/${encodeURIComponent(folderFor(f))}/${encodeURIComponent(f.profileImage)}" />`
+      : `<div class="friend-thumb placeholder">${(f.name || '?')[0].toUpperCase()}</div>`;
+    el.innerHTML = `
+      <div class="tape"></div>
+      ${thumbHtml}
+      <h3>${escapeHtml(f.name)}</h3>
+      <span class="badge ${f.shareEnabled ? 'on' : 'off'}">${f.shareEnabled ? 'Freigegeben' : 'Nicht freigegeben'}</span>
+      <div class="friend-actions">
+        <a class="btn" href="/friend/${f.id}">✏️ Bearbeiten</a>
+        <button class="secondary" data-share="${f.id}">🔗 Freigabe</button>
+        <button class="danger" data-delete="${f.id}">🗑️</button>
+      </div>
+    `;
+    grid.appendChild(el);
+  });
+
+  grid.querySelectorAll('[data-share]').forEach((btn) => {
+    btn.addEventListener('click', () => openShareModal(btn.dataset.share));
+  });
+  grid.querySelectorAll('[data-delete]').forEach((btn) => {
+    btn.addEventListener('click', () => deleteFriend(btn.dataset.delete));
+  });
+}
+
+// wir brauchen den vollen Ordnernamen für Bild-URLs; da wir ihn nicht separat liefern,
+// nutzen wir /uploads/<id>-Lookup über eine kleine Konvention: Backend akzeptiert auch
+// reine IDs nicht direkt, daher holen wir folderName aus friend-detail bei Bedarf.
+// Einfachere Lösung: Backend liefert profileImage-Pfad bereits vollständig auf.
+function folderFor(f) {
+  return f.folderName || f.id;
+}
+
+function escapeHtml(str) {
+  const div = document.createElement('div');
+  div.textContent = str || '';
+  return div.innerHTML;
+}
+
+document.getElementById('createForm').addEventListener('submit', async (e) => {
+  e.preventDefault();
+  const name = document.getElementById('newName').value.trim();
+  const errBox = document.getElementById('createErr');
+  errBox.innerHTML = '';
+  if (!name) return;
+  const res = await fetch('/api/friends', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ name }),
+  });
+  const data = await res.json();
+  if (!res.ok) {
+    errBox.innerHTML = `<p class="error-msg">${data.error}</p>`;
+    return;
+  }
+  document.getElementById('newName').value = '';
+  loadFriends();
+});
+
+async function deleteFriend(id) {
+  const f = friends.find((x) => x.id === id);
+  if (!confirm(`"${f ? f.name : 'Freund'}" wirklich löschen? Alle Fotos und Einträge gehen dabei verloren.`)) return;
+  const res = await fetch(`/api/friends/${id}`, { method: 'DELETE' });
+  if (res.ok) loadFriends();
+}
+
+function openShareModal(id) {
+  shareTargetId = id;
+  const f = friends.find((x) => x.id === id);
+  document.getElementById('shareFriendName').textContent = f ? f.name : '';
+  document.getElementById('sharePw').value = '';
+  document.getElementById('shareErr').innerHTML = '';
+  const linkBox = document.getElementById('shareLinkBox');
+  if (f && f.shareEnabled) {
+    linkBox.style.display = 'block';
+    document.getElementById('shareLinkInput').value = `${window.location.origin}/share/${id}`;
+  } else {
+    linkBox.style.display = 'none';
+  }
+  document.getElementById('shareModal').style.display = 'flex';
+}
+
+document.getElementById('shareCloseBtn').addEventListener('click', () => {
+  document.getElementById('shareModal').style.display = 'none';
+});
+
+document.getElementById('shareEnableBtn').addEventListener('click', async () => {
+  const pw = document.getElementById('sharePw').value;
+  const errBox = document.getElementById('shareErr');
+  errBox.innerHTML = '';
+  const res = await fetch(`/api/friends/${shareTargetId}/share`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ enabled: true, password: pw }),
+  });
+  const data = await res.json();
+  if (!res.ok) {
+    errBox.innerHTML = `<p class="error-msg">${data.error}</p>`;
+    return;
+  }
+  document.getElementById('shareLinkBox').style.display = 'block';
+  document.getElementById('shareLinkInput').value = `${window.location.origin}/share/${shareTargetId}`;
+  await loadFriends();
+});
+
+document.getElementById('shareDisableBtn').addEventListener('click', async () => {
+  const res = await fetch(`/api/friends/${shareTargetId}/share`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ enabled: false }),
+  });
+  if (res.ok) {
+    document.getElementById('shareLinkBox').style.display = 'none';
+    await loadFriends();
+  }
+});
+
+document.getElementById('copyLinkBtn').addEventListener('click', () => {
+  const input = document.getElementById('shareLinkInput');
+  input.select();
+  navigator.clipboard.writeText(input.value).catch(() => {});
+});
+
+document.getElementById('logoutBtn').addEventListener('click', async () => {
+  await fetch('/api/logout', { method: 'POST' });
+  window.location.href = '/';
+});
+
+checkSession();
+loadFriends();