fix: upload body limit, role case, and connection drain (v0.12.1)

- Disable Axum's 2 MB default body limit on the upload route so large
  photos/videos are accepted without HTTP 400
- Serialize UserRole as lowercase in JWT so the frontend role checks
  ('guest'/'host'/'admin') match correctly
- Drain multipart body before returning early upload errors (rate-limit,
  ban, event-lock) to keep the HTTP keep-alive connection clean and
  prevent cascading Netzwerkfehler / empty-500 responses
- Add TraceLayer for request logging and Vite dev proxy config

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

TEST_GUIDE.md

@@ -0,0 +1,42 @@
+## Frontend Testing — Step by Step
+
+Please test each step in order and report any errors (console errors, wrong text, broken UI, API errors).
+
+### Step 1 — Join flow + PIN modal
+1. Open **http://localhost:5173/** in your browser (or navigate there if already open)
+2. You should land on the **join page** (`/join`) with a name input
+3. Enter your name (e.g. `Max`) and click **Beitreten**
+4. ✅ Expected: A modal appears showing your 4-digit PIN in large monospace font with a "Kopieren" button
+5. Click **Weiter zur Galerie**
+
+### Step 2 — Onboarding guide
+6. You should land on the **feed page** (`/feed`)
+7. ✅ Expected: A dark overlay appears at the bottom (or center on desktop) — the onboarding guide — showing step 1 of 4 with a step indicator and the Willkommen screen
+8. Click **Weiter** through all 4 steps, then **Los geht's!**
+9. ✅ Expected: Overlay disappears
+
+### Step 3 — Feed & navigation
+10. ✅ Expected: Feed shows "Noch keine Fotos." empty state with an upload button
+11. ✅ Expected: Top-right has an **upload button** (blue) and a **person icon** link
+
+### Step 4 — My Account page
+12. Click the **person icon** in the top-right
+13. ✅ Expected: `/account` page shows your name (`Max`), a blue "Gast" badge, session expiry date, and your PIN displayed large in an amber box
+14. Click **Kopieren** — check clipboard contains your PIN
+15. ✅ Expected: Button briefly shows "Kopiert!"
+16. Click **Zur Galerie** to go back to the feed
+
+### Step 5 — Upload
+17. Click **Hochladen** — this takes you to `/upload`
+18. Try uploading a photo from your device library
+19. ✅ Expected: Photo appears in queue with a progress bar, then completes
+20. Go back to `/feed` — ✅ Expected: your photo appears in the feed grid
+
+### Step 6 — Onboarding guide not shown again
+21. Reload the page at `/feed`
+22. ✅ Expected: The onboarding overlay does **not** appear (already dismissed)
+
+### Step 7 — Recover (open a private/incognito window)
+23. Open a new **private/incognito** window at **http://localhost:5173/recover**
+24. Enter the same name (`Max`) and the PIN you copied
+25. ✅ Expected: You're redirected to the feed with the same account

backend/src/handlers/upload.rs

