From c00fe4f80ff93a860b9f9d85f0240ba8d263e0db Mon Sep 17 00:00:00 2001 From: kamtschatka Date: Sat, 19 Oct 2024 23:48:14 +0200 Subject: [PATCH] feature: Allow reseting user password, change their roles and create new users. Fixes #495 (#567) * How do I set the variable "user" or "system" for AI inference #262 changed from system to user * Make Myself an Admin #560 added user management functionality to the admin page * A bunch of UI fixes and simplifications --------- Co-authored-by: Mohamed Bassem --- .../dashboard/admin/AddUserDialog.tsx | 213 ++++++++++++++++++ .../dashboard/admin/ChangeRoleDialog.tsx | 154 +++++++++++++ .../dashboard/admin/ResetPasswordDialog.tsx | 145 ++++++++++++ .../components/dashboard/admin/UserList.tsx | 49 +++- apps/workers/inference.ts | 2 +- packages/shared/types/admin.ts | 25 ++ packages/shared/types/users.ts | 2 +- packages/trpc/routers/admin.ts | 64 ++++++ packages/trpc/routers/users.ts | 109 +++++---- 9 files changed, 711 insertions(+), 52 deletions(-) create mode 100644 apps/web/components/dashboard/admin/AddUserDialog.tsx create mode 100644 apps/web/components/dashboard/admin/ChangeRoleDialog.tsx create mode 100644 apps/web/components/dashboard/admin/ResetPasswordDialog.tsx create mode 100644 packages/shared/types/admin.ts diff --git a/apps/web/components/dashboard/admin/AddUserDialog.tsx b/apps/web/components/dashboard/admin/AddUserDialog.tsx new file mode 100644 index 00000000..a13c6b88 --- /dev/null +++ b/apps/web/components/dashboard/admin/AddUserDialog.tsx @@ -0,0 +1,213 @@ +import { useEffect, useState } from "react"; +import { ActionButton } from "@/components/ui/action-button"; +import { Button } from "@/components/ui/button"; +import { + Dialog, + DialogClose, + DialogContent, + DialogFooter, + DialogHeader, + DialogTitle, + DialogTrigger, +} from "@/components/ui/dialog"; +import { + Form, + FormControl, + FormField, + FormItem, + FormLabel, + FormMessage, +} from "@/components/ui/form"; +import { Input } from "@/components/ui/input"; +import { + Select, + SelectContent, + SelectItem, + SelectTrigger, + SelectValue, +} from "@/components/ui/select"; +import { toast } from "@/components/ui/use-toast"; +import { api } from "@/lib/trpc"; +import { zodResolver } from "@hookform/resolvers/zod"; +import { TRPCClientError } from "@trpc/client"; +import { useForm } from "react-hook-form"; +import { z } from "zod"; + +import { zAdminCreateUserSchema } from "@hoarder/shared/types/admin"; + +type AdminCreateUserSchema = z.infer; + +export default function AddUserDialog({ + children, +}: { + children?: React.ReactNode; +}) { + const apiUtils = api.useUtils(); + const [isOpen, onOpenChange] = useState(false); + const form = useForm({ + resolver: zodResolver(zAdminCreateUserSchema), + defaultValues: { + name: "", + email: "", + password: "", + confirmPassword: "", + role: "user", + }, + }); + const { mutate, isPending } = api.admin.createUser.useMutation({ + onSuccess: () => { + toast({ + description: "User created successfully", + }); + onOpenChange(false); + apiUtils.users.list.invalidate(); + apiUtils.admin.userStats.invalidate(); + }, + onError: (error) => { + if (error instanceof TRPCClientError) { + toast({ + variant: "destructive", + description: error.message, + }); + } else { + toast({ + variant: "destructive", + description: "Failed to create user", + }); + } + }, + }); + + useEffect(() => { + if (!isOpen) { + form.reset(); + } + }, [isOpen, form]); + + return ( + + {children} + + + Add User + +
+ mutate(val))}> +
+ ( + + Name + + + + + + )} + /> + ( + + Email + + + + + + )} + /> + ( + + Password + + + + + + )} + /> + ( + + Confirm Password + + + + + + )} + /> + ( + + Role + + + + + + )} + /> + + + + + + Create + + +
+
+ + + + ); +} diff --git a/apps/web/components/dashboard/admin/ChangeRoleDialog.tsx b/apps/web/components/dashboard/admin/ChangeRoleDialog.tsx new file mode 100644 index 00000000..26ad5dce --- /dev/null +++ b/apps/web/components/dashboard/admin/ChangeRoleDialog.tsx @@ -0,0 +1,154 @@ +import { useEffect, useState } from "react"; +import { ActionButton } from "@/components/ui/action-button"; +import { Button } from "@/components/ui/button"; +import { + Dialog, + DialogClose, + DialogContent, + DialogFooter, + DialogHeader, + DialogTitle, + DialogTrigger, +} from "@/components/ui/dialog"; +import { + Form, + FormControl, + FormField, + FormItem, + FormLabel, + FormMessage, +} from "@/components/ui/form"; +import { + Select, + SelectContent, + SelectItem, + SelectTrigger, + SelectValue, +} from "@/components/ui/select"; +import { toast } from "@/components/ui/use-toast"; +import { api } from "@/lib/trpc"; +import { zodResolver } from "@hookform/resolvers/zod"; +import { TRPCClientError } from "@trpc/client"; +import { useForm } from "react-hook-form"; +import { z } from "zod"; + +import { changeRoleSchema } from "@hoarder/shared/types/admin"; + +type ChangeRoleSchema = z.infer; + +interface ChangeRoleDialogProps { + userId: string; + currentRole: "user" | "admin"; + children?: React.ReactNode; +} + +export default function ChangeRoleDialog({ + userId, + currentRole, + children, +}: ChangeRoleDialogProps) { + const apiUtils = api.useUtils(); + const [isOpen, onOpenChange] = useState(false); + const form = useForm({ + resolver: zodResolver(changeRoleSchema), + defaultValues: { + userId, + role: currentRole, + }, + }); + const { mutate, isPending } = api.admin.changeRole.useMutation({ + onSuccess: () => { + toast({ + description: "Role changed successfully", + }); + apiUtils.users.list.invalidate(); + onOpenChange(false); + }, + onError: (error) => { + if (error instanceof TRPCClientError) { + toast({ + variant: "destructive", + description: error.message, + }); + } else { + toast({ + variant: "destructive", + description: "Failed to change role", + }); + } + }, + }); + + useEffect(() => { + if (isOpen) { + form.reset(); + } + }, [isOpen, form]); + + return ( + + {children} + + + + Change Role + +
+ mutate(val))}> +
+ ( + + Role + + + + + + )} + /> + ( + + + + + + )} + /> + + + + + + Change + + +
+
+ + + + ); +} diff --git a/apps/web/components/dashboard/admin/ResetPasswordDialog.tsx b/apps/web/components/dashboard/admin/ResetPasswordDialog.tsx new file mode 100644 index 00000000..32183d1a --- /dev/null +++ b/apps/web/components/dashboard/admin/ResetPasswordDialog.tsx @@ -0,0 +1,145 @@ +import { useEffect, useState } from "react"; +import { ActionButton } from "@/components/ui/action-button"; +import { Button } from "@/components/ui/button"; +import { + Dialog, + DialogClose, + DialogContent, + DialogFooter, + DialogHeader, + DialogTitle, + DialogTrigger, +} from "@/components/ui/dialog"; +import { + Form, + FormControl, + FormField, + FormItem, + FormLabel, + FormMessage, +} from "@/components/ui/form"; +import { Input } from "@/components/ui/input"; +import { toast } from "@/components/ui/use-toast"; +import { api } from "@/lib/trpc"; // Adjust the import path as needed +import { zodResolver } from "@hookform/resolvers/zod"; +import { TRPCClientError } from "@trpc/client"; +import { useForm } from "react-hook-form"; +import { z } from "zod"; + +import { resetPasswordSchema } from "@hoarder/shared/types/admin"; + +interface ResetPasswordDialogProps { + userId: string; + children?: React.ReactNode; +} + +type ResetPasswordSchema = z.infer; + +export default function ResetPasswordDialog({ + children, + userId, +}: ResetPasswordDialogProps) { + const [isOpen, onOpenChange] = useState(false); + const form = useForm({ + resolver: zodResolver(resetPasswordSchema), + defaultValues: { + userId, + newPassword: "", + newPasswordConfirm: "", + }, + }); + const { mutate, isPending } = api.admin.resetPassword.useMutation({ + onSuccess: () => { + toast({ + description: "Password reset successfully", + }); + onOpenChange(false); + }, + onError: (error) => { + if (error instanceof TRPCClientError) { + toast({ + variant: "destructive", + description: error.message, + }); + } else { + toast({ + variant: "destructive", + description: "Failed to reset password", + }); + } + }, + }); + + useEffect(() => { + if (isOpen) { + form.reset(); + } + }, [isOpen, form]); + + return ( + + {children} + + + Reset Password + +
+ mutate(val))}> +
+ ( + + New Password + + + + + + )} + /> + ( + + Confirm New Password + + + + + + )} + /> + + + + + + Reset + + +
+
+ + + + ); +} diff --git a/apps/web/components/dashboard/admin/UserList.tsx b/apps/web/components/dashboard/admin/UserList.tsx index 65bf4068..2937df28 100644 --- a/apps/web/components/dashboard/admin/UserList.tsx +++ b/apps/web/components/dashboard/admin/UserList.tsx @@ -1,6 +1,7 @@ "use client"; -import { ActionButton } from "@/components/ui/action-button"; +import { ActionButtonWithTooltip } from "@/components/ui/action-button"; +import { ButtonWithTooltip } from "@/components/ui/button"; import LoadingSpinner from "@/components/ui/spinner"; import { Table, @@ -12,9 +13,13 @@ import { } from "@/components/ui/table"; import { toast } from "@/components/ui/use-toast"; import { api } from "@/lib/trpc"; -import { Trash } from "lucide-react"; +import { Check, KeyRound, Pencil, Trash, UserPlus, X } from "lucide-react"; import { useSession } from "next-auth/react"; +import AddUserDialog from "./AddUserDialog"; +import ChangeRoleDialog from "./ChangeRoleDialog"; +import ResetPasswordDialog from "./ResetPasswordDialog"; + function toHumanReadableSize(size: number) { const sizes = ["Bytes", "KB", "MB", "GB", "TB"]; if (size === 0) return "0 Bytes"; @@ -49,7 +54,14 @@ export default function UsersSection() { return ( <> -
Users List
+
+ Users List + + + + + +
@@ -58,7 +70,8 @@ export default function UsersSection() { Num Bookmarks Asset Sizes Role - Action + Local User + Actions {users.users.map((u) => ( @@ -72,15 +85,37 @@ export default function UsersSection() { {toHumanReadableSize(userStats[u.id].assetSizes)} {u.role} - - + {u.localUser ? : } + + + deleteUser({ userId: u.id })} loading={isDeletionPending} disabled={session!.user.id == u.id} > - + + + + + + + + + + + ))} diff --git a/apps/workers/inference.ts b/apps/workers/inference.ts index 41ceffd6..fed9478f 100644 --- a/apps/workers/inference.ts +++ b/apps/workers/inference.ts @@ -43,7 +43,7 @@ class OpenAIInferenceClient implements InferenceClient { async inferFromText(prompt: string): Promise { const chatCompletion = await this.openAI.chat.completions.create({ - messages: [{ role: "system", content: prompt }], + messages: [{ role: "user", content: prompt }], model: serverConfig.inference.textModel, response_format: { type: "json_object" }, }); diff --git a/packages/shared/types/admin.ts b/packages/shared/types/admin.ts new file mode 100644 index 00000000..8b16dfd0 --- /dev/null +++ b/packages/shared/types/admin.ts @@ -0,0 +1,25 @@ +import { z } from "zod"; + +import { PASSWORD_MAX_LENGTH, zSignUpSchema } from "./users"; + +export const zRoleSchema = z.object({ + role: z.enum(["user", "admin"]), +}); + +export const zAdminCreateUserSchema = zSignUpSchema.and(zRoleSchema); + +export const changeRoleSchema = z.object({ + userId: z.string(), + role: z.enum(["user", "admin"]), +}); + +export const resetPasswordSchema = z + .object({ + userId: z.string(), + newPassword: z.string().min(8).max(PASSWORD_MAX_LENGTH), + newPasswordConfirm: z.string(), + }) + .refine((data) => data.newPassword === data.newPasswordConfirm, { + message: "Passwords don't match", + path: ["newPasswordConfirm"], + }); diff --git a/packages/shared/types/users.ts b/packages/shared/types/users.ts index f78083ee..86e6af22 100644 --- a/packages/shared/types/users.ts +++ b/packages/shared/types/users.ts @@ -1,6 +1,6 @@ import { z } from "zod"; -const PASSWORD_MAX_LENGTH = 100; +export const PASSWORD_MAX_LENGTH = 100; export const zSignUpSchema = z .object({ diff --git a/packages/trpc/routers/admin.ts b/packages/trpc/routers/admin.ts index d8ffe9d3..38aa0031 100644 --- a/packages/trpc/routers/admin.ts +++ b/packages/trpc/routers/admin.ts @@ -1,3 +1,4 @@ +import { TRPCError } from "@trpc/server"; import { count, eq, sum } from "drizzle-orm"; import { z } from "zod"; @@ -9,8 +10,15 @@ import { TidyAssetsQueue, triggerSearchReindex, } from "@hoarder/shared/queues"; +import { + changeRoleSchema, + resetPasswordSchema, + zAdminCreateUserSchema, +} from "@hoarder/shared/types/admin"; +import { hashPassword } from "../auth"; import { adminProcedure, router } from "../index"; +import { createUser } from "./users"; export const adminAppRouter = router({ stats: adminProcedure @@ -213,4 +221,60 @@ export const adminAppRouter = router({ return results; }), + createUser: adminProcedure + .input(zAdminCreateUserSchema) + .output( + z.object({ + id: z.string(), + name: z.string(), + email: z.string(), + role: z.enum(["user", "admin"]).nullable(), + }), + ) + .mutation(async ({ input, ctx }) => { + return createUser(input, ctx, input.role); + }), + changeRole: adminProcedure + .input(changeRoleSchema) + .mutation(async ({ input, ctx }) => { + if (ctx.user.id == input.userId) { + throw new TRPCError({ + code: "BAD_REQUEST", + message: "Cannot change own role", + }); + } + const result = await ctx.db + .update(users) + .set({ role: input.role }) + .where(eq(users.id, input.userId)); + + if (!result.changes) { + throw new TRPCError({ + code: "NOT_FOUND", + message: "User not found", + }); + } + }), + resetPassword: adminProcedure + .input(resetPasswordSchema) + .mutation(async ({ input, ctx }) => { + if (ctx.user.id == input.userId) { + throw new TRPCError({ + code: "BAD_REQUEST", + message: "Cannot reset own password", + }); + } + const hashedPassword = await hashPassword(input.newPassword); + const result = await ctx.db + .update(users) + .set({ password: hashedPassword }) + .where(eq(users.id, input.userId)); + + if (result.changes == 0) { + throw new TRPCError({ + code: "NOT_FOUND", + message: "User not found", + }); + } + }), }); diff --git a/packages/trpc/routers/users.ts b/packages/trpc/routers/users.ts index 2149edd4..2200ec8b 100644 --- a/packages/trpc/routers/users.ts +++ b/packages/trpc/routers/users.ts @@ -16,10 +16,58 @@ import { hashPassword, validatePassword } from "../auth"; import { adminProcedure, authedProcedure, + Context, publicProcedure, router, } from "../index"; +export async function createUser( + input: z.infer, + ctx: Context, + role?: "user" | "admin", +) { + return ctx.db.transaction(async (trx) => { + let userRole = role; + if (!userRole) { + const [{ count: userCount }] = await trx + .select({ count: count() }) + .from(users); + userRole = userCount == 0 ? "admin" : "user"; + } + + try { + const result = await trx + .insert(users) + .values({ + name: input.name, + email: input.email, + password: await hashPassword(input.password), + role: userRole, + }) + .returning({ + id: users.id, + name: users.name, + email: users.email, + role: users.role, + }); + return result[0]; + } catch (e) { + if (e instanceof SqliteError) { + if (e.code == "SQLITE_CONSTRAINT_UNIQUE") { + throw new TRPCError({ + code: "BAD_REQUEST", + message: "Email is already taken", + }); + } + } + throw new TRPCError({ + code: "INTERNAL_SERVER_ERROR", + message: "Something went wrong", + }); + } + }); +} + export const usersAppRouter = router({ create: publicProcedure .input(zSignUpSchema) @@ -44,40 +92,7 @@ export const usersAppRouter = router({ message: errorMessage, }); } - // TODO: This is racy, but that's probably fine. - const [{ count: userCount }] = await ctx.db - .select({ count: count() }) - .from(users); - try { - const result = await ctx.db - .insert(users) - .values({ - name: input.name, - email: input.email, - password: await hashPassword(input.password), - role: userCount == 0 ? "admin" : "user", - }) - .returning({ - id: users.id, - name: users.name, - email: users.email, - role: users.role, - }); - return result[0]; - } catch (e) { - if (e instanceof SqliteError) { - if (e.code == "SQLITE_CONSTRAINT_UNIQUE") { - throw new TRPCError({ - code: "BAD_REQUEST", - message: "Email is already taken", - }); - } - } - throw new TRPCError({ - code: "INTERNAL_SERVER_ERROR", - message: "Something went wrong", - }); - } + return createUser(input, ctx); }), list: adminProcedure .output( @@ -88,20 +103,28 @@ export const usersAppRouter = router({ name: z.string(), email: z.string(), role: z.enum(["user", "admin"]).nullable(), + localUser: z.boolean(), }), ), }), ) .query(async ({ ctx }) => { - const users = await ctx.db.query.users.findMany({ - columns: { - id: true, - name: true, - email: true, - role: true, - }, - }); - return { users }; + const dbUsers = await ctx.db + .select({ + id: users.id, + name: users.name, + email: users.email, + role: users.role, + password: users.password, + }) + .from(users); + + return { + users: dbUsers.map(({ password, ...user }) => ({ + ...user, + localUser: password !== null, + })), + }; }), changePassword: authedProcedure .input(