fabi/EventSnap
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
43c2a0d09cae124f4a54a66b117ce1b7c58f20fa
EventSnap/frontend/src/routes/account/+page.svelte
fabi be6d56f278 feat(moderation): let a host remove a guest's photo or comment from the UI 
`DELETE /host/upload/{id}` and `DELETE /host/comment/{id}` were complete on the
backend — transactional, SSE-broadcasting, audit-logged — and had zero frontend
callers. The feed context sheet offered "Löschen" only when
`target.user_id === myUserId`, so the only lever a host actually had against an
unwanted photo was banning the uploader.

That is both disproportionate and ineffective. A ban doesn't retract what was
already posted, and it makes things strictly worse for comments: the ban check
runs BEFORE the ownership check on the guest delete route, so banning an abusive
author leaves their comment on screen and permanently undeletable by them. With
no host affordance, nobody could remove it at all.

- feed: hosts/admins get "Beitrag entfernen" on other people's posts, routed to
  the host endpoint (the guest route 403s anything the caller doesn't own) with
  moderation-specific confirm copy. Own-post "Löschen" is unchanged.
- lightbox: same for comments, via /host/comment/{id}.
- Ban semantics are deliberately untouched (USER_JOURNEYS §10 — banned users keep
  read access and cannot write). The deadlock is broken by giving the host a way
  in, not by loosening the ban.

Live role (this had to come first). `getRole()` decodes the JWT claim, but the
token is never reissued — the backend slides the session row forward and treats
the DB row as authoritative. The claim is therefore frozen for the token's
lifetime: up to 30 days. A guest promoted at the party saw no Host-Dashboard and
no moderation actions until they signed out and back in, even though
`/me/context` had been returning their real role on every page load and 4 of its
6 call sites dropped the field on the floor.

Add `role-store.ts`: seeded from the claim so there's no flash of the wrong nav,
then corrected by every `/me/context` response. Point the ad-hoc `getRole()`
callers at it (account, upload, host, admin, and the new feed gate). The host and
admin dashboards now derive `myRole` reactively, so a demotion disables their
controls immediately instead of at next login.

Tests: 04-host/moderation-ui drives the real UI — host removes a guest photo and
it's gone from /feed server-side; a plain guest is offered nothing on someone
else's post (the mirror that keeps the first test honest); a promoted guest gains
the dashboard on reload while their token still carries `role: guest`; and a host
removes the comment of an already-banned guest, asserting first that the author's
own delete 403s so the deadlock is real.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
2026-07-27 22:33:33 +02:00

624 lines
22 KiB
Svelte
Raw Blame History

<script lang="ts">
import { goto } from '$app/navigation';
import { getToken, getDisplayName, getExpiry, clearAuth, currentPin } from '$lib/auth';
import { role, setRole } from '$lib/role-store';
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 { focusTrap } from '$lib/actions/focus-trap';
import { avatarPalette, initials } from '$lib/avatar';
import ConfirmSheet from '$lib/components/ConfirmSheet.svelte';
import { vibrate } from '$lib/haptics';
import type { MeContextDto } from '$lib/types';
let displayName = $state<string | null>(null);
let expiry = $state<Date | null>(null);
let pinCopied = $state(false);
let leaveConfirmOpen = $state(false);
let leaveEverywhere = $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();
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);
setRole(ctx.role);
} 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;
vibrate([0, 8, 60, 8]);
setTimeout(() => (pinCopied = false), 2000);
}
async function handleLogout(everywhere = false) {
// Session-delete is best-effort: the JWT is going away on this device either way,
// so a network failure shouldn't block the user from leaving the event.
// `everywhere` revokes ALL of this user's sessions (other phones/laptops recovered
// via PIN), not just this device.
try {
await api.delete(everywhere ? '/sessions' : '/session');
} catch {
/* best-effort logout */
}
// 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 {
/* best-effort cleanup */
}
// Note: export-status teardown is wired via the onClearAuth hook in
// export-status-store, so it runs for both this explicit path and api.ts's 401.
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 dark:bg-red-900/40 dark:text-red-200';
case 'host':
return 'bg-purple-100 text-purple-700 dark:bg-purple-900/40 dark:text-purple-200';
default:
return 'bg-blue-100 text-blue-700 dark:bg-blue-900/40 dark:text-blue-200';
}
}
</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 pt-[env(safe-area-inset-top)] 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="card p-5">
<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
{avatarPalette(displayName)}"
>
{initials(displayName)}
</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="card overflow-hidden">
<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-primary-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-primary-200 bg-primary-50 p-5 dark:border-primary-800/60 dark:bg-primary-950/30"
>
<h2 class="mb-1 font-semibold text-primary-800 dark:text-primary-200">
Wiederherstellungs-PIN
</h2>
<p class="mb-3 text-sm text-primary-700 dark:text-primary-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="inline-flex min-h-11 items-center rounded-md bg-primary-100 px-4 py-2 text-sm font-medium text-primary-800 transition hover:bg-primary-200 dark:bg-primary-900/40 dark:text-primary-200 dark:hover:bg-primary-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="card overflow-hidden">
<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' }, { value: 'light', label: 'Hell' }, { value: 'dark', label: 'Dunkel' }] 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'}"
>
<!-- SVG icons render consistently everywhere (emoji show as tofu on some Android). -->
<svg
class="h-6 w-6"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="1.5"
aria-hidden="true"
>
{#if opt.value === 'system'}
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M9 17.25v1.007a3 3 0 0 1-.879 2.122L7.5 21h9l-.621-.621A3 3 0 0 1 15 18.257V17.25m6-12V15a2.25 2.25 0 0 1-2.25 2.25H5.25A2.25 2.25 0 0 1 3 15V5.25A2.25 2.25 0 0 1 5.25 3h13.5A2.25 2.25 0 0 1 21 5.25Z"
/>
{:else if opt.value === 'light'}
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M12 3v2.25m6.364.386-1.591 1.591M21 12h-2.25m-.386 6.364-1.591-1.591M12 18.75V21m-4.773-4.227-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0Z"
/>
{:else}
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M21.752 15.002A9.718 9.718 0 0 1 18 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 0 0 3 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 0 0 9.002-5.998Z"
/>
{/if}
</svg>
<span class="font-medium">{opt.label}</span>
</button>
{/each}
</div>
</div>
<!-- Data mode -->
<div class="card overflow-hidden">
<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 — staff-only (host/admin); guests never see the
server-derived storage figures. -->
{#if ($role === 'host' || $role === 'admin') && $quotaStore.enabled && $quotaStore.limit_bytes != null}
<div class="card p-5">
<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="card p-5">
<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="card overflow-hidden">
<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 (this device) -->
<button
onclick={() => {
leaveEverywhere = false;
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>
<!-- Sign out everywhere (all devices) -->
<button
onclick={() => {
leaveEverywhere = true;
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="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z"
/>
</svg>
<span class="flex-1 text-sm font-medium text-red-600 dark:text-red-400"
>Auf allen Geräten abmelden</span
>
</button>
</div>
</div>
</div>
<!-- Data-mode warning bottom sheet — shown once when the user picks Original. -->
{#if dataModeWarningOpen}
<button
type="button"
class="fixed inset-0 z-50 bg-black/40"
aria-label="Schließen"
tabindex="-1"
onclick={() => (dataModeWarningOpen = false)}
></button>
<div
class="fixed inset-x-0 bottom-0 z-50 rounded-t-2xl bg-white px-5 pt-6 dark:bg-gray-900"
style="padding-bottom: calc(env(safe-area-inset-bottom) + 1.5rem)"
role="dialog"
aria-modal="true"
aria-labelledby="data-mode-title"
use:focusTrap={{ onclose: () => (dataModeWarningOpen = false) }}
>
<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
id="data-mode-title"
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="btn btn-primary btn-block mb-3">
Aktivieren
</button>
<button onclick={() => (dataModeWarningOpen = false)} class="btn btn-secondary btn-block">
Abbrechen
</button>
</div>
{/if}
<!-- Leave-confirm bottom sheet -->
<ConfirmSheet
open={leaveConfirmOpen}
title={leaveEverywhere ? 'Auf allen Geräten abmelden?' : 'Event verlassen?'}
message={leaveEverywhere
? 'Alle deine Sitzungen (auch auf anderen Geräten) werden beendet. Mit deinem PIN kannst du jederzeit zurückkehren.'
: 'Du wirst abgemeldet. Mit deinem PIN kannst du jederzeit zurückkehren.'}
confirmLabel="Abmelden"
tone="danger"
onConfirm={() => handleLogout(leaveEverywhere)}
onCancel={() => (leaveConfirmOpen = false)}
/>
Reference in New Issue View Git Blame Copy Permalink