fix: avoid document title with only whitespaces

explicitly mentioned "PDF" to upload, and added a toast if pdf size is
greater than 50mb

fixes: #621

.env.example

@@ -5,9 +5,9 @@ NEXTAUTH_SECRET="secret"
 # [[CRYPTO]]
 # Application Key for symmetric encryption and decryption
 # REQUIRED: This should be a random string of at least 32 characters
-NEXT_PRIVATE_ENCRYPTION_KEY=""
+NEXT_PRIVATE_ENCRYPTION_KEY="CAFEBABE"
 # REQUIRED: This should be a random string of at least 32 characters
-NEXT_PRIVATE_ENCRYPTION_SECONDARY_KEY=""
+NEXT_PRIVATE_ENCRYPTION_SECONDARY_KEY="DEADBEEF"
 
 # [[AUTH OPTIONAL]]
 NEXT_PRIVATE_GOOGLE_CLIENT_ID=""
@@ -25,7 +25,7 @@ NEXT_PRIVATE_DIRECT_DATABASE_URL="postgres://documenso:password@127.0.0.1:54320/
 # [[E2E Tests]]
 E2E_TEST_AUTHENTICATE_USERNAME="Test User"
 E2E_TEST_AUTHENTICATE_USER_EMAIL="testuser@mail.com"
-E2E_TEST_AUTHENTICATE_USER_PASSWORD="test_password"
+E2E_TEST_AUTHENTICATE_USER_PASSWORD="test_Password123"
 
 # [[STORAGE]]
 # OPTIONAL: Defines the storage transport to use. Available options: database (default) | s3
@@ -74,6 +74,8 @@ NEXT_PRIVATE_MAILCHANNELS_DKIM_DOMAIN=
 NEXT_PRIVATE_MAILCHANNELS_DKIM_SELECTOR=
 # OPTIONAL: The private key to use for DKIM signing.
 NEXT_PRIVATE_MAILCHANNELS_DKIM_PRIVATE_KEY=
+# OPTIONAL: Displays the maximum document upload limit to the user in MBs
+NEXT_PUBLIC_DOCUMENT_SIZE_UPLOAD_LIMIT=5
 
 # [[STRIPE]]
 NEXT_PRIVATE_STRIPE_API_KEY=

apps/marketing/content/blog/commodifying-signing.mdx

@@ -27,14 +27,16 @@ Tags:
 # Commodifying Signing
 
 > TLDR; We are creating signing as a public good and are commoditizing it to make it cheaper and better.
-> While we are in full-on building mode with Documenso, I think a lot about the big picture of what we are attempting to do. One phrase that keeps popping up is, "We are commodifying signing." Let's dig deeper into what that means.
+
+While we are in full-on building mode with Documenso, I think a lot about the big picture of what we are attempting to do. One phrase that keeps popping up is, "We are commodifying signing." Let's dig deeper into what that means.
 
 Let's start with why we are doing this. Documenso's mission is to solve the domain of signing once and for all for everyone. In so many calls, I hear stories about how organizations build their own solution because the existing ones are too expensive or need to be more flexible. That means not hundreds but probably thousands of companies worldwide have done the same. This is simply wasting humanity's time. Since digital signing systems are understood well enough that seemingly "everyone" can build them, given enough pain, It's time to do it once correctly.
 
 ## Is signing already a commodity?
 
 > In economics, a **commodity** is an economic good, usually a resource, that has explicitly full or substantial fungibility: that is, the market treats instances of the good as equivalent or nearly so with no regard to who produced them.
-> That sounds like the signing market today. There is no shortage of signing providers, and you can get similar signing services from many places. So why is this different from what we want, and why does this not satisfy the market?
+
+That sounds like the signing market today. There is no shortage of signing providers, and you can get similar signing services from many places. So why is this different from what we want, and why does this not satisfy the market?
 
 - Signing is expensive and painful when you are locked into your vendor, and they charge by signing volume.
 - Signing is also expensive and painful when you have to build it yourself since no vendor fits your requirements or you are not allowed to
@@ -68,7 +70,8 @@ Before creating a commodity, we are raising the bar of what the underlying publi
 As we have seen, signing has already been commodified. But since it was done by a closed source and, frankly, a very opaque industry, no downward price spiral has ensued. By building Documenso open source with an open culture, we can pierce the veil and trigger what the space has been missing for a long time: Commoditization. If you had to read that again, so did I:
 
 > In business literature, **commoditization** is defined as the process by which goods that have economic value and are distinguishable in terms of attributes (uniqueness or brand) become simple commodities in the eyes of the market or consumers.
-> By only selling what creates value for the customer (hosting a highly available service, keeping it compliant, supporting with technical issues and challenges, preparing industry-specific components), we are commoditizing signing since everyone can do it now: The resources enabling it are public goods, aka. open source. A leveled playing field, as described above, is the perfect environment for a community-first, technology-first, and value-first company like Documenso to flourish.
+
+By only selling what creates value for the customer (hosting a highly available service, keeping it compliant, supporting with technical issues and challenges, preparing industry-specific components), we are commoditizing signing since everyone can do it now: The resources enabling it are public goods, aka. open source. A leveled playing field, as described above, is the perfect environment for a community-first, technology-first, and value-first company like Documenso to flourish.
 
 ## Changing the Game
 

apps/marketing/content/blog/linear-gh.mdx

