feat: implement stakeholder update and access update features (#77)

G3root · dahal · web-flow · commit f22f1c7c32ad · 2024-01-28T16:04:01.000-06:00
* feat: add admin only procedure

* feat: add deactivate user procedure

* feat: add role in membership

* feat: add update user

* feat: add reinvite option

* refactor: revoke existing tokens

* fix: use delete many

* fix: disable email editing

* fix: some copies

---------

Co-authored-by: Puru D &lt;puru@dahal.me&gt;
diff --git a/src/components/stakeholder/member-modal.tsx b/src/components/stakeholder/member-modal.tsx
@@ -28,24 +28,28 @@ import {
   type TypeZodInviteMemberMutationSchema,
 } from "@/trpc/routers/stakeholder-router/schema";
 
-import { type z } from "zod";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { useForm } from "react-hook-form";
-type InviteMemberMutationSchema = z.infer<typeof ZodInviteMemberMutationSchema>;
+
 type MemberModalType = {
   title: string;
   subtitle: string;
-  member: InviteMemberMutationSchema;
+  member: TypeZodInviteMemberMutationSchema;
   children: React.ReactNode;
-};
+} & editModeType;
+
+type editModeType =
+  | { isEditMode: true; membershipId: string }
+  | { isEditMode?: false; membershipId?: never };
 
 const MemberModal = ({
   title,
   subtitle,
   member,
   children,
+  ...rest
 }: MemberModalType) => {
   const router = useRouter();
   const [open, setOpen] = useState(false);
@@ -55,9 +59,28 @@ const MemberModal = ({
       setOpen(false);
       toast({
         variant: "default",
-        title: "🎉 Invitation successfully sent!",
+        title: "🎉 Invited!",
+        description: "You have successfully invited the stakeholder.",
+      });
+      router.refresh();
+    },
+    onError: (error) => {
+      toast({
+        variant: "destructive",
+        title: error.message,
         description: "",
       });
+    },
+  });
+
+  const updateMember = api.stakeholder.updateMember.useMutation({
+    onSuccess: () => {
+      setOpen(false);
+      toast({
+        variant: "default",
+        title: "🎉 Updated!",
+        description: "You have successfully updated the stakeholder.",
+      });
       router.refresh();
     },
     onError: (error) => {
@@ -68,6 +91,7 @@ const MemberModal = ({
       });
     },
   });
