feat: refactor role system to is_admin flag, add Badge component, fix native dialogs
- Separate admin identity from role: viewer|model + is_admin boolean flag - DB migration 0001_is_admin: adds column, migrates former admin role users - Update ACL helpers, auth session, GraphQL types and all resolvers - Admin layout guard and header links check is_admin instead of role - Admin users table: show Admin badge next to name, remove admin from role select - Admin user edit page: is_admin checkbox toggle - Install shadcn Badge component; use in admin users table - Fix duplicate photo keys in adminGetUser resolver - Replace confirm() in /me recordings with Dialog component Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -29,6 +29,7 @@ export const users = pgTable(
|
|||||||
role: roleEnum("role").notNull().default("viewer"),
|
role: roleEnum("role").notNull().default("viewer"),
|
||||||
avatar: text("avatar").references(() => files.id, { onDelete: "set null" }),
|
avatar: text("avatar").references(() => files.id, { onDelete: "set null" }),
|
||||||
banner: text("banner").references(() => files.id, { onDelete: "set null" }),
|
banner: text("banner").references(() => files.id, { onDelete: "set null" }),
|
||||||
|
is_admin: boolean("is_admin").notNull().default(false),
|
||||||
email_verified: boolean("email_verified").notNull().default(false),
|
email_verified: boolean("email_verified").notNull().default(false),
|
||||||
email_verify_token: text("email_verify_token"),
|
email_verify_token: text("email_verify_token"),
|
||||||
password_reset_token: text("password_reset_token"),
|
password_reset_token: text("password_reset_token"),
|
||||||
|
|||||||
@@ -2,7 +2,7 @@ import { builder } from "../builder";
|
|||||||
import { ArticleType } from "../types/index";
|
import { ArticleType } from "../types/index";
|
||||||
import { articles, users } from "../../db/schema/index";
|
import { articles, users } from "../../db/schema/index";
|
||||||
import { eq, and, lte, desc } from "drizzle-orm";
|
import { eq, and, lte, desc } from "drizzle-orm";
|
||||||
import { requireRole } from "../../lib/acl";
|
import { requireAdmin } from "../../lib/acl";
|
||||||
|
|
||||||
async function enrichArticle(db: any, article: any) {
|
async function enrichArticle(db: any, article: any) {
|
||||||
let author = null;
|
let author = null;
|
||||||
@@ -78,7 +78,7 @@ builder.queryField("adminListArticles", (t) =>
|
|||||||
t.field({
|
t.field({
|
||||||
type: [ArticleType],
|
type: [ArticleType],
|
||||||
resolve: async (_root, _args, ctx) => {
|
resolve: async (_root, _args, ctx) => {
|
||||||
requireRole(ctx, "admin");
|
requireAdmin(ctx);
|
||||||
const articleList = await ctx.db.select().from(articles).orderBy(desc(articles.publish_date));
|
const articleList = await ctx.db.select().from(articles).orderBy(desc(articles.publish_date));
|
||||||
return Promise.all(articleList.map((article: any) => enrichArticle(ctx.db, article)));
|
return Promise.all(articleList.map((article: any) => enrichArticle(ctx.db, article)));
|
||||||
},
|
},
|
||||||
@@ -100,7 +100,7 @@ builder.mutationField("createArticle", (t) =>
|
|||||||
publishDate: t.arg.string(),
|
publishDate: t.arg.string(),
|
||||||
},
|
},
|
||||||
resolve: async (_root, args, ctx) => {
|
resolve: async (_root, args, ctx) => {
|
||||||
requireRole(ctx, "admin");
|
requireAdmin(ctx);
|
||||||
const inserted = await ctx.db
|
const inserted = await ctx.db
|
||||||
.insert(articles)
|
.insert(articles)
|
||||||
.values({
|
.values({
|
||||||
@@ -138,7 +138,7 @@ builder.mutationField("updateArticle", (t) =>
|
|||||||
publishDate: t.arg.string(),
|
publishDate: t.arg.string(),
|
||||||
},
|
},
|
||||||
resolve: async (_root, args, ctx) => {
|
resolve: async (_root, args, ctx) => {
|
||||||
requireRole(ctx, "admin");
|
requireAdmin(ctx);
|
||||||
const updates: Record<string, unknown> = { date_updated: new Date() };
|
const updates: Record<string, unknown> = { date_updated: new Date() };
|
||||||
if (args.title !== undefined && args.title !== null) updates.title = args.title;
|
if (args.title !== undefined && args.title !== null) updates.title = args.title;
|
||||||
if (args.slug !== undefined && args.slug !== null) updates.slug = args.slug;
|
if (args.slug !== undefined && args.slug !== null) updates.slug = args.slug;
|
||||||
@@ -169,7 +169,7 @@ builder.mutationField("deleteArticle", (t) =>
|
|||||||
id: t.arg.string({ required: true }),
|
id: t.arg.string({ required: true }),
|
||||||
},
|
},
|
||||||
resolve: async (_root, args, ctx) => {
|
resolve: async (_root, args, ctx) => {
|
||||||
requireRole(ctx, "admin");
|
requireAdmin(ctx);
|
||||||
await ctx.db.delete(articles).where(eq(articles.id, args.id));
|
await ctx.db.delete(articles).where(eq(articles.id, args.id));
|
||||||
return true;
|
return true;
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -32,7 +32,8 @@ builder.mutationField("login", (t) =>
|
|||||||
const sessionUser = {
|
const sessionUser = {
|
||||||
id: user[0].id,
|
id: user[0].id,
|
||||||
email: user[0].email,
|
email: user[0].email,
|
||||||
role: user[0].role,
|
role: (user[0].role === "admin" ? "viewer" : user[0].role) as "model" | "viewer",
|
||||||
|
is_admin: user[0].is_admin,
|
||||||
first_name: user[0].first_name,
|
first_name: user[0].first_name,
|
||||||
last_name: user[0].last_name,
|
last_name: user[0].last_name,
|
||||||
artist_name: user[0].artist_name,
|
artist_name: user[0].artist_name,
|
||||||
|
|||||||
@@ -3,7 +3,7 @@ import { builder } from "../builder";
|
|||||||
import { CurrentUserType, UserType, AdminUserListType, AdminUserDetailType } from "../types/index";
|
import { CurrentUserType, UserType, AdminUserListType, AdminUserDetailType } from "../types/index";
|
||||||
import { users, user_photos, files } from "../../db/schema/index";
|
import { users, user_photos, files } from "../../db/schema/index";
|
||||||
import { eq, ilike, or, count, and } from "drizzle-orm";
|
import { eq, ilike, or, count, and } from "drizzle-orm";
|
||||||
import { requireRole } from "../../lib/acl";
|
import { requireAdmin } from "../../lib/acl";
|
||||||
|
|
||||||
builder.queryField("me", (t) =>
|
builder.queryField("me", (t) =>
|
||||||
t.field({
|
t.field({
|
||||||
@@ -86,7 +86,7 @@ builder.queryField("adminListUsers", (t) =>
|
|||||||
offset: t.arg.int(),
|
offset: t.arg.int(),
|
||||||
},
|
},
|
||||||
resolve: async (_root, args, ctx) => {
|
resolve: async (_root, args, ctx) => {
|
||||||
requireRole(ctx, "admin");
|
requireAdmin(ctx);
|
||||||
|
|
||||||
const limit = args.limit ?? 50;
|
const limit = args.limit ?? 50;
|
||||||
const offset = args.offset ?? 0;
|
const offset = args.offset ?? 0;
|
||||||
@@ -126,6 +126,7 @@ builder.mutationField("adminUpdateUser", (t) =>
|
|||||||
args: {
|
args: {
|
||||||
userId: t.arg.string({ required: true }),
|
userId: t.arg.string({ required: true }),
|
||||||
role: t.arg.string(),
|
role: t.arg.string(),
|
||||||
|
isAdmin: t.arg.boolean(),
|
||||||
firstName: t.arg.string(),
|
firstName: t.arg.string(),
|
||||||
lastName: t.arg.string(),
|
lastName: t.arg.string(),
|
||||||
artistName: t.arg.string(),
|
artistName: t.arg.string(),
|
||||||
@@ -133,10 +134,11 @@ builder.mutationField("adminUpdateUser", (t) =>
|
|||||||
bannerId: t.arg.string(),
|
bannerId: t.arg.string(),
|
||||||
},
|
},
|
||||||
resolve: async (_root, args, ctx) => {
|
resolve: async (_root, args, ctx) => {
|
||||||
requireRole(ctx, "admin");
|
requireAdmin(ctx);
|
||||||
|
|
||||||
const updates: Record<string, unknown> = { date_updated: new Date() };
|
const updates: Record<string, unknown> = { date_updated: new Date() };
|
||||||
if (args.role !== undefined && args.role !== null) updates.role = args.role as any;
|
if (args.role !== undefined && args.role !== null) updates.role = args.role as any;
|
||||||
|
if (args.isAdmin !== undefined && args.isAdmin !== null) updates.is_admin = args.isAdmin;
|
||||||
if (args.firstName !== undefined && args.firstName !== null)
|
if (args.firstName !== undefined && args.firstName !== null)
|
||||||
updates.first_name = args.firstName;
|
updates.first_name = args.firstName;
|
||||||
if (args.lastName !== undefined && args.lastName !== null) updates.last_name = args.lastName;
|
if (args.lastName !== undefined && args.lastName !== null) updates.last_name = args.lastName;
|
||||||
@@ -163,7 +165,7 @@ builder.mutationField("adminDeleteUser", (t) =>
|
|||||||
userId: t.arg.string({ required: true }),
|
userId: t.arg.string({ required: true }),
|
||||||
},
|
},
|
||||||
resolve: async (_root, args, ctx) => {
|
resolve: async (_root, args, ctx) => {
|
||||||
requireRole(ctx, "admin");
|
requireAdmin(ctx);
|
||||||
if (args.userId === ctx.currentUser!.id) throw new GraphQLError("Cannot delete yourself");
|
if (args.userId === ctx.currentUser!.id) throw new GraphQLError("Cannot delete yourself");
|
||||||
await ctx.db.delete(users).where(eq(users.id, args.userId));
|
await ctx.db.delete(users).where(eq(users.id, args.userId));
|
||||||
return true;
|
return true;
|
||||||
@@ -179,7 +181,7 @@ builder.queryField("adminGetUser", (t) =>
|
|||||||
userId: t.arg.string({ required: true }),
|
userId: t.arg.string({ required: true }),
|
||||||
},
|
},
|
||||||
resolve: async (_root, args, ctx) => {
|
resolve: async (_root, args, ctx) => {
|
||||||
requireRole(ctx, "admin");
|
requireAdmin(ctx);
|
||||||
const user = await ctx.db.select().from(users).where(eq(users.id, args.userId)).limit(1);
|
const user = await ctx.db.select().from(users).where(eq(users.id, args.userId)).limit(1);
|
||||||
if (!user[0]) return null;
|
if (!user[0]) return null;
|
||||||
const photoRows = await ctx.db
|
const photoRows = await ctx.db
|
||||||
@@ -188,10 +190,11 @@ builder.queryField("adminGetUser", (t) =>
|
|||||||
.leftJoin(files, eq(user_photos.file_id, files.id))
|
.leftJoin(files, eq(user_photos.file_id, files.id))
|
||||||
.where(eq(user_photos.user_id, args.userId))
|
.where(eq(user_photos.user_id, args.userId))
|
||||||
.orderBy(user_photos.sort);
|
.orderBy(user_photos.sort);
|
||||||
return {
|
const seen = new Set<string>();
|
||||||
...user[0],
|
const photos = photoRows
|
||||||
photos: photoRows.map((p: any) => ({ id: p.id, filename: p.filename })),
|
.filter((p: any) => p.id && !seen.has(p.id) && seen.add(p.id))
|
||||||
};
|
.map((p: any) => ({ id: p.id, filename: p.filename }));
|
||||||
|
return { ...user[0], photos };
|
||||||
},
|
},
|
||||||
}),
|
}),
|
||||||
);
|
);
|
||||||
@@ -204,7 +207,7 @@ builder.mutationField("adminAddUserPhoto", (t) =>
|
|||||||
fileId: t.arg.string({ required: true }),
|
fileId: t.arg.string({ required: true }),
|
||||||
},
|
},
|
||||||
resolve: async (_root, args, ctx) => {
|
resolve: async (_root, args, ctx) => {
|
||||||
requireRole(ctx, "admin");
|
requireAdmin(ctx);
|
||||||
await ctx.db.insert(user_photos).values({ user_id: args.userId, file_id: args.fileId });
|
await ctx.db.insert(user_photos).values({ user_id: args.userId, file_id: args.fileId });
|
||||||
return true;
|
return true;
|
||||||
},
|
},
|
||||||
@@ -219,7 +222,7 @@ builder.mutationField("adminRemoveUserPhoto", (t) =>
|
|||||||
fileId: t.arg.string({ required: true }),
|
fileId: t.arg.string({ required: true }),
|
||||||
},
|
},
|
||||||
resolve: async (_root, args, ctx) => {
|
resolve: async (_root, args, ctx) => {
|
||||||
requireRole(ctx, "admin");
|
requireAdmin(ctx);
|
||||||
await ctx.db
|
await ctx.db
|
||||||
.delete(user_photos)
|
.delete(user_photos)
|
||||||
.where(and(eq(user_photos.user_id, args.userId), eq(user_photos.file_id, args.fileId)));
|
.where(and(eq(user_photos.user_id, args.userId), eq(user_photos.file_id, args.fileId)));
|
||||||
|
|||||||
@@ -15,7 +15,7 @@ import {
|
|||||||
files,
|
files,
|
||||||
} from "../../db/schema/index";
|
} from "../../db/schema/index";
|
||||||
import { eq, and, lte, desc, inArray, count } from "drizzle-orm";
|
import { eq, and, lte, desc, inArray, count } from "drizzle-orm";
|
||||||
import { requireRole } from "../../lib/acl";
|
import { requireAdmin } from "../../lib/acl";
|
||||||
|
|
||||||
async function enrichVideo(db: any, video: any) {
|
async function enrichVideo(db: any, video: any) {
|
||||||
// Fetch models
|
// Fetch models
|
||||||
@@ -432,7 +432,7 @@ builder.queryField("adminListVideos", (t) =>
|
|||||||
t.field({
|
t.field({
|
||||||
type: [VideoType],
|
type: [VideoType],
|
||||||
resolve: async (_root, _args, ctx) => {
|
resolve: async (_root, _args, ctx) => {
|
||||||
requireRole(ctx, "admin");
|
requireAdmin(ctx);
|
||||||
const rows = await ctx.db.select().from(videos).orderBy(desc(videos.upload_date));
|
const rows = await ctx.db.select().from(videos).orderBy(desc(videos.upload_date));
|
||||||
return Promise.all(rows.map((v: any) => enrichVideo(ctx.db, v)));
|
return Promise.all(rows.map((v: any) => enrichVideo(ctx.db, v)));
|
||||||
},
|
},
|
||||||
@@ -454,7 +454,7 @@ builder.mutationField("createVideo", (t) =>
|
|||||||
uploadDate: t.arg.string(),
|
uploadDate: t.arg.string(),
|
||||||
},
|
},
|
||||||
resolve: async (_root, args, ctx) => {
|
resolve: async (_root, args, ctx) => {
|
||||||
requireRole(ctx, "admin");
|
requireAdmin(ctx);
|
||||||
const inserted = await ctx.db
|
const inserted = await ctx.db
|
||||||
.insert(videos)
|
.insert(videos)
|
||||||
.values({
|
.values({
|
||||||
@@ -491,7 +491,7 @@ builder.mutationField("updateVideo", (t) =>
|
|||||||
uploadDate: t.arg.string(),
|
uploadDate: t.arg.string(),
|
||||||
},
|
},
|
||||||
resolve: async (_root, args, ctx) => {
|
resolve: async (_root, args, ctx) => {
|
||||||
requireRole(ctx, "admin");
|
requireAdmin(ctx);
|
||||||
const updates: Record<string, unknown> = {};
|
const updates: Record<string, unknown> = {};
|
||||||
if (args.title !== undefined && args.title !== null) updates.title = args.title;
|
if (args.title !== undefined && args.title !== null) updates.title = args.title;
|
||||||
if (args.slug !== undefined && args.slug !== null) updates.slug = args.slug;
|
if (args.slug !== undefined && args.slug !== null) updates.slug = args.slug;
|
||||||
@@ -522,7 +522,7 @@ builder.mutationField("deleteVideo", (t) =>
|
|||||||
id: t.arg.string({ required: true }),
|
id: t.arg.string({ required: true }),
|
||||||
},
|
},
|
||||||
resolve: async (_root, args, ctx) => {
|
resolve: async (_root, args, ctx) => {
|
||||||
requireRole(ctx, "admin");
|
requireAdmin(ctx);
|
||||||
await ctx.db.delete(videos).where(eq(videos.id, args.id));
|
await ctx.db.delete(videos).where(eq(videos.id, args.id));
|
||||||
return true;
|
return true;
|
||||||
},
|
},
|
||||||
@@ -537,7 +537,7 @@ builder.mutationField("setVideoModels", (t) =>
|
|||||||
userIds: t.arg.stringList({ required: true }),
|
userIds: t.arg.stringList({ required: true }),
|
||||||
},
|
},
|
||||||
resolve: async (_root, args, ctx) => {
|
resolve: async (_root, args, ctx) => {
|
||||||
requireRole(ctx, "admin");
|
requireAdmin(ctx);
|
||||||
await ctx.db.delete(video_models).where(eq(video_models.video_id, args.videoId));
|
await ctx.db.delete(video_models).where(eq(video_models.video_id, args.videoId));
|
||||||
if (args.userIds.length > 0) {
|
if (args.userIds.length > 0) {
|
||||||
await ctx.db.insert(video_models).values(
|
await ctx.db.insert(video_models).values(
|
||||||
|
|||||||
@@ -53,6 +53,7 @@ export const UserType = builder.objectRef<User>("User").implement({
|
|||||||
description: t.exposeString("description", { nullable: true }),
|
description: t.exposeString("description", { nullable: true }),
|
||||||
tags: t.exposeStringList("tags", { nullable: true }),
|
tags: t.exposeStringList("tags", { nullable: true }),
|
||||||
role: t.exposeString("role"),
|
role: t.exposeString("role"),
|
||||||
|
is_admin: t.exposeBoolean("is_admin"),
|
||||||
avatar: t.exposeString("avatar", { nullable: true }),
|
avatar: t.exposeString("avatar", { nullable: true }),
|
||||||
banner: t.exposeString("banner", { nullable: true }),
|
banner: t.exposeString("banner", { nullable: true }),
|
||||||
email_verified: t.exposeBoolean("email_verified"),
|
email_verified: t.exposeBoolean("email_verified"),
|
||||||
@@ -72,6 +73,7 @@ export const CurrentUserType = builder.objectRef<User>("CurrentUser").implement(
|
|||||||
description: t.exposeString("description", { nullable: true }),
|
description: t.exposeString("description", { nullable: true }),
|
||||||
tags: t.exposeStringList("tags", { nullable: true }),
|
tags: t.exposeStringList("tags", { nullable: true }),
|
||||||
role: t.exposeString("role"),
|
role: t.exposeString("role"),
|
||||||
|
is_admin: t.exposeBoolean("is_admin"),
|
||||||
avatar: t.exposeString("avatar", { nullable: true }),
|
avatar: t.exposeString("avatar", { nullable: true }),
|
||||||
banner: t.exposeString("banner", { nullable: true }),
|
banner: t.exposeString("banner", { nullable: true }),
|
||||||
email_verified: t.exposeBoolean("email_verified"),
|
email_verified: t.exposeBoolean("email_verified"),
|
||||||
@@ -359,6 +361,7 @@ export const AdminUserDetailType = builder
|
|||||||
description: t.exposeString("description", { nullable: true }),
|
description: t.exposeString("description", { nullable: true }),
|
||||||
tags: t.exposeStringList("tags", { nullable: true }),
|
tags: t.exposeStringList("tags", { nullable: true }),
|
||||||
role: t.exposeString("role"),
|
role: t.exposeString("role"),
|
||||||
|
is_admin: t.exposeBoolean("is_admin"),
|
||||||
avatar: t.exposeString("avatar", { nullable: true }),
|
avatar: t.exposeString("avatar", { nullable: true }),
|
||||||
banner: t.exposeString("banner", { nullable: true }),
|
banner: t.exposeString("banner", { nullable: true }),
|
||||||
email_verified: t.exposeBoolean("email_verified"),
|
email_verified: t.exposeBoolean("email_verified"),
|
||||||
|
|||||||
@@ -1,20 +1,18 @@
|
|||||||
import { GraphQLError } from "graphql";
|
import { GraphQLError } from "graphql";
|
||||||
import type { Context } from "../graphql/builder";
|
import type { Context } from "../graphql/builder";
|
||||||
|
|
||||||
type UserRole = "viewer" | "model" | "admin";
|
|
||||||
|
|
||||||
export function requireAuth(ctx: Context): void {
|
export function requireAuth(ctx: Context): void {
|
||||||
if (!ctx.currentUser) throw new GraphQLError("Unauthorized");
|
if (!ctx.currentUser) throw new GraphQLError("Unauthorized");
|
||||||
}
|
}
|
||||||
|
|
||||||
export function requireRole(ctx: Context, ...roles: UserRole[]): void {
|
export function requireAdmin(ctx: Context): void {
|
||||||
requireAuth(ctx);
|
requireAuth(ctx);
|
||||||
if (!roles.includes(ctx.currentUser!.role)) throw new GraphQLError("Forbidden");
|
if (!ctx.currentUser!.is_admin) throw new GraphQLError("Forbidden");
|
||||||
}
|
}
|
||||||
|
|
||||||
export function requireOwnerOrAdmin(ctx: Context, ownerId: string): void {
|
export function requireOwnerOrAdmin(ctx: Context, ownerId: string): void {
|
||||||
requireAuth(ctx);
|
requireAuth(ctx);
|
||||||
if (ctx.currentUser!.id !== ownerId && ctx.currentUser!.role !== "admin") {
|
if (ctx.currentUser!.id !== ownerId && !ctx.currentUser!.is_admin) {
|
||||||
throw new GraphQLError("Forbidden");
|
throw new GraphQLError("Forbidden");
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -3,7 +3,8 @@ import Redis from "ioredis";
|
|||||||
export type SessionUser = {
|
export type SessionUser = {
|
||||||
id: string;
|
id: string;
|
||||||
email: string;
|
email: string;
|
||||||
role: "model" | "viewer" | "admin";
|
role: "model" | "viewer";
|
||||||
|
is_admin: boolean;
|
||||||
first_name: string | null;
|
first_name: string | null;
|
||||||
last_name: string | null;
|
last_name: string | null;
|
||||||
artist_name: string | null;
|
artist_name: string | null;
|
||||||
|
|||||||
3
packages/backend/src/migrations/0001_is_admin.sql
Normal file
3
packages/backend/src/migrations/0001_is_admin.sql
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
ALTER TABLE "users" ADD COLUMN "is_admin" boolean NOT NULL DEFAULT false;--> statement-breakpoint
|
||||||
|
UPDATE "users" SET "is_admin" = true WHERE "role" = 'admin';--> statement-breakpoint
|
||||||
|
UPDATE "users" SET "role" = 'viewer' WHERE "role" = 'admin';
|
||||||
@@ -8,6 +8,13 @@
|
|||||||
"when": 1772645674513,
|
"when": 1772645674513,
|
||||||
"tag": "0000_pale_hellion",
|
"tag": "0000_pale_hellion",
|
||||||
"breakpoints": true
|
"breakpoints": true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"idx": 1,
|
||||||
|
"version": "7",
|
||||||
|
"when": 1772645674514,
|
||||||
|
"tag": "0001_is_admin",
|
||||||
|
"breakpoints": true
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
@@ -109,7 +109,7 @@
|
|||||||
<span class="sr-only">{$_("header.play")}</span>
|
<span class="sr-only">{$_("header.play")}</span>
|
||||||
</Button>
|
</Button>
|
||||||
|
|
||||||
{#if authStatus.user?.role === "admin"}
|
{#if authStatus.user?.is_admin}
|
||||||
<Button
|
<Button
|
||||||
variant="link"
|
variant="link"
|
||||||
size="icon"
|
size="icon"
|
||||||
@@ -278,7 +278,7 @@
|
|||||||
<span class="icon-[ri--arrow-right-s-line] h-4 w-4 text-muted-foreground"></span>
|
<span class="icon-[ri--arrow-right-s-line] h-4 w-4 text-muted-foreground"></span>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
{#if authStatus.user?.role === "admin"}
|
{#if authStatus.user?.is_admin}
|
||||||
<a
|
<a
|
||||||
class={`flex items-center gap-3 rounded-xl border px-4 py-3 transition-all duration-200 group hover:border-primary/30 hover:bg-primary/5 ${isActiveLink({ href: "/admin" }) ? "border-primary/40 bg-primary/8" : "border-border/40 bg-card/50"}`}
|
class={`flex items-center gap-3 rounded-xl border px-4 py-3 transition-all duration-200 group hover:border-primary/30 hover:bg-primary/5 ${isActiveLink({ href: "/admin" }) ? "border-primary/40 bg-primary/8" : "border-border/40 bg-card/50"}`}
|
||||||
href="/admin/users"
|
href="/admin/users"
|
||||||
|
|||||||
50
packages/frontend/src/lib/components/ui/badge/badge.svelte
Normal file
50
packages/frontend/src/lib/components/ui/badge/badge.svelte
Normal file
@@ -0,0 +1,50 @@
|
|||||||
|
<script lang="ts" module>
|
||||||
|
import { type VariantProps, tv } from "tailwind-variants";
|
||||||
|
|
||||||
|
export const badgeVariants = tv({
|
||||||
|
base: "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] [&>svg]:pointer-events-none [&>svg]:size-3",
|
||||||
|
variants: {
|
||||||
|
variant: {
|
||||||
|
default:
|
||||||
|
"bg-primary text-primary-foreground [a&]:hover:bg-primary/90 border-transparent",
|
||||||
|
secondary:
|
||||||
|
"bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90 border-transparent",
|
||||||
|
destructive:
|
||||||
|
"bg-destructive [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/70 border-transparent text-white",
|
||||||
|
outline: "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
defaultVariants: {
|
||||||
|
variant: "default",
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
export type BadgeVariant = VariantProps<typeof badgeVariants>["variant"];
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import type { HTMLAnchorAttributes } from "svelte/elements";
|
||||||
|
import { cn, type WithElementRef } from "$lib/utils.js";
|
||||||
|
|
||||||
|
let {
|
||||||
|
ref = $bindable(null),
|
||||||
|
href,
|
||||||
|
class: className,
|
||||||
|
variant = "default",
|
||||||
|
children,
|
||||||
|
...restProps
|
||||||
|
}: WithElementRef<HTMLAnchorAttributes> & {
|
||||||
|
variant?: BadgeVariant;
|
||||||
|
} = $props();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<svelte:element
|
||||||
|
this={href ? "a" : "span"}
|
||||||
|
bind:this={ref}
|
||||||
|
data-slot="badge"
|
||||||
|
{href}
|
||||||
|
class={cn(badgeVariants({ variant }), className)}
|
||||||
|
{...restProps}
|
||||||
|
>
|
||||||
|
{@render children?.()}
|
||||||
|
</svelte:element>
|
||||||
2
packages/frontend/src/lib/components/ui/badge/index.ts
Normal file
2
packages/frontend/src/lib/components/ui/badge/index.ts
Normal file
@@ -0,0 +1,2 @@
|
|||||||
|
export { default as Badge } from "./badge.svelte";
|
||||||
|
export { badgeVariants, type BadgeVariant } from "./badge.svelte";
|
||||||
@@ -62,6 +62,7 @@ const ME_QUERY = gql`
|
|||||||
description
|
description
|
||||||
tags
|
tags
|
||||||
role
|
role
|
||||||
|
is_admin
|
||||||
avatar
|
avatar
|
||||||
banner
|
banner
|
||||||
email_verified
|
email_verified
|
||||||
@@ -1022,6 +1023,7 @@ const ADMIN_LIST_USERS_QUERY = gql`
|
|||||||
artist_name
|
artist_name
|
||||||
slug
|
slug
|
||||||
role
|
role
|
||||||
|
is_admin
|
||||||
avatar
|
avatar
|
||||||
email_verified
|
email_verified
|
||||||
date_created
|
date_created
|
||||||
@@ -1052,6 +1054,7 @@ const ADMIN_UPDATE_USER_MUTATION = gql`
|
|||||||
mutation AdminUpdateUser(
|
mutation AdminUpdateUser(
|
||||||
$userId: String!
|
$userId: String!
|
||||||
$role: String
|
$role: String
|
||||||
|
$isAdmin: Boolean
|
||||||
$firstName: String
|
$firstName: String
|
||||||
$lastName: String
|
$lastName: String
|
||||||
$artistName: String
|
$artistName: String
|
||||||
@@ -1061,6 +1064,7 @@ const ADMIN_UPDATE_USER_MUTATION = gql`
|
|||||||
adminUpdateUser(
|
adminUpdateUser(
|
||||||
userId: $userId
|
userId: $userId
|
||||||
role: $role
|
role: $role
|
||||||
|
isAdmin: $isAdmin
|
||||||
firstName: $firstName
|
firstName: $firstName
|
||||||
lastName: $lastName
|
lastName: $lastName
|
||||||
artistName: $artistName
|
artistName: $artistName
|
||||||
@@ -1073,6 +1077,7 @@ const ADMIN_UPDATE_USER_MUTATION = gql`
|
|||||||
last_name
|
last_name
|
||||||
artist_name
|
artist_name
|
||||||
role
|
role
|
||||||
|
is_admin
|
||||||
avatar
|
avatar
|
||||||
banner
|
banner
|
||||||
date_created
|
date_created
|
||||||
@@ -1083,6 +1088,7 @@ const ADMIN_UPDATE_USER_MUTATION = gql`
|
|||||||
export async function adminUpdateUser(input: {
|
export async function adminUpdateUser(input: {
|
||||||
userId: string;
|
userId: string;
|
||||||
role?: string;
|
role?: string;
|
||||||
|
isAdmin?: boolean;
|
||||||
firstName?: string;
|
firstName?: string;
|
||||||
lastName?: string;
|
lastName?: string;
|
||||||
artistName?: string;
|
artistName?: string;
|
||||||
@@ -1128,6 +1134,7 @@ const ADMIN_GET_USER_QUERY = gql`
|
|||||||
artist_name
|
artist_name
|
||||||
slug
|
slug
|
||||||
role
|
role
|
||||||
|
is_admin
|
||||||
avatar
|
avatar
|
||||||
banner
|
banner
|
||||||
description
|
description
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
import { redirect } from "@sveltejs/kit";
|
import { redirect } from "@sveltejs/kit";
|
||||||
|
|
||||||
export async function load({ locals }) {
|
export async function load({ locals }) {
|
||||||
if (!locals.authStatus.authenticated || locals.authStatus.user?.role !== "admin") {
|
if (!locals.authStatus.authenticated || !locals.authStatus.user?.is_admin) {
|
||||||
throw redirect(302, "/");
|
throw redirect(302, "/");
|
||||||
}
|
}
|
||||||
return { authStatus: locals.authStatus };
|
return { authStatus: locals.authStatus };
|
||||||
|
|||||||
@@ -8,6 +8,7 @@
|
|||||||
import { Button } from "$lib/components/ui/button";
|
import { Button } from "$lib/components/ui/button";
|
||||||
import { Input } from "$lib/components/ui/input";
|
import { Input } from "$lib/components/ui/input";
|
||||||
import { Select, SelectContent, SelectItem, SelectTrigger } from "$lib/components/ui/select";
|
import { Select, SelectContent, SelectItem, SelectTrigger } from "$lib/components/ui/select";
|
||||||
|
import { Badge } from "$lib/components/ui/badge";
|
||||||
import * as Dialog from "$lib/components/ui/dialog";
|
import * as Dialog from "$lib/components/ui/dialog";
|
||||||
import type { User } from "$lib/types";
|
import type { User } from "$lib/types";
|
||||||
|
|
||||||
@@ -22,7 +23,7 @@
|
|||||||
|
|
||||||
const currentUserId = page.data.authStatus?.user?.id;
|
const currentUserId = page.data.authStatus?.user?.id;
|
||||||
|
|
||||||
const roles = ["", "viewer", "model", "admin"] as const;
|
const roles = ["", "viewer", "model"] as const;
|
||||||
|
|
||||||
function debounceSearch(value: string) {
|
function debounceSearch(value: string) {
|
||||||
clearTimeout(searchTimeout);
|
clearTimeout(searchTimeout);
|
||||||
@@ -144,7 +145,12 @@
|
|||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
<div class="min-w-0">
|
<div class="min-w-0">
|
||||||
<span class="font-medium block truncate">{user.artist_name || user.first_name || "—"}</span>
|
<div class="flex items-center gap-1.5">
|
||||||
|
<span class="font-medium truncate">{user.artist_name || user.first_name || "—"}</span>
|
||||||
|
{#if user.is_admin}
|
||||||
|
<Badge variant="default" class="shrink-0 text-[10px] px-1.5 py-0">Admin</Badge>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
<span class="text-xs text-muted-foreground sm:hidden truncate block">{user.email}</span>
|
<span class="text-xs text-muted-foreground sm:hidden truncate block">{user.email}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -163,7 +169,6 @@
|
|||||||
<SelectContent>
|
<SelectContent>
|
||||||
<SelectItem value="viewer">Viewer</SelectItem>
|
<SelectItem value="viewer">Viewer</SelectItem>
|
||||||
<SelectItem value="model">Model</SelectItem>
|
<SelectItem value="model">Model</SelectItem>
|
||||||
<SelectItem value="admin">Admin</SelectItem>
|
|
||||||
</SelectContent>
|
</SelectContent>
|
||||||
</Select>
|
</Select>
|
||||||
</td>
|
</td>
|
||||||
|
|||||||
@@ -20,6 +20,7 @@
|
|||||||
let artistName = $state(data.user.artist_name ?? "");
|
let artistName = $state(data.user.artist_name ?? "");
|
||||||
let avatarId = $state<string | null>(data.user.avatar ?? null);
|
let avatarId = $state<string | null>(data.user.avatar ?? null);
|
||||||
let bannerId = $state<string | null>(data.user.banner ?? null);
|
let bannerId = $state<string | null>(data.user.banner ?? null);
|
||||||
|
let isAdmin = $state(data.user.is_admin ?? false);
|
||||||
let saving = $state(false);
|
let saving = $state(false);
|
||||||
|
|
||||||
async function handleAvatarUpload(files: File[]) {
|
async function handleAvatarUpload(files: File[]) {
|
||||||
@@ -86,6 +87,7 @@
|
|||||||
artistName: artistName || undefined,
|
artistName: artistName || undefined,
|
||||||
avatarId: avatarId || undefined,
|
avatarId: avatarId || undefined,
|
||||||
bannerId: bannerId || undefined,
|
bannerId: bannerId || undefined,
|
||||||
|
isAdmin,
|
||||||
});
|
});
|
||||||
toast.success("Saved");
|
toast.success("Saved");
|
||||||
} catch (e: any) {
|
} catch (e: any) {
|
||||||
@@ -103,7 +105,7 @@
|
|||||||
</Button>
|
</Button>
|
||||||
<div>
|
<div>
|
||||||
<h1 class="text-2xl font-bold">{data.user.artist_name || data.user.email}</h1>
|
<h1 class="text-2xl font-bold">{data.user.artist_name || data.user.email}</h1>
|
||||||
<p class="text-xs text-muted-foreground">{data.user.email} · {data.user.role}</p>
|
<p class="text-xs text-muted-foreground">{data.user.email} · {data.user.role}{data.user.is_admin ? " · admin" : ""}</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -151,6 +153,15 @@
|
|||||||
<FileDropZone accept="image/*" maxFileSize={10 * MEGABYTE} onUpload={handleBannerUpload} />
|
<FileDropZone accept="image/*" maxFileSize={10 * MEGABYTE} onUpload={handleBannerUpload} />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- Admin flag -->
|
||||||
|
<label class="flex items-center gap-3 rounded-lg border border-border/40 px-4 py-3 cursor-pointer hover:bg-muted/20 transition-colors">
|
||||||
|
<input type="checkbox" bind:checked={isAdmin} class="h-4 w-4 rounded accent-primary shrink-0" />
|
||||||
|
<div>
|
||||||
|
<span class="text-sm font-medium">Administrator</span>
|
||||||
|
<p class="text-xs text-muted-foreground">Grants full admin access to the dashboard</p>
|
||||||
|
</div>
|
||||||
|
</label>
|
||||||
|
|
||||||
<div class="flex gap-3">
|
<div class="flex gap-3">
|
||||||
<Button onclick={handleSave} disabled={saving}>
|
<Button onclick={handleSave} disabled={saving}>
|
||||||
{saving ? "Saving…" : "Save changes"}
|
{saving ? "Saving…" : "Save changes"}
|
||||||
|
|||||||
@@ -18,6 +18,7 @@
|
|||||||
import * as Alert from "$lib/components/ui/alert";
|
import * as Alert from "$lib/components/ui/alert";
|
||||||
import { toast } from "svelte-sonner";
|
import { toast } from "svelte-sonner";
|
||||||
import { deleteRecording, removeFile, updateProfile, uploadFile } from "$lib/services";
|
import { deleteRecording, removeFile, updateProfile, uploadFile } from "$lib/services";
|
||||||
|
import * as Dialog from "$lib/components/ui/dialog";
|
||||||
import { Textarea } from "$lib/components/ui/textarea";
|
import { Textarea } from "$lib/components/ui/textarea";
|
||||||
import Meta from "$lib/components/meta/meta.svelte";
|
import Meta from "$lib/components/meta/meta.svelte";
|
||||||
import { TagsInput } from "$lib/components/ui/tags-input";
|
import { TagsInput } from "$lib/components/ui/tags-input";
|
||||||
@@ -27,6 +28,9 @@
|
|||||||
const { data } = $props();
|
const { data } = $props();
|
||||||
|
|
||||||
let recordings = $state(data.recordings);
|
let recordings = $state(data.recordings);
|
||||||
|
let deleteTarget = $state<string | null>(null);
|
||||||
|
let deleteOpen = $state(false);
|
||||||
|
let deleting = $state(false);
|
||||||
|
|
||||||
let activeTab = $state("settings");
|
let activeTab = $state("settings");
|
||||||
|
|
||||||
@@ -153,17 +157,24 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
async function handleDeleteRecording(id: string) {
|
function handleDeleteRecording(id: string) {
|
||||||
if (!confirm($_("me.recordings.delete_confirm"))) {
|
deleteTarget = id;
|
||||||
return;
|
deleteOpen = true;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
async function confirmDeleteRecording() {
|
||||||
|
if (!deleteTarget) return;
|
||||||
|
deleting = true;
|
||||||
try {
|
try {
|
||||||
await deleteRecording(id);
|
await deleteRecording(deleteTarget);
|
||||||
recordings = recordings.filter((r) => r.id !== id);
|
recordings = recordings.filter((r) => r.id !== deleteTarget);
|
||||||
toast.success($_("me.recordings.delete_success"));
|
toast.success($_("me.recordings.delete_success"));
|
||||||
|
deleteOpen = false;
|
||||||
|
deleteTarget = null;
|
||||||
} catch {
|
} catch {
|
||||||
toast.error($_("me.recordings.delete_error"));
|
toast.error($_("me.recordings.delete_error"));
|
||||||
|
} finally {
|
||||||
|
deleting = false;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -641,3 +652,18 @@
|
|||||||
</Tabs>
|
</Tabs>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<Dialog.Root bind:open={deleteOpen}>
|
||||||
|
<Dialog.Content>
|
||||||
|
<Dialog.Header>
|
||||||
|
<Dialog.Title>{$_("me.recordings.delete_confirm")}</Dialog.Title>
|
||||||
|
<Dialog.Description>This cannot be undone.</Dialog.Description>
|
||||||
|
</Dialog.Header>
|
||||||
|
<Dialog.Footer>
|
||||||
|
<Button variant="outline" onclick={() => (deleteOpen = false)}>Cancel</Button>
|
||||||
|
<Button variant="destructive" disabled={deleting} onclick={confirmDeleteRecording}>
|
||||||
|
{deleting ? "Deleting…" : "Delete"}
|
||||||
|
</Button>
|
||||||
|
</Dialog.Footer>
|
||||||
|
</Dialog.Content>
|
||||||
|
</Dialog.Root>
|
||||||
|
|||||||
@@ -21,7 +21,8 @@ export interface User {
|
|||||||
slug: string | null;
|
slug: string | null;
|
||||||
description: string | null;
|
description: string | null;
|
||||||
tags: string[] | null;
|
tags: string[] | null;
|
||||||
role: "model" | "viewer" | "admin";
|
role: "model" | "viewer";
|
||||||
|
is_admin: boolean;
|
||||||
/** UUID of the avatar file */
|
/** UUID of the avatar file */
|
||||||
avatar: string | null;
|
avatar: string | null;
|
||||||
/** UUID of the banner file */
|
/** UUID of the banner file */
|
||||||
|
|||||||
Reference in New Issue
Block a user