Merge branch 'main' into update-documents-avatar

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

@@ -4,7 +4,7 @@ import { useState } from 'react';
 
 import { useRouter } from 'next/navigation';
 
-import type { DocumentData, Field, Recipient, User } from '@documenso/prisma/client';
+import type { DocumentData, DocumentMeta, Field, Recipient, User } from '@documenso/prisma/client';
 import { DocumentStatus } from '@documenso/prisma/client';
 import type { DocumentWithData } from '@documenso/prisma/types/document-with-data';
 import { trpc } from '@documenso/trpc/react';
@@ -29,6 +29,7 @@ export type EditDocumentFormProps = {
   user: User;
   document: DocumentWithData;
   recipients: Recipient[];
+  documentMeta: DocumentMeta | null;
   fields: Field[];
   documentData: DocumentData;
 };
@@ -41,6 +42,7 @@ export const EditDocumentForm = ({
   document,
   recipients,
   fields,
+  documentMeta,
   user: _user,
   documentData,
 }: EditDocumentFormProps) => {
@@ -56,6 +58,8 @@ export const EditDocumentForm = ({
   const { mutateAsync: addFields } = trpc.field.addFields.useMutation();
   const { mutateAsync: addSigners } = trpc.recipient.addSigners.useMutation();
   const { mutateAsync: sendDocument } = trpc.document.sendDocument.useMutation();
+  const { mutateAsync: setPasswordForDocument } =
+    trpc.document.setPasswordForDocument.useMutation();
 
   const documentFlow: Record<EditDocumentStep, DocumentFlowStep> = {
     title: {
@@ -176,6 +180,13 @@ export const EditDocumentForm = ({
     }
   };
 
+  const onPasswordSubmit = async (password: string) => {
+    await setPasswordForDocument({
+      documentId: document.id,
+      password,
+    });
+  };
+
   const currentDocumentFlow = documentFlow[step];
 
   return (
@@ -185,7 +196,13 @@ export const EditDocumentForm = ({
         gradient
       >
         <CardContent className="p-2">
-          <LazyPDFViewer key={documentData.id} documentData={documentData} />
+          <LazyPDFViewer
+            key={documentData.id}
+            documentData={documentData}
+            document={document}
+            password={documentMeta?.password}
+            onPasswordSubmit={onPasswordSubmit}
+          />
         </CardContent>
       </Card>
 

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

@@ -3,10 +3,12 @@ import { redirect } from 'next/navigation';
 
 import { ChevronLeft, Users2 } from 'lucide-react';
 
+import { DOCUMENSO_ENCRYPTION_KEY } from '@documenso/lib/constants/crypto';
 import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
 import { getDocumentById } from '@documenso/lib/server-only/document/get-document-by-id';
 import { getFieldsForDocument } from '@documenso/lib/server-only/field/get-fields-for-document';
 import { getRecipientsForDocument } from '@documenso/lib/server-only/recipient/get-recipients-for-document';
+import { symmetricDecrypt } from '@documenso/lib/universal/crypto';
 import { DocumentStatus as InternalDocumentStatus } from '@documenso/prisma/client';
 import { LazyPDFViewer } from '@documenso/ui/primitives/lazy-pdf-viewer';
 
@@ -40,7 +42,24 @@ export default async function DocumentPage({ params }: DocumentPageProps) {
     redirect('/documents');
   }
 
-  const { documentData } = document;
+  const { documentData, documentMeta } = document;
+
+  if (documentMeta?.password) {
+    const key = DOCUMENSO_ENCRYPTION_KEY;
+
+    if (!key) {
+      throw new Error('Missing DOCUMENSO_ENCRYPTION_KEY');
+    }
+
+    const securePassword = Buffer.from(
+      symmetricDecrypt({
+        key,
+        data: documentMeta.password,
+      }),
+    ).toString('utf-8');
+
+    documentMeta.password = securePassword;
+  }
 
   const [recipients, fields] = await Promise.all([
     getRecipientsForDocument({
@@ -83,6 +102,7 @@ export default async function DocumentPage({ params }: DocumentPageProps) {
           className="mt-8"
           document={document}
           user={user}
+          documentMeta={documentMeta}
           recipients={recipients}
           fields={fields}
           documentData={documentData}
@@ -91,7 +111,12 @@ export default async function DocumentPage({ params }: DocumentPageProps) {
 
       {document.status === InternalDocumentStatus.COMPLETED && (
         <div className="mx-auto mt-12 max-w-2xl">
-          <LazyPDFViewer key={documentData.id} documentData={documentData} />
+          <LazyPDFViewer
+            document={document}
+            key={documentData.id}
+            documentMeta={documentMeta}
+            documentData={documentData}
+          />
         </div>
       )}
     </div>

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

@@ -6,7 +6,7 @@ import { Download, Edit, Pencil } from 'lucide-react';
 import { useSession } from 'next-auth/react';
 import { match } from 'ts-pattern';
 
-import { getFile } from '@documenso/lib/universal/upload/get-file';
+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 type { DocumentWithData } from '@documenso/prisma/types/document-with-data';
@@ -55,28 +55,14 @@ export const DataTableActionButton = ({ row }: DataTableActionButtonProps) => {
       const documentData = document?.documentData;
 
       if (!documentData) {
-        return;
+        throw Error('No document available');
       }
 
-      const documentBytes = await getFile(documentData);
-
-      const blob = new Blob([documentBytes], {
-        type: 'application/pdf',
-      });
-
-      const link = window.document.createElement('a');
-      const baseTitle = row.title.includes('.pdf') ? row.title.split('.pdf')[0] : row.title;
-
-      link.href = window.URL.createObjectURL(blob);
-      link.download = baseTitle ? `${baseTitle}_signed.pdf` : 'document.pdf';
-
-      link.click();
-
-      window.URL.revokeObjectURL(link.href);
-    } catch (error) {
+      await downloadPDF({ documentData, fileName: row.title });
+    } catch (err) {
       toast({
         title: 'Something went wrong',
-        description: 'An error occurred while trying to download file.',
+        description: 'An error occurred while downloading your document.',
         variant: 'destructive',
       });
     }

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

@@ -17,7 +17,7 @@ import {
 } from 'lucide-react';
 import { useSession } from 'next-auth/react';
 
-import { getFile } from '@documenso/lib/universal/upload/get-file';
+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 type { DocumentWithData } from '@documenso/prisma/types/document-with-data';
@@ -30,6 +30,7 @@ import {
   DropdownMenuLabel,
   DropdownMenuTrigger,
 } from '@documenso/ui/primitives/dropdown-menu';
+import { useToast } from '@documenso/ui/primitives/use-toast';
 
 import { ResendDocumentActionItem } from './_action-items/resend-document';
 import { DeleteDocumentDialog } from './delete-document-dialog';
@@ -44,6 +45,7 @@ export type DataTableActionDropdownProps = {
 
 export const DataTableActionDropdown = ({ row }: DataTableActionDropdownProps) => {
   const { data: session } = useSession();
+  const { toast } = useToast();
 
   const [isDeleteDialogOpen, setDeleteDialogOpen] = useState(false);
   const [isDuplicateDialogOpen, setDuplicateDialogOpen] = useState(false);
@@ -63,39 +65,33 @@ export const DataTableActionDropdown = ({ row }: DataTableActionDropdownProps) =
   const isDocumentDeletable = isOwner;
 
   const onDownloadClick = async () => {
-    let document: DocumentWithData | null = null;
+    try {
+      let document: DocumentWithData | null = null;
 
-    if (!recipient) {
-      document = await trpcClient.document.getDocumentById.query({
-        id: row.id,
-      });
-    } else {
-      document = await trpcClient.document.getDocumentByToken.query({
-        token: recipient.token,
+      if (!recipient) {
+        document = await trpcClient.document.getDocumentById.query({
+          id: row.id,
+        });
+      } else {
+        document = await trpcClient.document.getDocumentByToken.query({
+          token: recipient.token,
+        });
+      }
+
+      const documentData = document?.documentData;
+
+      if (!documentData) {
+        return;
+      }
+
+      await downloadPDF({ documentData, fileName: row.title });
+    } catch (err) {
+      toast({
+        title: 'Something went wrong',
+        description: 'An error occurred while downloading your document.',
+        variant: 'destructive',
       });
     }
-
-    const documentData = document?.documentData;
-
-    if (!documentData) {
-      return;
-    }
-
-    const documentBytes = await getFile(documentData);
-
-    const blob = new Blob([documentBytes], {
-      type: 'application/pdf',
-    });
-
-    const link = window.document.createElement('a');
-    const baseTitle = row.title.includes('.pdf') ? row.title.split('.pdf')[0] : row.title;
-
-    link.href = window.URL.createObjectURL(blob);
-    link.download = baseTitle ? `${baseTitle}_signed.pdf` : 'document.pdf';
-
-    link.click();
-
-    window.URL.revokeObjectURL(link.href);
   };
 
   const nonSignedRecipients = row.Recipient.filter((item) => item.signingStatus !== 'SIGNED');

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

@@ -1,3 +1,4 @@
+import type { Metadata } from 'next';
 import Link from 'next/link';
 
 import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
@@ -25,6 +26,9 @@ export type DocumentsPageProps = {
   };
 };
 
+export const metadata: Metadata = {
+  title: 'Documents',
+};
 export default async function DocumentsPage({ searchParams = {} }: DocumentsPageProps) {
   const { user } = await getRequiredServerComponentSession();
 
@@ -88,7 +92,7 @@ export default async function DocumentsPage({ searchParams = {} }: DocumentsPage
                     <DocumentStatus status={value} />
 
                     {value !== ExtendedDocumentStatus.ALL && (
-                      <span className="ml-1 hidden opacity-50 md:inline-block">
+                      <span className="ml-1 inline-block opacity-50">
                         {Math.min(stats[value], 99)}
                         {stats[value] > 99 && '+'}
                       </span>

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/page.tsx

@@ -1,9 +1,16 @@
+import type { Metadata } from 'next';
+
+import { IDENTITY_PROVIDER_NAME } from '@documenso/lib/constants/auth';
 import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
 
 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();
 
@@ -17,28 +24,43 @@ export default async function SecuritySettingsPage() {
 
       <hr className="my-4" />
 
-      <PasswordForm user={user} className="max-w-xl" />
+      {user.identityProvider === 'DOCUMENSO' ? (
+        <div>
+          <PasswordForm user={user} className="max-w-xl" />
 
-      <hr className="mb-4 mt-8" />
+          <hr className="mb-4 mt-8" />
 
-      <h4 className="text-lg font-medium">Two Factor Authentication</h4>
+          <h4 className="text-lg font-medium">Two Factor Authentication</h4>
 
-      <p className="text-muted-foreground mt-2 text-sm">
-        Add and manage your two factor security settings to add an extra layer of security to your
-        account!
-      </p>
+          <p className="text-muted-foreground mt-2 text-sm">
+            Add and manage your two factor security settings to add an extra layer of security to
+            your account!
+          </p>
 
-      <div className="mt-4 max-w-xl">
-        <h5 className="font-medium">Two-factor methods</h5>
+          <div className="mt-4 max-w-xl">
+            <h5 className="font-medium">Two-factor methods</h5>
 
-        <AuthenticatorApp isTwoFactorEnabled={user.twoFactorEnabled} />
-      </div>
+            <AuthenticatorApp isTwoFactorEnabled={user.twoFactorEnabled} />
+          </div>
 
-      {user.twoFactorEnabled && (
-        <div className="mt-4 max-w-xl">
-          <h5 className="font-medium">Recovery methods</h5>
+          {user.twoFactorEnabled && (
+            <div className="mt-4 max-w-xl">
+              <h5 className="font-medium">Recovery methods</h5>
 
-          <RecoveryCodes isTwoFactorEnabled={user.twoFactorEnabled} />
+              <RecoveryCodes isTwoFactorEnabled={user.twoFactorEnabled} />
+            </div>
+          )}
+        </div>
+      ) : (
+        <div>
+          <h4 className="text-lg font-medium">
+            Your account is managed by {IDENTITY_PROVIDER_NAME[user.identityProvider]}
+          </h4>
+          <p className="text-muted-foreground mt-2 text-sm">
+            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>
         </div>
       )}
     </div>

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;