fabi/EventSnap
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): v0.16 features + dark mode across every page

Browse Source 
Wires up everything from the previous commits into actual UI surfaces, and
applies Tailwind dark: variants throughout. All pages now support the
'system' / 'light' / 'dark' preference set in the onboarding step or in
Mein Konto → Design.

Layout & nav:
- routes/+layout.svelte: initTheme(), global pin-reset SSE handler that
  filters by user_id and calls clearPin(), one-shot /me/context fetch
  on boot to hydrate privacyNote + quota.
- components/BottomNav.svelte: dark variants on the frosted-glass bar.
- components/UploadSheet.svelte: dark variants on backdrop, sheet,
  source buttons.
- components/OnboardingGuide.svelte: new "Helles oder dunkles Design?"
  step (3-option custom-radio grid), reactive currentStep with proper
  type narrowing, dark variants throughout. Privacy-note nudge appears
  on the PIN step only when one is configured.

Feed:
- routes/feed/+page.svelte: diashow entry icon (tablet/desktop only),
  long-press → ContextSheet (Löschen for own posts, Original anzeigen
  for all), upload-deleted + feed-delta SSE handlers, dark variants on
  header, search, autocomplete, filter chips, empty states.
- components/FeedListCard.svelte: long-press wireup, double-tap-to-like,
  data-mode-aware mediaSrc via pickMediaUrl, kebab fallback for desktop,
  isOwn prop, dark variants.
- components/FeedGrid.svelte: long-press wireup, dark variants.
- components/LightboxModal.svelte: data-mode-aware src, double-tap heart
  burst, dark variants on card / comments / input.
- components/HashtagChips.svelte: dark variants.

Account:
- routes/account/+page.svelte: theme picker (3-button radio grid), data
  mode picker (with confirm sheet for Original), live quota widget,
  preformatted Datenschutzhinweis block, diashow tile (mobile only),
  pin now sourced from the $currentPin store so a global pin-reset
  clears it live, clearQueue() on explicit logout, dark variants
  across every card + both bottom sheets.

Upload:
- routes/upload/+page.svelte: per-user quota progress bar above the
  submit button, dark variants.

Host & Admin:
- routes/host/+page.svelte: PIN-reset confirm + one-time PIN modal,
  hosts may demote other hosts, canResetPinFor() helper, dark variants
  on all cards, modals, stats, toast.
- routes/admin/+page.svelte: Config form rebuilt as CONFIG_GROUPS with
  per-field kind (number / bool / text), renders toggles for the
  rate-limit + quota switches and a textarea for the privacy_note;
  Nutzer tab gains PIN reset + hosts-may-demote-hosts wiring; same
  one-time PIN modal; dark variants everywhere.
- routes/admin/login/+page.svelte: dark variants.

Join / Recover / Export:
- routes/join/+page.svelte: rename inline link to
  "Ich habe bereits einen Account", dark variants.
- routes/recover/+page.svelte: dark variants.
- routes/export/+page.svelte: dark variants on status cards + HTML
  guide modal.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
MechaCat02
2026-05-16 14:33:30 +02:00
parent 8a769b52bf
commit e619a3bd64
17 changed files with 1295 additions and 438 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
frontend/src/routes/+layout.svelte
View File

