feat: certificate qrcode (#1755)

Adds document access tokens and QR code functionality to enable secure
document sharing via URLs. It includes a new document access page that
allows viewing and downloading documents through tokenized links.

apps/remix/app/routes/_internal+/[__htmltopdf]+/certificate.tsx

@@ -5,8 +5,10 @@ import { DateTime } from 'luxon';
 import { redirect } from 'react-router';
 import { match } from 'ts-pattern';
 import { UAParser } from 'ua-parser-js';
+import { renderSVG } from 'uqr';
 
 import { isDocumentPlatform } from '@documenso/ee/server-only/util/is-document-platform';
+import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
 import { APP_I18N_OPTIONS, ZSupportedLanguageCodeSchema } from '@documenso/lib/constants/i18n';
 import {
   RECIPIENT_ROLES_DESCRIPTION,
@@ -342,7 +344,18 @@ export default function SigningCertificate({ loaderData }: Route.ComponentProps)
       </Card>
 
       {isPlatformDocument && (
-        <div className="my-8 flex-row-reverse">
+        <div className="my-8 flex-row-reverse space-y-4">
+          <div className="flex items-end justify-end gap-x-4">
+            <div
+              className="flex h-24 w-24 justify-center"
+              dangerouslySetInnerHTML={{
+                __html: renderSVG(`${NEXT_PUBLIC_WEBAPP_URL()}/share/${document.qrToken}`, {
+                  ecc: 'Q',
+                }),
+              }}
+            />
+          </div>
+
           <div className="flex items-end justify-end gap-x-4">
             <p className="flex-shrink-0 text-sm font-medium print:text-xs">
               {_(msg`Signing certificate provided by`)}:

apps/remix/app/routes/_share+/_layout.tsx

@@ -0,0 +1,11 @@
+import { Outlet } from 'react-router';
+
+export default function Layout() {
+  return (
+    <main className="relative flex min-h-screen flex-col items-center justify-center overflow-hidden px-4 py-12 md:p-12 lg:p-24">
+      <div className="relative w-full">
+        <Outlet />
+      </div>
+    </main>
+  );
+}

apps/remix/app/routes/_share+/share.$slug.opengraph.tsx

@@ -22,6 +22,11 @@ const IMAGE_SIZE = {
 export const loader = async ({ params }: Route.LoaderArgs) => {
   const { slug } = params;
 
+  // QR codes are not supported for OpenGraph images
+  if (slug.startsWith('qr_')) {
+    return new Response('Not found', { status: 404 });
+  }
+
   const baseUrl = NEXT_PUBLIC_WEBAPP_URL();
 
   const [interSemiBold, interRegular, caveatRegular] = await Promise.all([

apps/remix/app/routes/_share+/share.$slug.tsx

@@ -1,10 +1,17 @@
-import { redirect } from 'react-router';
+import { redirect, useLoaderData } from 'react-router';
 
 import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
+import { getDocumentByAccessToken } from '@documenso/lib/server-only/document/get-document-by-access-token';
+
+import { DocumentCertificateQRView } from '~/components/general/document/document-certificate-qr-view';
 
 import type { Route } from './+types/share.$slug';
 
 export function meta({ params: { slug } }: Route.MetaArgs) {
+  if (slug.startsWith('qr_')) {
+    return undefined;
+  }
+
   return [
     { title: 'Documenso - Share' },
     { description: 'I just signed a document in style with Documenso!' },
@@ -43,11 +50,23 @@ export function meta({ params: { slug } }: Route.MetaArgs) {
   ];
 }
 
-export const loader = ({ request }: Route.LoaderArgs) => {
+export const loader = async ({ request, params: { slug } }: Route.LoaderArgs) => {
+  if (slug.startsWith('qr_')) {
+    const document = await getDocumentByAccessToken({ token: slug });
+
+    if (!document) {
+      throw redirect('/');
+    }
+
+    return {
+      document,
+    };
+  }
+
   const userAgent = request.headers.get('User-Agent') ?? '';
 
   if (/bot|facebookexternalhit|WhatsApp|google|bing|duckduckbot|MetaInspector/i.test(userAgent)) {
-    return null;
+    return {};
   }
 
   // Is hardcoded because this whole meta is hardcoded anyway for Documenso.
@@ -55,5 +74,20 @@ export const loader = ({ request }: Route.LoaderArgs) => {
 };
 
 export default function SharePage() {
+  const { document } = useLoaderData<typeof loader>();
+
+  if (document) {
+    return (
+      <DocumentCertificateQRView
+        documentId={document.id}
+        title={document.title}
+        documentData={document.documentData}
+        password={document.documentMeta?.password}
+        recipientCount={document.recipients?.length ?? 0}
+        completedDate={document.completedAt ?? undefined}
+      />
+    );
+  }
+
   return <div></div>;
 }