670 lines
24 KiB
Vue
670 lines
24 KiB
Vue
<template>
|
|
<div class="min-h-full py-16 bg-gray-50">
|
|
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="mb-8">
|
|
<h1 class="text-4xl sm:text-5xl font-display font-bold text-gray-900 mb-4">
|
|
API-Dokumentation
|
|
</h1>
|
|
<div class="w-24 h-1 bg-primary-600 mb-6" />
|
|
<p class="text-xl text-gray-600">
|
|
Übersicht über alle verfügbaren API-Endpoints und deren Verwendung
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Authentication Info -->
|
|
<div class="bg-blue-50 border-l-4 border-blue-500 p-6 rounded-lg mb-8">
|
|
<h2 class="text-xl font-semibold text-blue-900 mb-2">
|
|
Authentifizierung
|
|
</h2>
|
|
<p class="text-blue-800 mb-4">
|
|
Alle API-Endpoints erfordern Authentifizierung (außer Login). Es werden zwei Methoden unterstützt:
|
|
</p>
|
|
<div class="space-y-3">
|
|
<div>
|
|
<strong class="text-blue-900">1. Cookie-basiert:</strong>
|
|
<p class="text-blue-700 text-sm mt-1">
|
|
Nach dem Login über <code>/api/auth/login</code> wird automatisch ein Cookie gesetzt.
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<strong class="text-blue-900">2. Authorization Header:</strong>
|
|
<p class="text-blue-700 text-sm mt-1">
|
|
Header: <code>Authorization: Bearer <token></code>
|
|
</p>
|
|
<p class="text-blue-700 text-sm">
|
|
Der Token wird im Login-Response im Feld <code>token</code> zurückgegeben.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Endpoints -->
|
|
<div class="space-y-8">
|
|
<!-- Authentication Endpoints -->
|
|
<section class="bg-white rounded-xl shadow-lg p-6">
|
|
<h2 class="text-2xl font-display font-bold text-gray-900 mb-6">
|
|
Authentifizierung
|
|
</h2>
|
|
|
|
<div class="space-y-6">
|
|
<!-- Login -->
|
|
<div class="border-l-4 border-primary-600 pl-4">
|
|
<div class="flex items-center justify-between mb-2">
|
|
<h3 class="text-lg font-semibold text-gray-900">
|
|
POST /api/auth/login
|
|
</h3>
|
|
<span class="px-2 py-1 text-xs font-medium bg-green-100 text-green-800 rounded">Öffentlich</span>
|
|
</div>
|
|
<p class="text-gray-600 mb-3">
|
|
Benutzer einloggen und Token erhalten
|
|
</p>
|
|
|
|
<div class="bg-gray-50 rounded-lg p-4 mb-3">
|
|
<p class="text-sm font-medium text-gray-700 mb-2">
|
|
Request Body:
|
|
</p>
|
|
<pre class="text-xs bg-gray-900 text-gray-100 p-3 rounded overflow-x-auto"><code>{
|
|
"email": "benutzer@example.com",
|
|
"password": "passwort"
|
|
}</code></pre>
|
|
</div>
|
|
|
|
<div class="bg-gray-50 rounded-lg p-4">
|
|
<p class="text-sm font-medium text-gray-700 mb-2">
|
|
Response:
|
|
</p>
|
|
<pre class="text-xs bg-gray-900 text-gray-100 p-3 rounded overflow-x-auto"><code>{
|
|
"success": true,
|
|
"token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...",
|
|
"user": {
|
|
"id": "user-id",
|
|
"email": "benutzer@example.com",
|
|
"name": "Max Mustermann",
|
|
"role": "mitglied"
|
|
}
|
|
}</code></pre>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Logout -->
|
|
<div class="border-l-4 border-primary-600 pl-4">
|
|
<div class="flex items-center justify-between mb-2">
|
|
<h3 class="text-lg font-semibold text-gray-900">
|
|
POST /api/auth/logout
|
|
</h3>
|
|
<span class="px-2 py-1 text-xs font-medium bg-yellow-100 text-yellow-800 rounded">Auth erforderlich</span>
|
|
</div>
|
|
<p class="text-gray-600 mb-3">
|
|
Benutzer ausloggen
|
|
</p>
|
|
|
|
<div class="bg-gray-50 rounded-lg p-4">
|
|
<p class="text-sm font-medium text-gray-700 mb-2">
|
|
Response:
|
|
</p>
|
|
<pre class="text-xs bg-gray-900 text-gray-100 p-3 rounded overflow-x-auto"><code>{
|
|
"success": true,
|
|
"message": "Erfolgreich ausgeloggt"
|
|
}</code></pre>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Auth Status -->
|
|
<div class="border-l-4 border-primary-600 pl-4">
|
|
<div class="flex items-center justify-between mb-2">
|
|
<h3 class="text-lg font-semibold text-gray-900">
|
|
GET /api/auth/status
|
|
</h3>
|
|
<span class="px-2 py-1 text-xs font-medium bg-yellow-100 text-yellow-800 rounded">Auth erforderlich</span>
|
|
</div>
|
|
<p class="text-gray-600 mb-3">
|
|
Aktuellen Authentifizierungsstatus abrufen
|
|
</p>
|
|
|
|
<div class="bg-gray-50 rounded-lg p-4">
|
|
<p class="text-sm font-medium text-gray-700 mb-2">
|
|
Response:
|
|
</p>
|
|
<pre class="text-xs bg-gray-900 text-gray-100 p-3 rounded overflow-x-auto"><code>{
|
|
"isLoggedIn": true,
|
|
"user": {
|
|
"id": "user-id",
|
|
"email": "benutzer@example.com",
|
|
"name": "Max Mustermann",
|
|
"role": "mitglied"
|
|
},
|
|
"role": "mitglied"
|
|
}</code></pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Members Endpoints -->
|
|
<section class="bg-white rounded-xl shadow-lg p-6">
|
|
<h2 class="text-2xl font-display font-bold text-gray-900 mb-6">
|
|
Mitglieder
|
|
</h2>
|
|
|
|
<div class="space-y-6">
|
|
<!-- Get Members -->
|
|
<div class="border-l-4 border-primary-600 pl-4">
|
|
<div class="flex items-center justify-between mb-2">
|
|
<h3 class="text-lg font-semibold text-gray-900">
|
|
GET /api/members
|
|
</h3>
|
|
<span class="px-2 py-1 text-xs font-medium bg-yellow-100 text-yellow-800 rounded">Auth erforderlich</span>
|
|
</div>
|
|
<p class="text-gray-600 mb-3">
|
|
Alle Mitglieder abrufen (mit Merge aus registrierten Benutzern)
|
|
</p>
|
|
|
|
<div class="bg-gray-50 rounded-lg p-4">
|
|
<p class="text-sm font-medium text-gray-700 mb-2">
|
|
Response:
|
|
</p>
|
|
<pre class="text-xs bg-gray-900 text-gray-100 p-3 rounded overflow-x-auto"><code>{
|
|
"success": true,
|
|
"members": [
|
|
{
|
|
"id": "member-id",
|
|
"firstName": "Max",
|
|
"lastName": "Mustermann",
|
|
"geburtsdatum": "1990-01-15",
|
|
"email": "max@example.com",
|
|
"phone": "0123456789",
|
|
"address": "Musterstraße 1",
|
|
"source": "manual",
|
|
"editable": true,
|
|
"hasLogin": false
|
|
}
|
|
]
|
|
}</code></pre>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Post Members -->
|
|
<div class="border-l-4 border-red-500 pl-4">
|
|
<div class="flex items-center justify-between mb-2">
|
|
<h3 class="text-lg font-semibold text-gray-900">
|
|
POST /api/members
|
|
</h3>
|
|
<span class="px-2 py-1 text-xs font-medium bg-red-100 text-red-800 rounded">admin/vorstand</span>
|
|
</div>
|
|
<p class="text-gray-600 mb-3">
|
|
Neues Mitglied hinzufügen oder bestehendes bearbeiten
|
|
</p>
|
|
|
|
<div class="bg-gray-50 rounded-lg p-4 mb-3">
|
|
<p class="text-sm font-medium text-gray-700 mb-2">
|
|
Request Body:
|
|
</p>
|
|
<pre class="text-xs bg-gray-900 text-gray-100 p-3 rounded overflow-x-auto"><code>{
|
|
"id": "optional-für-update",
|
|
"firstName": "Max",
|
|
"lastName": "Mustermann",
|
|
"geburtsdatum": "1990-01-15",
|
|
"email": "max@example.com",
|
|
"phone": "0123456789",
|
|
"address": "Musterstraße 1, 12345 Musterstadt",
|
|
"notes": "Optional"
|
|
}</code></pre>
|
|
</div>
|
|
|
|
<div class="bg-gray-50 rounded-lg p-4 mb-3">
|
|
<p class="text-sm font-medium text-gray-700 mb-2">
|
|
Response:
|
|
</p>
|
|
<pre class="text-xs bg-gray-900 text-gray-100 p-3 rounded overflow-x-auto"><code>{
|
|
"success": true,
|
|
"message": "Mitglied erfolgreich gespeichert."
|
|
}</code></pre>
|
|
</div>
|
|
|
|
<div class="mt-3 bg-blue-50 rounded-lg p-3">
|
|
<p class="text-xs text-blue-800">
|
|
<strong>Hinweis:</strong> Ohne <code>id</code> wird ein neues Mitglied erstellt. Mit <code>id</code> wird ein bestehendes Mitglied aktualisiert. <code>geburtsdatum</code> ist Pflichtfeld zur Duplikatsprüfung (Format: YYYY-MM-DD).
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Bulk Import Members -->
|
|
<div class="border-l-4 border-red-500 pl-4">
|
|
<div class="flex items-center justify-between mb-2">
|
|
<h3 class="text-lg font-semibold text-gray-900">
|
|
POST /api/members/bulk
|
|
</h3>
|
|
<span class="px-2 py-1 text-xs font-medium bg-red-100 text-red-800 rounded">admin/vorstand</span>
|
|
</div>
|
|
<p class="text-gray-600 mb-3">
|
|
Mehrere Mitglieder auf einmal importieren (Bulk-Import)
|
|
</p>
|
|
|
|
<div class="bg-gray-50 rounded-lg p-4 mb-3">
|
|
<p class="text-sm font-medium text-gray-700 mb-2">
|
|
Request Body:
|
|
</p>
|
|
<pre class="text-xs bg-gray-900 text-gray-100 p-3 rounded overflow-x-auto"><code>{
|
|
"members": [
|
|
{
|
|
"firstName": "Max",
|
|
"lastName": "Mustermann",
|
|
"geburtsdatum": "1990-01-15",
|
|
"email": "max@example.com",
|
|
"phone": "0123456789",
|
|
"address": "Musterstraße 1",
|
|
"notes": "Optional"
|
|
},
|
|
{
|
|
"firstName": "Anna",
|
|
"lastName": "Schmidt",
|
|
"geburtsdatum": "1985-03-20",
|
|
"email": "anna@example.com"
|
|
}
|
|
]
|
|
}</code></pre>
|
|
</div>
|
|
|
|
<div class="bg-gray-50 rounded-lg p-4 mb-3">
|
|
<p class="text-sm font-medium text-gray-700 mb-2">
|
|
Response:
|
|
</p>
|
|
<pre class="text-xs bg-gray-900 text-gray-100 p-3 rounded overflow-x-auto"><code>{
|
|
"success": true,
|
|
"summary": {
|
|
"total": 2,
|
|
"imported": 2,
|
|
"duplicates": 0,
|
|
"errors": 0
|
|
},
|
|
"results": {
|
|
"success": [
|
|
{
|
|
"index": 1,
|
|
"member": { ... }
|
|
}
|
|
],
|
|
"duplicates": [],
|
|
"errors": []
|
|
}
|
|
}</code></pre>
|
|
</div>
|
|
|
|
<div class="mt-3 bg-blue-50 rounded-lg p-3">
|
|
<p class="text-xs text-blue-800 mb-2">
|
|
<strong>Features:</strong>
|
|
</p>
|
|
<ul class="text-xs text-blue-700 list-disc list-inside space-y-1">
|
|
<li>Duplikatsprüfung gegen bestehende Mitglieder</li>
|
|
<li>Duplikatsprüfung innerhalb des Imports</li>
|
|
<li>Validierung aller Daten vor dem Import</li>
|
|
<li>Detaillierte Fehlerberichte für jeden Eintrag</li>
|
|
<li>Nur erfolgreiche Einträge werden gespeichert</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Delete Members -->
|
|
<div class="border-l-4 border-red-500 pl-4">
|
|
<div class="flex items-center justify-between mb-2">
|
|
<h3 class="text-lg font-semibold text-gray-900">
|
|
DELETE /api/members
|
|
</h3>
|
|
<span class="px-2 py-1 text-xs font-medium bg-red-100 text-red-800 rounded">admin/vorstand</span>
|
|
</div>
|
|
<p class="text-gray-600 mb-3">
|
|
Mitglied löschen
|
|
</p>
|
|
|
|
<div class="bg-gray-50 rounded-lg p-4 mb-3">
|
|
<p class="text-sm font-medium text-gray-700 mb-2">
|
|
Request Body:
|
|
</p>
|
|
<pre class="text-xs bg-gray-900 text-gray-100 p-3 rounded overflow-x-auto"><code>{
|
|
"id": "member-id"
|
|
}</code></pre>
|
|
</div>
|
|
|
|
<div class="bg-gray-50 rounded-lg p-4">
|
|
<p class="text-sm font-medium text-gray-700 mb-2">
|
|
Response:
|
|
</p>
|
|
<pre class="text-xs bg-gray-900 text-gray-100 p-3 rounded overflow-x-auto"><code>{
|
|
"success": true,
|
|
"message": "Mitglied erfolgreich gelöscht."
|
|
}</code></pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- News Endpoints -->
|
|
<section class="bg-white rounded-xl shadow-lg p-6">
|
|
<h2 class="text-2xl font-display font-bold text-gray-900 mb-6">
|
|
News
|
|
</h2>
|
|
|
|
<div class="space-y-6">
|
|
<!-- Get News -->
|
|
<div class="border-l-4 border-primary-600 pl-4">
|
|
<div class="flex items-center justify-between mb-2">
|
|
<h3 class="text-lg font-semibold text-gray-900">
|
|
GET /api/news
|
|
</h3>
|
|
<span class="px-2 py-1 text-xs font-medium bg-yellow-100 text-yellow-800 rounded">Auth erforderlich</span>
|
|
</div>
|
|
<p class="text-gray-600 mb-3">
|
|
Alle News abrufen (inkl. interner News)
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Post News -->
|
|
<div class="border-l-4 border-red-500 pl-4">
|
|
<div class="flex items-center justify-between mb-2">
|
|
<h3 class="text-lg font-semibold text-gray-900">
|
|
POST /api/news
|
|
</h3>
|
|
<span class="px-2 py-1 text-xs font-medium bg-red-100 text-red-800 rounded">admin/vorstand</span>
|
|
</div>
|
|
<p class="text-gray-600 mb-3">
|
|
Neue News erstellen oder bestehende bearbeiten
|
|
</p>
|
|
|
|
<div class="bg-gray-50 rounded-lg p-4 mb-3">
|
|
<p class="text-sm font-medium text-gray-700 mb-2">
|
|
Request Body:
|
|
</p>
|
|
<pre class="text-xs bg-gray-900 text-gray-100 p-3 rounded overflow-x-auto"><code>{
|
|
"id": "optional-für-update",
|
|
"title": "Titel der News",
|
|
"content": "Inhalt der News",
|
|
"isPublic": true,
|
|
"expiresAt": "2025-12-31T23:59:59.000Z",
|
|
"isHidden": false
|
|
}</code></pre>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Delete News -->
|
|
<div class="border-l-4 border-red-500 pl-4">
|
|
<div class="flex items-center justify-between mb-2">
|
|
<h3 class="text-lg font-semibold text-gray-900">
|
|
DELETE /api/news
|
|
</h3>
|
|
<span class="px-2 py-1 text-xs font-medium bg-red-100 text-red-800 rounded">admin/vorstand</span>
|
|
</div>
|
|
<p class="text-gray-600 mb-3">
|
|
News löschen
|
|
</p>
|
|
|
|
<div class="bg-gray-50 rounded-lg p-4 mb-3">
|
|
<p class="text-sm font-medium text-gray-700 mb-2">
|
|
Request Body:
|
|
</p>
|
|
<pre class="text-xs bg-gray-900 text-gray-100 p-3 rounded overflow-x-auto"><code>{
|
|
"id": "news-id"
|
|
}</code></pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Termine Endpoints -->
|
|
<section class="bg-white rounded-xl shadow-lg p-6">
|
|
<h2 class="text-2xl font-display font-bold text-gray-900 mb-6">
|
|
Termine
|
|
</h2>
|
|
|
|
<div class="space-y-6">
|
|
<!-- Get Termine -->
|
|
<div class="border-l-4 border-red-500 pl-4">
|
|
<div class="flex items-center justify-between mb-2">
|
|
<h3 class="text-lg font-semibold text-gray-900">
|
|
GET /api/termine-manage
|
|
</h3>
|
|
<span class="px-2 py-1 text-xs font-medium bg-red-100 text-red-800 rounded">admin/vorstand</span>
|
|
</div>
|
|
<p class="text-gray-600 mb-3">
|
|
Alle Termine abrufen (für Verwaltung)
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Post Termine -->
|
|
<div class="border-l-4 border-red-500 pl-4">
|
|
<div class="flex items-center justify-between mb-2">
|
|
<h3 class="text-lg font-semibold text-gray-900">
|
|
POST /api/termine-manage
|
|
</h3>
|
|
<span class="px-2 py-1 text-xs font-medium bg-red-100 text-red-800 rounded">admin/vorstand</span>
|
|
</div>
|
|
<p class="text-gray-600 mb-3">
|
|
Neuen Termin erstellen
|
|
</p>
|
|
|
|
<div class="bg-gray-50 rounded-lg p-4 mb-3">
|
|
<p class="text-sm font-medium text-gray-700 mb-2">
|
|
Request Body:
|
|
</p>
|
|
<pre class="text-xs bg-gray-900 text-gray-100 p-3 rounded overflow-x-auto"><code>{
|
|
"datum": "2025-12-25",
|
|
"uhrzeit": "19:00",
|
|
"titel": "Weihnachtsfeier",
|
|
"beschreibung": "Gemeinsame Feier",
|
|
"kategorie": "Veranstaltung"
|
|
}</code></pre>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Delete Termine -->
|
|
<div class="border-l-4 border-red-500 pl-4">
|
|
<div class="flex items-center justify-between mb-2">
|
|
<h3 class="text-lg font-semibold text-gray-900">
|
|
DELETE /api/termine-manage
|
|
</h3>
|
|
<span class="px-2 py-1 text-xs font-medium bg-red-100 text-red-800 rounded">admin/vorstand</span>
|
|
</div>
|
|
<p class="text-gray-600 mb-3">
|
|
Termin löschen
|
|
</p>
|
|
|
|
<div class="bg-gray-50 rounded-lg p-4 mb-3">
|
|
<p class="text-sm font-medium text-gray-700 mb-2">
|
|
Query Parameters:
|
|
</p>
|
|
<pre class="text-xs bg-gray-900 text-gray-100 p-3 rounded overflow-x-auto"><code>?datum=2025-12-25&uhrzeit=19:00&titel=Weihnachtsfeier&beschreibung=...&kategorie=...</code></pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Config Endpoints -->
|
|
<section class="bg-white rounded-xl shadow-lg p-6">
|
|
<h2 class="text-2xl font-display font-bold text-gray-900 mb-6">
|
|
Konfiguration
|
|
</h2>
|
|
|
|
<div class="space-y-6">
|
|
<!-- Get Config -->
|
|
<div class="border-l-4 border-red-500 pl-4">
|
|
<div class="flex items-center justify-between mb-2">
|
|
<h3 class="text-lg font-semibold text-gray-900">
|
|
GET /api/config
|
|
</h3>
|
|
<span class="px-2 py-1 text-xs font-medium bg-red-100 text-red-800 rounded">admin/vorstand</span>
|
|
</div>
|
|
<p class="text-gray-600 mb-3">
|
|
Vereinskonfiguration abrufen
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Put Config -->
|
|
<div class="border-l-4 border-red-500 pl-4">
|
|
<div class="flex items-center justify-between mb-2">
|
|
<h3 class="text-lg font-semibold text-gray-900">
|
|
PUT /api/config
|
|
</h3>
|
|
<span class="px-2 py-1 text-xs font-medium bg-red-100 text-red-800 rounded">admin/vorstand</span>
|
|
</div>
|
|
<p class="text-gray-600 mb-3">
|
|
Vereinskonfiguration aktualisieren
|
|
</p>
|
|
|
|
<div class="bg-gray-50 rounded-lg p-4 mb-3">
|
|
<p class="text-sm font-medium text-gray-700 mb-2">
|
|
Request Body:
|
|
</p>
|
|
<p class="text-xs text-gray-600">
|
|
Komplettes Config-Objekt mit allen Einstellungen
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
<!-- Example Usage -->
|
|
<div class="mt-12 bg-white rounded-xl shadow-lg p-6">
|
|
<h2 class="text-2xl font-display font-bold text-gray-900 mb-6">
|
|
Beispiel-Usage
|
|
</h2>
|
|
|
|
<div class="space-y-4">
|
|
<div>
|
|
<h3 class="text-lg font-semibold text-gray-900 mb-2">
|
|
cURL Beispiel:
|
|
</h3>
|
|
<pre class="text-xs bg-gray-900 text-gray-100 p-4 rounded overflow-x-auto"><code># Login und Token erhalten
|
|
curl -X POST http://localhost:3100/api/auth/login \
|
|
-H "Content-Type: application/json" \
|
|
-d '{"email": "admin@example.com", "password": "passwort"}'
|
|
|
|
# Mitglied hinzufügen mit Token
|
|
curl -X POST http://localhost:3100/api/members \
|
|
-H "Authorization: Bearer YOUR_TOKEN_HERE" \
|
|
-H "Content-Type: application/json" \
|
|
-d '{
|
|
"firstName": "Max",
|
|
"lastName": "Mustermann",
|
|
"geburtsdatum": "1990-01-15",
|
|
"email": "max@example.com",
|
|
"phone": "0123456789"
|
|
}'
|
|
|
|
# Bulk-Import von Mitgliedern
|
|
curl -X POST http://localhost:3100/api/members/bulk \
|
|
-H "Authorization: Bearer YOUR_TOKEN_HERE" \
|
|
-H "Content-Type: application/json" \
|
|
-d '{
|
|
"members": [
|
|
{
|
|
"firstName": "Max",
|
|
"lastName": "Mustermann",
|
|
"geburtsdatum": "1990-01-15",
|
|
"email": "max@example.com"
|
|
},
|
|
{
|
|
"firstName": "Anna",
|
|
"lastName": "Schmidt",
|
|
"geburtsdatum": "1985-03-20",
|
|
"email": "anna@example.com"
|
|
}
|
|
]
|
|
}'</code></pre>
|
|
</div>
|
|
|
|
<div>
|
|
<h3 class="text-lg font-semibold text-gray-900 mb-2">
|
|
JavaScript/Fetch Beispiel:
|
|
</h3>
|
|
<pre class="text-xs bg-gray-900 text-gray-100 p-4 rounded overflow-x-auto"><code>// Login
|
|
const loginResponse = await fetch('/api/auth/login', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({
|
|
email: 'admin@example.com',
|
|
password: 'passwort'
|
|
})
|
|
})
|
|
const { token } = await loginResponse.json()
|
|
|
|
// Mitglied hinzufügen
|
|
const memberResponse = await fetch('/api/members', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Authorization': `Bearer ${token}`,
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify({
|
|
firstName: 'Max',
|
|
lastName: 'Mustermann',
|
|
geburtsdatum: '1990-01-15',
|
|
email: 'max@example.com'
|
|
})
|
|
})
|
|
|
|
// Bulk-Import
|
|
const bulkResponse = await fetch('/api/members/bulk', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Authorization': `Bearer ${token}`,
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify({
|
|
members: [
|
|
{
|
|
firstName: 'Max',
|
|
lastName: 'Mustermann',
|
|
geburtsdatum: '1990-01-15',
|
|
email: 'max@example.com'
|
|
},
|
|
{
|
|
firstName: 'Anna',
|
|
lastName: 'Schmidt',
|
|
geburtsdatum: '1985-03-20',
|
|
email: 'anna@example.com'
|
|
}
|
|
]
|
|
})
|
|
})
|
|
const result = await bulkResponse.json()
|
|
// Ergebnis: Importiert: ${result.summary.imported}, Duplikate: ${result.summary.duplicates}</code></pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Role Legend -->
|
|
<div class="mt-8 bg-gray-50 rounded-xl p-6">
|
|
<h2 class="text-xl font-semibold text-gray-900 mb-4">
|
|
Legende
|
|
</h2>
|
|
<div class="grid md:grid-cols-3 gap-4">
|
|
<div class="flex items-center space-x-2">
|
|
<span class="px-2 py-1 text-xs font-medium bg-green-100 text-green-800 rounded">Öffentlich</span>
|
|
<span class="text-sm text-gray-600">Keine Authentifizierung erforderlich</span>
|
|
</div>
|
|
<div class="flex items-center space-x-2">
|
|
<span class="px-2 py-1 text-xs font-medium bg-yellow-100 text-yellow-800 rounded">Auth erforderlich</span>
|
|
<span class="text-sm text-gray-600">Jeder eingeloggte Benutzer</span>
|
|
</div>
|
|
<div class="flex items-center space-x-2">
|
|
<span class="px-2 py-1 text-xs font-medium bg-red-100 text-red-800 rounded">admin/vorstand</span>
|
|
<span class="text-sm text-gray-600">Nur Admin oder Vorstand</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
definePageMeta({
|
|
middleware: 'auth',
|
|
layout: 'default'
|
|
})
|
|
|
|
useHead({
|
|
title: 'API-Dokumentation - Harheimer TC',
|
|
})
|
|
</script>
|
|
|