1cdab21514
- account/+page.svelte: remove `aria-hidden="true"` from the leave-confirm and data-mode-warning bottom-sheet backdrops. The attribute cascaded into the dialog children, making the inner Abmelden/Aktivieren/Abbrechen buttons unreachable in the accessibility tree (and to Playwright's `getByRole`). Discovered while writing the E2E suite; the visual layout is unchanged. - join/+page.svelte: bump the PIN-copy button from `py-1` (28px tall) to `min-h-11 min-w-11 py-2` so it clears the ≥44px touch-target floor on mobile. Touch-target audit revealed the gap. - data-testid attributes on stable interactive elements (join name input, join submit, PIN modal + copy + continue, recovery PIN + submit + try- different-name, admin login password + submit + error, recover name + PIN + submit + error, upload header submit + sticky submit + caption textarea). Targeted at ~20 spots where semantic locators were ambiguous (e.g. two "Hochladen" buttons on /upload, German strings that may iterate). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
452 lines
20 KiB
Svelte
452 lines
20 KiB
Svelte
<script lang="ts">
|
|
import { goto } from '$app/navigation';
|
|
import { getToken, getDisplayName, getExpiry, getRole, clearAuth, currentPin } from '$lib/auth';
|
|
import { clearQueue } from '$lib/upload-queue';
|
|
import { api } from '$lib/api';
|
|
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 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);
|
|
|
|
// `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;
|
|
}
|
|
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() {
|
|
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');
|
|
}
|
|
|
|
function formatDate(d: Date): string {
|
|
return d.toLocaleDateString('de-DE', { day: '2-digit', month: 'long', year: 'numeric' });
|
|
}
|
|
|
|
function roleLabel(r: string | null): string {
|
|
switch (r) {
|
|
case 'admin': return 'Admin';
|
|
case 'host': return 'Gastgeber';
|
|
default: return 'Gast';
|
|
}
|
|
}
|
|
|
|
function roleColor(r: string | null): string {
|
|
switch (r) {
|
|
case 'admin': return 'bg-red-100 text-red-700';
|
|
case 'host': return 'bg-purple-100 text-purple-700';
|
|
default: return 'bg-blue-100 text-blue-700';
|
|
}
|
|
}
|
|
|
|
function avatarColor(name: string | null): string {
|
|
if (!name) return 'bg-gray-100 text-gray-500';
|
|
const COLORS = ['bg-blue-100 text-blue-700','bg-purple-100 text-purple-700','bg-green-100 text-green-700','bg-amber-100 text-amber-700','bg-rose-100 text-rose-700'];
|
|
let hash = 0;
|
|
for (const ch of name) hash = (hash * 31 + ch.charCodeAt(0)) & 0xff;
|
|
return COLORS[hash % COLORS.length];
|
|
}
|
|
</script>
|
|
|
|
<div class="min-h-screen bg-gray-50 pb-24 dark:bg-gray-950">
|
|
<!-- Header -->
|
|
<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 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 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
|
|
{avatarColor(displayName)}"
|
|
>
|
|
{displayName ? displayName[0].toUpperCase() : '?'}
|
|
</div>
|
|
<div class="min-w-0">
|
|
<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 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 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 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 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 dark:border-gray-700 dark:hover:bg-gray-700/50"
|
|
>
|
|
<!-- Shield icon -->
|
|
<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 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>
|
|
{/if}
|
|
</div>
|
|
{/if}
|
|
|
|
<!-- PIN card -->
|
|
<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 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 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 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 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 dark:hover:bg-gray-700/50"
|
|
>
|
|
<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 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>
|
|
|
|
<!-- 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 dark:border-gray-700 dark:hover:bg-red-950/30"
|
|
>
|
|
<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 dark:text-red-400">Event verlassen</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 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)}>
|
|
<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">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={confirmOriginalMode}
|
|
class="mb-3 w-full rounded-xl bg-blue-600 py-3 text-sm font-semibold text-white transition hover:bg-blue-700"
|
|
>
|
|
Aktivieren
|
|
</button>
|
|
<button
|
|
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)}>
|
|
<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>
|
|
</div>
|
|
</div>
|
|
{/if}
|