@@ -1,16 +1,24 @@
<script lang="ts">
import favicon from '$lib/assets/favicon.svg';
import '../app.css';
import { initAuth } from '$lib/auth';
import { onMount } from 'svelte';
import { initAuth, getToken, getUserId, clearPin } from '$lib/auth';
import { initTheme } from '$lib/theme-store';
import { onMount, onDestroy } from 'svelte';
import BottomNav from '$lib/components/BottomNav.svelte';
import UploadSheet from '$lib/components/UploadSheet.svelte';
import { showBottomNav } from '$lib/ui-store';
import { isAuthenticated } from '$lib/auth';
import { queueItems, isProcessing } from '$lib/upload-queue';
import { privacyNote } from '$lib/privacy-note-store';
import { refreshQuota } from '$lib/quota-store';
import { onSseEvent } from '$lib/sse';
import { api } from '$lib/api';
import type { MeContextDto } from '$lib/types';
let { children } = $props();
let unsubs: Array<() => void> = [];
// Slim progress bar: ratio of completed items to total, shown while processing.
let progressPct = $derived.by(() => {
const total = $queueItems.length;
@@ -19,8 +27,41 @@
return Math.round((done / total) * 100);
});
onMount(() => {
onMount(async () => {
initAuth();
// Hooks up the appliedTheme → <html class="dark"> sync. Must run early so the
// first paint after hydration matches the saved preference.
initTheme();
// Hydrate cross-cutting stores once on boot if the user is already authenticated.
// Page-level mounts will refresh again as needed.
if (getToken()) {
try {
const ctx = await api.get<MeContextDto>('/me/context');
privacyNote.set(ctx.privacy_note);
} catch {
// non-fatal; users without a session land on /join anyway
}
void refreshQuota();
}
// Global pin-reset listener — clears the now-invalid plaintext PIN from
// localStorage no matter which route the user is currently on. The reactive
// `currentPin` store carries the change into any page that reads it (My
// Account in particular).
unsubs.push(
onSseEvent('pin-reset', (data) => {
try {
const payload = JSON.parse(data) as { user_id: string };
if (payload.user_id === getUserId()) clearPin();
} catch {
// ignore malformed payload
}
})
);
});
onDestroy(() => {
for (const unsub of unsubs) unsub();
});
</script>

336
frontend/src/routes/account/+page.svelte
View File

@@ -1,36 +1,105 @@
<script lang="ts">
import { goto } from '$app/navigation';
import { getToken, getPin, getDisplayName, getExpiry, getRole, clearAuth } from '$lib/auth';
import { getToken, getDisplayName, getExpiry, getRole, clearAuth, currentPin } from '$lib/auth';
import { clearQueue } from '$lib/upload-queue';
import { api } from '$lib/api';
import { onMount } from 'svelte';
import { onMount, onDestroy } from 'svelte';
import { dataMode } from '$lib/data-mode-store';
import { themePreference, type ThemePreference } from '$lib/theme-store';
import { privacyNote } from '$lib/privacy-note-store';
import { quotaStore, refreshQuota } from '$lib/quota-store';
import { onSseEvent } from '$lib/sse';
import type { MeContextDto } from '$lib/types';
let pin = $state<string | null>(null);
let displayName = $state<string | null>(null);
let role = $state<'guest' | 'host' | 'admin' | null>(null);
let expiry = $state<Date | null>(null);
let pinCopied = $state(false);
let leaveConfirmOpen = $state(false);
let dataModeWarningOpen = $state(false);
onMount(() => {
// `pin` is sourced from the shared `currentPin` store so a global pin-reset SSE
// event (handled in the layout) clears the display live without a reload.
const pin = currentPin;
const unsubs: Array<() => void> = [];
onMount(async () => {
if (!getToken()) {
goto('/join');
return;
}
pin = getPin();
displayName = getDisplayName();
role = getRole();
expiry = getExpiry();
// Refresh server-driven state. Quota + privacy note may have changed since last visit.
try {
const ctx = await api.get<MeContextDto>('/me/context');
privacyNote.set(ctx.privacy_note);
} catch {
// non-fatal
}
void refreshQuota();
// If admin edits the privacy note while we're sitting on the page, pick it up.
unsubs.push(
onSseEvent('event-updated', async () => {
try {
const ctx = await api.get<MeContextDto>('/me/context');
privacyNote.set(ctx.privacy_note);
} catch {
// ignore
}
})
// Note: `pin-reset` is handled globally in the root layout.
);
});
onDestroy(() => {
for (const u of unsubs) u();
});
function chooseDataMode(mode: 'saver' | 'original') {
if (mode === 'original' && $dataMode !== 'original') {
dataModeWarningOpen = true;
return;
}
dataMode.set(mode);
}
function confirmOriginalMode() {
dataMode.set('original');
dataModeWarningOpen = false;
}
function formatBytes(bytes: number | null | undefined): string {
if (bytes == null || bytes <= 0) return '0 MB';
const mb = bytes / (1024 * 1024);
if (mb < 1024) return `${mb.toFixed(mb < 10 ? 1 : 0)} MB`;
return `${(mb / 1024).toFixed(1)} GB`;
}
const quotaPercent = $derived(
$quotaStore.limit_bytes && $quotaStore.limit_bytes > 0
? Math.min(100, ($quotaStore.used_bytes / $quotaStore.limit_bytes) * 100)
: 0
);
function copyPin() {
if (!pin) return;
navigator.clipboard.writeText(pin);
const value = $pin;
if (!value) return;
navigator.clipboard.writeText(value);
pinCopied = true;
setTimeout(() => (pinCopied = false), 2000);
}
async function handleLogout() {
try { await api.delete('/session'); } catch { /* ignore */ }
// Wipe the IndexedDB upload queue so a second guest using the same device can't
// inherit (or be blamed for) this guest's pending uploads. Not done on a 401
// auto-clear — that path preserves the queue in case the user re-authenticates.
try { await clearQueue(); } catch { /* ignore */ }
clearAuth();
goto('/join');
}
@@ -64,17 +133,17 @@
}
</script>
<div class="min-h-screen bg-gray-50 pb-24">
<div class="min-h-screen bg-gray-50 pb-24 dark:bg-gray-950">
<!-- Header -->
<div class="border-b border-gray-200 bg-white">
<div class="border-b border-gray-200 bg-white dark:border-gray-800 dark:bg-gray-900">
<div class="mx-auto flex max-w-lg items-center px-4 py-4">
<h1 class="text-xl font-bold text-gray-900">Mein Konto</h1>
<h1 class="text-xl font-bold text-gray-900 dark:text-gray-100">Mein Konto</h1>
</div>
</div>
<div class="mx-auto max-w-lg space-y-3 p-4">
<!-- Profile card -->
<div class="rounded-xl border border-gray-200 bg-white p-5">
<div class="rounded-xl border border-gray-200 bg-white p-5 dark:border-gray-700 dark:bg-gray-800">
<div class="flex items-center gap-4">
<div
class="flex h-14 w-14 shrink-0 items-center justify-center rounded-full text-xl font-bold
@@ -83,47 +152,47 @@
{displayName ? displayName[0].toUpperCase() : '?'}
</div>
<div class="min-w-0">
<p class="truncate text-lg font-bold text-gray-900">{displayName ?? 'Unbekannt'}</p>
<p class="truncate text-lg font-bold text-gray-900 dark:text-gray-100">{displayName ?? 'Unbekannt'}</p>
<span class="mt-0.5 inline-block rounded-full px-2.5 py-0.5 text-xs font-semibold {roleColor(role)}">
{roleLabel(role)}
</span>
</div>
</div>
{#if expiry}
<p class="mt-3 text-xs text-gray-400">Sitzung gültig bis {formatDate(expiry)}</p>
<p class="mt-3 text-xs text-gray-400 dark:text-gray-500">Sitzung gültig bis {formatDate(expiry)}</p>
{/if}
</div>
<!-- Dashboards section (host + admin only) -->
{#if role === 'host' || role === 'admin'}
<div class="overflow-hidden rounded-xl border border-gray-200 bg-white">
<div class="border-b border-gray-100 px-5 py-3">
<h2 class="text-xs font-semibold uppercase tracking-wide text-gray-500">Dashboards</h2>
<div class="overflow-hidden rounded-xl border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-800">
<div class="border-b border-gray-100 px-5 py-3 dark:border-gray-700">
<h2 class="text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">Dashboards</h2>
</div>
<a
href="/host"
class="flex items-center gap-3 px-5 py-4 transition hover:bg-gray-50"
class="flex items-center gap-3 px-5 py-4 transition hover:bg-gray-50 dark:hover:bg-gray-700/50"
>
<!-- Star icon -->
<svg class="h-5 w-5 text-amber-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round" d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.562.562 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.562.562 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z" />
</svg>
<span class="flex-1 font-medium text-gray-900">Host-Dashboard</span>
<svg class="h-4 w-4 text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<span class="flex-1 font-medium text-gray-900 dark:text-gray-100">Host-Dashboard</span>
<svg class="h-4 w-4 text-gray-300 dark:text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
</svg>
</a>
{#if role === 'admin'}
<a
href="/admin"
class="flex items-center gap-3 border-t border-gray-100 px-5 py-4 transition hover:bg-gray-50"
class="flex items-center gap-3 border-t border-gray-100 px-5 py-4 transition hover:bg-gray-50 dark:border-gray-700 dark:hover:bg-gray-700/50"
>
<!-- Shield icon -->
<svg class="h-5 w-5 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
<svg class="h-5 w-5 text-blue-600 dark:text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z" />
</svg>
<span class="flex-1 font-medium text-gray-900">Admin-Dashboard</span>
<svg class="h-4 w-4 text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<span class="flex-1 font-medium text-gray-900 dark:text-gray-100">Admin-Dashboard</span>
<svg class="h-4 w-4 text-gray-300 dark:text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
</svg>
</a>
@@ -132,44 +201,169 @@
{/if}
<!-- PIN card -->
<div class="rounded-xl border border-amber-200 bg-amber-50 p-5">
<h2 class="mb-1 font-semibold text-amber-900">Wiederherstellungs-PIN</h2>
<p class="mb-3 text-sm text-amber-700">
<div class="rounded-xl border border-amber-200 bg-amber-50 p-5 dark:border-amber-800/60 dark:bg-amber-950/30">
<h2 class="mb-1 font-semibold text-amber-900 dark:text-amber-200">Wiederherstellungs-PIN</h2>
<p class="mb-3 text-sm text-amber-700 dark:text-amber-300/90">
Du brauchst diesen PIN, um dein Konto auf einem anderen Gerät wiederherzustellen. Schreib ihn auf!
</p>
{#if pin}
<div class="flex items-center justify-between rounded-lg bg-white px-4 py-3 shadow-sm">
<span class="font-mono text-4xl font-bold tracking-widest text-gray-900">{pin}</span>
{#if $pin}
<div class="flex items-center justify-between rounded-lg bg-white px-4 py-3 shadow-sm dark:bg-gray-900">
<span class="font-mono text-4xl font-bold tracking-widest text-gray-900 dark:text-gray-100">{$pin}</span>
<button
onclick={copyPin}
class="rounded-md bg-amber-100 px-3 py-1.5 text-sm font-medium text-amber-800 transition hover:bg-amber-200"
class="rounded-md bg-amber-100 px-3 py-1.5 text-sm font-medium text-amber-800 transition hover:bg-amber-200 dark:bg-amber-900/40 dark:text-amber-200 dark:hover:bg-amber-900/60"
>
{pinCopied ? 'Kopiert!' : 'Kopieren'}
</button>
</div>
{:else}
<div class="rounded-lg bg-white px-4 py-3 text-sm text-gray-400 shadow-sm">
<div class="rounded-lg bg-white px-4 py-3 text-sm text-gray-400 shadow-sm dark:bg-gray-900 dark:text-gray-500">
PIN nicht gespeichert. Nutze die Wiederherstellungs-Seite, um dich mit deinem PIN anzumelden.
</div>
{/if}
</div>
<!-- Diashow tile — primarily mobile, where the feed header doesn't show the icon. -->
<a
href="/diashow"
class="flex items-center gap-3 rounded-xl border border-gray-200 bg-white px-5 py-4 transition hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-800 dark:hover:bg-gray-700/50 sm:hidden"
>
<svg class="h-5 w-5 text-purple-500 dark:text-purple-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 7.5A2.25 2.25 0 0 1 6 5.25h12A2.25 2.25 0 0 1 20.25 7.5v9A2.25 2.25 0 0 1 18 18.75H6A2.25 2.25 0 0 1 3.75 16.5v-9Z" />
<path stroke-linecap="round" stroke-linejoin="round" d="M10 9.75 14.5 12 10 14.25v-4.5Z" />
</svg>
<div class="flex-1">
<p class="font-medium text-gray-900 dark:text-gray-100">Diashow starten</p>
<p class="text-xs text-gray-500 dark:text-gray-400">Vollbild-Präsentation der Beiträge</p>
</div>
<svg class="h-4 w-4 text-gray-300 dark:text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
</svg>
</a>
<!-- Theme / Design -->
<div class="overflow-hidden rounded-xl border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-800">
<div class="border-b border-gray-100 px-5 py-3 dark:border-gray-700">
<h2 class="text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">Design</h2>
</div>
<div class="grid grid-cols-3 gap-2 p-3" role="radiogroup" aria-label="Design">
{#each [
{ value: 'system', label: 'System', icon: '🖥️' },
{ value: 'light', label: 'Hell', icon: '☀️' },
{ value: 'dark', label: 'Dunkel', icon: '🌙' }
] as opt (opt.value)}
{@const selected = $themePreference === opt.value}
<button
type="button"
role="radio"
aria-checked={selected}
onclick={() => themePreference.set(opt.value as ThemePreference)}
class="flex flex-col items-center gap-1 rounded-lg border-2 px-2 py-3 text-sm transition focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-200
{selected
? 'border-blue-600 bg-blue-50 text-blue-700 dark:border-blue-500 dark:bg-blue-950/40 dark:text-blue-200'
: 'border-gray-200 text-gray-700 hover:bg-gray-50 dark:border-gray-700 dark:text-gray-200 dark:hover:bg-gray-700/50'}"
>
<span class="text-2xl leading-none">{opt.icon}</span>
<span class="font-medium">{opt.label}</span>
</button>
{/each}
</div>
</div>
<!-- Data mode -->
<div class="overflow-hidden rounded-xl border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-800">
<div class="border-b border-gray-100 px-5 py-3 dark:border-gray-700">
<h2 class="text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">Datennutzung</h2>
</div>
<!--
Custom buttons styled as radios. The store is the single source of truth;
we don't lean on `<input type="radio">` because the native checked-state
model fights the "show confirm sheet first, then maybe commit" UX
(Svelte's reactive `checked={…}` and the browser's interactive state
model drift apart on cancel and on subsequent switches).
-->
<div class="px-5 py-4 space-y-2" role="radiogroup" aria-label="Datenmodus">
{#each [
{ value: 'saver', title: 'Datensparer (empfohlen)', body: 'Lädt komprimierte Vorschauen. Schnell und mobildatenfreundlich.' },
{ value: 'original', title: 'Original', body: 'Lädt die Originaldateien. Bessere Qualität, höherer Datenverbrauch.' }
] as opt (opt.value)}
{@const selected = $dataMode === opt.value}
<button
type="button"
role="radio"
aria-checked={selected}
onclick={() => chooseDataMode(opt.value as 'saver' | 'original')}
class="flex w-full cursor-pointer items-start gap-3 rounded-lg p-1 text-left transition hover:bg-gray-50 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-200 dark:hover:bg-gray-700/50"
>
<span
class="mt-1 flex h-4 w-4 shrink-0 items-center justify-center rounded-full border-2 transition {selected ? 'border-blue-600 dark:border-blue-400' : 'border-gray-300 dark:border-gray-600'}"
>
{#if selected}
<span class="block h-2 w-2 rounded-full bg-blue-600 dark:bg-blue-400"></span>
{/if}
</span>
<div>
<p class="font-medium text-gray-900 dark:text-gray-100">{opt.title}</p>
<p class="text-xs text-gray-500 dark:text-gray-400">{opt.body}</p>
</div>
</button>
{/each}
</div>
</div>
<!-- Per-user quota widget -->
{#if $quotaStore.enabled && $quotaStore.limit_bytes != null}
<div class="rounded-xl border border-gray-200 bg-white p-5 dark:border-gray-700 dark:bg-gray-800">
<h2 class="mb-2 text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
Dein Speicherkontingent
</h2>
<div class="flex items-baseline justify-between">
<span class="text-2xl font-bold text-gray-900 dark:text-gray-100">
{formatBytes($quotaStore.used_bytes)}
</span>
<span class="text-sm text-gray-500 dark:text-gray-400">von {formatBytes($quotaStore.limit_bytes)}</span>
</div>
<div class="mt-2 h-2 overflow-hidden rounded-full bg-gray-100 dark:bg-gray-700">
<div
class="h-full transition-all"
class:bg-blue-500={quotaPercent < 80}
class:bg-amber-500={quotaPercent >= 80 && quotaPercent < 95}
class:bg-red-500={quotaPercent >= 95}
style="width: {quotaPercent}%"
></div>
</div>
<p class="mt-2 text-xs text-gray-400 dark:text-gray-500">
Geschätzt für {$quotaStore.active_uploaders} aktive Beitragende.
</p>
</div>
{/if}
<!-- Datenschutzhinweis (preformatted, plain text) -->
{#if $privacyNote.trim()}
<div class="rounded-xl border border-gray-200 bg-white p-5 dark:border-gray-700 dark:bg-gray-800">
<h2 class="mb-2 text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
Datenschutzhinweis
</h2>
<pre class="whitespace-pre-wrap font-sans text-sm text-gray-700 dark:text-gray-300">{$privacyNote}</pre>
</div>
{/if}
<!-- Konto section -->
<div class="overflow-hidden rounded-xl border border-gray-200 bg-white">
<div class="border-b border-gray-100 px-5 py-3">
<h2 class="text-xs font-semibold uppercase tracking-wide text-gray-500">Konto</h2>
<div class="overflow-hidden rounded-xl border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-800">
<div class="border-b border-gray-100 px-5 py-3 dark:border-gray-700">
<h2 class="text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">Konto</h2>
</div>
<!-- Recover / device switch -->
<a
href="/recover"
class="flex items-center gap-3 px-5 py-4 transition hover:bg-gray-50"
class="flex items-center gap-3 px-5 py-4 transition hover:bg-gray-50 dark:hover:bg-gray-700/50"
>
<svg class="h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
<svg class="h-5 w-5 text-gray-400 dark:text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round" d="M10.5 1.5H8.25A2.25 2.25 0 006 3.75v16.5a2.25 2.25 0 002.25 2.25h7.5A2.25 2.25 0 0018 20.25V3.75a2.25 2.25 0 00-2.25-2.25H13.5m-3 0V3h3V1.5m-3 0h3m-3 8.25h3m-3 3h3m-3 3h3" />
</svg>
<span class="flex-1 text-sm font-medium text-gray-700">Gerät wechseln / PIN nutzen</span>
<svg class="h-4 w-4 text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<span class="flex-1 text-sm font-medium text-gray-700 dark:text-gray-300">Gerät wechseln / PIN nutzen</span>
<svg class="h-4 w-4 text-gray-300 dark:text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
</svg>
</a>
@@ -177,22 +371,22 @@
<!-- Leave / logout -->
<button
onclick={() => (leaveConfirmOpen = true)}
class="flex w-full items-center gap-3 border-t border-gray-100 px-5 py-4 text-left transition hover:bg-red-50"
class="flex w-full items-center gap-3 border-t border-gray-100 px-5 py-4 text-left transition hover:bg-red-50 dark:border-gray-700 dark:hover:bg-red-950/30"
>
<svg class="h-5 w-5 text-red-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
<svg class="h-5 w-5 text-red-500 dark:text-red-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15m3 0l3-3m0 0l-3-3m3 3H9" />
</svg>
<span class="flex-1 text-sm font-medium text-red-600">Event verlassen</span>
<span class="flex-1 text-sm font-medium text-red-600 dark:text-red-400">Event verlassen</span>
</button>
</div>
</div>
</div>
<!-- Leave-confirm bottom sheet -->
{#if leaveConfirmOpen}
<div class="fixed inset-0 z-50 flex items-end bg-black/40" onclick={() => (leaveConfirmOpen = false)} aria-hidden="true">
<!-- Data-mode warning bottom sheet — shown once when the user picks Original. -->
{#if dataModeWarningOpen}
<div class="fixed inset-0 z-50 flex items-end bg-black/40" onclick={() => (dataModeWarningOpen = false)} aria-hidden="true">
<div
class="w-full rounded-t-2xl bg-white px-5 pb-10 pt-6"
class="w-full rounded-t-2xl bg-white px-5 pb-10 pt-6 dark:bg-gray-900"
onclick={(e) => e.stopPropagation()}
onkeydown={(e) => e.stopPropagation()}
role="dialog"
@@ -200,21 +394,55 @@
tabindex="-1"
>
<div class="mb-4 flex justify-center">
<div class="h-1 w-10 rounded-full bg-gray-300"></div>
<div class="h-1 w-10 rounded-full bg-gray-300 dark:bg-gray-600"></div>
</div>
<h3 class="mb-1 text-center text-lg font-bold text-gray-900">Event verlassen?</h3>
<p class="mb-6 text-center text-sm text-gray-500">
Du wirst abgemeldet. Mit deinem PIN kannst du jederzeit zurückkehren.
<h3 class="mb-1 text-center text-lg font-bold text-gray-900 dark:text-gray-100">Original-Dateien laden?</h3>
<p class="mb-6 text-center text-sm text-gray-500 dark:text-gray-400">
Original-Dateien können deutlich mehr Datenvolumen verbrauchen. Am besten im WLAN aktivieren.
</p>
<button
onclick={handleLogout}
class="mb-3 w-full rounded-xl bg-red-600 py-3 text-sm font-semibold text-white transition hover:bg-red-700"
onclick={confirmOriginalMode}
class="mb-3 w-full rounded-xl bg-blue-600 py-3 text-sm font-semibold text-white transition hover:bg-blue-700"
>
Abmelden
Aktivieren
</button>
<button
onclick={() => (leaveConfirmOpen = false)}
class="w-full rounded-xl border border-gray-200 py-3 text-sm font-medium text-gray-700 transition hover:bg-gray-50"
onclick={() => (dataModeWarningOpen = false)}
class="w-full rounded-xl border border-gray-200 py-3 text-sm font-medium text-gray-700 transition hover:bg-gray-50 dark:border-gray-700 dark:text-gray-300 dark:hover:bg-gray-800"
>
Abbrechen
</button>
</div>
</div>
{/if}
<!-- Leave-confirm bottom sheet -->
{#if leaveConfirmOpen}
<div class="fixed inset-0 z-50 flex items-end bg-black/40" onclick={() => (leaveConfirmOpen = false)} aria-hidden="true">
<div
class="w-full rounded-t-2xl bg-white px-5 pb-10 pt-6 dark:bg-gray-900"
onclick={(e) => e.stopPropagation()}
onkeydown={(e) => e.stopPropagation()}
role="dialog"
aria-modal="true"
tabindex="-1"
>
<div class="mb-4 flex justify-center">
<div class="h-1 w-10 rounded-full bg-gray-300 dark:bg-gray-600"></div>
</div>
<h3 class="mb-1 text-center text-lg font-bold text-gray-900 dark:text-gray-100">Event verlassen?</h3>
<p class="mb-6 text-center text-sm text-gray-500 dark:text-gray-400">
Du wirst abgemeldet. Mit deinem PIN kannst du jederzeit zurückkehren.
</p>
<button
onclick={handleLogout}
class="mb-3 w-full rounded-xl bg-red-600 py-3 text-sm font-semibold text-white transition hover:bg-red-700 dark:bg-red-500 dark:hover:bg-red-400"
>
Abmelden
</button>
<button
onclick={() => (leaveConfirmOpen = false)}
class="w-full rounded-xl border border-gray-200 py-3 text-sm font-medium text-gray-700 transition hover:bg-gray-50 dark:border-gray-700 dark:text-gray-300 dark:hover:bg-gray-800"
>
Abbrechen
</button>

388
frontend/src/routes/admin/+page.svelte
View File

@@ -34,16 +34,68 @@
created_at: string;
}
const CONFIG_LABELS: Record<string, string> = {
max_image_size_mb: 'Max. Bildgröße (MB)',
max_video_size_mb: 'Max. Videogröße (MB)',
upload_rate_per_hour: 'Upload-Limit pro Stunde',
feed_rate_per_min: 'Feed-Anfragen pro Minute',
export_rate_per_day: 'Export-Downloads pro Tag',
quota_tolerance: 'Speicherkontingent-Toleranz (0–1)',
estimated_guest_count: 'Geschätzte Gästezahl',
compression_concurrency: 'Kompressions-Worker'
};
type ConfigKind = 'number' | 'bool' | 'text';
interface ConfigField {
key: string;
label: string;
kind: ConfigKind;
hint?: string;
}
interface ConfigGroup {
title: string;
fields: ConfigField[];
}
// Grouped sections — adding a new key is one entry in the right group, no other
// code changes required. The form renders each field based on `kind`.
const CONFIG_GROUPS: ConfigGroup[] = [
{
title: 'Limits & Größen',
fields: [
{ key: 'max_image_size_mb', label: 'Max. Bildgröße (MB)', kind: 'number' },
{ key: 'max_video_size_mb', label: 'Max. Videogröße (MB)', kind: 'number' },
{ key: 'compression_concurrency', label: 'Kompressions-Worker', kind: 'number' }
]
},
{
title: 'Rate-Limits',
fields: [
{ key: 'rate_limits_enabled', label: 'Rate-Limits aktiv', kind: 'bool', hint: 'Hauptschalter — wenn aus, sind alle Rate-Limits deaktiviert.' },
{ key: 'upload_rate_enabled', label: 'Upload-Limit aktiv', kind: 'bool' },
{ key: 'feed_rate_enabled', label: 'Feed-Limit aktiv', kind: 'bool' },
{ key: 'export_rate_enabled', label: 'Export-Limit aktiv', kind: 'bool' },
{ key: 'join_rate_enabled', label: 'Join-Limit aktiv', kind: 'bool' },
{ key: 'upload_rate_per_hour', label: 'Upload-Limit pro Stunde', kind: 'number' },
{ key: 'feed_rate_per_min', label: 'Feed-Anfragen pro Minute', kind: 'number' },
{ key: 'export_rate_per_day', label: 'Export-Downloads pro Tag', kind: 'number' }
]
},
{
title: 'Quoten',
fields: [
{ key: 'quota_enabled', label: 'Quoten aktiv', kind: 'bool', hint: 'Hauptschalter — wenn aus, wird nichts geprüft.' },
{ key: 'storage_quota_enabled', label: 'Speicher-Quote aktiv', kind: 'bool' },
{ key: 'upload_count_quota_enabled', label: 'Upload-Anzahl-Quote aktiv', kind: 'bool', hint: 'Reserviert für künftige Anzahl-Limits.' },
{ key: 'quota_tolerance', label: 'Toleranz (0–1)', kind: 'number' },
{ key: 'estimated_guest_count', label: 'Geschätzte Gästezahl', kind: 'number' }
]
},
{
title: 'Datenschutzhinweis',
fields: [
{ key: 'privacy_note', label: 'Datenschutzhinweis (freier Text)', kind: 'text', hint: 'Wird wörtlich im Konto-Bereich angezeigt. Kein HTML — Leerzeichen und Zeilenumbrüche werden übernommen.' }
]
}
];
function isTrue(v: string | undefined): boolean {
if (!v) return false;
return ['true', '1', 'yes', 'on'].includes(v.trim().toLowerCase());
}
function toggleBool(key: string) {
configDraft = { ...configDraft, [key]: isTrue(configDraft[key]) ? 'false' : 'true' };
}
type AdminTab = 'stats' | 'config' | 'export' | 'users';
const TAB_LABELS: Record<AdminTab, string> = { stats: 'Stats', config: 'Config', export: 'Export', users: 'Nutzer' };
@@ -74,6 +126,12 @@
let banHideUploads = $state(false);
let banSubmitting = $state(false);
// PIN reset state — `pinModal` holds the freshly-issued plaintext PIN. We forget it
// the moment the modal closes.
let pinResetTarget = $state<UserSummary | null>(null);
let pinResetSubmitting = $state(false);
let pinModal = $state<{ name: string; pin: string } | null>(null);
const myRole = getRole();
onMount(async () => {
@@ -200,6 +258,39 @@
}
}
function askResetPin(user: UserSummary) {
pinResetTarget = user;
}
async function confirmResetPin() {
if (!pinResetTarget) return;
pinResetSubmitting = true;
try {
const res = await api.post<{ pin: string }>(`/host/users/${pinResetTarget.id}/pin-reset`);
pinModal = { name: pinResetTarget.display_name, pin: res.pin };
pinResetTarget = null;
} catch (e: unknown) {
showToast(e instanceof Error ? e.message : 'Fehler beim Zurücksetzen.');
} finally {
pinResetSubmitting = false;
}
}
function copyPinModal() {
if (!pinModal) return;
navigator.clipboard.writeText(pinModal.pin);
showToast('PIN kopiert.');
}
/** True iff the current caller may reset this target's PIN. Mirrors the backend
* rules in `handlers::host::reset_user_pin`. */
function canResetPinFor(target: UserSummary): boolean {
if (target.role === 'admin') return false;
if (myRole === 'admin') return true; // any non-admin
if (myRole === 'host') return target.role === 'guest';
return false;
}
function formatBytes(bytes: number): string {
if (bytes >= 1024 ** 3) return `${(bytes / 1024 ** 3).toFixed(1)} GB`;
if (bytes >= 1024 ** 2) return `${(bytes / 1024 ** 2).toFixed(1)} MB`;
@@ -217,10 +308,10 @@
function statusBadgeClass(status: string): string {
switch (status) {
case 'done': return 'bg-green-100 text-green-700';
case 'running': return 'bg-blue-100 text-blue-700';
case 'failed': return 'bg-red-100 text-red-700';
default: return 'bg-gray-100 text-gray-600';
case 'done': return 'bg-green-100 text-green-700 dark:bg-green-900/40 dark:text-green-200';
case 'running': return 'bg-blue-100 text-blue-700 dark:bg-blue-900/40 dark:text-blue-200';
case 'failed': return 'bg-red-100 text-red-700 dark:bg-red-900/40 dark:text-red-200';
default: return 'bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-300';
}
}
@@ -235,21 +326,63 @@
}
</script>
<!-- PIN reset confirmation -->
{#if pinResetTarget}
<div class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4">
<div class="w-full max-w-sm rounded-2xl bg-white p-6 shadow-xl dark:bg-gray-900">
<h2 class="mb-1 text-lg font-bold text-gray-900 dark:text-gray-100">PIN zurücksetzen</h2>
<p class="mb-4 text-sm text-gray-600 dark:text-gray-400">
Eine neue PIN für <strong>{pinResetTarget.display_name}</strong> wird erzeugt. Die alte PIN funktioniert dann nicht mehr.
</p>
<div class="flex gap-2">
<button onclick={() => (pinResetTarget = null)} class="flex-1 rounded-lg border border-gray-300 py-2 text-sm text-gray-700 hover:bg-gray-50 dark:border-gray-700 dark:text-gray-300 dark:hover:bg-gray-800">Abbrechen</button>
<button onclick={confirmResetPin} disabled={pinResetSubmitting} class="flex-1 rounded-lg bg-amber-500 py-2 text-sm font-medium text-white hover:bg-amber-600 disabled:opacity-50 dark:bg-amber-500 dark:hover:bg-amber-400">
{pinResetSubmitting ? 'Wird erzeugt…' : 'Neue PIN erzeugen'}
</button>
</div>
</div>
</div>
{/if}
<!-- One-time PIN display modal -->
{#if pinModal}
<div class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 p-4">
<div class="w-full max-w-sm rounded-2xl bg-white p-6 shadow-xl dark:bg-gray-900">
<h2 class="mb-1 text-lg font-bold text-gray-900 dark:text-gray-100">Neue PIN für {pinModal.name}</h2>
<p class="mb-4 text-sm text-gray-600 dark:text-gray-400">
Zeige diese PIN dem Benutzer. Sie wird nur einmal angezeigt — beim Schließen wird sie verworfen.
</p>
<div class="mb-4 flex items-center justify-between rounded-lg bg-amber-50 px-4 py-3 dark:bg-amber-950/30">
<span class="font-mono text-3xl font-bold tracking-widest text-gray-900 dark:text-gray-100">{pinModal.pin}</span>
<button onclick={copyPinModal} class="rounded-md bg-amber-100 px-3 py-1.5 text-sm font-medium text-amber-800 hover:bg-amber-200 dark:bg-amber-900/40 dark:text-amber-200 dark:hover:bg-amber-900/60">
Kopieren
</button>
</div>
<button
onclick={() => (pinModal = null)}
class="w-full rounded-lg bg-blue-600 py-2 text-sm font-semibold text-white hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-400"
>
Schließen
</button>
</div>
</div>
{/if}
<!-- Ban modal -->
{#if banTarget}
<div class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4">
<div class="w-full max-w-sm rounded-2xl bg-white p-6 shadow-xl">
<h2 class="mb-1 text-lg font-bold text-gray-900">Benutzer sperren</h2>
<p class="mb-4 text-sm text-gray-600">
<div class="w-full max-w-sm rounded-2xl bg-white p-6 shadow-xl dark:bg-gray-900">
<h2 class="mb-1 text-lg font-bold text-gray-900 dark:text-gray-100">Benutzer sperren</h2>
<p class="mb-4 text-sm text-gray-600 dark:text-gray-400">
Was soll mit den Uploads von <strong>{banTarget.display_name}</strong> passieren?
</p>
<label class="mb-4 flex cursor-pointer items-center gap-3 rounded-lg border border-gray-200 p-3">
<input type="checkbox" bind:checked={banHideUploads} class="h-4 w-4 rounded border-gray-300 text-red-600 focus:ring-red-500" />
<span class="text-sm text-gray-700">Uploads aus der Galerie ausblenden</span>
<label class="mb-4 flex cursor-pointer items-center gap-3 rounded-lg border border-gray-200 p-3 dark:border-gray-700">
<input type="checkbox" bind:checked={banHideUploads} class="h-4 w-4 rounded border-gray-300 text-red-600 focus:ring-red-500 dark:border-gray-600" />
<span class="text-sm text-gray-700 dark:text-gray-300">Uploads aus der Galerie ausblenden</span>
</label>
<div class="flex gap-2">
<button onclick={() => (banTarget = null)} class="flex-1 rounded-lg border border-gray-300 py-2 text-sm text-gray-700 hover:bg-gray-50">Abbrechen</button>
<button onclick={confirmBan} disabled={banSubmitting} class="flex-1 rounded-lg bg-red-600 py-2 text-sm font-medium text-white hover:bg-red-700 disabled:opacity-50">
<button onclick={() => (banTarget = null)} class="flex-1 rounded-lg border border-gray-300 py-2 text-sm text-gray-700 hover:bg-gray-50 dark:border-gray-700 dark:text-gray-300 dark:hover:bg-gray-800">Abbrechen</button>
<button onclick={confirmBan} disabled={banSubmitting} class="flex-1 rounded-lg bg-red-600 py-2 text-sm font-medium text-white hover:bg-red-700 disabled:opacity-50 dark:bg-red-500 dark:hover:bg-red-400">
{banSubmitting ? 'Wird gesperrt…' : 'Sperren'}
</button>
</div>
@@ -259,36 +392,36 @@
<!-- Toast -->
{#if toast}
<div class="fixed bottom-24 left-1/2 z-50 -translate-x-1/2 rounded-full bg-gray-900 px-5 py-2.5 text-sm text-white shadow-lg">
<div class="fixed bottom-24 left-1/2 z-50 -translate-x-1/2 rounded-full bg-gray-900 px-5 py-2.5 text-sm text-white shadow-lg dark:bg-gray-100 dark:text-gray-900">
{toast}
</div>
{/if}
<div class="min-h-screen bg-gray-50 pb-24">
<div class="min-h-screen bg-gray-50 pb-24 dark:bg-gray-950">
<!-- Header -->
<div class="border-b border-gray-200 bg-white">
<div class="border-b border-gray-200 bg-white dark:border-gray-800 dark:bg-gray-900">
<div class="mx-auto flex max-w-3xl items-center gap-3 px-4 py-4">
<button
onclick={() => goto('/account')}
class="flex h-9 w-9 shrink-0 items-center justify-center rounded-full text-gray-500 transition hover:bg-gray-100"
class="flex h-9 w-9 shrink-0 items-center justify-center rounded-full text-gray-500 transition hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-800"
aria-label="Zurück"
>
<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18" />
</svg>
</button>
<h1 class="text-xl font-bold text-gray-900">Admin-Dashboard</h1>
<h1 class="text-xl font-bold text-gray-900 dark:text-gray-100">Admin-Dashboard</h1>
</div>
</div>
<!-- Inner tab bar -->
<div class="sticky top-0 z-20 overflow-x-auto border-b border-gray-200 bg-white">
<div class="sticky top-0 z-20 overflow-x-auto border-b border-gray-200 bg-white dark:border-gray-800 dark:bg-gray-900">
<div class="mx-auto flex max-w-3xl min-w-max">
{#each Object.entries(TAB_LABELS) as [tab, label]}
<button
onclick={() => (activeTab = tab as AdminTab)}
class="px-5 py-3 text-sm font-medium whitespace-nowrap border-b-2 transition-colors
{activeTab === tab ? 'border-blue-600 text-blue-600' : 'border-transparent text-gray-500 hover:text-gray-700'}"
{activeTab === tab ? 'border-blue-600 text-blue-600 dark:border-blue-400 dark:text-blue-400' : 'border-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200'}"
>
{label}
</button>
@@ -298,7 +431,7 @@
<div class="mx-auto max-w-3xl p-4">
{#if loading}
<div class="py-16 text-center text-gray-400">Laden…</div>
<div class="py-16 text-center text-gray-400 dark:text-gray-500">Laden…</div>
{:else if error}
<div class="rounded-lg bg-red-50 p-4 text-sm text-red-700">{error}</div>
{:else}
@@ -308,63 +441,103 @@
<div class="space-y-3">
{#if stats}
<div class="grid grid-cols-2 gap-3 sm:grid-cols-4">
<div class="rounded-xl bg-white border border-gray-200 p-4 text-center">
<p class="text-3xl font-bold text-gray-900">{stats.user_count}</p>
<p class="mt-0.5 text-xs text-gray-500">Gäste</p>
<div class="rounded-xl bg-white border border-gray-200 p-4 text-center dark:border-gray-700 dark:bg-gray-800">
<p class="text-3xl font-bold text-gray-900 dark:text-gray-100">{stats.user_count}</p>
<p class="mt-0.5 text-xs text-gray-500 dark:text-gray-400">Gäste</p>
</div>
<div class="rounded-xl bg-white border border-gray-200 p-4 text-center">
<p class="text-3xl font-bold text-gray-900">{stats.upload_count}</p>
<p class="mt-0.5 text-xs text-gray-500">Uploads</p>
<div class="rounded-xl bg-white border border-gray-200 p-4 text-center dark:border-gray-700 dark:bg-gray-800">
<p class="text-3xl font-bold text-gray-900 dark:text-gray-100">{stats.upload_count}</p>
<p class="mt-0.5 text-xs text-gray-500 dark:text-gray-400">Uploads</p>
</div>
<div class="rounded-xl bg-white border border-gray-200 p-4 text-center">
<p class="text-3xl font-bold text-gray-900">{stats.comment_count}</p>
<p class="mt-0.5 text-xs text-gray-500">Kommentare</p>
<div class="rounded-xl bg-white border border-gray-200 p-4 text-center dark:border-gray-700 dark:bg-gray-800">
<p class="text-3xl font-bold text-gray-900 dark:text-gray-100">{stats.comment_count}</p>
<p class="mt-0.5 text-xs text-gray-500 dark:text-gray-400">Kommentare</p>
</div>
<div class="rounded-xl bg-white border border-gray-200 p-4 text-center">
<p class="text-3xl font-bold text-gray-900">{diskPct(stats)} %</p>
<p class="mt-0.5 text-xs text-gray-500">Speicher</p>
<div class="rounded-xl bg-white border border-gray-200 p-4 text-center dark:border-gray-700 dark:bg-gray-800">
<p class="text-3xl font-bold text-gray-900 dark:text-gray-100">{diskPct(stats)} %</p>
<p class="mt-0.5 text-xs text-gray-500 dark:text-gray-400">Speicher</p>
</div>
</div>
<!-- Disk bar -->
<div class="rounded-xl border border-gray-200 bg-white p-5">
<div class="mb-1 flex items-center justify-between text-xs text-gray-500">
<div class="rounded-xl border border-gray-200 bg-white p-5 dark:border-gray-700 dark:bg-gray-800">
<div class="mb-1 flex items-center justify-between text-xs text-gray-500 dark:text-gray-400">
<span>Speicherauslastung</span>
<span>{formatBytes(stats.disk_used_bytes)} / {formatBytes(stats.disk_total_bytes)}</span>
</div>
<div class="h-2.5 overflow-hidden rounded-full bg-gray-200">
<div class="h-2.5 overflow-hidden rounded-full bg-gray-200 dark:bg-gray-700">
<div
class="h-full rounded-full transition-all {diskPct(stats) >= 90 ? 'bg-red-500' : diskPct(stats) >= 75 ? 'bg-amber-500' : 'bg-blue-500'}"
style="width: {diskPct(stats)}%"
></div>
</div>
<p class="mt-1.5 text-xs text-gray-400">{formatBytes(stats.disk_free_bytes)} frei</p>
<p class="mt-1.5 text-xs text-gray-400 dark:text-gray-500">{formatBytes(stats.disk_free_bytes)} frei</p>
</div>
{/if}
</div>
<!-- ── Config tab ───────────────────────────────────────────────── -->
{:else if activeTab === 'config'}
<div class="relative">
<div class="space-y-3 rounded-xl border border-gray-200 bg-white p-5 pb-20">
{#each Object.entries(CONFIG_LABELS) as [key, label]}
<div>
<label for={key} class="mb-1 block text-sm font-medium text-gray-700">{label}</label>
<input
id={key}
type="number"
step="any"
bind:value={configDraft[key]}
class="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-200"
/>
<div class="relative space-y-3 pb-20">
{#each CONFIG_GROUPS as group (group.title)}
<div class="rounded-xl border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-800">
<div class="border-b border-gray-100 px-5 py-3 dark:border-gray-700">
<h3 class="text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">{group.title}</h3>
</div>
{/each}
</div>
<div class="space-y-4 px-5 py-4">
{#each group.fields as field (field.key)}
<div>
{#if field.kind === 'bool'}
<label class="flex cursor-pointer items-start gap-3" for={field.key}>
<input
id={field.key}
type="checkbox"
class="mt-1 h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700"
checked={isTrue(configDraft[field.key])}
onchange={() => toggleBool(field.key)}
/>
<div class="min-w-0">
<span class="text-sm font-medium text-gray-900 dark:text-gray-100">{field.label}</span>
{#if field.hint}
<p class="text-xs text-gray-500 dark:text-gray-400">{field.hint}</p>
{/if}
</div>
</label>
{:else if field.kind === 'text'}
<label for={field.key} class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">{field.label}</label>
<textarea
id={field.key}
rows="6"
bind:value={configDraft[field.key]}
class="w-full resize-none rounded-lg border border-gray-300 bg-white px-3 py-2 font-mono text-sm text-gray-900 focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-200 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100"
></textarea>
{#if field.hint}
<p class="mt-1 text-xs text-gray-500 dark:text-gray-400">{field.hint}</p>
{/if}
{:else}
<label for={field.key} class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">{field.label}</label>
<input
id={field.key}
type="number"
step="any"
bind:value={configDraft[field.key]}
class="w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-200 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100"
/>
{#if field.hint}
<p class="mt-1 text-xs text-gray-500 dark:text-gray-400">{field.hint}</p>
{/if}
{/if}
</div>
{/each}
</div>
</div>
{/each}
<!-- Sticky save button -->
<div class="sticky bottom-0 border-t border-gray-100 bg-white px-5 py-3">
<div class="sticky bottom-0 -mx-4 border-t border-gray-100 bg-white px-5 py-3 dark:border-gray-800 dark:bg-gray-900 sm:mx-0 sm:rounded-b-xl">
<button
onclick={saveConfig}
disabled={saving}
class="w-full rounded-xl bg-blue-600 py-3 text-sm font-semibold text-white transition hover:bg-blue-700 disabled:opacity-50"
class="w-full rounded-xl bg-blue-600 py-3 text-sm font-semibold text-white transition hover:bg-blue-700 disabled:opacity-50 dark:bg-blue-500 dark:hover:bg-blue-400"
>
{saving ? 'Wird gespeichert…' : 'Speichern'}
</button>
@@ -375,52 +548,52 @@
{:else if activeTab === 'export'}
<div class="space-y-3">
<!-- Gallery release -->
<div class="rounded-xl border border-gray-200 bg-white p-5">
<h3 class="mb-3 font-semibold text-gray-900">Galerie</h3>
<div class="rounded-xl border border-gray-200 bg-white p-5 dark:border-gray-700 dark:bg-gray-800">
<h3 class="mb-3 font-semibold text-gray-900 dark:text-gray-100">Galerie</h3>
<button
onclick={releaseGallery}
class="rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white transition hover:bg-blue-700"
class="rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white transition hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-400"
>
Galerie freigeben
</button>
</div>
<!-- Export jobs -->
<div class="rounded-xl border border-gray-200 bg-white p-5">
<div class="rounded-xl border border-gray-200 bg-white p-5 dark:border-gray-700 dark:bg-gray-800">
<div class="mb-4 flex items-center justify-between">
<h3 class="font-semibold text-gray-900">Export-Jobs</h3>
<h3 class="font-semibold text-gray-900 dark:text-gray-100">Export-Jobs</h3>
<button
onclick={refreshExportJobs}
disabled={exportJobsRefreshing}
class="text-xs text-blue-600 hover:underline disabled:opacity-50"
class="text-xs text-blue-600 hover:underline disabled:opacity-50 dark:text-blue-400"
>
{exportJobsRefreshing ? 'Lädt…' : 'Aktualisieren'}
</button>
</div>
{#if exportJobs.length === 0}
<p class="text-sm text-gray-400">Noch keine Export-Jobs.</p>
<p class="text-sm text-gray-400 dark:text-gray-500">Noch keine Export-Jobs.</p>
{:else}
<div class="space-y-3">
{#each exportJobs as job}
<div class="rounded-lg border border-gray-100 p-3">
<div class="rounded-lg border border-gray-100 p-3 dark:border-gray-700">
<div class="flex items-center justify-between">
<span class="text-sm font-medium text-gray-900">{jobLabel(job.type)}</span>
<span class="text-sm font-medium text-gray-900 dark:text-gray-100">{jobLabel(job.type)}</span>
<span class="rounded-full px-2 py-0.5 text-xs font-medium {statusBadgeClass(job.status)}">
{statusLabel(job.status)}
</span>
</div>
{#if job.status === 'running'}
<div class="mt-2">
<div class="mb-1 flex justify-between text-xs text-gray-500">
<div class="mb-1 flex justify-between text-xs text-gray-500 dark:text-gray-400">
<span>Fortschritt</span><span>{job.progress_pct} %</span>
</div>
<div class="h-1.5 overflow-hidden rounded-full bg-gray-200">
<div class="h-1.5 overflow-hidden rounded-full bg-gray-200 dark:bg-gray-700">
<div class="h-full rounded-full bg-blue-500 transition-all" style="width: {job.progress_pct}%"></div>
</div>
</div>
{/if}
{#if job.error_message}
<p class="mt-1 text-xs text-red-600">{job.error_message}</p>
<p class="mt-1 text-xs text-red-600 dark:text-red-400">{job.error_message}</p>
{/if}
</div>
{/each}
@@ -431,66 +604,71 @@
<!-- ── Nutzer tab ───────────────────────────────────────────────── -->
{:else if activeTab === 'users'}
<div class="overflow-hidden rounded-xl border border-gray-200 bg-white">
<div class="overflow-hidden rounded-xl border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-800">
<!-- Search -->
<div class="p-4">
<div class="flex items-center gap-2 rounded-lg border border-gray-200 bg-gray-50 px-3 py-2">
<svg class="h-4 w-4 shrink-0 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<div class="flex items-center gap-2 rounded-lg border border-gray-200 bg-gray-50 px-3 py-2 dark:border-gray-700 dark:bg-gray-900">
<svg class="h-4 w-4 shrink-0 text-gray-400 dark:text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" />
</svg>
<input
type="search"
placeholder="Nutzer suchen…"
bind:value={userSearch}
class="min-w-0 flex-1 bg-transparent text-sm text-gray-900 placeholder-gray-400 outline-none"
class="min-w-0 flex-1 bg-transparent text-sm text-gray-900 placeholder-gray-400 outline-none dark:text-gray-100 dark:placeholder-gray-500"
/>
</div>
</div>
{#if filteredUsers.length === 0}
<p class="px-5 py-8 text-center text-sm text-gray-400">Keine Treffer.</p>
<p class="px-5 py-8 text-center text-sm text-gray-400 dark:text-gray-500">Keine Treffer.</p>
{:else}
<div class="divide-y divide-gray-100">
<div class="divide-y divide-gray-100 dark:divide-gray-700">
{#each filteredUsers as user}
<div class="flex items-center gap-3 px-5 py-3">
<div class="min-w-0 flex-1">
<div class="flex flex-wrap items-center gap-1.5">
<span class="font-medium text-gray-900">{user.display_name}</span>
<span class="font-medium text-gray-900 dark:text-gray-100">{user.display_name}</span>
{#if user.role === 'host'}
<span class="rounded-full bg-blue-100 px-2 py-0.5 text-xs font-medium text-blue-700">Host</span>
<span class="rounded-full bg-blue-100 px-2 py-0.5 text-xs font-medium text-blue-700 dark:bg-blue-900/40 dark:text-blue-200">Host</span>
{:else if user.role === 'admin'}
<span class="rounded-full bg-purple-100 px-2 py-0.5 text-xs font-medium text-purple-700">Admin</span>
<span class="rounded-full bg-purple-100 px-2 py-0.5 text-xs font-medium text-purple-700 dark:bg-purple-900/40 dark:text-purple-200">Admin</span>
{/if}
{#if user.is_banned}
<span class="rounded-full bg-red-100 px-2 py-0.5 text-xs font-medium text-red-700">Gesperrt</span>
<span class="rounded-full bg-red-100 px-2 py-0.5 text-xs font-medium text-red-700 dark:bg-red-900/40 dark:text-red-200">Gesperrt</span>
{/if}
</div>
<p class="text-xs text-gray-400">
<p class="text-xs text-gray-400 dark:text-gray-500">
{user.upload_count} Upload{user.upload_count !== 1 ? 's' : ''} · {formatBytes(user.total_upload_bytes)}
</p>
</div>
<div class="flex shrink-0 gap-1.5">
{#if user.role !== 'admin'}
{#if user.is_banned}
<button onclick={() => unban(user)} class="rounded-lg bg-gray-100 px-3 py-1.5 text-xs font-medium text-gray-700 hover:bg-gray-200">
Entsperren
</button>
{:else}
{#if user.role === 'guest'}
<button onclick={() => promoteToHost(user)} class="rounded-lg bg-blue-50 px-3 py-1.5 text-xs font-medium text-blue-700 hover:bg-blue-100">
Host
</button>
{/if}
{#if user.role === 'host' && myRole === 'admin'}
<button onclick={() => demoteToGuest(user)} class="rounded-lg bg-gray-100 px-3 py-1.5 text-xs font-medium text-gray-700 hover:bg-gray-200">
Degradieren
</button>
{/if}
<button onclick={() => openBanModal(user)} class="rounded-lg bg-red-50 px-3 py-1.5 text-xs font-medium text-red-700 hover:bg-red-100">
Sperren
<div class="flex shrink-0 flex-wrap justify-end gap-1.5">
{#if user.role !== 'admin'}
{#if user.is_banned}
<button onclick={() => unban(user)} class="rounded-lg bg-gray-100 px-3 py-1.5 text-xs font-medium text-gray-700 hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-200 dark:hover:bg-gray-600">
Entsperren
</button>
{:else}
{#if user.role === 'guest'}
<button onclick={() => promoteToHost(user)} class="rounded-lg bg-blue-50 px-3 py-1.5 text-xs font-medium text-blue-700 hover:bg-blue-100 dark:bg-blue-900/40 dark:text-blue-200 dark:hover:bg-blue-900/60">
Host
</button>
{/if}
{#if user.role === 'host'}
<button onclick={() => demoteToGuest(user)} class="rounded-lg bg-gray-100 px-3 py-1.5 text-xs font-medium text-gray-700 hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-200 dark:hover:bg-gray-600">
Degradieren
</button>
{/if}
{#if canResetPinFor(user)}
<button onclick={() => askResetPin(user)} class="rounded-lg bg-amber-50 px-3 py-1.5 text-xs font-medium text-amber-700 hover:bg-amber-100 dark:bg-amber-900/40 dark:text-amber-200 dark:hover:bg-amber-900/60">
PIN zurücksetzen
</button>
{/if}
<button onclick={() => openBanModal(user)} class="rounded-lg bg-red-50 px-3 py-1.5 text-xs font-medium text-red-700 hover:bg-red-100 dark:bg-red-950/40 dark:text-red-300 dark:hover:bg-red-950/60">
Sperren
</button>
{/if}
</div>
{/if}
</div>
</div>
{/each}
</div>

16
frontend/src/routes/admin/login/+page.svelte
View File

@@ -34,10 +34,10 @@
}
</script>
<div class="flex min-h-screen items-center justify-center bg-gray-50 px-4">
<div class="flex min-h-screen items-center justify-center bg-gray-50 px-4 dark:bg-gray-950">
<div class="w-full max-w-sm">
<h1 class="mb-2 text-center text-2xl font-bold text-gray-900">Admin-Login</h1>
<p class="mb-6 text-center text-gray-500 text-sm">Nur für Veranstalter</p>
<h1 class="mb-2 text-center text-2xl font-bold text-gray-900 dark:text-gray-100">Admin-Login</h1>
<p class="mb-6 text-center text-gray-500 text-sm dark:text-gray-400">Nur für Veranstalter</p>
<form onsubmit={(e) => { e.preventDefault(); handleLogin(); }}>
<input
@@ -45,24 +45,24 @@
bind:value={password}
placeholder="Passwort"
autocomplete="current-password"
class="mb-3 w-full rounded-lg border border-gray-300 px-4 py-3 text-lg focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-200"
class="mb-3 w-full rounded-lg border border-gray-300 bg-white px-4 py-3 text-lg text-gray-900 placeholder-gray-400 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-200 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100 dark:placeholder-gray-500"
/>
{#if error}
<p class="mb-3 text-sm text-red-600">{error}</p>
<p class="mb-3 text-sm text-red-600 dark:text-red-400">{error}</p>
{/if}
<button
type="submit"
disabled={loading || !password}
class="w-full rounded-lg bg-blue-600 px-4 py-3 text-lg font-medium text-white transition hover:bg-blue-700 disabled:opacity-50"
class="w-full rounded-lg bg-blue-600 px-4 py-3 text-lg font-medium text-white transition hover:bg-blue-700 disabled:opacity-50 dark:bg-blue-500 dark:hover:bg-blue-400"
>
{loading ? 'Wird angemeldet…' : 'Anmelden'}
</button>
</form>
<p class="mt-4 text-center text-sm text-gray-500">
<a href="/join" class="text-blue-600 hover:underline">Zurück zum Event</a>
<p class="mt-4 text-center text-sm text-gray-500 dark:text-gray-400">
<a href="/join" class="text-blue-600 hover:underline dark:text-blue-400">Zurück zum Event</a>
</p>
</div>
</div>

60
frontend/src/routes/export/+page.svelte
View File

@@ -109,26 +109,26 @@
<!-- HTML guide modal -->
{#if showHtmlGuide}
<div class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4">
<div class="w-full max-w-sm rounded-2xl bg-white p-6 shadow-xl">
<h2 class="mb-3 text-lg font-bold text-gray-900">Hinweis zum HTML-Viewer</h2>
<ol class="mb-4 space-y-2 text-sm text-gray-700">
<li class="flex gap-2"><span class="font-bold text-blue-600">1.</span> ZIP-Datei entpacken (Windows: Rechtsklick → "Alle extrahieren"; Mac: Doppelklick).</li>
<li class="flex gap-2"><span class="font-bold text-blue-600">2.</span> <strong>index.html</strong> im Browser öffnen.</li>
<li class="flex gap-2"><span class="font-bold text-blue-600">3.</span> Kein Internet nötig — alles ist lokal gespeichert.</li>
<div class="w-full max-w-sm rounded-2xl bg-white p-6 shadow-xl dark:bg-gray-900">
<h2 class="mb-3 text-lg font-bold text-gray-900 dark:text-gray-100">Hinweis zum HTML-Viewer</h2>
<ol class="mb-4 space-y-2 text-sm text-gray-700 dark:text-gray-300">
<li class="flex gap-2"><span class="font-bold text-blue-600 dark:text-blue-400">1.</span> ZIP-Datei entpacken (Windows: Rechtsklick → "Alle extrahieren"; Mac: Doppelklick).</li>
<li class="flex gap-2"><span class="font-bold text-blue-600 dark:text-blue-400">2.</span> <strong>index.html</strong> im Browser öffnen.</li>
<li class="flex gap-2"><span class="font-bold text-blue-600 dark:text-blue-400">3.</span> Kein Internet nötig — alles ist lokal gespeichert.</li>
</ol>
<p class="mb-4 rounded-lg bg-amber-50 px-3 py-2 text-xs text-amber-700">
<p class="mb-4 rounded-lg bg-amber-50 px-3 py-2 text-xs text-amber-700 dark:bg-amber-950/30 dark:text-amber-300">
Tipp: Am besten im WLAN herunterladen — die Datei kann mehrere GB groß sein.
</p>
<div class="flex gap-2">
<button
onclick={() => (showHtmlGuide = false)}
class="flex-1 rounded-lg border border-gray-300 py-2 text-sm text-gray-700 hover:bg-gray-50"
class="flex-1 rounded-lg border border-gray-300 py-2 text-sm text-gray-700 hover:bg-gray-50 dark:border-gray-700 dark:text-gray-300 dark:hover:bg-gray-800"
>
Abbrechen
</button>
<button
onclick={confirmHtmlDownload}
class="flex-1 rounded-lg bg-blue-600 py-2 text-sm font-medium text-white hover:bg-blue-700"
class="flex-1 rounded-lg bg-blue-600 py-2 text-sm font-medium text-white hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-400"
>
Herunterladen
</button>
@@ -137,48 +137,48 @@
</div>
{/if}
<div class="min-h-screen bg-gray-50 pb-24">
<div class="border-b border-gray-200 bg-white">
<div class="min-h-screen bg-gray-50 pb-24 dark:bg-gray-950">
<div class="border-b border-gray-200 bg-white dark:border-gray-800 dark:bg-gray-900">
<div class="mx-auto flex max-w-lg items-center px-4 py-4">
<h1 class="text-xl font-bold text-gray-900">Export</h1>
<h1 class="text-xl font-bold text-gray-900 dark:text-gray-100">Export</h1>
</div>
</div>
<div class="mx-auto max-w-lg space-y-4 p-4">
{#if loading}
<div class="py-16 text-center text-gray-400">Laden…</div>
<div class="py-16 text-center text-gray-400 dark:text-gray-500">Laden…</div>
{:else if !status?.released}
<div class="rounded-xl border border-gray-200 bg-white p-6 text-center">
<svg class="mx-auto mb-3 h-12 w-12 text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<div class="rounded-xl border border-gray-200 bg-white p-6 text-center dark:border-gray-700 dark:bg-gray-800">
<svg class="mx-auto mb-3 h-12 w-12 text-gray-300 dark:text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
</svg>
<p class="font-medium text-gray-700">Export noch nicht verfügbar</p>
<p class="mt-1 text-sm text-gray-500">Schau nach der Veranstaltung noch einmal vorbei.</p>
<p class="font-medium text-gray-700 dark:text-gray-300">Export noch nicht verfügbar</p>
<p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Schau nach der Veranstaltung noch einmal vorbei.</p>
</div>
{:else if status}
<p class="text-sm text-gray-500">Wähle dein bevorzugtes Format:</p>
<p class="text-sm text-gray-500 dark:text-gray-400">Wähle dein bevorzugtes Format:</p>
<!-- ZIP card -->
<div class="rounded-xl border border-gray-200 bg-white p-5">
<div class="rounded-xl border border-gray-200 bg-white p-5 dark:border-gray-700 dark:bg-gray-800">
<div class="flex items-start justify-between gap-4">
<div class="min-w-0">
<h2 class="font-semibold text-gray-900">ZIP-Archiv</h2>
<p class="mt-0.5 text-sm text-gray-500">Alle Original-Fotos und Videos in strukturierten Ordnern.</p>
<p class="mt-1 text-xs {status.zip.status === 'done' ? 'text-green-600' : status.zip.status === 'failed' ? 'text-red-500' : 'text-gray-400'}">
<h2 class="font-semibold text-gray-900 dark:text-gray-100">ZIP-Archiv</h2>
<p class="mt-0.5 text-sm text-gray-500 dark:text-gray-400">Alle Original-Fotos und Videos in strukturierten Ordnern.</p>
<p class="mt-1 text-xs {status.zip.status === 'done' ? 'text-green-600 dark:text-green-400' : status.zip.status === 'failed' ? 'text-red-500 dark:text-red-400' : 'text-gray-400 dark:text-gray-500'}">
{statusText(status.zip)}
</p>
</div>
<button
onclick={downloadZip}
disabled={status.zip.status !== 'done'}
class="shrink-0 rounded-lg px-4 py-2 text-sm font-medium {status.zip.status === 'done' ? 'bg-blue-600 text-white hover:bg-blue-700' : 'bg-gray-100 text-gray-400 cursor-not-allowed'}"
class="shrink-0 rounded-lg px-4 py-2 text-sm font-medium {status.zip.status === 'done' ? 'bg-blue-600 text-white hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-400' : 'bg-gray-100 text-gray-400 cursor-not-allowed dark:bg-gray-700 dark:text-gray-500'}"
>
Download
</button>
</div>
{#if status.zip.status === 'running'}
<div class="mt-3">
<div class="h-1.5 overflow-hidden rounded-full bg-gray-200">
<div class="h-1.5 overflow-hidden rounded-full bg-gray-200 dark:bg-gray-700">
<div class="h-full rounded-full bg-blue-500 transition-all" style="width: {status.zip.progress_pct}%"></div>
</div>
</div>
@@ -186,26 +186,26 @@
</div>
<!-- HTML card -->
<div class="rounded-xl border border-gray-200 bg-white p-5">
<div class="rounded-xl border border-gray-200 bg-white p-5 dark:border-gray-700 dark:bg-gray-800">
<div class="flex items-start justify-between gap-4">
<div class="min-w-0">
<h2 class="font-semibold text-gray-900">HTML-Viewer</h2>
<p class="mt-0.5 text-sm text-gray-500">Schöne Offline-Galerie mit Filterung, Kommentaren und Likes — kein Internet nötig.</p>
<p class="mt-1 text-xs {status.html.status === 'done' ? 'text-green-600' : status.html.status === 'failed' ? 'text-red-500' : 'text-gray-400'}">
<h2 class="font-semibold text-gray-900 dark:text-gray-100">HTML-Viewer</h2>
<p class="mt-0.5 text-sm text-gray-500 dark:text-gray-400">Schöne Offline-Galerie mit Filterung, Kommentaren und Likes — kein Internet nötig.</p>
<p class="mt-1 text-xs {status.html.status === 'done' ? 'text-green-600 dark:text-green-400' : status.html.status === 'failed' ? 'text-red-500 dark:text-red-400' : 'text-gray-400 dark:text-gray-500'}">
{statusText(status.html)}
</p>
</div>
<button
onclick={downloadHtml}
disabled={status.html.status !== 'done'}
class="shrink-0 rounded-lg px-4 py-2 text-sm font-medium {status.html.status === 'done' ? 'bg-blue-600 text-white hover:bg-blue-700' : 'bg-gray-100 text-gray-400 cursor-not-allowed'}"
class="shrink-0 rounded-lg px-4 py-2 text-sm font-medium {status.html.status === 'done' ? 'bg-blue-600 text-white hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-400' : 'bg-gray-100 text-gray-400 cursor-not-allowed dark:bg-gray-700 dark:text-gray-500'}"
>
Download
</button>
</div>
{#if status.html.status === 'running'}
<div class="mt-3">
<div class="h-1.5 overflow-hidden rounded-full bg-gray-200">
<div class="h-1.5 overflow-hidden rounded-full bg-gray-200 dark:bg-gray-700">
<div class="h-full rounded-full bg-blue-500 transition-all" style="width: {status.html.progress_pct}%"></div>
</div>
</div>

175
frontend/src/routes/feed/+page.svelte
View File

@@ -1,6 +1,6 @@
<script lang="ts">
import { goto } from '$app/navigation';
import { getToken } from '$lib/auth';
import { getToken, getUserId } from '$lib/auth';
import { api } from '$lib/api';
import { connectSse, disconnectSse, onSseEvent } from '$lib/sse';
import { onMount, onDestroy } from 'svelte';
@@ -9,7 +9,9 @@
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';
import ContextSheet, { type ContextAction } from '$lib/components/ContextSheet.svelte';
import { refreshQuota } from '$lib/quota-store';
import type { FeedUpload, FeedResponse, HashtagCount, DeltaResponse } from '$lib/types';
let uploads = $state<FeedUpload[]>([]);
let hashtags = $state<HashtagCount[]>([]);
@@ -31,6 +33,49 @@
let unsubscribers: (() => void)[] = [];
// Long-press / context-sheet state for post actions
let contextTarget = $state<FeedUpload | null>(null);
const myUserId = getUserId();
const contextActions = $derived<ContextAction[]>(buildContextActions(contextTarget));
function buildContextActions(target: FeedUpload | null): ContextAction[] {
if (!target) return [];
const actions: ContextAction[] = [
{
label: 'Original anzeigen',
icon: '⤓',
onClick: () => {
window.open(`/api/v1/upload/${target.id}/original`, '_blank');
}
}
];
if (target.user_id === myUserId) {
actions.unshift({
label: 'Löschen',
icon: '🗑',
tone: 'danger',
onClick: () => deleteUpload(target.id)
});
}
return actions;
}
function openContextSheet(upload: FeedUpload) {
contextTarget = upload;
}
async function deleteUpload(id: string) {
if (!confirm('Diesen Beitrag wirklich löschen?')) return;
try {
await api.delete(`/upload/${id}`);
uploads = uploads.filter((u) => u.id !== id);
if (selectedUpload?.id === id) selectedUpload = null;
void refreshQuota();
} catch {
// ignore — toast handled by ApiError elsewhere
}
}
// ── Autocomplete derived from loaded uploads (no extra API calls) ────────
let allTags = $derived.by(() => {
const freq = new Map<string, number>();
@@ -105,8 +150,31 @@
} catch { /* ignore */ }
}),
onSseEvent('upload-processed', () => loadFeed(true)),
onSseEvent('upload-deleted', (data) => {
try {
const payload = JSON.parse(data) as { upload_id: string };
uploads = uploads.filter((u) => u.id !== payload.upload_id);
if (selectedUpload?.id === payload.upload_id) selectedUpload = null;
} catch { /* ignore */ }
}),
onSseEvent('like-update', () => loadFeed(true)),
onSseEvent('new-comment', () => loadFeed(true))
onSseEvent('new-comment', () => loadFeed(true)),
// Synthetic event from the SSE client after a foreground reconnect — merge
// any uploads + deletions we missed while the tab was hidden.
onSseEvent('feed-delta', (data) => {
try {
const delta = JSON.parse(data) as DeltaResponse;
if (delta.uploads.length) {
const seen = new Set(uploads.map((u) => u.id));
const fresh = delta.uploads.filter((u) => !seen.has(u.id));
if (fresh.length) uploads = [...fresh, ...uploads];
}
if (delta.deleted_ids.length) {
const dead = new Set(delta.deleted_ids);
uploads = uploads.filter((u) => !dead.has(u.id));
}
} catch { /* ignore */ }
})
);
if (sentinel) {
@@ -214,34 +282,49 @@
}
</script>
<div class="min-h-screen bg-gray-50 pb-24">
<div class="min-h-screen bg-gray-50 pb-24 dark:bg-gray-950">
<!-- Sticky header -->
<div class="sticky top-0 z-30 border-b border-gray-200 bg-white/95 backdrop-blur">
<div class="sticky top-0 z-30 border-b border-gray-200 bg-white/95 backdrop-blur dark:border-gray-800 dark:bg-gray-900/95">
<div class="mx-auto flex max-w-2xl items-center justify-between px-4 py-3">
<h1 class="text-lg font-bold text-gray-900">Galerie</h1>
<h1 class="text-lg font-bold text-gray-900 dark:text-gray-100">Galerie</h1>
<!-- List / Grid toggle -->
<div class="flex items-center gap-1 rounded-lg bg-gray-100 p-1">
<div class="flex items-center gap-2">
<!-- Diashow entry — tablet/desktop only (mobile uses the Account page tile). -->
<button
onclick={() => switchView('list')}
class="rounded-md p-1.5 transition-colors {viewMode === 'list' ? 'bg-white text-gray-900 shadow-sm' : 'text-gray-400 hover:text-gray-600'}"
aria-label="Listenansicht"
onclick={() => goto('/diashow')}
class="hidden rounded-md p-1.5 text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-100 sm:inline-flex"
aria-label="Diashow starten"
title="Diashow"
>
<!-- bars-3 -->
<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
</svg>
</button>
<button
onclick={() => switchView('grid')}
class="rounded-md p-1.5 transition-colors {viewMode === 'grid' ? 'bg-white text-gray-900 shadow-sm' : 'text-gray-400 hover:text-gray-600'}"
aria-label="Rasteransicht"
>
<!-- squares-2x2 -->
<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6A2.25 2.25 0 0 1 6 3.75h2.25A2.25 2.25 0 0 1 10.5 6v2.25a2.25 2.25 0 0 1-2.25 2.25H6a2.25 2.25 0 0 1-2.25-2.25V6ZM3.75 15.75A2.25 2.25 0 0 1 6 13.5h2.25a2.25 2.25 0 0 1 2.25 2.25V18a2.25 2.25 0 0 1-2.25 2.25H6A2.25 2.25 0 0 1 3.75 18v-2.25ZM13.5 6a2.25 2.25 0 0 1 2.25-2.25H18A2.25 2.25 0 0 1 20.25 6v2.25A2.25 2.25 0 0 1 18 10.5h-2.25a2.25 2.25 0 0 1-2.25-2.25V6ZM13.5 15.75a2.25 2.25 0 0 1 2.25-2.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-2.25A2.25 2.25 0 0 1 13.5 18v-2.25Z" />
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 7.5A2.25 2.25 0 0 1 6 5.25h12A2.25 2.25 0 0 1 20.25 7.5v9A2.25 2.25 0 0 1 18 18.75H6A2.25 2.25 0 0 1 3.75 16.5v-9Z" />
<path stroke-linecap="round" stroke-linejoin="round" d="M10 9.75 14.5 12 10 14.25v-4.5Z" />
</svg>
</button>
<!-- List / Grid toggle -->
<div class="flex items-center gap-1 rounded-lg bg-gray-100 p-1 dark:bg-gray-800">
<button
onclick={() => switchView('list')}
class="rounded-md p-1.5 transition-colors {viewMode === 'list' ? 'bg-white text-gray-900 shadow-sm dark:bg-gray-700 dark:text-gray-100' : 'text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300'}"
aria-label="Listenansicht"
>
<!-- bars-3 -->
<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
</svg>
</button>
<button
onclick={() => switchView('grid')}
class="rounded-md p-1.5 transition-colors {viewMode === 'grid' ? 'bg-white text-gray-900 shadow-sm dark:bg-gray-700 dark:text-gray-100' : 'text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300'}"
aria-label="Rasteransicht"
>
<!-- squares-2x2 -->
<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6A2.25 2.25 0 0 1 6 3.75h2.25A2.25 2.25 0 0 1 10.5 6v2.25a2.25 2.25 0 0 1-2.25 2.25H6a2.25 2.25 0 0 1-2.25-2.25V6ZM3.75 15.75A2.25 2.25 0 0 1 6 13.5h2.25a2.25 2.25 0 0 1 2.25 2.25V18a2.25 2.25 0 0 1-2.25 2.25H6A2.25 2.25 0 0 1 3.75 18v-2.25ZM13.5 6a2.25 2.25 0 0 1 2.25-2.25H18A2.25 2.25 0 0 1 20.25 6v2.25A2.25 2.25 0 0 1 18 10.5h-2.25a2.25 2.25 0 0 1-2.25-2.25V6ZM13.5 15.75a2.25 2.25 0 0 1 2.25-2.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-2.25A2.25 2.25 0 0 1 13.5 18v-2.25Z" />
</svg>
</button>
</div>
</div>
</div>
@@ -256,8 +339,8 @@
{#if viewMode === 'grid'}
<div class="mx-auto max-w-2xl px-4 pb-3">
<div class="relative">
<div class="flex items-center gap-2 rounded-xl border border-gray-200 bg-gray-50 px-3 py-2 focus-within:border-blue-400 focus-within:bg-white focus-within:ring-1 focus-within:ring-blue-200">
<svg class="h-4 w-4 shrink-0 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<div class="flex items-center gap-2 rounded-xl border border-gray-200 bg-gray-50 px-3 py-2 focus-within:border-blue-400 focus-within:bg-white focus-within:ring-1 focus-within:ring-blue-200 dark:border-gray-700 dark:bg-gray-800 dark:focus-within:border-blue-500 dark:focus-within:bg-gray-800">
<svg class="h-4 w-4 shrink-0 text-gray-400 dark:text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
</svg>
<input
@@ -266,12 +349,12 @@
bind:value={searchQuery}
onfocus={() => (showAutocomplete = true)}
onblur={() => setTimeout(() => (showAutocomplete = false), 150)}
class="min-w-0 flex-1 bg-transparent text-sm text-gray-900 placeholder-gray-400 outline-none"
class="min-w-0 flex-1 bg-transparent text-sm text-gray-900 placeholder-gray-400 outline-none dark:text-gray-100 dark:placeholder-gray-500"
/>
{#if searchQuery}
<button
onclick={() => { searchQuery = ''; }}
class="shrink-0 text-gray-400 hover:text-gray-600"
class="shrink-0 text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300"
aria-label="Suche löschen"
>
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
@@ -283,20 +366,20 @@
<!-- Autocomplete dropdown -->
{#if showAutocomplete && suggestions.length > 0}
<div class="absolute left-0 right-0 top-full z-50 mt-1 overflow-hidden rounded-xl border border-gray-200 bg-white shadow-lg">
<div class="absolute left-0 right-0 top-full z-50 mt-1 overflow-hidden rounded-xl border border-gray-200 bg-white shadow-lg dark:border-gray-700 dark:bg-gray-900">
{#each suggestions as item}
<button
class="flex w-full items-center gap-3 px-4 py-2.5 text-left text-sm hover:bg-gray-50"
class="flex w-full items-center gap-3 px-4 py-2.5 text-left text-sm hover:bg-gray-50 dark:hover:bg-gray-800"
onmousedown={() => selectSuggestion(item)}
>
{#if item.type === 'user'}
<svg class="h-4 w-4 shrink-0 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
<svg class="h-4 w-4 shrink-0 text-gray-400 dark:text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" />
</svg>
<span class="font-medium text-gray-900">{item.value}</span>
<span class="font-medium text-gray-900 dark:text-gray-100">{item.value}</span>
{:else}
<span class="text-blue-500 font-medium">#</span>
<span class="font-medium text-gray-900">{item.value}</span>
<span class="font-medium text-blue-500 dark:text-blue-400">#</span>
<span class="font-medium text-gray-900 dark:text-gray-100">{item.value}</span>
{/if}
</button>
{/each}
@@ -308,9 +391,9 @@
{#if activeFilters.length > 0}
<div class="mt-2 flex flex-wrap items-center gap-1.5">
{#each activeFilters as filter}
<span class="flex items-center gap-1 rounded-full bg-blue-100 px-2.5 py-0.5 text-xs font-medium text-blue-700">
<span class="flex items-center gap-1 rounded-full bg-blue-100 px-2.5 py-0.5 text-xs font-medium text-blue-700 dark:bg-blue-900/40 dark:text-blue-200">
{filter.type === 'tag' ? '#' : ''}{filter.value}
<button onclick={() => removeFilter(filter)} class="ml-0.5 hover:text-blue-900" aria-label="Filter entfernen">
<button onclick={() => removeFilter(filter)} class="ml-0.5 hover:text-blue-900 dark:hover:text-blue-100" aria-label="Filter entfernen">
<svg class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
</svg>
@@ -318,7 +401,7 @@
</span>
{/each}
{#if activeFilters.length >= 2}
<button onclick={clearFilters} class="text-xs text-gray-400 hover:text-gray-600">
<button onclick={clearFilters} class="text-xs text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300">
Alle löschen
</button>
{/if}
@@ -331,8 +414,8 @@
<!-- Content -->
{#if uploads.length === 0}
<div class="py-20 text-center">
<p class="text-lg text-gray-400">Noch keine Fotos.</p>
<p class="mt-1 text-sm text-gray-400">Tippe auf den Plus-Button unten!</p>
<p class="text-lg text-gray-400 dark:text-gray-500">Noch keine Fotos.</p>
<p class="mt-1 text-sm text-gray-400 dark:text-gray-500">Tippe auf den Plus-Button unten!</p>
</div>
{:else if viewMode === 'list'}
<!-- List view: chronological full-width cards -->
@@ -340,9 +423,11 @@
{#each uploads as upload (upload.id)}
<FeedListCard
{upload}
isOwn={upload.user_id === myUserId}
onlike={handleLike}
oncomment={openComments}
onselect={(u) => (selectedUpload = u)}
oncontextmenu={openContextSheet}
/>
{/each}
</div>
@@ -351,8 +436,8 @@
<div class="mx-auto max-w-2xl">
{#if displayUploads.length === 0}
<div class="py-16 text-center">
<p class="text-sm text-gray-400">Keine Treffer für die gewählten Filter.</p>
<button onclick={clearFilters} class="mt-2 text-sm text-blue-600 hover:underline">Filter zurücksetzen</button>
<p class="text-sm text-gray-400 dark:text-gray-500">Keine Treffer für die gewählten Filter.</p>
<button onclick={clearFilters} class="mt-2 text-sm text-blue-600 hover:underline dark:text-blue-400">Filter zurücksetzen</button>
</div>
{:else}
<FeedGrid
@@ -360,6 +445,7 @@
onlike={handleLike}
oncomment={openComments}
onselect={(u) => (selectedUpload = u)}
oncontextmenu={openContextSheet}
threeCol={true}
/>
{/if}
@@ -371,7 +457,7 @@
<div bind:this={sentinel} class="h-4"></div>
{#if loadingMore}
<div class="py-4 text-center">
<div class="inline-block h-6 w-6 animate-spin rounded-full border-2 border-gray-300 border-t-blue-600"></div>
<div class="inline-block h-6 w-6 animate-spin rounded-full border-2 border-gray-300 border-t-blue-600 dark:border-gray-700 dark:border-t-blue-400"></div>
</div>
{/if}
</div>
@@ -386,5 +472,12 @@
/>
{/if}
<!-- Context sheet for post long-press / kebab tap -->
<ContextSheet
open={contextTarget !== null}
actions={contextActions}
onClose={() => (contextTarget = null)}
/>
<!-- First-visit onboarding guide -->
<OnboardingGuide />

205
frontend/src/routes/host/+page.svelte
View File

@@ -45,10 +45,24 @@
let banHideUploads = $state(false);
let banSubmitting = $state(false);
// PIN reset modal state. `pinModal` holds the freshly-issued plaintext PIN; it is
// shown once and forgotten on close.
let pinResetTarget = $state<UserSummary | null>(null);
let pinResetSubmitting = $state(false);
let pinModal = $state<{ name: string; pin: string } | null>(null);
let toast = $state<string | null>(null);
const myRole = getRole();
/** Mirrors backend `handlers::host::reset_user_pin` authorisation rules. */
function canResetPinFor(target: UserSummary): boolean {
if (target.role === 'admin') return false;
if (myRole === 'admin') return true;
if (myRole === 'host') return target.role === 'guest';
return false;
}
onMount(async () => {
const token = getToken();
const role = getRole();
@@ -155,6 +169,30 @@
}
}
function askResetPin(user: UserSummary) {
pinResetTarget = user;
}
async function confirmResetPin() {
if (!pinResetTarget) return;
pinResetSubmitting = true;
try {
const res = await api.post<{ pin: string }>(`/host/users/${pinResetTarget.id}/pin-reset`);
pinModal = { name: pinResetTarget.display_name, pin: res.pin };
pinResetTarget = null;
} catch (e: unknown) {
showToast(e instanceof Error ? e.message : 'Fehler beim Zurücksetzen.');
} finally {
pinResetSubmitting = false;
}
}
function copyPinModal() {
if (!pinModal) return;
navigator.clipboard.writeText(pinModal.pin);
showToast('PIN kopiert.');
}
function formatBytes(bytes: number): string {
if (bytes < 1024) return `${bytes} B`;
if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
@@ -162,33 +200,75 @@
}
</script>
<!-- PIN reset confirmation -->
{#if pinResetTarget}
<div class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4">
<div class="w-full max-w-sm rounded-2xl bg-white p-6 shadow-xl dark:bg-gray-900">
<h2 class="mb-1 text-lg font-bold text-gray-900 dark:text-gray-100">PIN zurücksetzen</h2>
<p class="mb-4 text-sm text-gray-600 dark:text-gray-400">
Eine neue PIN für <strong>{pinResetTarget.display_name}</strong> wird erzeugt. Die alte PIN funktioniert dann nicht mehr.
</p>
<div class="flex gap-2">
<button onclick={() => (pinResetTarget = null)} class="flex-1 rounded-lg border border-gray-300 py-2 text-sm text-gray-700 hover:bg-gray-50 dark:border-gray-700 dark:text-gray-300 dark:hover:bg-gray-800">Abbrechen</button>
<button onclick={confirmResetPin} disabled={pinResetSubmitting} class="flex-1 rounded-lg bg-amber-500 py-2 text-sm font-medium text-white hover:bg-amber-600 disabled:opacity-50 dark:bg-amber-500 dark:hover:bg-amber-400">
{pinResetSubmitting ? 'Wird erzeugt…' : 'Neue PIN erzeugen'}
</button>
</div>
</div>
</div>
{/if}
<!-- One-time PIN display modal -->
{#if pinModal}
<div class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 p-4">
<div class="w-full max-w-sm rounded-2xl bg-white p-6 shadow-xl dark:bg-gray-900">
<h2 class="mb-1 text-lg font-bold text-gray-900 dark:text-gray-100">Neue PIN für {pinModal.name}</h2>
<p class="mb-4 text-sm text-gray-600 dark:text-gray-400">
Zeige diese PIN dem Benutzer. Sie wird nur einmal angezeigt — beim Schließen wird sie verworfen.
</p>
<div class="mb-4 flex items-center justify-between rounded-lg bg-amber-50 px-4 py-3 dark:bg-amber-950/30">
<span class="font-mono text-3xl font-bold tracking-widest text-gray-900 dark:text-gray-100">{pinModal.pin}</span>
<button onclick={copyPinModal} class="rounded-md bg-amber-100 px-3 py-1.5 text-sm font-medium text-amber-800 hover:bg-amber-200 dark:bg-amber-900/40 dark:text-amber-200 dark:hover:bg-amber-900/60">
Kopieren
</button>
</div>
<button
onclick={() => (pinModal = null)}
class="w-full rounded-lg bg-blue-600 py-2 text-sm font-semibold text-white hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-400"
>
Schließen
</button>
</div>
</div>
{/if}
<!-- Ban modal -->
{#if banTarget}
<div class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4">
<div class="w-full max-w-sm rounded-2xl bg-white p-6 shadow-xl">
<h2 class="mb-1 text-lg font-bold text-gray-900">Benutzer sperren</h2>
<p class="mb-4 text-sm text-gray-600">
<div class="w-full max-w-sm rounded-2xl bg-white p-6 shadow-xl dark:bg-gray-900">
<h2 class="mb-1 text-lg font-bold text-gray-900 dark:text-gray-100">Benutzer sperren</h2>
<p class="mb-4 text-sm text-gray-600 dark:text-gray-400">
Was soll mit den Uploads von <strong>{banTarget.display_name}</strong> passieren?
</p>
<label class="mb-4 flex cursor-pointer items-center gap-3 rounded-lg border border-gray-200 p-3">
<label class="mb-4 flex cursor-pointer items-center gap-3 rounded-lg border border-gray-200 p-3 dark:border-gray-700">
<input
type="checkbox"
bind:checked={banHideUploads}
class="h-4 w-4 rounded border-gray-300 text-red-600 focus:ring-red-500"
class="h-4 w-4 rounded border-gray-300 text-red-600 focus:ring-red-500 dark:border-gray-600"
/>
<span class="text-sm text-gray-700">Uploads aus der Galerie ausblenden</span>
<span class="text-sm text-gray-700 dark:text-gray-300">Uploads aus der Galerie ausblenden</span>
</label>
<div class="flex gap-2">
<button
onclick={() => (banTarget = null)}
class="flex-1 rounded-lg border border-gray-300 py-2 text-sm text-gray-700 hover:bg-gray-50"
class="flex-1 rounded-lg border border-gray-300 py-2 text-sm text-gray-700 hover:bg-gray-50 dark:border-gray-700 dark:text-gray-300 dark:hover:bg-gray-800"
>
Abbrechen
</button>
<button
onclick={confirmBan}
disabled={banSubmitting}
class="flex-1 rounded-lg bg-red-600 py-2 text-sm font-medium text-white hover:bg-red-700 disabled:opacity-50"
class="flex-1 rounded-lg bg-red-600 py-2 text-sm font-medium text-white hover:bg-red-700 disabled:opacity-50 dark:bg-red-500 dark:hover:bg-red-400"
>
{banSubmitting ? 'Wird gesperrt…' : 'Sperren'}
</button>
@@ -199,18 +279,18 @@
<!-- Toast -->
{#if toast}
<div class="fixed bottom-24 left-1/2 z-50 -translate-x-1/2 rounded-full bg-gray-900 px-5 py-2.5 text-sm text-white shadow-lg">
<div class="fixed bottom-24 left-1/2 z-50 -translate-x-1/2 rounded-full bg-gray-900 px-5 py-2.5 text-sm text-white shadow-lg dark:bg-gray-100 dark:text-gray-900">
{toast}
</div>
{/if}
<div class="min-h-screen bg-gray-50 pb-24">
<div class="min-h-screen bg-gray-50 pb-24 dark:bg-gray-950">
<!-- Header -->
<div class="border-b border-gray-200 bg-white">
<div class="border-b border-gray-200 bg-white dark:border-gray-800 dark:bg-gray-900">
<div class="mx-auto flex max-w-3xl items-center gap-3 px-4 py-4">
<button
onclick={() => goto('/account')}
class="flex h-9 w-9 shrink-0 items-center justify-center rounded-full text-gray-500 transition hover:bg-gray-100"
class="flex h-9 w-9 shrink-0 items-center justify-center rounded-full text-gray-500 transition hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-800"
aria-label="Zurück"
>
<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
@@ -218,9 +298,9 @@
</svg>
</button>
<div class="min-w-0">
<h1 class="text-xl font-bold text-gray-900">Host-Dashboard</h1>
<h1 class="text-xl font-bold text-gray-900 dark:text-gray-100">Host-Dashboard</h1>
{#if event}
<p class="truncate text-sm text-gray-500">{event.name}</p>
<p class="truncate text-sm text-gray-500 dark:text-gray-400">{event.name}</p>
{/if}
</div>
</div>
@@ -228,71 +308,71 @@
<div class="mx-auto max-w-3xl space-y-3 p-4">
{#if loading}
<div class="py-16 text-center text-gray-400">Laden…</div>
<div class="py-16 text-center text-gray-400 dark:text-gray-500">Laden…</div>
{:else if error}
<div class="rounded-lg bg-red-50 p-4 text-sm text-red-700">{error}</div>
<div class="rounded-lg bg-red-50 p-4 text-sm text-red-700 dark:bg-red-950/30 dark:text-red-300">{error}</div>
{:else if event}
<!-- ── Statistiken ─────────────────────────────────────────────── -->
<div class="overflow-hidden rounded-xl border border-gray-200 bg-white">
<div class="overflow-hidden rounded-xl border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-800">
<button
onclick={() => (statsOpen = !statsOpen)}
class="flex w-full items-center justify-between px-5 py-4"
>
<h2 class="font-semibold text-gray-900">Statistiken</h2>
<h2 class="font-semibold text-gray-900 dark:text-gray-100">Statistiken</h2>
<svg
class="h-5 w-5 text-gray-400 transition-transform duration-200 {statsOpen ? 'rotate-180' : ''}"
class="h-5 w-5 text-gray-400 dark:text-gray-500 transition-transform duration-200 {statsOpen ? 'rotate-180' : ''}"
fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"
>
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
</svg>
</button>
<div class="overflow-hidden transition-[max-height] duration-200 {statsOpen ? 'max-h-[500px]' : 'max-h-0'}">
<div class="grid grid-cols-2 gap-3 border-t border-gray-100 p-4 sm:grid-cols-4">
<div class="rounded-xl bg-gray-50 p-4 text-center">
<p class="text-2xl font-bold text-gray-900">{users.length}</p>
<p class="mt-0.5 text-xs text-gray-500">Gäste</p>
<div class="grid grid-cols-2 gap-3 border-t border-gray-100 p-4 dark:border-gray-700 sm:grid-cols-4">
<div class="rounded-xl bg-gray-50 p-4 text-center dark:bg-gray-900/60">
<p class="text-2xl font-bold text-gray-900 dark:text-gray-100">{users.length}</p>
<p class="mt-0.5 text-xs text-gray-500 dark:text-gray-400">Gäste</p>
</div>
<div class="rounded-xl bg-gray-50 p-4 text-center">
<p class="text-2xl font-bold text-gray-900">{users.reduce((s, u) => s + u.upload_count, 0)}</p>
<p class="mt-0.5 text-xs text-gray-500">Uploads</p>
<div class="rounded-xl bg-gray-50 p-4 text-center dark:bg-gray-900/60">
<p class="text-2xl font-bold text-gray-900 dark:text-gray-100">{users.reduce((s, u) => s + u.upload_count, 0)}</p>
<p class="mt-0.5 text-xs text-gray-500 dark:text-gray-400">Uploads</p>
</div>
<div class="rounded-xl bg-gray-50 p-4 text-center">
<p class="text-2xl font-bold {event.uploads_locked ? 'text-red-600' : 'text-green-600'}">
<div class="rounded-xl bg-gray-50 p-4 text-center dark:bg-gray-900/60">
<p class="text-2xl font-bold {event.uploads_locked ? 'text-red-600 dark:text-red-400' : 'text-green-600 dark:text-green-400'}">
{event.uploads_locked ? 'Gesperrt' : 'Offen'}
</p>
<p class="mt-0.5 text-xs text-gray-500">Uploads</p>
<p class="mt-0.5 text-xs text-gray-500 dark:text-gray-400">Uploads</p>
</div>
<div class="rounded-xl bg-gray-50 p-4 text-center">
<p class="text-2xl font-bold {event.export_released ? 'text-blue-600' : 'text-gray-400'}">
<div class="rounded-xl bg-gray-50 p-4 text-center dark:bg-gray-900/60">
<p class="text-2xl font-bold {event.export_released ? 'text-blue-600 dark:text-blue-400' : 'text-gray-400 dark:text-gray-500'}">
{event.export_released ? 'Ja' : 'Nein'}
</p>
<p class="mt-0.5 text-xs text-gray-500">Freigegeben</p>
<p class="mt-0.5 text-xs text-gray-500 dark:text-gray-400">Freigegeben</p>
</div>
</div>
</div>
</div>
<!-- ── Event-Einstellungen ─────────────────────────────────────── -->
<div class="overflow-hidden rounded-xl border border-gray-200 bg-white">
<div class="overflow-hidden rounded-xl border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-800">
<button
onclick={() => (settingsOpen = !settingsOpen)}
class="flex w-full items-center justify-between px-5 py-4"
>
<h2 class="font-semibold text-gray-900">Event-Einstellungen</h2>
<h2 class="font-semibold text-gray-900 dark:text-gray-100">Event-Einstellungen</h2>
<svg
class="h-5 w-5 text-gray-400 transition-transform duration-200 {settingsOpen ? 'rotate-180' : ''}"
class="h-5 w-5 text-gray-400 dark:text-gray-500 transition-transform duration-200 {settingsOpen ? 'rotate-180' : ''}"
fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"
>
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
</svg>
</button>
<div class="overflow-hidden transition-[max-height] duration-200 {settingsOpen ? 'max-h-[500px]' : 'max-h-0'}">
<div class="flex flex-wrap gap-3 border-t border-gray-100 p-5">
<div class="flex flex-wrap gap-3 border-t border-gray-100 p-5 dark:border-gray-700">
<button
onclick={toggleEventLock}
class="rounded-lg px-4 py-2 text-sm font-medium transition
{event.uploads_locked ? 'bg-green-600 text-white hover:bg-green-700' : 'bg-amber-500 text-white hover:bg-amber-600'}"
{event.uploads_locked ? 'bg-green-600 text-white hover:bg-green-700 dark:bg-green-500 dark:hover:bg-green-400' : 'bg-amber-500 text-white hover:bg-amber-600 dark:bg-amber-500 dark:hover:bg-amber-400'}"
>
{event.uploads_locked ? 'Uploads wieder öffnen' : 'Uploads sperren'}
</button>
@@ -300,7 +380,7 @@
onclick={releaseGallery}
disabled={event.export_released}
class="rounded-lg px-4 py-2 text-sm font-medium transition
{event.export_released ? 'cursor-default bg-gray-100 text-gray-400' : 'bg-blue-600 text-white hover:bg-blue-700'}"
{event.export_released ? 'cursor-default bg-gray-100 text-gray-400 dark:bg-gray-800 dark:text-gray-500' : 'bg-blue-600 text-white hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-400'}"
>
{event.export_released ? 'Galerie bereits freigegeben' : 'Galerie freigeben'}
</button>
@@ -309,63 +389,63 @@
</div>
<!-- ── Nutzerverwaltung ───────────────────────────────────────── -->
<div class="overflow-hidden rounded-xl border border-gray-200 bg-white">
<div class="overflow-hidden rounded-xl border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-800">
<button
onclick={() => (usersOpen = !usersOpen)}
class="flex w-full items-center justify-between px-5 py-4"
>
<h2 class="font-semibold text-gray-900">Nutzerverwaltung</h2>
<h2 class="font-semibold text-gray-900 dark:text-gray-100">Nutzerverwaltung</h2>
<svg
class="h-5 w-5 text-gray-400 transition-transform duration-200 {usersOpen ? 'rotate-180' : ''}"
class="h-5 w-5 text-gray-400 dark:text-gray-500 transition-transform duration-200 {usersOpen ? 'rotate-180' : ''}"
fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"
>
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
</svg>
</button>
<div class="overflow-hidden transition-[max-height] duration-300 {usersOpen ? 'max-h-[9999px]' : 'max-h-0'}">
<div class="border-t border-gray-100">
<div class="border-t border-gray-100 dark:border-gray-700">
<!-- Search -->
<div class="px-4 py-3">
<div class="flex items-center gap-2 rounded-lg border border-gray-200 bg-gray-50 px-3 py-2">
<svg class="h-4 w-4 shrink-0 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<div class="flex items-center gap-2 rounded-lg border border-gray-200 bg-gray-50 px-3 py-2 dark:border-gray-700 dark:bg-gray-900">
<svg class="h-4 w-4 shrink-0 text-gray-400 dark:text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" />
</svg>
<input
type="search"
placeholder="Nutzer suchen…"
bind:value={userSearch}
class="min-w-0 flex-1 bg-transparent text-sm text-gray-900 placeholder-gray-400 outline-none"
class="min-w-0 flex-1 bg-transparent text-sm text-gray-900 placeholder-gray-400 outline-none dark:text-gray-100 dark:placeholder-gray-500"
/>
</div>
</div>
{#if filteredUsers.length === 0}
<p class="px-5 py-8 text-center text-sm text-gray-400">Keine Treffer.</p>
<p class="px-5 py-8 text-center text-sm text-gray-400 dark:text-gray-500">Keine Treffer.</p>
{:else}
<div class="divide-y divide-gray-100">
<div class="divide-y divide-gray-100 dark:divide-gray-700">
{#each filteredUsers as user}
<div class="flex items-center gap-3 px-5 py-3">
<div class="min-w-0 flex-1">
<div class="flex flex-wrap items-center gap-1.5">
<span class="font-medium text-gray-900">{user.display_name}</span>
<span class="font-medium text-gray-900 dark:text-gray-100">{user.display_name}</span>
{#if user.role === 'host'}
<span class="rounded-full bg-blue-100 px-2 py-0.5 text-xs font-medium text-blue-700">Host</span>
<span class="rounded-full bg-blue-100 px-2 py-0.5 text-xs font-medium text-blue-700 dark:bg-blue-900/40 dark:text-blue-200">Host</span>
{:else if user.role === 'admin'}
<span class="rounded-full bg-purple-100 px-2 py-0.5 text-xs font-medium text-purple-700">Admin</span>
<span class="rounded-full bg-purple-100 px-2 py-0.5 text-xs font-medium text-purple-700 dark:bg-purple-900/40 dark:text-purple-200">Admin</span>
{/if}
{#if user.is_banned}
<span class="rounded-full bg-red-100 px-2 py-0.5 text-xs font-medium text-red-700">Gesperrt</span>
<span class="rounded-full bg-red-100 px-2 py-0.5 text-xs font-medium text-red-700 dark:bg-red-900/40 dark:text-red-200">Gesperrt</span>
{/if}
</div>
<p class="text-xs text-gray-400">
<p class="text-xs text-gray-400 dark:text-gray-500">
{user.upload_count} Upload{user.upload_count !== 1 ? 's' : ''} · {formatBytes(user.total_upload_bytes)}
</p>
</div>
<div class="flex shrink-0 gap-1.5">
<div class="flex shrink-0 flex-wrap justify-end gap-1.5">
{#if user.role !== 'admin'}
{#if user.is_banned}
<button
onclick={() => unban(user)}
class="rounded-lg bg-gray-100 px-3 py-1.5 text-xs font-medium text-gray-700 hover:bg-gray-200"
class="rounded-lg bg-gray-100 px-3 py-1.5 text-xs font-medium text-gray-700 hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-200 dark:hover:bg-gray-600"
>
Entsperren
</button>
@@ -373,22 +453,31 @@
{#if user.role === 'guest' && (myRole === 'host' || myRole === 'admin')}
<button
onclick={() => promoteToHost(user)}
class="rounded-lg bg-blue-50 px-3 py-1.5 text-xs font-medium text-blue-700 hover:bg-blue-100"
class="rounded-lg bg-blue-50 px-3 py-1.5 text-xs font-medium text-blue-700 hover:bg-blue-100 dark:bg-blue-900/40 dark:text-blue-200 dark:hover:bg-blue-900/60"
>
Host
</button>
{/if}
{#if user.role === 'host' && myRole === 'admin'}
{#if user.role === 'host'}
<!-- Hosts may demote other Hosts (never themselves); backend enforces. -->
<button
onclick={() => demoteToGuest(user)}
class="rounded-lg bg-gray-100 px-3 py-1.5 text-xs font-medium text-gray-700 hover:bg-gray-200"
class="rounded-lg bg-gray-100 px-3 py-1.5 text-xs font-medium text-gray-700 hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-200 dark:hover:bg-gray-600"
>
Degradieren
</button>
{/if}
{#if canResetPinFor(user)}
<button
onclick={() => askResetPin(user)}
class="rounded-lg bg-amber-50 px-3 py-1.5 text-xs font-medium text-amber-700 hover:bg-amber-100 dark:bg-amber-900/40 dark:text-amber-200 dark:hover:bg-amber-900/60"
>
PIN zurücksetzen
</button>
{/if}
<button
onclick={() => openBanModal(user)}
class="rounded-lg bg-red-50 px-3 py-1.5 text-xs font-medium text-red-700 hover:bg-red-100"
class="rounded-lg bg-red-50 px-3 py-1.5 text-xs font-medium text-red-700 hover:bg-red-100 dark:bg-red-950/40 dark:text-red-300 dark:hover:bg-red-950/60"
>
Sperren
</button>

47
frontend/src/routes/join/+page.svelte
View File

@@ -86,20 +86,20 @@
}
</script>
<div class="flex min-h-screen items-center justify-center bg-gray-50 px-4">
<div class="flex min-h-screen items-center justify-center bg-gray-50 px-4 dark:bg-gray-950">
<div class="w-full max-w-sm">
{#if nameTaken}
<!-- Name-taken state: sign in with PIN or choose a different name -->
<div class="mb-5 rounded-lg border border-amber-200 bg-amber-50 p-4">
<p class="font-semibold text-amber-900">„{takenName}" ist bereits vergeben.</p>
<p class="mt-1 text-sm text-amber-800">
<div class="mb-5 rounded-lg border border-amber-200 bg-amber-50 p-4 dark:border-amber-800/60 dark:bg-amber-950/30">
<p class="font-semibold text-amber-900 dark:text-amber-200">„{takenName}" ist bereits vergeben.</p>
<p class="mt-1 text-sm text-amber-800 dark:text-amber-300/90">
Wähle einen anderen Namen, z.&nbsp;B. einen Spitznamen oder füge deinen Nachnamen hinzu
(„{takenName} M." oder „{takenName} aus Berlin").
</p>
</div>
<p class="mb-3 text-sm font-medium text-gray-700">
<p class="mb-3 text-sm font-medium text-gray-700 dark:text-gray-300">
Falls du das bist, melde dich mit deinem PIN an:
</p>
@@ -111,17 +111,17 @@
maxlength={4}
inputmode="numeric"
pattern="[0-9]*"
class="mb-3 w-full rounded-lg border border-gray-300 px-4 py-3 text-center text-2xl font-mono tracking-widest focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-200"
class="mb-3 w-full rounded-lg border border-gray-300 bg-white px-4 py-3 text-center text-2xl font-mono tracking-widest text-gray-900 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-200 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100"
/>
{#if recoveryError}
<p class="mb-3 text-sm text-red-600">{recoveryError}</p>
<p class="mb-3 text-sm text-red-600 dark:text-red-400">{recoveryError}</p>
{/if}
<button
type="submit"
disabled={recoveryLoading || recoveryPin.length < 4}
class="mb-3 w-full rounded-lg bg-blue-600 px-4 py-3 font-medium text-white transition hover:bg-blue-700 disabled:opacity-50"
class="mb-3 w-full rounded-lg bg-blue-600 px-4 py-3 font-medium text-white transition hover:bg-blue-700 disabled:opacity-50 dark:bg-blue-500 dark:hover:bg-blue-400"
>
{recoveryLoading ? 'Wird angemeldet...' : 'Anmelden'}
</button>
@@ -129,15 +129,15 @@
<button
onclick={tryDifferentName}
class="w-full rounded-lg border border-gray-300 px-4 py-3 font-medium text-gray-700 transition hover:bg-gray-50"
class="w-full rounded-lg border border-gray-300 px-4 py-3 font-medium text-gray-700 transition hover:bg-gray-50 dark:border-gray-700 dark:text-gray-300 dark:hover:bg-gray-800"
>
Anderen Namen wählen
</button>
{:else}
<!-- Normal join form -->
<h1 class="mb-2 text-center text-2xl font-bold text-gray-900">Willkommen!</h1>
<p class="mb-6 text-center text-gray-600">Gib deinen Namen ein, um dem Event beizutreten.</p>
<h1 class="mb-2 text-center text-2xl font-bold text-gray-900 dark:text-gray-100">Willkommen!</h1>
<p class="mb-6 text-center text-gray-600 dark:text-gray-400">Gib deinen Namen ein, um dem Event beizutreten.</p>
<form onsubmit={(e) => { e.preventDefault(); handleJoin(); }}>
<input
@@ -145,25 +145,24 @@
bind:value={displayName}
placeholder="Dein Name"
maxlength={50}
class="mb-3 w-full rounded-lg border border-gray-300 px-4 py-3 text-lg focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-200"
class="mb-3 w-full rounded-lg border border-gray-300 bg-white px-4 py-3 text-lg text-gray-900 placeholder-gray-400 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-200 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100 dark:placeholder-gray-500"
/>
{#if error}
<p class="mb-3 text-sm text-red-600">{error}</p>
<p class="mb-3 text-sm text-red-600 dark:text-red-400">{error}</p>
{/if}
<button
type="submit"
disabled={loading || !displayName.trim()}
class="w-full rounded-lg bg-blue-600 px-4 py-3 text-lg font-medium text-white transition hover:bg-blue-700 disabled:opacity-50"
class="w-full rounded-lg bg-blue-600 px-4 py-3 text-lg font-medium text-white transition hover:bg-blue-700 disabled:opacity-50 dark:bg-blue-500 dark:hover:bg-blue-400"
>
{loading ? 'Wird geladen...' : 'Beitreten'}
</button>
</form>
<p class="mt-4 text-center text-sm text-gray-500">
Schon dabei?
<a href="/recover" class="text-blue-600 hover:underline">Mit PIN wiederherstellen</a>
<p class="mt-4 text-center text-sm">
<a href="/recover" class="text-blue-600 hover:underline dark:text-blue-400">Ich habe bereits einen Account</a>
</p>
{/if}
@@ -172,17 +171,17 @@
{#if showPinModal}
<div class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 px-4">
<div class="w-full max-w-sm rounded-xl bg-white p-6 shadow-lg">
<h2 class="mb-2 text-xl font-bold text-gray-900">Dein Wiederherstellungs-PIN</h2>
<p class="mb-4 text-sm text-gray-600">
<div class="w-full max-w-sm rounded-xl bg-white p-6 shadow-lg dark:bg-gray-900">
<h2 class="mb-2 text-xl font-bold text-gray-900 dark:text-gray-100">Dein Wiederherstellungs-PIN</h2>
<p class="mb-4 text-sm text-gray-600 dark:text-gray-400">
Merke dir diesen PIN! Du brauchst ihn, um dein Konto auf einem anderen Gerät wiederherzustellen.
</p>
<div class="mb-4 flex items-center justify-center gap-3 rounded-lg bg-gray-100 p-4">
<span class="text-4xl font-mono font-bold tracking-widest text-gray-900">{pin}</span>
<div class="mb-4 flex items-center justify-center gap-3 rounded-lg bg-gray-100 p-4 dark:bg-gray-800">
<span class="text-4xl font-mono font-bold tracking-widest text-gray-900 dark:text-gray-100">{pin}</span>
<button
onclick={copyPin}
class="rounded-md bg-gray-200 px-3 py-1 text-sm font-medium text-gray-700 hover:bg-gray-300"
class="rounded-md bg-gray-200 px-3 py-1 text-sm font-medium text-gray-700 hover:bg-gray-300 dark:bg-gray-700 dark:text-gray-200 dark:hover:bg-gray-600"
>
{copied ? 'Kopiert!' : 'Kopieren'}
</button>
@@ -190,7 +189,7 @@
<button
onclick={goToFeed}
class="w-full rounded-lg bg-blue-600 px-4 py-3 font-medium text-white transition hover:bg-blue-700"
class="w-full rounded-lg bg-blue-600 px-4 py-3 font-medium text-white transition hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-400"
>
Weiter zur Galerie
</button>

18
frontend/src/routes/recover/+page.svelte
View File

@@ -39,10 +39,10 @@
}
</script>
<div class="flex min-h-screen items-center justify-center bg-gray-50 px-4">
<div class="flex min-h-screen items-center justify-center bg-gray-50 px-4 dark:bg-gray-950">
<div class="w-full max-w-sm">
<h1 class="mb-2 text-center text-2xl font-bold text-gray-900">Konto wiederherstellen</h1>
<p class="mb-6 text-center text-gray-600">Gib deinen Namen und deinen PIN ein.</p>
<h1 class="mb-2 text-center text-2xl font-bold text-gray-900 dark:text-gray-100">Konto wiederherstellen</h1>
<p class="mb-6 text-center text-gray-600 dark:text-gray-400">Gib deinen Namen und deinen PIN ein.</p>
<form onsubmit={(e) => { e.preventDefault(); handleRecover(); }}>
<input
@@ -50,7 +50,7 @@
bind:value={displayName}
placeholder="Dein Name"
maxlength={50}
class="mb-3 w-full rounded-lg border border-gray-300 px-4 py-3 text-lg focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-200"
class="mb-3 w-full rounded-lg border border-gray-300 bg-white px-4 py-3 text-lg text-gray-900 placeholder-gray-400 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-200 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100 dark:placeholder-gray-500"
/>
<input
type="text"
@@ -59,25 +59,25 @@
maxlength={4}
inputmode="numeric"
pattern="[0-9]*"
class="mb-3 w-full rounded-lg border border-gray-300 px-4 py-3 text-center text-2xl font-mono tracking-widest focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-200"
class="mb-3 w-full rounded-lg border border-gray-300 bg-white px-4 py-3 text-center text-2xl font-mono tracking-widest text-gray-900 placeholder-gray-400 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-200 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100 dark:placeholder-gray-500"
/>
{#if error}
<p class="mb-3 text-sm text-red-600">{error}</p>
<p class="mb-3 text-sm text-red-600 dark:text-red-400">{error}</p>
{/if}
<button
type="submit"
disabled={loading || !displayName.trim() || pin.length < 4}
class="w-full rounded-lg bg-blue-600 px-4 py-3 text-lg font-medium text-white transition hover:bg-blue-700 disabled:opacity-50"
class="w-full rounded-lg bg-blue-600 px-4 py-3 text-lg font-medium text-white transition hover:bg-blue-700 disabled:opacity-50 dark:bg-blue-500 dark:hover:bg-blue-400"
>
{loading ? 'Wird geladen...' : 'Wiederherstellen'}
</button>
</form>
<p class="mt-4 text-center text-sm text-gray-500">
<p class="mt-4 text-center text-sm text-gray-500 dark:text-gray-400">
Noch kein Konto?
<a href="/join" class="text-blue-600 hover:underline">Neu beitreten</a>
<a href="/join" class="text-blue-600 hover:underline dark:text-blue-400">Neu beitreten</a>
</p>
</div>
</div>

90
frontend/src/routes/upload/+page.svelte
View File

@@ -6,6 +6,7 @@
import { pendingFiles, pendingCaption, clearPending } from '$lib/pending-upload-store';
import { get } from 'svelte/store';
import { onMount, onDestroy } from 'svelte';
import { quotaStore, refreshQuota } from '$lib/quota-store';
import type { PendingFile } from '$lib/pending-upload-store';
interface StagedFile extends PendingFile {
@@ -17,6 +18,8 @@
let submitting = $state(false);
let captionEl: HTMLTextAreaElement;
const MAX_CAPTION_LENGTH = 2000;
// Quick-tag chips derived from caption as the user types
let captionTags = $derived.by(() => {
const matches = [...caption.matchAll(/#(\w+)/g)];
@@ -30,6 +33,7 @@
return;
}
loadQueue();
void refreshQuota();
// Pull staged files from the pending store (written by UploadSheet)
const pf = get(pendingFiles);
@@ -39,6 +43,16 @@
// Auto-focus caption textarea after a short delay (let layout settle)
setTimeout(() => captionEl?.focus(), 80);
// Revoke blob URLs if user abandons the upload page
const handleBeforeUnload = () => {
clearPending();
};
window.addEventListener('beforeunload', handleBeforeUnload);
return () => {
window.removeEventListener('beforeunload', handleBeforeUnload);
};
});
onDestroy(() => {
@@ -58,9 +72,11 @@
async function handleSubmit() {
if (stagedFiles.length === 0 || submitting) return;
if (caption.length > MAX_CAPTION_LENGTH) return;
submitting = true;
const hashtagsString = captionTags.join(',');
for (const sf of stagedFiles) {
await addToQueue(sf.file, caption, '');
await addToQueue(sf.file, caption, hashtagsString);
}
clearPending();
goto('/feed');
@@ -69,28 +85,42 @@
function isVideo(file: File): boolean {
return file.type.startsWith('video/');
}
function formatBytes(bytes: number | null | undefined): string {
if (bytes == null || bytes <= 0) return '0 MB';
const mb = bytes / (1024 * 1024);
if (mb < 1024) return `${mb.toFixed(mb < 10 ? 1 : 0)} MB`;
return `${(mb / 1024).toFixed(1)} GB`;
}
const totalStagedBytes = $derived(stagedFiles.reduce((sum, sf) => sum + sf.file.size, 0));
const quotaPercent = $derived(
$quotaStore.limit_bytes && $quotaStore.limit_bytes > 0
? Math.min(100, (($quotaStore.used_bytes + totalStagedBytes) / $quotaStore.limit_bytes) * 100)
: 0
);
</script>
<!-- Full-screen composer — bottom nav is suppressed -->
<div class="flex min-h-screen flex-col bg-white">
<div class="flex min-h-screen flex-col bg-white dark:bg-gray-950">
<!-- Header -->
<div class="flex items-center justify-between border-b border-gray-100 px-4 py-3">
<div class="flex items-center justify-between border-b border-gray-100 px-4 py-3 dark:border-gray-800">
<button
onclick={cancel}
class="flex h-9 w-9 items-center justify-center rounded-full text-gray-500 transition hover:bg-gray-100"
class="flex h-9 w-9 items-center justify-center rounded-full text-gray-500 transition hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-800"
aria-label="Abbrechen"
>
<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
</svg>
</button>
<h1 class="text-base font-semibold text-gray-900">Neuer Beitrag</h1>
<h1 class="text-base font-semibold text-gray-900 dark:text-gray-100">Neuer Beitrag</h1>
<!-- Submit button in header for desktop convenience -->
<button
onclick={handleSubmit}
disabled={stagedFiles.length === 0 || submitting}
class="rounded-lg bg-blue-600 px-4 py-1.5 text-sm font-semibold text-white transition
hover:bg-blue-700 disabled:opacity-40"
hover:bg-blue-700 disabled:opacity-40 dark:bg-blue-500 dark:hover:bg-blue-400"
>
{submitting ? 'Wird hochgeladen…' : 'Hochladen'}
</button>
@@ -101,9 +131,9 @@
{#if stagedFiles.length > 0}
<div class="flex gap-2 overflow-x-auto px-4 py-3 scrollbar-none">
{#each stagedFiles as sf, i}
<div class="relative h-20 w-20 shrink-0 overflow-hidden rounded-xl bg-gray-100">
<div class="relative h-20 w-20 shrink-0 overflow-hidden rounded-xl bg-gray-100 dark:bg-gray-800">
{#if isVideo(sf.file)}
<div class="flex h-full w-full items-center justify-center bg-gray-800">
<div class="flex h-full w-full items-center justify-center bg-gray-800 dark:bg-gray-700">
<svg class="h-7 w-7 text-white/70" fill="currentColor" viewBox="0 0 24 24">
<path d="M8 5v14l11-7z" />
</svg>
@@ -123,20 +153,20 @@
</div>
{/each}
</div>
<div class="border-b border-gray-100"></div>
<div class="border-b border-gray-100 dark:border-gray-800"></div>
{:else}
<!-- No files: prompt to go back and pick some -->
<div class="flex flex-1 flex-col items-center justify-center gap-4 p-8 text-center">
<svg class="h-16 w-16 text-gray-200" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1">
<svg class="h-16 w-16 text-gray-200 dark:text-gray-700" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1">
<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909M9 9.75h.008v.008H9V9.75zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zM6 20.25h12A2.25 2.25 0 0020.25 18V6A2.25 2.25 0 0018 3.75H6A2.25 2.25 0 003.75 6v12A2.25 2.25 0 006 20.25z" />
</svg>
<div>
<p class="font-medium text-gray-500">Keine Dateien ausgewählt</p>
<p class="mt-1 text-sm text-gray-400">Geh zurück und tippe auf den Plus-Button.</p>
<p class="font-medium text-gray-500 dark:text-gray-400">Keine Dateien ausgewählt</p>
<p class="mt-1 text-sm text-gray-400 dark:text-gray-500">Geh zurück und tippe auf den Plus-Button.</p>
</div>
<button
onclick={cancel}
class="rounded-lg border border-gray-300 px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50"
class="rounded-lg border border-gray-300 px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 dark:border-gray-700 dark:text-gray-300 dark:hover:bg-gray-800"
>
Zurück
</button>
@@ -148,34 +178,60 @@
<textarea
bind:this={captionEl}
bind:value={caption}
maxlength={MAX_CAPTION_LENGTH}
placeholder="Beschreibung hinzufügen… (#hashtags möglich)"
rows="4"
class="w-full resize-none rounded-xl border border-gray-200 bg-gray-50 px-4 py-3 text-sm text-gray-900
placeholder-gray-400 focus:border-blue-400 focus:bg-white focus:outline-none focus:ring-1 focus:ring-blue-200"
placeholder-gray-400 focus:border-blue-400 focus:bg-white focus:outline-none focus:ring-1 focus:ring-blue-200
dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 dark:placeholder-gray-500 dark:focus:bg-gray-800"
></textarea>
<div class="mt-1 text-xs text-gray-500 text-right dark:text-gray-400">
{caption.length} / {MAX_CAPTION_LENGTH}
</div>
</div>
<!-- Quick-tag chips (derived from typed caption) -->
{#if captionTags.length > 0}
<div class="flex flex-wrap gap-1.5 px-4 pt-2">
{#each captionTags as tag}
<span class="rounded-full bg-blue-50 px-2.5 py-0.5 text-xs font-medium text-blue-600">
<span class="rounded-full bg-blue-50 px-2.5 py-0.5 text-xs font-medium text-blue-600 dark:bg-blue-950/40 dark:text-blue-300">
#{tag}
</span>
{/each}
</div>
{/if}
<!-- Per-user quota — hidden when admin disabled enforcement -->
{#if $quotaStore.enabled && $quotaStore.limit_bytes != null}
<div class="px-4 pt-3 text-xs text-gray-500 dark:text-gray-400">
<div class="flex items-center justify-between">
<span>Speicher: {formatBytes($quotaStore.used_bytes + totalStagedBytes)} / {formatBytes($quotaStore.limit_bytes)}</span>
<span class:text-amber-600={quotaPercent >= 80} class:dark:text-amber-400={quotaPercent >= 80} class:text-red-600={quotaPercent >= 95} class:dark:text-red-400={quotaPercent >= 95}>
{Math.round(quotaPercent)}%
</span>
</div>
<div class="mt-1 h-1.5 overflow-hidden rounded-full bg-gray-100 dark:bg-gray-800">
<div
class="h-full transition-all"
class:bg-blue-500={quotaPercent < 80}
class:bg-amber-500={quotaPercent >= 80 && quotaPercent < 95}
class:bg-red-500={quotaPercent >= 95}
style="width: {quotaPercent}%"
></div>
</div>
</div>
{/if}
<div class="h-8"></div>
</div>
<!-- Sticky submit button at bottom (mobile-primary) -->
<div class="border-t border-gray-100 px-4 py-3">
<div class="border-t border-gray-100 px-4 py-3 dark:border-gray-800">
<button
onclick={handleSubmit}
disabled={stagedFiles.length === 0 || submitting}
class="flex w-full items-center justify-center gap-2 rounded-xl bg-blue-600 py-3.5 text-sm font-semibold
text-white transition hover:bg-blue-700 active:scale-[0.98] disabled:opacity-40"
text-white transition hover:bg-blue-700 active:scale-[0.98] disabled:opacity-40 dark:bg-blue-500 dark:hover:bg-blue-400"
>
{#if submitting}
<svg class="h-4 w-4 animate-spin" fill="none" viewBox="0 0 24 24">