mirror of
https://codeberg.org/kirche-im-netz/Startodon-Hub.git
synced 2025-08-04 02:04:28 +02:00
*WIP* StarterPack einreichen
This commit is contained in:
Alexander Müller
parent
362903c846
commit
53fcfba697
1 changed files with 96 additions and 39 deletions
|
|
@ -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:
|
||||
<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>
|
||||
Mit diesem Formular kannst du dein StarterPack ganz einfach zusammenstellen und einreichen.
|
||||
</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())
|
||||
.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 = '<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';
|
||||
});
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue