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:
164
packages/frontend/src/routes/admin/articles/new/+page.svelte
Normal file
164
packages/frontend/src/routes/admin/articles/new/+page.svelte
Normal file
@@ -0,0 +1,164 @@
|
||||
<script lang="ts">
|
||||
import { goto } from "$app/navigation";
|
||||
import { toast } from "svelte-sonner";
|
||||
import { createArticle, uploadFile } from "$lib/services";
|
||||
import { marked } from "marked";
|
||||
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";
|
||||
|
||||
let title = $state("");
|
||||
let slug = $state("");
|
||||
let excerpt = $state("");
|
||||
let content = $state("");
|
||||
let category = $state("");
|
||||
let tags = $state<string[]>([]);
|
||||
let featured = $state(false);
|
||||
let publishDate = $state("");
|
||||
let imageId = $state<string | null>(null);
|
||||
let saving = $state(false);
|
||||
|
||||
let preview = $derived(content ? marked.parse(content) as string : "");
|
||||
|
||||
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("Image uploaded");
|
||||
} catch {
|
||||
toast.error("Image upload failed");
|
||||
}
|
||||
}
|
||||
|
||||
async function handleSubmit() {
|
||||
if (!title || !slug) {
|
||||
toast.error("Title and slug are required");
|
||||
return;
|
||||
}
|
||||
saving = true;
|
||||
try {
|
||||
await createArticle({
|
||||
title,
|
||||
slug,
|
||||
excerpt: excerpt || undefined,
|
||||
content: content || undefined,
|
||||
imageId: imageId || undefined,
|
||||
tags,
|
||||
category: category || undefined,
|
||||
featured,
|
||||
publishDate: publishDate || undefined,
|
||||
});
|
||||
toast.success("Article created");
|
||||
goto("/admin/articles");
|
||||
} catch (e: any) {
|
||||
toast.error(e?.message ?? "Failed to create article");
|
||||
} finally {
|
||||
saving = false;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="p-6">
|
||||
<div class="flex items-center gap-4 mb-6">
|
||||
<Button variant="ghost" href="/admin/articles" 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 article</h1>
|
||||
</div>
|
||||
|
||||
<div class="space-y-5 max-w-4xl">
|
||||
<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="Article title"
|
||||
/>
|
||||
</div>
|
||||
<div class="space-y-1.5">
|
||||
<Label for="slug">Slug *</Label>
|
||||
<Input id="slug" bind:value={slug} placeholder="article-slug" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-1.5">
|
||||
<Label for="excerpt">Excerpt</Label>
|
||||
<Textarea id="excerpt" bind:value={excerpt} placeholder="Short summary…" rows={2} />
|
||||
</div>
|
||||
|
||||
<!-- Markdown editor with live preview -->
|
||||
<div class="space-y-1.5">
|
||||
<Label>Content (Markdown)</Label>
|
||||
<div class="grid grid-cols-2 gap-4 min-h-96">
|
||||
<Textarea
|
||||
bind:value={content}
|
||||
placeholder="Write in Markdown…"
|
||||
class="h-full min-h-96 font-mono text-sm resize-none"
|
||||
/>
|
||||
<div
|
||||
class="rounded-lg border border-border/40 bg-muted/20 p-4 overflow-auto prose prose-sm max-w-none prose-headings:text-foreground prose-p:text-muted-foreground"
|
||||
>
|
||||
{#if preview}
|
||||
{@html preview}
|
||||
{:else}
|
||||
<p class="text-muted-foreground italic text-sm">Preview will appear here…</p>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</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="grid grid-cols-2 gap-4">
|
||||
<div class="space-y-1.5">
|
||||
<Label for="category">Category</Label>
|
||||
<Input id="category" bind:value={category} placeholder="e.g. news, tutorial…" />
|
||||
</div>
|
||||
<div class="space-y-1.5">
|
||||
<Label for="publishDate">Publish date</Label>
|
||||
<Input id="publishDate" type="datetime-local" bind:value={publishDate} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-1.5">
|
||||
<Label>Tags</Label>
|
||||
<TagsInput bind:value={tags} />
|
||||
</div>
|
||||
|
||||
<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 class="flex gap-3 pt-2">
|
||||
<Button onclick={handleSubmit} disabled={saving}>
|
||||
{saving ? "Creating…" : "Create article"}
|
||||
</Button>
|
||||
<Button variant="outline" href="/admin/articles">Cancel</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user