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. -

-
-

Stelle dein StarterPack zusammen

@@ -35,22 +31,43 @@ function getStarterKitPopupContent() { - +
+ +
-

Wie gehts weiter?

- Nach dem Ausfüllen kannst du dein StarterPack einreichen: -

+ Mit diesem Formular kannst du dein StarterPack ganz einfach zusammenstellen und 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! 😇
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 Repository über den aktuellen Stand.

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 Repository ein.

Bitte informiere kurz @alex@libori.social kurz über den Fehler.'; + } + } 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 Repository ein.

Bitte informiere kurz @alex@libori.social kurz über den Fehler.'; + } + }); + + cancelButton.addEventListener('click', () => { + form.style.display = 'block'; + previewSection.style.display = 'none'; + }); + + newFormButton.addEventListener('click', () => { + form.reset(); + form.style.display = 'block'; + statusSection.style.display = 'none'; }); } -