@@ -24,6 +24,7 @@ pub async fn upload(
         .rate_limiter
         .check(format!("upload:{}", auth.user_id), upload_rate, Duration::from_secs(3600))
     {
+        drain_multipart(multipart).await;
         return Err(AppError::TooManyRequests(
             "Du hast dein Upload-Limit für diese Stunde erreicht.".into(),
         ));
@@ -34,6 +35,7 @@ pub async fn upload(
         .await?
         .ok_or_else(|| AppError::NotFound("Benutzer nicht gefunden.".into()))?;
     if user.is_banned {
+        drain_multipart(multipart).await;
         return Err(AppError::Forbidden("Du bist gesperrt.".into()));
     }
 
@@ -42,6 +44,7 @@ pub async fn upload(
         .await?
         .ok_or_else(|| AppError::NotFound("Event nicht gefunden.".into()))?;
     if event.uploads_locked_at.is_some() {
+        drain_multipart(multipart).await;
         return Err(AppError::Forbidden("Uploads sind gesperrt.".into()));
     }
 
@@ -239,6 +242,15 @@ pub async fn delete_upload(
     Ok(StatusCode::NO_CONTENT)
 }
 
+/// Drain a multipart body so the HTTP connection stays clean when returning an early error.
+/// Without draining, the client may still be sending the body after we've sent our response,
+/// which can corrupt the keep-alive connection for subsequent requests.
+async fn drain_multipart(mut mp: Multipart) {
+    while let Ok(Some(mut field)) = mp.next_field().await {
+        while field.chunk().await.ok().flatten().is_some() {}
+    }
+}
+
 async fn get_config_i64(pool: &sqlx::PgPool, key: &str, default: i64) -> i64 {
     let row: Option<(String,)> =
         sqlx::query_as("SELECT value FROM config WHERE key = $1")

backend/src/main.rs

@@ -1,7 +1,9 @@
 use anyhow::Result;
+use axum::extract::DefaultBodyLimit;
 use axum::routing::{delete, get, patch, post};
 use axum::Router;
 use tower_http::services::ServeDir;
+use tower_http::trace::TraceLayer;
 use tracing_subscriber::{layer::SubscriberExt, util::SubscriberInitExt};
 
 mod auth;
@@ -40,8 +42,9 @@ async fn main() -> Result<()> {
         .route("/api/v1/recover", post(auth::handlers::recover))
         .route("/api/v1/admin/login", post(auth::handlers::admin_login))
         .route("/api/v1/session", delete(auth::handlers::logout))
-        // Upload
-        .route("/api/v1/upload", post(handlers::upload::upload))
+        // Upload — body limit disabled; size validation is done inside the handler
+        .route("/api/v1/upload", post(handlers::upload::upload)
+            .route_layer(DefaultBodyLimit::disable()))
         .route(
             "/api/v1/upload/{id}",
             patch(handlers::upload::edit_upload).delete(handlers::upload::delete_upload),
@@ -89,6 +92,7 @@ async fn main() -> Result<()> {
         .route("/health", get(|| async { "ok" }))
         .merge(api)
         .nest_service("/media", media_service)
+        .layer(TraceLayer::new_for_http())
         .with_state(state);
 
     let listener = tokio::net::TcpListener::bind(("0.0.0.0", config.app_port)).await?;

backend/src/models/user.rs

@@ -4,6 +4,7 @@ use sqlx::PgPool;
 use uuid::Uuid;
 
 #[derive(Debug, Clone, PartialEq, Eq, Serialize, Deserialize, sqlx::Type)]
+#[serde(rename_all = "lowercase")]
 #[sqlx(type_name = "user_role", rename_all = "lowercase")]
 pub enum UserRole {
     Guest,

frontend/src/lib/components/OnboardingGuide.svelte

@@ -0,0 +1,85 @@
+<script lang="ts">
+	import { browser } from '$app/environment';
+
+	const GUIDE_SEEN_KEY = 'eventsnap_guide_seen';
+
+	let visible = $state(false);
+	let step = $state(0);
+
+	const steps = [
+		{
+			icon: '📸',
+			title: 'Willkommen bei EventSnap!',
+			body: 'Hier kannst du Fotos und Videos mit allen Gästen teilen — in Echtzeit, ganz ohne App-Store.'
+		},
+		{
+			icon: '⬆️',
+			title: 'Fotos & Videos hochladen',
+			body: 'Tippe oben auf „Hochladen", um Fotos aus deiner Galerie oder direkt mit der Kamera aufzunehmen. Mehrere Dateien auf einmal sind kein Problem!'
+		},
+		{
+			icon: '#️⃣',
+			title: 'Hashtags nutzen',
+			body: 'Füge in deiner Bildunterschrift #hashtags ein, um Fotos zu gruppieren — z.B. #tanz, #buffet oder #reden. Du kannst danach filtern.'
+		},
+		{
+			icon: '🔑',
+			title: 'Deinen PIN merken!',
+			body: 'Du hast beim Registrieren einen 4-stelligen PIN erhalten. Speichere ihn — du brauchst ihn, um dein Konto auf einem anderen Gerät wiederherzustellen. Er ist immer unter „Mein Konto" zu finden.'
+		}
+	];
+
+	if (browser && !localStorage.getItem(GUIDE_SEEN_KEY)) {
+		visible = true;
+	}
+
+	function next() {
+		if (step < steps.length - 1) {
+			step++;
+		} else {
+			dismiss();
+		}
+	}
+
+	function dismiss() {
+		if (browser) localStorage.setItem(GUIDE_SEEN_KEY, '1');
+		visible = false;
+	}
+</script>
+
+{#if visible}
+	<!-- Backdrop -->
+	<div class="fixed inset-0 z-50 flex items-end justify-center bg-black/60 sm:items-center">
+		<div class="w-full max-w-sm rounded-t-3xl bg-white p-6 shadow-2xl sm:rounded-2xl">
+			<!-- Step indicator -->
+			<div class="mb-5 flex justify-center gap-1.5">
+				{#each steps as _, i}
+					<div class="h-1.5 rounded-full transition-all {i === step ? 'w-6 bg-blue-600' : 'w-1.5 bg-gray-200'}"></div>
+				{/each}
+			</div>
+
+			<!-- Content -->
+			<div class="mb-6 text-center">
+				<div class="mb-3 text-5xl">{steps[step].icon}</div>
+				<h2 class="mb-2 text-xl font-bold text-gray-900">{steps[step].title}</h2>
+				<p class="text-sm leading-relaxed text-gray-600">{steps[step].body}</p>
+			</div>
+
+			<!-- Buttons -->
+			<div class="flex gap-2">
+				<button
+					onclick={dismiss}
+					class="flex-1 rounded-xl border border-gray-200 py-3 text-sm text-gray-500 hover:bg-gray-50"
+				>
+					Überspringen
+				</button>
+				<button
+					onclick={next}
+					class="flex-1 rounded-xl bg-blue-600 py-3 text-sm font-semibold text-white hover:bg-blue-700"
+				>
+					{step < steps.length - 1 ? 'Weiter' : 'Los geht\'s!'}
+				</button>
+			</div>
+		</div>
+	</div>
+{/if}

frontend/src/routes/export/+page.svelte

@@ -16,6 +16,8 @@
 		html: JobStatus;
 	}
 
+	const HTML_GUIDE_KEY = 'eventsnap_html_guide_seen';
+
 	let status = $state<ExportStatus | null>(null);
 	let showHtmlGuide = $state(false);
 	let loading = $state(true);
@@ -75,10 +77,15 @@
 	}
 
 	function downloadHtml() {
-		showHtmlGuide = true;
+		if (localStorage.getItem(HTML_GUIDE_KEY)) {
+			window.location.href = '/api/v1/export/html';
+		} else {
+			showHtmlGuide = true;
+		}
 	}
 
 	function confirmHtmlDownload() {
+		localStorage.setItem(HTML_GUIDE_KEY, '1');
 		showHtmlGuide = false;
 		window.location.href = '/api/v1/export/html';
 	}

frontend/src/routes/feed/+page.svelte

@@ -7,6 +7,7 @@
 	import FeedGrid from '$lib/components/FeedGrid.svelte';
 	import HashtagChips from '$lib/components/HashtagChips.svelte';
 	import LightboxModal from '$lib/components/LightboxModal.svelte';
+	import OnboardingGuide from '$lib/components/OnboardingGuide.svelte';
 	import type { FeedUpload, FeedResponse, HashtagCount } from '$lib/types';
 
 	let uploads = $state<FeedUpload[]>([]);
@@ -223,3 +224,6 @@
 		onlike={handleLike}
 	/>
 {/if}
+
+<!-- First-visit onboarding guide -->
+<OnboardingGuide />

frontend/vite.config.ts

@@ -3,5 +3,11 @@ import tailwindcss from '@tailwindcss/vite';
 import { defineConfig } from 'vite';
 
 export default defineConfig({
-	plugins: [tailwindcss(), sveltekit()]
+	plugins: [tailwindcss(), sveltekit()],
+	server: {
+		proxy: {
+			'/api': 'http://localhost:3000',
+			'/media': 'http://localhost:3000'
+		}
+	}
 });