addes folder backup attachments logging

app/templates/yaml.html

@@ -1,30 +1,77 @@
 {% extends "base.html" %}
-{% block title %}YAML — IMAP Mail Filter{% endblock %}
+{% block title %}Import / Export — IMAP Mail Filter{% endblock %}
 {% block content %}
-<h1>YAML Import / Export</h1>
+<h1>Import / Export</h1>
 
+<h2>Komplett-Backup</h2>
+<p>Enthält alles: Konten (inkl. Passwörter), Filterregeln und Verarbeitungsstatus. Der Encryption-Key muss beim Import identisch sein.</p>
 <div class="grid">
     <article>
-        <header><h3>Export</h3></header>
-        <p>Aktuelle Konfiguration als YAML-Datei herunterladen.</p>
-        <button onclick="exportYaml()">YAML exportieren</button>
-        <pre id="yaml-preview" style="max-height: 400px; overflow-y: auto; display: none;"></pre>
+        <header><h3>Backup erstellen</h3></header>
+        <p>Gesamte Konfiguration als JSON-Datei herunterladen.</p>
+        <button onclick="exportBackup()">Backup herunterladen</button>
     </article>
 
     <article>
-        <header><h3>Import</h3></header>
-        <p>YAML-Datei hochladen um Konten und Filterregeln zu importieren.</p>
-        <form id="import-form">
+        <header><h3>Backup wiederherstellen</h3></header>
+        <p>Backup-Datei hochladen. Bestehende Konten werden aktualisiert, neue angelegt.</p>
+        <form id="backup-import-form">
+            <input type="file" name="file" accept=".json" required>
+            <button type="submit">Wiederherstellen</button>
+        </form>
+        <div id="backup-result" style="display:none"></div>
+    </article>
+</div>
+
+<hr>
+
+<h2>YAML Filterregeln</h2>
+<p>Nur Konten und Filterregeln — ohne Passwörter (können als Umgebungsvariablen referenziert werden).</p>
+<div class="grid">
+    <article>
+        <header><h3>YAML Export</h3></header>
+        <button onclick="exportYaml()">YAML exportieren</button>
+        <pre id="yaml-preview" style="max-height: 300px; overflow-y: auto; display: none; margin-top: 1rem;"></pre>
+    </article>
+
+    <article>
+        <header><h3>YAML Import</h3></header>
+        <form id="yaml-import-form">
             <input type="file" name="file" accept=".yaml,.yml" required>
             <button type="submit">Importieren</button>
         </form>
-        <div id="import-result" style="display:none"></div>
+        <div id="yaml-result" style="display:none"></div>
     </article>
 </div>
 {% endblock %}
 
 {% block scripts %}
 <script>
+function exportBackup() {
+    window.location.href = '/api/yaml/backup';
+}
+
+document.getElementById('backup-import-form').addEventListener('submit', async (e) => {
+    e.preventDefault();
+    if (!confirm('Backup wiederherstellen?\n\nBestehende Konten mit gleichem Benutzernamen/Server werden überschrieben.')) return;
+    const formData = new FormData(e.target);
+    const resp = await fetch('/api/yaml/backup', {method: 'POST', body: formData});
+    const result = await resp.json();
+    const div = document.getElementById('backup-result');
+    div.style.display = 'block';
+    if (result.error) {
+        div.innerHTML = `<article role="alert">Fehler: ${result.error}</article>`;
+    } else {
+        div.innerHTML = `<article>
+            Backup wiederhergestellt!<br>
+            Konten erstellt: ${result.accounts_created}<br>
+            Konten aktualisiert: ${result.accounts_updated}<br>
+            Regeln erstellt: ${result.rules_created}<br>
+            Verarbeitungsstatus: ${result.processed_restored} Einträge
+        </article>`;
+    }
+});
+
 async function exportYaml() {
     const resp = await fetch('/api/yaml/export');
     const text = await resp.text();
@@ -32,7 +79,6 @@ async function exportYaml() {
     pre.textContent = text;
     pre.style.display = 'block';
 
-    // Also trigger download
     const blob = new Blob([text], {type: 'text/yaml'});
     const url = URL.createObjectURL(blob);
     const a = document.createElement('a');
@@ -42,12 +88,12 @@ async function exportYaml() {
     URL.revokeObjectURL(url);
 }
 
-document.getElementById('import-form').addEventListener('submit', async (e) => {
+document.getElementById('yaml-import-form').addEventListener('submit', async (e) => {
     e.preventDefault();
     const formData = new FormData(e.target);
     const resp = await fetch('/api/yaml/import', {method: 'POST', body: formData});
     const result = await resp.json();
-    const div = document.getElementById('import-result');
+    const div = document.getElementById('yaml-result');
     div.style.display = 'block';
     if (result.error) {
         div.innerHTML = `<article role="alert">Fehler: ${result.error}</article>`;