reverseproxy

backend/public/admin/admin.css

@@ -44,3 +44,16 @@
   display: flex; align-items: center; justify-content: center; z-index: 50; padding: 1em;
 }
 .modal { width: 100%; max-width: 420px; }
+
+.transfer-row {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+  gap: 1.4em;
+}
+.transfer-row input[type="file"] { margin-top: 0.3em; }
+
+.saved-msg2 {
+  margin-top: 0.6em; color: #3a8a5a; font-weight: 700; font-size: 0.9rem;
+  opacity: 0; transition: opacity 0.3s;
+}
+.saved-msg2.show { opacity: 1; }

backend/public/admin/admin.js

@@ -1,5 +1,6 @@
 let friends = [];
 let shareTargetId = null;
+let settings = { publicBaseUrl: '' };
 
 async function checkSession() {
   const res = await fetch('/api/session');
@@ -9,6 +10,37 @@ async function checkSession() {
   }
 }
 
+async function loadSettings() {
+  const res = await fetch('/api/settings');
+  if (!res.ok) return;
+  const data = await res.json();
+  settings = data.settings || { publicBaseUrl: '' };
+  document.getElementById('publicBaseUrl').value = settings.publicBaseUrl || '';
+}
+
+document.getElementById('saveSettingsBtn').addEventListener('click', async () => {
+  const publicBaseUrl = document.getElementById('publicBaseUrl').value.trim();
+  const res = await fetch('/api/settings', {
+    method: 'PUT',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ publicBaseUrl }),
+  });
+  const data = await res.json();
+  if (res.ok) {
+    settings = data.settings;
+    const msg = document.getElementById('settingsSaved');
+    msg.textContent = 'Gespeichert ✓';
+    msg.classList.add('show');
+    setTimeout(() => msg.classList.remove('show'), 1800);
+  }
+});
+
+function baseUrl() {
+  return settings.publicBaseUrl && settings.publicBaseUrl.length
+    ? settings.publicBaseUrl
+    : window.location.origin;
+}
+
 async function loadFriends() {
   const res = await fetch('/api/friends');
   if (res.status === 401) { window.location.href = '/'; return; }
@@ -37,6 +69,7 @@ function renderFriends() {
       <div class="friend-actions">
         <a class="btn" href="/friend/${f.id}">✏️ Bearbeiten</a>
         <button class="secondary" data-share="${f.id}">🔗 Freigabe</button>
+        <button class="secondary" data-export="${f.id}">⬇️ Export</button>
         <button class="danger" data-delete="${f.id}">🗑️</button>
       </div>
     `;
@@ -49,6 +82,9 @@ function renderFriends() {
   grid.querySelectorAll('[data-delete]').forEach((btn) => {
     btn.addEventListener('click', () => deleteFriend(btn.dataset.delete));
   });
+  grid.querySelectorAll('[data-export]').forEach((btn) => {
+    btn.addEventListener('click', () => window.location.href = `/api/friends/${btn.dataset.export}/export`);
+  });
 }
 
 // wir brauchen den vollen Ordnernamen für Bild-URLs; da wir ihn nicht separat liefern,
@@ -101,7 +137,7 @@ function openShareModal(id) {
   const linkBox = document.getElementById('shareLinkBox');
   if (f && f.shareEnabled) {
     linkBox.style.display = 'block';
-    document.getElementById('shareLinkInput').value = `${window.location.origin}/share/${id}`;
+    document.getElementById('shareLinkInput').value = `${baseUrl()}/share/${id}`;
   } else {
     linkBox.style.display = 'none';
   }
@@ -127,7 +163,7 @@ document.getElementById('shareEnableBtn').addEventListener('click', async () =>
     return;
   }
   document.getElementById('shareLinkBox').style.display = 'block';
-  document.getElementById('shareLinkInput').value = `${window.location.origin}/share/${shareTargetId}`;
+  document.getElementById('shareLinkInput').value = `${baseUrl()}/share/${shareTargetId}`;
   await loadFriends();
 });
 
@@ -154,5 +190,56 @@ document.getElementById('logoutBtn').addEventListener('click', async () => {
   window.location.href = '/';
 });
 
+// --- Sichern & Wiederherstellen ---
+function showTransferMsg(text, isError) {
+  const box = document.getElementById('transferMsg');
+  box.innerHTML = isError ? `<p class="error-msg">${text}</p>` : `<p class="saved-msg2 show">${text}</p>`;
+}
+
+document.getElementById('bookExportBtn').addEventListener('click', () => {
+  window.location.href = '/api/book/export';
+});
+
+document.getElementById('bookImportBtn').addEventListener('click', async () => {
+  const fileInput = document.getElementById('bookImportFile');
+  const file = fileInput.files[0];
+  if (!file) { showTransferMsg('Bitte zuerst eine ZIP-Datei auswählen.', true); return; }
+  const replaceAll = document.getElementById('bookImportReplace').checked;
+  if (replaceAll && !confirm('Wirklich ALLE bestehenden Freunde vor dem Import löschen?')) return;
+
+  const fd = new FormData();
+  fd.append('file', file);
+  fd.append('replaceAll', replaceAll ? 'true' : 'false');
+  showTransferMsg('Importiere...', false);
+  const res = await fetch('/api/book/import', { method: 'POST', body: fd });
+  const data = await res.json();
+  if (res.ok) {
+    showTransferMsg(`${data.imported.length} Freund(e) importiert: ${data.imported.join(', ') || '–'}`, false);
+    fileInput.value = '';
+    loadFriends();
+  } else {
+    showTransferMsg(data.error || 'Import fehlgeschlagen.', true);
+  }
+});
+
+document.getElementById('friendImportBtn').addEventListener('click', async () => {
+  const fileInput = document.getElementById('friendImportFile');
+  const file = fileInput.files[0];
+  if (!file) { showTransferMsg('Bitte zuerst eine ZIP-Datei auswählen.', true); return; }
+  const fd = new FormData();
+  fd.append('file', file);
+  showTransferMsg('Importiere...', false);
+  const res = await fetch('/api/friends/import', { method: 'POST', body: fd });
+  const data = await res.json();
+  if (res.ok) {
+    showTransferMsg(`"${data.friend.name}" wurde importiert.`, false);
+    fileInput.value = '';
+    loadFriends();
+  } else {
+    showTransferMsg(data.error || 'Import fehlgeschlagen.', true);
+  }
+});
+
 checkSession();
+loadSettings();
 loadFriends();

backend/public/admin/index.html

@@ -17,7 +17,18 @@
   </div>
 
   <div class="container">
-    <section class="card" id="createCard">
+    <section class="card" id="settingsCard">
+      <h2>Einstellungen</h2>
+      <label for="publicBaseUrl">Öffentliche URL (für Freigabe-Links hinter einem Reverse-Proxy)</label>
+      <div class="inline-form">
+        <input type="text" id="publicBaseUrl" placeholder="https://freundesbuch.example.com" />
+        <button type="button" id="saveSettingsBtn">Speichern</button>
+      </div>
+      <p class="muted" style="margin-top:0.4em;">Leer lassen, um automatisch die aktuell aufgerufene Adresse zu verwenden.</p>
+      <div id="settingsSaved" class="saved-msg2"></div>
+    </section>
+
+    <section class="card" id="createCard" style="margin-top:1.4em;">
       <h2>Neuen Freund anlegen</h2>
       <form id="createForm" class="inline-form">
         <input type="text" id="newName" placeholder="Name des Freundes" required />
@@ -26,6 +37,33 @@
       <div id="createErr"></div>
     </section>
 
+    <section class="card" id="transferCard" style="margin-top:1.4em;">
+      <h2>Sichern &amp; Wiederherstellen</h2>
+      <div class="transfer-row">
+        <div>
+          <h3 style="font-size:1.2rem;">Ganzes Buch</h3>
+          <button type="button" id="bookExportBtn" class="secondary">⬇️ Buch exportieren (ZIP)</button>
+        </div>
+        <div>
+          <label for="bookImportFile">Buch importieren</label>
+          <input type="file" id="bookImportFile" accept=".zip" />
+          <label style="font-weight:normal; display:flex; align-items:center; gap:0.4em; margin-top:0.4em;">
+            <input type="checkbox" id="bookImportReplace" style="width:auto;" />
+            Bestehende Freunde vorher löschen
+          </label>
+          <button type="button" id="bookImportBtn" class="secondary" style="margin-top:0.4em;">⬆️ Importieren</button>
+        </div>
+      </div>
+      <hr style="border:none; border-top:1px solid var(--line); margin:1.2em 0;" />
+      <div>
+        <h3 style="font-size:1.2rem;">Einzelnen Freund importieren</h3>
+        <p class="muted">Legt einen neuen Freund aus einer zuvor exportierten ZIP-Datei an.</p>
+        <input type="file" id="friendImportFile" accept=".zip" />
+        <button type="button" id="friendImportBtn" class="secondary" style="margin-top:0.4em;">⬆️ Importieren</button>
+      </div>
+      <div id="transferMsg"></div>
+    </section>
+
     <section style="margin-top:2em;">
       <h2>Deine Freunde</h2>
       <div id="friendGrid" class="friend-grid"></div>