*WIP* StarterPack einreichen

src/utils/create-starterkit.js

@@ -1,5 +1,8 @@
 import { createPopup, destroyAllPopups } from '../components/popupManager.js';
 
+const POST_URL = 'https://api.libori.social/starterpack';
+const AUTH_TOKEN = '5e1185f21148c3f6c81cfcd15a3449eadb42c0c248f010810956d926bacffb55';
+
 export function initializeCreateStarterKitPopup() {
     const createButton = document.getElementById('create-starterkit-btn');
 
@@ -11,21 +14,14 @@ export function initializeCreateStarterKitPopup() {
             customClass: 'starterkit-popup'
         });
 
-        // Klasse hinzufügen, um das Scrollen zu verhindern
         document.body.classList.add('body-no-scroll');
 
-        // Event-Listener für das Formular einrichten
         setupFormEvents(popup);
     });
 }
 
 function getStarterKitPopupContent() {
     return `
-        <p>
-            Im folgenden Formular kannst du dein StarterPack ganz einfach zusammenstellen. Sobald du es fertiggestellt hast, kannst du es uns am besten als Issue in unserem <a href="https://codeberg.org/kirche-im-netz/Startodon-Hub" target="_blank">Repository</a> zukommen lassen.
-        </p>
-        <hr>
-        <h4>Stelle dein StarterPack zusammen</h4>
         <form id="starterkit-form">
             <label for="kit-name">Name des StarterPacks:</label>
             <input type="text" id="kit-name" name="kitName" required />
@@ -35,22 +31,43 @@ function getStarterKitPopupContent() {
             <input type="text" id="kit-author" name="kitAuthor" required />
             <label for="kit-accounts">Accounts (eine URL pro Zeile):</label>
             <textarea id="kit-accounts" name="kitAccounts" required></textarea>
-            <button type="submit">StarterPack generieren</button>
+            <button type="submit">StarterPack einreichen</button>
         </form>
+        <div id="preview-section" style="display:none;">
+            <p>Überprüfe die folgenden Daten sorgfältig, bevor du sie absendest:</p>
+            <pre id="json-preview"></pre>
+            <p>Stimmen die Daten? Wenn ja, klicke auf 'Los gehts!', um deine Eingabe zu übermitteln.</p>
+            <button id="confirm-submit">Los gehts!</button>
+            <button id="cancel-submit">zurück</button>
+        </div>
+        <div id="status-section" style="display:none;">
+            <p id="status-message"></p>
+            <p id="status-details"></p>
+            <button id="new-form-btn" style="display:none;">Neues Formular erstellen</button>
+        </div>
         <hr>
-        <h4>Wie gehts weiter?</h4>
         <p>
-            Nach dem Ausfüllen kannst du dein StarterPack einreichen:
+            Mit diesem Formular kannst du dein StarterPack ganz einfach zusammenstellen und einreichen.
-            <ul>
-                <li>Per Pull-Request: Lade dein StarterPack direkt in unser <a href="https://codeberg.org/kirche-im-netz/Startodon-Hub" target="_blank">Repository</a> hoch. (Hierzu brauchst du einen Account bei Codeberg.)</li>
-                <li>Per E-Mail: Alternativ kannst du uns die JSON-Datei einfach per Mail an <a href="mailto:support@exampel.com" target="_blank">support@example.com</a> senden.</li>
-            </ul>
         </p>
+        <p>
+            Die StarterPacks, sowie diese ganze Seite wird von unserem <a href="https://codeberg.org/kirche-im-netz/Startodon-Hub" target="_blank">Codeberg-Repository</a> ausgeliefert. Gerne kannst du dein StarterPack auch direkt als Issue einreichen oder den aktuellen Bearbeitungsstand verfolgen.
+        </p>
+        
     `;
 }
 
 function setupFormEvents(popup) {
     const form = popup.querySelector('#starterkit-form');
+    const previewSection = popup.querySelector('#preview-section');
+    const statusSection = popup.querySelector('#status-section');
+    const statusMessage = popup.querySelector('#status-message');
+    const statusDetails = popup.querySelector('#status-details');
+    const newFormButton = popup.querySelector('#new-form-btn');
+    const jsonPreview = popup.querySelector('#json-preview');
+    const confirmButton = popup.querySelector('#confirm-submit');
+    const cancelButton = popup.querySelector('#cancel-submit');
+
+    let starterKit = null;
 
     form.addEventListener('submit', (event) => {
         event.preventDefault();
@@ -58,46 +75,86 @@ function setupFormEvents(popup) {
 
         const kitName = formData.get('kitName');
         const kitDescription = formData.get('kitDescription');
-        let kitAuthor = formData.get('kitAuthor');
+        let kitAuthor = formData.get('kitAuthor').trim();
+
+        // Validierung und Bereinigung des Autors
+        if (kitAuthor.match(/^@[a-zA-Z0-9_]+@[a-zA-Z0-9.-]+$/)) {
+            const [empty, username, domain] = kitAuthor.split('@');
+            kitAuthor = `https://${domain}/@${username}`;
+        } else {
+            alert(`Fehler im Feld "Autor": Ungültiger Mastodon-Handle (${kitAuthor}). Bitte im Format @nutzername@server eingeben.`);
+            return;
+        }
+
+        // Validierung und Bereinigung der Accounts
         const kitAccounts = formData
             .get('kitAccounts')
             .split('\n')
-            .map((url) => url.trim())
+            .map((account, index) => {
-            .filter((url) => url);
+                const trimmed = account.trim();
-
+                if (!trimmed.match(/^@[a-zA-Z0-9_]+@[a-zA-Z0-9.-]+$/)) {
-        if (kitAuthor && kitAuthor.startsWith('@')) {
+                    alert(`Fehler im Feld "Accounts" (Zeile ${index + 1}): Ungültiges Kontoformat (${trimmed}). Bitte im Format @nutzername@server eingeben.`);
-            const [username, domain] = kitAuthor.slice(1).split('@');
+                    throw new Error(`Ungültiges Kontoformat: ${trimmed}`);
-            if (username && domain) {
-                kitAuthor = `https://${domain}/@${username}`;
-            } else {
-                alert('Ungültiger Mastodon-Handle. Bitte im Format @benutzername@domain eingeben.');
-                return;
-            }
                 }
+                const [empty, username, domain] = trimmed.split('@');
+                return `https://${domain}/@${username}`;
+            });
 
         if (!kitName || !kitDescription || !kitAuthor || kitAccounts.length === 0) {
             alert('Bitte alle Felder ausfüllen.');
             return;
         }
 
-        const starterKit = {
+        starterKit = {
             name: kitName,
             description: kitDescription,
             authors: [kitAuthor],
             accounts: kitAccounts,
         };
 
-        const jsonString = JSON.stringify(starterKit, null, 2);
+        form.style.display = 'none';
-        const blob = new Blob([jsonString], { type: 'application/json' });
+        previewSection.style.display = 'block';
-        const url = URL.createObjectURL(blob);
+        jsonPreview.textContent = JSON.stringify(starterKit, null, 2);
+    });
 
-        const tempLink = document.createElement('a');
+    confirmButton.addEventListener('click', async () => {
-        tempLink.href = url;
+        confirmButton.disabled = true;
-        tempLink.download = `${kitName.toLowerCase().replace(/\s+/g, '_')}.json`;
+        confirmButton.textContent = 'Absenden...';
-        document.body.appendChild(tempLink);
+
-        tempLink.click();
+        try {
-        document.body.removeChild(tempLink);
+            const response = await fetch(POST_URL, {
-        URL.revokeObjectURL(url);
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'Authorization': AUTH_TOKEN
+                },
+                body: JSON.stringify(starterKit)
+            });
+
+            previewSection.style.display = 'none';
+            statusSection.style.display = 'block';
+            if (response.ok) {
+                statusMessage.textContent = '✅ Erfolgreich übermittelt!';
+                statusDetails.innerHTML = '<strong>Vielen Dank für dein StarterPack! 😇</strong><br>Wir werden es nun prüfen. Sollte alles in Ordnung sein, stellen wir es zeitnah online. In der Regel werden wir dich auch kurz informieren. Informiere dich gerne im <a href="https://codeberg.org/kirche-im-netz/Startodon-Hub" target="_blank">Repository</a> über den aktuellen Stand. <br><br>Möchtest du ein weiteres StarterPack einreichen?';
+                newFormButton.style.display = 'block';
+            } else {
+                statusMessage.textContent = '❌ Fehler beim Einreichen!';
+                statusDetails.innerHTML = 'Es gab ein Problem bei der Übermittlung. Bitte überprüfe deine Daten und versuche es erneut. Klappt es dann immer noch nicht, kopiere deine Eingabe und reiche sie gerne direkt als Issue in unserem <a href="https://codeberg.org/kirche-im-netz/Startodon-Hub" target="_blank">Repository</a> ein. <br><br><strong>Bitte informiere kurz <a href="https://libori.social/@alex">@alex@libori.social</a> kurz über den Fehler.</strong>';
+            }
+        } catch (error) {
+            statusMessage.textContent = '❌ Netzwerkfehler!';
+            statusDetails.innerHTML = 'Es gab ein Problem bei der Übermittlung. Bitte überprüfe deine Daten und versuche es erneut. Klappt es dann immer noch nicht, kopiere deine Eingabe und reiche sie gerne direkt als Issue in unserem <a href="https://codeberg.org/kirche-im-netz/Startodon-Hub" target="_blank">Repository</a> ein. <br><br><strong>Bitte informiere kurz <a href="https://libori.social/@alex">@alex@libori.social</a> kurz über den Fehler.</strong>';
+        }
+    });
+
+    cancelButton.addEventListener('click', () => {
+        form.style.display = 'block';
+        previewSection.style.display = 'none';
+    });
+
+    newFormButton.addEventListener('click', () => {
+        form.reset();
+        form.style.display = 'block';
+        statusSection.style.display = 'none';
     });
 }
-