chore: implement pr feedback

apps/web/src/app/(dashboard)/admin/users/[id]/page.tsx

@@ -3,21 +3,23 @@
 import { useRouter } from 'next/navigation';
 
 import { zodResolver } from '@hookform/resolvers/zod';
-import { Loader } from 'lucide-react';
-import { Controller, useForm } from 'react-hook-form';
+import { useForm } from 'react-hook-form';
 
 import { trpc } from '@documenso/trpc/react';
 import { Button } from '@documenso/ui/primitives/button';
 import { Combobox } from '@documenso/ui/primitives/combobox';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
 import { Input } from '@documenso/ui/primitives/input';
-import { Label } from '@documenso/ui/primitives/label';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
-import { FormErrorMessage } from '../../../../../components/form/form-error-message';
-import {
-  TUserFormSchema,
-  ZUserFormSchema,
-} from '../../../../../providers/admin-user-profile-update.types';
+import { TUserFormSchema, ZUserFormSchema } from '~/providers/admin-user-profile-update.types';
 
 export default function UserPage({ params }: { params: { id: number } }) {
   const { toast } = useToast();
@@ -34,21 +36,11 @@ export default function UserPage({ params }: { params: { id: number } }) {
 
   const user = result.data;
 
-  const roles = user?.roles;
-  let rolesArr: string[] = [];
-
-  if (roles) {
-    rolesArr = Object.values(roles);
-  }
+  const roles = user?.roles ?? [];
 
   const { mutateAsync: updateUserMutation } = trpc.admin.updateUser.useMutation();
 
-  const {
-    register,
-    control,
-    handleSubmit,
-    formState: { errors, isSubmitting },
-  } = useForm<TUserFormSchema>({
+  const form = useForm<TUserFormSchema>({
     resolver: zodResolver(ZUserFormSchema),
     values: {
       name: user?.name ?? '',
@@ -85,42 +77,69 @@ export default function UserPage({ params }: { params: { id: number } }) {
   return (
     <div>
       <h2 className="text-4xl font-semibold">Manage {user?.name}'s profile</h2>
-      <form className="mt-6 flex w-full flex-col gap-y-4" onSubmit={handleSubmit(onSubmit)}>
-        <div>
-          <Label htmlFor="name" className="text-muted-foreground">
-            Name
-          </Label>
-          <Input defaultValue={user?.name ?? ''} type="text" {...register('name')} />
-          <FormErrorMessage className="mt-1.5" error={errors.name} />
-        </div>
-        <div>
-          <Label htmlFor="email" className="text-muted-foreground">
-            Email
-          </Label>
-          <Input defaultValue={user?.email} type="email" {...register('email')} />
-          <FormErrorMessage className="mt-1.5" error={errors.email} />
-        </div>
-        <div className="flex flex-col gap-2">
-          <Label htmlFor="roles" className="text-muted-foreground">
-            User roles
-          </Label>
-          <Controller
-            control={control}
-            name="roles"
-            render={({ field: { onChange } }) => (
-              <Combobox listValues={rolesArr} onChange={(values: string[]) => onChange(values)} />
-            )}
-          />
-          <FormErrorMessage className="mt-1.5" error={errors.roles} />
-        </div>
+      <Form {...form}>
+        <form onSubmit={form.handleSubmit(onSubmit)}>
+          <fieldset className="mt-6 flex w-full flex-col gap-y-4">
+            <FormField
+              control={form.control}
+              name="name"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel required className="text-muted-foreground">
+                    Name
+                  </FormLabel>
+                  <FormControl>
+                    <Input type="text" {...field} value={field.value ?? ''} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name="email"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel required className="text-muted-foreground">
+                    Email
+                  </FormLabel>
+                  <FormControl>
+                    <Input type="text" {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
 
-        <div className="mt-4">
-          <Button type="submit" disabled={isSubmitting}>
-            {isSubmitting && <Loader className="mr-2 h-5 w-5 animate-spin" />}
-            Update user
-          </Button>
-        </div>
-      </form>
+            <FormField
+              control={form.control}
+              name="roles"
+              render={({ field: { onChange } }) => (
+                <FormItem>
+                  <fieldset className="flex flex-col gap-2">
+                    <FormLabel required className="text-muted-foreground">
+                      Roles
+                    </FormLabel>
+                    <FormControl>
+                      <Combobox
+                        listValues={roles}
+                        onChange={(values: string[]) => onChange(values)}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </fieldset>
+                </FormItem>
+              )}
+            />
+
+            <div className="mt-4">
+              <Button type="submit" loading={form.formState.isSubmitting}>
+                Update user
+              </Button>
+            </div>
+          </fieldset>
+        </form>
+      </Form>
     </div>
   );
 }

packages/lib/server-only/admin/update-user.ts

@@ -15,7 +15,7 @@ export const updateUser = async ({ id, name, email, roles }: UpdateUserOptions)
     },
   });
 
-  const updatedUser = await prisma.user.update({
+  return await prisma.user.update({
     where: {
       id,
     },
@@ -25,5 +25,4 @@ export const updateUser = async ({ id, name, email, roles }: UpdateUserOptions)
       roles,
     },
   });
-  return updatedUser;
 };

packages/lib/server-only/user/get-all-users.ts

@@ -2,7 +2,7 @@ import { Prisma } from '@prisma/client';
 
 import { prisma } from '@documenso/prisma';
 
-type getAllUsersProps = {
+type GetAllUsersProps = {
   username: string;
   email: string;
   page: number;
@@ -14,7 +14,7 @@ export const findUsers = async ({
   email = '',
   page = 1,
   perPage = 10,
-}: getAllUsersProps) => {
+}: GetAllUsersProps) => {
   const whereClause = Prisma.validator<Prisma.UserWhereInput>()({
     OR: [
       {

packages/trpc/server/admin-router/router.ts

@@ -1,24 +1,14 @@
 import { TRPCError } from '@trpc/server';
 
-import { isAdmin } from '@documenso/lib/next-auth/guards/is-admin';
 import { updateUser } from '@documenso/lib/server-only/admin/update-user';
 
-import { authenticatedProcedure, router } from '../trpc';
+import { adminProcedure, router } from '../trpc';
 import { ZUpdateProfileMutationByAdminSchema } from './schema';
 
 export const adminRouter = router({
-  updateUser: authenticatedProcedure
+  updateUser: adminProcedure
     .input(ZUpdateProfileMutationByAdminSchema)
-    .mutation(async ({ input, ctx }) => {
-      const isUserAdmin = isAdmin(ctx.user);
-
-      if (!isUserAdmin) {
-        throw new TRPCError({
-          code: 'UNAUTHORIZED',
-          message: 'Not authorized to perform this action.',
-        });
-      }
-
+    .mutation(async ({ input }) => {
       const { id, name, email, roles } = input;
 
       try {

packages/trpc/server/profile-router/router.ts

@@ -1,13 +1,12 @@
 import { TRPCError } from '@trpc/server';
 
-import { isAdmin } from '@documenso/lib/next-auth/guards/is-admin';
 import { forgotPassword } from '@documenso/lib/server-only/user/forgot-password';
 import { getUserById } from '@documenso/lib/server-only/user/get-user-by-id';
 import { resetPassword } from '@documenso/lib/server-only/user/reset-password';
 import { updatePassword } from '@documenso/lib/server-only/user/update-password';
 import { updateProfile } from '@documenso/lib/server-only/user/update-profile';
 
-import { authenticatedProcedure, procedure, router } from '../trpc';
+import { adminProcedure, authenticatedProcedure, procedure, router } from '../trpc';
 import {
   ZForgotPasswordFormSchema,
   ZResetPasswordFormSchema,
@@ -17,29 +16,18 @@ import {
 } from './schema';
 
 export const profileRouter = router({
-  getUser: authenticatedProcedure
-    .input(ZRetrieveUserByIdQuerySchema)
-    .query(async ({ input, ctx }) => {
-      const isUserAdmin = isAdmin(ctx.user);
+  getUser: adminProcedure.input(ZRetrieveUserByIdQuerySchema).query(async ({ input }) => {
+    try {
+      const { id } = input;
 
-      if (!isUserAdmin) {
-        throw new TRPCError({
-          code: 'UNAUTHORIZED',
-          message: 'Not authorized to perform this action.',
-        });
-      }
-
-      try {
-        const { id } = input;
-
-        return await getUserById({ id });
-      } catch (err) {
-        throw new TRPCError({
-          code: 'BAD_REQUEST',
-          message: 'We were unable to retrieve the specified account. Please try again.',
-        });
-      }
-    }),
+      return await getUserById({ id });
+    } catch (err) {
+      throw new TRPCError({
+        code: 'BAD_REQUEST',
+        message: 'We were unable to retrieve the specified account. Please try again.',
+      });
+    }
+  }),
 
   updateProfile: authenticatedProcedure
     .input(ZUpdateProfileMutationSchema)

packages/trpc/server/trpc.ts

@@ -1,6 +1,8 @@
 import { TRPCError, initTRPC } from '@trpc/server';
 import SuperJSON from 'superjson';
 
+import { isAdmin } from '@documenso/lib/next-auth/guards/is-admin';
+
 import { TrpcContext } from './context';
 
 const t = initTRPC.context<TrpcContext>().create({
@@ -28,9 +30,37 @@ export const authenticatedMiddleware = t.middleware(async ({ ctx, next }) => {
   });
 });
 
+export const adminMiddleware = t.middleware(async ({ ctx, next }) => {
+  if (!ctx.session || !ctx.user) {
+    throw new TRPCError({
+      code: 'UNAUTHORIZED',
+      message: 'You must be logged in to perform this action.',
+    });
+  }
+
+  const isUserAdmin = isAdmin(ctx.user);
+
+  if (!isUserAdmin) {
+    throw new TRPCError({
+      code: 'UNAUTHORIZED',
+      message: 'Not authorized to perform this action.',
+    });
+  }
+
+  return await next({
+    ctx: {
+      ...ctx,
+
+      user: ctx.user,
+      session: ctx.session,
+    },
+  });
+});
+
 /**
  * Routers and Procedures
  */
 export const router = t.router;
 export const procedure = t.procedure;
 export const authenticatedProcedure = t.procedure.use(authenticatedMiddleware);
+export const adminProcedure = t.procedure.use(adminMiddleware);

packages/ui/primitives/combobox.tsx

@@ -44,40 +44,38 @@ const Combobox = ({ listValues, onChange }: ComboboxProps) => {
   };
 
   return (
-    <>
-      <Popover open={open} onOpenChange={setOpen}>
-        <PopoverTrigger asChild>
-          <Button
-            variant="outline"
-            role="combobox"
-            aria-expanded={open}
-            className="w-[200px] justify-between"
-          >
-            {selectedValues.length > 0 ? selectedValues.join(', ') : 'Select values...'}
-            <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
-          </Button>
-        </PopoverTrigger>
-        <PopoverContent className="w-[200px] p-0">
-          <Command>
-            <CommandInput placeholder={selectedValues.join(', ')} />
-            <CommandEmpty>No value found.</CommandEmpty>
-            <CommandGroup>
-              {allRoles.map((value: string, i: number) => (
-                <CommandItem key={i} onSelect={() => handleSelect(value)}>
-                  <Check
-                    className={cn(
-                      'mr-2 h-4 w-4',
-                      selectedValues.includes(value) ? 'opacity-100' : 'opacity-0',
-                    )}
-                  />
-                  {value}
-                </CommandItem>
-              ))}
-            </CommandGroup>
-          </Command>
-        </PopoverContent>
-      </Popover>
-    </>
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="outline"
+          role="combobox"
+          aria-expanded={open}
+          className="w-[200px] justify-between"
+        >
+          {selectedValues.length > 0 ? selectedValues.join(', ') : 'Select values...'}
+          <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-[200px] p-0">
+        <Command>
+          <CommandInput placeholder={selectedValues.join(', ')} />
+          <CommandEmpty>No value found.</CommandEmpty>
+          <CommandGroup>
+            {allRoles.map((value: string, i: number) => (
+              <CommandItem key={i} onSelect={() => handleSelect(value)}>
+                <Check
+                  className={cn(
+                    'mr-2 h-4 w-4',
+                    selectedValues.includes(value) ? 'opacity-100' : 'opacity-0',
+                  )}
+                />
+                {value}
+              </CommandItem>
+            ))}
+          </CommandGroup>
+        </Command>
+      </PopoverContent>
+    </Popover>
   );
 };