Implement member management enhancements; add bulk import functionality and duplicate checking based on geburtsdatum. Update API to support new fields and improve error handling for member data submissions. Refactor member-related components for better user experience and data validation.
This commit is contained in:
Torsten Schulz (local)
549
pages/mitgliederbereich/api.vue
Normal file
549
pages/mitgliederbereich/api.vue
Normal file
@@ -0,0 +1,549 @@
|
||||
<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()
|
||||
console.log(`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>
|
||||
|
||||
Reference in New Issue
Block a user