+
   const form = useForm<TypeZodInviteMemberMutationSchema>({
     resolver: zodResolver(ZodInviteMemberMutationSchema),
     defaultValues: {
@@ -81,7 +105,11 @@ const MemberModal = ({
   const isSubmitting = form.formState.isSubmitting;
 
   async function onSubmit(values: TypeZodInviteMemberMutationSchema) {
-    inviteMember.mutate(values);
+    if (rest.isEditMode) {
+      updateMember.mutate({ ...values, membershipId: rest.membershipId });
+    } else {
+      inviteMember.mutate(values);
+    }
   }
 
   return (
@@ -120,7 +148,11 @@ const MemberModal = ({
               <FormItem>
                 <FormLabel>Email</FormLabel>
                 <FormControl>
-                  <Input disabled={isSubmitting} type="email" {...field} />
+                  <Input
+                    disabled={isSubmitting || rest.isEditMode === true}
+                    type="email"
+                    {...field}
+                  />
                 </FormControl>
                 <FormMessage />
               </FormItem>
@@ -171,7 +203,7 @@ const MemberModal = ({
           </div>
 
           <Button loading={isSubmitting} loadingText="Sending invite...">
-            Send an invite
+            {rest.isEditMode === true ? "Update stakeholder" : "Send an invite"}
           </Button>
 
           <p className="text-center text-xs text-gray-500">
diff --git a/src/components/stakeholder/member-table.tsx b/src/components/stakeholder/member-table.tsx
@@ -44,6 +44,8 @@ import { api } from "@/trpc/react";
 import { type TypeGetMembers } from "@/server/stakeholder";
 import { Avatar, AvatarImage } from "@/components/ui/avatar";
 import MemberModal from "@/components/stakeholder/member-modal";
+import { useSession } from "next-auth/react";
+import { useRouter } from "next/navigation";
 
 type MembersType = {
   members: TypeGetMembers;
@@ -186,9 +188,54 @@ export const columns: ColumnDef<TypeGetMembers[0]>[] = [
     id: "actions",
     enableHiding: false,
     cell: ({ row }) => {
+      // eslint-disable-next-line react-hooks/rules-of-hooks
+      const router = useRouter();
+      // eslint-disable-next-line react-hooks/rules-of-hooks
+      const { data } = useSession();
       const member = row.original;
       const removeMember = api.stakeholder.removeMember.useMutation();
       const revokeInvite = api.stakeholder.revokeInvite.useMutation();
+      const revInvite = api.stakeholder.reInvite.useMutation();
+      const deactivateUser = api.stakeholder.deactivateUser.useMutation({
+        onSuccess: () => {
+          router.refresh();
+        },
+      });
+
+      const isAdmin = data?.user?.access === "admin";
+      const status = member.status;
+      const membershipId = member.id;
+      const email = member.user?.email ?? member.invitedEmail;
+      const deleteAction =
+        status === "pending" ? "Revoke invite" : "Remove member";
+
+      const isAdminActionable = isAdmin && member.userId !== data?.user.id;
+
+      const userStatus = member.active;
+
+      const handleDeactivateStakeholder = async () => {
+        try {
+          await removeMember.mutateAsync({ membershipId });
+          if (status === "pending" && email) {
+            await revokeInvite.mutateAsync({ email, membershipId });
+          }
+
+          router.refresh();
+        } catch (error) {}
+      };
+
+      const handleDeactivate = async () => {
+        try {
+          await deactivateUser.mutateAsync({
+            membershipId,
+            status: !userStatus,
+          });
+        } catch (error) {}
+      };
+
+      const handleReinvite = () => {
+        revInvite.mutate({ membershipId: member.id });
+      };
 
       return (
         <DropdownMenu>
@@ -202,27 +249,45 @@ export const columns: ColumnDef<TypeGetMembers[0]>[] = [
           </div>
           <DropdownMenuContent align="end">
             <DropdownMenuLabel>Actions</DropdownMenuLabel>
+            {isAdminActionable && status === "pending" && (
+              <DropdownMenuItem onSelect={handleReinvite}>
+                ReInvite
+              </DropdownMenuItem>
+            )}
 
-            <MemberModal
-              title="Update stakeholder"
-              subtitle="Update stakeholder's account information."
-              member={{
-                name: member.user?.name ?? "",
-                email: member.user?.email ?? "",
-                title: member.title ?? "",
-                access: member.access ?? "stakesholder",
-              }}
-            >
-              <span className="relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50">
-                Update
-              </span>
-            </MemberModal>
-
-            <DropdownMenuItem>Reinvite</DropdownMenuItem>
+            {isAdmin && status === "accepted" && (
+              <MemberModal
+                isEditMode
+                membershipId={member.id}
+                title="Update stakeholder"
+                subtitle="Update stakeholder's account information."
+                member={{
+                  name: member.user?.name ?? "",
+                  email: email ?? "",
+                  title: member.title ?? "",
+                  access: member.access ?? "stakeholder",
+                }}
+              >
+                <span className="relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50">
+                  Update
+                </span>
+              </MemberModal>
+            )}
 
             <DropdownMenuSeparator />
-            <DropdownMenuItem className="text-red-500">
-              Deactivate
+            <DropdownMenuItem
+              onSelect={handleDeactivate}
+              disabled={!isAdminActionable}
+              className="text-red-500"
+            >
+              {userStatus ? "Deactivate" : "Activate User"}
+            </DropdownMenuItem>
+            <DropdownMenuItem
+              onSelect={handleDeactivateStakeholder}
+              disabled={!isAdminActionable}
+              className="text-red-500"
+            >
+              {deleteAction}
             </DropdownMenuItem>
           </DropdownMenuContent>
         </DropdownMenu>
diff --git a/src/server/auth.ts b/src/server/auth.ts
@@ -15,6 +15,7 @@ import { db } from "@/server/db";
 import { env } from "@/env";
 import { sendMail } from "./mailer";
 import MagicLinkEmail from "@/emails/MagicLinkEmail";
+import { type MEMBERSHIP_ACCESS } from "@prisma/client";
 
 const GOOGLE_CLIENT_ID = process.env.GOOGLE_CLIENT_ID!;
 const GOOGLE_CLIENT_SECRET = process.env.GOOGLE_CLIENT_SECRET!;
@@ -33,6 +34,7 @@ declare module "next-auth" {
       companyId: string;
       membershipId: string;
       companyPublicId: string;
+      access: MEMBERSHIP_ACCESS;
     } & DefaultSession["user"];
   }
 }
@@ -44,6 +46,7 @@ declare module "next-auth/jwt" {
     companyId: string;
     membershipId: string;
     companyPublicId: string;
+    access: MEMBERSHIP_ACCESS;
   }
 }
 
@@ -59,6 +62,7 @@ export const authOptions: NextAuthOptions = {
       session.user.companyId = token.companyId;
       session.user.membershipId = token.membershipId;
       session.user.companyPublicId = token.companyPublicId;
+      session.user.access = token.access;
 
       if (token.sub) {
         session.user.id = token.sub;
@@ -82,6 +86,7 @@ export const authOptions: NextAuthOptions = {
             id: true,
             companyId: true,
             isOnboarded: true,
+            access: true,
             user: {
               select: {
                 name: true,
@@ -101,11 +106,13 @@ export const authOptions: NextAuthOptions = {
           token.membershipId = membership.id;
           token.name = membership.user?.name;
           token.companyPublicId = membership.company.publicId;
+          token.access = membership.access;
         } else {
           token.isOnboarded = false;
           token.companyId = "";
           token.membershipId = "";
           token.companyPublicId = "";
+          token.access = "stakeholder";
         }
       }
 
diff --git a/src/server/stakeholder.ts b/src/server/stakeholder.ts
@@ -1,4 +1,12 @@
+import { render } from "jsx-email";
 import { db } from "./db";
+import { sendMail } from "./mailer";
+import MemberInviteEmail from "@/emails/MemberInviteEmail";
+import { constants } from "@/lib/constants";
+import { nanoid } from "nanoid";
+import { env } from "@/env";
+import { createHash } from "@/lib/crypto";
+import { type PrismaClient, type Prisma } from "@prisma/client";
 
 export const getMembers = (companyId: string) => {
   return db.membership.findMany({
@@ -69,3 +77,86 @@ export const generateMembershipIdentifier = ({
 }: generateMembershipIdentifierOptions) => {
   return `${email}:${membershipId}`;
 };
+
+interface sendMembershipInviteEmailOptions {
+  verificationToken: string;
+  token: string;
+  email: string;
+  company: { name: string; id: string };
+  user: { email: string | null | undefined; name: string | null | undefined };
+}
+
+export async function sendMembershipInviteEmail({
+  company,
+  email,
+  verificationToken,
+  token,
+  user,
+}: sendMembershipInviteEmailOptions) {
+  const baseUrl = process.env.NEXTAUTH_URL;
+  const callbackUrl = `${baseUrl}/verify-member/${verificationToken}`;
+
+  const params = new URLSearchParams({
+    callbackUrl,
+    token,
+    email,
+  });
+
+  const inviteLink = `${baseUrl}/api/auth/callback/email?${params.toString()}`;
+
+  await sendMail({
+    to: email,
+    subject: `Join ${company.name} on ${constants.title}`,
+    html: await render(
+      MemberInviteEmail({
+        inviteLink,
+        companyName: company.name,
+        invitedBy: (user.name ?? user.email)!,
+      }),
+    ),
+  });
+}
+
+export async function generateInviteToken() {
+  const token = nanoid(32);
+
+  const secret = env.NEXTAUTH_SECRET;
+
+  const ONE_DAY_IN_SECONDS = 86400;
+  const expires = new Date(Date.now() + ONE_DAY_IN_SECONDS * 1000);
+
+  const memberInviteTokenHash = await createHash(`member-${nanoid(16)}`);
+  const authTokenHash = await createHash(`${token}${secret}`);
+
+  return { token, expires, memberInviteTokenHash, authTokenHash };
+}
+
+interface revokeExistingInviteTokensOptions {
+  membershipId: string;
+  email: string;
+  tx: Prisma.TransactionClient | PrismaClient;
+}
+
+export async function revokeExistingInviteTokens({
+  email,
+  membershipId,
+  tx,
+}: revokeExistingInviteTokensOptions) {
+  const identifier = generateMembershipIdentifier({
+    email,
+    membershipId,
+  });
+
+  const verificationToken = await tx.verificationToken.findMany({
+    where: {
+      identifier,
+    },
+  });
+  await tx.verificationToken.deleteMany({
+    where: {
+      token: {
+        in: verificationToken.map((item) => item.token),
+      },
+    },
+  });
+}
diff --git a/src/trpc/api/trpc.ts b/src/trpc/api/trpc.ts
@@ -99,3 +99,11 @@ export const protectedProcedure = t.procedure.use(({ ctx, next }) => {
     },
   });
 });
+
+export const adminOnlyProcedure = protectedProcedure.use(({ ctx, next }) => {
+  if (ctx.session.user.access !== "admin") {
+    throw new TRPCError({ code: "UNAUTHORIZED" });
+  }
+
+  return next();
+});
diff --git a/src/trpc/routers/stakeholder-router/router.ts b/src/trpc/routers/stakeholder-router/router.ts
diff --git a/src/trpc/routers/stakeholder-router/schema.ts b/src/trpc/routers/stakeholder-router/schema.ts
