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 <me@mbassem.com>

4 files changed, 554 insertions, 7 deletions

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<typeof zAdminCreateUserSchema>;

+

+export default function AddUserDialog({

+  children,

+}: {

+  children?: React.ReactNode;

+}) {

+  const apiUtils = api.useUtils();

+  const [isOpen, onOpenChange] = useState(false);

+  const form = useForm<AdminCreateUserSchema>({

+    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 (

+    <Dialog open={isOpen} onOpenChange={onOpenChange}>

+      <DialogTrigger asChild>{children}</DialogTrigger>

+      <DialogContent>

+        <DialogHeader>

+          <DialogTitle>Add User</DialogTitle>

+        </DialogHeader>

+        <Form {...form}>

+          <form onSubmit={form.handleSubmit((val) => mutate(val))}>

+            <div className="flex w-full flex-col space-y-2">

+              <FormField

+                control={form.control}

+                name="name"

+                render={({ field }) => (

+                  <FormItem>

+                    <FormLabel>Name</FormLabel>

+                    <FormControl>

+                      <Input

+                        type="text"

+                        placeholder="Name"

+                        {...field}

+                        className="w-full rounded border p-2"

+                      />

+                    </FormControl>

+                    <FormMessage />

+                  </FormItem>

+                )}

+              />

+              <FormField

+                control={form.control}

+                name="email"

+                render={({ field }) => (

+                  <FormItem>

+                    <FormLabel>Email</FormLabel>

+                    <FormControl>

+                      <Input

+                        type="email"

+                        placeholder="Email"

+                        {...field}

+                        className="w-full rounded border p-2"

+                      />

+                    </FormControl>

+                    <FormMessage />

+                  </FormItem>

+                )}

+              />

+              <FormField

+                control={form.control}

+                name="password"

+                render={({ field }) => (

+                  <FormItem>

+                    <FormLabel>Password</FormLabel>

+                    <FormControl>

+                      <Input

+                        type="password"

+                        placeholder="Password"

+                        {...field}

+                        className="w-full rounded border p-2"

+                      />

+                    </FormControl>

+                    <FormMessage />

+                  </FormItem>

+                )}

+              />

+              <FormField

+                control={form.control}

+                name="confirmPassword"

+                render={({ field }) => (

+                  <FormItem>

+                    <FormLabel>Confirm Password</FormLabel>

+                    <FormControl>

+                      <Input

+                        type="password"

+                        placeholder="Confirm Password"

+                        {...field}

+                        className="w-full rounded border p-2"

+                      />

+                    </FormControl>

+                    <FormMessage />

+                  </FormItem>

+                )}

+              />

+              <FormField

+                control={form.control}

+                name="role"

+                render={({ field }) => (

+                  <FormItem>

+                    <FormLabel>Role</FormLabel>

+                    <FormControl>

+                      <Select

+                        value={field.value}

+                        onValueChange={field.onChange}

+                      >

+                        <SelectTrigger className="w-full">

+                          <SelectValue />

+                        </SelectTrigger>

+                        <SelectContent>

+                          <SelectItem value="user">User</SelectItem>

+                          <SelectItem value="admin">Admin</SelectItem>

+                        </SelectContent>

+                      </Select>

+                    </FormControl>

+                    <FormMessage />

+                  </FormItem>

+                )}

+              />

+              <DialogFooter className="sm:justify-end">

+                <DialogClose asChild>

+                  <Button type="button" variant="secondary">

+                    Close

+                  </Button>

+                </DialogClose>

+                <ActionButton

+                  type="submit"

+                  loading={isPending}

+                  disabled={isPending}

+                >

+                  Create

+                </ActionButton>

+              </DialogFooter>

+            </div>

+          </form>

+        </Form>

+      </DialogContent>

+    </Dialog>

+  );

+}

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<typeof changeRoleSchema>;

+

+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<ChangeRoleSchema>({

+    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 (

+    <Dialog open={isOpen} onOpenChange={onOpenChange}>

+      <DialogTrigger asChild>{children}</DialogTrigger>

+      <DialogContent>

+        <DialogTrigger asChild></DialogTrigger>

+        <DialogHeader>

+          <DialogTitle>Change Role</DialogTitle>

+        </DialogHeader>

+        <Form {...form}>

+          <form onSubmit={form.handleSubmit((val) => mutate(val))}>

+            <div className="flex w-full flex-col space-y-2">

+              <FormField

+                control={form.control}

+                name="role"

+                render={({ field }) => (

+                  <FormItem>

+                    <FormLabel>Role</FormLabel>

+                    <FormControl>

+                      <Select

+                        onValueChange={field.onChange}

+                        defaultValue={field.value}

+                      >

+                        <SelectTrigger className="w-full">

+                          <SelectValue />

+                        </SelectTrigger>

+                        <SelectContent>

+                          <SelectItem value="user">User</SelectItem>

+                          <SelectItem value="admin">Admin</SelectItem>

+                        </SelectContent>

+                      </Select>

+                    </FormControl>

+                    <FormMessage />

+                  </FormItem>

+                )}

+              />

+              <FormField

+                control={form.control}

+                name="userId"

+                render={({ field }) => (

+                  <FormItem>

+                    <FormControl>

+                      <input type="hidden" {...field} />

+                    </FormControl>

+                  </FormItem>

+                )}

+              />

+              <DialogFooter className="sm:justify-end">

+                <DialogClose asChild>

+                  <Button type="button" variant="secondary">

+                    Close

+                  </Button>

+                </DialogClose>

+                <ActionButton

+                  type="submit"

+                  loading={isPending}

+                  disabled={isPending}

+                >

+                  Change

+                </ActionButton>

+              </DialogFooter>

+            </div>

+          </form>

+        </Form>

+      </DialogContent>

+    </Dialog>

+  );

+}

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<typeof resetPasswordSchema>;

+

+export default function ResetPasswordDialog({

+  children,

+  userId,

+}: ResetPasswordDialogProps) {

+  const [isOpen, onOpenChange] = useState(false);

+  const form = useForm<ResetPasswordSchema>({

+    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 (

+    <Dialog open={isOpen} onOpenChange={onOpenChange}>

+      <DialogTrigger asChild>{children}</DialogTrigger>

+      <DialogContent>

+        <DialogHeader>

+          <DialogTitle>Reset Password</DialogTitle>

+        </DialogHeader>

+        <Form {...form}>

+          <form onSubmit={form.handleSubmit((val) => mutate(val))}>

+            <div className="flex w-full flex-col space-y-2">

+              <FormField

+                control={form.control}

+                name="newPassword"

+                render={({ field }) => (

+                  <FormItem>

+                    <FormLabel>New Password</FormLabel>

+                    <FormControl>

+                      <Input

+                        type="password"

+                        placeholder="New Password"

+                        {...field}

+                        className="w-full rounded border p-2"

+                      />

+                    </FormControl>

+                    <FormMessage />

+                  </FormItem>

+                )}

+              />

+              <FormField

+                control={form.control}

+                name="newPasswordConfirm"

+                render={({ field }) => (

+                  <FormItem>

+                    <FormLabel>Confirm New Password</FormLabel>

+                    <FormControl>

+                      <Input

+                        type="password"

+                        placeholder="Confirm New Password"

+                        {...field}

+                        className="w-full rounded border p-2"

+                      />

+                    </FormControl>

+                    <FormMessage />

+                  </FormItem>

+                )}

+              />

+              <DialogFooter className="sm:justify-end">

+                <DialogClose asChild>

+                  <Button type="button" variant="secondary">

+                    Close

+                  </Button>

+                </DialogClose>

+                <ActionButton

+                  type="submit"

+                  loading={isPending}

+                  disabled={isPending}

+                >

+                  Reset

+                </ActionButton>

+              </DialogFooter>

+            </div>

+          </form>

+        </Form>

+      </DialogContent>

+    </Dialog>

+  );

+}

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 (
     <>
-      <div className="mb-2 text-xl font-medium">Users List</div>
+      <div className="mb-2 flex items-center justify-between text-xl font-medium">
+        <span>Users List</span>
+        <AddUserDialog>
+          <ButtonWithTooltip tooltip="Create User" variant="outline">
+            <UserPlus size={16} />
+          </ButtonWithTooltip>
+        </AddUserDialog>
+      </div>
 
       <Table>
         <TableHeader className="bg-gray-200">
@@ -58,7 +70,8 @@ export default function UsersSection() {
           <TableHead>Num Bookmarks</TableHead>
           <TableHead>Asset Sizes</TableHead>
           <TableHead>Role</TableHead>
-          <TableHead>Action</TableHead>
+          <TableHead>Local User</TableHead>
+          <TableHead>Actions</TableHead>
         </TableHeader>
         <TableBody>
           {users.users.map((u) => (
@@ -72,15 +85,37 @@ export default function UsersSection() {
                 {toHumanReadableSize(userStats[u.id].assetSizes)}
               </TableCell>
               <TableCell className="py-1 capitalize">{u.role}</TableCell>
-              <TableCell className="py-1">
-                <ActionButton
+              <TableCell className="py-1 capitalize">
+                {u.localUser ? <Check /> : <X />}
+              </TableCell>
+              <TableCell className="flex gap-1 py-1">
+                <ActionButtonWithTooltip
+                  tooltip="Delete user"
                   variant="outline"
                   onClick={() => deleteUser({ userId: u.id })}
                   loading={isDeletionPending}
                   disabled={session!.user.id == u.id}
                 >
                   <Trash size={16} color="red" />
-                </ActionButton>
+                </ActionButtonWithTooltip>
+                <ResetPasswordDialog userId={u.id}>
+                  <ButtonWithTooltip
+                    tooltip="Reset password"
+                    variant="outline"
+                    disabled={session!.user.id == u.id || !u.localUser}
+                  >
+                    <KeyRound size={16} color="red" />
+                  </ButtonWithTooltip>
+                </ResetPasswordDialog>
+                <ChangeRoleDialog userId={u.id} currentRole={u.role!}>
+                  <ButtonWithTooltip
+                    tooltip="Change role"
+                    variant="outline"
+                    disabled={session!.user.id == u.id}
+                  >
+                    <Pencil size={16} color="red" />
+                  </ButtonWithTooltip>
+                </ChangeRoleDialog>
               </TableCell>
             </TableRow>
           ))}