@@ -109,7 +109,7 @@ It's similar to the Kanban board for the development backlog.
 While the internal design backlog also existed in Linear, the public design repository is new. Since designing in the open is tricky, we opted to publish the detailed design artifacts with the corresponding feature instead.
 We already have design.documenso.com housing our general design system. Here, we will publish the specifics of how we applied this to each feature. We will publish the first artifacts here soon, what may be in the cards can be found on the [LIVE Roadmap](https://documen.so/live).
 
-Feel free to connect with us on  [Twitter / X](https://twitter.com/eltimuro) (DM open) or [Discord](https://documen.so/discord) if you have any questions or comments! We're always here to help and would love to hear from you :)
+Feel free to connect with us on [Twitter / X](https://twitter.com/eltimuro) (DM open) or [Discord](https://documen.so/discord) if you have any questions or comments! We're always here to help and would love to hear from you :)
 
 Best from Hamburg\
 Timur

apps/marketing/src/app/(marketing)/[content]/page.tsx

@@ -15,7 +15,7 @@ export const generateMetadata = ({ params }: { params: { content: string } }) =>
     notFound();
   }
 
-  return { title: `Documenso - ${document.title}` };
+  return { title: document.title };
 };
 
 const mdxComponents: MDXComponents = {

apps/marketing/src/app/(marketing)/blog/[post]/page.tsx

@@ -18,7 +18,9 @@ export const generateMetadata = ({ params }: { params: { post: string } }) => {
   }
 
   return {
-    title: `Documenso - ${blogPost.title}`,
+    title: {
+      absolute: `${blogPost.title} - Documenso Blog`,
+    },
     description: blogPost.description,
   };
 };

apps/marketing/src/app/(marketing)/blog/page.tsx

@@ -1,5 +1,10 @@
+import type { Metadata } from 'next';
+
 import { allBlogPosts } from 'contentlayer/generated';
 
+export const metadata: Metadata = {
+  title: 'Blog',
+};
 export default function BlogPage() {
   const blogPosts = allBlogPosts.sort((a, b) => {
     const dateA = new Date(a.date);

apps/marketing/src/app/(marketing)/open/page.tsx

@@ -1,3 +1,5 @@
+import type { Metadata } from 'next';
+
 import { z } from 'zod';
 
 import { getUserMonthlyGrowth } from '@documenso/lib/server-only/user/get-user-monthly-growth';
@@ -14,6 +16,10 @@ import { MonthlyTotalUsersChart } from './monthly-total-users-chart';
 import { TeamMembers } from './team-members';
 import { OpenPageTooltip } from './tooltip';
 
+export const metadata: Metadata = {
+  title: 'Open Startup',
+};
+
 export const revalidate = 3600;
 
 export const dynamic = 'force-dynamic';

apps/marketing/src/app/(marketing)/oss-friends/page.tsx

@@ -1,3 +1,4 @@
+import type { Metadata } from 'next';
 import Image from 'next/image';
 
 import { z } from 'zod';
@@ -5,7 +6,12 @@ import { z } from 'zod';
 import backgroundPattern from '@documenso/assets/images/background-pattern.png';
 
 import { OSSFriendsContainer } from './container';
-import { TOSSFriendsSchema, ZOSSFriendsSchema } from './schema';
+import type { TOSSFriendsSchema } from './schema';
+import { ZOSSFriendsSchema } from './schema';
+
+export const metadata: Metadata = {
+  title: 'OSS Friends',
+};
 
 export default async function OSSFriendsPage() {
   const ossFriends: TOSSFriendsSchema = await fetch('https://formbricks.com/api/oss-friends', {

apps/marketing/src/app/(marketing)/page.tsx

@@ -1,4 +1,5 @@
 /* eslint-disable no-unused-vars, @typescript-eslint/no-unused-vars */
+import type { Metadata } from 'next';
 import { Caveat } from 'next/font/google';
 
 import { cn } from '@documenso/ui/lib/utils';
@@ -10,6 +11,11 @@ import { OpenBuildTemplateBento } from '~/components/(marketing)/open-build-temp
 import { ShareConnectPaidWidgetBento } from '~/components/(marketing)/share-connect-paid-widget-bento';
 
 export const revalidate = 600;
+export const metadata: Metadata = {
+  title: {
+    absolute: 'Documenso - The Open Source DocuSign Alternative',
+  },
+};
 
 const fontCaveat = Caveat({
   weight: ['500'],

apps/marketing/src/app/(marketing)/pricing/page.tsx

@@ -1,5 +1,4 @@
-'use client';
+import type { Metadata } from 'next';
-
 import Link from 'next/link';
 
 import {
@@ -12,6 +11,10 @@ import { Button } from '@documenso/ui/primitives/button';
 
 import { PricingTable } from '~/components/(marketing)/pricing-table';
 
+export const metadata: Metadata = {
+  title: 'Pricing',
+};
+
 export type PricingPageProps = {
   searchParams?: {
     planId?: string;

apps/marketing/src/app/(marketing)/singleplayer/client.tsx

@@ -158,6 +158,7 @@ export const SinglePlayerClient = () => {
     readStatus: 'OPENED',
     signingStatus: 'NOT_SIGNED',
     sendStatus: 'NOT_SENT',
+    role: 'SIGNER',
   };
 
   const onFileDrop = async (file: File) => {

apps/marketing/src/app/(marketing)/singleplayer/page.tsx

@@ -1,5 +1,11 @@
+import type { Metadata } from 'next';
+
 import { SinglePlayerClient } from './client';
 
+export const metadata: Metadata = {
+  title: 'Singleplayer',
+};
+
 export const revalidate = 0;
 
 // !: This entire file is a hack to get around failed prerendering of

apps/marketing/src/app/layout.tsx

@@ -18,7 +18,10 @@ const fontInter = Inter({ subsets: ['latin'], variable: '--font-sans' });
 const fontCaveat = Caveat({ subsets: ['latin'], variable: '--font-signature' });
 
 export const metadata = {
-  title: 'Documenso - The Open Source DocuSign Alternative',
+  title: {
+    template: '%s - Documenso',
+    default: 'Documenso',
+  },
   description:
     'Join Documenso, the open signing infrastructure, and get a 10x better signing experience. Pricing starts at $30/mo. forever! Sign in now and enjoy a faster, smarter, and more beautiful document signing process. Integrates with your favorite tools, customizable, and expandable. Support our mission and become a part of our open-source community.',
   keywords:

apps/marketing/src/components/(marketing)/widget.tsx

@@ -399,6 +399,7 @@ export const Widget = ({ className, children, ...props }: WidgetProps) => {
           </DialogDescription>
 
           <SignaturePad
+            disabled={isSubmitting}
             className="aspect-video w-full rounded-md border"
             defaultValue={signatureDataUrl || ''}
             onChange={setDraftSignatureDataUrl}

apps/web/package.json

@@ -45,6 +45,7 @@
     "sharp": "0.33.1",
     "ts-pattern": "^5.0.5",
     "typescript": "5.2.2",
+    "ua-parser-js": "^1.0.37",
     "uqr": "^0.1.2",
     "zod": "^3.22.4"
   },
@@ -53,7 +54,8 @@
     "@types/luxon": "^3.3.1",
     "@types/node": "20.1.0",
     "@types/react": "18.2.18",
-    "@types/react-dom": "18.2.7"
+    "@types/react-dom": "18.2.7",
+    "@types/ua-parser-js": "^0.7.39"
   },
   "overrides": {
     "next-auth": {

apps/web/src/app/(dashboard)/documents/[id]/edit-document.tsx

@@ -218,9 +218,9 @@ export const EditDocumentForm = ({
             <AddTitleFormPartial
               key={recipients.length}
               documentFlow={documentFlow.title}
+              document={document}
               recipients={recipients}
               fields={fields}
-              document={document}
               onSubmit={onAddTitleFormSubmit}
             />
 

apps/web/src/app/(dashboard)/documents/data-table-action-button.tsx

@@ -2,13 +2,13 @@
 
 import Link from 'next/link';
 
-import { Download, Edit, Pencil } from 'lucide-react';
+import { CheckCircle, Download, Edit, EyeIcon, Pencil } from 'lucide-react';
 import { useSession } from 'next-auth/react';
 import { match } from 'ts-pattern';
 
 import { downloadPDF } from '@documenso/lib/client-only/download-pdf';
 import type { Document, Recipient, User } from '@documenso/prisma/client';
-import { DocumentStatus, SigningStatus } from '@documenso/prisma/client';
+import { DocumentStatus, RecipientRole, SigningStatus } from '@documenso/prisma/client';
 import type { DocumentWithData } from '@documenso/prisma/types/document-with-data';
 import { trpc as trpcClient } from '@documenso/trpc/client';
 import { Button } from '@documenso/ui/primitives/button';
@@ -37,6 +37,7 @@ export const DataTableActionButton = ({ row }: DataTableActionButtonProps) => {
   const isPending = row.status === DocumentStatus.PENDING;
   const isComplete = row.status === DocumentStatus.COMPLETED;
   const isSigned = recipient?.signingStatus === SigningStatus.SIGNED;
+  const role = recipient?.role;
 
   const onDownloadClick = async () => {
     try {
@@ -68,6 +69,11 @@ export const DataTableActionButton = ({ row }: DataTableActionButtonProps) => {
     }
   };
 
+  // TODO: Consider if want to keep this logic for hiding viewing for CC'ers
+  if (recipient?.role === RecipientRole.CC && isComplete === false) {
+    return null;
+  }
+
   return match({
     isOwner,
     isRecipient,
@@ -87,15 +93,32 @@ export const DataTableActionButton = ({ row }: DataTableActionButtonProps) => {
     .with({ isRecipient: true, isPending: true, isSigned: false }, () => (
       <Button className="w-32" asChild>
         <Link href={`/sign/${recipient?.token}`}>
-          <Pencil className="-ml-1 mr-2 h-4 w-4" />
+          {match(role)
-          Sign
+            .with(RecipientRole.SIGNER, () => (
+              <>
+                <Pencil className="-ml-1 mr-2 h-4 w-4" />
+                Sign
+              </>
+            ))
+            .with(RecipientRole.APPROVER, () => (
+              <>
+                <CheckCircle className="-ml-1 mr-2 h-4 w-4" />
+                Approve
+              </>
+            ))
+            .otherwise(() => (
+              <>
+                <EyeIcon className="-ml-1 mr-2 h-4 w-4" />
+                View
+              </>
+            ))}
         </Link>
       </Button>
     ))
     .with({ isPending: true, isSigned: true }, () => (
       <Button className="w-32" disabled={true}>
-        <Pencil className="-ml-1 mr-2 inline h-4 w-4" />
+        <EyeIcon className="-ml-1 mr-2 h-4 w-4" />
-        Sign
+        View
       </Button>
     ))
     .with({ isComplete: true }, () => (

apps/web/src/app/(dashboard)/documents/data-table-action-dropdown.tsx

@@ -5,9 +5,11 @@ import { useState } from 'react';
 import Link from 'next/link';
 
 import {
+  CheckCircle,
   Copy,
   Download,
   Edit,
+  EyeIcon,
   Loader,
   MoreHorizontal,
   Pencil,
@@ -19,7 +21,7 @@ import { useSession } from 'next-auth/react';
 
 import { downloadPDF } from '@documenso/lib/client-only/download-pdf';
 import type { Document, Recipient, User } from '@documenso/prisma/client';
-import { DocumentStatus } from '@documenso/prisma/client';
+import { DocumentStatus, RecipientRole } from '@documenso/prisma/client';
 import type { DocumentWithData } from '@documenso/prisma/types/document-with-data';
 import { trpc as trpcClient } from '@documenso/trpc/client';
 import { DocumentShareButton } from '@documenso/ui/components/document/document-share-button';
@@ -55,14 +57,14 @@ export const DataTableActionDropdown = ({ row }: DataTableActionDropdownProps) =
   }
 
   const recipient = row.Recipient.find((recipient) => recipient.email === session.user.email);
-  const isOwner = row.User.id === session.user.id;
 
+  const isOwner = row.User.id === session.user.id;
   // const isRecipient = !!recipient;
   const isDraft = row.status === DocumentStatus.DRAFT;
   // const isPending = row.status === DocumentStatus.PENDING;
   const isComplete = row.status === DocumentStatus.COMPLETED;
   // const isSigned = recipient?.signingStatus === SigningStatus.SIGNED;
-  const isDocumentDeletable = isOwner && !recipient;
+  const isDocumentDeletable = isOwner;
 
   const onDownloadClick = async () => {
     try {
@@ -105,12 +107,32 @@ export const DataTableActionDropdown = ({ row }: DataTableActionDropdownProps) =
       <DropdownMenuContent className="w-52" align="start" forceMount>
         <DropdownMenuLabel>Action</DropdownMenuLabel>
 
-        <DropdownMenuItem disabled={!recipient || isComplete} asChild>
+        {recipient?.role !== RecipientRole.CC && (
-          <Link href={`/sign/${recipient?.token}`}>
+          <DropdownMenuItem disabled={!recipient || isComplete} asChild>
-            <Pencil className="mr-2 h-4 w-4" />
+            <Link href={`/sign/${recipient?.token}`}>
-            Sign
+              {recipient?.role === RecipientRole.VIEWER && (
-          </Link>
+                <>
-        </DropdownMenuItem>
+                  <EyeIcon className="mr-2 h-4 w-4" />
+                  View
+                </>
+              )}
+
+              {recipient?.role === RecipientRole.SIGNER && (
+                <>
+                  <Pencil className="mr-2 h-4 w-4" />
+                  Sign
+                </>
+              )}
+
+              {recipient?.role === RecipientRole.APPROVER && (
+                <>
+                  <CheckCircle className="mr-2 h-4 w-4" />
+                  Approve
+                </>
+              )}
+            </Link>
+          </DropdownMenuItem>
+        )}
 
         <DropdownMenuItem disabled={!isOwner || isComplete} asChild>
           <Link href={`/documents/${row.id}`}>

apps/web/src/app/(dashboard)/documents/page.tsx

@@ -1,6 +1,8 @@
+import type { Metadata } from 'next';
 import Link from 'next/link';
 
 import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
+import type { PeriodSelectorValue } from '@documenso/lib/server-only/document/find-documents';
 import { findDocuments } from '@documenso/lib/server-only/document/find-documents';
 import { getStats } from '@documenso/lib/server-only/document/get-stats';
 import { isExtendedDocumentStatus } from '@documenso/prisma/guards/is-extended-document-status';
@@ -8,7 +10,6 @@ import { ExtendedDocumentStatus } from '@documenso/prisma/types/extended-documen
 import { Tabs, TabsList, TabsTrigger } from '@documenso/ui/primitives/tabs';
 
 import { PeriodSelector } from '~/components/(dashboard)/period-selector/period-selector';
-import type { PeriodSelectorValue } from '~/components/(dashboard)/period-selector/types';
 import { isPeriodSelectorValue } from '~/components/(dashboard)/period-selector/types';
 import { DocumentStatus } from '~/components/formatter/document-status';
 
@@ -25,18 +26,22 @@ export type DocumentsPageProps = {
   };
 };
 
+export const metadata: Metadata = {
+  title: 'Documents',
+};
 export default async function DocumentsPage({ searchParams = {} }: DocumentsPageProps) {
   const { user } = await getRequiredServerComponentSession();
 
-  const stats = await getStats({
-    user,
-  });
-
   const status = isExtendedDocumentStatus(searchParams.status) ? searchParams.status : 'ALL';
   const period = isPeriodSelectorValue(searchParams.period) ? searchParams.period : '';
   const page = Number(searchParams.page) || 1;
   const perPage = Number(searchParams.perPage) || 20;
 
+  const stats = await getStats({
+    user,
+    period,
+  });
+
   const results = await findDocuments({
     userId: user.id,
     status,
@@ -69,7 +74,7 @@ export default async function DocumentsPage({ searchParams = {} }: DocumentsPage
         <h1 className="text-4xl font-semibold">Documents</h1>
 
         <div className="-m-1 flex flex-wrap gap-x-4 gap-y-6 overflow-hidden p-1">
-          <Tabs defaultValue={status} className="overflow-x-auto">
+          <Tabs value={status} className="overflow-x-auto">
             <TabsList>
               {[
                 ExtendedDocumentStatus.INBOX,

apps/web/src/app/(dashboard)/documents/upload-document.tsx

@@ -10,6 +10,7 @@ import { useSession } from 'next-auth/react';
 
 import { useLimits } from '@documenso/ee/server-only/limits/provider/client';
 import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
+import { APP_DOCUMENT_UPLOAD_SIZE_LIMIT } from '@documenso/lib/constants/app';
 import { createDocumentData } from '@documenso/lib/server-only/document-data/create-document-data';
 import { putFile } from '@documenso/lib/universal/upload/put-file';
 import { TRPCClientError } from '@documenso/trpc/client';
@@ -96,6 +97,15 @@ export const UploadDocument = ({ className }: UploadDocumentProps) => {
     }
   };
 
+  const onFileDropRejected = () => {
+    toast({
+      title: 'Your document failed to upload.',
+      description: `File cannot be larger than ${APP_DOCUMENT_UPLOAD_SIZE_LIMIT}MB`,
+      duration: 5000,
+      variant: 'destructive',
+    });
+  };
+
   return (
     <div className={cn('relative', className)}>
       <DocumentDropzone
@@ -103,6 +113,7 @@ export const UploadDocument = ({ className }: UploadDocumentProps) => {
         disabled={remaining.documents === 0 || !session?.user.emailVerified}
         disabledMessage={disabledMessage}
         onDrop={onFileDrop}
+        onDropRejected={onFileDropRejected}
       />
 
       <div className="absolute -bottom-6 right-0">

apps/web/src/app/(dashboard)/settings/billing/page.tsx

@@ -1,3 +1,4 @@
+import type { Metadata } from 'next';
 import { redirect } from 'next/navigation';
 
 import { match } from 'ts-pattern';
@@ -17,6 +18,10 @@ import { LocaleDate } from '~/components/formatter/locale-date';
 import { BillingPlans } from './billing-plans';
 import { BillingPortalButton } from './billing-portal-button';
 
+export const metadata: Metadata = {
+  title: 'Billing',
+};
+
 export default async function BillingSettingsPage() {
   let { user } = await getRequiredServerComponentSession();
 

apps/web/src/app/(dashboard)/settings/profile/page.tsx

@@ -1,7 +1,13 @@
+import type { Metadata } from 'next';
+
 import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
 
 import { ProfileForm } from '~/components/forms/profile';
 
+export const metadata: Metadata = {
+  title: 'Profile',
+};
+
 export default async function ProfileSettingsPage() {
   const { user } = await getRequiredServerComponentSession();
 

apps/web/src/app/(dashboard)/settings/security/activity/page.tsx

@@ -0,0 +1,23 @@
+import type { Metadata } from 'next';
+
+import { UserSecurityActivityDataTable } from './user-security-activity-data-table';
+
+export const metadata: Metadata = {
+  title: 'Security activity',
+};
+
+export default function SettingsSecurityActivityPage() {
+  return (
+    <div>
+      <h3 className="text-2xl font-semibold">Security activity</h3>
+
+      <p className="text-muted-foreground mt-2 text-sm">
+        View all recent security activity related to your account.
+      </p>
+
+      <hr className="my-4" />
+
+      <UserSecurityActivityDataTable />
+    </div>
+  );
+}

apps/web/src/app/(dashboard)/settings/security/activity/user-security-activity-data-table.tsx

@@ -0,0 +1,156 @@
+'use client';
+
+import { usePathname, useRouter, useSearchParams } from 'next/navigation';
+
+import type { DateTimeFormatOptions } from 'luxon';
+import { DateTime } from 'luxon';
+import { UAParser } from 'ua-parser-js';
+
+import { useUpdateSearchParams } from '@documenso/lib/client-only/hooks/use-update-search-params';
+import { USER_SECURITY_AUDIT_LOG_MAP } from '@documenso/lib/constants/auth';
+import { ZBaseTableSearchParamsSchema } from '@documenso/lib/types/search-params';
+import { trpc } from '@documenso/trpc/react';
+import { DataTable } from '@documenso/ui/primitives/data-table';
+import { DataTablePagination } from '@documenso/ui/primitives/data-table-pagination';
+import { Skeleton } from '@documenso/ui/primitives/skeleton';
+import { TableCell } from '@documenso/ui/primitives/table';
+
+import { LocaleDate } from '~/components/formatter/locale-date';
+
+const dateFormat: DateTimeFormatOptions = {
+  ...DateTime.DATETIME_SHORT,
+  hourCycle: 'h12',
+};
+
+export const UserSecurityActivityDataTable = () => {
+  const parser = new UAParser();
+
+  const pathname = usePathname();
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const updateSearchParams = useUpdateSearchParams();
+
+  const parsedSearchParams = ZBaseTableSearchParamsSchema.parse(
+    Object.fromEntries(searchParams ?? []),
+  );
+
+  const { data, isLoading, isInitialLoading, isLoadingError } =
+    trpc.profile.findUserSecurityAuditLogs.useQuery(
+      {
+        page: parsedSearchParams.page,
+        perPage: parsedSearchParams.perPage,
+      },
+      {
+        keepPreviousData: true,
+      },
+    );
+
+  const onPaginationChange = (page: number, perPage: number) => {
+    updateSearchParams({
+      page,
+      perPage,
+    });
+  };
+
+  const results = data ?? {
+    data: [],
+    perPage: 10,
+    currentPage: 1,
+    totalPages: 1,
+  };
+
+  return (
+    <DataTable
+      columns={[
+        {
+          header: 'Date',
+          accessorKey: 'createdAt',
+          cell: ({ row }) => <LocaleDate format={dateFormat} date={row.original.createdAt} />,
+        },
+        {
+          header: 'Device',
+          cell: ({ row }) => {
+            if (!row.original.userAgent) {
+              return 'N/A';
+            }
+
+            parser.setUA(row.original.userAgent);
+
+            const result = parser.getResult();
+
+            let output = result.os.name;
+
+            if (!output) {
+              return 'N/A';
+            }
+
+            if (result.os.version) {
+              output += ` (${result.os.version})`;
+            }
+
+            return output;
+          },
+        },
+        {
+          header: 'Browser',
+          cell: ({ row }) => {
+            if (!row.original.userAgent) {
+              return 'N/A';
+            }
+
+            parser.setUA(row.original.userAgent);
+
+            const result = parser.getResult();
+
+            return result.browser.name ?? 'N/A';
+          },
+        },
+        {
+          header: 'IP Address',
+          accessorKey: 'ipAddress',
+          cell: ({ row }) => row.original.ipAddress ?? 'N/A',
+        },
+        {
+          header: 'Action',
+          accessorKey: 'type',
+          cell: ({ row }) => USER_SECURITY_AUDIT_LOG_MAP[row.original.type],
+        },
+      ]}
+      data={results.data}
+      perPage={results.perPage}
+      currentPage={results.currentPage}
+      totalPages={results.totalPages}
+      onPaginationChange={onPaginationChange}
+      hasFilters={parsedSearchParams.page !== undefined || parsedSearchParams.perPage !== undefined}
+      onClearFilters={() => router.push(pathname ?? '/')}
+      error={{
+        enable: isLoadingError,
+      }}
+      skeleton={{
+        enable: isLoading && isInitialLoading,
+        rows: 3,
+        component: (
+          <>
+            <TableCell>
+              <Skeleton className="h-4 w-20 rounded-full" />
+            </TableCell>
+            <TableCell>
+              <Skeleton className="h-4 w-12 rounded-full" />
+            </TableCell>
+            <TableCell>
+              <Skeleton className="h-4 w-12 rounded-full" />
+            </TableCell>
+            <TableCell>
+              <Skeleton className="h-4 w-12 rounded-full" />
+            </TableCell>
+            <TableCell>
+              <Skeleton className="h-4 w-12 rounded-full" />
+            </TableCell>
+          </>
+        ),
+      }}
+    >
+      {(table) => <DataTablePagination table={table} />}
+    </DataTable>
+  );
+};

apps/web/src/app/(dashboard)/settings/security/page.tsx

@@ -1,10 +1,19 @@
+import type { Metadata } from 'next';
+import Link from 'next/link';
+
 import { IDENTITY_PROVIDER_NAME } from '@documenso/lib/constants/auth';
 import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
+import { Alert, AlertDescription, AlertTitle } from '@documenso/ui/primitives/alert';
+import { Button } from '@documenso/ui/primitives/button';
 
 import { AuthenticatorApp } from '~/components/forms/2fa/authenticator-app';
 import { RecoveryCodes } from '~/components/forms/2fa/recovery-codes';
 import { PasswordForm } from '~/components/forms/password';
 
+export const metadata: Metadata = {
+  title: 'Security',
+};
+
 export default async function SecuritySettingsPage() {
   const { user } = await getRequiredServerComponentSession();
 
@@ -20,43 +29,74 @@ export default async function SecuritySettingsPage() {
 
       {user.identityProvider === 'DOCUMENSO' ? (
         <div>
-          <PasswordForm user={user} className="max-w-xl" />
+          <PasswordForm user={user} />
 
-          <hr className="mb-4 mt-8" />
+          <hr className="border-border/50 mt-6" />
 
-          <h4 className="text-lg font-medium">Two Factor Authentication</h4>
+          <Alert
+            className="mt-6 flex flex-col justify-between p-6 sm:flex-row sm:items-center"
+            variant="neutral"
+          >
+            <div className="mb-4 sm:mb-0">
+              <AlertTitle>Two factor authentication</AlertTitle>
 
-          <p className="text-muted-foreground mt-2 text-sm">
+              <AlertDescription className="mr-4">
-            Add and manage your two factor security settings to add an extra layer of security to
+                Create one-time passwords that serve as a secondary authentication method for
-            your account!
+                confirming your identity when requested during the sign-in process.
-          </p>
+              </AlertDescription>
-
+            </div>
-          <div className="mt-4 max-w-xl">
-            <h5 className="font-medium">Two-factor methods</h5>
 
             <AuthenticatorApp isTwoFactorEnabled={user.twoFactorEnabled} />
-          </div>
+          </Alert>
 
           {user.twoFactorEnabled && (
-            <div className="mt-4 max-w-xl">
+            <Alert
-              <h5 className="font-medium">Recovery methods</h5>
+              className="mt-6 flex flex-col justify-between p-6 sm:flex-row sm:items-center"
+              variant="neutral"
+            >
+              <div className="mb-4 sm:mb-0">
+                <AlertTitle>Recovery codes</AlertTitle>
+
+                <AlertDescription className="mr-4">
+                  Two factor authentication recovery codes are used to access your account in the
+                  event that you lose access to your authenticator app.
+                </AlertDescription>
+              </div>
 
               <RecoveryCodes isTwoFactorEnabled={user.twoFactorEnabled} />
-            </div>
+            </Alert>
           )}
         </div>
       ) : (
-        <div>
+        <Alert className="p-6" variant="neutral">
-          <h4 className="text-lg font-medium">
+          <AlertTitle>
             Your account is managed by {IDENTITY_PROVIDER_NAME[user.identityProvider]}
-          </h4>
+          </AlertTitle>
-          <p className="text-muted-foreground mt-2 text-sm">
+
+          <AlertDescription>
             To update your password, enable two-factor authentication, and manage other security
             settings, please go to your {IDENTITY_PROVIDER_NAME[user.identityProvider]} account
             settings.
-          </p>
+          </AlertDescription>
-        </div>
+        </Alert>
       )}
+
+      <Alert
+        className="mt-6 flex flex-col justify-between p-6 sm:flex-row sm:items-center"
+        variant="neutral"
+      >
+        <div className="mb-4 mr-4 sm:mb-0">
+          <AlertTitle>Recent activity</AlertTitle>
+
+          <AlertDescription className="mr-2">
+            View all recent security activity related to your account.
+          </AlertDescription>
+        </div>
+
+        <Button asChild>
+          <Link href="/settings/security/activity">View activity</Link>
+        </Button>
+      </Alert>
     </div>
   );
 }

apps/web/src/app/(dashboard)/templates/data-table-templates.tsx

@@ -2,13 +2,16 @@
 
 import { useState, useTransition } from 'react';
 
+import Link from 'next/link';
 import { useRouter } from 'next/navigation';
 
-import { Loader, Plus } from 'lucide-react';
+import { AlertTriangle, Loader, Plus } from 'lucide-react';
 
+import { useLimits } from '@documenso/ee/server-only/limits/provider/client';
 import { useUpdateSearchParams } from '@documenso/lib/client-only/hooks/use-update-search-params';
 import type { Template } from '@documenso/prisma/client';
 import { trpc } from '@documenso/trpc/react';
+import { Alert, AlertDescription, AlertTitle } from '@documenso/ui/primitives/alert';
 import { Button } from '@documenso/ui/primitives/button';
 import { DataTable } from '@documenso/ui/primitives/data-table';
 import { DataTablePagination } from '@documenso/ui/primitives/data-table-pagination';
@@ -36,6 +39,8 @@ export const TemplatesDataTable = ({
   const [isPending, startTransition] = useTransition();
   const updateSearchParams = useUpdateSearchParams();
 
+  const { remaining } = useLimits();
+
   const router = useRouter();
 
   const { toast } = useToast();
@@ -77,6 +82,19 @@ export const TemplatesDataTable = ({
 
   return (
     <div className="relative">
+      {remaining.documents === 0 && (
+        <Alert className="mb-4 mt-5">
+          <AlertTriangle className="h-4 w-4" />
+          <AlertTitle>Document Limit Exceeded!</AlertTitle>
+          <AlertDescription className="mt-2">
+            You have reached your document limit.{' '}
+            <Link className="underline underline-offset-4" href="/settings/billing">
+              Upgrade your account to continue!
+            </Link>
+          </AlertDescription>
+        </Alert>
+      )}
+
       <DataTable
         columns={[
           {
@@ -102,7 +120,7 @@ export const TemplatesDataTable = ({
               return (
                 <div className="flex items-center gap-x-4">
                   <Button
-                    disabled={isRowLoading}
+                    disabled={isRowLoading || remaining.documents === 0}
                     loading={isRowLoading}
                     onClick={async () => {
                       setLoadingStates((prev) => ({ ...prev, [row.original.id]: true }));

apps/web/src/app/(dashboard)/templates/page.tsx

@@ -1,5 +1,7 @@
 import React from 'react';
 
+import type { Metadata } from 'next';
+
 import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
 import { getTemplates } from '@documenso/lib/server-only/template/get-templates';
 
@@ -14,6 +16,10 @@ type TemplatesPageProps = {
   };
 };
 
+export const metadata: Metadata = {
+  title: 'Templates',
+};
+
 export default async function TemplatesPage({ searchParams = {} }: TemplatesPageProps) {
   const { user } = await getRequiredServerComponentSession();
   const page = Number(searchParams.page) || 1;

apps/web/src/app/(signing)/sign/[token]/complete/document-preview-button.tsx

@@ -30,7 +30,7 @@ export const DocumentPreviewButton = ({
         {...props}
       >
         <FileSearch className="mr-2 h-5 w-5" strokeWidth={1.7} />
-        View Document
+        View Original Document
       </Button>
 
       <DocumentDialog documentData={documentData} open={showDialog} onOpenChange={setShowDialog} />

apps/web/src/app/(signing)/sign/[token]/complete/page.tsx

@@ -10,7 +10,7 @@ import { getDocumentAndSenderByToken } from '@documenso/lib/server-only/document
 import { getFieldsForToken } from '@documenso/lib/server-only/field/get-fields-for-token';
 import { getRecipientByToken } from '@documenso/lib/server-only/recipient/get-recipient-by-token';
 import { getRecipientSignatures } from '@documenso/lib/server-only/recipient/get-recipient-signatures';
-import { DocumentStatus, FieldType } from '@documenso/prisma/client';
+import { DocumentStatus, FieldType, RecipientRole } from '@documenso/prisma/client';
 import { DocumentDownloadButton } from '@documenso/ui/components/document/document-download-button';
 import { DocumentShareButton } from '@documenso/ui/components/document/document-share-button';
 import { SigningCard3D } from '@documenso/ui/components/signing-card';
@@ -94,7 +94,10 @@ export default async function CompletedSigningPage({
           ))}
 
         <h2 className="mt-6 max-w-[35ch] text-center text-2xl font-semibold leading-normal md:text-3xl lg:text-4xl">
-          You have signed
+          You have
+          {recipient.role === RecipientRole.SIGNER && ' signed '}
+          {recipient.role === RecipientRole.VIEWER && ' viewed '}
+          {recipient.role === RecipientRole.APPROVER && ' approved '}
           <span className="mt-1.5 block">"{truncatedTitle}"</span>
         </h2>
 
@@ -128,7 +131,7 @@ export default async function CompletedSigningPage({
             />
           ) : (
             <DocumentPreviewButton
-              className="flex-1"
+              className="text-[11px]"
               title="Signatures will appear once the document has been completed"
               documentData={documentData}
             />

apps/web/src/app/(signing)/sign/[token]/form.tsx

@@ -9,7 +9,7 @@ import { useForm } from 'react-hook-form';
 
 import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
 import { sortFieldsByPosition, validateFieldsInserted } from '@documenso/lib/utils/fields';
-import type { Document, Field, Recipient } from '@documenso/prisma/client';
+import { type Document, type Field, type Recipient, RecipientRole } from '@documenso/prisma/client';
 import { trpc } from '@documenso/trpc/react';
 import { FieldToolTip } from '@documenso/ui/components/field/field-tooltip';
 import { cn } from '@documenso/ui/lib/utils';
@@ -96,73 +96,114 @@ export const SigningForm = ({ document, recipient, fields }: SigningFormProps) =
 
       <fieldset
         disabled={isSubmitting}
-        className={cn('-mx-2 flex flex-1 flex-col overflow-hidden px-2')}
+        className={cn(
+          'custom-scrollbar -mx-2 flex flex-1 flex-col overflow-y-auto overflow-x-hidden px-2',
+        )}
       >
-        <div
+        <div className={cn('flex flex-1 flex-col')}>
-          className={cn(
+          <h3 className="text-foreground text-2xl font-semibold">
-            'custom-scrollbar -mx-2 flex flex-1 flex-col overflow-y-auto overflow-x-hidden px-2',
+            {recipient.role === RecipientRole.VIEWER && 'View Document'}
-          )}
+            {recipient.role === RecipientRole.SIGNER && 'Sign Document'}
-        >
+            {recipient.role === RecipientRole.APPROVER && 'Approve Document'}
-          <h3 className="text-foreground text-2xl font-semibold">Sign Document</h3>
+          </h3>
 
-          <p className="text-muted-foreground mt-2 text-sm">
+          {recipient.role === RecipientRole.VIEWER ? (
-            Please review the document before signing.
+            <>
-          </p>
+              <p className="text-muted-foreground mt-2 text-sm">
+                Please mark as viewed to complete
+              </p>
 
-          <hr className="border-border mb-8 mt-4" />
+              <hr className="border-border mb-8 mt-4" />
 
-          <div className="-mx-2 flex flex-1 flex-col gap-4 overflow-y-auto px-2">
+              <div className="-mx-2 flex flex-1 flex-col gap-4 overflow-y-auto px-2">
-            <div className="flex flex-1 flex-col gap-y-4">
+                <div className="flex flex-1 flex-col gap-y-4" />
-              <div>
+                <div className="flex flex-col gap-4 md:flex-row">
-                <Label htmlFor="full-name">Full Name</Label>
+                  <Button
+                    type="button"
+                    className="dark:bg-muted dark:hover:bg-muted/80 w-full  bg-black/5 hover:bg-black/10"
+                    variant="secondary"
+                    size="lg"
+                    disabled={typeof window !== 'undefined' && window.history.length <= 1}
+                    onClick={() => router.back()}
+                  >
+                    Cancel
+                  </Button>
 
-                <Input
+                  <SignDialog
-                  type="text"
+                    isSubmitting={isSubmitting}
-                  id="full-name"
+                    onSignatureComplete={handleSubmit(onFormSubmit)}
-                  className="bg-background mt-2"
+                    document={document}
-                  value={fullName}
+                    fields={fields}
-                  onChange={(e) => setFullName(e.target.value.trimStart())}
+                    fieldsValidated={fieldsValidated}
-                />
+                    role={recipient.role}
+                  />
+                </div>
               </div>
+            </>
+          ) : (
+            <>
+              <p className="text-muted-foreground mt-2 text-sm">
+                Please review the document before signing.
+              </p>
 
-              <div>
+              <hr className="border-border mb-8 mt-4" />
-                <Label htmlFor="Signature">Signature</Label>
 
-                <Card className="mt-2" gradient degrees={-120}>
+              <div className="-mx-2 flex flex-1 flex-col gap-4 overflow-y-auto px-2">
-                  <CardContent className="p-0">
+                <div className="flex flex-1 flex-col gap-y-4">
-                    <SignaturePad
+                  <div>
-                      className="h-44 w-full"
+                    <Label htmlFor="full-name">Full Name</Label>
-                      defaultValue={signature ?? undefined}
+
-                      onChange={(value) => {
+                    <Input
-                        setSignature(value);
+                      type="text"
-                      }}
+                      id="full-name"
+                      className="bg-background mt-2"
+                      value={fullName}
+                      onChange={(e) => setFullName(e.target.value.trimStart())}
                     />
-                  </CardContent>
+                  </div>
-                </Card>
+
+                  <div>
+                    <Label htmlFor="Signature">Signature</Label>
+
+                    <Card className="mt-2" gradient degrees={-120}>
+                      <CardContent className="p-0">
+                        <SignaturePad
+                          className="h-44 w-full"
+                          disabled={isSubmitting}
+                          defaultValue={signature ?? undefined}
+                          onChange={(value) => {
+                            setSignature(value);
+                          }}
+                        />
+                      </CardContent>
+                    </Card>
+                  </div>
+                </div>
+
+                <div className="flex flex-col gap-4 md:flex-row">
+                  <Button
+                    type="button"
+                    className="dark:bg-muted dark:hover:bg-muted/80 w-full  bg-black/5 hover:bg-black/10"
+                    variant="secondary"
+                    size="lg"
+                    disabled={typeof window !== 'undefined' && window.history.length <= 1}
+                    onClick={() => router.back()}
+                  >
+                    Cancel
+                  </Button>
+
+                  <SignDialog
+                    isSubmitting={isSubmitting}
+                    onSignatureComplete={handleSubmit(onFormSubmit)}
+                    document={document}
+                    fields={fields}
+                    fieldsValidated={fieldsValidated}
+                    role={recipient.role}
+                  />
+                </div>
               </div>
-            </div>
+            </>
-
+          )}
-            <div className="flex flex-col gap-4 md:flex-row">
-              <Button
-                type="button"
-                className="dark:bg-muted dark:hover:bg-muted/80 w-full  bg-black/5 hover:bg-black/10"
-                variant="secondary"
-                size="lg"
-                disabled={typeof window !== 'undefined' && window.history.length <= 1}
-                onClick={() => router.back()}
-              >
-                Cancel
-              </Button>
-
-              <SignDialog
-                isSubmitting={isSubmitting}
-                onSignatureComplete={handleSubmit(onFormSubmit)}
-                document={document}
-                fields={fields}
-                fieldsValidated={fieldsValidated}
-              />
-            </div>
-          </div>
         </div>
       </fieldset>
     </form>

apps/web/src/app/(signing)/sign/[token]/page.tsx

@@ -14,7 +14,7 @@ import { getFieldsForToken } from '@documenso/lib/server-only/field/get-fields-f
 import { getRecipientByToken } from '@documenso/lib/server-only/recipient/get-recipient-by-token';
 import { getRecipientSignatures } from '@documenso/lib/server-only/recipient/get-recipient-signatures';
 import { symmetricDecrypt } from '@documenso/lib/universal/crypto';
-import { DocumentStatus, FieldType, SigningStatus } from '@documenso/prisma/client';
+import { DocumentStatus, FieldType, RecipientRole, SigningStatus } from '@documenso/prisma/client';
 import { Card, CardContent } from '@documenso/ui/primitives/card';
 import { ElementVisible } from '@documenso/ui/primitives/element-visible';
 import { LazyPDFViewer } from '@documenso/ui/primitives/lazy-pdf-viewer';
@@ -110,7 +110,10 @@ export default async function SigningPage({ params: { token } }: SigningPageProp
 
         <div className="mt-2.5 flex items-center gap-x-6">
           <p className="text-muted-foreground">
-            {document.User.name} ({document.User.email}) has invited you to sign this document.
+            {document.User.name} ({document.User.email}) has invited you to{' '}
+            {recipient.role === RecipientRole.VIEWER && 'view'}
+            {recipient.role === RecipientRole.SIGNER && 'sign'}
+            {recipient.role === RecipientRole.APPROVER && 'approve'} this document.
           </p>
         </div>
 

apps/web/src/app/(signing)/sign/[token]/sign-dialog.tsx

@@ -1,6 +1,7 @@
 import { useState } from 'react';
 
 import type { Document, Field } from '@documenso/prisma/client';
+import { RecipientRole } from '@documenso/prisma/client';
 import { Button } from '@documenso/ui/primitives/button';
 import {
   Dialog,
@@ -17,6 +18,7 @@ export type SignDialogProps = {
   fields: Field[];
   fieldsValidated: () => void | Promise<void>;
   onSignatureComplete: () => void | Promise<void>;
+  role: RecipientRole;
 };
 
 export const SignDialog = ({
@@ -25,6 +27,7 @@ export const SignDialog = ({
   fields,
   fieldsValidated,
   onSignatureComplete,
+  role,
 }: SignDialogProps) => {
   const [showDialog, setShowDialog] = useState(false);
   const truncatedTitle = truncateTitle(document.title);
@@ -45,9 +48,18 @@ export const SignDialog = ({
       </DialogTrigger>
       <DialogContent>
         <div className="text-center">
-          <div className="text-xl font-semibold text-neutral-800">Sign Document</div>
+          <div className="text-foreground text-xl font-semibold">
+            {role === RecipientRole.VIEWER && 'Mark Document as Viewed'}
+            {role === RecipientRole.SIGNER && 'Sign Document'}
+            {role === RecipientRole.APPROVER && 'Approve Document'}
+          </div>
           <div className="text-muted-foreground mx-auto w-4/5 py-2 text-center">
-            You are about to finish signing "{truncatedTitle}". Are you sure?
+            {role === RecipientRole.VIEWER &&
+              `You are about to finish viewing "${truncatedTitle}". Are you sure?`}
+            {role === RecipientRole.SIGNER &&
+              `You are about to finish signing "${truncatedTitle}". Are you sure?`}
+            {role === RecipientRole.APPROVER &&
+              `You are about to finish approving "${truncatedTitle}". Are you sure?`}
           </div>
         </div>
 
@@ -71,7 +83,9 @@ export const SignDialog = ({
               loading={isSubmitting}
               onClick={onSignatureComplete}
             >
-              Sign
+              {role === RecipientRole.VIEWER && 'Mark as Viewed'}
+              {role === RecipientRole.SIGNER && 'Sign'}
+              {role === RecipientRole.APPROVER && 'Approve'}
             </Button>
           </div>
         </DialogFooter>

apps/web/src/app/(unauthenticated)/check-email/page.tsx

@@ -1,7 +1,12 @@
+import type { Metadata } from 'next';
 import Link from 'next/link';
 
 import { Button } from '@documenso/ui/primitives/button';
 
+export const metadata: Metadata = {
+  title: 'Forgot password',
+};
+
 export default function ForgotPasswordPage() {
   return (
     <div>

apps/web/src/app/(unauthenticated)/forgot-password/page.tsx

@@ -1,7 +1,12 @@
+import type { Metadata } from 'next';
 import Link from 'next/link';
 
 import { ForgotPasswordForm } from '~/components/forms/forgot-password';
 
+export const metadata: Metadata = {
+  title: 'Forgot Password',
+};
+
 export default function ForgotPasswordPage() {
   return (
     <div>

apps/web/src/app/(unauthenticated)/reset-password/page.tsx

@@ -1,7 +1,12 @@
+import type { Metadata } from 'next';
 import Link from 'next/link';
 
 import { Button } from '@documenso/ui/primitives/button';
 
+export const metadata: Metadata = {
+  title: 'Reset Password',
+};
+
 export default function ResetPasswordPage() {
   return (
     <div>

apps/web/src/app/(unauthenticated)/signin/page.tsx

@@ -1,9 +1,14 @@
+import type { Metadata } from 'next';
 import Link from 'next/link';
 
 import { IS_GOOGLE_SSO_ENABLED } from '@documenso/lib/constants/auth';
 
 import { SignInForm } from '~/components/forms/signin';
 
+export const metadata: Metadata = {
+  title: 'Sign In',
+};
+
 export default function SignInPage() {
   return (
     <div>

apps/web/src/app/(unauthenticated)/signup/page.tsx

@@ -1,3 +1,4 @@
+import type { Metadata } from 'next';
 import Link from 'next/link';
 import { redirect } from 'next/navigation';
 
@@ -5,6 +6,10 @@ import { IS_GOOGLE_SSO_ENABLED } from '@documenso/lib/constants/auth';
 
 import { SignUpForm } from '~/components/forms/signup';
 
+export const metadata: Metadata = {
+  title: 'Sign Up',
+};
+
 export default function SignUpPage() {
   if (process.env.NEXT_PUBLIC_DISABLE_SIGNUP === 'true') {
     redirect('/signin');

apps/web/src/app/(unauthenticated)/verify-email/page.tsx

@@ -1,9 +1,14 @@
+import type { Metadata } from 'next';
 import Link from 'next/link';
 
 import { XCircle } from 'lucide-react';
 
 import { Button } from '@documenso/ui/primitives/button';
 
+export const metadata: Metadata = {
+  title: 'Verify Email',
+};
+
 export default function EmailVerificationWithoutTokenPage() {
   return (
     <div className="flex w-full items-start">

apps/web/src/app/layout.tsx

@@ -20,7 +20,10 @@ const fontInter = Inter({ subsets: ['latin'], variable: '--font-sans' });
 const fontCaveat = Caveat({ subsets: ['latin'], variable: '--font-signature' });
 
 export const metadata = {
-  title: 'Documenso - The Open Source DocuSign Alternative',
+  title: {
+    template: '%s - Documenso',
+    default: 'Documenso',
+  },
   description:
     'Join Documenso, the open signing infrastructure, and get a 10x better signing experience. Pricing starts at $30/mo. forever! Sign in now and enjoy a faster, smarter, and more beautiful document signing process. Integrates with your favorite tools, customizable, and expandable. Support our mission and become a part of our open-source community.',
   keywords:

apps/web/src/components/(dashboard)/avatar/avatar-with-recipient.tsx

@@ -4,6 +4,7 @@ import React from 'react';
 
 import { useCopyToClipboard } from '@documenso/lib/client-only/hooks/use-copy-to-clipboard';
 import { getRecipientType } from '@documenso/lib/client-only/recipient-type';
+import { RECIPIENT_ROLES_DESCRIPTION } from '@documenso/lib/constants/recipient-roles';
 import { recipientAbbreviation } from '@documenso/lib/utils/recipient-formatter';
 import type { Recipient } from '@documenso/prisma/client';
 import { cn } from '@documenso/ui/lib/utils';
@@ -47,8 +48,17 @@ export function AvatarWithRecipient({ recipient }: AvatarWithRecipientProps) {
         type={getRecipientType(recipient)}
         fallbackText={recipientAbbreviation(recipient)}
       />
-
+      <div>
-      <span className="text-muted-foreground text-sm">{recipient.email}</span>
+        <div
+          className="text-muted-foreground text-sm"
+          title="Click to copy signing link for sending to recipient"
+        >
+          <p>{recipient.email} </p>
+          <p className="text-muted-foreground/70 text-xs">
+            {RECIPIENT_ROLES_DESCRIPTION[recipient.role].roleName}
+          </p>
+        </div>
+      </div>
     </div>
   );
 }

apps/web/src/components/(dashboard)/avatar/stack-avatars-with-tooltip.tsx

@@ -1,4 +1,5 @@
 import { getRecipientType } from '@documenso/lib/client-only/recipient-type';
+import { RECIPIENT_ROLES_DESCRIPTION } from '@documenso/lib/constants/recipient-roles';
 import { recipientAbbreviation } from '@documenso/lib/utils/recipient-formatter';
 import type { Recipient } from '@documenso/prisma/client';
 import {
@@ -59,7 +60,12 @@ export const StackAvatarsWithTooltip = ({
                       type={getRecipientType(recipient)}
                       fallbackText={recipientAbbreviation(recipient)}
                     />
-                    <span className="text-muted-foreground text-sm">{recipient.email}</span>
+                    <div className="">
+                      <p className="text-muted-foreground text-sm">{recipient.email}</p>
+                      <p className="text-muted-foreground/70 text-xs">
+                        {RECIPIENT_ROLES_DESCRIPTION[recipient.role].roleName}
+                      </p>
+                    </div>
                   </div>
                 ))}
               </div>

apps/web/src/components/(dashboard)/layout/header.tsx

@@ -33,7 +33,7 @@ export const Header = ({ className, user, ...props }: HeaderProps) => {
   return (
     <header
       className={cn(
-        'supports-backdrop-blur:bg-background/60 bg-background/95 sticky top-0 z-[50] flex h-16 w-full items-center border-b border-b-transparent backdrop-blur duration-200',
+        'supports-backdrop-blur:bg-background/60 bg-background/95 sticky top-0 z-[60] flex h-16 w-full items-center border-b border-b-transparent backdrop-blur duration-200',
         scrollY > 5 && 'border-b-border',
         className,
       )}

apps/web/src/components/(dashboard)/layout/profile-dropdown.tsx

@@ -68,7 +68,7 @@ export const ProfileDropdown = ({ user }: ProfileDropdownProps) => {
         </Button>
       </DropdownMenuTrigger>
 
-      <DropdownMenuContent className="w-56" align="end" forceMount>
+      <DropdownMenuContent className="z-[60] w-56" align="end" forceMount>
         <DropdownMenuLabel>Account</DropdownMenuLabel>
 
         {isUserAdmin && (
@@ -122,7 +122,7 @@ export const ProfileDropdown = ({ user }: ProfileDropdownProps) => {
             Themes
           </DropdownMenuSubTrigger>
           <DropdownMenuPortal>
-            <DropdownMenuSubContent>
+            <DropdownMenuSubContent className="z-[60]">
               <DropdownMenuRadioGroup value={theme} onValueChange={setTheme}>
                 <DropdownMenuRadioItem value="light">
                   <Sun className="mr-2 h-4 w-4" /> Light

apps/web/src/components/(dashboard)/period-selector/types.ts

@@ -1,4 +1,4 @@
-export type PeriodSelectorValue = '' | '7d' | '14d' | '30d';
+import type { PeriodSelectorValue } from '@documenso/lib/server-only/document/find-documents';
 
 export const isPeriodSelectorValue = (value: unknown): value is PeriodSelectorValue => {
   // eslint-disable-next-line @typescript-eslint/consistent-type-assertions

apps/web/src/components/forms/2fa/authenticator-app.tsx

@@ -19,27 +19,14 @@ export const AuthenticatorApp = ({ isTwoFactorEnabled }: AuthenticatorAppProps)
 
   return (
     <>
-      <div className="mt-4 flex flex-col justify-between gap-4 rounded-lg border p-4 md:flex-row md:items-center md:gap-8">
+      <div className="flex-shrink-0">
-        <div className="flex-1">
+        {isTwoFactorEnabled ? (
-          <p>Authenticator app</p>
+          <Button variant="destructive" onClick={() => setModalState('disable')}>
-
+            Disable 2FA
-          <p className="text-muted-foreground mt-2 max-w-[50ch] text-sm">
+          </Button>
-            Create one-time passwords that serve as a secondary authentication method for confirming
+        ) : (
-            your identity when requested during the sign-in process.
+          <Button onClick={() => setModalState('enable')}>Enable 2FA</Button>
-          </p>
+        )}
-        </div>
-
-        <div>
-          {isTwoFactorEnabled ? (
-            <Button variant="destructive" onClick={() => setModalState('disable')} size="sm">
-              Disable 2FA
-            </Button>
-          ) : (
-            <Button onClick={() => setModalState('enable')} size="sm">
-              Enable 2FA
-            </Button>
-          )}
-        </div>
       </div>
 
       <EnableAuthenticatorAppDialog

apps/web/src/components/forms/2fa/disable-authenticator-app-dialog.tsx

@@ -11,6 +11,7 @@ import {
   Dialog,
   DialogContent,
   DialogDescription,
+  DialogFooter,
   DialogHeader,
   DialogTitle,
 } from '@documenso/ui/primitives/dialog';
@@ -145,8 +146,8 @@ export const DisableAuthenticatorAppDialog = ({
               />
             </fieldset>
 
-            <div className="flex w-full items-center justify-between">
+            <DialogFooter>
-              <Button type="button" variant="ghost" onClick={() => onOpenChange(false)}>
+              <Button type="button" variant="secondary" onClick={() => onOpenChange(false)}>
                 Cancel
               </Button>
 
@@ -157,7 +158,7 @@ export const DisableAuthenticatorAppDialog = ({
               >
                 Disable 2FA
               </Button>
-            </div>
+            </DialogFooter>
           </form>
         </Form>
       </DialogContent>

apps/web/src/components/forms/2fa/enable-authenticator-app-dialog.tsx

@@ -15,6 +15,7 @@ import {
   Dialog,
   DialogContent,
   DialogDescription,
+  DialogFooter,
   DialogHeader,
   DialogTitle,
 } from '@documenso/ui/primitives/dialog';
@@ -190,15 +191,15 @@ export const EnableAuthenticatorAppDialog = ({
                     )}
                   />
 
-                  <div className="flex w-full items-center justify-between">
+                  <DialogFooter>
-                    <Button type="button" variant="ghost" onClick={() => onOpenChange(false)}>
+                    <Button type="button" variant="secondary" onClick={() => onOpenChange(false)}>
                       Cancel
                     </Button>
 
                     <Button type="submit" loading={isSetupTwoFactorAuthenticationSubmitting}>
                       Continue
                     </Button>
-                  </div>
+                  </DialogFooter>
                 </form>
               </Form>
             );
@@ -251,15 +252,15 @@ export const EnableAuthenticatorAppDialog = ({
                   )}
                 />
 
-                <div className="flex w-full items-center justify-between">
+                <DialogFooter>
-                  <Button type="button" variant="ghost" onClick={() => onOpenChange(false)}>
+                  <Button type="button" variant="secondary" onClick={() => onOpenChange(false)}>
                     Cancel
                   </Button>
 
                   <Button type="submit" loading={isEnableTwoFactorAuthenticationSubmitting}>
                     Enable 2FA
                   </Button>
-                </div>
+                </DialogFooter>
               </form>
             </Form>
           ))

apps/web/src/components/forms/2fa/recovery-codes.tsx

@@ -7,7 +7,6 @@ import { Button } from '@documenso/ui/primitives/button';
 import { ViewRecoveryCodesDialog } from './view-recovery-codes-dialog';
 
 type RecoveryCodesProps = {
-  // backupCodes: string[] | null;
   isTwoFactorEnabled: boolean;
 };
 
@@ -16,22 +15,13 @@ export const RecoveryCodes = ({ isTwoFactorEnabled }: RecoveryCodesProps) => {
 
   return (
     <>
-      <div className="mt-4 flex flex-col justify-between gap-4 rounded-lg border p-4 md:flex-row md:items-center md:gap-8">
+      <Button
-        <div className="flex-1">
+        className="flex-shrink-0"
-          <p>Recovery Codes</p>
+        onClick={() => setIsOpen(true)}
-
+        disabled={!isTwoFactorEnabled}
-          <p className="text-muted-foreground mt-2 max-w-[50ch] text-sm">
+      >
-            Recovery codes are used to access your account in the event that you lose access to your
+        View Codes
-            authenticator app.
+      </Button>
-          </p>
-        </div>
-
-        <div>
-          <Button onClick={() => setIsOpen(true)} disabled={!isTwoFactorEnabled} size="sm">
-            View Codes
-          </Button>
-        </div>
-      </div>
 
       <ViewRecoveryCodesDialog
         key={isOpen ? 'open' : 'closed'}

apps/web/src/components/forms/2fa/view-recovery-codes-dialog.tsx

@@ -11,6 +11,7 @@ import {
   Dialog,
   DialogContent,
   DialogDescription,
+  DialogFooter,
   DialogHeader,
   DialogTitle,
 } from '@documenso/ui/primitives/dialog';
@@ -119,15 +120,15 @@ export const ViewRecoveryCodesDialog = ({ open, onOpenChange }: ViewRecoveryCode
                     )}
                   />
 
-                  <div className="flex w-full items-center justify-between">
+                  <DialogFooter>
-                    <Button type="button" variant="ghost" onClick={() => onOpenChange(false)}>
+                    <Button type="button" variant="secondary" onClick={() => onOpenChange(false)}>
                       Cancel
                     </Button>
 
                     <Button type="submit" loading={isViewRecoveryCodesSubmitting}>
                       Continue
                     </Button>
-                  </div>
+                  </DialogFooter>
                 </form>
               </Form>
             );

apps/web/src/components/forms/password.tsx

@@ -7,6 +7,7 @@ import { z } from 'zod';
 import type { User } from '@documenso/prisma/client';
 import { TRPCClientError } from '@documenso/trpc/client';
 import { trpc } from '@documenso/trpc/react';
+import { ZCurrentPasswordSchema, ZPasswordSchema } from '@documenso/trpc/server/auth-router/schema';
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
 import {
@@ -22,18 +23,9 @@ import { useToast } from '@documenso/ui/primitives/use-toast';
 
 export const ZPasswordFormSchema = z
   .object({
-    currentPassword: z
+    currentPassword: ZCurrentPasswordSchema,
-      .string()
+    password: ZPasswordSchema,
-      .min(6, { message: 'Password should contain at least 6 characters' })
+    repeatedPassword: ZPasswordSchema,
-      .max(72, { message: 'Password should not contain more than 72 characters' }),
-    password: z
-      .string()
-      .min(6, { message: 'Password should contain at least 6 characters' })
-      .max(72, { message: 'Password should not contain more than 72 characters' }),
-    repeatedPassword: z
-      .string()
-      .min(6, { message: 'Password should contain at least 6 characters' })
-      .max(72, { message: 'Password should not contain more than 72 characters' }),
   })
   .refine((data) => data.password === data.repeatedPassword, {
     message: 'Passwords do not match',
@@ -145,7 +137,7 @@ export const PasswordForm = ({ className }: PasswordFormProps) => {
           />
         </fieldset>
 
-        <div className="mt-4">
+        <div className="ml-auto mt-4">
           <Button type="submit" loading={isSubmitting}>
             {isSubmitting ? 'Updating password...' : 'Update password'}
           </Button>

apps/web/src/components/forms/profile.tsx

@@ -121,10 +121,8 @@ export const ProfileForm = ({ className, user }: ProfileFormProps) => {
                 <FormControl>
                   <SignaturePad
                     className="h-44 w-full"
-                    containerClassName={cn(
+                    disabled={isSubmitting}
-                      'rounded-lg border bg-background',
+                    containerClassName={cn('rounded-lg border bg-background')}
-                      isSubmitting ? 'pointer-events-none opacity-50' : null,
-                    )}
                     defaultValue={user.signature ?? undefined}
                     onChange={(v) => onChange(v ?? '')}
                   />

apps/web/src/components/forms/reset-password.tsx

@@ -8,6 +8,7 @@ import { z } from 'zod';
 
 import { TRPCClientError } from '@documenso/trpc/client';
 import { trpc } from '@documenso/trpc/react';
+import { ZPasswordSchema } from '@documenso/trpc/server/auth-router/schema';
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
 import {
@@ -23,8 +24,8 @@ import { useToast } from '@documenso/ui/primitives/use-toast';
 
 export const ZResetPasswordFormSchema = z
   .object({
-    password: z.string().min(6).max(72),
+    password: ZPasswordSchema,
-    repeatedPassword: z.string().min(6).max(72),
+    repeatedPassword: ZPasswordSchema,
   })
   .refine((data) => data.password === data.repeatedPassword, {
     path: ['repeatedPassword'],

apps/web/src/components/forms/signin.tsx

@@ -9,9 +9,16 @@ import { FcGoogle } from 'react-icons/fc';
 import { z } from 'zod';
 
 import { ErrorCode, isErrorCode } from '@documenso/lib/next-auth/error-codes';
+import { ZCurrentPasswordSchema } from '@documenso/trpc/server/auth-router/schema';
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
-import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@documenso/ui/primitives/dialog';
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@documenso/ui/primitives/dialog';
 import {
   Form,
   FormControl,
@@ -39,7 +46,7 @@ const LOGIN_REDIRECT_PATH = '/documents';
 
 export const ZSignInFormSchema = z.object({
   email: z.string().email().min(1),
-  password: z.string().min(6).max(72),
+  password: ZCurrentPasswordSchema,
   totpCode: z.string().trim().optional(),
   backupCode: z.string().trim().optional(),
 });
@@ -110,7 +117,6 @@ export const SignInForm = ({ className, isGoogleSSOEnabled }: SignInFormProps) =
 
       const result = await signIn('credentials', {
         ...credentials,
-
         callbackUrl: LOGIN_REDIRECT_PATH,
         redirect: false,
       });
@@ -269,21 +275,23 @@ export const SignInForm = ({ className, isGoogleSSOEnabled }: SignInFormProps) =
                   )}
                 />
               )}
+
+              <DialogFooter className="mt-4">
+                <Button
+                  type="button"
+                  variant="secondary"
+                  onClick={onToggleTwoFactorAuthenticationMethodClick}
+                >
+                  {twoFactorAuthenticationMethod === 'totp'
+                    ? 'Use Backup Code'
+                    : 'Use Authenticator'}
+                </Button>
+
+                <Button type="submit" loading={isSubmitting}>
+                  {isSubmitting ? 'Signing in...' : 'Sign In'}
+                </Button>
+              </DialogFooter>
             </fieldset>
-
-            <div className="mt-4 flex items-center justify-between">
-              <Button
-                type="button"
-                variant="ghost"
-                onClick={onToggleTwoFactorAuthenticationMethodClick}
-              >
-                {twoFactorAuthenticationMethod === 'totp' ? 'Use Backup Code' : 'Use Authenticator'}
-              </Button>
-
-              <Button type="submit" loading={isSubmitting}>
-                {isSubmitting ? 'Signing in...' : 'Sign In'}
-              </Button>
-            </div>
           </form>
         </DialogContent>
       </Dialog>

apps/web/src/components/forms/signup.tsx

@@ -9,6 +9,7 @@ import { z } from 'zod';
 import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
 import { TRPCClientError } from '@documenso/trpc/client';
 import { trpc } from '@documenso/trpc/react';
+import { ZPasswordSchema } from '@documenso/trpc/server/auth-router/schema';
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
 import {
@@ -26,15 +27,22 @@ import { useToast } from '@documenso/ui/primitives/use-toast';
 
 const SIGN_UP_REDIRECT_PATH = '/documents';
 
-export const ZSignUpFormSchema = z.object({
+export const ZSignUpFormSchema = z
-  name: z.string().trim().min(1, { message: 'Please enter a valid name.' }),
+  .object({
-  email: z.string().email().min(1),
+    name: z.string().trim().min(1, { message: 'Please enter a valid name.' }),
-  password: z
+    email: z.string().email().min(1),
-    .string()
+    password: ZPasswordSchema,
-    .min(6, { message: 'Password should contain at least 6 characters' })
+    signature: z.string().min(1, { message: 'We need your signature to sign documents' }),
-    .max(72, { message: 'Password should not contain more than 72 characters' }),
+  })
-  signature: z.string().min(1, { message: 'We need your signature to sign documents' }),
+  .refine(
-});
+    (data) => {
+      const { name, email, password } = data;
+      return !password.includes(name) && !password.includes(email.split('@')[0]);
+    },
+    {
+      message: 'Password should not be common or based on personal information',
+    },
+  );
 
 export type TSignUpFormSchema = z.infer<typeof ZSignUpFormSchema>;
 
@@ -164,6 +172,7 @@ export const SignUpForm = ({ className, isGoogleSSOEnabled }: SignUpFormProps) =
                 <FormControl>
                   <SignaturePad
                     className="h-36 w-full"
+                    disabled={isSubmitting}
                     containerClassName="mt-2 rounded-lg border bg-background"
                     onChange={(v) => onChange(v ?? '')}
                   />

apps/web/src/pages/api/auth/[...nextauth].ts

@@ -1,17 +1,65 @@
-// import { NextApiRequest, NextApiResponse } from 'next';
+import type { NextApiRequest, NextApiResponse } from 'next';
+
 import NextAuth from 'next-auth';
 
 import { NEXT_AUTH_OPTIONS } from '@documenso/lib/next-auth/auth-options';
+import { extractNextApiRequestMetadata } from '@documenso/lib/universal/extract-request-metadata';
+import { prisma } from '@documenso/prisma';
+import { UserSecurityAuditLogType } from '@documenso/prisma/client';
 
-export default NextAuth({
+export default async function auth(req: NextApiRequest, res: NextApiResponse) {
-  ...NEXT_AUTH_OPTIONS,
+  const { ipAddress, userAgent } = extractNextApiRequestMetadata(req);
-  pages: {
-    signIn: '/signin',
-    signOut: '/signout',
-    error: '/signin',
-  },
-});
 
-// export default async function handler(_req: NextApiRequest, res: NextApiResponse) {
+  return await NextAuth(req, res, {
-//   res.json({ hello: 'world' });
+    ...NEXT_AUTH_OPTIONS,
-// }
+    pages: {
+      signIn: '/signin',
+      signOut: '/signout',
+      error: '/signin',
+    },
+    events: {
+      signIn: async ({ user }) => {
+        await prisma.userSecurityAuditLog.create({
+          data: {
+            userId: user.id,
+            ipAddress,
+            userAgent,
+            type: UserSecurityAuditLogType.SIGN_IN,
+          },
+        });
+      },
+      signOut: async ({ token }) => {
+        const userId = typeof token.id === 'string' ? parseInt(token.id) : token.id;
+
+        if (isNaN(userId)) {
+          return;
+        }
+
+        await prisma.userSecurityAuditLog.create({
+          data: {
+            userId,
+            ipAddress,
+            userAgent,
+            type: UserSecurityAuditLogType.SIGN_OUT,
+          },
+        });
+      },
+      linkAccount: async ({ user }) => {
+        const userId = typeof user.id === 'string' ? parseInt(user.id) : user.id;
+
+        if (isNaN(userId)) {
+          return;
+        }
+
+        await prisma.userSecurityAuditLog.create({
+          data: {
+            userId,
+            ipAddress,
+            userAgent,
+            type: UserSecurityAuditLogType.ACCOUNT_SSO_LINK,
+          },
+        });
+      },
+    },
+  });
+}

docker/Dockerfile

@@ -39,6 +39,14 @@ ENV HUSKY 0
 ENV DOCKER_OUTPUT 1
 ENV NEXT_TELEMETRY_DISABLED 1
 
+# Encryption keys
+ARG NEXT_PRIVATE_ENCRYPTION_KEY="CAFEBABE"
+ENV NEXT_PRIVATE_ENCRYPTION_KEY="$NEXT_PRIVATE_ENCRYPTION_KEY"
+
+ARG NEXT_PRIVATE_ENCRYPTION_SECONDARY_KEY="DEADBEEF"
+ENV NEXT_PRIVATE_ENCRYPTION_SECONDARY_KEY="$NEXT_PRIVATE_ENCRYPTION_SECONDARY_KEY"
+
+
 # Uncomment and use build args to enable remote caching
 # ARG TURBO_TEAM
 # ENV TURBO_TEAM=$TURBO_TEAM

package-lock.json

@@ -158,6 +158,7 @@
         "sharp": "0.33.1",
         "ts-pattern": "^5.0.5",
         "typescript": "5.2.2",
+        "ua-parser-js": "^1.0.37",
         "uqr": "^0.1.2",
         "zod": "^3.22.4"
       },
@@ -166,7 +167,8 @@
         "@types/luxon": "^3.3.1",
         "@types/node": "20.1.0",
         "@types/react": "18.2.18",
-        "@types/react-dom": "18.2.7"
+        "@types/react-dom": "18.2.7",
+        "@types/ua-parser-js": "^0.7.39"
       }
     },
     "apps/web/node_modules/@types/node": {
@@ -6756,6 +6758,12 @@
       "resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.5.6.tgz",
       "integrity": "sha512-dn1l8LaMea/IjDoHNd9J52uBbInB796CDffS6VdIxvqYCPSG0V0DzHp76GpaWnlhg88uYyPbXCDIowa86ybd5A=="
     },
+    "node_modules/@types/ua-parser-js": {
+      "version": "0.7.39",
+      "resolved": "https://registry.npmjs.org/@types/ua-parser-js/-/ua-parser-js-0.7.39.tgz",
+      "integrity": "sha512-P/oDfpofrdtF5xw433SPALpdSchtJmY7nsJItf8h3KXqOslkbySh8zq4dSWXH2oTjRvJ5PczVEoCZPow6GicLg==",
+      "dev": true
+    },
     "node_modules/@types/unist": {
       "version": "2.0.10",
       "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.10.tgz",
@@ -18643,6 +18651,28 @@
         "node": ">=14.17"
       }
     },
+    "node_modules/ua-parser-js": {
+      "version": "1.0.37",
+      "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-1.0.37.tgz",
+      "integrity": "sha512-bhTyI94tZofjo+Dn8SN6Zv8nBDvyXTymAdM3LDI/0IboIUwTu1rEhW7v2TfiVsoYWgkQ4kOVqnI8APUFbIQIFQ==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/ua-parser-js"
+        },
+        {
+          "type": "paypal",
+          "url": "https://paypal.me/faisalman"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/faisalman"
+        }
+      ],
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/unbox-primitive": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz",

packages/app-tests/e2e/test-auth-flow.spec.ts

@@ -12,7 +12,7 @@ test.describe.configure({ mode: 'serial' });
 
 const username = 'Test User';
 const email = 'test-user@auth-flow.documenso.com';
-const password = 'Password123';
+const password = 'Password123#';
 
 test('user can sign up with email and password', async ({ page }: { page: Page }) => {
   await page.goto('/signup');

packages/email/template-components/template-document-invite.tsx

@@ -1,3 +1,6 @@
+import { RECIPIENT_ROLES_DESCRIPTION } from '@documenso/lib/constants/recipient-roles';
+import type { RecipientRole } from '@documenso/prisma/client';
+
 import { Button, Section, Text } from '../components';
 import { TemplateDocumentImage } from './template-document-image';
 
@@ -7,6 +10,7 @@ export interface TemplateDocumentInviteProps {
   documentName: string;
   signDocumentLink: string;
   assetBaseUrl: string;
+  role: RecipientRole;
 }
 
 export const TemplateDocumentInvite = ({
@@ -14,19 +18,22 @@ export const TemplateDocumentInvite = ({
   documentName,
   signDocumentLink,
   assetBaseUrl,
+  role,
 }: TemplateDocumentInviteProps) => {
+  const { actionVerb, progressiveVerb } = RECIPIENT_ROLES_DESCRIPTION[role];
+
   return (
     <>
       <TemplateDocumentImage className="mt-6" assetBaseUrl={assetBaseUrl} />
 
       <Section>
         <Text className="text-primary mx-auto mb-0 max-w-[80%] text-center text-lg font-semibold">
-          {inviterName} has invited you to sign
+          {inviterName} has invited you to {actionVerb.toLowerCase()}
           <br />"{documentName}"
         </Text>
 
         <Text className="my-1 text-center text-base text-slate-400">
-          Continue by signing the document.
+          Continue by {progressiveVerb.toLowerCase()} the document.
         </Text>
 
         <Section className="mb-6 mt-8 text-center">
@@ -34,7 +41,7 @@ export const TemplateDocumentInvite = ({
             className="bg-documenso-500 inline-flex items-center justify-center rounded-lg px-6 py-3 text-center text-sm font-medium text-black no-underline"
             href={signDocumentLink}
           >
-            Sign Document
+            {actionVerb} Document
           </Button>
         </Section>
       </Section>

packages/email/templates/document-invite.tsx

@@ -1,3 +1,5 @@
+import { RECIPIENT_ROLES_DESCRIPTION } from '@documenso/lib/constants/recipient-roles';
+import type { RecipientRole } from '@documenso/prisma/client';
 import config from '@documenso/tailwind-config';
 
 import {
@@ -19,6 +21,7 @@ import { TemplateFooter } from '../template-components/template-footer';
 
 export type DocumentInviteEmailTemplateProps = Partial<TemplateDocumentInviteProps> & {
   customBody?: string;
+  role: RecipientRole;
 };
 
 export const DocumentInviteEmailTemplate = ({
@@ -28,8 +31,11 @@ export const DocumentInviteEmailTemplate = ({
   signDocumentLink = 'https://documenso.com',
   assetBaseUrl = 'http://localhost:3002',
   customBody,
+  role,
 }: DocumentInviteEmailTemplateProps) => {
-  const previewText = `${inviterName} has invited you to sign ${documentName}`;
+  const action = RECIPIENT_ROLES_DESCRIPTION[role].actionVerb.toLowerCase();
+
+  const previewText = `${inviterName} has invited you to ${action} ${documentName}`;
 
   const getAssetUrl = (path: string) => {
     return new URL(path, assetBaseUrl).toString();
@@ -64,6 +70,7 @@ export const DocumentInviteEmailTemplate = ({
                   documentName={documentName}
                   signDocumentLink={signDocumentLink}
                   assetBaseUrl={assetBaseUrl}
+                  role={role}
                 />
               </Section>
             </Container>
@@ -81,7 +88,7 @@ export const DocumentInviteEmailTemplate = ({
                   {customBody ? (
                     <pre className="font-sans text-base text-slate-400">{customBody}</pre>
                   ) : (
-                    `${inviterName} has invited you to sign the document "${documentName}".`
+                    `${inviterName} has invited you to ${action} the document "${documentName}".`
                   )}
                 </Text>
               </Section>

packages/lib/client-only/recipient-type.ts

@@ -1,10 +1,10 @@
 import type { Recipient } from '@documenso/prisma/client';
-import { ReadStatus, SendStatus, SigningStatus } from '@documenso/prisma/client';
+import { ReadStatus, RecipientRole, SendStatus, SigningStatus } from '@documenso/prisma/client';
 
 export const getRecipientType = (recipient: Recipient) => {
   if (
-    recipient.sendStatus === SendStatus.SENT &&
+    recipient.role === RecipientRole.CC ||
-    recipient.signingStatus === SigningStatus.SIGNED
+    (recipient.sendStatus === SendStatus.SENT && recipient.signingStatus === SigningStatus.SIGNED)
   ) {
     return 'completed';
   }

packages/lib/constants/app.ts

@@ -6,3 +6,6 @@ export const APP_FOLDER = IS_APP_MARKETING ? 'marketing' : 'web';
 export const APP_BASE_URL = IS_APP_WEB
   ? process.env.NEXT_PUBLIC_WEBAPP_URL
   : process.env.NEXT_PUBLIC_MARKETING_URL;
+
+export const APP_DOCUMENT_UPLOAD_SIZE_LIMIT =
+  Number(process.env.NEXT_PUBLIC_DOCUMENT_SIZE_UPLOAD_LIMIT) || 50;

packages/lib/constants/auth.ts

@@ -1,4 +1,4 @@
-import { IdentityProvider } from '@documenso/prisma/client';
+import { IdentityProvider, UserSecurityAuditLogType } from '@documenso/prisma/client';
 
 export const SALT_ROUNDS = 12;
 
@@ -10,3 +10,16 @@ export const IDENTITY_PROVIDER_NAME: { [key in IdentityProvider]: string } = {
 export const IS_GOOGLE_SSO_ENABLED = Boolean(
   process.env.NEXT_PRIVATE_GOOGLE_CLIENT_ID && process.env.NEXT_PRIVATE_GOOGLE_CLIENT_SECRET,
 );
+
+export const USER_SECURITY_AUDIT_LOG_MAP: { [key in UserSecurityAuditLogType]: string } = {
+  [UserSecurityAuditLogType.ACCOUNT_SSO_LINK]: 'Linked account to SSO',
+  [UserSecurityAuditLogType.ACCOUNT_PROFILE_UPDATE]: 'Profile updated',
+  [UserSecurityAuditLogType.AUTH_2FA_DISABLE]: '2FA Disabled',
+  [UserSecurityAuditLogType.AUTH_2FA_ENABLE]: '2FA Enabled',
+  [UserSecurityAuditLogType.PASSWORD_RESET]: 'Password reset',
+  [UserSecurityAuditLogType.PASSWORD_UPDATE]: 'Password updated',
+  [UserSecurityAuditLogType.SIGN_OUT]: 'Signed Out',
+  [UserSecurityAuditLogType.SIGN_IN]: 'Signed In',
+  [UserSecurityAuditLogType.SIGN_IN_FAIL]: 'Sign in attempt failed',
+  [UserSecurityAuditLogType.SIGN_IN_2FA_FAIL]: 'Sign in 2FA attempt failed',
+};

packages/lib/constants/crypto.ts

@@ -2,14 +2,16 @@ export const DOCUMENSO_ENCRYPTION_KEY = process.env.NEXT_PRIVATE_ENCRYPTION_KEY;
 
 export const DOCUMENSO_ENCRYPTION_SECONDARY_KEY = process.env.NEXT_PRIVATE_ENCRYPTION_SECONDARY_KEY;
 
-if (!DOCUMENSO_ENCRYPTION_KEY || !DOCUMENSO_ENCRYPTION_SECONDARY_KEY) {
+if (typeof window === 'undefined') {
-  throw new Error('Missing DOCUMENSO_ENCRYPTION_KEY or DOCUMENSO_ENCRYPTION_SECONDARY_KEY keys');
+  if (!DOCUMENSO_ENCRYPTION_KEY || !DOCUMENSO_ENCRYPTION_SECONDARY_KEY) {
-}
+    throw new Error('Missing DOCUMENSO_ENCRYPTION_KEY or DOCUMENSO_ENCRYPTION_SECONDARY_KEY keys');
+  }
 
-if (DOCUMENSO_ENCRYPTION_KEY === DOCUMENSO_ENCRYPTION_SECONDARY_KEY) {
+  if (DOCUMENSO_ENCRYPTION_KEY === DOCUMENSO_ENCRYPTION_SECONDARY_KEY) {
-  throw new Error(
+    throw new Error(
-    'DOCUMENSO_ENCRYPTION_KEY and DOCUMENSO_ENCRYPTION_SECONDARY_KEY cannot be equal',
+      'DOCUMENSO_ENCRYPTION_KEY and DOCUMENSO_ENCRYPTION_SECONDARY_KEY cannot be equal',
-  );
+    );
+  }
 }
 
 if (DOCUMENSO_ENCRYPTION_KEY === 'CAFEBABE') {

packages/lib/constants/recipient-roles.ts

@@ -0,0 +1,26 @@
+import { RecipientRole } from '@documenso/prisma/client';
+
+export const RECIPIENT_ROLES_DESCRIPTION: {
+  [key in RecipientRole]: { actionVerb: string; progressiveVerb: string; roleName: string };
+} = {
+  [RecipientRole.APPROVER]: {
+    actionVerb: 'Approve',
+    progressiveVerb: 'Approving',
+    roleName: 'Approver',
+  },
+  [RecipientRole.CC]: {
+    actionVerb: 'CC',
+    progressiveVerb: 'CC',
+    roleName: 'CC',
+  },
+  [RecipientRole.SIGNER]: {
+    actionVerb: 'Sign',
+    progressiveVerb: 'Signing',
+    roleName: 'Signer',
+  },
+  [RecipientRole.VIEWER]: {
+    actionVerb: 'View',
+    progressiveVerb: 'Viewing',
+    roleName: 'Viewer',
+  },
+};

packages/lib/next-auth/auth-options.ts

@@ -9,11 +9,12 @@ import type { GoogleProfile } from 'next-auth/providers/google';
 import GoogleProvider from 'next-auth/providers/google';
 
 import { prisma } from '@documenso/prisma';
-import { IdentityProvider } from '@documenso/prisma/client';
+import { IdentityProvider, UserSecurityAuditLogType } from '@documenso/prisma/client';
 
 import { isTwoFactorAuthenticationEnabled } from '../server-only/2fa/is-2fa-availble';
 import { validateTwoFactorAuthentication } from '../server-only/2fa/validate-2fa';
 import { getUserByEmail } from '../server-only/user/get-user-by-email';
+import { extractNextAuthRequestMetadata } from '../universal/extract-request-metadata';
 import { ErrorCode } from './error-codes';
 
 export const NEXT_AUTH_OPTIONS: AuthOptions = {
@@ -35,7 +36,7 @@ export const NEXT_AUTH_OPTIONS: AuthOptions = {
         },
         backupCode: { label: 'Backup Code', type: 'input', placeholder: 'Two-factor backup code' },
       },
-      authorize: async (credentials, _req) => {
+      authorize: async (credentials, req) => {
         if (!credentials) {
           throw new Error(ErrorCode.CREDENTIALS_NOT_FOUND);
         }
@@ -51,8 +52,18 @@ export const NEXT_AUTH_OPTIONS: AuthOptions = {
         }
 
         const isPasswordsSame = await compare(password, user.password);
+        const requestMetadata = extractNextAuthRequestMetadata(req);
 
         if (!isPasswordsSame) {
+          await prisma.userSecurityAuditLog.create({
+            data: {
+              userId: user.id,
+              ipAddress: requestMetadata.ipAddress,
+              userAgent: requestMetadata.userAgent,
+              type: UserSecurityAuditLogType.SIGN_IN_FAIL,
+            },
+          });
+
           throw new Error(ErrorCode.INCORRECT_EMAIL_PASSWORD);
         }
 
@@ -62,6 +73,15 @@ export const NEXT_AUTH_OPTIONS: AuthOptions = {
           const isValid = await validateTwoFactorAuthentication({ backupCode, totpCode, user });
 
           if (!isValid) {
+            await prisma.userSecurityAuditLog.create({
+              data: {
+                userId: user.id,
+                ipAddress: requestMetadata.ipAddress,
+                userAgent: requestMetadata.userAgent,
+                type: UserSecurityAuditLogType.SIGN_IN_2FA_FAIL,
+              },
+            });
+
             throw new Error(
               totpCode
                 ? ErrorCode.INCORRECT_TWO_FACTOR_CODE
@@ -192,4 +212,5 @@ export const NEXT_AUTH_OPTIONS: AuthOptions = {
       return true;
     },
   },
+  // Note: `events` are handled in `apps/web/src/pages/api/auth/[...nextauth].ts` to allow access to the request.
 };

packages/lib/server-only/2fa/disable-2fa.ts

@@ -1,21 +1,25 @@
 import { compare } from 'bcrypt';
 
 import { prisma } from '@documenso/prisma';
-import { User } from '@documenso/prisma/client';
+import type { User } from '@documenso/prisma/client';
+import { UserSecurityAuditLogType } from '@documenso/prisma/client';
 
 import { ErrorCode } from '../../next-auth/error-codes';
+import type { RequestMetadata } from '../../universal/extract-request-metadata';
 import { validateTwoFactorAuthentication } from './validate-2fa';
 
 type DisableTwoFactorAuthenticationOptions = {
   user: User;
   backupCode: string;
   password: string;
+  requestMetadata?: RequestMetadata;
 };
 
 export const disableTwoFactorAuthentication = async ({
   backupCode,
   user,
   password,
+  requestMetadata,
 }: DisableTwoFactorAuthenticationOptions) => {
   if (!user.password) {
     throw new Error(ErrorCode.USER_MISSING_PASSWORD);
@@ -33,15 +37,26 @@ export const disableTwoFactorAuthentication = async ({
     throw new Error(ErrorCode.INCORRECT_TWO_FACTOR_BACKUP_CODE);
   }
 
-  await prisma.user.update({
+  await prisma.$transaction(async (tx) => {
-    where: {
+    await tx.user.update({
-      id: user.id,
+      where: {
-    },
+        id: user.id,
-    data: {
+      },
-      twoFactorEnabled: false,
+      data: {
-      twoFactorBackupCodes: null,
+        twoFactorEnabled: false,
-      twoFactorSecret: null,
+        twoFactorBackupCodes: null,
-    },
+        twoFactorSecret: null,
+      },
+    });
+
+    await tx.userSecurityAuditLog.create({
+      data: {
+        userId: user.id,
+        type: UserSecurityAuditLogType.AUTH_2FA_DISABLE,
+        userAgent: requestMetadata?.userAgent,
+        ipAddress: requestMetadata?.ipAddress,
+      },
+    });
   });
 
   return true;

packages/lib/server-only/2fa/enable-2fa.ts

@@ -1,18 +1,21 @@
 import { ErrorCode } from '@documenso/lib/next-auth/error-codes';
 import { prisma } from '@documenso/prisma';
-import { User } from '@documenso/prisma/client';
+import { type User, UserSecurityAuditLogType } from '@documenso/prisma/client';
 
+import type { RequestMetadata } from '../../universal/extract-request-metadata';
 import { getBackupCodes } from './get-backup-code';
 import { verifyTwoFactorAuthenticationToken } from './verify-2fa-token';
 
 type EnableTwoFactorAuthenticationOptions = {
   user: User;
   code: string;
+  requestMetadata?: RequestMetadata;
 };
 
 export const enableTwoFactorAuthentication = async ({
   user,
   code,
+  requestMetadata,
 }: EnableTwoFactorAuthenticationOptions) => {
   if (user.identityProvider !== 'DOCUMENSO') {
     throw new Error(ErrorCode.INCORRECT_IDENTITY_PROVIDER);
@@ -32,13 +35,24 @@ export const enableTwoFactorAuthentication = async ({
     throw new Error(ErrorCode.INCORRECT_TWO_FACTOR_CODE);
   }
 
-  const updatedUser = await prisma.user.update({
+  const updatedUser = await prisma.$transaction(async (tx) => {
-    where: {
+    await tx.userSecurityAuditLog.create({
-      id: user.id,
+      data: {
-    },
+        userId: user.id,
-    data: {
+        type: UserSecurityAuditLogType.AUTH_2FA_ENABLE,
-      twoFactorEnabled: true,
+        userAgent: requestMetadata?.userAgent,
-    },
+        ipAddress: requestMetadata?.ipAddress,
+      },
+    });
+
+    return await tx.user.update({
+      where: {
+        id: user.id,
+      },
+      data: {
+        twoFactorEnabled: true,
+      },
+    });
   });
 
   const recoveryCodes = getBackupCodes({ user: updatedUser });

packages/lib/server-only/2fa/setup-2fa.ts

@@ -5,7 +5,7 @@ import { createTOTPKeyURI } from 'oslo/otp';
 
 import { ErrorCode } from '@documenso/lib/next-auth/error-codes';
 import { prisma } from '@documenso/prisma';
-import { User } from '@documenso/prisma/client';
+import { type User } from '@documenso/prisma/client';
 
 import { DOCUMENSO_ENCRYPTION_KEY } from '../../constants/crypto';
 import { symmetricEncrypt } from '../../universal/crypto';

packages/lib/server-only/document/find-documents.ts

@@ -3,12 +3,14 @@ import { P, match } from 'ts-pattern';
 
 import { prisma } from '@documenso/prisma';
 import type { Document, Prisma } from '@documenso/prisma/client';
-import { SigningStatus } from '@documenso/prisma/client';
+import { RecipientRole, SigningStatus } from '@documenso/prisma/client';
 import { ExtendedDocumentStatus } from '@documenso/prisma/types/extended-document-status';
 
 import type { FindResultSet } from '../../types/find-result-set';
 import { maskRecipientTokensForDocument } from '../../utils/mask-recipient-tokens-for-document';
 
+export type PeriodSelectorValue = '' | '7d' | '14d' | '30d';
+
 export type FindDocumentsOptions = {
   userId: number;
   term?: string;
@@ -19,7 +21,7 @@ export type FindDocumentsOptions = {
     column: keyof Omit<Document, 'document'>;
     direction: 'asc' | 'desc';
   };
-  period?: '' | '7d' | '14d' | '30d';
+  period?: PeriodSelectorValue;
 };
 
 export const findDocuments = async ({
@@ -85,6 +87,9 @@ export const findDocuments = async ({
         some: {
           email: user.email,
           signingStatus: SigningStatus.NOT_SIGNED,
+          role: {
+            not: RecipientRole.CC,
+          },
         },
       },
       deletedAt: null,
@@ -107,6 +112,9 @@ export const findDocuments = async ({
             some: {
               email: user.email,
               signingStatus: SigningStatus.SIGNED,
+              role: {
+                not: RecipientRole.CC,
+              },
             },
           },
           deletedAt: null,

packages/lib/server-only/document/get-stats.ts

@@ -1,14 +1,31 @@
+import { DateTime } from 'luxon';
+
 import { prisma } from '@documenso/prisma';
-import type { User } from '@documenso/prisma/client';
+import type { Prisma, User } from '@documenso/prisma/client';
 import { SigningStatus } from '@documenso/prisma/client';
 import { isExtendedDocumentStatus } from '@documenso/prisma/guards/is-extended-document-status';
 import { ExtendedDocumentStatus } from '@documenso/prisma/types/extended-document-status';
 
+import type { PeriodSelectorValue } from './find-documents';
+
 export type GetStatsInput = {
   user: User;
+  period?: PeriodSelectorValue;
 };
 
-export const getStats = async ({ user }: GetStatsInput) => {
+export const getStats = async ({ user, period }: GetStatsInput) => {
+  let createdAt: Prisma.DocumentWhereInput['createdAt'];
+
+  if (period) {
+    const daysAgo = parseInt(period.replace(/d$/, ''), 10);
+
+    const startOfPeriod = DateTime.now().minus({ days: daysAgo }).startOf('day');
+
+    createdAt = {
+      gte: startOfPeriod.toJSDate(),
+    };
+  }
+
   const [ownerCounts, notSignedCounts, hasSignedCounts] = await Promise.all([
     prisma.document.groupBy({
       by: ['status'],
@@ -17,6 +34,7 @@ export const getStats = async ({ user }: GetStatsInput) => {
       },
       where: {
         userId: user.id,
+        createdAt,
         deletedAt: null,
       },
     }),
@@ -33,6 +51,7 @@ export const getStats = async ({ user }: GetStatsInput) => {
             signingStatus: SigningStatus.NOT_SIGNED,
           },
         },
+        createdAt,
         deletedAt: null,
       },
     }),
@@ -42,6 +61,7 @@ export const getStats = async ({ user }: GetStatsInput) => {
         _all: true,
       },
       where: {
+        createdAt,
         User: {
           email: {
             not: user.email,

packages/lib/server-only/document/resend-document.tsx

@@ -6,7 +6,9 @@ import { DocumentInviteEmailTemplate } from '@documenso/email/templates/document
 import { FROM_ADDRESS, FROM_NAME } from '@documenso/lib/constants/email';
 import { renderCustomEmailTemplate } from '@documenso/lib/utils/render-custom-email-template';
 import { prisma } from '@documenso/prisma';
-import { DocumentStatus, SigningStatus } from '@documenso/prisma/client';
+import { DocumentStatus, RecipientRole, SigningStatus } from '@documenso/prisma/client';
+
+import { RECIPIENT_ROLES_DESCRIPTION } from '../../constants/recipient-roles';
 
 export type ResendDocumentOptions = {
   documentId: number;
@@ -59,6 +61,10 @@ export const resendDocument = async ({ documentId, userId, recipients }: ResendD
 
   await Promise.all(
     document.Recipient.map(async (recipient) => {
+      if (recipient.role === RecipientRole.CC) {
+        return;
+      }
+
       const { email, name } = recipient;
 
       const customEmailTemplate = {
@@ -77,8 +83,11 @@ export const resendDocument = async ({ documentId, userId, recipients }: ResendD
         assetBaseUrl,
         signDocumentLink,
         customBody: renderCustomEmailTemplate(customEmail?.message || '', customEmailTemplate),
+        role: recipient.role,
       });
 
+      const { actionVerb } = RECIPIENT_ROLES_DESCRIPTION[recipient.role];
+
       await mailer.sendMail({
         to: {
           address: email,
@@ -90,7 +99,7 @@ export const resendDocument = async ({ documentId, userId, recipients }: ResendD
         },
         subject: customEmail?.subject
           ? renderCustomEmailTemplate(customEmail.subject, customEmailTemplate)
-          : 'Please sign this document',
+          : `Please ${actionVerb.toLowerCase()} this document`,
         html: render(template),
         text: render(template, { plainText: true }),
       });

packages/lib/server-only/document/seal-document.ts

@@ -6,7 +6,7 @@ import { PDFDocument } from 'pdf-lib';
 
 import PostHogServerClient from '@documenso/lib/server-only/feature-flags/get-post-hog-server-client';
 import { prisma } from '@documenso/prisma';
-import { DocumentStatus, SigningStatus } from '@documenso/prisma/client';
+import { DocumentStatus, RecipientRole, SigningStatus } from '@documenso/prisma/client';
 import { signPdf } from '@documenso/signing';
 
 import { getFile } from '../../universal/upload/get-file';
@@ -44,6 +44,9 @@ export const sealDocument = async ({ documentId, sendEmail = true }: SealDocumen
   const recipients = await prisma.recipient.findMany({
     where: {
       documentId: document.id,
+      role: {
+        not: RecipientRole.CC,
+      },
     },
   });
 

packages/lib/server-only/document/send-document.tsx

@@ -6,7 +6,9 @@ import { DocumentInviteEmailTemplate } from '@documenso/email/templates/document
 import { FROM_ADDRESS, FROM_NAME } from '@documenso/lib/constants/email';
 import { renderCustomEmailTemplate } from '@documenso/lib/utils/render-custom-email-template';
 import { prisma } from '@documenso/prisma';
-import { DocumentStatus, SendStatus } from '@documenso/prisma/client';
+import { DocumentStatus, RecipientRole, SendStatus } from '@documenso/prisma/client';
+
+import { RECIPIENT_ROLES_DESCRIPTION } from '../../constants/recipient-roles';
 
 export type SendDocumentOptions = {
   documentId: number;
@@ -47,6 +49,10 @@ export const sendDocument = async ({ documentId, userId }: SendDocumentOptions)
 
   await Promise.all(
     document.Recipient.map(async (recipient) => {
+      if (recipient.sendStatus === SendStatus.SENT || recipient.role === RecipientRole.CC) {
+        return;
+      }
+
       const { email, name } = recipient;
 
       const customEmailTemplate = {
@@ -55,10 +61,6 @@ export const sendDocument = async ({ documentId, userId }: SendDocumentOptions)
         'document.name': document.title,
       };
 
-      if (recipient.sendStatus === SendStatus.SENT) {
-        return;
-      }
-
       const assetBaseUrl = process.env.NEXT_PUBLIC_WEBAPP_URL || 'http://localhost:3000';
       const signDocumentLink = `${process.env.NEXT_PUBLIC_WEBAPP_URL}/sign/${recipient.token}`;
 
@@ -69,8 +71,11 @@ export const sendDocument = async ({ documentId, userId }: SendDocumentOptions)
         assetBaseUrl,
         signDocumentLink,
         customBody: renderCustomEmailTemplate(customEmail?.message || '', customEmailTemplate),
+        role: recipient.role,
       });
 
+      const { actionVerb } = RECIPIENT_ROLES_DESCRIPTION[recipient.role];
+
       await mailer.sendMail({
         to: {
           address: email,
@@ -82,7 +87,7 @@ export const sendDocument = async ({ documentId, userId }: SendDocumentOptions)
         },
         subject: customEmail?.subject
           ? renderCustomEmailTemplate(customEmail.subject, customEmailTemplate)
-          : 'Please sign this document',
+          : `Please ${actionVerb.toLowerCase()} this document`,
         html: render(template),
         text: render(template, { plainText: true }),
       });

packages/lib/server-only/recipient/set-recipients-for-document.ts

@@ -1,4 +1,5 @@
 import { prisma } from '@documenso/prisma';
+import { RecipientRole } from '@documenso/prisma/client';
 import { SendStatus, SigningStatus } from '@documenso/prisma/client';
 
 import { nanoid } from '../../universal/id';
@@ -10,6 +11,7 @@ export interface SetRecipientsForDocumentOptions {
     id?: number | null;
     email: string;
     name: string;
+    role: RecipientRole;
   }[];
 }
 
@@ -79,13 +81,20 @@ export const setRecipientsForDocument = async ({
         update: {
           name: recipient.name,
           email: recipient.email,
+          role: recipient.role,
           documentId,
+          signingStatus:
+            recipient.role === RecipientRole.CC ? SigningStatus.SIGNED : SigningStatus.NOT_SIGNED,
         },
         create: {
           name: recipient.name,
           email: recipient.email,
+          role: recipient.role,
           token: nanoid(),
           documentId,
+          sendStatus: recipient.role === RecipientRole.CC ? SendStatus.SENT : SendStatus.NOT_SENT,
+          signingStatus:
+            recipient.role === RecipientRole.CC ? SigningStatus.SIGNED : SigningStatus.NOT_SIGNED,
         },
       }),
     ),

packages/lib/server-only/user/find-user-security-audit-logs.ts

@@ -0,0 +1,52 @@
+import type { FindResultSet } from '@documenso/lib/types/find-result-set';
+import { prisma } from '@documenso/prisma';
+import type { UserSecurityAuditLog, UserSecurityAuditLogType } from '@documenso/prisma/client';
+
+export type FindUserSecurityAuditLogsOptions = {
+  userId: number;
+  type?: UserSecurityAuditLogType;
+  page?: number;
+  perPage?: number;
+  orderBy?: {
+    column: keyof Omit<UserSecurityAuditLog, 'id' | 'userId'>;
+    direction: 'asc' | 'desc';
+  };
+};
+
+export const findUserSecurityAuditLogs = async ({
+  userId,
+  type,
+  page = 1,
+  perPage = 10,
+  orderBy,
+}: FindUserSecurityAuditLogsOptions) => {
+  const orderByColumn = orderBy?.column ?? 'createdAt';
+  const orderByDirection = orderBy?.direction ?? 'desc';
+
+  const whereClause = {
+    userId,
+    type,
+  };
+
+  const [data, count] = await Promise.all([
+    prisma.userSecurityAuditLog.findMany({
+      where: whereClause,
+      skip: Math.max(page - 1, 0) * perPage,
+      take: perPage,
+      orderBy: {
+        [orderByColumn]: orderByDirection,
+      },
+    }),
+    prisma.userSecurityAuditLog.count({
+      where: whereClause,
+    }),
+  ]);
+
+  return {
+    data,
+    count,
+    currentPage: Math.max(page, 1),
+    perPage,
+    totalPages: Math.ceil(count / perPage),
+  } satisfies FindResultSet<typeof data>;
+};

packages/lib/server-only/user/reset-password.ts

@@ -1,16 +1,19 @@
 import { compare, hash } from 'bcrypt';
 
 import { prisma } from '@documenso/prisma';
+import { UserSecurityAuditLogType } from '@documenso/prisma/client';
 
 import { SALT_ROUNDS } from '../../constants/auth';
+import type { RequestMetadata } from '../../universal/extract-request-metadata';
 import { sendResetPassword } from '../auth/send-reset-password';
 
 export type ResetPasswordOptions = {
   token: string;
   password: string;
+  requestMetadata?: RequestMetadata;
 };
 
-export const resetPassword = async ({ token, password }: ResetPasswordOptions) => {
+export const resetPassword = async ({ token, password, requestMetadata }: ResetPasswordOptions) => {
   if (!token) {
     throw new Error('Invalid token provided. Please try again.');
   }
@@ -56,6 +59,14 @@ export const resetPassword = async ({ token, password }: ResetPasswordOptions) =
         userId: foundToken.userId,
       },
     }),
+    prisma.userSecurityAuditLog.create({
+      data: {
+        userId: foundToken.userId,
+        type: UserSecurityAuditLogType.PASSWORD_RESET,
+        userAgent: requestMetadata?.userAgent,
+        ipAddress: requestMetadata?.ipAddress,
+      },
+    }),
   ]);
 
   await sendResetPassword({ userId: foundToken.userId });

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

@@ -1,19 +1,22 @@
 import { compare, hash } from 'bcrypt';
 
+import { SALT_ROUNDS } from '@documenso/lib/constants/auth';
+import type { RequestMetadata } from '@documenso/lib/universal/extract-request-metadata';
 import { prisma } from '@documenso/prisma';
-
+import { UserSecurityAuditLogType } from '@documenso/prisma/client';
-import { SALT_ROUNDS } from '../../constants/auth';
 
 export type UpdatePasswordOptions = {
   userId: number;
   password: string;
   currentPassword: string;
+  requestMetadata?: RequestMetadata;
 };
 
 export const updatePassword = async ({
   userId,
   password,
   currentPassword,
+  requestMetadata,
 }: UpdatePasswordOptions) => {
   // Existence check
   const user = await prisma.user.findFirstOrThrow({
@@ -39,14 +42,23 @@ export const updatePassword = async ({
 
   const hashedNewPassword = await hash(password, SALT_ROUNDS);
 
-  const updatedUser = await prisma.user.update({
+  return await prisma.$transaction(async (tx) => {
-    where: {
+    await tx.userSecurityAuditLog.create({
-      id: userId,
+      data: {
-    },
+        userId,
-    data: {
+        type: UserSecurityAuditLogType.PASSWORD_UPDATE,
-      password: hashedNewPassword,
+        userAgent: requestMetadata?.userAgent,
-    },
+        ipAddress: requestMetadata?.ipAddress,
-  });
+      },
+    });
 
-  return updatedUser;
+    return await tx.user.update({
+      where: {
+        id: userId,
+      },
+      data: {
+        password: hashedNewPassword,
+      },
+    });
+  });
 };

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

@@ -1,12 +1,21 @@
 import { prisma } from '@documenso/prisma';
+import { UserSecurityAuditLogType } from '@documenso/prisma/client';
+
+import type { RequestMetadata } from '../../universal/extract-request-metadata';
 
 export type UpdateProfileOptions = {
   userId: number;
   name: string;
   signature: string;
+  requestMetadata?: RequestMetadata;
 };
 
-export const updateProfile = async ({ userId, name, signature }: UpdateProfileOptions) => {
+export const updateProfile = async ({
+  userId,
+  name,
+  signature,
+  requestMetadata,
+}: UpdateProfileOptions) => {
   // Existence check
   await prisma.user.findFirstOrThrow({
     where: {
@@ -14,15 +23,24 @@ export const updateProfile = async ({ userId, name, signature }: UpdateProfileOp
     },
   });
 
-  const updatedUser = await prisma.user.update({
+  return await prisma.$transaction(async (tx) => {
-    where: {
+    await tx.userSecurityAuditLog.create({
-      id: userId,
+      data: {
-    },
+        userId,
-    data: {
+        type: UserSecurityAuditLogType.ACCOUNT_PROFILE_UPDATE,
-      name,
+        userAgent: requestMetadata?.userAgent,
-      signature,
+        ipAddress: requestMetadata?.ipAddress,
-    },
+      },
-  });
+    });
 
-  return updatedUser;
+    return await tx.user.update({
+      where: {
+        id: userId,
+      },
+      data: {
+        name,
+        signature,
+      },
+    });
+  });
 };

packages/lib/types/search-params.ts

@@ -0,0 +1,20 @@
+import { z } from 'zod';
+
+export const ZBaseTableSearchParamsSchema = z.object({
+  query: z
+    .string()
+    .optional()
+    .catch(() => undefined),
+  page: z.coerce
+    .number()
+    .min(1)
+    .optional()
+    .catch(() => undefined),
+  perPage: z.coerce
+    .number()
+    .min(1)
+    .optional()
+    .catch(() => undefined),
+});
+
+export type TBaseTableSearchParamsSchema = z.infer<typeof ZBaseTableSearchParamsSchema>;

packages/lib/universal/extract-request-metadata.ts

@@ -0,0 +1,37 @@
+import type { NextApiRequest } from 'next';
+
+import type { RequestInternal } from 'next-auth';
+import { z } from 'zod';
+
+const ZIpSchema = z.string().ip();
+
+export type RequestMetadata = {
+  ipAddress?: string;
+  userAgent?: string;
+};
+
+export const extractNextApiRequestMetadata = (req: NextApiRequest): RequestMetadata => {
+  const parsedIp = ZIpSchema.safeParse(req.headers['x-forwarded-for'] || req.socket.remoteAddress);
+
+  const ipAddress = parsedIp.success ? parsedIp.data : undefined;
+  const userAgent = req.headers['user-agent'];
+
+  return {
+    ipAddress,
+    userAgent,
+  };
+};
+
+export const extractNextAuthRequestMetadata = (
+  req: Pick<RequestInternal, 'body' | 'query' | 'headers' | 'method'>,
+): RequestMetadata => {
+  const parsedIp = ZIpSchema.safeParse(req.headers?.['x-forwarded-for']);
+
+  const ipAddress = parsedIp.success ? parsedIp.data : undefined;
+  const userAgent = req.headers?.['user-agent'];
+
+  return {
+    ipAddress,
+    userAgent,
+  };
+};

packages/prisma/migrations/20231202220928_add_recipient_roles/migration.sql

@@ -0,0 +1,5 @@
+-- CreateEnum
+CREATE TYPE "RecipientRole" AS ENUM ('CC', 'SIGNER', 'VIEWER', 'APPROVER');
+
+-- AlterTable
+ALTER TABLE "Recipient" ADD COLUMN     "role" "RecipientRole" NOT NULL DEFAULT 'SIGNER';

packages/prisma/migrations/20240131004516_add_user_security_audit_logs/migration.sql

@@ -0,0 +1,17 @@
+-- CreateEnum
+CREATE TYPE "UserSecurityAuditLogType" AS ENUM ('ACCOUNT_PROFILE_UPDATE', 'ACCOUNT_SSO_LINK', 'AUTH_2FA_DISABLE', 'AUTH_2FA_ENABLE', 'PASSWORD_RESET', 'PASSWORD_UPDATE', 'SIGN_OUT', 'SIGN_IN', 'SIGN_IN_FAIL', 'SIGN_IN_2FA_FAIL');
+
+-- CreateTable
+CREATE TABLE "UserSecurityAuditLog" (
+    "id" SERIAL NOT NULL,
+    "userId" INTEGER NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "type" "UserSecurityAuditLogType" NOT NULL,
+    "userAgent" TEXT,
+    "ipAddress" TEXT,
+
+    CONSTRAINT "UserSecurityAuditLog_pkey" PRIMARY KEY ("id")
+);
+
+-- AddForeignKey
+ALTER TABLE "UserSecurityAuditLog" ADD CONSTRAINT "UserSecurityAuditLog_userId_fkey" FOREIGN KEY ("userId") REFERENCES "User"("id") ON DELETE CASCADE ON UPDATE CASCADE;

packages/prisma/migrations/20240131132916_verify_paid_users/migration.sql

@@ -0,0 +1,6 @@
+UPDATE "User"
+SET "emailVerified" = NOW()
+FROM "Subscription"
+WHERE "User"."id" = "Subscription"."userId"
+AND "Subscription"."status" = 'ACTIVE'
+AND "User"."emailVerified" IS NULL

packages/prisma/schema.prisma

@@ -40,12 +40,38 @@ model User {
   twoFactorSecret      String?
   twoFactorEnabled     Boolean              @default(false)
   twoFactorBackupCodes String?
-  VerificationToken    VerificationToken[]
+
-  Template           Template[]
+  VerificationToken VerificationToken[]
+  Template          Template[]
+  securityAuditLogs UserSecurityAuditLog[]
 
   @@index([email])
 }
 
+enum UserSecurityAuditLogType {
+  ACCOUNT_PROFILE_UPDATE
+  ACCOUNT_SSO_LINK
+  AUTH_2FA_DISABLE
+  AUTH_2FA_ENABLE
+  PASSWORD_RESET
+  PASSWORD_UPDATE
+  SIGN_OUT
+  SIGN_IN
+  SIGN_IN_FAIL
+  SIGN_IN_2FA_FAIL
+}
+
+model UserSecurityAuditLog {
+  id        Int                      @id @default(autoincrement())
+  userId    Int
+  createdAt DateTime                 @default(now())
+  type      UserSecurityAuditLogType
+  userAgent String?
+  ipAddress String?
+
+  User User @relation(fields: [userId], references: [id], onDelete: Cascade)
+}
+
 model PasswordResetToken {
   id        Int      @id @default(autoincrement())
   token     String   @unique
@@ -161,9 +187,9 @@ model DocumentMeta {
   id         String   @id @default(cuid())
   subject    String?
   message    String?
-  timezone   String?  @db.Text @default("Etc/UTC")
+  timezone   String?  @default("Etc/UTC") @db.Text
-  password String?
+  password   String?
-  dateFormat String?  @db.Text @default("yyyy-MM-dd hh:mm a")
+  dateFormat String?  @default("yyyy-MM-dd hh:mm a") @db.Text
   documentId Int      @unique
   document   Document @relation(fields: [documentId], references: [id], onDelete: Cascade)
 }
@@ -183,20 +209,28 @@ enum SigningStatus {
   SIGNED
 }
 
+enum RecipientRole {
+  CC
+  SIGNER
+  VIEWER
+  APPROVER
+}
+
 model Recipient {
-  id            Int            @id @default(autoincrement())
+  id            Int           @id @default(autoincrement())
   documentId    Int?
   templateId    Int?
-  email         String         @db.VarChar(255)
+  email         String        @db.VarChar(255)
-  name          String         @default("") @db.VarChar(255)
+  name          String        @default("") @db.VarChar(255)
   token         String
   expired       DateTime?
   signedAt      DateTime?
+  role          RecipientRole @default(SIGNER)
   readStatus    ReadStatus    @default(NOT_OPENED)
   signingStatus SigningStatus @default(NOT_SIGNED)
   sendStatus    SendStatus    @default(NOT_SENT)
-  Document      Document?      @relation(fields: [documentId], references: [id], onDelete: Cascade)
+  Document      Document?     @relation(fields: [documentId], references: [id], onDelete: Cascade)
-  Template      Template?      @relation(fields: [templateId], references: [id], onDelete: Cascade)
+  Template      Template?     @relation(fields: [templateId], references: [id], onDelete: Cascade)
   Field         Field[]
   Signature     Signature[]
 
@@ -280,10 +314,10 @@ model Template {
   createdAt              DateTime     @default(now())
   updatedAt              DateTime     @default(now()) @updatedAt
 
-  templateDocumentData   DocumentData @relation(fields: [templateDocumentDataId], references: [id], onDelete: Cascade)
+  templateDocumentData DocumentData @relation(fields: [templateDocumentDataId], references: [id], onDelete: Cascade)
-  User                   User         @relation(fields: [userId], references: [id], onDelete: Cascade)
+  User                 User         @relation(fields: [userId], references: [id], onDelete: Cascade)
-  Recipient              Recipient[]
+  Recipient            Recipient[]
-  Field                  Field[]
+  Field                Field[]
 
   @@unique([templateDocumentDataId])
 }

packages/trpc/server/auth-router/schema.ts

@@ -1,9 +1,25 @@
 import { z } from 'zod';
 
+export const ZCurrentPasswordSchema = z
+  .string()
+  .min(6, { message: 'Must be at least 6 characters in length' })
+  .max(72);
+
+export const ZPasswordSchema = z
+  .string()
+  .regex(new RegExp('.*[A-Z].*'), { message: 'One uppercase character' })
+  .regex(new RegExp('.*[a-z].*'), { message: 'One lowercase character' })
+  .regex(new RegExp('.*\\d.*'), { message: 'One number' })
+  .regex(new RegExp('.*[`~<>?,./!@#$%^&*()\\-_+="\'|{}\\[\\];:\\\\].*'), {
+    message: 'One special character is required',
+  })
+  .min(8, { message: 'Must be at least 8 characters in length' })
+  .max(72, { message: 'Cannot be more than 72 characters in length' });
+
 export const ZSignUpMutationSchema = z.object({
   name: z.string().min(1),
   email: z.string().email(),
-  password: z.string().min(6),
+  password: ZPasswordSchema,
   signature: z.string().min(1, { message: 'A signature is required.' }),
 });
 

packages/trpc/server/context.ts

@@ -1,4 +1,4 @@
-import { CreateNextContextOptions } from '@trpc/server/adapters/next';
+import type { CreateNextContextOptions } from '@trpc/server/adapters/next';
 
 import { getServerSession } from '@documenso/lib/next-auth/get-server-session';
 
@@ -9,6 +9,7 @@ export const createTrpcContext = async ({ req, res }: CreateNextContextOptions)
     return {
       session: null,
       user: null,
+      req,
     };
   }
 
@@ -16,12 +17,14 @@ export const createTrpcContext = async ({ req, res }: CreateNextContextOptions)
     return {
       session: null,
       user: null,
+      req,
     };
   }
 
   return {
     session,
     user,
+    req,
   };
 };
 

packages/trpc/server/document-router/schema.ts

@@ -1,6 +1,6 @@
 import { z } from 'zod';
 
-import { DocumentStatus, FieldType } from '@documenso/prisma/client';
+import { DocumentStatus, FieldType, RecipientRole } from '@documenso/prisma/client';
 
 export const ZGetDocumentByIdQuerySchema = z.object({
   id: z.number().min(1),
@@ -35,6 +35,7 @@ export const ZSetRecipientsForDocumentMutationSchema = z.object({
       id: z.number().nullish(),
       email: z.string().min(1).email(),
       name: z.string(),
+      role: z.nativeEnum(RecipientRole),
     }),
   ),
 });

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

@@ -1,15 +1,18 @@
 import { TRPCError } from '@trpc/server';
 
+import { findUserSecurityAuditLogs } from '@documenso/lib/server-only/user/find-user-security-audit-logs';
 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 { sendConfirmationToken } from '@documenso/lib/server-only/user/send-confirmation-token';
 import { updatePassword } from '@documenso/lib/server-only/user/update-password';
 import { updateProfile } from '@documenso/lib/server-only/user/update-profile';
+import { extractNextApiRequestMetadata } from '@documenso/lib/universal/extract-request-metadata';
 
 import { adminProcedure, authenticatedProcedure, procedure, router } from '../trpc';
 import {
   ZConfirmEmailMutationSchema,
+  ZFindUserSecurityAuditLogsSchema,
   ZForgotPasswordFormSchema,
   ZResetPasswordFormSchema,
   ZRetrieveUserByIdQuerySchema,
@@ -18,6 +21,22 @@ import {
 } from './schema';
 
 export const profileRouter = router({
+  findUserSecurityAuditLogs: authenticatedProcedure
+    .input(ZFindUserSecurityAuditLogsSchema)
+    .query(async ({ input, ctx }) => {
+      try {
+        return await findUserSecurityAuditLogs({
+          userId: ctx.user.id,
+          ...input,
+        });
+      } catch (err) {
+        throw new TRPCError({
+          code: 'BAD_REQUEST',
+          message: 'We were unable to find user security audit logs. Please try again.',
+        });
+      }
+    }),
+
   getUser: adminProcedure.input(ZRetrieveUserByIdQuerySchema).query(async ({ input }) => {
     try {
       const { id } = input;
@@ -41,6 +60,7 @@ export const profileRouter = router({
           userId: ctx.user.id,
           name,
           signature,
+          requestMetadata: extractNextApiRequestMetadata(ctx.req),
         });
       } catch (err) {
         console.error(err);
@@ -63,6 +83,7 @@ export const profileRouter = router({
           userId: ctx.user.id,
           password,
           currentPassword,
+          requestMetadata: extractNextApiRequestMetadata(ctx.req),
         });
       } catch (err) {
         let message =
@@ -91,13 +112,14 @@ export const profileRouter = router({
     }
   }),
 
-  resetPassword: procedure.input(ZResetPasswordFormSchema).mutation(async ({ input }) => {
+  resetPassword: procedure.input(ZResetPasswordFormSchema).mutation(async ({ input, ctx }) => {
     try {
       const { password, token } = input;
 
       return await resetPassword({
         token,
         password,
+        requestMetadata: extractNextApiRequestMetadata(ctx.req),
       });
     } catch (err) {
       let message = 'We were unable to reset your password. Please try again.';

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

@@ -1,5 +1,12 @@
 import { z } from 'zod';
 
+import { ZCurrentPasswordSchema, ZPasswordSchema } from '../auth-router/schema';
+
+export const ZFindUserSecurityAuditLogsSchema = z.object({
+  page: z.number().optional(),
+  perPage: z.number().optional(),
+});
+
 export const ZRetrieveUserByIdQuerySchema = z.object({
   id: z.number().min(1),
 });
@@ -10,8 +17,8 @@ export const ZUpdateProfileMutationSchema = z.object({
 });
 
 export const ZUpdatePasswordMutationSchema = z.object({
-  currentPassword: z.string().min(6),
+  currentPassword: ZCurrentPasswordSchema,
-  password: z.string().min(6),
+  password: ZPasswordSchema,
 });
 
 export const ZForgotPasswordFormSchema = z.object({
@@ -19,7 +26,7 @@ export const ZForgotPasswordFormSchema = z.object({
 });
 
 export const ZResetPasswordFormSchema = z.object({
-  password: z.string().min(6),
+  password: ZPasswordSchema,
   token: z.string().min(1),
 });
 
@@ -27,6 +34,7 @@ export const ZConfirmEmailMutationSchema = z.object({
   email: z.string().email().min(1),
 });
 
+export type TFindUserSecurityAuditLogsSchema = z.infer<typeof ZFindUserSecurityAuditLogsSchema>;
 export type TRetrieveUserByIdQuerySchema = z.infer<typeof ZRetrieveUserByIdQuerySchema>;
 export type TUpdateProfileMutationSchema = z.infer<typeof ZUpdateProfileMutationSchema>;
 export type TUpdatePasswordMutationSchema = z.infer<typeof ZUpdatePasswordMutationSchema>;

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

@@ -25,6 +25,7 @@ export const recipientRouter = router({
             id: signer.nativeId,
             email: signer.email,
             name: signer.name,
+            role: signer.role,
           })),
         });
       } catch (err) {

packages/trpc/server/recipient-router/schema.ts

@@ -1,5 +1,7 @@
 import { z } from 'zod';
 
+import { RecipientRole } from '@documenso/prisma/client';
+
 export const ZAddSignersMutationSchema = z
   .object({
     documentId: z.number(),
@@ -8,6 +10,7 @@ export const ZAddSignersMutationSchema = z
         nativeId: z.number().optional(),
         email: z.string().email().min(1),
         name: z.string(),
+        role: z.nativeEnum(RecipientRole),
       }),
     ),
   })

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

@@ -1,5 +1,6 @@
 import { TRPCError } from '@trpc/server';
 
+import { getServerLimits } from '@documenso/ee/server-only/limits/server';
 import { createDocumentFromTemplate } from '@documenso/lib/server-only/template/create-document-from-template';
 import { createTemplate } from '@documenso/lib/server-only/template/create-template';
 import { deleteTemplate } from '@documenso/lib/server-only/template/delete-template';
@@ -41,6 +42,12 @@ export const templateRouter = router({
       try {
         const { templateId } = input;
 
+        const limits = await getServerLimits({ email: ctx.user.email });
+
+        if (limits.remaining.documents === 0) {
+          throw new Error('You have reached your document limit.');
+        }
+
         return await createDocumentFromTemplate({
           templateId,
           userId: ctx.user.id,

packages/trpc/server/two-factor-authentication-router/router.ts

@@ -6,6 +6,7 @@ import { enableTwoFactorAuthentication } from '@documenso/lib/server-only/2fa/en
 import { getBackupCodes } from '@documenso/lib/server-only/2fa/get-backup-code';
 import { setupTwoFactorAuthentication } from '@documenso/lib/server-only/2fa/setup-2fa';
 import { compareSync } from '@documenso/lib/server-only/auth/hash';
+import { extractNextApiRequestMetadata } from '@documenso/lib/universal/extract-request-metadata';
 
 import { authenticatedProcedure, router } from '../trpc';
 import {
@@ -23,7 +24,10 @@ export const twoFactorAuthenticationRouter = router({
 
       const { password } = input;
 
-      return await setupTwoFactorAuthentication({ user, password });
+      return await setupTwoFactorAuthentication({
+        user,
+        password,
+      });
     }),
 
   enable: authenticatedProcedure
@@ -34,7 +38,11 @@ export const twoFactorAuthenticationRouter = router({
 
         const { code } = input;
 
-        return await enableTwoFactorAuthentication({ user, code });
+        return await enableTwoFactorAuthentication({
+          user,
+          code,
+          requestMetadata: extractNextApiRequestMetadata(ctx.req),
+        });
       } catch (err) {
         console.error(err);
 
@@ -53,7 +61,12 @@ export const twoFactorAuthenticationRouter = router({
 
         const { password, backupCode } = input;
 
-        return await disableTwoFactorAuthentication({ user, password, backupCode });
+        return await disableTwoFactorAuthentication({
+          user,
+          password,
+          backupCode,
+          requestMetadata: extractNextApiRequestMetadata(ctx.req),
+        });
       } catch (err) {
         console.error(err);
 

packages/ui/primitives/alert.tsx

@@ -1,21 +1,33 @@
 import * as React from 'react';
 
-import { VariantProps, cva } from 'class-variance-authority';
+import type { VariantProps } from 'class-variance-authority';
+import { cva } from 'class-variance-authority';
 
 import { cn } from '../lib/utils';
 
 const alertVariants = cva(
-  'relative w-full rounded-lg border p-4 [&>svg]:absolute [&>svg]:text-foreground [&>svg]:left-4 [&>svg]:top-4 [&>svg+div]:translate-y-[-3px] [&:has(svg)]:pl-11',
+  'relative w-full rounded-lg p-4 [&>svg]:absolute [&>svg]:text-foreground [&>svg]:left-4 [&>svg]:top-4 [&>svg+div]:translate-y-[-3px] [&>svg~*]:pl-8',
   {
     variants: {
       variant: {
-        default: 'bg-background text-foreground',
+        default:
-        destructive:
+          'bg-green-50 text-green-700 [&_.alert-title]:text-green-800 [&>svg]:text-green-400',
-          'text-destructive border-destructive/50 dark:border-destructive [&>svg]:text-destructive text-destructive',
+        neutral:
+          'bg-gray-50 dark:bg-neutral-900/20 text-muted-foreground [&_.alert-title]:text-foreground',
+        secondary: 'bg-blue-50 text-blue-700 [&_.alert-title]:text-blue-800 [&>svg]:text-blue-400',
+        destructive: 'bg-red-50 text-red-700 [&_.alert-title]:text-red-800 [&>svg]:text-red-400',
+        warning:
+          'bg-yellow-50 text-yellow-700 [&_.alert-title]:text-yellow-800 [&>svg]:text-yellow-400',
+      },
+      padding: {
+        tighter: 'p-2',
+        tight: 'px-4 py-2',
+        default: 'p-4',
       },
     },
     defaultVariants: {
       variant: 'default',
+      padding: 'default',
     },
   },
 );
@@ -23,19 +35,20 @@ const alertVariants = cva(
 const Alert = React.forwardRef<
   HTMLDivElement,
   React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
->(({ className, variant, ...props }, ref) => (
+>(({ className, variant, padding, ...props }, ref) => (
-  <div ref={ref} role="alert" className={cn(alertVariants({ variant }), className)} {...props} />
+  <div
+    ref={ref}
+    role="alert"
+    className={cn(alertVariants({ variant, padding }), className)}
+    {...props}
+  />
 ));
 
 Alert.displayName = 'Alert';
 
 const AlertTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
   ({ className, ...props }, ref) => (
-    <h5
+    <h5 ref={ref} className={cn('alert-title text-base font-medium', className)} {...props} />
-      ref={ref}
-      className={cn('mb-1 font-medium leading-none tracking-tight', className)}
-      {...props}
-    />
   ),
 );
 
@@ -45,7 +58,7 @@ const AlertDescription = React.forwardRef<
   HTMLParagraphElement,
   React.HTMLAttributes<HTMLParagraphElement>
 >(({ className, ...props }, ref) => (
-  <div ref={ref} className={cn('text-sm [&_p]:leading-relaxed', className)} {...props} />
+  <div ref={ref} className={cn('text-sm', className)} {...props} />
 ));
 
 AlertDescription.displayName = 'AlertDescription';

packages/ui/primitives/data-table-pagination.tsx

@@ -1,4 +1,4 @@
-import { Table } from '@tanstack/react-table';
+import type { Table } from '@tanstack/react-table';
 import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from 'lucide-react';
 import { match } from 'ts-pattern';
 

packages/ui/primitives/data-table.tsx

@@ -2,36 +2,53 @@
 
 import React, { useMemo } from 'react';
 
-import {
+import type {
   ColumnDef,
   PaginationState,
   Table as TTable,
   Updater,
-  flexRender,
+  VisibilityState,
-  getCoreRowModel,
-  useReactTable,
 } from '@tanstack/react-table';
+import { flexRender, getCoreRowModel, useReactTable } from '@tanstack/react-table';
 
+import { Skeleton } from './skeleton';
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from './table';
 
 export type DataTableChildren<TData> = (_table: TTable<TData>) => React.ReactNode;
 
 export interface DataTableProps<TData, TValue> {
   columns: ColumnDef<TData, TValue>[];
+  columnVisibility?: VisibilityState;
   data: TData[];
   perPage?: number;
   currentPage?: number;
   totalPages?: number;
   onPaginationChange?: (_page: number, _perPage: number) => void;
+  onClearFilters?: () => void;
+  hasFilters?: boolean;
   children?: DataTableChildren<TData>;
+  skeleton?: {
+    enable: boolean;
+    rows: number;
+    component?: React.ReactNode;
+  };
+  error?: {
+    enable: boolean;
+    component?: React.ReactNode;
+  };
 }
 
 export function DataTable<TData, TValue>({
   columns,
+  columnVisibility,
   data,
+  error,
   perPage,
   currentPage,
   totalPages,
+  skeleton,
+  hasFilters,
+  onClearFilters,
   onPaginationChange,
   children,
 }: DataTableProps<TData, TValue>) {
@@ -67,6 +84,7 @@ export function DataTable<TData, TValue>({
     getCoreRowModel: getCoreRowModel(),
     state: {
       pagination: manualPagination ? pagination : undefined,
+      columnVisibility,
     },
     manualPagination,
     pageCount: totalPages,
@@ -103,10 +121,31 @@ export function DataTable<TData, TValue>({
                   ))}
                 </TableRow>
               ))
+            ) : error?.enable ? (
+              <TableRow>
+                {error.component ?? (
+                  <TableCell colSpan={columns.length} className="h-32 text-center">
+                    Something went wrong.
+                  </TableCell>
+                )}
+              </TableRow>
+            ) : skeleton?.enable ? (
+              Array.from({ length: skeleton.rows }).map((_, i) => (
+                <TableRow key={`skeleton-row-${i}`}>{skeleton.component ?? <Skeleton />}</TableRow>
+              ))
             ) : (
               <TableRow>
-                <TableCell colSpan={columns.length} className="h-24 text-center">
+                <TableCell colSpan={columns.length} className="h-32 text-center">
-                  No results.
+                  <p>No results found</p>
+
+                  {hasFilters && onClearFilters !== undefined && (
+                    <button
+                      onClick={() => onClearFilters()}
+                      className="text-foreground mt-1 text-sm"
+                    >
+                      Clear filters
+                    </button>
+                  )}
                 </TableCell>
               </TableRow>
             )}

packages/ui/primitives/document-dropzone.tsx

@@ -5,6 +5,7 @@ import { motion } from 'framer-motion';
 import { Plus } from 'lucide-react';
 import { useDropzone } from 'react-dropzone';
 
+import { APP_DOCUMENT_UPLOAD_SIZE_LIMIT } from '@documenso/lib/constants/app';
 import { megabytesToBytes } from '@documenso/lib/universal/unit-convertions';
 
 import { cn } from '../lib/utils';
@@ -89,6 +90,7 @@ export type DocumentDropzoneProps = {
   disabled?: boolean;
   disabledMessage?: string;
   onDrop?: (_file: File) => void | Promise<void>;
+  onDropRejected?: () => void | Promise<void>;
   type?: 'document' | 'template';
   [key: string]: unknown;
 };
@@ -96,6 +98,7 @@ export type DocumentDropzoneProps = {
 export const DocumentDropzone = ({
   className,
   onDrop,
+  onDropRejected,
   disabled,
   disabledMessage = 'You cannot upload documents at this time.',
   type = 'document',
@@ -112,7 +115,12 @@ export const DocumentDropzone = ({
         void onDrop(acceptedFile);
       }
     },
-    maxSize: megabytesToBytes(50),
+    onDropRejected: () => {
+      if (onDropRejected) {
+        void onDropRejected();
+      }
+    },
+    maxSize: megabytesToBytes(APP_DOCUMENT_UPLOAD_SIZE_LIMIT),
   });
 
   return (
@@ -175,7 +183,7 @@ export const DocumentDropzone = ({
           </p>
 
           <p className="text-muted-foreground/80 mt-1 text-sm">
-            {disabled ? disabledMessage : 'Drag & drop your document here.'}
+            {disabled ? disabledMessage : 'Drag & drop your PDF here.'}
           </p>
         </CardContent>
       </Card>

packages/ui/primitives/document-flow/add-fields.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
 import { Caveat } from 'next/font/google';
 
@@ -10,8 +10,10 @@ import { useFieldArray, useForm } from 'react-hook-form';
 import { getBoundingClientRect } from '@documenso/lib/client-only/get-bounding-client-rect';
 import { useDocumentElement } from '@documenso/lib/client-only/hooks/use-document-element';
 import { PDF_VIEWER_PAGE_SELECTOR } from '@documenso/lib/constants/pdf-viewer';
+import { RECIPIENT_ROLES_DESCRIPTION } from '@documenso/lib/constants/recipient-roles';
 import { nanoid } from '@documenso/lib/universal/id';
 import type { Field, Recipient } from '@documenso/prisma/client';
+import { RecipientRole } from '@documenso/prisma/client';
 import { FieldType, SendStatus } from '@documenso/prisma/client';
 
 import { cn } from '../../lib/utils';
@@ -30,8 +32,7 @@ import {
   DocumentFlowFormContainerStep,
 } from './document-flow-root';
 import { FieldItem } from './field-item';
-import type { DocumentFlowStep } from './types';
+import { type DocumentFlowStep, FRIENDLY_FIELD_TYPE } from './types';
-import { FRIENDLY_FIELD_TYPE } from './types';
 
 const fontCaveat = Caveat({
   weight: ['500'],
@@ -103,6 +104,12 @@ export const AddFieldsFormPartial = ({
 
   const hasSelectedSignerBeenSent = selectedSigner?.sendStatus === SendStatus.SENT;
 
+  const isFieldsDisabled =
+    !selectedSigner ||
+    hasSelectedSignerBeenSent ||
+    selectedSigner?.role === RecipientRole.VIEWER ||
+    selectedSigner?.role === RecipientRole.CC;
+
   const [isFieldWithinBounds, setIsFieldWithinBounds] = useState(false);
   const [coords, setCoords] = useState({
     x: 0,
@@ -282,12 +289,28 @@ export const AddFieldsFormPartial = ({
     setSelectedSigner(recipients.find((r) => r.sendStatus !== SendStatus.SENT) ?? recipients[0]);
   }, [recipients]);
 
+  const recipientsByRole = useMemo(() => {
+    const recipientsByRole: Record<RecipientRole, Recipient[]> = {
+      CC: [],
+      VIEWER: [],
+      SIGNER: [],
+      APPROVER: [],
+    };
+
+    recipients.forEach((recipient) => {
+      recipientsByRole[recipient.role].push(recipient);
+    });
+
+    return recipientsByRole;
+  }, [recipients]);
+
   return (
     <>
       <DocumentFlowFormContainerHeader
         title={documentFlow.title}
         description={documentFlow.description}
       />
+
       <DocumentFlowFormContainerContent>
         <div className="flex flex-col">
           {selectedField && (
@@ -352,72 +375,94 @@ export const AddFieldsFormPartial = ({
               <PopoverContent className="p-0" align="start">
                 <Command>
                   <CommandInput />
+
                   <CommandEmpty>
                     <span className="text-muted-foreground inline-block px-4">
                       No recipient matching this description was found.
                     </span>
                   </CommandEmpty>
 
-                  <CommandGroup>
+                  {Object.entries(recipientsByRole).map(([role, recipients], roleIndex) => (
-                    {recipients.map((recipient, index) => (
+                    <CommandGroup key={roleIndex}>
-                      <CommandItem
+                      <div className="text-muted-foreground mb-1 ml-2 mt-2 text-xs font-medium">
-                        key={index}
+                        {
-                        className={cn({
+                          // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-                          'text-muted-foreground': recipient.sendStatus === SendStatus.SENT,
+                          RECIPIENT_ROLES_DESCRIPTION[role as RecipientRole].roleName
-                        })}
+                        }
-                        onSelect={() => {
+                      </div>
-                          setSelectedSigner(recipient);
-                          setShowRecipientsSelector(false);
-                        }}
-                      >
-                        {recipient.sendStatus !== SendStatus.SENT ? (
-                          <Check
-                            aria-hidden={recipient !== selectedSigner}
-                            className={cn('mr-2 h-4 w-4 flex-shrink-0', {
-                              'opacity-0': recipient !== selectedSigner,
-                              'opacity-100': recipient === selectedSigner,
-                            })}
-                          />
-                        ) : (
-                          <Tooltip>
-                            <TooltipTrigger>
-                              <Info className="mr-2 h-4 w-4" />
-                            </TooltipTrigger>
-                            <TooltipContent className="max-w-xs">
-                              This document has already been sent to this recipient. You can no
-                              longer edit this recipient.
-                            </TooltipContent>
-                          </Tooltip>
-                        )}
 
-                        {recipient.name && (
+                      {recipients.length === 0 && (
+                        <div
+                          key={`${role}-empty`}
+                          className="text-muted-foreground/80 px-4 pb-4 pt-2.5 text-center text-xs"
+                        >
+                          No recipients with this role
+                        </div>
+                      )}
+
+                      {recipients.map((recipient) => (
+                        <CommandItem
+                          key={recipient.id}
+                          className={cn('!rounded-2xl px-4 last:mb-1 [&:not(:first-child)]:mt-1', {
+                            'text-muted-foreground': recipient.sendStatus === SendStatus.SENT,
+                          })}
+                          onSelect={() => {
+                            setSelectedSigner(recipient);
+                            setShowRecipientsSelector(false);
+                          }}
+                        >
                           <span
-                            className="truncate"
+                            className={cn('text-foreground/70 truncate', {
-                            title={`${recipient.name} (${recipient.email})`}
+                              'text-foreground': recipient === selectedSigner,
+                            })}
                           >
-                            {recipient.name} ({recipient.email})
+                            {recipient.name && (
-                          </span>
+                              <span title={`${recipient.name} (${recipient.email})`}>
-                        )}
+                                {recipient.name} ({recipient.email})
+                              </span>
+                            )}
 
-                        {!recipient.name && (
+                            {!recipient.name && (
-                          <span className="truncate" title={recipient.email}>
+                              <span title={recipient.email}>{recipient.email}</span>
-                            {recipient.email}
+                            )}
                           </span>
-                        )}
+
-                      </CommandItem>
+                          <div className="ml-auto flex items-center justify-center">
-                    ))}
+                            {recipient.sendStatus !== SendStatus.SENT ? (
-                  </CommandGroup>
+                              <Check
+                                aria-hidden={recipient !== selectedSigner}
+                                className={cn('h-4 w-4 flex-shrink-0', {
+                                  'opacity-0': recipient !== selectedSigner,
+                                  'opacity-100': recipient === selectedSigner,
+                                })}
+                              />
+                            ) : (
+                              <Tooltip>
+                                <TooltipTrigger>
+                                  <Info className="mx-2 h-4 w-4" />
+                                </TooltipTrigger>
+
+                                <TooltipContent className="text-muted-foreground max-w-xs">
+                                  This document has already been sent to this recipient. You can no
+                                  longer edit this recipient.
+                                </TooltipContent>
+                              </Tooltip>
+                            )}
+                          </div>
+                        </CommandItem>
+                      ))}
+                    </CommandGroup>
+                  ))}
                 </Command>
               </PopoverContent>
             </Popover>
           )}
 
           <div className="-mx-2 flex-1 overflow-y-auto px-2">
-            <div className="grid grid-cols-2 gap-x-4 gap-y-8">
+            <fieldset disabled={isFieldsDisabled} className="grid grid-cols-2 gap-x-4 gap-y-8">
               <button
                 type="button"
                 className="group h-full w-full"
-                disabled={!selectedSigner || selectedSigner?.sendStatus === SendStatus.SENT}
                 onClick={() => setSelectedField(FieldType.SIGNATURE)}
                 onMouseDown={() => setSelectedField(FieldType.SIGNATURE)}
                 data-selected={selectedField === FieldType.SIGNATURE ? true : undefined}
@@ -441,7 +486,6 @@ export const AddFieldsFormPartial = ({
               <button
                 type="button"
                 className="group h-full w-full"
-                disabled={!selectedSigner || selectedSigner?.sendStatus === SendStatus.SENT}
                 onClick={() => setSelectedField(FieldType.EMAIL)}
                 onMouseDown={() => setSelectedField(FieldType.EMAIL)}
                 data-selected={selectedField === FieldType.EMAIL ? true : undefined}
@@ -464,7 +508,6 @@ export const AddFieldsFormPartial = ({
               <button
                 type="button"
                 className="group h-full w-full"
-                disabled={!selectedSigner || selectedSigner?.sendStatus === SendStatus.SENT}
                 onClick={() => setSelectedField(FieldType.NAME)}
                 onMouseDown={() => setSelectedField(FieldType.NAME)}
                 data-selected={selectedField === FieldType.NAME ? true : undefined}
@@ -487,7 +530,6 @@ export const AddFieldsFormPartial = ({
               <button
                 type="button"
                 className="group h-full w-full"
-                disabled={!selectedSigner || selectedSigner?.sendStatus === SendStatus.SENT}
                 onClick={() => setSelectedField(FieldType.DATE)}
                 onMouseDown={() => setSelectedField(FieldType.DATE)}
                 data-selected={selectedField === FieldType.DATE ? true : undefined}
@@ -506,7 +548,7 @@ export const AddFieldsFormPartial = ({
                   </CardContent>
                 </Card>
               </button>
-            </div>
+            </fieldset>
           </div>
         </div>
       </DocumentFlowFormContainerContent>

packages/ui/primitives/document-flow/add-signers.tsx

@@ -4,19 +4,20 @@ import React, { useId } from 'react';
 
 import { zodResolver } from '@hookform/resolvers/zod';
 import { AnimatePresence, motion } from 'framer-motion';
-import { Plus, Trash } from 'lucide-react';
+import { BadgeCheck, Copy, Eye, PencilLine, Plus, Trash } from 'lucide-react';
 import { Controller, useFieldArray, useForm } from 'react-hook-form';
 
 import { useLimits } from '@documenso/ee/server-only/limits/provider/client';
 import { nanoid } from '@documenso/lib/universal/id';
 import type { Field, Recipient } from '@documenso/prisma/client';
-import { DocumentStatus, SendStatus } from '@documenso/prisma/client';
+import { DocumentStatus, RecipientRole, SendStatus } from '@documenso/prisma/client';
 import type { DocumentWithData } from '@documenso/prisma/types/document-with-data';
 
 import { Button } from '../button';
 import { FormErrorMessage } from '../form/form-error-message';
 import { Input } from '../input';
 import { Label } from '../label';
+import { Select, SelectContent, SelectItem, SelectTrigger } from '../select';
 import { useStep } from '../stepper';
 import { useToast } from '../use-toast';
 import type { TAddSignersFormSchema } from './add-signers.types';
@@ -28,8 +29,16 @@ import {
   DocumentFlowFormContainerHeader,
   DocumentFlowFormContainerStep,
 } from './document-flow-root';
+import { ShowFieldItem } from './show-field-item';
 import type { DocumentFlowStep } from './types';
 
+const ROLE_ICONS: Record<RecipientRole, JSX.Element> = {
+  SIGNER: <PencilLine className="h-4 w-4" />,
+  APPROVER: <BadgeCheck className="h-4 w-4" />,
+  CC: <Copy className="h-4 w-4" />,
+  VIEWER: <Eye className="h-4 w-4" />,
+};
+
 export type AddSignersFormProps = {
   documentFlow: DocumentFlowStep;
   recipients: Recipient[];
@@ -42,7 +51,7 @@ export const AddSignersFormPartial = ({
   documentFlow,
   recipients,
   document,
-  fields: _fields,
+  fields,
   onSubmit,
 }: AddSignersFormProps) => {
   const { toast } = useToast();
@@ -66,12 +75,14 @@ export const AddSignersFormPartial = ({
               formId: String(recipient.id),
               name: recipient.name,
               email: recipient.email,
+              role: recipient.role,
             }))
           : [
               {
                 formId: initialId,
                 name: '',
                 email: '',
+                role: RecipientRole.SIGNER,
               },
             ],
     },
@@ -103,6 +114,7 @@ export const AddSignersFormPartial = ({
       formId: nanoid(12),
       name: '',
       email: '',
+      role: RecipientRole.SIGNER,
     });
   };
 
@@ -136,6 +148,10 @@ export const AddSignersFormPartial = ({
       />
       <DocumentFlowFormContainerContent>
         <div className="flex w-full flex-col gap-y-4">
+          {fields.map((field, index) => (
+            <ShowFieldItem key={index} field={field} recipients={recipients} />
+          ))}
+
           <AnimatePresence>
             {signers.map((signer, index) => (
               <motion.div
@@ -184,6 +200,48 @@ export const AddSignersFormPartial = ({
                   />
                 </div>
 
+                <div className="w-[60px]">
+                  <Controller
+                    control={control}
+                    name={`signers.${index}.role`}
+                    render={({ field: { value, onChange } }) => (
+                      <Select value={value} onValueChange={(x) => onChange(x)}>
+                        <SelectTrigger className="bg-background">{ROLE_ICONS[value]}</SelectTrigger>
+
+                        <SelectContent className="" align="end">
+                          <SelectItem value={RecipientRole.SIGNER}>
+                            <div className="flex items-center">
+                              <span className="mr-2">{ROLE_ICONS[RecipientRole.SIGNER]}</span>
+                              Signer
+                            </div>
+                          </SelectItem>
+
+                          <SelectItem value={RecipientRole.CC}>
+                            <div className="flex items-center">
+                              <span className="mr-2">{ROLE_ICONS[RecipientRole.CC]}</span>
+                              Receives copy
+                            </div>
+                          </SelectItem>
+
+                          <SelectItem value={RecipientRole.APPROVER}>
+                            <div className="flex items-center">
+                              <span className="mr-2">{ROLE_ICONS[RecipientRole.APPROVER]}</span>
+                              Approver
+                            </div>
+                          </SelectItem>
+
+                          <SelectItem value={RecipientRole.VIEWER}>
+                            <div className="flex items-center">
+                              <span className="mr-2">{ROLE_ICONS[RecipientRole.VIEWER]}</span>
+                              Viewer
+                            </div>
+                          </SelectItem>
+                        </SelectContent>
+                      </Select>
+                    )}
+                  />
+                </div>
+
                 <div>
                   <button
                     type="button"