feat: implement shared-album multi-user photo album
Backend (Go/Gin/pgx): env config, pgx pool with retries, Garage S3 client (path-style, region garage), embedded golang-migrate migrations, JWT auth with refresh rotation, albums CRUD, members/roles/invites with no-escalation matrix, photo upload + async imaging/goexif WebP variants, cursor pagination, presigned URLs, likes/comments, SSE hub (album + personal), notifications, share links. Frontend (SvelteKit 2 + Svelte 5 + Tailwind v4): API wrapper with 401 refresh, auth store, all screens, Uploader/PhotoGrid/Lightbox/Comments, SSE client with reconnect + REST catch-up, three themes + system via data-theme. Deploy without Docker: Makefile builds the frontend into backend/static and embeds it (go:embed) into a single statically linked binary; systemd unit and nginx SSE example included. Use gen2brain/webp (-tags nodynamic) instead of cgo kolesa-team/go-webp to keep CGO_ENABLED=0 static builds; design.md/proposal.md updated accordingly.
This commit is contained in:
@@ -0,0 +1,53 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
import { goto } from '$app/navigation';
|
||||
import '../app.css';
|
||||
import ThemeSwitcher from '$lib/components/ThemeSwitcher.svelte';
|
||||
import { auth } from '$lib/stores/auth.svelte';
|
||||
import { theme } from '$lib/stores/theme.svelte';
|
||||
import { authApi } from '$lib/api';
|
||||
|
||||
let { children } = $props();
|
||||
|
||||
onMount(() => {
|
||||
theme.init();
|
||||
if (auth.isAuthenticated && !auth.user) {
|
||||
authApi
|
||||
.me()
|
||||
.then((data) => auth.setUser(data.user))
|
||||
.catch(() => {});
|
||||
}
|
||||
});
|
||||
|
||||
async function logout() {
|
||||
if (auth.refresh) {
|
||||
await authApi.logout(auth.refresh).catch(() => {});
|
||||
}
|
||||
auth.clear();
|
||||
goto('/login');
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="bg-bg text-text min-h-screen">
|
||||
<header class="border-border bg-bg-elevated border-b">
|
||||
<div class="mx-auto flex max-w-6xl items-center justify-between gap-4 px-4 py-3">
|
||||
<a href="/" class="text-lg font-semibold">📷 Galo</a>
|
||||
<div class="flex items-center gap-3">
|
||||
{#if auth.isAuthenticated}
|
||||
<span class="text-text-muted hidden text-sm sm:inline">{auth.user?.name ?? ''}</span>
|
||||
<button
|
||||
type="button"
|
||||
class="text-text-muted hover:text-text text-sm"
|
||||
onclick={logout}>Выйти</button
|
||||
>
|
||||
{:else}
|
||||
<a href="/login" class="text-text-muted hover:text-text text-sm">Войти</a>
|
||||
{/if}
|
||||
<ThemeSwitcher />
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<main class="mx-auto max-w-6xl px-4 py-6">
|
||||
{@render children()}
|
||||
</main>
|
||||
</div>
|
||||
@@ -0,0 +1,2 @@
|
||||
export const ssr = false;
|
||||
export const prerender = false;
|
||||
@@ -0,0 +1,91 @@
|
||||
<script lang="ts">
|
||||
import { api } from '$lib/api';
|
||||
import { auth } from '$lib/stores/auth.svelte';
|
||||
import type { Album } from '$lib/types';
|
||||
|
||||
let albums = $state<Album[]>([]);
|
||||
let loading = $state(true);
|
||||
let title = $state('');
|
||||
let error = $state('');
|
||||
|
||||
async function load() {
|
||||
if (!auth.isAuthenticated) {
|
||||
loading = false;
|
||||
return;
|
||||
}
|
||||
try {
|
||||
const data = await api<{ albums: Album[] }>('/albums');
|
||||
albums = data.albums;
|
||||
} catch (e) {
|
||||
error = (e as Error).message;
|
||||
} finally {
|
||||
loading = false;
|
||||
}
|
||||
}
|
||||
|
||||
$effect(() => {
|
||||
load();
|
||||
});
|
||||
|
||||
async function create(ev: Event) {
|
||||
ev.preventDefault();
|
||||
if (!title.trim()) return;
|
||||
try {
|
||||
const data = await api<{ album: Album }>('/albums', {
|
||||
method: 'POST',
|
||||
body: { title }
|
||||
});
|
||||
albums = [data.album, ...albums];
|
||||
title = '';
|
||||
} catch (e) {
|
||||
error = (e as Error).message;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if !auth.isAuthenticated}
|
||||
<div class="py-16 text-center">
|
||||
<h1 class="mb-2 text-2xl font-bold">Общие фотоальбомы</h1>
|
||||
<p class="text-text-muted mb-6">Войдите, чтобы создавать альбомы и делиться фотографиями.</p>
|
||||
<a href="/login" class="bg-primary text-primary-fg rounded-lg px-5 py-2.5 font-medium">Войти</a>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="mb-6 flex items-center justify-between gap-4">
|
||||
<h1 class="text-2xl font-bold">Мои альбомы</h1>
|
||||
<form class="flex gap-2" onsubmit={create}>
|
||||
<input
|
||||
bind:value={title}
|
||||
placeholder="Название альбома"
|
||||
class="border-border bg-bg-elevated text-text rounded-lg border px-3 py-2 text-sm"
|
||||
/>
|
||||
<button class="bg-primary text-primary-fg rounded-lg px-4 py-2 text-sm" type="submit"
|
||||
>Создать</button
|
||||
>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
{#if error}<p class="text-danger mb-4 text-sm">{error}</p>{/if}
|
||||
|
||||
{#if loading}
|
||||
<p class="text-text-muted">Загрузка…</p>
|
||||
{:else if albums.length === 0}
|
||||
<p class="text-text-muted">Альбомов пока нет. Создайте первый.</p>
|
||||
{:else}
|
||||
<ul class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
|
||||
{#each albums as album (album.id)}
|
||||
<li>
|
||||
<a
|
||||
href="/albums/{album.id}"
|
||||
class="border-border bg-bg-elevated hover:border-primary block overflow-hidden rounded-xl border transition-colors"
|
||||
>
|
||||
<div class="bg-bg-muted flex aspect-video items-center justify-center text-4xl">🖼️</div>
|
||||
<div class="p-4">
|
||||
<h2 class="text-text font-semibold">{album.title}</h2>
|
||||
<p class="text-text-muted line-clamp-2 text-sm">{album.description}</p>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
{/if}
|
||||
{/if}
|
||||
@@ -0,0 +1,176 @@
|
||||
<script lang="ts">
|
||||
import { page } from '$app/stores';
|
||||
import { api } from '$lib/api';
|
||||
import PhotoGrid from '$lib/components/PhotoGrid.svelte';
|
||||
import Lightbox from '$lib/components/Lightbox.svelte';
|
||||
import Uploader from '$lib/components/Uploader.svelte';
|
||||
import { auth } from '$lib/stores/auth.svelte';
|
||||
import { SSEClient, type SSEEvent } from '$lib/sse';
|
||||
import type { Album, Photo } from '$lib/types';
|
||||
|
||||
const albumId = $derived($page.params.id);
|
||||
|
||||
let album = $state<Album | null>(null);
|
||||
let role = $state('');
|
||||
let photos = $state<Photo[]>([]);
|
||||
let nextCursor = $state('');
|
||||
let loading = $state(true);
|
||||
let error = $state('');
|
||||
let lightboxIndex = $state(-1);
|
||||
|
||||
let canUpload = $derived(['owner', 'admin', 'editor', 'member'].includes(role));
|
||||
|
||||
async function loadAlbum() {
|
||||
const data = await api<{ album: Album; role: string }>(`/albums/${albumId}`);
|
||||
album = data.album;
|
||||
role = data.role;
|
||||
}
|
||||
|
||||
async function loadPhotos() {
|
||||
const data = await api<{ photos: Photo[]; next_cursor: string }>(
|
||||
`/albums/${albumId}/photos`
|
||||
);
|
||||
photos = data.photos;
|
||||
nextCursor = data.next_cursor;
|
||||
}
|
||||
|
||||
async function loadMore() {
|
||||
if (!nextCursor) return;
|
||||
const data = await api<{ photos: Photo[]; next_cursor: string }>(
|
||||
`/albums/${albumId}/photos?cursor=${encodeURIComponent(nextCursor)}`
|
||||
);
|
||||
photos = [...photos, ...data.photos];
|
||||
nextCursor = data.next_cursor;
|
||||
}
|
||||
|
||||
$effect(() => {
|
||||
const id = albumId;
|
||||
loading = true;
|
||||
error = '';
|
||||
Promise.all([loadAlbum(), loadPhotos()])
|
||||
.catch((e) => (error = (e as Error).message))
|
||||
.finally(() => (loading = false));
|
||||
});
|
||||
|
||||
let client: SSEClient | null = null;
|
||||
|
||||
$effect(() => {
|
||||
const id = albumId;
|
||||
if (!auth.access) return;
|
||||
client = new SSEClient({
|
||||
path: `/api/sse/albums/${id}`,
|
||||
onEvent: handleEvent,
|
||||
onReconnect: () => loadPhotos()
|
||||
});
|
||||
client.connect(auth.access);
|
||||
return () => {
|
||||
client?.close();
|
||||
client = null;
|
||||
};
|
||||
});
|
||||
|
||||
function handleEvent(ev: SSEEvent) {
|
||||
const data = ev.data as Record<string, unknown>;
|
||||
switch (ev.type) {
|
||||
case 'photo.created': {
|
||||
const photo = data as unknown as Photo;
|
||||
if (photos.some((p) => p.id === photo.id)) {
|
||||
photos = photos.map((p) => (p.id === photo.id ? photo : p));
|
||||
} else {
|
||||
photos = [photo, ...photos];
|
||||
}
|
||||
break;
|
||||
}
|
||||
case 'photo.deleted': {
|
||||
photos = photos.filter((p) => p.id !== data.id);
|
||||
break;
|
||||
}
|
||||
case 'like.added': {
|
||||
photos = photos.map((p) =>
|
||||
p.id === data.photo_id
|
||||
? { ...p, likes_count: p.likes_count + 1, liked_by_me: data.user_id === auth.user?.id || p.liked_by_me }
|
||||
: p
|
||||
);
|
||||
break;
|
||||
}
|
||||
case 'like.removed': {
|
||||
photos = photos.map((p) =>
|
||||
p.id === data.photo_id
|
||||
? { ...p, likes_count: Math.max(0, p.likes_count - 1), liked_by_me: false }
|
||||
: p
|
||||
);
|
||||
break;
|
||||
}
|
||||
case 'comment.created': {
|
||||
const comment = data as unknown as { photo_id: string };
|
||||
photos = photos.map((p) =>
|
||||
p.id === comment.photo_id ? { ...p, comments_count: p.comments_count + 1 } : p
|
||||
);
|
||||
break;
|
||||
}
|
||||
case 'album.updated': {
|
||||
loadAlbum().catch(() => {});
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if loading}
|
||||
<p class="text-text-muted">Загрузка…</p>
|
||||
{:else if error}
|
||||
<p class="text-danger">{error}</p>
|
||||
{:else if album}
|
||||
<div class="mb-6 flex items-start justify-between gap-4">
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold">{album.title}</h1>
|
||||
<p class="text-text-muted">{album.description}</p>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<a
|
||||
href="/albums/{albumId}/members"
|
||||
class="border-border text-text rounded-lg border px-3 py-2 text-sm">Участники</a
|
||||
>
|
||||
{#if role === 'owner' || role === 'admin'}
|
||||
<a
|
||||
href="/albums/{albumId}/settings"
|
||||
class="border-border text-text rounded-lg border px-3 py-2 text-sm">Настройки</a
|
||||
>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if canUpload}
|
||||
<div class="mb-6">
|
||||
<Uploader
|
||||
{albumId}
|
||||
onUploaded={(created) => {
|
||||
for (const p of created) {
|
||||
if (!photos.some((x) => x.id === p.id)) photos = [p, ...photos];
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<PhotoGrid {photos} onOpen={(i) => (lightboxIndex = i)} />
|
||||
|
||||
{#if nextCursor}
|
||||
<div class="mt-6 text-center">
|
||||
<button
|
||||
type="button"
|
||||
class="border-border text-text rounded-lg border px-4 py-2 text-sm"
|
||||
onclick={loadMore}>Показать ещё</button
|
||||
>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if lightboxIndex >= 0}
|
||||
<Lightbox
|
||||
{photos}
|
||||
index={lightboxIndex}
|
||||
onClose={() => (lightboxIndex = -1)}
|
||||
onIndexChange={(i) => (lightboxIndex = i)}
|
||||
/>
|
||||
{/if}
|
||||
{/if}
|
||||
@@ -0,0 +1,158 @@
|
||||
<script lang="ts">
|
||||
import { page } from '$app/stores';
|
||||
import { api } from '$lib/api';
|
||||
import { auth } from '$lib/stores/auth.svelte';
|
||||
import type { Album, AlbumMember } from '$lib/types';
|
||||
|
||||
const albumId = $derived($page.params.id);
|
||||
|
||||
let members = $state<AlbumMember[]>([]);
|
||||
let role = $state('');
|
||||
let inviteRole = $state('member');
|
||||
let inviteUses = $state(1);
|
||||
let inviteExpires = $state('168h');
|
||||
let inviteUrl = $state('');
|
||||
let error = $state('');
|
||||
|
||||
const assignableRoles = $derived(
|
||||
role === 'owner'
|
||||
? ['admin', 'editor', 'member', 'viewer']
|
||||
: role === 'admin'
|
||||
? ['editor', 'member', 'viewer']
|
||||
: []
|
||||
);
|
||||
const inviteRoles = $derived(role === 'owner' ? ['admin', 'editor', 'member', 'viewer'] : ['member', 'viewer']);
|
||||
|
||||
async function load() {
|
||||
try {
|
||||
const [membersData, albumData] = await Promise.all([
|
||||
api<{ members: AlbumMember[] }>(`/albums/${albumId}/members`),
|
||||
api<{ album: Album; role: string }>(`/albums/${albumId}`)
|
||||
]);
|
||||
members = membersData.members;
|
||||
role = albumData.role;
|
||||
} catch (e) {
|
||||
error = (e as Error).message;
|
||||
}
|
||||
}
|
||||
|
||||
$effect(() => {
|
||||
load();
|
||||
});
|
||||
|
||||
async function invite(ev: Event) {
|
||||
ev.preventDefault();
|
||||
error = '';
|
||||
try {
|
||||
const data = await api<{ invite: { token: string } }>(`/albums/${albumId}/invites`, {
|
||||
method: 'POST',
|
||||
body: { role: inviteRole, expires_in: inviteExpires, max_uses: inviteUses }
|
||||
});
|
||||
inviteUrl = `${location.origin}/invites/${data.invite.token}`;
|
||||
} catch (e) {
|
||||
error = (e as Error).message;
|
||||
}
|
||||
}
|
||||
|
||||
async function changeRole(userId: string, newRole: string) {
|
||||
try {
|
||||
await api(`/albums/${albumId}/members/${userId}`, {
|
||||
method: 'PATCH',
|
||||
body: { role: newRole }
|
||||
});
|
||||
await load();
|
||||
} catch (e) {
|
||||
error = (e as Error).message;
|
||||
}
|
||||
}
|
||||
|
||||
async function removeMember(userId: string) {
|
||||
try {
|
||||
await api(`/albums/${albumId}/members/${userId}`, { method: 'DELETE' });
|
||||
await load();
|
||||
} catch (e) {
|
||||
error = (e as Error).message;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="mb-6 flex items-center justify-between">
|
||||
<h1 class="text-2xl font-bold">Участники</h1>
|
||||
<a href="/albums/{albumId}" class="text-primary text-sm">← К альбому</a>
|
||||
</div>
|
||||
|
||||
{#if error}<p class="text-danger mb-4 text-sm">{error}</p>{/if}
|
||||
|
||||
<ul class="mb-8 divide-y divide-border border-border rounded-xl border">
|
||||
<li class="bg-bg-muted flex items-center justify-between px-4 py-3">
|
||||
<span class="font-medium">Владелец</span>
|
||||
</li>
|
||||
{#each members as member (member.user_id)}
|
||||
<li class="flex items-center justify-between gap-4 px-4 py-3">
|
||||
<span class="text-text"
|
||||
>{member.user.name} <span class="text-text-muted text-sm">({member.user.email})</span></span
|
||||
>
|
||||
<div class="flex items-center gap-2">
|
||||
{#if assignableRoles.length > 0}
|
||||
<select
|
||||
value={member.role}
|
||||
onchange={(e) => changeRole(member.user_id, e.currentTarget.value)}
|
||||
class="border-border bg-bg-elevated text-text rounded-lg border px-2 py-1 text-sm"
|
||||
>
|
||||
{#each Array.from(new Set([member.role, ...assignableRoles])) as r}
|
||||
<option value={r}>{r}</option>
|
||||
{/each}
|
||||
</select>
|
||||
<button
|
||||
type="button"
|
||||
class="text-danger text-sm"
|
||||
onclick={() => removeMember(member.user_id)}>Удалить</button
|
||||
>
|
||||
{:else}
|
||||
<span class="text-text-muted text-sm">{member.role}</span>
|
||||
{/if}
|
||||
</div>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
|
||||
{#if assignableRoles.length > 0}
|
||||
<form class="border-border bg-bg-elevated space-y-3 rounded-xl border p-4" onsubmit={invite}>
|
||||
<h2 class="font-semibold">Пригласить</h2>
|
||||
<div class="flex flex-wrap gap-3">
|
||||
<label class="text-sm">
|
||||
<span class="text-text-muted mb-1 block">Роль</span>
|
||||
<select
|
||||
bind:value={inviteRole}
|
||||
class="border-border bg-bg text-text rounded-lg border px-2 py-1.5"
|
||||
>
|
||||
{#each inviteRoles as r}
|
||||
<option value={r}>{r}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</label>
|
||||
<label class="text-sm">
|
||||
<span class="text-text-muted mb-1 block">Использований</span>
|
||||
<input
|
||||
type="number"
|
||||
min="1"
|
||||
bind:value={inviteUses}
|
||||
class="border-border bg-bg text-text w-24 rounded-lg border px-2 py-1.5"
|
||||
/>
|
||||
</label>
|
||||
<label class="text-sm">
|
||||
<span class="text-text-muted mb-1 block">Срок</span>
|
||||
<input
|
||||
bind:value={inviteExpires}
|
||||
class="border-border bg-bg text-text w-32 rounded-lg border px-2 py-1.5"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
<button class="bg-primary text-primary-fg rounded-lg px-4 py-2 text-sm" type="submit"
|
||||
>Создать ссылку</button
|
||||
>
|
||||
{#if inviteUrl}
|
||||
<p class="text-text-muted break-all text-sm">Ссылка: <a class="text-primary" href={inviteUrl}>{inviteUrl}</a></p>
|
||||
{/if}
|
||||
</form>
|
||||
{/if}
|
||||
@@ -0,0 +1,143 @@
|
||||
<script lang="ts">
|
||||
import { page } from '$app/stores';
|
||||
import { goto } from '$app/navigation';
|
||||
import { api } from '$lib/api';
|
||||
import type { Album, ShareLink } from '$lib/types';
|
||||
|
||||
const albumId = $derived($page.params.id);
|
||||
|
||||
let album = $state<Album | null>(null);
|
||||
let shareLinks = $state<ShareLink[]>([]);
|
||||
let title = $state('');
|
||||
let description = $state('');
|
||||
let expiresIn = $state('168h');
|
||||
let error = $state('');
|
||||
let saved = $state(false);
|
||||
|
||||
async function load() {
|
||||
try {
|
||||
const [albumData, linksData] = await Promise.all([
|
||||
api<{ album: Album }>(`/albums/${albumId}`),
|
||||
api<{ share_links: ShareLink[] }>(`/albums/${albumId}/share`)
|
||||
]);
|
||||
album = albumData.album;
|
||||
title = album.title;
|
||||
description = album.description;
|
||||
shareLinks = linksData.share_links;
|
||||
} catch (e) {
|
||||
error = (e as Error).message;
|
||||
}
|
||||
}
|
||||
|
||||
$effect(() => {
|
||||
load();
|
||||
});
|
||||
|
||||
async function save(ev: Event) {
|
||||
ev.preventDefault();
|
||||
error = '';
|
||||
saved = false;
|
||||
try {
|
||||
const data = await api<{ album: Album }>(`/albums/${albumId}`, {
|
||||
method: 'PATCH',
|
||||
body: { title, description }
|
||||
});
|
||||
album = data.album;
|
||||
saved = true;
|
||||
} catch (e) {
|
||||
error = (e as Error).message;
|
||||
}
|
||||
}
|
||||
|
||||
async function createLink(ev: Event) {
|
||||
ev.preventDefault();
|
||||
try {
|
||||
await api(`/albums/${albumId}/share`, { method: 'POST', body: { expires_in: expiresIn } });
|
||||
await load();
|
||||
} catch (e) {
|
||||
error = (e as Error).message;
|
||||
}
|
||||
}
|
||||
|
||||
async function revoke(id: string) {
|
||||
try {
|
||||
await api(`/albums/${albumId}/share/${id}`, { method: 'DELETE' });
|
||||
shareLinks = shareLinks.filter((l) => l.id !== id);
|
||||
} catch (e) {
|
||||
error = (e as Error).message;
|
||||
}
|
||||
}
|
||||
|
||||
async function removeAlbum() {
|
||||
if (!confirm('Удалить альбом вместе с фото?')) return;
|
||||
try {
|
||||
await api(`/albums/${albumId}`, { method: 'DELETE' });
|
||||
goto('/');
|
||||
} catch (e) {
|
||||
error = (e as Error).message;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="mb-6 flex items-center justify-between">
|
||||
<h1 class="text-2xl font-bold">Настройки</h1>
|
||||
<a href="/albums/{albumId}" class="text-primary text-sm">← К альбому</a>
|
||||
</div>
|
||||
|
||||
{#if error}<p class="text-danger mb-4 text-sm">{error}</p>{/if}
|
||||
|
||||
<form class="border-border bg-bg-elevated mb-6 space-y-3 rounded-xl border p-4" onsubmit={save}>
|
||||
<h2 class="font-semibold">Альбом</h2>
|
||||
<label class="block">
|
||||
<span class="text-text-muted mb-1 block text-sm">Название</span>
|
||||
<input
|
||||
bind:value={title}
|
||||
class="border-border bg-bg text-text w-full rounded-lg border px-3 py-2"
|
||||
/>
|
||||
</label>
|
||||
<label class="block">
|
||||
<span class="text-text-muted mb-1 block text-sm">Описание</span>
|
||||
<textarea
|
||||
bind:value={description}
|
||||
rows="3"
|
||||
class="border-border bg-bg text-text w-full rounded-lg border px-3 py-2"
|
||||
></textarea>
|
||||
</label>
|
||||
<button class="bg-primary text-primary-fg rounded-lg px-4 py-2 text-sm" type="submit">Сохранить</button>
|
||||
{#if saved}<span class="text-success ml-3 text-sm">Сохранено</span>{/if}
|
||||
</form>
|
||||
|
||||
<div class="border-border bg-bg-elevated mb-6 space-y-3 rounded-xl border p-4">
|
||||
<h2 class="font-semibold">Ссылки для просмотра</h2>
|
||||
<form class="flex items-end gap-2" onsubmit={createLink}>
|
||||
<label class="text-sm">
|
||||
<span class="text-text-muted mb-1 block">Срок действия</span>
|
||||
<input
|
||||
bind:value={expiresIn}
|
||||
class="border-border bg-bg text-text w-32 rounded-lg border px-2 py-1.5"
|
||||
/>
|
||||
</label>
|
||||
<button class="bg-primary text-primary-fg rounded-lg px-4 py-2 text-sm" type="submit"
|
||||
>Создать ссылку</button
|
||||
>
|
||||
</form>
|
||||
<ul class="divide-border divide-y">
|
||||
{#each shareLinks as link (link.id)}
|
||||
<li class="flex items-center justify-between gap-2 py-2 text-sm">
|
||||
<span class="text-text-muted truncate">
|
||||
{link.revoked_at ? 'отозвана' : 'до ' + new Date(link.expires_at).toLocaleString()}
|
||||
· <a class="text-primary" href="/share/{link.token}">/share/{link.token}</a>
|
||||
</span>
|
||||
{#if !link.revoked_at}
|
||||
<button type="button" class="text-danger" onclick={() => revoke(link.id)}>Отозвать</button>
|
||||
{/if}
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
class="border-danger text-danger rounded-lg border px-4 py-2 text-sm"
|
||||
onclick={removeAlbum}>Удалить альбом</button
|
||||
>
|
||||
@@ -0,0 +1,57 @@
|
||||
<script lang="ts">
|
||||
import { page } from '$app/stores';
|
||||
import { goto } from '$app/navigation';
|
||||
import { api } from '$lib/api';
|
||||
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 rounded-lg px-5 py-2.5 font-medium"
|
||||
>
|
||||
{busy ? 'Принятие…' : 'Принять приглашение'}
|
||||
</button>
|
||||
{:else}
|
||||
<p class="mb-4 text-sm">Войдите или зарегистрируйтесь, чтобы принять приглашение.</p>
|
||||
<a href="/login" class="bg-primary text-primary-fg rounded-lg px-5 py-2.5 font-medium">Войти</a>
|
||||
{/if}
|
||||
{:else}
|
||||
<p class="text-text-muted">Загрузка…</p>
|
||||
{/if}
|
||||
</div>
|
||||
@@ -0,0 +1,85 @@
|
||||
<script lang="ts">
|
||||
import { goto } from '$app/navigation';
|
||||
import { authApi } from '$lib/api';
|
||||
import { auth } from '$lib/stores/auth.svelte';
|
||||
|
||||
let mode = $state<'login' | 'register'>('login');
|
||||
let email = $state('');
|
||||
let password = $state('');
|
||||
let name = $state('');
|
||||
let error = $state('');
|
||||
let busy = $state(false);
|
||||
|
||||
async function submit(ev: Event) {
|
||||
ev.preventDefault();
|
||||
error = '';
|
||||
busy = true;
|
||||
try {
|
||||
const data =
|
||||
mode === 'login'
|
||||
? await authApi.login(email, password)
|
||||
: await authApi.register(email, password, name);
|
||||
auth.setTokens(data.tokens);
|
||||
auth.setUser(data.user);
|
||||
goto('/');
|
||||
} catch (e) {
|
||||
error = (e as Error).message;
|
||||
} finally {
|
||||
busy = false;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="mx-auto max-w-sm py-10">
|
||||
<h1 class="mb-6 text-2xl font-bold">{mode === 'login' ? 'Вход' : 'Регистрация'}</h1>
|
||||
|
||||
<form class="space-y-4" onsubmit={submit}>
|
||||
{#if mode === 'register'}
|
||||
<label class="block">
|
||||
<span class="text-text-muted mb-1 block text-sm">Имя</span>
|
||||
<input
|
||||
bind:value={name}
|
||||
required
|
||||
class="border-border bg-bg-elevated text-text w-full rounded-lg border px-3 py-2"
|
||||
/>
|
||||
</label>
|
||||
{/if}
|
||||
<label class="block">
|
||||
<span class="text-text-muted mb-1 block text-sm">Email</span>
|
||||
<input
|
||||
bind:value={email}
|
||||
type="email"
|
||||
required
|
||||
class="border-border bg-bg-elevated text-text w-full rounded-lg border px-3 py-2"
|
||||
/>
|
||||
</label>
|
||||
<label class="block">
|
||||
<span class="text-text-muted mb-1 block text-sm">Пароль</span>
|
||||
<input
|
||||
bind:value={password}
|
||||
type="password"
|
||||
required
|
||||
minlength="8"
|
||||
class="border-border bg-bg-elevated text-text w-full rounded-lg border px-3 py-2"
|
||||
/>
|
||||
</label>
|
||||
|
||||
{#if error}<p class="text-danger text-sm">{error}</p>{/if}
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={busy}
|
||||
class="bg-primary text-primary-fg w-full rounded-lg px-4 py-2.5 font-medium disabled:opacity-50"
|
||||
>
|
||||
{busy ? 'Подождите…' : mode === 'login' ? 'Войти' : 'Зарегистрироваться'}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
class="text-primary mt-4 text-sm"
|
||||
onclick={() => (mode = mode === 'login' ? 'register' : 'login')}
|
||||
>
|
||||
{mode === 'login' ? 'Нет аккаунта? Зарегистрироваться' : 'Уже есть аккаунт? Войти'}
|
||||
</button>
|
||||
</div>
|
||||
@@ -0,0 +1,85 @@
|
||||
<script lang="ts">
|
||||
import { page } from '$app/stores';
|
||||
import { api } from '$lib/api';
|
||||
import PhotoGrid from '$lib/components/PhotoGrid.svelte';
|
||||
import type { Album, Photo } from '$lib/types';
|
||||
|
||||
const token = $derived($page.params.token);
|
||||
|
||||
let album = $state<Album | null>(null);
|
||||
let photos = $state<Photo[]>([]);
|
||||
let nextCursor = $state('');
|
||||
let error = $state('');
|
||||
let active = $state(-1);
|
||||
|
||||
async function load() {
|
||||
try {
|
||||
const [albumData, photosData] = await Promise.all([
|
||||
api<{ album: Album }>(`/share/${token}`),
|
||||
api<{ photos: Photo[]; next_cursor: string }>(`/share/${token}/photos`)
|
||||
]);
|
||||
album = albumData.album;
|
||||
photos = photosData.photos;
|
||||
nextCursor = photosData.next_cursor;
|
||||
} catch (e) {
|
||||
error = (e as Error).message;
|
||||
}
|
||||
}
|
||||
|
||||
async function loadMore() {
|
||||
if (!nextCursor) return;
|
||||
const data = await api<{ photos: Photo[]; next_cursor: string }>(
|
||||
`/share/${token}/photos?cursor=${encodeURIComponent(nextCursor)}`
|
||||
);
|
||||
photos = [...photos, ...data.photos];
|
||||
nextCursor = data.next_cursor;
|
||||
}
|
||||
|
||||
$effect(() => {
|
||||
token;
|
||||
load();
|
||||
});
|
||||
</script>
|
||||
|
||||
{#if error}
|
||||
<div class="py-16 text-center">
|
||||
<h1 class="mb-2 text-2xl font-bold">Доступ недоступен</h1>
|
||||
<p class="text-danger">{error}</p>
|
||||
</div>
|
||||
{:else if album}
|
||||
<h1 class="mb-2 text-2xl font-bold">{album.title}</h1>
|
||||
<p class="text-text-muted mb-6">Доступ только для просмотра · {album.description}</p>
|
||||
<PhotoGrid {photos} onOpen={(i) => (active = i)} />
|
||||
{#if nextCursor}
|
||||
<div class="mt-6 text-center">
|
||||
<button
|
||||
type="button"
|
||||
class="border-border text-text rounded-lg border px-4 py-2 text-sm"
|
||||
onclick={loadMore}>Показать ещё</button
|
||||
>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if active >= 0}
|
||||
<div
|
||||
class="bg-bg/95 fixed inset-0 z-50 flex items-center justify-center"
|
||||
role="dialog"
|
||||
onclick={() => (active = -1)}
|
||||
>
|
||||
<img
|
||||
src={photos[active].preview_url ?? photos[active].original_url}
|
||||
alt={photos[active].original_filename}
|
||||
class="max-h-[90vh] max-w-full object-contain"
|
||||
/>
|
||||
<a
|
||||
href={photos[active].download_url}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
class="border-border bg-bg-elevated text-text absolute top-4 right-4 rounded-lg border px-3 py-1.5 text-sm"
|
||||
onclick={(e) => e.stopPropagation()}>Скачать</a
|
||||
>
|
||||
</div>
|
||||
{/if}
|
||||
{:else}
|
||||
<p class="text-text-muted">Загрузка…</p>
|
||||
{/if}
|
||||
Reference in New Issue
Block a user