diff --git a/src/utils/create-starterkit.js b/src/utils/create-starterkit.js index c6086d3..218e2d8 100644 --- a/src/utils/create-starterkit.js +++ b/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 ` -
- 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 Repository zukommen lassen. -
-- Nach dem Ausfüllen kannst du dein StarterPack einreichen: -
+ Die StarterPacks, sowie diese ganze Seite wird von unserem Codeberg-Repository ausgeliefert. Gerne kannst du dein StarterPack auch direkt als Issue einreichen oder den aktuellen Bearbeitungsstand verfolgen. +
+ `; } 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()) - .filter((url) => url); - - if (kitAuthor && kitAuthor.startsWith('@')) { - const [username, domain] = kitAuthor.slice(1).split('@'); - if (username && domain) { - kitAuthor = `https://${domain}/@${username}`; - } else { - alert('Ungültiger Mastodon-Handle. Bitte im Format @benutzername@domain eingeben.'); - return; - } - } + .map((account, index) => { + const trimmed = account.trim(); + if (!trimmed.match(/^@[a-zA-Z0-9_]+@[a-zA-Z0-9.-]+$/)) { + alert(`Fehler im Feld "Accounts" (Zeile ${index + 1}): Ungültiges Kontoformat (${trimmed}). Bitte im Format @nutzername@server eingeben.`); + throw new Error(`Ungültiges Kontoformat: ${trimmed}`); + } + 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); - const blob = new Blob([jsonString], { type: 'application/json' }); - const url = URL.createObjectURL(blob); + form.style.display = 'none'; + previewSection.style.display = 'block'; + jsonPreview.textContent = JSON.stringify(starterKit, null, 2); + }); - const tempLink = document.createElement('a'); - tempLink.href = url; - tempLink.download = `${kitName.toLowerCase().replace(/\s+/g, '_')}.json`; - document.body.appendChild(tempLink); - tempLink.click(); - document.body.removeChild(tempLink); - URL.revokeObjectURL(url); + confirmButton.addEventListener('click', async () => { + confirmButton.disabled = true; + confirmButton.textContent = 'Absenden...'; + + try { + const response = await fetch(POST_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 = 'Vielen Dank für dein StarterPack! 😇