feat: role-based ACL + admin management UI
Backend: - Add acl.ts with requireAuth/requireRole/requireOwnerOrAdmin helpers - Gate premium videos from unauthenticated users in videos query/resolver - Fix updateVideoPlay to verify ownership before updating - Add admin mutations: adminListUsers, adminUpdateUser, adminDeleteUser - Add admin mutations: createVideo, updateVideo, deleteVideo, setVideoModels, adminListVideos - Add admin mutations: createArticle, updateArticle, deleteArticle, adminListArticles - Add deleteComment mutation (owner or admin only) - Add AdminUserListType to GraphQL types - Fix featured filter on articles query Frontend: - Install marked for markdown rendering - Add /admin/* section with sidebar layout and admin-only guard - Admin users page: paginated table with search, role filter, inline role change, delete - Admin videos pages: list, create form, edit form with file upload and model assignment - Admin articles pages: list, create form, edit form with split-pane markdown editor - Add admin nav link in header (desktop + mobile) for admin users - Render article content through marked in magazine detail page - Add all admin GraphQL service functions to services.ts Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,6 @@
|
||||
import { adminListVideos } from "$lib/services";
|
||||
|
||||
export async function load({ fetch }) {
|
||||
const videos = await adminListVideos(fetch).catch(() => []);
|
||||
return { videos };
|
||||
}
|
||||
142
packages/frontend/src/routes/admin/videos/+page.svelte
Normal file
142
packages/frontend/src/routes/admin/videos/+page.svelte
Normal file
@@ -0,0 +1,142 @@
|
||||
<script lang="ts">
|
||||
import { invalidateAll } from "$app/navigation";
|
||||
import { toast } from "svelte-sonner";
|
||||
import { deleteVideo } from "$lib/services";
|
||||
import { getAssetUrl } from "$lib/api";
|
||||
import { Button } from "$lib/components/ui/button";
|
||||
import * as Dialog from "$lib/components/ui/dialog";
|
||||
import type { Video } from "$lib/types";
|
||||
|
||||
const { data } = $props();
|
||||
|
||||
let deleteTarget: Video | null = $state(null);
|
||||
let deleteOpen = $state(false);
|
||||
let deleting = $state(false);
|
||||
|
||||
function confirmDelete(video: Video) {
|
||||
deleteTarget = video;
|
||||
deleteOpen = true;
|
||||
}
|
||||
|
||||
async function handleDelete() {
|
||||
if (!deleteTarget) return;
|
||||
deleting = true;
|
||||
try {
|
||||
await deleteVideo(deleteTarget.id);
|
||||
toast.success("Video deleted");
|
||||
deleteOpen = false;
|
||||
deleteTarget = null;
|
||||
await invalidateAll();
|
||||
} catch {
|
||||
toast.error("Failed to delete video");
|
||||
} finally {
|
||||
deleting = false;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="p-6">
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<h1 class="text-2xl font-bold">Videos</h1>
|
||||
<Button href="/admin/videos/new">
|
||||
<span class="icon-[ri--add-line] h-4 w-4 mr-1"></span>New video
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border border-border/40 overflow-hidden">
|
||||
<table class="w-full text-sm">
|
||||
<thead class="bg-muted/30">
|
||||
<tr>
|
||||
<th class="px-4 py-3 text-left font-medium text-muted-foreground">Video</th>
|
||||
<th class="px-4 py-3 text-left font-medium text-muted-foreground">Badges</th>
|
||||
<th class="px-4 py-3 text-left font-medium text-muted-foreground">Plays</th>
|
||||
<th class="px-4 py-3 text-left font-medium text-muted-foreground">Likes</th>
|
||||
<th class="px-4 py-3 text-right font-medium text-muted-foreground">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-border/30">
|
||||
{#each data.videos as video (video.id)}
|
||||
<tr class="hover:bg-muted/10 transition-colors">
|
||||
<td class="px-4 py-3">
|
||||
<div class="flex items-center gap-3">
|
||||
{#if video.image}
|
||||
<img
|
||||
src={getAssetUrl(video.image, "mini")}
|
||||
alt=""
|
||||
class="h-10 w-16 rounded object-cover"
|
||||
/>
|
||||
{:else}
|
||||
<div
|
||||
class="h-10 w-16 rounded bg-muted/50 flex items-center justify-center text-muted-foreground"
|
||||
>
|
||||
<span class="icon-[ri--film-line] h-5 w-5"></span>
|
||||
</div>
|
||||
{/if}
|
||||
<div>
|
||||
<p class="font-medium">{video.title}</p>
|
||||
<p class="text-xs text-muted-foreground">{video.slug}</p>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-4 py-3">
|
||||
<div class="flex gap-1">
|
||||
{#if video.premium}
|
||||
<span
|
||||
class="px-1.5 py-0.5 rounded text-xs font-medium bg-yellow-500/10 text-yellow-600"
|
||||
>Premium</span
|
||||
>
|
||||
{/if}
|
||||
{#if video.featured}
|
||||
<span
|
||||
class="px-1.5 py-0.5 rounded text-xs font-medium bg-primary/10 text-primary"
|
||||
>Featured</span
|
||||
>
|
||||
{/if}
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-muted-foreground">{video.plays_count ?? 0}</td>
|
||||
<td class="px-4 py-3 text-muted-foreground">{video.likes_count ?? 0}</td>
|
||||
<td class="px-4 py-3 text-right">
|
||||
<div class="flex items-center justify-end gap-1">
|
||||
<Button size="sm" variant="ghost" href="/admin/videos/{video.id}">
|
||||
<span class="icon-[ri--edit-line] h-4 w-4"></span>
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
class="text-destructive hover:text-destructive hover:bg-destructive/10"
|
||||
onclick={() => confirmDelete(video)}
|
||||
>
|
||||
<span class="icon-[ri--delete-bin-line] h-4 w-4"></span>
|
||||
</Button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
{/each}
|
||||
|
||||
{#if data.videos.length === 0}
|
||||
<tr>
|
||||
<td colspan="5" class="px-4 py-8 text-center text-muted-foreground">No videos yet</td>
|
||||
</tr>
|
||||
{/if}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Dialog.Root bind:open={deleteOpen}>
|
||||
<Dialog.Content>
|
||||
<Dialog.Header>
|
||||
<Dialog.Title>Delete video</Dialog.Title>
|
||||
<Dialog.Description>
|
||||
Permanently delete <strong>{deleteTarget?.title}</strong>? This cannot be undone.
|
||||
</Dialog.Description>
|
||||
</Dialog.Header>
|
||||
<Dialog.Footer>
|
||||
<Button variant="outline" onclick={() => (deleteOpen = false)}>Cancel</Button>
|
||||
<Button variant="destructive" disabled={deleting} onclick={handleDelete}>
|
||||
{deleting ? "Deleting…" : "Delete"}
|
||||
</Button>
|
||||
</Dialog.Footer>
|
||||
</Dialog.Content>
|
||||
</Dialog.Root>
|
||||
@@ -0,0 +1,14 @@
|
||||
import { adminListVideos, getModels } from "$lib/services";
|
||||
import { error } from "@sveltejs/kit";
|
||||
|
||||
export async function load({ params, fetch }) {
|
||||
const [allVideos, models] = await Promise.all([
|
||||
adminListVideos(fetch).catch(() => []),
|
||||
getModels(fetch).catch(() => []),
|
||||
]);
|
||||
|
||||
const video = allVideos.find((v) => v.id === params.id);
|
||||
if (!video) throw error(404, "Video not found");
|
||||
|
||||
return { video, models };
|
||||
}
|
||||
191
packages/frontend/src/routes/admin/videos/[id]/+page.svelte
Normal file
191
packages/frontend/src/routes/admin/videos/[id]/+page.svelte
Normal file
@@ -0,0 +1,191 @@
|
||||
<script lang="ts">
|
||||
import { goto } from "$app/navigation";
|
||||
import { toast } from "svelte-sonner";
|
||||
import { updateVideo, setVideoModels, uploadFile } from "$lib/services";
|
||||
import { Button } from "$lib/components/ui/button";
|
||||
import { Input } from "$lib/components/ui/input";
|
||||
import { Label } from "$lib/components/ui/label";
|
||||
import { Textarea } from "$lib/components/ui/textarea";
|
||||
import { TagsInput } from "$lib/components/ui/tags-input";
|
||||
import { FileDropZone, MEGABYTE } from "$lib/components/ui/file-drop-zone";
|
||||
import { getAssetUrl } from "$lib/api";
|
||||
|
||||
const { data } = $props();
|
||||
|
||||
let title = $state(data.video.title);
|
||||
let slug = $state(data.video.slug);
|
||||
let description = $state(data.video.description ?? "");
|
||||
let tags = $state<string[]>(data.video.tags ?? []);
|
||||
let premium = $state(data.video.premium ?? false);
|
||||
let featured = $state(data.video.featured ?? false);
|
||||
let uploadDate = $state(
|
||||
data.video.upload_date
|
||||
? new Date(data.video.upload_date).toISOString().slice(0, 16)
|
||||
: "",
|
||||
);
|
||||
let imageId = $state<string | null>(data.video.image ?? null);
|
||||
let movieId = $state<string | null>(data.video.movie ?? null);
|
||||
let selectedModelIds = $state<string[]>(
|
||||
data.video.models?.map((m: { id: string }) => m.id) ?? [],
|
||||
);
|
||||
let saving = $state(false);
|
||||
|
||||
async function handleImageUpload(files: File[]) {
|
||||
const file = files[0];
|
||||
if (!file) return;
|
||||
const fd = new FormData();
|
||||
fd.append("file", file);
|
||||
try {
|
||||
const res = await uploadFile(fd);
|
||||
imageId = res.id;
|
||||
toast.success("Cover image uploaded");
|
||||
} catch {
|
||||
toast.error("Image upload failed");
|
||||
}
|
||||
}
|
||||
|
||||
async function handleVideoUpload(files: File[]) {
|
||||
const file = files[0];
|
||||
if (!file) return;
|
||||
const fd = new FormData();
|
||||
fd.append("file", file);
|
||||
try {
|
||||
const res = await uploadFile(fd);
|
||||
movieId = res.id;
|
||||
toast.success("Video uploaded");
|
||||
} catch {
|
||||
toast.error("Video upload failed");
|
||||
}
|
||||
}
|
||||
|
||||
function toggleModel(id: string) {
|
||||
selectedModelIds = selectedModelIds.includes(id)
|
||||
? selectedModelIds.filter((m) => m !== id)
|
||||
: [...selectedModelIds, id];
|
||||
}
|
||||
|
||||
async function handleSubmit() {
|
||||
saving = true;
|
||||
try {
|
||||
await updateVideo({
|
||||
id: data.video.id,
|
||||
title,
|
||||
slug,
|
||||
description: description || undefined,
|
||||
imageId: imageId || undefined,
|
||||
movieId: movieId || undefined,
|
||||
tags,
|
||||
premium,
|
||||
featured,
|
||||
uploadDate: uploadDate || undefined,
|
||||
});
|
||||
await setVideoModels(data.video.id, selectedModelIds);
|
||||
toast.success("Video updated");
|
||||
goto("/admin/videos");
|
||||
} catch (e: any) {
|
||||
toast.error(e?.message ?? "Failed to update video");
|
||||
} finally {
|
||||
saving = false;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="p-6 max-w-2xl">
|
||||
<div class="flex items-center gap-4 mb-6">
|
||||
<Button variant="ghost" href="/admin/videos" size="sm">
|
||||
<span class="icon-[ri--arrow-left-line] h-4 w-4 mr-1"></span>Back
|
||||
</Button>
|
||||
<h1 class="text-2xl font-bold">Edit video</h1>
|
||||
</div>
|
||||
|
||||
<div class="space-y-5">
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div class="space-y-1.5">
|
||||
<Label for="title">Title *</Label>
|
||||
<Input id="title" bind:value={title} placeholder="Video title" />
|
||||
</div>
|
||||
<div class="space-y-1.5">
|
||||
<Label for="slug">Slug *</Label>
|
||||
<Input id="slug" bind:value={slug} placeholder="video-slug" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-1.5">
|
||||
<Label for="description">Description</Label>
|
||||
<Textarea id="description" bind:value={description} rows={3} />
|
||||
</div>
|
||||
|
||||
<div class="space-y-1.5">
|
||||
<Label>Cover image</Label>
|
||||
{#if imageId}
|
||||
<img src={getAssetUrl(imageId, "thumbnail")} alt="" class="h-24 rounded object-cover mb-2" />
|
||||
{/if}
|
||||
<FileDropZone
|
||||
accept="image/*"
|
||||
maxFileSize={10 * MEGABYTE}
|
||||
onUpload={handleImageUpload}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="space-y-1.5">
|
||||
<Label>Video file</Label>
|
||||
{#if movieId}
|
||||
<p class="text-xs text-muted-foreground mb-1">Current file: {movieId}</p>
|
||||
{/if}
|
||||
<FileDropZone
|
||||
accept="video/*"
|
||||
maxFileSize={2000 * MEGABYTE}
|
||||
onUpload={handleVideoUpload}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="space-y-1.5">
|
||||
<Label>Tags</Label>
|
||||
<TagsInput bind:value={tags} />
|
||||
</div>
|
||||
|
||||
<div class="space-y-1.5">
|
||||
<Label for="uploadDate">Publish date</Label>
|
||||
<Input id="uploadDate" type="datetime-local" bind:value={uploadDate} />
|
||||
</div>
|
||||
|
||||
<div class="flex gap-6">
|
||||
<label class="flex items-center gap-2 cursor-pointer">
|
||||
<input type="checkbox" bind:checked={premium} class="rounded" />
|
||||
<span class="text-sm">Premium</span>
|
||||
</label>
|
||||
<label class="flex items-center gap-2 cursor-pointer">
|
||||
<input type="checkbox" bind:checked={featured} class="rounded" />
|
||||
<span class="text-sm">Featured</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
{#if data.models.length > 0}
|
||||
<div class="space-y-2">
|
||||
<Label>Models</Label>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
{#each data.models as model (model.id)}
|
||||
<button
|
||||
type="button"
|
||||
class={`px-3 py-1.5 rounded-full text-sm border transition-colors ${
|
||||
selectedModelIds.includes(model.id)
|
||||
? "border-primary bg-primary/10 text-primary"
|
||||
: "border-border/40 text-muted-foreground hover:border-primary/40"
|
||||
}`}
|
||||
onclick={() => toggleModel(model.id)}
|
||||
>
|
||||
{model.artist_name || model.id}
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="flex gap-3 pt-2">
|
||||
<Button onclick={handleSubmit} disabled={saving}>
|
||||
{saving ? "Saving…" : "Save changes"}
|
||||
</Button>
|
||||
<Button variant="outline" href="/admin/videos">Cancel</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,6 @@
|
||||
import { getModels } from "$lib/services";
|
||||
|
||||
export async function load({ fetch }) {
|
||||
const models = await getModels(fetch).catch(() => []);
|
||||
return { models };
|
||||
}
|
||||
197
packages/frontend/src/routes/admin/videos/new/+page.svelte
Normal file
197
packages/frontend/src/routes/admin/videos/new/+page.svelte
Normal file
@@ -0,0 +1,197 @@
|
||||
<script lang="ts">
|
||||
import { goto } from "$app/navigation";
|
||||
import { toast } from "svelte-sonner";
|
||||
import { createVideo, setVideoModels, uploadFile } from "$lib/services";
|
||||
import { Button } from "$lib/components/ui/button";
|
||||
import { Input } from "$lib/components/ui/input";
|
||||
import { Label } from "$lib/components/ui/label";
|
||||
import { Textarea } from "$lib/components/ui/textarea";
|
||||
import { TagsInput } from "$lib/components/ui/tags-input";
|
||||
import { FileDropZone, MEGABYTE } from "$lib/components/ui/file-drop-zone";
|
||||
|
||||
const { data } = $props();
|
||||
|
||||
let title = $state("");
|
||||
let slug = $state("");
|
||||
let description = $state("");
|
||||
let tags = $state<string[]>([]);
|
||||
let premium = $state(false);
|
||||
let featured = $state(false);
|
||||
let uploadDate = $state("");
|
||||
let imageId = $state<string | null>(null);
|
||||
let movieId = $state<string | null>(null);
|
||||
let selectedModelIds = $state<string[]>([]);
|
||||
let saving = $state(false);
|
||||
|
||||
function generateSlug(t: string) {
|
||||
return t
|
||||
.toLowerCase()
|
||||
.replace(/[^a-z0-9]+/g, "-")
|
||||
.replace(/^-|-$/g, "");
|
||||
}
|
||||
|
||||
async function handleImageUpload(files: File[]) {
|
||||
const file = files[0];
|
||||
if (!file) return;
|
||||
const fd = new FormData();
|
||||
fd.append("file", file);
|
||||
try {
|
||||
const res = await uploadFile(fd);
|
||||
imageId = res.id;
|
||||
toast.success("Cover image uploaded");
|
||||
} catch {
|
||||
toast.error("Image upload failed");
|
||||
}
|
||||
}
|
||||
|
||||
async function handleVideoUpload(files: File[]) {
|
||||
const file = files[0];
|
||||
if (!file) return;
|
||||
const fd = new FormData();
|
||||
fd.append("file", file);
|
||||
try {
|
||||
const res = await uploadFile(fd);
|
||||
movieId = res.id;
|
||||
toast.success("Video uploaded");
|
||||
} catch {
|
||||
toast.error("Video upload failed");
|
||||
}
|
||||
}
|
||||
|
||||
function toggleModel(id: string) {
|
||||
selectedModelIds = selectedModelIds.includes(id)
|
||||
? selectedModelIds.filter((m) => m !== id)
|
||||
: [...selectedModelIds, id];
|
||||
}
|
||||
|
||||
async function handleSubmit() {
|
||||
if (!title || !slug) {
|
||||
toast.error("Title and slug are required");
|
||||
return;
|
||||
}
|
||||
saving = true;
|
||||
try {
|
||||
const video = await createVideo({
|
||||
title,
|
||||
slug,
|
||||
description: description || undefined,
|
||||
imageId: imageId || undefined,
|
||||
movieId: movieId || undefined,
|
||||
tags,
|
||||
premium,
|
||||
featured,
|
||||
uploadDate: uploadDate || undefined,
|
||||
});
|
||||
if (selectedModelIds.length > 0) {
|
||||
await setVideoModels(video.id, selectedModelIds);
|
||||
}
|
||||
toast.success("Video created");
|
||||
goto("/admin/videos");
|
||||
} catch (e: any) {
|
||||
toast.error(e?.message ?? "Failed to create video");
|
||||
} finally {
|
||||
saving = false;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="p-6 max-w-2xl">
|
||||
<div class="flex items-center gap-4 mb-6">
|
||||
<Button variant="ghost" href="/admin/videos" size="sm">
|
||||
<span class="icon-[ri--arrow-left-line] h-4 w-4 mr-1"></span>Back
|
||||
</Button>
|
||||
<h1 class="text-2xl font-bold">New video</h1>
|
||||
</div>
|
||||
|
||||
<div class="space-y-5">
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div class="space-y-1.5">
|
||||
<Label for="title">Title *</Label>
|
||||
<Input
|
||||
id="title"
|
||||
bind:value={title}
|
||||
oninput={() => { if (!slug) slug = generateSlug(title); }}
|
||||
placeholder="Video title"
|
||||
/>
|
||||
</div>
|
||||
<div class="space-y-1.5">
|
||||
<Label for="slug">Slug *</Label>
|
||||
<Input id="slug" bind:value={slug} placeholder="video-slug" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-1.5">
|
||||
<Label for="description">Description</Label>
|
||||
<Textarea id="description" bind:value={description} placeholder="Optional description" rows={3} />
|
||||
</div>
|
||||
|
||||
<div class="space-y-1.5">
|
||||
<Label>Cover image</Label>
|
||||
<FileDropZone
|
||||
accept="image/*"
|
||||
maxFileSize={10 * MEGABYTE}
|
||||
onUpload={handleImageUpload}
|
||||
/>
|
||||
{#if imageId}<p class="text-xs text-green-600 mt-1">Image uploaded ✓</p>{/if}
|
||||
</div>
|
||||
|
||||
<div class="space-y-1.5">
|
||||
<Label>Video file</Label>
|
||||
<FileDropZone
|
||||
accept="video/*"
|
||||
maxFileSize={2000 * MEGABYTE}
|
||||
onUpload={handleVideoUpload}
|
||||
/>
|
||||
{#if movieId}<p class="text-xs text-green-600 mt-1">Video uploaded ✓</p>{/if}
|
||||
</div>
|
||||
|
||||
<div class="space-y-1.5">
|
||||
<Label>Tags</Label>
|
||||
<TagsInput bind:value={tags} />
|
||||
</div>
|
||||
|
||||
<div class="space-y-1.5">
|
||||
<Label for="uploadDate">Publish date</Label>
|
||||
<Input id="uploadDate" type="datetime-local" bind:value={uploadDate} />
|
||||
</div>
|
||||
|
||||
<div class="flex gap-6">
|
||||
<label class="flex items-center gap-2 cursor-pointer">
|
||||
<input type="checkbox" bind:checked={premium} class="rounded" />
|
||||
<span class="text-sm">Premium</span>
|
||||
</label>
|
||||
<label class="flex items-center gap-2 cursor-pointer">
|
||||
<input type="checkbox" bind:checked={featured} class="rounded" />
|
||||
<span class="text-sm">Featured</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
{#if data.models.length > 0}
|
||||
<div class="space-y-2">
|
||||
<Label>Models</Label>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
{#each data.models as model (model.id)}
|
||||
<button
|
||||
type="button"
|
||||
class={`px-3 py-1.5 rounded-full text-sm border transition-colors ${
|
||||
selectedModelIds.includes(model.id)
|
||||
? "border-primary bg-primary/10 text-primary"
|
||||
: "border-border/40 text-muted-foreground hover:border-primary/40"
|
||||
}`}
|
||||
onclick={() => toggleModel(model.id)}
|
||||
>
|
||||
{model.artist_name || model.id}
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="flex gap-3 pt-2">
|
||||
<Button onclick={handleSubmit} disabled={saving}>
|
||||
{saving ? "Creating…" : "Create video"}
|
||||
</Button>
|
||||
<Button variant="outline" href="/admin/videos">Cancel</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user