Merge branch 'feat/refresh' into feat/completed-share-link

feat: add empty document state

.devcontainer/devcontainer.json

@@ -1,20 +1,32 @@
 {
-	"name": "Documenso",
-	"image": "mcr.microsoft.com/devcontainers/base:bullseye",
-	"features": {
-		"ghcr.io/devcontainers/features/docker-in-docker:2": {
-			"version": "latest",
-			"enableNonRootDocker": "true",
-			"moby": "true"
-		},
-		"ghcr.io/devcontainers/features/node:1": {}
-	},
+  "name": "Documenso",
+  "image": "mcr.microsoft.com/devcontainers/base:bullseye",
+  "features": {
+    "ghcr.io/devcontainers/features/docker-in-docker:2": {
+      "version": "latest",
+      "enableNonRootDocker": "true",
+      "moby": "true"
+    },
+    "ghcr.io/devcontainers/features/node:1": {}
+  },
   "onCreateCommand": "./.devcontainer/on-create.sh",
-	"forwardPorts": [
-    3000,
-    54320,
-    9000,
-    2500,
-    1100
-  ]
+  "forwardPorts": [3000, 54320, 9000, 2500, 1100],
+  "customizations": {
+    "vscode": {
+      "extensions": [
+        "aaron-bond.better-comments",
+        "bradlc.vscode-tailwindcss",
+        "dbaeumer.vscode-eslint",
+        "esbenp.prettier-vscode",
+        "mikestead.dotenv",
+        "unifiedjs.vscode-mdx",
+        "GitHub.copilot-chat",
+        "GitHub.copilot-labs",
+        "GitHub.copilot",
+        "GitHub.vscode-pull-request-github",
+        "Prisma.prisma",
+        "VisualStudioExptTeam.vscodeintellicode",
+      ]
+    }
+  }
 }

.env.example

@@ -7,14 +7,28 @@ NEXT_PRIVATE_GOOGLE_CLIENT_ID=""
 NEXT_PRIVATE_GOOGLE_CLIENT_SECRET=""
 
 # [[APP]]
-NEXT_PUBLIC_SITE_URL="http://localhost:3000"
-NEXT_PUBLIC_APP_URL="http://localhost:3000"
+NEXT_PUBLIC_WEBAPP_URL="http://localhost:3000"
+NEXT_PUBLIC_MARKETING_URL="http://localhost:3001"
 
 # [[DATABASE]]
 NEXT_PRIVATE_DATABASE_URL="postgres://documenso:password@127.0.0.1:54320/documenso"
 # Defines the URL to use for the database when running migrations and other commands that won't work with a connection pool.
 NEXT_PRIVATE_DIRECT_DATABASE_URL="postgres://documenso:password@127.0.0.1:54320/documenso"
 
+# [[STORAGE]]
+# OPTIONAL: Defines the storage transport to use. Available options: database (default) | s3
+NEXT_PUBLIC_UPLOAD_TRANSPORT="database"
+# OPTIONAL: Defines the endpoint to use for the S3 storage transport. Relevant when using third-party S3-compatible providers.
+NEXT_PRIVATE_UPLOAD_ENDPOINT=
+# OPTIONAL: Defines the region to use for the S3 storage transport. Defaults to us-east-1.
+NEXT_PRIVATE_UPLOAD_REGION=
+# REQUIRED: Defines the bucket to use for the S3 storage transport.
+NEXT_PRIVATE_UPLOAD_BUCKET=
+# OPTIONAL: Defines the access key ID to use for the S3 storage transport.
+NEXT_PRIVATE_UPLOAD_ACCESS_KEY_ID=
+# OPTIONAL: Defines the secret access key to use for the S3 storage transport.
+NEXT_PRIVATE_UPLOAD_SECRET_ACCESS_KEY=
+
 # [[SMTP]]
 # OPTIONAL: Defines the transport to use for sending emails. Available options: smtp-auth (default) | smtp-api | mailchannels
 NEXT_PRIVATE_SMTP_TRANSPORT="smtp-auth"

.eslintignore

@@ -5,3 +5,4 @@
 # Statically hosted javascript files
 apps/*/public/*.js
 apps/*/public/*.cjs
+scripts/

.github/workflows/ci.yml

@@ -22,12 +22,18 @@ jobs:
         uses: actions/checkout@v3
         with:
           fetch-depth: 2
+
       - name: Install Node.js
         uses: actions/setup-node@v3
         with:
           node-version: 18
           cache: npm
+
       - name: Install dependencies
         run: npm ci
+
+      - name: Copy env
+        run: cp .env.example .env
+
       - name: Build
         run: npm run build

.github/workflows/codeql-analysis.yml

@@ -32,7 +32,10 @@ jobs:
 
     - name: Install Dependencies
       run: npm ci
-      
+
+    - name: Copy env
+      run: cp .env.example .env
+
     - name: Build Documenso
       run: npm run build
 
@@ -42,4 +45,4 @@ jobs:
         languages: ${{ matrix.language }}
 
     - name: Perform CodeQL Analysis
-      uses: github/codeql-action/analyze@v2
+      uses: github/codeql-action/analyze@v2

apps/marketing/content/blog/deploy-with-vercel-supabase-resend.mdx

@@ -0,0 +1,198 @@
+---
+title: 'Deploying Documenso with Vercel, Supabase and Resend'
+description: This is the first part of the new Building Documenso series, where I describe the challenges and design choices that we make while building the world’s most open signing platform.
+authorName: 'Ephraim Atta-Duncan'
+authorImage: '/blog/blog-author-duncan.jpeg'
+authorRole: 'Software Engineer Intern'
+date: 2023-09-08
+tags:
+  - Open Source
+  - Self Hosting
+  - Tutorial
+---
+
+In this article, we'll walk you through how to deploy and self-host Documenso using Vercel, Supabase, and Resend.
+
+You'll learn:
+
+- How to set up a Postgres database using Supabase,
+- How to install SMTP with Resend,
+- How to deploy your project with Vercel.
+
+If you don't know what [Documenso](https://documenso.com/) is, it's an open-source alternative to DocuSign, with the mission to create an open signing infrastructure while embracing openness, cooperation, and transparency.
+
+## Prerequisites
+
+Before we start, make sure you have a [GitHub](https://github.com/signup) account. You also need [Node.js](https://nodejs.org/en) and [npm](https://www.npmjs.com/) installed on your local machine (note: you also have the option to host it on a cloud environment using Gitpod for example; that would be another post). If you need accounts on Vercel, Supabase, and Resend, create them by visiting the [Vercel](https://vercel.com/), [Supabase](https://supabase.com/), and [Resend](https://resend.com/) websites.
+
+Checklist:
+
+- [ ] Have a GitHub account
+- [ ] Install Node.js
+- [ ] Install npm
+- [ ] Have a Vercel account
+- [ ] Have a Supabase account
+- [ ] Have a Resend account
+
+## Step-by-Step guide to deploying Documenso with Vercel, Supabase, and Resend
+
+To deploy Documenso, we'll take the following steps:
+
+1. Fork the Documenso repository
+2. Clone the forked repository and install dependencies
+3. Create a new project on Supabase
+4. Copy the Supabase Postgres database connection URL
+5. Create a `.env` file
+6. Run the migration on the Supabase Postgres Database
+7. Get your SMTP Keys on Resend
+8. Create a new project on Vercel
+9. Add Environment Variables to your Vercel project
+
+So, you're ready? Let’s dive in!
+
+### Step 1: Fork the Documenso repository
+
+Start by creating a fork of Documenso on GitHub. You can do this by visiting the [Documenso repository](https://github.com/documenso/documenso) and clicking on the 'Fork' button. (Also, star the repo!)
+
+![Documenso](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wkcujctpf86p56bju3mq.png)
+
+Choose your GitHub profile as the owner and click on 'Create fork' to create a fork of the repo.
+
+![Fork the Documenso repository on GitHub](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xf49r2byu9nnd1465niy.png)
+
+### Step 2: Clone the forked repository and install dependencies
+
+Clone the forked repository to your local machine in any directory of your choice. Open your terminal and enter the following commands:
+
+```bash
+# Clone the repo using Github CLI
+gh repo clone [your_github_username]/documenso
+
+# Clone the repo using Git
+git clone <https://github.com/[your_github_username]/documenso.git>
+```
+
+You can now navigate into the directory and install the project’s dependencies:
+
+```bash
+cd documenso
+npm install
+```
+
+### Step 3: Create a new project on Supabase
+
+Now, let's set up the database.
+
+If you haven't already, create a new project on Supabase. This will automatically create a new Postgres database for you.
+
+On your Supabase dashboard, click the '**New project**' button and choose your organization.
+
+On the '**Create a new project**' page, set a database name of **documenso** and a secure password for your database. Choose a region closer to you, a pricing plan, and click on '**Create new project**' to create your project.
+
+![Create a new project on Supabase](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w5lqz771iupjyi1ekfdz.png)
+
+### Step 4: Copy the Supabase Postgres database connection URL
+
+In your project, click the '**Settings**' icon at the bottom left.
+
+Under the '**Project Settings**' section, click '**Database**' and scroll down to the '**Connection string**' section. Copy the '**URI**' and update it with the password you chose in the previous step.
+
+![Copy the Supabase Postgres database connection URL](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y1ldu3qrg9moednbzjij.png)
+
+### Step 5: Create a `.env` file
+
+Create a `.env` file in the root of your project by copying the contents of the `.env.example` file.
+
+Add the connection string you copied from your Supabase dashboard to the `DATABASE_URL` variable in the `.env` file.
+
+The `.env` should look like this:
+
+```bash
+DATABASE_URL="postgres://postgres:[YOUR-PASSWORD]@db.[YOUR-PROJECT-REF].supabase.co:5432/postgres"
+```
+
+### Step 6: Run the migration on the Supabase Postgres Database
+
+Run the migration on the Supabase Postgres Database using the following command:
+
+```bash
+npx prisma migrate deploy
+```
+
+### Step 7: Get your SMTP Keys on Resend
+
+So, you've just cloned Documenso, installed dependencies on your local machine, and set your database using Supabase. Now, SMTP is missing. Emails won't go out! Let's fix it with Resend.
+
+In the **[Resend](https://resend.com/)** dashboard, click 'Add API Key' to create a key for Resend SMTP.
+
+![Create a key for Resend SMTP](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uh2rztgn09mlvecl34i5.png)
+
+Next, add and verify your domain in the '**Domains**' section on the sidebar. This will allow you to send emails from any address associated with your domain.
+
+![Verify your domain on Resend](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nxgie0esz530vq5a494o.png)
+
+You can update your `.env` file with the following:
+
+```jsx
+SMTP_MAIL_HOST = 'smtp.resend.com';
+SMTP_MAIL_PORT = '25';
+SMTP_MAIL_USER = 'resend';
+SMTP_MAIL_PASSWORD = 'YOUR_RESEND_API_KEY';
+MAIL_FROM = 'noreply@[YOUR_DOMAIN]';
+```
+
+### Step 8: Create a new project on Vercel
+
+You set the database with Supabase and are SMTP-ready with Resend. Almost there! The next step is to deploy the project — we'll use Vercel for that.
+
+On your Vercel dashboard, create a new project using the forked project from your GitHub repositories. Select the project among the options and click '**Import**' to start running Documenso.
+
+![Create a new project on Vercel](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gdy97tltpnu7vf4fc11f.png)
+
+### Step 9: Add Environment Variables to your Vercel project
+
+In the '**Configure Project**' page, adding the required Environmental Variables is essential to ensure the application deploys without any errors.
+
+Specifically, for the `NEXT_PUBLIC_WEBAPP_URL` and `NEXTAUTH_URL` variables, you must add `.vercel.app` to your Project Name. This will form the deployment URL, which will be in the format: `https://[project_name].vercel.app`.
+
+For example, in my case, the deployment URL is `https://documenso-supabase-web.vercel.app`.
+
+![Add Environment Variables to your Vercel project](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aru33fk1i19h0valffow.png)
+
+This is a sample `.env` to deploy. Copy and paste it to auto-populate the fields and click ‘**Deploy.’** Now, you only need to wait for your project to deploy. You’re going live — enjoy!
+
+```bash
+DATABASE_URL='postgresql://postgres:typeinastrongpassword@db.njuigobjlbteahssqbtw.supabase.co:5432/postgres'
+
+NEXT_PUBLIC_WEBAPP_URL='https://documenso-supabase-web.vercel.app'
+NEXTAUTH_SECRET='something gibrish to encrypt your jwt tokens'
+NEXTAUTH_URL='https://documenso-supabase-web.vercel.app'
+
+# Get a Sendgrid Api key here: <https://signup.sendgrid.com>
+SENDGRID_API_KEY=''
+
+# Set SMTP credentials to use SMTP instead of the Sendgrid API.
+SMTP_MAIL_HOST='smtp.resend.com'
+SMTP_MAIL_PORT='25'
+SMTP_MAIL_USER='resend'
+SMTP_MAIL_PASSWORD='YOUR_RESEND_API_KEY'
+MAIL_FROM='noreply@[YOUR_DOMAIN]'
+
+NEXT_PUBLIC_ALLOW_SIGNUP=true
+```
+
+## Wrapping up
+
+![Deploying Documenso](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/secg29j9j40o4u2oa8o8.png)
+
+Congratulations! 🎉 You've successfully deployed Documenso using Vercel, Supabase, and Resend. You're now ready to create and sign your own documents with your self-hosted Documenso!
+
+In this step-by-step guide, you learned how to:
+
+- set up a Postgres database using Supabase,
+- install SMTP with Resend,
+- deploy your project with Vercel.
+
+Over to you! How was the tutorial? If you enjoyed it, [please do share](https://twitter.com/documenso/status/1700141802693480482)! And if you have any questions or comments, please reach out to me on [Twitter / X](https://twitter.com/EphraimDuncan_) (DM open) or [Discord](https://documen.so/discord).
+
+We're building an open-source alternative to DocuSign and welcome every contribution. Head over to the GitHub repository and [leave us a Star](https://github.com/documenso/documenso)!

apps/marketing/content/blog/why-were-doing-a-rewrite.mdx

@@ -0,0 +1,113 @@
+---
+title: Why we're doing a rewrite
+description: As we move beyond MVP and onto creating the open signing infrastructure we all deserve we need to take a quick pit-stop.
+authorName: 'Lucas Smith'
+authorImage: '/blog/blog-author-lucas.png'
+authorRole: 'Co-Founder'
+date: 2023-08-05
+tags:
+  - Community
+  - Development
+---
+
+<figure>
+  <MdxNextImage
+    src="/blog/blog-banner-rewrite.png"
+    width="1260"
+    height="630"
+    alt="Next generation documenso"
+  />
+
+  <figcaption className="text-center">
+    The next generation of Documenso and signing infrastructure.
+  </figcaption>
+</figure>
+
+> TLDR; We're rewriting Documenso to move on from our MVP foundations and create an even better base for the project. This rewrite will provide us the opportunity to fix a few things within the project while enabling a faster development process moving forward.
+
+# Introduction
+
+At Documenso, we're building the next generation of signing infrastructure with a focus on making it inclusive and accessible for all. To do this we need to ensure that the software we write is also inclusive and accessible and for this reason we’ve decided to take a step back and perform a _quick_ rewrite.
+
+Although we've achieved validated MVP status and gained paying customers, we're still quite far from our goal of creating a trusted, open signing experience. To move closer to that future, we need to step back and focus on the project's foundations to ensure we can solve all the items we set out to on our current homepage.
+
+Fortunately, this wasn't a case of someone joining the team and proposing a rewrite due to a lack of understanding of the codebase and context surrounding it. Prior to joining Documenso as a co-founder, I had spent an extensive amount of time within the Documenso codebase and had a fairly intimate understanding of what was happening for the most part. This knowledge allowed me to make the fair and simultaneously hard call to take a quick pause so we can rebuild our current foundations to enable accessibility and a faster delivery time in the future.
+
+# The Reasoning: TypeScript
+
+Our primary reason for the rewrite is to better leverage the tools and technologies we've already chosen, namely TypeScript. While Documenso currently uses TypeScript, it's not fully taking advantage of its safety features, such as generics and type guards.
+
+The codebase currently has several instances of `any` types, which is expected when working in an unknown domain where object models aren't fully understood before exploration and experimentation. These `any`s initially sped up development, but have since become a hindrance due to the lack of type information, combined with prop drilling. As a result, it's necessary to go through a lot of context to understand the root of any given issue.
+
+The rewrite is using TypeScript to its full potential, ensuring that every interaction is strongly typed, both through general TypeScript tooling and the introduction of [Zod](https://github.com/colinhacks/zod), a validation library with excellent TypeScript support. With these choices, we can ensure that the codebase is robust to various inputs and states, as most issues will be caught during compile time and flagged within a developer's IDE.
+
+# The Reasoning: Stronger API contracts
+
+In line with our pattern of creating strongly typed contracts, we've decided to use [tRPC](https://github.com/trpc/trpc) for our internal API. This enables us to share types between our frontend and backend and establish a solid contract for interactions between the two. This is in contrast to the currently untyped API endpoints in Documenso, which are accessed using the `fetch` API that is itself untyped.
+
+Using tRPC drastically reduces the chance of failures resulting from mundane things like argument or response shape changes during updates and upgrades. We made this decision easily because tRPC is a mature technology with no signs of losing momentum any time soon.
+
+Additionally, many of our open-source friends have made the same choice for similar reasons.
+
+# The Reasoning: Choosing exciting technologies
+
+Although we already work with what I consider to be a fun stack that includes Next.js, Prisma, Tailwind, and more, it's no secret that contributors enjoy working with new technologies that benefit them in their own careers and projects.
+
+To take advantage of this, we have decided to use Next.js 13 and React's new server component and actions architecture. Server components are currently popular among developers, with many loving and hating them at the same time.
+
+I have personally worked with server components and actions since they were first released in October 2022 and have dealt with most of the hiccups and limitations along the way. Now, in July 2023, I believe they are in a much more stable place and are ready to be adopted, with their benefits being recognised by many.
+
+By choosing to use server components and actions, we hope to encourage the community to participate more than they otherwise might. However, we are only choosing this because it has become more mature and stable. We will not choose things that are less likely to become the de-facto solution in the future, as we do not wish to inherit a pile of tech debt later on.
+
+# The Reasoning: Allowing concurrent work
+
+Another compelling reason for the rewrite was to effectively modularise code so we can work on features concurrently and without issue. This means extracting as much as possible out of components, API handlers and more and into a set of methods and functions that attempt to focus on just one thing.
+
+In performing this work we should be able to easily make refactors and other changes to various parts of the code without stepping on each others feet, this also grants us the ability to upgrade or deprecate items as required by sticking to the contract of the previous method.
+
+Additionally, this makes testing a much easier task as we can focus more on units of work rather than extensive end to end testing although we aim to have both, just not straight away.
+
+# The Reasoning: Licensing of work
+
+Another major reasoning for the rewrite is to ensure that all work performed on the project by both our internal team and external contributors is licensed in a way that benefits the project long-term. Prior to the rewrite contributors would create pull requests that would be merged in without any further process outside of the common code-review and testing cycles.
+
+This was fine for the most part since we were simply working on the MVP but now as we move towards an infrastructure focus we intend on taking on enterprise clients who will have a need for a non-GPLv3 license since interpretations of it can be quite harmful to private hosting, to facilitate this we will require contributors to sign a contributor license agreement (CLA) prior to their changes being merged which will assign a perpetual license for us to use their code and relicense it as required such as for the use-case above.
+
+While some might cringe at the idea of signing a CLA, we want to offer a compelling enterprise offering through means of dual-licensing. Great enterprise adoption is one of the cornerstones of our strategy and will be key to funding community and product development long-term.
+
+_Do note that the above does not mean that we will ever go closed-source, it’s a point in our investor agreements that [https://github.com/documenso/documenso](https://github.com/documenso/documenso) will always remain available and open-source._
+
+# Goals and Non-Goals
+
+Rewriting an application is a monumental task that I have taken on and rejected many times in my career. As I get older, I become more hesitant to perform these rewrites because I understand that systems carry a lot of context and history. This makes them better suited for piecemeal refactoring instead, which avoids learning the lessons of the past all over again during the launch of the rewrite.
+
+To ensure that we aren't just jumping off the deep end, I have set out a list of goals and non-goals to keep this rewrite lean and affordable.
+
+### Goals
+
+- Provide a clean design and interface for the newly rewritten application that creates a sense of trust and security at first glance.
+- Create a stable foundation and architecture that will allow for growth into our future roadmap items (teams, automation, workflows, etc.).
+- Create a robust system that requires minimal context through strong contracts and typing.
+
+### Non-Goals
+
+- Change the database schema (we don't want to make migration harder than it needs to be, thus all changes must be additive).
+- Add too many features that weren't in the system prior to the rewrite.
+- Remove any features that were in the older version of Documenso, such as free signatures (signatures that have no corresponding field).
+
+# Rollout Plan
+
+Thanks to the constraints listed above our rollout will hopefully be fairly painless, still to be safe we plan on doing the following.
+
+1.  In the current [testing environment](https://test.documenso.com), create and sign a number of documents leaving many in varying states of completion.
+2.  Deploy the rewrite to the testing environment and verify that all existing documents and information is retrievable and modifiable without any issue.
+3.  Create another set of documents using the new rewrite and verify that all interactions between authoring and signing work as expected.
+4.  Repeat this until we reach a general confidence level (expectation of two weeks).
+
+Once we’ve reached the desired confidence level with our testing environment we will look to deploy the rewrite to the production environment ensuring that we’ve performed all the required backups in the event of a catastrophic failure.
+
+# Want to help out?
+
+We’re currently working on the **[feat/refresh](https://github.com/documenso/documenso/tree/feat/refresh)** branch on GitHub, we aim to have a CLA available to sign in the coming days so we can start accepting external contributions asap. While we’re nearing the end-stage of the rewrite we will be throwing up a couple of bounties shortly for things like [Husky](https://github.com/typicode/husky) and [Changesets](https://github.com/changesets/changesets).
+
+Keep an eye on our [GitHub issues](https://github.com/documenso/documenso/issues) to stay up to date!

apps/marketing/next.config.js

@@ -8,9 +8,50 @@ const { parsed: env } = require('dotenv').config({
 
 /** @type {import('next').NextConfig} */
 const config = {
+  experimental: {
+    serverActions: true,
+  },
   reactStrictMode: true,
   transpilePackages: ['@documenso/lib', '@documenso/prisma', '@documenso/trpc', '@documenso/ui'],
-  env,
+  modularizeImports: {
+    'lucide-react': {
+      transform: 'lucide-react/dist/esm/icons/{{ kebabCase member }}',
+    },
+  },
+  async headers() {
+    return [
+      {
+        source: '/:path*',
+        headers: [
+          {
+            key: 'x-dns-prefetch-control',
+            value: 'on',
+          },
+          {
+            key: 'strict-transport-security',
+            value: 'max-age=31536000; includeSubDomains; preload',
+          },
+          {
+            key: 'x-frame-options',
+            value: 'SAMEORIGIN',
+          },
+          {
+            key: 'x-content-type-options',
+            value: 'nosniff',
+          },
+          {
+            key: 'referrer-policy',
+            value: 'strict-origin-when-cross-origin',
+          },
+          {
+            key: 'permissions-policy',
+            value:
+              'accelerometer=(), camera=(), geolocation=(), gyroscope=(), magnetometer=(), microphone=(), payment=(), usb=()',
+          },
+        ],
+      },
+    ];
+  },
 };
 
 module.exports = withContentlayer(config);

