iu
997ec5e6c1
Add a self-contained icon system: vendored Material Symbols registry, an <Icon> component that references a single <symbol> sprite via <use>, plus IconButton/IconSprite. Replace every emoji/Unicode glyph (logo, theme switcher, cover placeholder, like/comment counts, lightbox controls, back links) and add leading icons to key controls. Decorative icons are aria-hidden; icon-only buttons get labels; theme toggles expose aria-pressed; counters get accessible names. Recorded in openspec change material-icons-ui (all tasks complete).
66 lines
1.9 KiB
Svelte
66 lines
1.9 KiB
Svelte
<script lang="ts">
|
|
import { page } from '$app/stores';
|
|
import { goto } from '$app/navigation';
|
|
import { api } from '$lib/api';
|
|
import Icon from '$lib/components/Icon.svelte';
|
|
import { auth } from '$lib/stores/auth.svelte';
|
|
|
|
const token = $derived($page.params.token);
|
|
|
|
let info = $state<{ album_id: string; role: string; expires_at: string } | null>(null);
|
|
let error = $state('');
|
|
let busy = $state(false);
|
|
|
|
$effect(() => {
|
|
api<{ invite: typeof info }>(`/invites/${token}`)
|
|
.then((data) => (info = data.invite))
|
|
.catch((e) => (error = (e as Error).message));
|
|
});
|
|
|
|
async function accept() {
|
|
busy = true;
|
|
error = '';
|
|
try {
|
|
const data = await api<{ album_id: string }>(`/invites/${token}/accept`, {
|
|
method: 'POST'
|
|
});
|
|
goto(`/albums/${data.album_id}`);
|
|
} catch (e) {
|
|
error = (e as Error).message;
|
|
} finally {
|
|
busy = false;
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<div class="mx-auto max-w-md py-12 text-center">
|
|
<h1 class="mb-4 text-2xl font-bold">Приглашение в альбом</h1>
|
|
{#if error}
|
|
<p class="text-danger">{error}</p>
|
|
{:else if info}
|
|
<p class="text-text-muted mb-6">Вас приглашают с ролью <strong>{info.role}</strong>.</p>
|
|
{#if auth.isAuthenticated}
|
|
<button
|
|
type="button"
|
|
disabled={busy}
|
|
onclick={accept}
|
|
class="bg-primary text-primary-fg inline-flex items-center gap-2 rounded-lg px-5 py-2.5 font-medium"
|
|
>
|
|
<Icon name="check" class="size-5" />
|
|
{busy ? 'Принятие…' : 'Принять приглашение'}
|
|
</button>
|
|
{:else}
|
|
<p class="mb-4 text-sm">Войдите или зарегистрируйтесь, чтобы принять приглашение.</p>
|
|
<a
|
|
href="/login"
|
|
class="bg-primary text-primary-fg inline-flex items-center gap-2 rounded-lg px-5 py-2.5 font-medium"
|
|
>
|
|
<Icon name="login" class="size-5" />
|
|
Войти
|
|
</a>
|
|
{/if}
|
|
{:else}
|
|
<p class="text-text-muted">Загрузка…</p>
|
|
{/if}
|
|
</div>
|