apps/marketing/package.json

@@ -8,6 +8,7 @@
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
+    "clean": "rimraf .next && rimraf node_modules",
     "copy:pdfjs": "node ../../scripts/copy-pdfjs.cjs"
   },
   "dependencies": {
@@ -18,9 +19,9 @@
     "@hookform/resolvers": "^3.1.0",
     "contentlayer": "^0.3.4",
     "framer-motion": "^10.12.8",
-    "lucide-react": "^0.214.0",
+    "lucide-react": "^0.279.0",
     "micro": "^10.0.1",
-    "next": "13.4.12",
+    "next": "13.4.19",
     "next-auth": "4.22.3",
     "next-contentlayer": "^0.3.4",
     "next-plausible": "^3.10.1",

apps/marketing/process-env.d.ts

@@ -1,6 +1,7 @@
 declare namespace NodeJS {
   export interface ProcessEnv {
-    NEXT_PUBLIC_SITE_URL?: string;
+    NEXT_PUBLIC_WEBAPP_URL?: string;
+    NEXT_PUBLIC_MARKETING_URL?: string;
 
     NEXT_PRIVATE_DATABASE_URL: string;
 

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

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

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

@@ -161,7 +161,7 @@ export default async function ClaimedPlanPage({ searchParams = {} }: ClaimedPlan
         </p>
 
         <Link
-          href={`${process.env.NEXT_PUBLIC_APP_URL}/login`}
+          href={`${process.env.NEXT_PUBLIC_WEBAPP_URL}/login`}
           target="_blank"
           className="mt-4 block"
         >

apps/marketing/src/app/layout.tsx

@@ -21,12 +21,12 @@ export const metadata = {
     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.',
     type: 'website',
-    images: [`${process.env.NEXT_PUBLIC_SITE_URL}/opengraph-image.jpg`],
+    images: [`${process.env.NEXT_PUBLIC_MARKETING_URL}/opengraph-image.jpg`],
   },
   twitter: {
     site: '@documenso',
     card: 'summary_large_image',
-    images: [`${process.env.NEXT_PUBLIC_SITE_URL}/opengraph-image.jpg`],
+    images: [`${process.env.NEXT_PUBLIC_MARKETING_URL}/opengraph-image.jpg`],
     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.',
   },

apps/marketing/src/app/not-found.tsx

@@ -0,0 +1,65 @@
+'use client';
+
+import Image from 'next/image';
+import Link from 'next/link';
+import { useRouter } from 'next/navigation';
+
+import { motion } from 'framer-motion';
+import { ChevronLeft } from 'lucide-react';
+
+import { cn } from '@documenso/ui/lib/utils';
+import { Button } from '@documenso/ui/primitives/button';
+
+import backgroundPattern from '~/assets/background-pattern.png';
+
+export default function NotFound() {
+  const router = useRouter();
+
+  return (
+    <div className={cn('relative max-w-[100vw] overflow-hidden')}>
+      <div className="absolute -inset-24 -z-10">
+        <motion.div
+          className="flex h-full w-full items-center justify-center"
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 0.8, transition: { duration: 0.5, delay: 0.5 } }}
+        >
+          <Image
+            src={backgroundPattern}
+            alt="background pattern"
+            className="-mr-[50vw] -mt-[15vh] h-full scale-100 object-cover md:scale-100 lg:scale-[100%]"
+            priority
+          />
+        </motion.div>
+      </div>
+
+      <div className="container mx-auto flex h-full min-h-screen items-center px-6 py-32">
+        <div>
+          <p className="text-muted-foreground font-semibold">404 Page not found</p>
+
+          <h1 className="mt-3 text-2xl font-bold md:text-3xl">Oops! Something went wrong.</h1>
+
+          <p className="text-muted-foreground mt-4 text-sm">
+            The page you are looking for was moved, removed, renamed or might never have existed.
+          </p>
+
+          <div className="mt-6 flex gap-x-2.5 gap-y-4 md:items-center">
+            <Button
+              variant="ghost"
+              className="w-32"
+              onClick={() => {
+                void router.back();
+              }}
+            >
+              <ChevronLeft className="mr-2 h-4 w-4" />
+              Go Back
+            </Button>
+
+            <Button className="w-32" asChild>
+              <Link href="/">Home</Link>
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

apps/marketing/src/app/robots.ts

@@ -4,11 +4,11 @@ import { getBaseUrl } from '@documenso/lib/universal/get-base-url';
 
 export default function robots(): MetadataRoute.Robots {
   return {
-    rules: {
-      userAgent: '*',
-      allow: '/*',
-      disallow: ['/_next/*'],
-    },
+    rules: [
+      {
+        userAgent: '*',
+      },
+    ],
     sitemap: `${getBaseUrl()}/sitemap.xml`,
   };
 }

apps/marketing/src/pages/api/claim-plan/index.ts

@@ -43,7 +43,7 @@ export default async function handler(
 
     if (user && user.Subscription.length > 0) {
       return res.status(200).json({
-        redirectUrl: `${process.env.NEXT_PUBLIC_APP_URL}/login`,
+        redirectUrl: `${process.env.NEXT_PUBLIC_WEBAPP_URL}/login`,
       });
     }
 
@@ -103,8 +103,8 @@ export default async function handler(
       mode: 'subscription',
       metadata,
       allow_promotion_codes: true,
-      success_url: `${process.env.NEXT_PUBLIC_SITE_URL}/claimed?sessionId={CHECKOUT_SESSION_ID}`,
-      cancel_url: `${process.env.NEXT_PUBLIC_SITE_URL}/pricing?email=${encodeURIComponent(
+      success_url: `${process.env.NEXT_PUBLIC_MARKETING_URL}/claimed?sessionId={CHECKOUT_SESSION_ID}`,
+      cancel_url: `${process.env.NEXT_PUBLIC_MARKETING_URL}/pricing?email=${encodeURIComponent(
         email,
       )}&name=${encodeURIComponent(name)}&planId=${planId}&cancelled=true`,
     });

apps/marketing/src/pages/api/stripe/webhook/index.ts

@@ -8,8 +8,11 @@ import { insertImageInPDF } from '@documenso/lib/server-only/pdf/insert-image-in
 import { insertTextInPDF } from '@documenso/lib/server-only/pdf/insert-text-in-pdf';
 import { redis } from '@documenso/lib/server-only/redis';
 import { Stripe, stripe } from '@documenso/lib/server-only/stripe';
+import { getFile } from '@documenso/lib/universal/upload/get-file';
+import { updateFile } from '@documenso/lib/universal/upload/update-file';
 import { prisma } from '@documenso/prisma';
 import {
+  DocumentDataType,
   DocumentStatus,
   FieldType,
   ReadStatus,
@@ -85,16 +88,34 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
 
       const now = new Date();
 
+      const bytes64 = readFileSync('./public/documenso-supporter-pledge.pdf').toString('base64');
+
+      const { id: documentDataId } = await prisma.documentData.create({
+        data: {
+          type: DocumentDataType.BYTES_64,
+          data: bytes64,
+          initialData: bytes64,
+        },
+      });
+
       const document = await prisma.document.create({
         data: {
           title: 'Documenso Supporter Pledge.pdf',
           status: DocumentStatus.COMPLETED,
           userId: user.id,
-          document: readFileSync('./public/documenso-supporter-pledge.pdf').toString('base64'),
-          created: now,
+          documentDataId,
+        },
+        include: {
+          documentData: true,
         },
       });
 
+      const { documentData } = document;
+
+      if (!documentData) {
+        throw new Error(`Document ${document.id} has no document data`);
+      }
+
       const recipient = await prisma.recipient.create({
         data: {
           name: user.name ?? '',
@@ -121,17 +142,21 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
         },
       });
 
+      let pdfData = await getFile(documentData).then((data) =>
+        Buffer.from(data).toString('base64'),
+      );
+
       if (signatureDataUrl) {
-        document.document = await insertImageInPDF(
-          document.document,
+        pdfData = await insertImageInPDF(
+          pdfData,
           signatureDataUrl,
           Number(field.positionX),
           Number(field.positionY),
           field.page,
         );
       } else {
-        document.document = await insertTextInPDF(
-          document.document,
+        pdfData = await insertTextInPDF(
+          pdfData,
           signatureText ?? '',
           Number(field.positionX),
           Number(field.positionY),
@@ -139,6 +164,12 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
         );
       }
 
+      const { data: newData } = await updateFile({
+        type: documentData.type,
+        oldData: documentData.initialData,
+        newData: Buffer.from(pdfData, 'base64').toString('binary'),
+      });
+
       await Promise.all([
         prisma.signature.create({
           data: {
@@ -148,12 +179,12 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
             typedSignature: signatureDataUrl ? '' : signatureText,
           },
         }),
-        prisma.document.update({
+        prisma.documentData.update({
           where: {
-            id: document.id,
+            id: documentData.id,
           },
           data: {
-            document: document.document,
+            data: newData,
           },
         }),
       ]);

apps/web/next.config.js

@@ -10,6 +10,7 @@ const { parsed: env } = require('dotenv').config({
 const config = {
   experimental: {
     serverActions: true,
+    serverActionsBodySizeLimit: '50mb',
   },
   reactStrictMode: true,
   transpilePackages: [
@@ -20,7 +21,6 @@ const config = {
     '@documenso/email',
   ],
   env: {
-    ...env,
     APP_VERSION: version,
   },
   modularizeImports: {

apps/web/package.json

@@ -8,6 +8,7 @@
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
+    "clean": "rimraf .next && rimraf node_modules",
     "copy:pdfjs": "node ../../scripts/copy-pdfjs.cjs"
   },
   "dependencies": {
@@ -21,11 +22,10 @@
     "@tanstack/react-query": "^4.29.5",
     "formidable": "^2.1.1",
     "framer-motion": "^10.12.8",
-    "lucide-react": "^0.214.0",
+    "lucide-react": "^0.279.0",
     "luxon": "^3.4.0",
     "micro": "^10.0.1",
-    "nanoid": "^4.0.2",
-    "next": "13.4.12",
+    "next": "13.4.19",
     "next-auth": "4.22.3",
     "next-plausible": "^3.10.1",
     "next-themes": "^0.2.1",

apps/web/process-env.d.ts

@@ -1,6 +1,7 @@
 declare namespace NodeJS {
   export interface ProcessEnv {
-    NEXT_PUBLIC_SITE_URL?: string;
+    NEXT_PUBLIC_WEBAPP_URL?: string;
+    NEXT_PUBLIC_MARKETING_URL?: string;
 
     NEXT_PRIVATE_DATABASE_URL: string;
 

apps/web/public/next.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>

apps/web/public/vercel.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 283 64"><path fill="black" d="M141 16c-11 0-19 7-19 18s9 18 20 18c7 0 13-3 16-7l-7-5c-2 3-6 4-9 4-5 0-9-3-10-7h28v-3c0-11-8-18-19-18zm-9 15c1-4 4-7 9-7s8 3 9 7h-18zm117-15c-11 0-19 7-19 18s9 18 20 18c6 0 12-3 16-7l-8-5c-2 3-5 4-8 4-5 0-9-3-11-7h28l1-3c0-11-8-18-19-18zm-10 15c2-4 5-7 10-7s8 3 9 7h-19zm-39 3c0 6 4 10 10 10 4 0 7-2 9-5l8 5c-3 5-9 8-17 8-11 0-19-7-19-18s8-18 19-18c8 0 14 3 17 8l-8 5c-2-3-5-5-9-5-6 0-10 4-10 10zm83-29v46h-9V5h9zM37 0l37 64H0L37 0zm92 5-27 48L74 5h10l18 30 17-30h10zm59 12v10l-3-1c-6 0-10 4-10 10v15h-9V17h9v9c0-5 6-9 13-9z"/></svg>

apps/web/src/api/document/create/fetcher.ts

@@ -1,34 +0,0 @@
-import { useMutation } from '@tanstack/react-query';
-
-import { TCreateDocumentRequestSchema, ZCreateDocumentResponseSchema } from './types';
-
-export const useCreateDocument = () => {
-  return useMutation(async ({ file }: TCreateDocumentRequestSchema) => {
-    const formData = new FormData();
-
-    formData.set('file', file);
-
-    const response = await fetch('/api/document/create', {
-      method: 'POST',
-      body: formData,
-    });
-
-    const body = await response.json();
-
-    if (response.status !== 200) {
-      throw new Error('Failed to create document');
-    }
-
-    const safeBody = ZCreateDocumentResponseSchema.safeParse(body);
-
-    if (!safeBody.success) {
-      throw new Error('Failed to create document');
-    }
-
-    if ('error' in safeBody.data) {
-      throw new Error(safeBody.data.error);
-    }
-
-    return safeBody.data;
-  });
-};

apps/web/src/api/document/create/types.ts

@@ -1,19 +0,0 @@
-import { z } from 'zod';
-
-export const ZCreateDocumentRequestSchema = z.object({
-  file: z.instanceof(File),
-});
-
-export type TCreateDocumentRequestSchema = z.infer<typeof ZCreateDocumentRequestSchema>;
-
-export const ZCreateDocumentResponseSchema = z
-  .object({
-    id: z.number(),
-  })
-  .or(
-    z.object({
-      error: z.string(),
-    }),
-  );
-
-export type TCreateDocumentResponseSchema = z.infer<typeof ZCreateDocumentResponseSchema>;

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

@@ -4,7 +4,8 @@ import { useState } from 'react';
 
 import { useRouter } from 'next/navigation';
 
-import { Document, Field, Recipient, User } from '@documenso/prisma/client';
+import { Field, Recipient, User } from '@documenso/prisma/client';
+import { DocumentWithData } from '@documenso/prisma/types/document-with-data';
 import { cn } from '@documenso/ui/lib/utils';
 import { Card, CardContent } from '@documenso/ui/primitives/card';
 import { AddFieldsFormPartial } from '@documenso/ui/primitives/document-flow/add-fields';
@@ -28,9 +29,10 @@ import { completeDocument } from '~/components/forms/edit-document/add-subject.a
 export type EditDocumentFormProps = {
   className?: string;
   user: User;
-  document: Document;
+  document: DocumentWithData;
   recipients: Recipient[];
   fields: Field[];
+  dataUrl: string;
 };
 
 type EditDocumentStep = 'signers' | 'fields' | 'subject';
@@ -41,14 +43,13 @@ export const EditDocumentForm = ({
   recipients,
   fields,
   user: _user,
+  dataUrl,
 }: EditDocumentFormProps) => {
   const { toast } = useToast();
   const router = useRouter();
 
   const [step, setStep] = useState<EditDocumentStep>('signers');
 
-  const documentUrl = `data:application/pdf;base64,${document.document}`;
-
   const documentFlow: Record<EditDocumentStep, DocumentFlowStep> = {
     signers: {
       title: 'Add Signers',
@@ -151,11 +152,11 @@ export const EditDocumentForm = ({
   return (
     <div className={cn('grid w-full grid-cols-12 gap-8', className)}>
       <Card
-        className="col-span-12 rounded-xl before:rounded-xl lg:col-span-6 xl:col-span-7"
+        className="relative col-span-12 rounded-xl before:rounded-xl lg:col-span-6 xl:col-span-7"
         gradient
       >
         <CardContent className="p-2">
-          <LazyPDFViewer document={documentUrl} />
+          <LazyPDFViewer document={dataUrl} />
         </CardContent>
       </Card>
 

apps/web/src/app/(dashboard)/documents/[id]/loadable-pdf-card.tsx

@@ -1,20 +0,0 @@
-'use client';
-
-import { Card, CardContent } from '@documenso/ui/primitives/card';
-import { LazyPDFViewer } from '@documenso/ui/primitives/lazy-pdf-viewer';
-import { PDFViewerProps } from '@documenso/ui/primitives/pdf-viewer';
-
-export type LoadablePDFCard = PDFViewerProps & {
-  className?: string;
-  pdfClassName?: string;
-};
-
-export const LoadablePDFCard = ({ className, pdfClassName, ...props }: LoadablePDFCard) => {
-  return (
-    <Card className={className} gradient {...props}>
-      <CardContent className="p-2">
-        <LazyPDFViewer className={pdfClassName} {...props} />
-      </CardContent>
-    </Card>
-  );
-};

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

@@ -7,6 +7,7 @@ import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-
 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 { getFile } from '@documenso/lib/universal/upload/get-file';
 import { DocumentStatus as InternalDocumentStatus } from '@documenso/prisma/client';
 import { LazyPDFViewer } from '@documenso/ui/primitives/lazy-pdf-viewer';
 
@@ -36,10 +37,16 @@ export default async function DocumentPage({ params }: DocumentPageProps) {
     userId: session.id,
   }).catch(() => null);
 
-  if (!document) {
+  if (!document || !document.documentData) {
     redirect('/documents');
   }
 
+  const { documentData } = document;
+
+  const documentDataUrl = await getFile(documentData)
+    .then((buffer) => Buffer.from(buffer).toString('base64'))
+    .then((data) => `data:application/pdf;base64,${data}`);
+
   const [recipients, fields] = await Promise.all([
     await getRecipientsForDocument({
       documentId,
@@ -86,12 +93,13 @@ export default async function DocumentPage({ params }: DocumentPageProps) {
           user={session}
           recipients={recipients}
           fields={fields}
+          dataUrl={documentDataUrl}
         />
       )}
 
       {document.status === InternalDocumentStatus.COMPLETED && (
         <div className="mx-auto mt-12 max-w-2xl">
-          <LazyPDFViewer document={`data:application/pdf;base64,${document.document}`} />
+          <LazyPDFViewer document={documentDataUrl} />
         </div>
       )}
     </div>

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

@@ -7,7 +7,11 @@ import { useSession } from 'next-auth/react';
 import { match } from 'ts-pattern';
 
 import { Document, DocumentStatus, Recipient, SigningStatus, User } from '@documenso/prisma/client';
+import { trpc } from '@documenso/trpc/react';
 import { Button } from '@documenso/ui/primitives/button';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+import { useCopyToClipboard } from '~/hooks/use-copy-to-clipboard';
 
 export type DataTableActionButtonProps = {
   row: Document & {
@@ -18,11 +22,16 @@ export type DataTableActionButtonProps = {
 
 export const DataTableActionButton = ({ row }: DataTableActionButtonProps) => {
   const { data: session } = useSession();
+  const { toast } = useToast();
+  const [, copyToClipboard] = useCopyToClipboard();
 
   if (!session) {
     return null;
   }
 
+  const { mutateAsync: createOrGetShareLink, isLoading: isCreatingShareLink } =
+    trpc.shareLink.createOrGetShareLink.useMutation();
+
   const recipient = row.Recipient.find((recipient) => recipient.email === session.user.email);
 
   const isOwner = row.User.id === session.user.id;
@@ -32,6 +41,20 @@ export const DataTableActionButton = ({ row }: DataTableActionButtonProps) => {
   const isComplete = row.status === DocumentStatus.COMPLETED;
   const isSigned = recipient?.signingStatus === SigningStatus.SIGNED;
 
+  const onShareClick = async () => {
+    const { slug } = await createOrGetShareLink({
+      token: recipient?.token,
+      documentId: row.id,
+    });
+
+    await copyToClipboard(`${window.location.origin}/share/${slug}`).catch(() => null);
+
+    toast({
+      title: 'Copied to clipboard',
+      description: 'The sharing link has been copied to your clipboard.',
+    });
+  };
+
   return match({
     isOwner,
     isRecipient,
@@ -57,8 +80,8 @@ export const DataTableActionButton = ({ row }: DataTableActionButtonProps) => {
       </Button>
     ))
     .otherwise(() => (
-      <Button className="w-24" disabled>
-        <Share className="-ml-1 mr-2 h-4 w-4" />
+      <Button className="w-24" loading={isCreatingShareLink} onClick={onShareClick}>
+        {!isCreatingShareLink && <Share className="-ml-1 mr-2 h-4 w-4" />}
         Share
       </Button>
     ));

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

@@ -7,6 +7,7 @@ import {
   Download,
   Edit,
   History,
+  Loader,
   MoreHorizontal,
   Pencil,
   Share,
@@ -15,7 +16,11 @@ import {
 } from 'lucide-react';
 import { useSession } from 'next-auth/react';
 
+import { getFile } from '@documenso/lib/universal/upload/get-file';
 import { Document, DocumentStatus, Recipient, User } from '@documenso/prisma/client';
+import { DocumentWithData } from '@documenso/prisma/types/document-with-data';
+import { trpc as trpcClient } from '@documenso/trpc/client';
+import { trpc as trpcReact } from '@documenso/trpc/react';
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -23,6 +28,9 @@ import {
   DropdownMenuLabel,
   DropdownMenuTrigger,
 } from '@documenso/ui/primitives/dropdown-menu';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+import { useCopyToClipboard } from '~/hooks/use-copy-to-clipboard';
 
 export type DataTableActionDropdownProps = {
   row: Document & {
@@ -33,11 +41,16 @@ export type DataTableActionDropdownProps = {
 
 export const DataTableActionDropdown = ({ row }: DataTableActionDropdownProps) => {
   const { data: session } = useSession();
+  const { toast } = useToast();
+  const [, copyToClipboard] = useCopyToClipboard();
 
   if (!session) {
     return null;
   }
 
+  const { mutateAsync: createOrGetShareLink, isLoading: isCreatingShareLink } =
+    trpcReact.shareLink.createOrGetShareLink.useMutation();
+
   const recipient = row.Recipient.find((recipient) => recipient.email === session.user.email);
 
   const isOwner = row.User.id === session.user.id;
@@ -47,17 +60,40 @@ export const DataTableActionDropdown = ({ row }: DataTableActionDropdownProps) =
   const isComplete = row.status === DocumentStatus.COMPLETED;
   // const isSigned = recipient?.signingStatus === SigningStatus.SIGNED;
 
-  const onDownloadClick = () => {
-    let decodedDocument = row.document;
+  const onShareClick = async () => {
+    const { slug } = await createOrGetShareLink({
+      token: recipient?.token,
+      documentId: row.id,
+    });
 
-    try {
-      decodedDocument = atob(decodedDocument);
-    } catch (err) {
-      // We're just going to ignore this error and try to download the document
-      console.error(err);
+    await copyToClipboard(`${window.location.origin}/share/${slug}`).catch(() => null);
+
+    toast({
+      title: 'Copied to clipboard',
+      description: 'The sharing link has been copied to your clipboard.',
+    });
+  };
+
+  const onDownloadClick = async () => {
+    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,
+      });
     }
 
-    const documentBytes = Uint8Array.from(decodedDocument.split('').map((c) => c.charCodeAt(0)));
+    const documentData = document?.documentData;
+
+    if (!documentData) {
+      return;
+    }
+
+    const documentBytes = await getFile(documentData);
 
     const blob = new Blob([documentBytes], {
       type: 'application/pdf',
@@ -123,8 +159,12 @@ export const DataTableActionDropdown = ({ row }: DataTableActionDropdownProps) =
           Resend
         </DropdownMenuItem>
 
-        <DropdownMenuItem disabled>
-          <Share className="mr-2 h-4 w-4" />
+        <DropdownMenuItem onClick={onShareClick}>
+          {isCreatingShareLink ? (
+            <Loader className="mr-2 h-4 w-4" />
+          ) : (
+            <Share className="mr-2 h-4 w-4" />
+          )}
           Share
         </DropdownMenuItem>
       </DropdownMenuContent>

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

@@ -53,8 +53,8 @@ export const DocumentsDataTable = ({ results }: DocumentsDataTableProps) => {
         columns={[
           {
             header: 'Created',
-            accessorKey: 'created',
-            cell: ({ row }) => <LocaleDate date={row.getValue('created')} />,
+            accessorKey: 'createdAt',
+            cell: ({ row }) => <LocaleDate date={row.original.createdAt} />,
           },
           {
             header: 'Title',

apps/web/src/app/(dashboard)/documents/empty-state.tsx

@@ -0,0 +1,50 @@
+import { Bird, CheckCircle2 } from 'lucide-react';
+import { match } from 'ts-pattern';
+
+import { ExtendedDocumentStatus } from '@documenso/prisma/types/extended-document-status';
+
+export type EmptyDocumentProps = { status: ExtendedDocumentStatus };
+
+export const EmptyDocumentState = ({ status }: EmptyDocumentProps) => {
+  const {
+    title,
+    message,
+    icon: Icon,
+  } = match(status)
+    .with(ExtendedDocumentStatus.COMPLETED, () => ({
+      title: 'Nothing to do',
+      message:
+        'There are no completed documents yet. Documents that you have created or received that become completed will appear here later.',
+      icon: CheckCircle2,
+    }))
+    .with(ExtendedDocumentStatus.DRAFT, () => ({
+      title: 'No active drafts',
+      message:
+        'There are no active drafts at then current moment. You can upload a document to start drafting.',
+      icon: CheckCircle2,
+    }))
+    .with(ExtendedDocumentStatus.ALL, () => ({
+      title: "We're all empty",
+      message:
+        'You have not yet created or received any documents. To create a document please upload one.',
+      icon: Bird,
+    }))
+    .otherwise(() => ({
+      title: 'Nothing to do',
+      message:
+        'All documents are currently actioned. Any new documents are sent or recieved they will start to appear here.',
+      icon: CheckCircle2,
+    }));
+
+  return (
+    <div className="text-muted-foreground/60 flex h-60 flex-col items-center justify-center gap-y-4">
+      <Icon className="h-12 w-12" strokeWidth={1.5} />
+
+      <div className="text-center">
+        <h3 className="text-lg font-semibold">{title}</h3>
+
+        <p className="mt-2 max-w-[60ch]">{message}</p>
+      </div>
+    </div>
+  );
+};

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

@@ -12,6 +12,7 @@ import { PeriodSelectorValue } from '~/components/(dashboard)/period-selector/ty
 import { DocumentStatus } from '~/components/formatter/document-status';
 
 import { DocumentsDataTable } from './data-table';
+import { EmptyDocumentState } from './empty-state';
 import { UploadDocument } from './upload-document';
 
 export type DocumentsPageProps = {
@@ -39,7 +40,7 @@ export default async function DocumentsPage({ searchParams = {} }: DocumentsPage
     userId: user.id,
     status,
     orderBy: {
-      column: 'created',
+      column: 'createdAt',
       direction: 'desc',
     },
     page,
@@ -96,7 +97,8 @@ export default async function DocumentsPage({ searchParams = {} }: DocumentsPage
       </div>
 
       <div className="mt-8">
-        <DocumentsDataTable results={results} />
+        {results.count > 0 && <DocumentsDataTable results={results} />}
+        {results.count === 0 && <EmptyDocumentState status={status} />}
       </div>
     </div>
   );

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

@@ -1,29 +1,45 @@
 'use client';
 
+import { useState } from 'react';
+
 import { useRouter } from 'next/navigation';
 
 import { Loader } from 'lucide-react';
 
+import { createDocumentData } from '@documenso/lib/server-only/document-data/create-document-data';
+import { putFile } from '@documenso/lib/universal/upload/put-file';
+import { trpc } from '@documenso/trpc/react';
 import { cn } from '@documenso/ui/lib/utils';
 import { DocumentDropzone } from '@documenso/ui/primitives/document-dropzone';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
-import { useCreateDocument } from '~/api/document/create/fetcher';
-
 export type UploadDocumentProps = {
   className?: string;
 };
 
 export const UploadDocument = ({ className }: UploadDocumentProps) => {
-  const { toast } = useToast();
   const router = useRouter();
 
-  const { isLoading, mutateAsync: createDocument } = useCreateDocument();
+  const { toast } = useToast();
+
+  const [isLoading, setIsLoading] = useState(false);
+
+  const { mutateAsync: createDocument } = trpc.document.createDocument.useMutation();
 
   const onFileDrop = async (file: File) => {
     try {
+      setIsLoading(true);
+
+      const { type, data } = await putFile(file);
+
+      const { id: documentDataId } = await createDocumentData({
+        type,
+        data,
+      });
+
       const { id } = await createDocument({
-        file: file,
+        title: file.name,
+        documentDataId,
       });
 
       toast({
@@ -41,6 +57,8 @@ export const UploadDocument = ({ className }: UploadDocumentProps) => {
         description: 'An error occurred while uploading your document.',
         variant: 'destructive',
       });
+    } finally {
+      setIsLoading(false);
     }
   };
 
@@ -50,7 +68,7 @@ export const UploadDocument = ({ className }: UploadDocumentProps) => {
 
       {isLoading && (
         <div className="absolute inset-0 flex items-center justify-center bg-white/50">
-          <Loader className="h-12 w-12 animate-spin text-slate-500" />
+          <Loader className="text-muted-foreground h-12 w-12 animate-spin" />
         </div>
       )}
     </div>

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

@@ -21,19 +21,21 @@ export default async function BillingSettingsPage() {
     redirect('/settings/profile');
   }
 
-  let subscription = await getSubscriptionByUserId({ userId: user.id });
+  const subscription = await getSubscriptionByUserId({ userId: user.id }).then(async (sub) => {
+    if (sub) {
+      return sub;
+    }
 
-  // If we don't have a customer record, create one as well as an empty subscription.
-  if (!subscription?.customerId) {
-    subscription = await createCustomer({ user });
-  }
+    // If we don't have a customer record, create one as well as an empty subscription.
+    return createCustomer({ user });
+  });
 
   let billingPortalUrl = '';
 
-  if (subscription?.customerId) {
+  if (subscription.customerId) {
     billingPortalUrl = await getPortalSession({
       customerId: subscription.customerId,
-      returnUrl: `${process.env.NEXT_PUBLIC_SITE_URL}/settings/billing`,
+      returnUrl: `${process.env.NEXT_PUBLIC_WEBAPP_URL}/settings/billing`,
     });
   }
 
@@ -41,7 +43,7 @@ export default async function BillingSettingsPage() {
     <div>
       <h3 className="text-lg font-medium">Billing</h3>
 
-      <p className="mt-2 text-sm text-slate-500">
+      <p className="text-muted-foreground mt-2 text-sm">
         Your subscription is{' '}
         {subscription.status !== SubscriptionStatus.INACTIVE ? 'active' : 'inactive'}.
         {subscription?.periodEnd && (
@@ -65,7 +67,7 @@ export default async function BillingSettingsPage() {
       )}
 
       {!billingPortalUrl && (
-        <p className="max-w-[60ch] text-base text-slate-500">
+        <p className="text-muted-foreground max-w-[60ch] text-base">
           You do not currently have a customer record, this should not happen. Please contact
           support for assistance.
         </p>

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

@@ -9,7 +9,7 @@ export default async function PasswordSettingsPage() {
     <div>
       <h3 className="text-lg font-medium">Password</h3>
 
-      <p className="mt-2 text-sm text-slate-500">Here you can update your password.</p>
+      <p className="text-muted-foreground mt-2 text-sm">Here you can update your password.</p>
 
       <hr className="my-4" />
 

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

@@ -9,7 +9,7 @@ export default async function ProfileSettingsPage() {
     <div>
       <h3 className="text-lg font-medium">Profile</h3>
 
-      <p className="mt-2 text-sm text-slate-500">Here you can edit your personal details.</p>
+      <p className="text-muted-foreground mt-2 text-sm">Here you can edit your personal details.</p>
 
       <hr className="my-4" />
 

apps/web/src/app/(share)/share/[slug]/opengraph-image.tsx

@@ -0,0 +1,153 @@
+import { ImageResponse } from 'next/server';
+
+import { P, match } from 'ts-pattern';
+
+import { getRecipientOrSenderByShareLinkSlug } from '@documenso/lib/server-only/share/get-recipient-or-sender-by-share-link-slug';
+
+import { Logo } from '~/components/branding/logo';
+import { getAssetBuffer } from '~/helpers/get-asset-buffer';
+
+const CARD_OFFSET_TOP = 152;
+const CARD_OFFSET_LEFT = 350;
+const CARD_WIDTH = 500;
+const CARD_HEIGHT = 250;
+
+const size = {
+  width: 1200,
+  height: 630,
+};
+
+type SharePageOpenGraphImageProps = {
+  params: { slug: string };
+};
+
+export default async function Image({ params: { slug } }: SharePageOpenGraphImageProps) {
+  const [interSemiBold, interRegular, caveatRegular, shareFrameImage] = await Promise.all([
+    getAssetBuffer('/fonts/inter-semibold.ttf'),
+    getAssetBuffer('/fonts/inter-regular.ttf'),
+    getAssetBuffer('/fonts/caveat-regular.ttf'),
+    getAssetBuffer('/static/og-share-frame.png'),
+  ]);
+
+  const recipientOrSender = await getRecipientOrSenderByShareLinkSlug({ slug }).catch(() => null);
+
+  if (!recipientOrSender) {
+    return null;
+  }
+
+  const isRecipient = 'Signature' in recipientOrSender;
+
+  const signatureImage = match(recipientOrSender)
+    .with({ Signature: P.array(P._) }, (recipient) => {
+      return recipient.Signature?.[0]?.signatureImageAsBase64 || null;
+    })
+    .otherwise((sender) => {
+      return sender.signature || null;
+    });
+
+  const signatureName = match(recipientOrSender)
+    .with({ Signature: P.array(P._) }, (recipient) => {
+      return recipient.name || recipient.email;
+    })
+    .otherwise((sender) => {
+      return sender.name || sender.email;
+    });
+
+  return new ImageResponse(
+    (
+      <div tw="relative flex h-full w-full">
+        {/* @ts-expect-error Lack of typing from ImageResponse */}
+        <img src={shareFrameImage} alt="og-share-frame" tw="absolute inset-0 w-full h-full" />
+
+        <div tw="absolute top-20 flex w-full items-center justify-center">
+          {/* @ts-expect-error Lack of typing from ImageResponse */}
+          <Logo tw="h-8 w-60" />
+        </div>
+
+        {signatureImage ? (
+          <div
+            tw="absolute py-6 px-12 flex items-center justify-center text-center"
+            style={{
+              top: `${CARD_OFFSET_TOP}px`,
+              left: `${CARD_OFFSET_LEFT}px`,
+              width: `${CARD_WIDTH}px`,
+              height: `${CARD_HEIGHT}px`,
+            }}
+          >
+            <img src={signatureImage} alt="signature" tw="opacity-60 h-full max-w-[100%]" />
+          </div>
+        ) : (
+          <p
+            tw="absolute py-6 px-12 -mt-2 flex items-center justify-center text-center text-slate-500"
+            style={{
+              fontFamily: 'Caveat',
+              fontSize: `${Math.max(
+                Math.min((CARD_WIDTH * 1.5) / signatureName.length, 80),
+                36,
+              )}px`,
+              top: `${CARD_OFFSET_TOP}px`,
+              left: `${CARD_OFFSET_LEFT}px`,
+              width: `${CARD_WIDTH}px`,
+              height: `${CARD_HEIGHT}px`,
+            }}
+          >
+            {signatureName}
+          </p>
+        )}
+
+        {/* <div
+          tw="absolute flex items-center justify-center text-slate-500"
+          style={{
+            top: `${CARD_OFFSET_TOP + CARD_HEIGHT - 45}px`,
+            left: `${CARD_OFFSET_LEFT}`,
+            width: `${CARD_WIDTH}px`,
+            fontSize: '30px',
+          }}
+        >
+          {signatureName}
+        </div> */}
+
+        <div
+          tw="absolute flex flex-col items-center justify-center pt-12 w-full"
+          style={{
+            top: `${CARD_OFFSET_TOP + CARD_HEIGHT}px`,
+          }}
+        >
+          <h2
+            tw="text-3xl text-slate-500"
+            style={{
+              fontFamily: 'Inter',
+              fontWeight: 600,
+            }}
+          >
+            {isRecipient
+              ? 'I just signed with Documenso and you can too!'
+              : 'I just sent a document with Documenso and you can too!'}
+          </h2>
+        </div>
+      </div>
+    ),
+    {
+      ...size,
+      fonts: [
+        {
+          name: 'Caveat',
+          data: caveatRegular,
+          style: 'italic',
+        },
+        {
+          name: 'Inter',
+          data: interRegular,
+          style: 'normal',
+          weight: 400,
+        },
+        {
+          name: 'Inter',
+          data: interSemiBold,
+          style: 'normal',
+          weight: 600,
+        },
+      ],
+    },
+  );
+}

apps/web/src/app/(share)/share/[slug]/page.tsx

@@ -0,0 +1,11 @@
+import { Metadata } from 'next';
+
+import { Redirect } from './redirect';
+
+export const metadata: Metadata = {
+  title: 'Documenso - Share',
+};
+
+export default function SharePage() {
+  return <Redirect />;
+}

apps/web/src/app/(share)/share/[slug]/redirect.tsx

@@ -0,0 +1,11 @@
+'use client';
+
+import { useEffect } from 'react';
+
+export const Redirect = () => {
+  useEffect(() => {
+    window.location.href = process.env.NEXT_PUBLIC_MARKETING_URL ?? 'http://localhost:3001';
+  }, []);
+
+  return null;
+};

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

@@ -1,55 +1,64 @@
 'use client';
 
-import { HTMLAttributes } from 'react';
+import { HTMLAttributes, useState } from 'react';
 
 import { Download } from 'lucide-react';
 
+import { getFile } from '@documenso/lib/universal/upload/get-file';
+import { DocumentData } from '@documenso/prisma/client';
 import { Button } from '@documenso/ui/primitives/button';
+import { useToast } from '@documenso/ui/primitives/use-toast';
 
 export type DownloadButtonProps = HTMLAttributes<HTMLButtonElement> & {
   disabled?: boolean;
   fileName?: string;
-  document?: string;
+  documentData?: DocumentData;
 };
 
 export const DownloadButton = ({
   className,
   fileName,
-  document,
+  documentData,
   disabled,
   ...props
 }: DownloadButtonProps) => {
-  /**
-   * Convert the document from base64 to a blob and download it.
-   */
-  const onDownloadClick = () => {
-    if (!document) {
-      return;
-    }
+  const { toast } = useToast();
 
-    let decodedDocument = document;
+  const [isLoading, setIsLoading] = useState(false);
 
+  const onDownloadClick = async () => {
     try {
-      decodedDocument = atob(document);
+      setIsLoading(true);
+
+      if (!documentData) {
+        return;
+      }
+
+      const bytes = await getFile(documentData);
+
+      const blob = new Blob([bytes], {
+        type: 'application/pdf',
+      });
+
+      const link = window.document.createElement('a');
+
+      link.href = window.URL.createObjectURL(blob);
+      link.download = fileName || 'document.pdf';
+
+      link.click();
+
+      window.URL.revokeObjectURL(link.href);
     } catch (err) {
-      // We're just going to ignore this error and try to download the document
       console.error(err);
+
+      toast({
+        title: 'Error',
+        description: 'An error occurred while downloading your document.',
+        variant: 'destructive',
+      });
+    } finally {
+      setIsLoading(false);
     }
-
-    const documentBytes = Uint8Array.from(decodedDocument.split('').map((c) => c.charCodeAt(0)));
-
-    const blob = new Blob([documentBytes], {
-      type: 'application/pdf',
-    });
-
-    const link = window.document.createElement('a');
-
-    link.href = window.URL.createObjectURL(blob);
-    link.download = fileName || 'document.pdf';
-
-    link.click();
-
-    window.URL.revokeObjectURL(link.href);
   };
 
   return (
@@ -57,8 +66,9 @@ export const DownloadButton = ({
       type="button"
       variant="outline"
       className={className}
-      disabled={disabled || !document}
+      disabled={disabled || !documentData}
       onClick={onDownloadClick}
+      loading={isLoading}
       {...props}
     >
       <Download className="mr-2 h-5 w-5" />

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

@@ -1,16 +1,16 @@
 import Link from 'next/link';
 import { notFound } from 'next/navigation';
 
-import { CheckCircle2, Clock8, Share } from 'lucide-react';
+import { CheckCircle2, Clock8 } from 'lucide-react';
 import { match } from 'ts-pattern';
 
 import { getDocumentAndSenderByToken } from '@documenso/lib/server-only/document/get-document-by-token';
 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 { DocumentStatus, FieldType } from '@documenso/prisma/client';
-import { Button } from '@documenso/ui/primitives/button';
 
 import { DownloadButton } from './download-button';
+import { ShareButton } from './share-button';
 import { SigningCard } from './signing-card';
 
 export type CompletedSigningPageProps = {
@@ -30,15 +30,21 @@ export default async function CompletedSigningPage({
     token,
   }).catch(() => null);
 
-  if (!document) {
+  if (!document || !document.documentData) {
     return notFound();
   }
 
+  const { documentData } = document;
+
   const [fields, recipient] = await Promise.all([
     getFieldsForToken({ token }),
-    getRecipientByToken({ token }),
+    getRecipientByToken({ token }).catch(() => null),
   ]);
 
+  if (!recipient) {
+    return notFound();
+  }
+
   const recipientName =
     recipient.name ||
     fields.find((field) => field.type === FieldType.NAME)?.customText ||
@@ -82,16 +88,12 @@ export default async function CompletedSigningPage({
         ))}
 
       <div className="mt-8 flex w-full max-w-sm items-center justify-center gap-4">
-        {/* TODO: Hook this up */}
-        <Button variant="outline" className="flex-1">
-          <Share className="mr-2 h-5 w-5" />
-          Share
-        </Button>
+        <ShareButton documentId={document.id} token={recipient.token} />
 
         <DownloadButton
           className="flex-1"
           fileName={document.title}
-          document={document.status === DocumentStatus.COMPLETED ? document.document : undefined}
+          documentData={documentData}
           disabled={document.status !== DocumentStatus.COMPLETED}
         />
       </div>

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

@@ -0,0 +1,51 @@
+'use client';
+
+import { HTMLAttributes } from 'react';
+
+import { Share } from 'lucide-react';
+
+import { trpc } from '@documenso/trpc/react';
+import { Button } from '@documenso/ui/primitives/button';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+import { useCopyToClipboard } from '~/hooks/use-copy-to-clipboard';
+
+export type ShareButtonProps = HTMLAttributes<HTMLButtonElement> & {
+  token: string;
+  documentId: number;
+};
+
+export const ShareButton = ({ token, documentId }: ShareButtonProps) => {
+  const { toast } = useToast();
+  const [, copyToClipboard] = useCopyToClipboard();
+
+  const { mutateAsync: createOrGetShareLink, isLoading } =
+    trpc.shareLink.createOrGetShareLink.useMutation();
+
+  const onShareClick = async () => {
+    const { slug } = await createOrGetShareLink({
+      token: token,
+      documentId,
+    });
+
+    await copyToClipboard(`${window.location.origin}/share/${slug}`).catch(() => null);
+
+    toast({
+      title: 'Copied to clipboard',
+      description: 'The sharing link has been copied to your clipboard.',
+    });
+  };
+
+  return (
+    <Button
+      variant="outline"
+      className="flex-1"
+      disabled={!token || !documentId}
+      loading={isLoading}
+      onClick={onShareClick}
+    >
+      {!isLoading && <Share className="mr-2 h-5 w-5" />}
+      Share
+    </Button>
+  );
+};

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

@@ -8,6 +8,7 @@ import { getDocumentAndSenderByToken } from '@documenso/lib/server-only/document
 import { viewedDocument } from '@documenso/lib/server-only/document/viewed-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 { getFile } from '@documenso/lib/universal/upload/get-file';
 import { FieldType } from '@documenso/prisma/client';
 import { Card, CardContent } from '@documenso/ui/primitives/card';
 import { ElementVisible } from '@documenso/ui/primitives/element-visible';
@@ -36,17 +37,21 @@ export default async function SigningPage({ params: { token } }: SigningPageProp
       token,
     }).catch(() => null),
     getFieldsForToken({ token }),
-    getRecipientByToken({ token }),
-    viewedDocument({ token }),
+    getRecipientByToken({ token }).catch(() => null),
+    viewedDocument({ token }).catch(() => null),
   ]);
 
-  if (!document) {
+  if (!document || !document.documentData || !recipient) {
     return notFound();
   }
 
-  const user = await getServerComponentSession();
+  const { documentData } = document;
 
-  const documentUrl = `data:application/pdf;base64,${document.document}`;
+  const documentDataUrl = await getFile(documentData)
+    .then((buffer) => Buffer.from(buffer).toString('base64'))
+    .then((data) => `data:application/pdf;base64,${data}`);
+
+  const user = await getServerComponentSession();
 
   return (
     <SigningProvider email={recipient.email} fullName={recipient.name} signature={user?.signature}>
@@ -67,7 +72,7 @@ export default async function SigningPage({ params: { token } }: SigningPageProp
             gradient
           >
             <CardContent className="p-2">
-              <LazyPDFViewer document={documentUrl} />
+              <LazyPDFViewer document={documentDataUrl} />
             </CardContent>
           </Card>
 

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

@@ -0,0 +1,20 @@
+import Link from 'next/link';
+
+import { Button } from '@documenso/ui/primitives/button';
+
+export default function ForgotPasswordPage() {
+  return (
+    <div>
+      <h1 className="text-4xl font-semibold">Email sent!</h1>
+
+      <p className="text-muted-foreground mb-4 mt-2 text-sm">
+        A password reset email has been sent, if you have an account you should see it in your inbox
+        shortly.
+      </p>
+
+      <Button asChild>
+        <Link href="/signin">Return to sign in</Link>
+      </Button>
+    </div>
+  );
+}

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

@@ -0,0 +1,25 @@
+import Link from 'next/link';
+
+import { ForgotPasswordForm } from '~/components/forms/forgot-password';
+
+export default function ForgotPasswordPage() {
+  return (
+    <div>
+      <h1 className="text-4xl font-semibold">Forgotten your password?</h1>
+
+      <p className="text-muted-foreground mt-2 text-sm">
+        No worries, it happens! Enter your email and we'll email you a special link to reset your
+        password.
+      </p>
+
+      <ForgotPasswordForm className="mt-4" />
+
+      <p className="text-muted-foreground mt-6 text-center text-sm">
+        Remembered your password?{' '}
+        <Link href="/signin" className="text-primary duration-200 hover:opacity-70">
+          Sign In
+        </Link>
+      </p>
+    </div>
+  );
+}

apps/web/src/app/(unauthenticated)/layout.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+
+import Image from 'next/image';
+
+import backgroundPattern from '~/assets/background-pattern.png';
+
+type UnauthenticatedLayoutProps = {
+  children: React.ReactNode;
+};
+
+export default function UnauthenticatedLayout({ children }: UnauthenticatedLayoutProps) {
+  return (
+    <main className="bg-sand-100 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 flex w-full max-w-md items-center gap-x-24">
+        <div className="absolute -inset-96 -z-[1] flex items-center justify-center opacity-50">
+          <Image
+            src={backgroundPattern}
+            alt="background pattern"
+            className="dark:brightness-95 dark:invert dark:sepia"
+          />
+        </div>
+
+        <div className="w-full">{children}</div>
+      </div>
+    </main>
+  );
+}

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

@@ -0,0 +1,37 @@
+import Link from 'next/link';
+import { redirect } from 'next/navigation';
+
+import { getResetTokenValidity } from '@documenso/lib/server-only/user/get-reset-token-validity';
+
+import { ResetPasswordForm } from '~/components/forms/reset-password';
+
+type ResetPasswordPageProps = {
+  params: {
+    token: string;
+  };
+};
+
+export default async function ResetPasswordPage({ params: { token } }: ResetPasswordPageProps) {
+  const isValid = await getResetTokenValidity({ token });
+
+  if (!isValid) {
+    redirect('/reset-password');
+  }
+
+  return (
+    <div className="w-full">
+      <h1 className="text-4xl font-semibold">Reset Password</h1>
+
+      <p className="text-muted-foreground mt-2 text-sm">Please choose your new password </p>
+
+      <ResetPasswordForm token={token} className="mt-4" />
+
+      <p className="text-muted-foreground mt-6 text-center text-sm">
+        Don't have an account?{' '}
+        <Link href="/signup" className="text-primary duration-200 hover:opacity-70">
+          Sign up
+        </Link>
+      </p>
+    </div>
+  );
+}

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

@@ -0,0 +1,20 @@
+import Link from 'next/link';
+
+import { Button } from '@documenso/ui/primitives/button';
+
+export default function ResetPasswordPage() {
+  return (
+    <div>
+      <h1 className="text-4xl font-semibold">Unable to reset password</h1>
+
+      <p className="text-muted-foreground mt-2 text-sm">
+        The token you have used to reset your password is either expired or it never existed. If you
+        have still forgotten your password, please request a new reset link.
+      </p>
+
+      <Button className="mt-4" asChild>
+        <Link href="/signin">Return to sign in</Link>
+      </Button>
+    </div>
+  );
+}

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

@@ -1,43 +1,33 @@
-import Image from 'next/image';
 import Link from 'next/link';
 
-import backgroundPattern from '~/assets/background-pattern.png';
-import connections from '~/assets/card-sharing-figure.png';
 import { SignInForm } from '~/components/forms/signin';
 
 export default function SignInPage() {
   return (
-    <main className="bg-sand-100 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 flex max-w-4xl items-center gap-x-24">
-        <div className="absolute -inset-96 -z-[1] flex items-center justify-center opacity-50">
-          <Image
-            src={backgroundPattern}
-            alt="background pattern"
-            className="dark:brightness-95 dark:invert dark:sepia"
-          />
-        </div>
+    <div>
+      <h1 className="text-4xl font-semibold">Sign in to your account</h1>
 
-        <div className="max-w-md">
-          <h1 className="text-4xl font-semibold">Sign in to your account</h1>
+      <p className="text-muted-foreground/60 mt-2 text-sm">
+        Welcome back, we are lucky to have you.
+      </p>
 
-          <p className="text-muted-foreground/60 mt-2 text-sm">
-            Welcome back, we are lucky to have you.
-          </p>
+      <SignInForm className="mt-4" />
 
-          <SignInForm className="mt-4" />
+      <p className="text-muted-foreground mt-6 text-center text-sm">
+        Don't have an account?{' '}
+        <Link href="/signup" className="text-primary duration-200 hover:opacity-70">
+          Sign up
+        </Link>
+      </p>
 
-          <p className="text-muted-foreground mt-6 text-center text-sm">
-            Don't have an account?{' '}
-            <Link href="/signup" className="text-primary duration-200 hover:opacity-70">
-              Sign up
-            </Link>
-          </p>
-        </div>
-
-        <div className="hidden flex-1 lg:block">
-          <Image src={connections} alt="documenso connections" />
-        </div>
-      </div>
-    </main>
+      <p className="mt-2.5 text-center">
+        <Link
+          href="/forgot-password"
+          className="text-muted-foreground text-sm duration-200 hover:opacity-70"
+        >
+          Forgotten your password?
+        </Link>
+      </p>
+    </div>
   );
 }

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

@@ -1,44 +1,25 @@
-import Image from 'next/image';
 import Link from 'next/link';
 
-import backgroundPattern from '~/assets/background-pattern.png';
-import connections from '~/assets/connections.png';
 import { SignUpForm } from '~/components/forms/signup';
 
 export default function SignUpPage() {
   return (
-    <main className="bg-sand-100 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 flex max-w-4xl items-center gap-x-24">
-        <div className="absolute -inset-96 -z-[1] flex items-center justify-center opacity-50">
-          <Image
-            src={backgroundPattern}
-            alt="background pattern"
-            className="dark:brightness-95 dark:invert dark:sepia"
-          />
-        </div>
+    <div>
+      <h1 className="text-4xl font-semibold">Create a new account</h1>
 
-        <div className="max-w-md">
-          <h1 className="text-4xl font-semibold">Create a shiny, new Documenso Account ✨</h1>
+      <p className="text-muted-foreground/60 mt-2 text-sm">
+        Create your account and start using state-of-the-art document signing. Open and beautiful
+        signing is within your grasp.
+      </p>
 
-          <p className="text-muted-foreground/60 mt-2 text-sm">
-            Create your account and start using state-of-the-art document signing. Open and
-            beautiful signing is within your grasp.
-          </p>
+      <SignUpForm className="mt-4" />
 
-          <SignUpForm className="mt-4" />
-
-          <p className="text-muted-foreground mt-6 text-center text-sm">
-            Already have an account?{' '}
-            <Link href="/signin" className="text-primary duration-200 hover:opacity-70">
-              Sign in instead
-            </Link>
-          </p>
-        </div>
-
-        <div className="hidden flex-1 lg:block">
-          <Image src={connections} alt="documenso connections" />
-        </div>
-      </div>
-    </main>
+      <p className="text-muted-foreground mt-6 text-center text-sm">
+        Already have an account?{' '}
+        <Link href="/signin" className="text-primary duration-200 hover:opacity-70">
+          Sign in instead
+        </Link>
+      </p>
+    </div>
   );
 }

apps/web/src/app/layout.tsx

@@ -33,12 +33,12 @@ export const metadata = {
     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.',
     type: 'website',
-    images: [`${process.env.NEXT_PUBLIC_SITE_URL}/opengraph-image.jpg`],
+    images: [`${process.env.NEXT_PUBLIC_WEBAPP_URL}/opengraph-image.jpg`],
   },
   twitter: {
     site: '@documenso',
     card: 'summary_large_image',
-    images: [`${process.env.NEXT_PUBLIC_SITE_URL}/opengraph-image.jpg`],
+    images: [`${process.env.NEXT_PUBLIC_WEBAPP_URL}/opengraph-image.jpg`],
     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.',
   },

apps/web/src/app/not-found.tsx

@@ -0,0 +1,26 @@
+import Link from 'next/link';
+
+import { getServerComponentSession } from '@documenso/lib/next-auth/get-server-session';
+import { Button } from '@documenso/ui/primitives/button';
+
+import NotFoundPartial from '~/components/partials/not-found';
+
+export default async function NotFound() {
+  const session = await getServerComponentSession();
+
+  return (
+    <NotFoundPartial>
+      {session && (
+        <Button className="w-32" asChild>
+          <Link href="/documents">Documents</Link>
+        </Button>
+      )}
+
+      {!session && (
+        <Button className="w-32" asChild>
+          <Link href="/signin">Sign In</Link>
+        </Button>
+      )}
+    </NotFoundPartial>
+  );
+}

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

@@ -1,6 +1,6 @@
 'use client';
 
-import { HTMLAttributes } from 'react';
+import { HTMLAttributes, useEffect, useState } from 'react';
 
 import Link from 'next/link';
 
@@ -17,10 +17,23 @@ export type HeaderProps = HTMLAttributes<HTMLDivElement> & {
 };
 
 export const Header = ({ className, user, ...props }: HeaderProps) => {
+  const [scrollY, setScrollY] = useState(0);
+
+  useEffect(() => {
+    const onScroll = () => {
+      setScrollY(window.scrollY);
+    };
+
+    window.addEventListener('scroll', onScroll);
+
+    return () => window.removeEventListener('scroll', onScroll);
+  }, []);
+
   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 backdrop-blur',
+        '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',
+        scrollY > 5 && 'border-b-border',
         className,
       )}
       {...props}

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

@@ -10,6 +10,7 @@ import {
   User as LucideUser,
   Monitor,
   Moon,
+  Palette,
   Sun,
   UserCog,
 } from 'lucide-react';
@@ -26,7 +27,13 @@ import {
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuLabel,
+  DropdownMenuPortal,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
   DropdownMenuSeparator,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
   DropdownMenuTrigger,
 } from '@documenso/ui/primitives/dropdown-menu';
 
@@ -37,8 +44,8 @@ export type ProfileDropdownProps = {
 };
 
 export const ProfileDropdown = ({ user }: ProfileDropdownProps) => {
-  const { theme, setTheme } = useTheme();
   const { getFlag } = useFeatureFlags();
+  const { theme, setTheme } = useTheme();
   const isUserAdmin = isAdmin(user);
 
   const isBillingEnabled = getFlag('app_billing');
@@ -98,28 +105,30 @@ export const ProfileDropdown = ({ user }: ProfileDropdownProps) => {
 
         <DropdownMenuSeparator />
 
-        {theme === 'light' ? null : (
-          <DropdownMenuItem onClick={() => setTheme('light')}>
-            <Sun className="mr-2 h-4 w-4" />
-            Light Mode
-          </DropdownMenuItem>
-        )}
-        {theme === 'dark' ? null : (
-          <DropdownMenuItem onClick={() => setTheme('dark')}>
-            <Moon className="mr-2 h-4 w-4" />
-            Dark Mode
-          </DropdownMenuItem>
-        )}
-
-        {theme === 'system' ? null : (
-          <DropdownMenuItem onClick={() => setTheme('system')}>
-            <Monitor className="mr-2 h-4 w-4" />
-            System Theme
-          </DropdownMenuItem>
-        )}
-
+        <DropdownMenuSub>
+          <DropdownMenuSubTrigger>
+            <Palette className="mr-2 h-4 w-4" />
+            Themes
+          </DropdownMenuSubTrigger>
+          <DropdownMenuPortal>
+            <DropdownMenuSubContent>
+              <DropdownMenuRadioGroup value={theme} onValueChange={setTheme}>
+                <DropdownMenuRadioItem value="light">
+                  <Sun className="mr-2 h-4 w-4" /> Light
+                </DropdownMenuRadioItem>
+                <DropdownMenuRadioItem value="dark">
+                  <Moon className="mr-2 h-4 w-4" />
+                  Dark
+                </DropdownMenuRadioItem>
+                <DropdownMenuRadioItem value="system">
+                  <Monitor className="mr-2 h-4 w-4" />
+                  System
+                </DropdownMenuRadioItem>
+              </DropdownMenuRadioGroup>
+            </DropdownMenuSubContent>
+          </DropdownMenuPortal>
+        </DropdownMenuSub>
         <DropdownMenuSeparator />
-
         <DropdownMenuItem asChild>
           <Link href="https://github.com/documenso/documenso" className="cursor-pointer">
             <Github className="mr-2 h-4 w-4" />

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

@@ -44,7 +44,7 @@ export const PeriodSelector = () => {
 
   return (
     <Select defaultValue={period} onValueChange={onPeriodChange}>
-      <SelectTrigger className="max-w-[200px] text-slate-500">
+      <SelectTrigger className="text-muted-foreground max-w-[200px]">
         <SelectValue />
       </SelectTrigger>
 

apps/web/src/components/forms/edit-document/add-subject.action.ts

@@ -1,6 +1,7 @@
 'use server';
 
 import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-session';
+import { upsertDocumentMeta } from '@documenso/lib/server-only/document-meta/upsert-document-meta';
 import { sendDocument } from '@documenso/lib/server-only/document/send-document';
 import { TAddSubjectFormSchema } from '@documenso/ui/primitives/document-flow/add-subject.types';
 
@@ -8,12 +9,20 @@ export type CompleteDocumentActionInput = TAddSubjectFormSchema & {
   documentId: number;
 };
 
-export const completeDocument = async ({ documentId }: CompleteDocumentActionInput) => {
+export const completeDocument = async ({ documentId, email }: CompleteDocumentActionInput) => {
   'use server';
 
   const { id: userId } = await getRequiredServerComponentSession();
 
-  await sendDocument({
+  if (email.message || email.subject) {
+    await upsertDocumentMeta({
+      documentId,
+      subject: email.subject,
+      message: email.message,
+    });
+  }
+
+  return await sendDocument({
     userId,
     documentId,
   });

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

@@ -0,0 +1,80 @@
+'use client';
+
+import { useRouter } from 'next/navigation';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+import { trpc } from '@documenso/trpc/react';
+import { cn } from '@documenso/ui/lib/utils';
+import { Button } from '@documenso/ui/primitives/button';
+import { FormErrorMessage } from '@documenso/ui/primitives/form/form-error-message';
+import { Input } from '@documenso/ui/primitives/input';
+import { Label } from '@documenso/ui/primitives/label';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+export const ZForgotPasswordFormSchema = z.object({
+  email: z.string().email().min(1),
+});
+
+export type TForgotPasswordFormSchema = z.infer<typeof ZForgotPasswordFormSchema>;
+
+export type ForgotPasswordFormProps = {
+  className?: string;
+};
+
+export const ForgotPasswordForm = ({ className }: ForgotPasswordFormProps) => {
+  const router = useRouter();
+  const { toast } = useToast();
+
+  const {
+    register,
+    handleSubmit,
+    reset,
+    formState: { errors, isSubmitting },
+  } = useForm<TForgotPasswordFormSchema>({
+    values: {
+      email: '',
+    },
+    resolver: zodResolver(ZForgotPasswordFormSchema),
+  });
+
+  const { mutateAsync: forgotPassword } = trpc.profile.forgotPassword.useMutation();
+
+  const onFormSubmit = async ({ email }: TForgotPasswordFormSchema) => {
+    await forgotPassword({ email }).catch(() => null);
+
+    toast({
+      title: 'Reset email sent',
+      description:
+        'A password reset email has been sent, if you have an account you should see it in your inbox shortly.',
+      duration: 5000,
+    });
+
+    reset();
+
+    router.push('/check-email');
+  };
+
+  return (
+    <form
+      className={cn('flex w-full flex-col gap-y-4', className)}
+      onSubmit={handleSubmit(onFormSubmit)}
+    >
+      <div>
+        <Label htmlFor="email" className="text-muted-foreground">
+          Email
+        </Label>
+
+        <Input id="email" type="email" className="bg-background mt-2" {...register('email')} />
+
+        <FormErrorMessage className="mt-1.5" error={errors.email} />
+      </div>
+
+      <Button size="lg" loading={isSubmitting}>
+        Reset Password
+      </Button>
+    </form>
+  );
+};

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

@@ -1,7 +1,9 @@
 'use client';
 
+import { useState } from 'react';
+
 import { zodResolver } from '@hookform/resolvers/zod';
-import { Loader } from 'lucide-react';
+import { Eye, EyeOff, Loader } from 'lucide-react';
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';
 
@@ -36,6 +38,9 @@ export type PasswordFormProps = {
 export const PasswordForm = ({ className }: PasswordFormProps) => {
   const { toast } = useToast();
 
+  const [showPassword, setShowPassword] = useState(false);
+  const [showConfirmPassword, setShowConfirmPassword] = useState(false);
+
   const {
     register,
     handleSubmit,
@@ -88,37 +93,69 @@ export const PasswordForm = ({ className }: PasswordFormProps) => {
       onSubmit={handleSubmit(onFormSubmit)}
     >
       <div>
-        <Label htmlFor="password" className="text-slate-500">
+        <Label htmlFor="password" className="text-muted-foreground">
           Password
         </Label>
 
-        <Input
-          id="password"
-          type="password"
-          minLength={6}
-          maxLength={72}
-          autoComplete="new-password"
-          className="bg-background mt-2"
-          {...register('password')}
-        />
+        <div className="relative">
+          <Input
+            id="password"
+            type={showPassword ? 'text' : 'password'}
+            minLength={6}
+            maxLength={72}
+            autoComplete="new-password"
+            className="bg-background mt-2 pr-10"
+            {...register('password')}
+          />
+
+          <Button
+            variant="link"
+            type="button"
+            className="absolute right-0 top-0 flex h-full items-center justify-center pr-3"
+            aria-label={showPassword ? 'Mask password' : 'Reveal password'}
+            onClick={() => setShowPassword((show) => !show)}
+          >
+            {showPassword ? (
+              <EyeOff className="text-muted-foreground h-5 w-5" />
+            ) : (
+              <Eye className="text-muted-foreground h-5 w-5" />
+            )}
+          </Button>
+        </div>
 
         <FormErrorMessage className="mt-1.5" error={errors.password} />
       </div>
 
       <div>
-        <Label htmlFor="repeated-password" className="text-slate-500">
+        <Label htmlFor="repeated-password" className="text-muted-foreground">
           Repeat Password
         </Label>
 
-        <Input
-          id="repeated-password"
-          type="password"
-          minLength={6}
-          maxLength={72}
-          autoComplete="new-password"
-          className="bg-background mt-2"
-          {...register('repeatedPassword')}
-        />
+        <div className="relative">
+          <Input
+            id="repeated-password"
+            type={showConfirmPassword ? 'text' : 'password'}
+            minLength={6}
+            maxLength={72}
+            autoComplete="new-password"
+            className="bg-background mt-2 pr-10"
+            {...register('repeatedPassword')}
+          />
+
+          <Button
+            variant="link"
+            type="button"
+            className="absolute right-0 top-0 flex h-full items-center justify-center pr-3"
+            aria-label={showConfirmPassword ? 'Mask password' : 'Reveal password'}
+            onClick={() => setShowConfirmPassword((show) => !show)}
+          >
+            {showConfirmPassword ? (
+              <EyeOff className="text-muted-foreground h-5 w-5" />
+            ) : (
+              <Eye className="text-muted-foreground h-5 w-5" />
+            )}
+          </Button>
+        </div>
 
         <FormErrorMessage className="mt-1.5" error={errors.repeatedPassword} />
       </div>

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

@@ -89,7 +89,7 @@ export const ProfileForm = ({ className, user }: ProfileFormProps) => {
       onSubmit={handleSubmit(onFormSubmit)}
     >
       <div>
-        <Label htmlFor="full-name" className="text-slate-500">
+        <Label htmlFor="full-name" className="text-muted-foreground">
           Full Name
         </Label>
 
@@ -99,7 +99,7 @@ export const ProfileForm = ({ className, user }: ProfileFormProps) => {
       </div>
 
       <div>
-        <Label htmlFor="email" className="text-slate-500">
+        <Label htmlFor="email" className="text-muted-foreground">
           Email
         </Label>
 
@@ -107,7 +107,7 @@ export const ProfileForm = ({ className, user }: ProfileFormProps) => {
       </div>
 
       <div>
-        <Label htmlFor="signature" className="text-slate-500">
+        <Label htmlFor="signature" className="text-muted-foreground">
           Signature
         </Label>
 

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

@@ -0,0 +1,173 @@
+'use client';
+
+import { useState } from 'react';
+
+import { useRouter } from 'next/navigation';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { Eye, EyeOff } from 'lucide-react';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+import { TRPCClientError } from '@documenso/trpc/client';
+import { trpc } from '@documenso/trpc/react';
+import { cn } from '@documenso/ui/lib/utils';
+import { Button } from '@documenso/ui/primitives/button';
+import { FormErrorMessage } from '@documenso/ui/primitives/form/form-error-message';
+import { Input } from '@documenso/ui/primitives/input';
+import { Label } from '@documenso/ui/primitives/label';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+export const ZResetPasswordFormSchema = z
+  .object({
+    password: z.string().min(6).max(72),
+    repeatedPassword: z.string().min(6).max(72),
+  })
+  .refine((data) => data.password === data.repeatedPassword, {
+    path: ['repeatedPassword'],
+    message: "Passwords don't match",
+  });
+
+export type TResetPasswordFormSchema = z.infer<typeof ZResetPasswordFormSchema>;
+
+export type ResetPasswordFormProps = {
+  className?: string;
+  token: string;
+};
+
+export const ResetPasswordForm = ({ className, token }: ResetPasswordFormProps) => {
+  const router = useRouter();
+
+  const { toast } = useToast();
+
+  const [showPassword, setShowPassword] = useState(false);
+  const [showConfirmPassword, setShowConfirmPassword] = useState(false);
+
+  const {
+    register,
+    reset,
+    handleSubmit,
+    formState: { errors, isSubmitting },
+  } = useForm<TResetPasswordFormSchema>({
+    values: {
+      password: '',
+      repeatedPassword: '',
+    },
+    resolver: zodResolver(ZResetPasswordFormSchema),
+  });
+
+  const { mutateAsync: resetPassword } = trpc.profile.resetPassword.useMutation();
+
+  const onFormSubmit = async ({ password }: Omit<TResetPasswordFormSchema, 'repeatedPassword'>) => {
+    try {
+      await resetPassword({
+        password,
+        token,
+      });
+
+      reset();
+
+      toast({
+        title: 'Password updated',
+        description: 'Your password has been updated successfully.',
+        duration: 5000,
+      });
+
+      router.push('/signin');
+    } catch (err) {
+      if (err instanceof TRPCClientError && err.data?.code === 'BAD_REQUEST') {
+        toast({
+          title: 'An error occurred',
+          description: err.message,
+          variant: 'destructive',
+        });
+      } else {
+        toast({
+          title: 'An unknown error occurred',
+          variant: 'destructive',
+          description:
+            'We encountered an unknown error while attempting to reset your password. Please try again later.',
+        });
+      }
+    }
+  };
+
+  return (
+    <form
+      className={cn('flex w-full flex-col gap-y-4', className)}
+      onSubmit={handleSubmit(onFormSubmit)}
+    >
+      <div>
+        <Label htmlFor="password" className="text-muted-foreground">
+          <span>Password</span>
+        </Label>
+
+        <div className="relative">
+          <Input
+            id="password"
+            type={showPassword ? 'text' : 'password'}
+            minLength={6}
+            maxLength={72}
+            autoComplete="new-password"
+            className="bg-background mt-2 pr-10"
+            {...register('password')}
+          />
+
+          <Button
+            variant="link"
+            type="button"
+            className="absolute right-0 top-0 flex h-full items-center justify-center pr-3"
+            aria-label={showPassword ? 'Mask password' : 'Reveal password'}
+            onClick={() => setShowPassword((show) => !show)}
+          >
+            {showPassword ? (
+              <EyeOff className="text-muted-foreground h-5 w-5" />
+            ) : (
+              <Eye className="text-muted-foreground h-5 w-5" />
+            )}
+          </Button>
+        </div>
+
+        <FormErrorMessage className="mt-1.5" error={errors.password} />
+      </div>
+
+      <div>
+        <Label htmlFor="repeatedPassword" className="text-muted-foreground">
+          <span>Repeat Password</span>
+        </Label>
+
+        <div className="relative">
+          <Input
+            id="repeated-password"
+            type={showConfirmPassword ? 'text' : 'password'}
+            minLength={6}
+            maxLength={72}
+            autoComplete="new-password"
+            className="bg-background mt-2 pr-10"
+            {...register('repeatedPassword')}
+          />
+
+          <Button
+            variant="link"
+            type="button"
+            className="absolute right-0 top-0 flex h-full items-center justify-center pr-3"
+            aria-label={showConfirmPassword ? 'Mask password' : 'Reveal password'}
+            onClick={() => setShowConfirmPassword((show) => !show)}
+          >
+            {showConfirmPassword ? (
+              <EyeOff className="text-muted-foreground h-5 w-5" />
+            ) : (
+              <Eye className="text-muted-foreground h-5 w-5" />
+            )}
+          </Button>
+        </div>
+
+        <FormErrorMessage className="mt-1.5" error={errors.repeatedPassword} />
+      </div>
+
+      <Button size="lg" loading={isSubmitting}>
+        Reset Password
+      </Button>
+    </form>
+  );
+};

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

@@ -1,11 +1,11 @@
 'use client';
 
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 
 import { useSearchParams } from 'next/navigation';
 
 import { zodResolver } from '@hookform/resolvers/zod';
-import { Loader } from 'lucide-react';
+import { Eye, EyeOff, Loader } from 'lucide-react';
 import { signIn } from 'next-auth/react';
 import { useForm } from 'react-hook-form';
 import { FcGoogle } from 'react-icons/fc';
@@ -14,6 +14,7 @@ import { z } from 'zod';
 import { ErrorCode, isErrorCode } from '@documenso/lib/next-auth/error-codes';
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
+import { FormErrorMessage } from '@documenso/ui/primitives/form/form-error-message';
 import { Input } from '@documenso/ui/primitives/input';
 import { Label } from '@documenso/ui/primitives/label';
 import { useToast } from '@documenso/ui/primitives/use-toast';
@@ -42,6 +43,7 @@ export const SignInForm = ({ className }: SignInFormProps) => {
   const searchParams = useSearchParams();
 
   const { toast } = useToast();
+  const [showPassword, setShowPassword] = useState(false);
 
   const {
     register,
@@ -113,33 +115,47 @@ export const SignInForm = ({ className }: SignInFormProps) => {
       onSubmit={handleSubmit(onFormSubmit)}
     >
       <div>
-        <Label htmlFor="email" className="text-slate-500">
+        <Label htmlFor="email" className="text-muted-forground">
           Email
         </Label>
 
         <Input id="email" type="email" className="bg-background mt-2" {...register('email')} />
 
-        {errors.email && <span className="mt-1 text-xs text-red-500">{errors.email.message}</span>}
+        <FormErrorMessage className="mt-1.5" error={errors.email} />
       </div>
 
       <div>
-        <Label htmlFor="password" className="text-slate-500">
-          Password
+        <Label htmlFor="password" className="text-muted-forground">
+          <span>Password</span>
         </Label>
 
-        <Input
-          id="password"
-          type="password"
-          minLength={6}
-          maxLength={72}
-          autoComplete="current-password"
-          className="bg-background mt-2"
-          {...register('password')}
-        />
+        <div className="relative">
+          <Input
+            id="password"
+            type={showPassword ? 'text' : 'password'}
+            minLength={6}
+            maxLength={72}
+            autoComplete="current-password"
+            className="bg-background mt-2 pr-10"
+            {...register('password')}
+          />
 
-        {errors.password && (
-          <span className="mt-1 text-xs text-red-500">{errors.password.message}</span>
-        )}
+          <Button
+            variant="link"
+            type="button"
+            className="absolute right-0 top-0 flex h-full items-center justify-center pr-3"
+            aria-label={showPassword ? 'Mask password' : 'Reveal password'}
+            onClick={() => setShowPassword((show) => !show)}
+          >
+            {showPassword ? (
+              <EyeOff className="text-muted-foreground h-5 w-5" />
+            ) : (
+              <Eye className="text-muted-foreground h-5 w-5" />
+            )}
+          </Button>
+        </div>
+
+        <FormErrorMessage className="mt-1.5" error={errors.password} />
       </div>
 
       <Button size="lg" disabled={isSubmitting} className="dark:bg-documenso dark:hover:opacity-90">

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

@@ -1,7 +1,9 @@
 'use client';
 
+import { useState } from 'react';
+
 import { zodResolver } from '@hookform/resolvers/zod';
-import { Loader } from 'lucide-react';
+import { Eye, EyeOff, Loader } from 'lucide-react';
 import { signIn } from 'next-auth/react';
 import { Controller, useForm } from 'react-hook-form';
 import { z } from 'zod';
@@ -31,6 +33,7 @@ export type SignUpFormProps = {
 
 export const SignUpForm = ({ className }: SignUpFormProps) => {
   const { toast } = useToast();
+  const [showPassword, setShowPassword] = useState(false);
 
   const {
     control,
@@ -106,15 +109,31 @@ export const SignUpForm = ({ className }: SignUpFormProps) => {
           Password
         </Label>
 
-        <Input
-          id="password"
-          type="password"
-          minLength={6}
-          maxLength={72}
-          autoComplete="new-password"
-          className="bg-background mt-2"
-          {...register('password')}
-        />
+        <div className="relative">
+          <Input
+            id="password"
+            type={showPassword ? 'text' : 'password'}
+            minLength={6}
+            maxLength={72}
+            autoComplete="new-password"
+            className="bg-background mt-2 pr-10"
+            {...register('password')}
+          />
+
+          <Button
+            variant="link"
+            type="button"
+            className="absolute right-0 top-0 flex h-full items-center justify-center pr-3"
+            aria-label={showPassword ? 'Mask password' : 'Reveal password'}
+            onClick={() => setShowPassword((show) => !show)}
+          >
+            {showPassword ? (
+              <EyeOff className="text-muted-foreground h-5 w-5" />
+            ) : (
+              <Eye className="text-muted-foreground h-5 w-5" />
+            )}
+          </Button>
+        </div>
       </div>
 
       <div>

apps/web/src/components/motion.tsx

@@ -1,7 +0,0 @@
-'use client';
-
-import { motion } from 'framer-motion';
-
-export * from 'framer-motion';
-
-export const MotionDiv = motion.div;

apps/web/src/components/partials/not-found.tsx

@@ -0,0 +1,66 @@
+'use client';
+
+import Image from 'next/image';
+import { useRouter } from 'next/navigation';
+
+import { motion } from 'framer-motion';
+import { ChevronLeft } from 'lucide-react';
+
+import { cn } from '@documenso/ui/lib/utils';
+import { Button } from '@documenso/ui/primitives/button';
+
+import backgroundPattern from '~/assets/background-pattern.png';
+
+export type NotFoundPartialProps = {
+  children?: React.ReactNode;
+};
+
+export default function NotFoundPartial({ children }: NotFoundPartialProps) {
+  const router = useRouter();
+
+  return (
+    <div className={cn('relative max-w-[100vw] overflow-hidden')}>
+      <div className="absolute -inset-24 -z-10">
+        <motion.div
+          className="flex h-full w-full items-center justify-center"
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 0.8, transition: { duration: 0.5, delay: 0.5 } }}
+        >
+          <Image
+            src={backgroundPattern}
+            alt="background pattern"
+            className="-mr-[50vw] -mt-[15vh] h-full scale-100 object-cover md:scale-100 lg:scale-[100%]"
+            priority
+          />
+        </motion.div>
+      </div>
+
+      <div className="container mx-auto flex h-full min-h-screen items-center px-6 py-32">
+        <div>
+          <p className="text-muted-foreground font-semibold">404 Page not found</p>
+
+          <h1 className="mt-3 text-2xl font-bold md:text-3xl">Oops! Something went wrong.</h1>
+
+          <p className="text-muted-foreground mt-4 text-sm">
+            The page you are looking for was moved, removed, renamed or might never have existed.
+          </p>
+
+          <div className="mt-6 flex gap-x-2.5 gap-y-4 md:items-center">
+            <Button
+              variant="ghost"
+              className="w-32"
+              onClick={() => {
+                void router.back();
+              }}
+            >
+              <ChevronLeft className="mr-2 h-4 w-4" />
+              Go Back
+            </Button>
+
+            {children}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

apps/web/src/helpers/get-asset-buffer.ts

@@ -0,0 +1,14 @@
+/**
+ * getAssetBuffer is used to retrieve array buffers for various assets
+ * that are hosted in the `public` folder.
+ *
+ * This exists due to a breakage with `import.meta.url` imports and open graph images,
+ * once we can identify a fix for this, we can remove this helper.
+ *
+ * @param path The path to the asset, relative to the `public` folder.
+ */
+export const getAssetBuffer = async (path: string) => {
+  const baseUrl = process.env.NEXT_PUBLIC_WEBAPP_URL || 'http://localhost:3000';
+
+  return fetch(new URL(path, baseUrl)).then(async (res) => res.arrayBuffer());
+};

apps/web/src/helpers/get-feature-flag.ts

@@ -21,7 +21,7 @@ export const getFlag = async (
     return LOCAL_FEATURE_FLAGS[flag] ?? true;
   }
 
-  const url = new URL(`${process.env.NEXT_PUBLIC_SITE_URL}/api/feature-flag/get`);
+  const url = new URL(`${process.env.NEXT_PUBLIC_WEBAPP_URL}/api/feature-flag/get`);
   url.searchParams.set('flag', flag);
 
   const response = await fetch(url, {
@@ -54,7 +54,7 @@ export const getAllFlags = async (
     return LOCAL_FEATURE_FLAGS;
   }
 
-  const url = new URL(`${process.env.NEXT_PUBLIC_SITE_URL}/api/feature-flag/all`);
+  const url = new URL(`${process.env.NEXT_PUBLIC_WEBAPP_URL}/api/feature-flag/all`);
 
   return fetch(url, {
     headers: {

apps/web/src/pages/api/claim-plan/index.ts

@@ -43,7 +43,7 @@ export default async function handler(
 
     if (user && user.Subscription.length > 0) {
       return res.status(200).json({
-        redirectUrl: `${process.env.NEXT_PUBLIC_APP_URL}/login`,
+        redirectUrl: `${process.env.NEXT_PUBLIC_WEBAPP_URL}/login`,
       });
     }
 
@@ -103,8 +103,8 @@ export default async function handler(
       mode: 'subscription',
       metadata,
       allow_promotion_codes: true,
-      success_url: `${process.env.NEXT_PUBLIC_SITE_URL}/claimed?sessionId={CHECKOUT_SESSION_ID}`,
-      cancel_url: `${process.env.NEXT_PUBLIC_SITE_URL}/pricing?email=${encodeURIComponent(
+      success_url: `${process.env.NEXT_PUBLIC_MARKETING_URL}/claimed?sessionId={CHECKOUT_SESSION_ID}`,
+      cancel_url: `${process.env.NEXT_PUBLIC_MARKETING_URL}/pricing?email=${encodeURIComponent(
         email,
       )}&name=${encodeURIComponent(name)}&planId=${planId}&cancelled=true`,
     });

apps/web/src/pages/api/document/create.ts

@@ -1,88 +0,0 @@
-import { NextApiRequest, NextApiResponse } from 'next';
-
-import formidable, { type File } from 'formidable';
-import { readFileSync } from 'fs';
-
-import { getServerSession } from '@documenso/lib/next-auth/get-server-session';
-import { prisma } from '@documenso/prisma';
-import { DocumentStatus } from '@documenso/prisma/client';
-
-import {
-  TCreateDocumentRequestSchema,
-  TCreateDocumentResponseSchema,
-} from '~/api/document/create/types';
-
-export const config = {
-  api: {
-    bodyParser: false,
-  },
-};
-
-export type TFormidableCreateDocumentRequestSchema = {
-  file: File;
-};
-
-export default async function handler(
-  req: NextApiRequest,
-  res: NextApiResponse<TCreateDocumentResponseSchema>,
-) {
-  const user = await getServerSession({ req, res });
-
-  if (!user) {
-    return res.status(401).json({
-      error: 'Unauthorized',
-    });
-  }
-
-  try {
-    const form = formidable();
-
-    const { file } = await new Promise<TFormidableCreateDocumentRequestSchema>(
-      (resolve, reject) => {
-        form.parse(req, (err, fields, files) => {
-          if (err) {
-            reject(err);
-          }
-
-          // We had intended to do this with Zod but we can only validate it
-          // as a persistent file which does not include the properties that we
-          // need.
-          // eslint-disable-next-line @typescript-eslint/consistent-type-assertions, @typescript-eslint/no-explicit-any
-          resolve({ ...fields, ...files } as any);
-        });
-      },
-    );
-
-    const fileBuffer = readFileSync(file.filepath);
-
-    const document = await prisma.document.create({
-      data: {
-        title: file.originalFilename ?? file.newFilename,
-        status: DocumentStatus.DRAFT,
-        userId: user.id,
-        document: fileBuffer.toString('base64'),
-        created: new Date(),
-      },
-    });
-
-    return res.status(200).json({
-      id: document.id,
-    });
-  } catch (err) {
-    console.error(err);
-
-    return res.status(500).json({
-      error: 'Internal server error',
-    });
-  }
-}
-
-/**
- * This is a hack to ensure that the types are correct.
- */
-type FormidableSatisfiesCreateDocument =
-  keyof TCreateDocumentRequestSchema extends keyof TFormidableCreateDocumentRequestSchema
-    ? true
-    : never;
-
-true satisfies FormidableSatisfiesCreateDocument;

apps/web/src/pages/api/feature-flag/get.ts

@@ -1,9 +1,9 @@
 import { NextRequest, NextResponse } from 'next/server';
 
-import { nanoid } from 'nanoid';
 import { JWT, getToken } from 'next-auth/jwt';
 
 import { LOCAL_FEATURE_FLAGS, extractPostHogConfig } from '@documenso/lib/constants/feature-flags';
+import { nanoid } from '@documenso/lib/universal/id';
 
 import PostHogServerClient from '~/helpers/get-post-hog-server-client';
 

apps/web/src/pages/api/stripe/webhook/index.ts

@@ -10,6 +10,7 @@ import { redis } from '@documenso/lib/server-only/redis';
 import { Stripe, stripe } from '@documenso/lib/server-only/stripe';
 import { prisma } from '@documenso/prisma';
 import {
+  DocumentDataType,
   DocumentStatus,
   FieldType,
   ReadStatus,
@@ -85,16 +86,34 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
 
       const now = new Date();
 
+      const bytes64 = readFileSync('./public/documenso-supporter-pledge.pdf').toString('base64');
+
+      const { id: documentDataId } = await prisma.documentData.create({
+        data: {
+          type: DocumentDataType.BYTES_64,
+          data: bytes64,
+          initialData: bytes64,
+        },
+      });
+
       const document = await prisma.document.create({
         data: {
           title: 'Documenso Supporter Pledge.pdf',
           status: DocumentStatus.COMPLETED,
           userId: user.id,
-          document: readFileSync('./public/documenso-supporter-pledge.pdf').toString('base64'),
-          created: now,
+          documentDataId,
+        },
+        include: {
+          documentData: true,
         },
       });
 
+      const { documentData } = document;
+
+      if (!documentData) {
+        throw new Error(`Document ${document.id} has no document data`);
+      }
+
       const recipient = await prisma.recipient.create({
         data: {
           name: user.name ?? '',
@@ -122,16 +141,16 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
       });
 
       if (signatureDataUrl) {
-        document.document = await insertImageInPDF(
-          document.document,
+        documentData.data = await insertImageInPDF(
+          documentData.data,
           signatureDataUrl,
           field.positionX.toNumber(),
           field.positionY.toNumber(),
           field.page,
         );
       } else {
-        document.document = await insertTextInPDF(
-          document.document,
+        documentData.data = await insertTextInPDF(
+          documentData.data,
           signatureText ?? '',
           field.positionX.toNumber(),
           field.positionY.toNumber(),
@@ -153,7 +172,11 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
             id: document.id,
           },
           data: {
-            document: document.document,
+            documentData: {
+              update: {
+                data: documentData.data,
+              },
+            },
           },
         }),
       ]);

package.json

@@ -7,7 +7,8 @@
     "lint": "turbo run lint",
     "format": "prettier --write \"**/*.{js,jsx,cjs,mjs,ts,tsx,cts,mts,mdx}\"",
     "prepare": "husky install",
-    "commitlint": "commitlint --edit"
+    "commitlint": "commitlint --edit",
+    "clean": "turbo run clean && rimraf node_modules"
   },
   "engines": {
     "npm": ">=8.6.0",
@@ -23,6 +24,7 @@
     "husky": "^8.0.0",
     "lint-staged": "^14.0.0",
     "prettier": "^2.5.1",
+    "rimraf": "^5.0.1",
     "turbo": "^1.9.3"
   },
   "name": "@documenso/root",

packages/ee/package.json

@@ -9,7 +9,9 @@
     "server-only/",
     "universal/"
   ],
-  "scripts": {},
+  "scripts": {
+    "clean": "rimraf node_modules"
+  },
   "dependencies": {
     "@documenso/lib": "*",
     "@documenso/prisma": "*"

packages/email/package.json

@@ -13,16 +13,17 @@
   ],
   "scripts": {
     "dev": "email dev --port 3002 --dir templates",
+    "clean": "rimraf node_modules",
     "worker:test": "tsup worker/index.ts --format esm"
   },
   "dependencies": {
-    "@documenso/tsconfig": "*",
-    "@documenso/tailwind-config": "*",
-    "@documenso/ui": "*",
     "@react-email/components": "^0.0.7",
-    "nodemailer": "^6.9.3"
+    "nodemailer": "^6.9.3",
+    "react-email": "^1.9.4"
   },
   "devDependencies": {
+    "@documenso/tailwind-config": "*",
+    "@documenso/tsconfig": "*",
     "@types/nodemailer": "^6.4.8",
     "tsup": "^7.1.0"
   }

packages/email/tailwind.config.js

@@ -4,8 +4,5 @@ const path = require('path');
 
 module.exports = {
   ...baseConfig,
-  content: [
-    `templates/**/*.{ts,tsx}`,
-    `${path.join(require.resolve('@documenso/ui'), '..')}/**/*.{ts,tsx}`,
-  ],
+  content: [`templates/**/*.{ts,tsx}`],
 };

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

@@ -1,4 +1,4 @@
-import { Button, Img, Section, Tailwind, Text } from '@react-email/components';
+import { Button, Column, Img, Row, Section, Tailwind, Text } from '@react-email/components';
 
 import * as config from '@documenso/tailwind-config';
 
@@ -29,11 +29,23 @@ export const TemplateDocumentCompleted = ({
         },
       }}
     >
-      <Section className="flex-row items-center justify-center">
-        <div className="flex items-center justify-center p-4">
-          <Img className="h-42" src={getAssetUrl('/static/document.png')} alt="Documenso" />
-        </div>
+      <Section>
+        <Row className="table-fixed">
+          <Column />
 
+          <Column>
+            <Img
+              className="h-42 mx-auto"
+              src={getAssetUrl('/static/document.png')}
+              alt="Documenso"
+            />
+          </Column>
+
+          <Column />
+        </Row>
+      </Section>
+
+      <Section>
         <Text className="mb-4 flex items-center justify-center text-center text-base font-semibold text-[#7AC455]">
           <Img src={getAssetUrl('/static/completed.png')} className="-mb-0.5 mr-2 inline h-7 w-7" />
           Completed

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

@@ -1,4 +1,4 @@
-import { Button, Img, Section, Tailwind, Text } from '@react-email/components';
+import { Button, Column, Img, Row, Section, Tailwind, Text } from '@react-email/components';
 
 import * as config from '@documenso/tailwind-config';
 
@@ -30,13 +30,26 @@ export const TemplateDocumentInvite = ({
         },
       }}
     >
-      <Section className="mt-4 flex-row items-center justify-center">
-        <div className="flex items-center justify-center p-4">
-          <Img className="h-42" src={getAssetUrl('/static/document.png')} alt="Documenso" />
-        </div>
+      <Section className="mt-4">
+        <Row className="table-fixed">
+          <Column />
 
+          <Column>
+            <Img
+              className="h-42 mx-auto"
+              src={getAssetUrl('/static/document.png')}
+              alt="Documenso"
+            />
+          </Column>
+
+          <Column />
+        </Row>
+      </Section>
+
+      <Section>
         <Text className="text-primary mx-auto mb-0 max-w-[80%] text-center text-lg font-semibold">
-          {inviterName} has invited you to sign "{documentName}"
+          {inviterName} has invited you to sign
+          <br />"{documentName}"
         </Text>
 
         <Text className="my-1 text-center text-base text-slate-400">

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

@@ -1,4 +1,4 @@
-import { Img, Section, Tailwind, Text } from '@react-email/components';
+import { Column, Img, Row, Section, Tailwind, Text } from '@react-email/components';
 
 import * as config from '@documenso/tailwind-config';
 
@@ -25,11 +25,23 @@ export const TemplateDocumentPending = ({
         },
       }}
     >
-      <Section className="flex-row items-center justify-center">
-        <div className="flex items-center justify-center p-4">
-          <Img className="h-42" src={getAssetUrl('/static/document.png')} alt="Documenso" />
-        </div>
+      <Section>
+        <Row className="table-fixed">
+          <Column />
 
+          <Column>
+            <Img
+              className="h-42 mx-auto"
+              src={getAssetUrl('/static/document.png')}
+              alt="Documenso"
+            />
+          </Column>
+
+          <Column />
+        </Row>
+      </Section>
+
+      <Section>
         <Text className="mb-4 flex items-center justify-center text-center text-base font-semibold text-blue-500">
           <Img src={getAssetUrl('/static/clock.png')} className="-mb-0.5 mr-2 inline h-7 w-7" />
           Waiting for others

packages/email/template-components/template-footer.tsx

@@ -1,14 +1,20 @@
 import { Link, Section, Text } from '@react-email/components';
 
-export const TemplateFooter = () => {
+export type TemplateFooterProps = {
+  isDocument?: boolean;
+};
+
+export const TemplateFooter = ({ isDocument = true }: TemplateFooterProps) => {
   return (
     <Section>
-      <Text className="my-4 text-base text-slate-400">
-        This document was sent using{' '}
-        <Link className="text-[#7AC455]" href="https://documenso.com">
-          Documenso.
-        </Link>
-      </Text>
+      {isDocument && (
+        <Text className="my-4 text-base text-slate-400">
+          This document was sent using{' '}
+          <Link className="text-[#7AC455]" href="https://documenso.com">
+            Documenso.
+          </Link>
+        </Text>
+      )}
 
       <Text className="my-8 text-sm text-slate-400">
         Documenso

packages/email/template-components/template-forgot-password.tsx

@@ -0,0 +1,54 @@
+import { Button, Img, Section, Tailwind, Text } from '@react-email/components';
+
+import * as config from '@documenso/tailwind-config';
+
+export type TemplateForgotPasswordProps = {
+  resetPasswordLink: string;
+  assetBaseUrl: string;
+};
+
+export const TemplateForgotPassword = ({
+  resetPasswordLink,
+  assetBaseUrl,
+}: TemplateForgotPasswordProps) => {
+  const getAssetUrl = (path: string) => {
+    return new URL(path, assetBaseUrl).toString();
+  };
+
+  return (
+    <Tailwind
+      config={{
+        theme: {
+          extend: {
+            colors: config.theme.extend.colors,
+          },
+        },
+      }}
+    >
+      <Section className="mt-4 flex-row items-center justify-center">
+        <div className="flex items-center justify-center p-4">
+          <Img className="h-42" src={getAssetUrl('/static/document.png')} alt="Documenso" />
+        </div>
+
+        <Text className="text-primary mx-auto mb-0 max-w-[80%] text-center text-lg font-semibold">
+          Forgot your password?
+        </Text>
+
+        <Text className="my-1 text-center text-base text-slate-400">
+          That's okay, it happens! Click the button below to reset your password.
+        </Text>
+
+        <Section className="mb-6 mt-8 text-center">
+          <Button
+            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={resetPasswordLink}
+          >
+            Reset Password
+          </Button>
+        </Section>
+      </Section>
+    </Tailwind>
+  );
+};
+
+export default TemplateForgotPassword;

packages/email/template-components/template-reset-password.tsx

@@ -0,0 +1,43 @@
+import { Img, Section, Tailwind, Text } from '@react-email/components';
+
+import * as config from '@documenso/tailwind-config';
+
+export interface TemplateResetPasswordProps {
+  userName: string;
+  userEmail: string;
+  assetBaseUrl: string;
+}
+
+export const TemplateResetPassword = ({ assetBaseUrl }: TemplateResetPasswordProps) => {
+  const getAssetUrl = (path: string) => {
+    return new URL(path, assetBaseUrl).toString();
+  };
+
+  return (
+    <Tailwind
+      config={{
+        theme: {
+          extend: {
+            colors: config.theme.extend.colors,
+          },
+        },
+      }}
+    >
+      <Section className="mt-4 flex-row items-center justify-center">
+        <div className="flex items-center justify-center p-4">
+          <Img className="h-42" src={getAssetUrl('/static/document.png')} alt="Documenso" />
+        </div>
+
+        <Text className="text-primary mx-auto mb-0 max-w-[80%] text-center text-lg font-semibold">
+          Password updated!
+        </Text>
+
+        <Text className="my-1 text-center text-base text-slate-400">
+          Your password has been updated.
+        </Text>
+      </Section>
+    </Tailwind>
+  );
+};
+
+export default TemplateResetPassword;

packages/email/templates/document-invite.tsx

@@ -20,7 +20,9 @@ import {
 } from '../template-components/template-document-invite';
 import TemplateFooter from '../template-components/template-footer';
 
-export type DocumentInviteEmailTemplateProps = Partial<TemplateDocumentInviteProps>;
+export type DocumentInviteEmailTemplateProps = Partial<TemplateDocumentInviteProps> & {
+  customBody?: string;
+};
 
 export const DocumentInviteEmailTemplate = ({
   inviterName = 'Lucas Smith',
@@ -28,6 +30,7 @@ export const DocumentInviteEmailTemplate = ({
   documentName = 'Open Source Pledge.pdf',
   signDocumentLink = 'https://documenso.com',
   assetBaseUrl = 'http://localhost:3002',
+  customBody,
 }: DocumentInviteEmailTemplateProps) => {
   const previewText = `Completed Document`;
 
@@ -78,7 +81,11 @@ export const DocumentInviteEmailTemplate = ({
                 </Text>
 
                 <Text className="mt-2 text-base text-slate-400">
-                  {inviterName} has invited you to sign the document "{documentName}".
+                  {customBody ? (
+                    <pre className="font-sans text-base text-slate-400">{customBody}</pre>
+                  ) : (
+                    `${inviterName} has invited you to sign the document "${documentName}".`
+                  )}
                 </Text>
               </Section>
             </Container>

packages/email/templates/forgot-password.tsx

@@ -0,0 +1,74 @@
+import {
+  Body,
+  Container,
+  Head,
+  Html,
+  Img,
+  Preview,
+  Section,
+  Tailwind,
+} from '@react-email/components';
+
+import config from '@documenso/tailwind-config';
+
+import TemplateFooter from '../template-components/template-footer';
+import {
+  TemplateForgotPassword,
+  TemplateForgotPasswordProps,
+} from '../template-components/template-forgot-password';
+
+export type ForgotPasswordTemplateProps = Partial<TemplateForgotPasswordProps>;
+
+export const ForgotPasswordTemplate = ({
+  resetPasswordLink = 'https://documenso.com',
+  assetBaseUrl = 'http://localhost:3002',
+}: ForgotPasswordTemplateProps) => {
+  const previewText = `Password Reset Requested`;
+
+  const getAssetUrl = (path: string) => {
+    return new URL(path, assetBaseUrl).toString();
+  };
+
+  return (
+    <Html>
+      <Head />
+      <Preview>{previewText}</Preview>
+      <Tailwind
+        config={{
+          theme: {
+            extend: {
+              colors: config.theme.extend.colors,
+            },
+          },
+        }}
+      >
+        <Body className="mx-auto my-auto bg-white font-sans">
+          <Section>
+            <Container className="mx-auto mb-2 mt-8 max-w-xl rounded-lg border border-solid border-slate-200 p-4 backdrop-blur-sm">
+              <Section>
+                <Img
+                  src={getAssetUrl('/static/logo.png')}
+                  alt="Documenso Logo"
+                  className="mb-4 h-6"
+                />
+
+                <TemplateForgotPassword
+                  resetPasswordLink={resetPasswordLink}
+                  assetBaseUrl={assetBaseUrl}
+                />
+              </Section>
+            </Container>
+
+            <div className="mx-auto mt-12 max-w-xl" />
+
+            <Container className="mx-auto max-w-xl">
+              <TemplateFooter isDocument={false} />
+            </Container>
+          </Section>
+        </Body>
+      </Tailwind>
+    </Html>
+  );
+};
+
+export default ForgotPasswordTemplate;

packages/email/templates/reset-password.tsx

@@ -0,0 +1,102 @@
+import {
+  Body,
+  Container,
+  Head,
+  Hr,
+  Html,
+  Img,
+  Link,
+  Preview,
+  Section,
+  Tailwind,
+  Text,
+} from '@react-email/components';
+
+import config from '@documenso/tailwind-config';
+
+import TemplateFooter from '../template-components/template-footer';
+import {
+  TemplateResetPassword,
+  TemplateResetPasswordProps,
+} from '../template-components/template-reset-password';
+
+export type ResetPasswordTemplateProps = Partial<TemplateResetPasswordProps>;
+
+export const ResetPasswordTemplate = ({
+  userName = 'Lucas Smith',
+  userEmail = 'lucas@documenso.com',
+  assetBaseUrl = 'http://localhost:3002',
+}: ResetPasswordTemplateProps) => {
+  const previewText = `Password Reset Successful`;
+
+  const getAssetUrl = (path: string) => {
+    return new URL(path, assetBaseUrl).toString();
+  };
+
+  return (
+    <Html>
+      <Head />
+      <Preview>{previewText}</Preview>
+      <Tailwind
+        config={{
+          theme: {
+            extend: {
+              colors: config.theme.extend.colors,
+            },
+          },
+        }}
+      >
+        <Body className="mx-auto my-auto bg-white font-sans">
+          <Section>
+            <Container className="mx-auto mb-2 mt-8 max-w-xl rounded-lg border border-solid border-slate-200 p-4 backdrop-blur-sm">
+              <Section>
+                <Img
+                  src={getAssetUrl('/static/logo.png')}
+                  alt="Documenso Logo"
+                  className="mb-4 h-6"
+                />
+
+                <TemplateResetPassword
+                  userName={userName}
+                  userEmail={userEmail}
+                  assetBaseUrl={assetBaseUrl}
+                />
+              </Section>
+            </Container>
+
+            <Container className="mx-auto mt-12 max-w-xl">
+              <Section>
+                <Text className="my-4 text-base font-semibold">
+                  Hi, {userName}{' '}
+                  <Link className="font-normal text-slate-400" href={`mailto:${userEmail}`}>
+                    ({userEmail})
+                  </Link>
+                </Text>
+
+                <Text className="mt-2 text-base text-slate-400">
+                  We've changed your password as you asked. You can now sign in with your new
+                  password.
+                </Text>
+                <Text className="mt-2 text-base text-slate-400">
+                  Didn't request a password change? We are here to help you secure your account,
+                  just{' '}
+                  <Link className="text-documenso-700 font-normal" href="mailto:hi@documenso.com">
+                    contact us.
+                  </Link>
+                </Text>
+              </Section>
+            </Container>
+
+            <Hr className="mx-auto mt-12 max-w-xl" />
+
+            <Container className="mx-auto max-w-xl">
+              <TemplateFooter isDocument={false} />
+            </Container>
+          </Section>
+        </Body>
+      </Tailwind>
+    </Html>
+  );
+};
+
+export default ResetPasswordTemplate;

packages/eslint-config/package.json

@@ -3,11 +3,14 @@
   "version": "0.0.0",
   "main": "./index.cjs",
   "license": "MIT",
+  "scripts": {
+    "clean": "rimraf node_modules"
+  },
   "dependencies": {
     "@typescript-eslint/eslint-plugin": "^5.59.2",
     "@typescript-eslint/parser": "^5.59.2",
     "eslint": "^8.40.0",
-    "eslint-config-next": "13.4.12",
+    "eslint-config-next": "13.4.19",
     "eslint-config-prettier": "^8.8.0",
     "eslint-config-turbo": "^1.9.3",
     "eslint-plugin-package-json": "^0.1.4",

packages/lib/constants/time.ts

@@ -0,0 +1,5 @@
+export const ONE_SECOND = 1000;
+export const ONE_MINUTE = ONE_SECOND * 60;
+export const ONE_HOUR = ONE_MINUTE * 60;
+export const ONE_DAY = ONE_HOUR * 24;
+export const ONE_WEEK = ONE_DAY * 7;

packages/lib/package.json

@@ -10,17 +10,24 @@
     "universal/",
     "next-auth/"
   ],
-  "scripts": {},
+  "scripts": {
+    "clean": "rimraf node_modules"
+  },
   "dependencies": {
+    "@aws-sdk/client-s3": "^3.410.0",
+    "@aws-sdk/s3-request-presigner": "^3.410.0",
+    "@aws-sdk/signature-v4-crt": "^3.410.0",
     "@documenso/email": "*",
     "@documenso/prisma": "*",
     "@next-auth/prisma-adapter": "1.0.7",
     "@pdf-lib/fontkit": "^1.1.1",
+    "@scure/base": "^1.1.3",
+    "@sindresorhus/slugify": "^2.2.1",
     "@upstash/redis": "^1.20.6",
     "bcrypt": "^5.1.0",
     "luxon": "^3.4.0",
     "nanoid": "^4.0.2",
-    "next": "13.4.12",
+    "next": "13.4.19",
     "next-auth": "4.22.3",
     "pdf-lib": "^1.17.1",
     "react": "18.2.0",