fix: test

feat: added feature to show/hide password

.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,8 +7,11 @@ 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"
+
+# [[MARKETING]]
+NEXT_PUBLIC_MARKETING_SITE_URL="http://localhost:3001"
 
 # [[DATABASE]]
 NEXT_PRIVATE_DATABASE_URL="postgres://documenso:password@127.0.0.1:54320/documenso"

.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

README.md

@@ -1,3 +1,5 @@
+TEST
+
 <p align="center" style="margin-top: 120px">
   <a href="https://github.com/documenso/documenso">
    <img width="250px" src="https://github.com/documenso/documenso/assets/1309312/cd7823ec-4baa-40b9-be78-4acb3b1c73cb" alt="Documenso Logo">
@@ -20,7 +22,7 @@
 </p>
 
 <p align="center">
-   <a href="https://documen.so/discord"><img src="https://img.shields.io/badge/Discord-documen.so/discord-%235865F2" alt="Join Documenso on Discord"></a> 
+   <a href="https://documen.so/discord"><img src="https://img.shields.io/badge/Discord-documen.so/discord-%235865F2" alt="Join Documenso on Discord"></a>
    <a href="https://github.com/documenso/documenso/stargazers"><img src="https://img.shields.io/github/stars/documenso/documenso" alt="Github Stars"></a>
    <a href="https://github.com/documenso/documenso/blob/main/LICENSE"><img src="https://img.shields.io/badge/license-AGPLv3-purple" alt="License"></a>
    <a href="https://github.com/documenso/documenso/pulse"><img src="https://img.shields.io/github/commit-activity/m/documenso/documenso" alt="Commits-per-month"></a>
@@ -227,11 +229,12 @@ docker run -d --restart=unless-stopped -p 3000:3000 -v documenso:/app/data --nam
 ```
 
 Command Breakdown:
+
 - `-d` - Let's you run the container in background
 - `-p` - Passes down which ports to use. First half is the host port, Second half is the app port. You can change the first half anything you want and reverse proxy to that port.
 - `-v` - Volume let's you persist the data
 - `--name` - Name of the container
-- `documenso:latest` -  Image you have built
+- `documenso:latest` - Image you have built
 
 # Deployment
 
@@ -277,5 +280,5 @@ containers:
       - start
       - --
       - -H
-      - "::"
+      - '::'
 ```

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/next.mdx

@@ -20,11 +20,11 @@ Today, I'm pleased to share with you a preview of the next Documenso.
 
 We redesigned the whole signing flow to make it more appealing and more convenient.
 
-We improved the overall look and feel by making it more elegant and appropriately playful. Focused on the task at hand, but explicitly enjoying doing it.
+We improved the overall look and feel by making it more elegant and appropriately playful. Focused on the task at hand, but explicitly enjoying doing it. 
 
 **We call it happy minimalism.**
 
-We paid particular attention to the moment of signing, which should be celebrated.
+We paid particular attention to the moment of signing, which should be celebrated. 
 
 The image below is the final bloom of the completion celebration we added:
 

apps/marketing/next.config.js

@@ -2,7 +2,7 @@
 const path = require('path');
 const { withContentlayer } = require('next-contentlayer');
 
-const { parsed: env } = require('dotenv').config({
+require('dotenv').config({
   path: path.join(__dirname, '../../.env.local'),
 });
 
@@ -10,14 +10,52 @@ const { parsed: env } = require('dotenv').config({
 const config = {
   experimental: {
     serverActions: true,
+    serverActionsBodySizeLimit: '10mb',
   },
   reactStrictMode: true,
   transpilePackages: ['@documenso/lib', '@documenso/prisma', '@documenso/trpc', '@documenso/ui'],
+  env: {
+    NEXT_PUBLIC_PROJECT: 'marketing',
+  },
   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

@@ -18,14 +18,16 @@
     "@hookform/resolvers": "^3.1.0",
     "contentlayer": "^0.3.4",
     "framer-motion": "^10.12.8",
-    "lucide-react": "^0.214.0",
+    "lucide-react": "^0.277.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",
     "perfect-freehand": "^1.2.0",
+    "posthog-js": "^1.77.3",
     "react": "18.2.0",
+    "react-confetti": "^6.1.0",
     "react-dom": "18.2.0",
     "react-hook-form": "^7.43.9",
     "react-icons": "^4.8.0",

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/(marketing)/open/page.tsx

@@ -66,7 +66,7 @@ export default async function OpenPage() {
     .then((res) => ZStargazersLiveResponse.parse(res));
 
   return (
-    <div className="mx-auto mt-12 max-w-screen-lg">
+    <div className="mx-auto mt-6 max-w-screen-lg sm:mt-12">
       <div className="flex flex-col items-center justify-center">
         <h1 className="text-3xl font-bold lg:text-5xl">Open Startup</h1>
 

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

@@ -20,7 +20,7 @@ export type PricingPageProps = {
 
 export default function PricingPage() {
   return (
-    <div className="mt-12">
+    <div className="mt-6 sm:mt-12">
       <div className="text-center">
         <h1 className="text-3xl font-bold lg:text-5xl">Pricing</h1>
 

apps/marketing/src/app/(marketing)/single-player-mode/[token]/success/page.tsx

@@ -0,0 +1,29 @@
+import { notFound } from 'next/navigation';
+
+import { getDocumentAndRecipientByToken } from '@documenso/lib/server-only/document/get-document-by-token';
+
+import SinglePlayerModeSuccess from '~/components/(marketing)/single-player-mode/single-player-mode-success';
+
+export type SinglePlayerModeSuccessPageProps = {
+  params: {
+    token?: string;
+  };
+};
+
+export default async function SinglePlayerModeSuccessPage({
+  params: { token },
+}: SinglePlayerModeSuccessPageProps) {
+  if (!token) {
+    return notFound();
+  }
+
+  const document = await getDocumentAndRecipientByToken({
+    token,
+  }).catch(() => null);
+
+  if (!document || document.status !== 'COMPLETED') {
+    return notFound();
+  }
+
+  return <SinglePlayerModeSuccess document={document} />;
+}

apps/marketing/src/app/(marketing)/single-player-mode/page.tsx

@@ -0,0 +1,237 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+import Link from 'next/link';
+import { useRouter } from 'next/navigation';
+
+import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
+import { Field, Prisma, Recipient } from '@documenso/prisma/client';
+import { Card, CardContent } from '@documenso/ui/primitives/card';
+import { DocumentDropzone } from '@documenso/ui/primitives/document-dropzone';
+import { AddFieldsFormPartial } from '@documenso/ui/primitives/document-flow/add-fields';
+import { TAddFieldsFormSchema } from '@documenso/ui/primitives/document-flow/add-fields.types';
+import { AddSignatureFormPartial } from '@documenso/ui/primitives/document-flow/add-signature';
+import { TAddSignatureFormSchema } from '@documenso/ui/primitives/document-flow/add-signature.types';
+import {
+  DocumentFlowFormContainer,
+  DocumentFlowFormContainerHeader,
+} from '@documenso/ui/primitives/document-flow/document-flow-root';
+import { DocumentFlowStep } from '@documenso/ui/primitives/document-flow/types';
+import { LazyPDFViewer } from '@documenso/ui/primitives/lazy-pdf-viewer';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+import { createSinglePlayerDocument } from '~/components/(marketing)/single-player-mode/create-single-player-document.action';
+
+type SinglePlayerModeStep = 'fields' | 'sign';
+
+export default function SinglePlayerModePage() {
+  const analytics = useAnalytics();
+  const router = useRouter();
+
+  const { toast } = useToast();
+
+  const [uploadedFile, setUploadedFile] = useState<{ name: string; file: string } | null>();
+
+  const [step, setStep] = useState<SinglePlayerModeStep>('fields');
+  const [fields, setFields] = useState<Field[]>([]);
+
+  const documentFlow: Record<SinglePlayerModeStep, DocumentFlowStep> = {
+    fields: {
+      title: 'Add document',
+      description: 'Upload a document and add fields.',
+      stepIndex: 1,
+      onBackStep: uploadedFile
+        ? () => {
+            setUploadedFile(null);
+            setFields([]);
+          }
+        : undefined,
+      onNextStep: () => setStep('sign'),
+    },
+    sign: {
+      title: 'Sign',
+      description: 'Enter your details.',
+      stepIndex: 2,
+      onBackStep: () => setStep('fields'),
+    },
+  };
+
+  const currentDocumentFlow = documentFlow[step];
+
+  useEffect(() => {
+    analytics.startSessionRecording('marketing_session_recording_spm');
+
+    return () => {
+      analytics.stopSessionRecording();
+    };
+  }, [analytics]);
+
+  /**
+   * Insert the selected fields into the local state.
+   */
+  const onFieldsSubmit = (data: TAddFieldsFormSchema) => {
+    if (!uploadedFile) {
+      return;
+    }
+
+    setFields(
+      data.fields.map((field, i) => ({
+        id: i,
+        documentId: -1,
+        recipientId: -1,
+        type: field.type,
+        page: field.pageNumber,
+        positionX: new Prisma.Decimal(field.pageX),
+        positionY: new Prisma.Decimal(field.pageY),
+        width: new Prisma.Decimal(field.pageWidth),
+        height: new Prisma.Decimal(field.pageHeight),
+        customText: '',
+        inserted: false,
+      })),
+    );
+
+    analytics.capture('Marketing: SPM - Fields added');
+
+    documentFlow.fields.onNextStep?.();
+  };
+
+  /**
+   * Create, sign and send the document.
+   */
+  const onSignSubmit = async (data: TAddSignatureFormSchema) => {
+    if (!uploadedFile) {
+      return;
+    }
+
+    try {
+      const documentToken = await createSinglePlayerDocument({
+        document: uploadedFile.file,
+        documentName: uploadedFile.name,
+        signer: data,
+        fields: fields.map((field) => ({
+          page: field.page,
+          type: field.type,
+          positionX: field.positionX.toNumber(),
+          positionY: field.positionY.toNumber(),
+          width: field.width.toNumber(),
+          height: field.height.toNumber(),
+        })),
+      });
+
+      analytics.capture('Marketing: SPM - Document signed', {
+        signer: data.email,
+      });
+
+      router.push(`/single-player-mode/${documentToken}/success`);
+    } catch {
+      toast({
+        title: 'Something went wrong',
+        description: 'Please try again later.',
+        variant: 'destructive',
+      });
+    }
+  };
+
+  const placeholderRecipient: Recipient = {
+    id: -1,
+    documentId: -1,
+    email: '',
+    name: '',
+    token: '',
+    expired: null,
+    signedAt: null,
+    readStatus: 'OPENED',
+    signingStatus: 'NOT_SIGNED',
+    sendStatus: 'NOT_SENT',
+  };
+
+  const onFileDrop = async (file: File) => {
+    try {
+      const arrayBuffer = await file.arrayBuffer();
+      const base64String = Buffer.from(arrayBuffer).toString('base64');
+
+      setUploadedFile({
+        name: file.name,
+        file: `data:application/pdf;base64,${base64String}`,
+      });
+
+      analytics.capture('Marketing: SPM - Document uploaded');
+    } catch {
+      toast({
+        title: 'Something went wrong',
+        description: 'Please try again later.',
+        variant: 'destructive',
+      });
+    }
+  };
+
+  return (
+    <div className="mt-6 sm:mt-12">
+      <div className="text-center">
+        <h1 className="text-3xl font-bold lg:text-5xl">Single Player Mode</h1>
+
+        <p className="mt-4 text-lg leading-normal text-[#31373D]">
+          View our{' '}
+          <Link
+            href={'/pricing'}
+            target="_blank"
+            className="font-semibold transition-colors hover:text-[#31373D]/80"
+          >
+            community plan
+          </Link>{' '}
+          for exclusive features, including the ability to collaborate with multiple signers.
+        </p>
+      </div>
+
+      <div className="mt-12 grid w-full grid-cols-12 gap-8">
+        <div className="col-span-12 rounded-xl before:rounded-xl lg:col-span-6 xl:col-span-7">
+          {uploadedFile ? (
+            <Card gradient>
+              <CardContent className="p-2">
+                <LazyPDFViewer document={uploadedFile.file} />
+              </CardContent>
+            </Card>
+          ) : (
+            <DocumentDropzone className="h-[80vh] max-h-[60rem]" onDrop={onFileDrop} />
+          )}
+        </div>
+
+        <div className="col-span-12 lg:col-span-6 xl:col-span-5">
+          <DocumentFlowFormContainer onSubmit={(e) => e.preventDefault()}>
+            <DocumentFlowFormContainerHeader
+              title={currentDocumentFlow.title}
+              description={currentDocumentFlow.description}
+            />
+
+            {/* Add fields to PDF page. */}
+            {step === 'fields' && (
+              <fieldset disabled={!uploadedFile} className="flex h-full flex-col">
+                <AddFieldsFormPartial
+                  documentFlow={documentFlow.fields}
+                  hideRecipients={true}
+                  recipients={uploadedFile ? [placeholderRecipient] : []}
+                  numberOfSteps={Object.keys(documentFlow).length}
+                  fields={fields}
+                  onSubmit={onFieldsSubmit}
+                />
+              </fieldset>
+            )}
+
+            {/* Enter user details and signature. */}
+            {step === 'sign' && (
+              <AddSignatureFormPartial
+                documentFlow={documentFlow.sign}
+                numberOfSteps={Object.keys(documentFlow).length}
+                fields={fields}
+                onSubmit={onSignSubmit}
+                requireName={Boolean(fields.find((field) => field.type === 'NAME'))}
+                requireSignature={Boolean(fields.find((field) => field.type === 'SIGNATURE'))}
+              />
+            )}
+          </DocumentFlowFormContainer>
+        </div>
+      </div>
+    </div>
+  );
+}

apps/marketing/src/app/layout.tsx

@@ -1,12 +1,19 @@
-import { Inter } from 'next/font/google';
+import { Suspense } from 'react';
 
+import { Caveat, Inter } from 'next/font/google';
+
+import { FeatureFlagProvider } from '@documenso/lib/client-only/providers/feature-flag';
+import { getAllAnonymousFlags } from '@documenso/lib/universal/get-feature-flag';
+import { cn } from '@documenso/ui/lib/utils';
 import { Toaster } from '@documenso/ui/primitives/toaster';
 
 import { PlausibleProvider } from '~/providers/plausible';
+import { PostHogPageview } from '~/providers/posthog';
 
 import './globals.css';
 
 const fontInter = Inter({ subsets: ['latin'], variable: '--font-sans' });
+const fontCaveat = Caveat({ subsets: ['latin'], variable: '--font-signature' });
 
 export const metadata = {
   title: 'Documenso - The Open Source DocuSign Alternative',
@@ -21,20 +28,26 @@ 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.',
   },
 };
 
-export default function RootLayout({ children }: { children: React.ReactNode }) {
+export default async function RootLayout({ children }: { children: React.ReactNode }) {
+  const flags = await getAllAnonymousFlags();
+
   return (
-    <html lang="en" className={fontInter.variable} suppressHydrationWarning>
+    <html
+      lang="en"
+      className={cn(fontInter.variable, fontCaveat.variable)}
+      suppressHydrationWarning
+    >
       <head>
         <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
         <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
@@ -42,9 +55,15 @@ export default function RootLayout({ children }: { children: React.ReactNode })
         <link rel="manifest" href="/site.webmanifest" />
       </head>
 
+      <Suspense>
+        <PostHogPageview />
+      </Suspense>
+
       <body>
-        <PlausibleProvider>{children}</PlausibleProvider>
-        <Toaster />
+        <FeatureFlagProvider initialFlags={flags}>
+          <PlausibleProvider>{children}</PlausibleProvider>
+          <Toaster />
+        </FeatureFlagProvider>
       </body>
     </html>
   );

apps/marketing/src/components/(marketing)/claim-plan-dialog.tsx

@@ -10,6 +10,7 @@ import { usePlausible } from 'next-plausible';
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';
 
+import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
 import {
@@ -43,9 +44,11 @@ export type ClaimPlanDialogProps = {
 
 export const ClaimPlanDialog = ({ className, planId, children }: ClaimPlanDialogProps) => {
   const params = useSearchParams();
-  const { toast } = useToast();
+  const analytics = useAnalytics();
   const event = usePlausible();
 
+  const { toast } = useToast();
+
   const [open, setOpen] = useState(() => params?.get('cancelled') === 'true');
 
   const {
@@ -73,10 +76,12 @@ export const ClaimPlanDialog = ({ className, planId, children }: ClaimPlanDialog
       ]);
 
       event('claim-plan-pricing');
+      analytics.capture('Marketing: Claim plan', { planId, email });
 
       window.location.href = redirectUrl;
     } catch (error) {
       event('claim-plan-failed');
+      analytics.capture('Marketing: Claim plan failure', { planId, email });
 
       toast({
         title: 'Something went wrong',

apps/marketing/src/components/(marketing)/confetti-screen.tsx

@@ -0,0 +1,46 @@
+'use client';
+
+import React, { useEffect, useState } from 'react';
+
+import Confetti from 'react-confetti';
+import { createPortal } from 'react-dom';
+
+import { useIsMounted } from '@documenso/lib/client-only/hooks/use-is-mounted';
+import { useWindowSize } from '@documenso/lib/client-only/hooks/use-window-size';
+
+export default function ConfettiScreen({
+  numberOfPieces: numberOfPiecesProp = 200,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof Confetti> & { duration?: number }) {
+  const isMounted = useIsMounted();
+  const { width, height } = useWindowSize();
+
+  const [numberOfPieces, setNumberOfPieces] = useState(numberOfPiecesProp);
+
+  useEffect(() => {
+    if (!props.duration) {
+      return;
+    }
+
+    const timer = setTimeout(() => {
+      setNumberOfPieces(0);
+    }, props.duration);
+
+    return () => clearTimeout(timer);
+  }, [props.duration]);
+
+  if (!isMounted) {
+    return null;
+  }
+
+  return createPortal(
+    <Confetti
+      {...props}
+      className="w-full"
+      numberOfPieces={numberOfPieces}
+      width={width}
+      height={height}
+    />,
+    document.body,
+  );
+}

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

@@ -17,6 +17,7 @@ const SOCIAL_LINKS = [
 
 const FOOTER_LINKS = [
   { href: '/pricing', text: 'Pricing' },
+  { href: '/single-player-mode', text: 'Single Player Mode' },
   { href: '/blog', text: 'Blog' },
   { href: '/open', text: 'Open' },
   { href: 'https://shop.documenso.com', text: 'Shop', target: '_blank' },

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

@@ -5,6 +5,7 @@ import { HTMLAttributes, useState } from 'react';
 import Image from 'next/image';
 import Link from 'next/link';
 
+import { useFeatureFlags } from '@documenso/lib/client-only/providers/feature-flag';
 import { cn } from '@documenso/ui/lib/utils';
 
 import { HamburgerMenu } from './mobile-hamburger';
@@ -15,11 +16,26 @@ export type HeaderProps = HTMLAttributes<HTMLElement>;
 export const Header = ({ className, ...props }: HeaderProps) => {
   const [isHamburgerMenuOpen, setIsHamburgerMenuOpen] = useState(false);
 
+  const { getFlag } = useFeatureFlags();
+
+  const isSinglePlayerModeMarketingEnabled = getFlag('marketing_header_single_player_mode');
+
   return (
     <header className={cn('flex items-center justify-between', className)} {...props}>
-      <Link href="/" className="z-10" onClick={() => setIsHamburgerMenuOpen(false)}>
-        <Image src="/logo.png" alt="Documenso Logo" width={170} height={25} />
-      </Link>
+      <div className="flex items-center space-x-4">
+        <Link href="/" className="z-10" onClick={() => setIsHamburgerMenuOpen(false)}>
+          <Image src="/logo.png" alt="Documenso Logo" width={170} height={25} />
+        </Link>
+
+        {isSinglePlayerModeMarketingEnabled && (
+          <Link
+            href="/single-player-mode"
+            className="bg-primary rounded-full px-2 py-1 text-xs font-semibold sm:px-3"
+          >
+            Try now!
+          </Link>
+        )}
+      </div>
 
       <div className="hidden items-center gap-x-6 md:flex">
         <Link href="/pricing" className="text-sm font-semibold text-[#8D8D8D] hover:text-[#6D6D6D]">

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

@@ -6,7 +6,9 @@ import Link from 'next/link';
 import { Variants, motion } from 'framer-motion';
 import { Github } from 'lucide-react';
 import { usePlausible } from 'next-plausible';
+import { match } from 'ts-pattern';
 
+import { useFeatureFlags } from '@documenso/lib/client-only/providers/feature-flag';
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
 
@@ -51,6 +53,10 @@ const HeroTitleVariants: Variants = {
 export const Hero = ({ className, ...props }: HeroProps) => {
   const event = usePlausible();
 
+  const { getFlag } = useFeatureFlags();
+
+  const heroMarketingCTA = getFlag('marketing_landing_hero_cta');
+
   const onSignUpClick = () => {
     const el = document.getElementById('email');
 
@@ -122,23 +128,40 @@ export const Hero = ({ className, ...props }: HeroProps) => {
           </Link>
         </motion.div>
 
-        <motion.div
-          variants={HeroTitleVariants}
-          initial="initial"
-          animate="animate"
-          className="mt-8 flex flex-col items-center justify-center gap-x-6 gap-y-4"
-        >
-          <Link
-            href="https://www.producthunt.com/posts/documenso?utm_source=badge-top-post-badge&utm_medium=badge&utm_souce=badge-documenso"
-            target="_blank"
-          >
-            <img
-              src="https://api.producthunt.com/widgets/embed-image/v1/top-post-badge.svg?post_id=395047&theme=light&period=daily"
-              alt="Documenso - The open source DocuSign alternative | Product Hunt"
-              style={{ width: '250px', height: '54px' }}
-            />
-          </Link>
-        </motion.div>
+        {match(heroMarketingCTA)
+          .with('spm', () => (
+            <motion.div
+              variants={HeroTitleVariants}
+              initial="initial"
+              animate="animate"
+              className="border-primary mx-auto mt-8 w-fit rounded-xl border-2 bg-white transition-colors hover:bg-slate-50/60"
+            >
+              <Link href="/single-player-mode" className="block px-4 py-2 text-center">
+                <h2 className="text-xs font-semibold text-[#727272]">Single Player Mode</h2>
+                <h1 className="font-semibold leading-5 text-[#606060]">Self sign documents here</h1>
+              </Link>
+            </motion.div>
+          ))
+          .with('productHunt', () => (
+            <motion.div
+              variants={HeroTitleVariants}
+              initial="initial"
+              animate="animate"
+              className="mt-8 flex flex-col items-center justify-center gap-x-6 gap-y-4"
+            >
+              <Link
+                href="https://www.producthunt.com/posts/documenso?utm_source=badge-top-post-badge&utm_medium=badge&utm_souce=badge-documenso"
+                target="_blank"
+              >
+                <img
+                  src="https://api.producthunt.com/widgets/embed-image/v1/top-post-badge.svg?post_id=395047&theme=light&period=daily"
+                  alt="Documenso - The open source DocuSign alternative | Product Hunt"
+                  style={{ width: '250px', height: '54px' }}
+                />
+              </Link>
+            </motion.div>
+          ))
+          .otherwise(() => null)}
 
         <motion.div
           className="mt-12"

apps/marketing/src/components/(marketing)/mobile-navigation.tsx

@@ -14,6 +14,10 @@ export type MobileNavigationProps = {
 };
 
 export const MENU_NAVIGATION_LINKS = [
+  {
+    href: '/single-player-mode',
+    text: 'Single Player Mode',
+  },
   {
     href: '/blog',
     text: 'Blog',

apps/marketing/src/components/(marketing)/single-player-mode/create-single-player-document.action.ts

@@ -0,0 +1,225 @@
+'use server';
+
+import { createElement } from 'react';
+
+import { DateTime } from 'luxon';
+import { nanoid } from 'nanoid';
+import { PDFDocument } from 'pdf-lib';
+import { match } from 'ts-pattern';
+import { z } from 'zod';
+
+import { mailer } from '@documenso/email/mailer';
+import { render } from '@documenso/email/render';
+import { DocumentSelfSignedEmailTemplate } from '@documenso/email/templates/document-self-signed';
+import { FROM_ADDRESS, FROM_NAME, SERVICE_USER_EMAIL } from '@documenso/lib/constants/email';
+import { insertFieldInPDF } from '@documenso/lib/server-only/pdf/insert-field-in-pdf';
+import { prisma } from '@documenso/prisma';
+import {
+  DocumentDataType,
+  DocumentStatus,
+  FieldType,
+  Prisma,
+  ReadStatus,
+  SendStatus,
+  SigningStatus,
+} from '@documenso/prisma/client';
+
+const ZCreateSinglePlayerDocumentSchema = z.object({
+  document: z.string(),
+  documentName: z.string(),
+  signer: z.object({
+    email: z.string().email().min(1),
+    name: z.string(),
+    signature: z.string(),
+  }),
+  fields: z.array(
+    z.object({
+      page: z.number(),
+      type: z.nativeEnum(FieldType),
+      positionX: z.number(),
+      positionY: z.number(),
+      width: z.number(),
+      height: z.number(),
+    }),
+  ),
+});
+
+export type TCreateSinglePlayerDocumentSchema = z.infer<typeof ZCreateSinglePlayerDocumentSchema>;
+
+/**
+ * Create and self signs a document.
+ *
+ * Returns the document token.
+ */
+export const createSinglePlayerDocument = async (
+  value: TCreateSinglePlayerDocumentSchema,
+): Promise<string> => {
+  const { signer, fields, document, documentName } = ZCreateSinglePlayerDocumentSchema.parse(value);
+
+  const doc = await PDFDocument.load(document);
+  const createdAt = new Date();
+
+  const isBase64 = signer.signature.startsWith('data:image/png;base64,');
+  const signatureImageAsBase64 = isBase64 ? signer.signature : null;
+  const typedSignature = !isBase64 ? signer.signature : null;
+
+  // Update the document with the fields inserted.
+  for (const field of fields) {
+    const isSignatureField = field.type === FieldType.SIGNATURE;
+
+    await insertFieldInPDF(doc, {
+      ...mapField(field, signer),
+      Signature: isSignatureField
+        ? {
+            created: createdAt,
+            signatureImageAsBase64,
+            typedSignature,
+            // Dummy data.
+            id: -1,
+            recipientId: -1,
+            fieldId: -1,
+          }
+        : null,
+      // Dummy data.
+      id: -1,
+      documentId: -1,
+      recipientId: -1,
+    });
+  }
+
+  const pdfBytes = await doc.save();
+
+  const documentToken = await prisma.$transaction(
+    async (tx) => {
+      const documentToken = nanoid();
+
+      // Fetch service user who will be the owner of the document.
+      const serviceUser = await tx.user.findFirstOrThrow({
+        where: {
+          email: SERVICE_USER_EMAIL,
+        },
+      });
+
+      const documentDataBytes = Buffer.from(pdfBytes).toString('base64');
+
+      const { id: documentDataId } = await tx.documentData.create({
+        data: {
+          type: DocumentDataType.BYTES_64,
+          data: documentDataBytes,
+          initialData: documentDataBytes,
+        },
+      });
+
+      // Create document.
+      const document = await tx.document.create({
+        data: {
+          title: documentName,
+          status: DocumentStatus.COMPLETED,
+          documentDataId,
+          userId: serviceUser.id,
+          createdAt,
+        },
+      });
+
+      // Create recipient.
+      const recipient = await tx.recipient.create({
+        data: {
+          documentId: document.id,
+          name: signer.name,
+          email: signer.email,
+          token: documentToken,
+          signedAt: createdAt,
+          readStatus: ReadStatus.OPENED,
+          signingStatus: SigningStatus.SIGNED,
+          sendStatus: SendStatus.SENT,
+        },
+      });
+
+      // Create fields and signatures.
+      await Promise.all(
+        fields.map(async (field) => {
+          const insertedField = await tx.field.create({
+            data: {
+              documentId: document.id,
+              recipientId: recipient.id,
+              ...mapField(field, signer),
+            },
+          });
+
+          if (field.type === FieldType.SIGNATURE || field.type === FieldType.FREE_SIGNATURE) {
+            await tx.signature.create({
+              data: {
+                fieldId: insertedField.id,
+                signatureImageAsBase64,
+                typedSignature,
+                recipientId: recipient.id,
+              },
+            });
+          }
+        }),
+      );
+
+      return documentToken;
+    },
+    // Test values.
+    {
+      maxWait: 30000,
+      timeout: 30000,
+    },
+  );
+
+  // Todo: Handle `downloadLink`
+  const template = createElement(DocumentSelfSignedEmailTemplate, {
+    downloadLink: 'https://documenso.com',
+    documentName: documentName,
+    assetBaseUrl: process.env.NEXT_PUBLIC_WEBAPP_URL || 'http://localhost:3000',
+  });
+
+  // Send email to signer.
+  await mailer.sendMail({
+    to: {
+      address: signer.email,
+      name: signer.name,
+    },
+    from: {
+      name: FROM_NAME,
+      address: FROM_ADDRESS,
+    },
+    subject: 'Document signed',
+    html: render(template),
+    text: render(template, { plainText: true }),
+  });
+
+  return documentToken;
+};
+
+/**
+ * Map the fields provided by the user to fields compatible with Prisma.
+ *
+ * Signature fields are handled separately.
+ *
+ * @param field The field passed in by the user.
+ * @param signer The details of the person who is signing this document.
+ * @returns A field compatible with Prisma.
+ */
+const mapField = (
+  field: TCreateSinglePlayerDocumentSchema['fields'][number],
+  signer: TCreateSinglePlayerDocumentSchema['signer'],
+) => {
+  const customText = match(field.type)
+    .with(FieldType.DATE, () => DateTime.now().toFormat('yyyy-MM-dd hh:mm a'))
+    .with(FieldType.EMAIL, () => signer.email)
+    .with(FieldType.NAME, () => signer.name)
+    .otherwise(() => '');
+
+  return {
+    type: field.type,
+    page: field.page,
+    positionX: new Prisma.Decimal(field.positionX),
+    positionY: new Prisma.Decimal(field.positionY),
+    width: new Prisma.Decimal(field.width),
+    height: new Prisma.Decimal(field.height),
+    customText,
+    inserted: true,
+  };
+};

apps/marketing/src/components/(marketing)/single-player-mode/single-player-mode-success.tsx

@@ -0,0 +1,129 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+import Link from 'next/link';
+
+import { Share } from 'lucide-react';
+
+import { getFile } from '@documenso/lib/universal/upload/get-file';
+import { DocumentWithRecipient } from '@documenso/prisma/types/document-with-recipient';
+import DocumentDialog from '@documenso/ui/components/document/document-dialog';
+import { DocumentDownloadButton } from '@documenso/ui/components/document/document-download-button';
+import { SigningCard3D } from '@documenso/ui/components/signing-card';
+import { cn } from '@documenso/ui/lib/utils';
+import { Button } from '@documenso/ui/primitives/button';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+import signingCelebration from '~/assets/signing-celebration.png';
+import ConfettiScreen from '~/components/(marketing)/confetti-screen';
+
+import { DocumentStatus } from '.prisma/client';
+
+interface SinglePlayerModeSuccessProps {
+  className?: string;
+  document: DocumentWithRecipient;
+}
+
+export default function SinglePlayerModeSuccess({
+  className,
+  document,
+}: SinglePlayerModeSuccessProps) {
+  const [showDocumentDialog, setShowDocumentDialog] = useState(false);
+  const [isFetchingDocumentFile, setIsFetchingDocumentFile] = useState(false);
+  const [documentFile, setDocumentFile] = useState<string | null>(null);
+
+  const { toast } = useToast();
+
+  const handleShowDocumentDialog = async () => {
+    if (isFetchingDocumentFile) {
+      return;
+    }
+
+    setIsFetchingDocumentFile(true);
+
+    try {
+      const data = await getFile(document.documentData);
+
+      setDocumentFile(Buffer.from(data).toString('base64'));
+
+      setShowDocumentDialog(true);
+    } catch {
+      toast({
+        title: 'Something went wrong.',
+        description: 'We were unable to retrieve the document at this time. Please try again.',
+        variant: 'destructive',
+        duration: 7500,
+      });
+    }
+
+    setIsFetchingDocumentFile(false);
+  };
+
+  useEffect(() => {
+    window.scrollTo({ top: 0 });
+  }, []);
+
+  return (
+    <div className="flex min-h-[calc(100vh-10rem)] flex-col items-center justify-center sm:min-h-[calc(100vh-13rem)]">
+      <ConfettiScreen duration={3000} gravity={0.075} initialVelocityY={50} wind={0.005} />
+
+      <h2 className="text-center text-2xl font-semibold leading-normal md:text-3xl lg:mb-2 lg:text-4xl">
+        You have signed
+      </h2>
+      <h3 className="text-foreground/80 mb-6 text-center text-lg font-semibold md:text-xl lg:mb-8 lg:text-3xl">
+        {document.title}
+      </h3>
+
+      <SigningCard3D
+        name={document.Recipient.name || document.Recipient.email}
+        signingCelebrationImage={signingCelebration}
+      />
+
+      <div className="mt-8 w-full">
+        <div className={cn('flex flex-col items-center', className)}>
+          <div className="grid w-full max-w-sm grid-cols-2 gap-4">
+            {/* TODO: Hook this up */}
+            <Button variant="outline" className="flex-1" disabled>
+              <Share className="mr-2 h-5 w-5" />
+              Share
+            </Button>
+
+            <DocumentDownloadButton
+              className="flex-1"
+              fileName={document.title}
+              documentData={document.documentData}
+              disabled={document.status !== DocumentStatus.COMPLETED}
+            />
+
+            <Button
+              onClick={async () => handleShowDocumentDialog()}
+              loading={isFetchingDocumentFile}
+              className="col-span-2"
+            >
+              Show document
+            </Button>
+          </div>
+        </div>
+      </div>
+
+      <p className="text-muted-foreground/60 mt-36 text-center text-sm">
+        View the{' '}
+        <Link
+          href="/pricing"
+          target="_blank"
+          className="text-documenso-700 hover:text-documenso-600 whitespace-nowrap"
+        >
+          community plan
+        </Link>{' '}
+        to access the full range of features provided by Documenso
+      </p>
+
+      <DocumentDialog
+        document={documentFile ?? ''}
+        open={showDocumentDialog}
+        onOpenChange={setShowDocumentDialog}
+      />
+    </div>
+  );
+}

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/feature-flag/all.ts

@@ -0,0 +1,7 @@
+import handlerFeatureFlagAll from '@documenso/lib/server-only/feature-flags/all';
+
+export const config = {
+  runtime: 'edge',
+};
+
+export default handlerFeatureFlagAll;

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

@@ -0,0 +1,7 @@
+import handlerFeatureFlagGet from '@documenso/lib/server-only/feature-flags/get';
+
+export const config = {
+  runtime: 'edge',
+};
+
+export default handlerFeatureFlagGet;

apps/marketing/src/providers/posthog.tsx

@@ -0,0 +1,39 @@
+'use client';
+
+import { useEffect } from 'react';
+
+import { usePathname, useSearchParams } from 'next/navigation';
+
+import posthog from 'posthog-js';
+
+import { extractPostHogConfig } from '@documenso/lib/constants/feature-flags';
+
+export function PostHogPageview() {
+  const postHogConfig = extractPostHogConfig();
+
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+
+  if (typeof window !== 'undefined' && postHogConfig) {
+    posthog.init(postHogConfig.key, {
+      api_host: postHogConfig.host,
+      disable_session_recording: true,
+    });
+  }
+
+  useEffect(() => {
+    if (!postHogConfig || !pathname) {
+      return;
+    }
+
+    let url = window.origin + pathname;
+    if (searchParams && searchParams.toString()) {
+      url = url + `?${searchParams.toString()}`;
+    }
+    posthog.capture('$pageview', {
+      $current_url: url,
+    });
+  }, [pathname, searchParams, postHogConfig]);
+
+  return null;
+}

apps/web/next.config.js

@@ -2,7 +2,7 @@
 const path = require('path');
 const { version } = require('./package.json');
 
-const { parsed: env } = require('dotenv').config({
+require('dotenv').config({
   path: path.join(__dirname, '../../.env.local'),
 });
 
@@ -22,6 +22,7 @@ const config = {
   ],
   env: {
     APP_VERSION: version,
+    NEXT_PUBLIC_PROJECT: 'web',
   },
   modularizeImports: {
     'lucide-react': {

apps/web/package.json

@@ -21,10 +21,11 @@
     "@tanstack/react-query": "^4.29.5",
     "formidable": "^2.1.1",
     "framer-motion": "^10.12.8",
-    "lucide-react": "^0.214.0",
+    "lucide-react": "^0.277.0",
     "luxon": "^3.4.0",
     "micro": "^10.0.1",
-    "next": "13.4.12",
+    "nanoid": "^4.0.2",
+    "next": "13.4.19",
     "next-auth": "4.22.3",
     "next-plausible": "^3.10.1",
     "next-themes": "^0.2.1",
@@ -49,4 +50,4 @@
     "@types/react": "18.2.18",
     "@types/react-dom": "18.2.7"
   }
-}
+}

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/src/app/(dashboard)/documents/[id]/edit-document.tsx

@@ -55,21 +55,18 @@ export const EditDocumentForm = ({
       title: 'Add Signers',
       description: 'Add the people who will sign the document.',
       stepIndex: 1,
-      onSubmit: () => onAddSignersFormSubmit,
     },
     fields: {
       title: 'Add Fields',
       description: 'Add all relevant fields for each recipient.',
       stepIndex: 2,
       onBackStep: () => setStep('signers'),
-      onSubmit: () => onAddFieldsFormSubmit,
     },
     subject: {
       title: 'Add Subject',
       description: 'Add the subject and message you wish to send to signers.',
       stepIndex: 3,
       onBackStep: () => setStep('fields'),
-      onSubmit: () => onAddSubjectFormSubmit,
     },
   };
 

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

@@ -68,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

@@ -4,12 +4,12 @@ import { redirect } from 'next/navigation';
 import { createCustomer } from '@documenso/ee/server-only/stripe/create-customer';
 import { getPortalSession } from '@documenso/ee/server-only/stripe/get-portal-session';
 import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-session';
+import { getServerComponentFlag } from '@documenso/lib/server-only/feature-flags/get-server-component-feature-flag';
 import { getSubscriptionByUserId } from '@documenso/lib/server-only/subscription/get-subscription-by-user-id';
 import { SubscriptionStatus } from '@documenso/prisma/client';
 import { Button } from '@documenso/ui/primitives/button';
 
 import { LocaleDate } from '~/components/formatter/locale-date';
-import { getServerComponentFlag } from '~/helpers/get-server-component-feature-flag';
 
 export default async function BillingSettingsPage() {
   const user = await getRequiredServerComponentSession();
@@ -35,7 +35,7 @@ export default async function BillingSettingsPage() {
   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`,
     });
   }
 
@@ -43,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 && (
@@ -67,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/(signing)/sign/[token]/complete/page.tsx

@@ -8,10 +8,11 @@ import { getDocumentAndSenderByToken } from '@documenso/lib/server-only/document
 import { getFieldsForToken } from '@documenso/lib/server-only/field/get-fields-for-token';
 import { getRecipientByToken } from '@documenso/lib/server-only/recipient/get-recipient-by-token';
 import { DocumentStatus, FieldType } from '@documenso/prisma/client';
+import { DocumentDownloadButton } from '@documenso/ui/components/document/document-download-button';
+import { SigningCard } from '@documenso/ui/components/signing-card';
 import { Button } from '@documenso/ui/primitives/button';
 
-import { DownloadButton } from './download-button';
-import { SigningCard } from './signing-card';
+import signingCelebration from '~/assets/signing-celebration.png';
 
 export type CompletedSigningPageProps = {
   params: {
@@ -53,7 +54,7 @@ export default async function CompletedSigningPage({
   return (
     <div className="flex flex-col items-center pt-24">
       {/* Card with recipient */}
-      <SigningCard name={recipientName} />
+      <SigningCard name={recipientName} signingCelebrationImage={signingCelebration} />
 
       <div className="mt-6">
         {match(document.status)
@@ -94,7 +95,7 @@ export default async function CompletedSigningPage({
           Share
         </Button>
 
-        <DownloadButton
+        <DocumentDownloadButton
           className="flex-1"
           fileName={document.title}
           documentData={documentData}
@@ -103,7 +104,7 @@ export default async function CompletedSigningPage({
       </div>
 
       <p className="text-muted-foreground/60 mt-36 text-sm">
-        Want so send slick signing links like this one?{' '}
+        Want to send slick signing links like this one?{' '}
         <Link href="https://documenso.com" className="text-documenso-700 hover:text-documenso-600">
           Check out Documenso.
         </Link>

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

@@ -1,67 +0,0 @@
-'use client';
-
-import Image from 'next/image';
-
-import { motion } from 'framer-motion';
-
-import { Card, CardContent } from '@documenso/ui/primitives/card';
-
-import signingCelebration from '~/assets/signing-celebration.png';
-
-export type SigningCardProps = {
-  name: string;
-};
-
-export const SigningCard = ({ name }: SigningCardProps) => {
-  return (
-    <div className="relative w-full max-w-xs md:max-w-sm">
-      <Card
-        className="group mx-auto flex aspect-[21/9] w-full items-center justify-center"
-        degrees={-145}
-        gradient
-      >
-        <CardContent
-          className="font-signature p-6 text-center"
-          style={{
-            container: 'main',
-          }}
-        >
-          <span
-            className="text-muted-foreground/60 group-hover:text-primary/80 break-all font-semibold duration-300"
-            style={{
-              fontSize: `max(min(4rem, ${(100 / name.length / 2).toFixed(4)}cqw), 1.875rem)`,
-            }}
-          >
-            {name}
-          </span>
-        </CardContent>
-      </Card>
-
-      <motion.div
-        className="absolute -inset-32 -z-10 flex items-center justify-center md:-inset-44 xl:-inset-60 2xl:-inset-80"
-        initial={{
-          opacity: 0,
-          scale: 0.8,
-        }}
-        animate={{
-          scale: 1,
-          opacity: 0.5,
-        }}
-        transition={{
-          delay: 0.5,
-          duration: 0.5,
-        }}
-      >
-        <Image
-          src={signingCelebration}
-          alt="background pattern"
-          className="w-full"
-          style={{
-            mask: 'radial-gradient(rgba(255, 255, 255, 1) 0%, transparent 67%)',
-            WebkitMask: 'radial-gradient(rgba(255, 255, 255, 1) 0%, transparent 67%)',
-          }}
-        />
-      </motion.div>
-    </div>
-  );
-};

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

@@ -1,4 +1,4 @@
-import { notFound, redirect } from 'next/navigation';
+import { notFound } from 'next/navigation';
 
 import { match } from 'ts-pattern';
 
@@ -9,7 +9,7 @@ import { viewedDocument } from '@documenso/lib/server-only/document/viewed-docum
 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 { DocumentStatus, FieldType, SigningStatus } from '@documenso/prisma/client';
+import { FieldType } from '@documenso/prisma/client';
 import { Card, CardContent } from '@documenso/ui/primitives/card';
 import { ElementVisible } from '@documenso/ui/primitives/element-visible';
 import { LazyPDFViewer } from '@documenso/ui/primitives/lazy-pdf-viewer';
@@ -53,13 +53,6 @@ export default async function SigningPage({ params: { token } }: SigningPageProp
 
   const user = await getServerComponentSession();
 
-  if (
-    document.status === DocumentStatus.COMPLETED ||
-    recipient.signingStatus === SigningStatus.SIGNED
-  ) {
-    redirect(`/sign/${token}/complete`);
-  }
-
   return (
     <SigningProvider email={recipient.email} fullName={recipient.name} signature={user?.signature}>
       <div className="mx-auto w-full max-w-screen-xl px-4 md:px-8">

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

@@ -2,12 +2,11 @@
 
 import React from 'react';
 
+import { useFieldPageCoords } from '@documenso/lib/client-only/hooks/use-field-page-coords';
 import { FieldWithSignature } from '@documenso/prisma/types/field-with-signature';
 import { cn } from '@documenso/ui/lib/utils';
 import { Card, CardContent } from '@documenso/ui/primitives/card';
 
-import { useFieldPageCoords } from '~/hooks/use-field-page-coords';
-
 export type SignatureFieldProps = {
   field: FieldWithSignature;
   loading?: boolean;

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

@@ -2,15 +2,15 @@ import { Suspense } from 'react';
 
 import { Caveat, Inter } from 'next/font/google';
 
+import { FeatureFlagProvider } from '@documenso/lib/client-only/providers/feature-flag';
 import { LocaleProvider } from '@documenso/lib/client-only/providers/locale';
+import { getServerComponentAllFlags } from '@documenso/lib/server-only/feature-flags/get-server-component-feature-flag';
 import { getLocale } from '@documenso/lib/server-only/headers/get-locale';
 import { TrpcProvider } from '@documenso/trpc/react';
 import { cn } from '@documenso/ui/lib/utils';
 import { Toaster } from '@documenso/ui/primitives/toaster';
 import { TooltipProvider } from '@documenso/ui/primitives/tooltip';
 
-import { getServerComponentAllFlags } from '~/helpers/get-server-component-feature-flag';
-import { FeatureFlagProvider } from '~/providers/feature-flag';
 import { ThemeProvider } from '~/providers/next-theme';
 import { PlausibleProvider } from '~/providers/plausible';
 import { PostHogPageview } from '~/providers/posthog';
@@ -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/components/(dashboard)/layout/profile-dropdown.tsx

@@ -16,6 +16,7 @@ import {
 import { signOut } from 'next-auth/react';
 import { useTheme } from 'next-themes';
 
+import { useFeatureFlags } from '@documenso/lib/client-only/providers/feature-flag';
 import { isAdmin } from '@documenso/lib/next-auth/guards/is-admin';
 import { recipientInitials } from '@documenso/lib/utils/recipient-formatter';
 import { User } from '@documenso/prisma/client';
@@ -30,8 +31,6 @@ import {
   DropdownMenuTrigger,
 } from '@documenso/ui/primitives/dropdown-menu';
 
-import { useFeatureFlags } from '~/providers/feature-flag';
-
 export type ProfileDropdownProps = {
   user: User;
 };

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/(dashboard)/settings/layout/desktop-nav.tsx

@@ -7,11 +7,10 @@ import { usePathname } from 'next/navigation';
 
 import { CreditCard, Key, User } from 'lucide-react';
 
+import { useFeatureFlags } from '@documenso/lib/client-only/providers/feature-flag';
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
 
-import { useFeatureFlags } from '~/providers/feature-flag';
-
 export type DesktopNavProps = HTMLAttributes<HTMLDivElement>;
 
 export const DesktopNav = ({ className, ...props }: DesktopNavProps) => {

apps/web/src/components/(dashboard)/settings/layout/mobile-nav.tsx

@@ -7,11 +7,10 @@ import { usePathname } from 'next/navigation';
 
 import { CreditCard, Key, User } from 'lucide-react';
 
+import { useFeatureFlags } from '@documenso/lib/client-only/providers/feature-flag';
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
 
-import { useFeatureFlags } from '~/providers/feature-flag';
-
 export type MobileNavProps = HTMLAttributes<HTMLDivElement>;
 
 export const MobileNav = ({ className, ...props }: MobileNavProps) => {

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/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/feature-flag/all.ts

@@ -1,44 +1,7 @@
-import { NextRequest, NextResponse } from 'next/server';
-
-import { getToken } from 'next-auth/jwt';
-
-import { LOCAL_FEATURE_FLAGS } from '@documenso/lib/constants/feature-flags';
-
-import PostHogServerClient from '~/helpers/get-post-hog-server-client';
-
-import { extractDistinctUserId, mapJwtToFlagProperties } from './get';
+import handlerFeatureFlagAll from '@documenso/lib/server-only/feature-flags/all';
 
 export const config = {
   runtime: 'edge',
 };
 
-/**
- * Get all the evaluated feature flags based on the current user if possible.
- */
-export default async function handler(req: Request) {
-  const requestHeaders = Object.fromEntries(req.headers.entries());
-
-  const nextReq = new NextRequest(req, {
-    headers: requestHeaders,
-  });
-
-  const token = await getToken({ req: nextReq });
-
-  const postHog = PostHogServerClient();
-
-  // Return the local feature flags if PostHog is not enabled, true by default.
-  // The front end should not call this API if PostHog is not enabled to reduce network requests.
-  if (!postHog) {
-    return NextResponse.json(LOCAL_FEATURE_FLAGS);
-  }
-
-  const distinctId = extractDistinctUserId(token, nextReq);
-
-  const featureFlags = await postHog.getAllFlags(distinctId, mapJwtToFlagProperties(token));
-
-  const res = NextResponse.json(featureFlags);
-
-  res.headers.set('Cache-Control', 'public, s-maxage=60, stale-while-revalidate=300');
-
-  return res;
-}
+export default handlerFeatureFlagAll;

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

@@ -1,122 +1,7 @@
-import { NextRequest, NextResponse } from 'next/server';
-
-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';
+import handlerFeatureFlagGet from '@documenso/lib/server-only/feature-flags/get';
 
 export const config = {
   runtime: 'edge',
 };
 
-/**
- * Evaluate a single feature flag based on the current user if possible.
- *
- * @param req The request with a query parameter `flag`. Example request URL: /api/feature-flag/get?flag=flag-name
- * @returns A Response with the feature flag value.
- */
-export default async function handler(req: Request) {
-  const { searchParams } = new URL(req.url ?? '');
-  const flag = searchParams.get('flag');
-
-  const requestHeaders = Object.fromEntries(req.headers.entries());
-
-  const nextReq = new NextRequest(req, {
-    headers: requestHeaders,
-  });
-
-  const token = await getToken({ req: nextReq });
-
-  if (!flag) {
-    return NextResponse.json(
-      {
-        error: 'Missing flag query parameter.',
-      },
-      {
-        status: 400,
-        headers: {
-          'content-type': 'application/json',
-        },
-      },
-    );
-  }
-
-  const postHog = PostHogServerClient();
-
-  // Return the local feature flags if PostHog is not enabled, true by default.
-  // The front end should not call this API if PostHog is disabled to reduce network requests.
-  if (!postHog) {
-    return NextResponse.json(LOCAL_FEATURE_FLAGS[flag] ?? true);
-  }
-
-  const distinctId = extractDistinctUserId(token, nextReq);
-
-  const featureFlag = await postHog.getFeatureFlag(flag, distinctId, mapJwtToFlagProperties(token));
-
-  const res = NextResponse.json(featureFlag);
-
-  res.headers.set('Cache-Control', 'public, s-maxage=60, stale-while-revalidate=300');
-
-  return res;
-}
-
-/**
- * Map a JWT to properties which are consumed by PostHog to evaluate feature flags.
- *
- * @param jwt The JWT of the current user.
- * @returns A map of properties which are consumed by PostHog.
- */
-export const mapJwtToFlagProperties = (
-  jwt?: JWT | null,
-): {
-  groups?: Record<string, string>;
-  personProperties?: Record<string, string>;
-  groupProperties?: Record<string, Record<string, string>>;
-} => {
-  return {
-    personProperties: {
-      email: jwt?.email ?? '',
-    },
-    groupProperties: {
-      // Add properties to group users into different groups, such as billing plan.
-    },
-  };
-};
-
-/**
- * Extract a distinct ID from a JWT and request.
- *
- * Will fallback to a random ID if no ID could be extracted from either the JWT or request.
- *
- * @param jwt The JWT of the current user.
- * @param request Request potentially containing a PostHog `distinct_id` cookie.
- * @returns A distinct user ID.
- */
-export const extractDistinctUserId = (jwt: JWT | null, request: NextRequest): string => {
-  const config = extractPostHogConfig();
-
-  const email = jwt?.email;
-  const userId = jwt?.id.toString();
-
-  let fallbackDistinctId = nanoid();
-
-  if (config) {
-    try {
-      const postHogCookie = JSON.parse(
-        request.cookies.get(`ph_${config.key}_posthog`)?.value ?? '',
-      );
-
-      const postHogDistinctId = postHogCookie['distinct_id'];
-
-      if (typeof postHogDistinctId === 'string') {
-        fallbackDistinctId = postHogDistinctId;
-      }
-    } catch {
-      // Do nothing.
-    }
-  }
-
-  return email ?? userId ?? fallbackDistinctId;
-};
+export default handlerFeatureFlagGet;

packages/email/package.json

@@ -17,11 +17,12 @@
   },
   "dependencies": {
     "@react-email/components": "^0.0.7",
-    "nodemailer": "^6.9.3"
+    "nodemailer": "^6.9.3",
+    "react-email": "^1.9.4"
   },
   "devDependencies": {
-    "@documenso/tsconfig": "*",
     "@documenso/tailwind-config": "*",
+    "@documenso/tsconfig": "*",
     "@types/nodemailer": "^6.4.8",
     "tsup": "^7.1.0"
   }

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

@@ -4,14 +4,12 @@ import * as config from '@documenso/tailwind-config';
 
 export interface TemplateDocumentCompletedProps {
   downloadLink: string;
-  reviewLink: string;
   documentName: string;
   assetBaseUrl: string;
 }
 
 export const TemplateDocumentCompleted = ({
   downloadLink,
-  reviewLink,
   documentName,
   assetBaseUrl,
 }: TemplateDocumentCompletedProps) => {
@@ -44,17 +42,17 @@ export const TemplateDocumentCompleted = ({
         </Text>
 
         <Text className="my-1 text-center text-base text-slate-400">
-          Continue by downloading or reviewing the document.
+          Continue by downloading the document.
         </Text>
 
         <Section className="mb-6 mt-8 text-center">
-          <Button
+          {/* <Button
             className="mr-4 inline-flex items-center justify-center rounded-lg border border-solid border-slate-200 px-4 py-2 text-center text-sm font-medium text-black no-underline"
             href={reviewLink}
           >
             <Img src={getAssetUrl('/static/review.png')} className="-mb-1 mr-2 inline h-5 w-5" />
             Review
-          </Button>
+          </Button> */}
           <Button
             className="inline-flex items-center justify-center rounded-lg border border-solid border-slate-200 px-4 py-2 text-center text-sm font-medium text-black no-underline"
             href={downloadLink}

packages/email/template-components/template-document-self-signed.tsx

@@ -0,0 +1,69 @@
+import { Button, Img, Section, Tailwind, Text } from '@react-email/components';
+
+import * as config from '@documenso/tailwind-config';
+
+export interface TemplateDocumentSelfSignedProps {
+  downloadLink: string;
+  documentName: string;
+  assetBaseUrl: string;
+}
+
+export const TemplateDocumentSelfSigned = ({
+  downloadLink,
+  documentName,
+  assetBaseUrl,
+}: TemplateDocumentSelfSignedProps) => {
+  const getAssetUrl = (path: string) => {
+    return new URL(path, assetBaseUrl).toString();
+  };
+
+  return (
+    <Tailwind
+      config={{
+        theme: {
+          extend: {
+            colors: config.theme.extend.colors,
+          },
+        },
+      }}
+    >
+      <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>
+
+        <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
+        </Text>
+
+        <Text className="text-primary mb-0 text-center text-lg font-semibold">
+          You have signed “{documentName}”
+        </Text>
+
+        <Text className="my-1 text-center text-base text-slate-400">
+          Check out our plans to access the full suite of features.
+        </Text>
+
+        <Section className="mb-6 mt-8 text-center">
+          <Button
+            className="mr-4 inline-flex items-center justify-center rounded-lg border border-solid border-slate-200 px-4 py-2 text-center text-sm font-medium text-black no-underline"
+            href="https://documenso.com/pricing"
+          >
+            <Img src={getAssetUrl('/static/review.png')} className="-mb-1 mr-2 inline h-5 w-5" />
+            View plans
+          </Button>
+          <Button
+            className="inline-flex items-center justify-center rounded-lg border border-solid border-slate-200 px-4 py-2 text-center text-sm font-medium text-black no-underline"
+            href={downloadLink}
+          >
+            <Img src={getAssetUrl('/static/download.png')} className="-mb-1 mr-2 inline h-5 w-5" />
+            Download
+          </Button>
+        </Section>
+      </Section>
+    </Tailwind>
+  );
+};
+
+export default TemplateDocumentSelfSigned;

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-completed.tsx

@@ -21,7 +21,6 @@ export type DocumentCompletedEmailTemplateProps = Partial<TemplateDocumentComple
 
 export const DocumentCompletedEmailTemplate = ({
   downloadLink = 'https://documenso.com',
-  reviewLink = 'https://documenso.com',
   documentName = 'Open Source Pledge.pdf',
   assetBaseUrl = 'http://localhost:3002',
 }: DocumentCompletedEmailTemplateProps) => {
@@ -56,7 +55,6 @@ export const DocumentCompletedEmailTemplate = ({
 
                 <TemplateDocumentCompleted
                   downloadLink={downloadLink}
-                  reviewLink={reviewLink}
                   documentName={documentName}
                   assetBaseUrl={assetBaseUrl}
                 />

packages/email/templates/document-self-signed.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 {
+  TemplateDocumentSelfSigned,
+  TemplateDocumentSelfSignedProps,
+} from '../template-components/template-document-self-signed';
+import TemplateFooter from '../template-components/template-footer';
+
+export type DocumentSelfSignedTemplateProps = TemplateDocumentSelfSignedProps;
+
+export const DocumentSelfSignedEmailTemplate = ({
+  downloadLink = 'https://documenso.com',
+  documentName = 'Open Source Pledge.pdf',
+  assetBaseUrl = 'http://localhost:3002',
+}: DocumentSelfSignedTemplateProps) => {
+  const previewText = `Completed Document`;
+
+  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 font-sans">
+          <Section className="bg-white">
+            <Container className="mx-auto mb-2 mt-8 max-w-xl rounded-lg border border-solid border-slate-200 p-2 backdrop-blur-sm">
+              <Section className="p-2">
+                <Img
+                  src={getAssetUrl('/static/logo.png')}
+                  alt="Documenso Logo"
+                  className="mb-4 h-6"
+                />
+
+                <TemplateDocumentSelfSigned
+                  downloadLink={downloadLink}
+                  documentName={documentName}
+                  assetBaseUrl={assetBaseUrl}
+                />
+              </Section>
+            </Container>
+
+            <Container className="mx-auto max-w-xl">
+              <TemplateFooter />
+            </Container>
+          </Section>
+        </Body>
+      </Tailwind>
+    </Html>
+  );
+};
+
+export default DocumentSelfSignedEmailTemplate;

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

@@ -7,7 +7,7 @@
     "@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",
@@ -15,4 +15,4 @@
     "eslint-plugin-react": "^7.32.2",
     "typescript": "^5.1.6"
   }
-}
+}

packages/lib/client-only/hooks/use-analytics.ts

@@ -0,0 +1,61 @@
+import { posthog } from 'posthog-js';
+
+import { useFeatureFlags } from '@documenso/lib/client-only/providers/feature-flag';
+import {
+  FEATURE_FLAG_GLOBAL_SESSION_RECORDING,
+  extractPostHogConfig,
+} from '@documenso/lib/constants/feature-flags';
+
+export function useAnalytics() {
+  const featureFlags = useFeatureFlags();
+  const isPostHogEnabled = extractPostHogConfig();
+
+  /**
+   * Capture an analytic event.
+   *
+   * @param event The event name.
+   * @param properties Properties to attach to the event.
+   */
+  const capture = (event: string, properties?: Record<string, unknown>) => {
+    if (!isPostHogEnabled) {
+      return;
+    }
+
+    posthog.capture(event, properties);
+  };
+
+  /**
+   * Start the session recording.
+   *
+   * @param eventFlag The event to check against feature flags to determine whether tracking is enabled.
+   */
+  const startSessionRecording = (eventFlag?: string) => {
+    const isSessionRecordingEnabled = featureFlags.getFlag(FEATURE_FLAG_GLOBAL_SESSION_RECORDING);
+    const isSessionRecordingEnabledForEvent = Boolean(eventFlag && featureFlags.getFlag(eventFlag));
+
+    if (!isPostHogEnabled || !isSessionRecordingEnabled || !isSessionRecordingEnabledForEvent) {
+      return;
+    }
+
+    posthog.startSessionRecording();
+  };
+
+  /**
+   * Stop the current session recording.
+   */
+  const stopSessionRecording = () => {
+    const isSessionRecordingEnabled = featureFlags.getFlag(FEATURE_FLAG_GLOBAL_SESSION_RECORDING);
+
+    if (!isPostHogEnabled || !isSessionRecordingEnabled) {
+      return;
+    }
+
+    posthog.stopSessionRecording();
+  };
+
+  return {
+    capture,
+    startSessionRecording,
+    stopSessionRecording,
+  };
+}

packages/lib/client-only/hooks/use-element-scale-size.ts

@@ -0,0 +1,85 @@
+/* eslint-disable @typescript-eslint/consistent-type-assertions */
+import { RefObject, useEffect, useState } from 'react';
+
+/**
+ * Calculate the width and height of a text element.
+ *
+ * @param text The text to calculate the width and height of.
+ * @param fontSize The font size to apply to the text.
+ * @param fontFamily The font family to apply to the text.
+ * @returns Returns the width and height of the text.
+ */
+function calculateTextDimensions(
+  text: string,
+  fontSize: string,
+  fontFamily: string,
+): { width: number; height: number } {
+  // Reuse old canvas if available.
+  let canvas = (calculateTextDimensions as { canvas?: HTMLCanvasElement }).canvas;
+
+  if (!canvas) {
+    canvas = document.createElement('canvas');
+    (calculateTextDimensions as { canvas?: HTMLCanvasElement }).canvas = canvas;
+  }
+
+  const context = canvas.getContext('2d');
+  if (!context) {
+    return { width: 0, height: 0 };
+  }
+
+  context.font = `${fontSize} ${fontFamily}`;
+  const metrics = context.measureText(text);
+
+  return {
+    width: metrics.width,
+    height: metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent,
+  };
+}
+
+/**
+ * Calculate the scaling size to apply to a text to fit it within a container.
+ *
+ * @param container The container dimensions to fit the text within.
+ * @param text The text to fit within the container.
+ * @param fontSize The font size to apply to the text.
+ * @param fontFamily The font family to apply to the text.
+ * @returns Returns a value between 0 and 1 which represents the scaling factor to apply to the text.
+ */
+export const calculateTextScaleSize = (
+  container: { width: number; height: number },
+  text: string,
+  fontSize: string,
+  fontFamily: string,
+) => {
+  const { width, height } = calculateTextDimensions(text, fontSize, fontFamily);
+  return Math.min(container.width / width, container.height / height, 1);
+};
+
+/**
+ * Given a container and child element, calculate the scaling size to apply to the child.
+ */
+export function useElementScaleSize(
+  container: { width: number; height: number },
+  child: RefObject<HTMLElement | null>,
+  fontSize: number,
+  fontFamily: string,
+) {
+  const [scalingFactor, setScalingFactor] = useState(1);
+
+  useEffect(() => {
+    if (!child.current) {
+      return;
+    }
+
+    const scaleSize = calculateTextScaleSize(
+      container,
+      child.current.innerText,
+      `${fontSize}px`,
+      fontFamily,
+    );
+
+    setScalingFactor(scaleSize);
+  }, [child, container, fontFamily, fontSize]);
+
+  return scalingFactor;
+}

packages/lib/client-only/hooks/use-is-mounted.ts

@@ -0,0 +1,11 @@
+import { useEffect, useState } from 'react';
+
+export const useIsMounted = () => {
+  const [isMounted, setIsMounted] = useState(false);
+
+  useEffect(() => {
+    setIsMounted(true);
+  }, []);
+
+  return isMounted;
+};

packages/lib/client-only/providers/feature-flag.tsx

@@ -7,8 +7,7 @@ import {
   LOCAL_FEATURE_FLAGS,
   isFeatureFlagEnabled,
 } from '@documenso/lib/constants/feature-flags';
-
-import { getAllFlags } from '~/helpers/get-feature-flag';
+import { getAllFlags } from '@documenso/lib/universal/get-feature-flag';
 
 import { TFeatureFlagValue } from './feature-flag.types';
 

packages/lib/constants/app.ts

@@ -0,0 +1,8 @@
+export const IS_APP_MARKETING = process.env.NEXT_PUBLIC_PROJECT === 'marketing';
+export const IS_APP_WEB = process.env.NEXT_PUBLIC_PROJECT === 'web';
+
+export const APP_FOLDER = IS_APP_MARKETING ? 'marketing' : 'web';
+
+export const APP_BASE_URL = IS_APP_WEB
+  ? process.env.NEXT_PUBLIC_WEBAPP_URL
+  : process.env.NEXT_PUBLIC_MARKETING_URL;

packages/lib/constants/email.ts

@@ -0,0 +1,4 @@
+export const FROM_ADDRESS = process.env.NEXT_PRIVATE_SMTP_FROM_ADDRESS || 'noreply@documenso.com';
+export const FROM_NAME = process.env.NEXT_PRIVATE_SMTP_FROM_NAME || 'Documenso';
+
+export const SERVICE_USER_EMAIL = 'serviceaccount@documenso.com';

packages/lib/constants/feature-flags.ts

@@ -1,3 +1,8 @@
+/**
+ * The flag name for global session recording feature flag.
+ */
+export const FEATURE_FLAG_GLOBAL_SESSION_RECORDING = 'global_session_recording';
+
 /**
  * How frequent to poll for new feature flags in milliseconds.
  */
@@ -10,6 +15,7 @@ export const FEATURE_FLAG_POLL_INTERVAL = 30000;
  */
 export const LOCAL_FEATURE_FLAGS: Record<string, boolean> = {
   app_billing: process.env.NEXT_PUBLIC_FEATURE_BILLING_ENABLED === 'true',
+  marketing_header_single_player_mode: false,
 } as const;
 
 /**

packages/lib/constants/pdf.ts

@@ -0,0 +1,9 @@
+import { APP_BASE_URL } from './app';
+
+export const DEFAULT_STANDARD_FONT_SIZE = 15;
+export const DEFAULT_HANDWRITING_FONT_SIZE = 50;
+
+export const MIN_STANDARD_FONT_SIZE = 8;
+export const MIN_HANDWRITING_FONT_SIZE = 20;
+
+export const CAVEAT_FONT_PATH = `${APP_BASE_URL}/fonts/caveat.ttf`;

packages/lib/package.json

@@ -25,7 +25,7 @@
     "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",
@@ -36,4 +36,4 @@
     "@types/bcrypt": "^5.0.0",
     "@types/luxon": "^3.3.1"
   }
-}
+}

packages/lib/server-only/auth/send-forgot-password.ts

@@ -0,0 +1,53 @@
+import { createElement } from 'react';
+
+import { mailer } from '@documenso/email/mailer';
+import { render } from '@documenso/email/render';
+import { ForgotPasswordTemplate } from '@documenso/email/templates/forgot-password';
+import { prisma } from '@documenso/prisma';
+
+export interface SendForgotPasswordOptions {
+  userId: number;
+}
+
+export const sendForgotPassword = async ({ userId }: SendForgotPasswordOptions) => {
+  const user = await prisma.user.findFirstOrThrow({
+    where: {
+      id: userId,
+    },
+    include: {
+      PasswordResetToken: {
+        orderBy: {
+          createdAt: 'desc',
+        },
+        take: 1,
+      },
+    },
+  });
+
+  if (!user) {
+    throw new Error('User not found');
+  }
+
+  const token = user.PasswordResetToken[0].token;
+  const assetBaseUrl = process.env.NEXT_PUBLIC_WEBAPP_URL || 'http://localhost:3000';
+  const resetPasswordLink = `${process.env.NEXT_PUBLIC_WEBAPP_URL}/reset-password/${token}`;
+
+  const template = createElement(ForgotPasswordTemplate, {
+    assetBaseUrl,
+    resetPasswordLink,
+  });
+
+  return await mailer.sendMail({
+    to: {
+      address: user.email,
+      name: user.name || '',
+    },
+    from: {
+      name: process.env.NEXT_PRIVATE_SMTP_FROM_NAME || 'Documenso',
+      address: process.env.NEXT_PRIVATE_SMTP_FROM_ADDRESS || 'noreply@documenso.com',
+    },
+    subject: 'Forgot Password?',
+    html: render(template),
+    text: render(template, { plainText: true }),
+  });
+};

packages/lib/server-only/auth/send-reset-password.ts

@@ -0,0 +1,42 @@
+import { createElement } from 'react';
+
+import { mailer } from '@documenso/email/mailer';
+import { render } from '@documenso/email/render';
+import { ResetPasswordTemplate } from '@documenso/email/templates/reset-password';
+import { prisma } from '@documenso/prisma';
+
+export interface SendResetPasswordOptions {
+  userId: number;
+}
+
+export const sendResetPassword = async ({ userId }: SendResetPasswordOptions) => {
+  const user = await prisma.user.findFirstOrThrow({
+    where: {
+      id: userId,
+    },
+  });
+
+  const assetBaseUrl = process.env.NEXT_PUBLIC_WEBAPP_URL || 'http://localhost:3000';
+
+  console.log({ assetBaseUrl });
+
+  const template = createElement(ResetPasswordTemplate, {
+    assetBaseUrl,
+    userEmail: user.email,
+    userName: user.name || '',
+  });
+
+  return await mailer.sendMail({
+    to: {
+      address: user.email,
+      name: user.name || '',
+    },
+    from: {
+      name: process.env.NEXT_PRIVATE_SMTP_FROM_NAME || 'Documenso',
+      address: process.env.NEXT_PRIVATE_SMTP_FROM_ADDRESS || 'noreply@documenso.com',
+    },
+    subject: 'Password Reset Success!',
+    html: render(template),
+    text: render(template, { plainText: true }),
+  });
+};

packages/lib/server-only/document/get-document-by-token.ts

@@ -1,12 +1,21 @@
 import { prisma } from '@documenso/prisma';
+import { DocumentWithRecipient } from '@documenso/prisma/types/document-with-recipient';
 
 export interface GetDocumentAndSenderByTokenOptions {
   token: string;
 }
 
+export interface GetDocumentAndRecipientByTokenOptions {
+  token: string;
+}
+
 export const getDocumentAndSenderByToken = async ({
   token,
 }: GetDocumentAndSenderByTokenOptions) => {
+  if (!token) {
+    throw new Error('Missing token');
+  }
+
   const result = await prisma.document.findFirstOrThrow({
     where: {
       Recipient: {
@@ -29,3 +38,33 @@ export const getDocumentAndSenderByToken = async ({
     User,
   };
 };
+
+/**
+ * Get a Document and a Recipient by the recipient token.
+ */
+export const getDocumentAndRecipientByToken = async ({
+  token,
+}: GetDocumentAndRecipientByTokenOptions): Promise<DocumentWithRecipient> => {
+  if (!token) {
+    throw new Error('Missing token');
+  }
+
+  const result = await prisma.document.findFirstOrThrow({
+    where: {
+      Recipient: {
+        some: {
+          token,
+        },
+      },
+    },
+    include: {
+      Recipient: true,
+      documentData: true,
+    },
+  });
+
+  return {
+    ...result,
+    Recipient: result.Recipient[0],
+  };
+};

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

@@ -3,6 +3,7 @@ import { createElement } from 'react';
 import { mailer } from '@documenso/email/mailer';
 import { render } from '@documenso/email/render';
 import { DocumentInviteEmailTemplate } from '@documenso/email/templates/document-invite';
+import { FROM_ADDRESS, FROM_NAME } from '@documenso/lib/constants/email';
 import { prisma } from '@documenso/prisma';
 import { DocumentStatus, SendStatus } from '@documenso/prisma/client';
 
@@ -48,8 +49,8 @@ export const sendDocument = async ({ documentId, userId }: SendDocumentOptions)
         return;
       }
 
-      const assetBaseUrl = process.env.NEXT_PUBLIC_SITE_URL || 'http://localhost:3000';
-      const signDocumentLink = `${process.env.NEXT_PUBLIC_SITE_URL}/sign/${recipient.token}`;
+      const assetBaseUrl = process.env.NEXT_PUBLIC_WEBAPP_URL || 'http://localhost:3000';
+      const signDocumentLink = `${process.env.NEXT_PUBLIC_WEBAPP_URL}/sign/${recipient.token}`;
 
       const template = createElement(DocumentInviteEmailTemplate, {
         documentName: document.title,
@@ -65,8 +66,8 @@ export const sendDocument = async ({ documentId, userId }: SendDocumentOptions)
           name,
         },
         from: {
-          name: process.env.NEXT_PRIVATE_SMTP_FROM_NAME || 'Documenso',
-          address: process.env.NEXT_PRIVATE_SMTP_FROM_ADDRESS || 'noreply@documenso.com',
+          name: FROM_NAME,
+          address: FROM_ADDRESS,
         },
         subject: 'Please sign this document',
         html: render(template),

packages/lib/server-only/feature-flags/all.ts

@@ -0,0 +1,39 @@
+import { NextRequest, NextResponse } from 'next/server';
+
+import { getToken } from 'next-auth/jwt';
+
+import { LOCAL_FEATURE_FLAGS } from '@documenso/lib/constants/feature-flags';
+import PostHogServerClient from '@documenso/lib/server-only/feature-flags/get-post-hog-server-client';
+
+import { extractDistinctUserId, mapJwtToFlagProperties } from './get';
+
+/**
+ * Get all the evaluated feature flags based on the current user if possible.
+ */
+export default async function handlerFeatureFlagAll(req: Request) {
+  const requestHeaders = Object.fromEntries(req.headers.entries());
+
+  const nextReq = new NextRequest(req, {
+    headers: requestHeaders,
+  });
+
+  const token = await getToken({ req: nextReq });
+
+  const postHog = PostHogServerClient();
+
+  // Return the local feature flags if PostHog is not enabled, true by default.
+  // The front end should not call this API if PostHog is not enabled to reduce network requests.
+  if (!postHog) {
+    return NextResponse.json(LOCAL_FEATURE_FLAGS);
+  }
+
+  const distinctId = extractDistinctUserId(token, nextReq);
+
+  const featureFlags = await postHog.getAllFlags(distinctId, mapJwtToFlagProperties(token));
+
+  const res = NextResponse.json(featureFlags);
+
+  res.headers.set('Cache-Control', 'public, s-maxage=60, stale-while-revalidate=300');
+
+  return res;
+}

packages/lib/server-only/feature-flags/get-server-component-feature-flag.ts

@@ -1,6 +1,6 @@
 import { headers } from 'next/headers';
 
-import { getAllFlags, getFlag } from './get-feature-flag';
+import { getAllFlags, getFlag } from '@documenso/lib/universal/get-feature-flag';
 
 /**
  * Evaluate whether a flag is enabled for the current user in a server component.

packages/lib/server-only/feature-flags/get.ts

@@ -0,0 +1,117 @@
+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 PostHogServerClient from '@documenso/lib/server-only/feature-flags/get-post-hog-server-client';
+
+/**
+ * Evaluate a single feature flag based on the current user if possible.
+ *
+ * @param req The request with a query parameter `flag`. Example request URL: /api/feature-flag/get?flag=flag-name
+ * @returns A Response with the feature flag value.
+ */
+export default async function handleFeatureFlagGet(req: Request) {
+  const { searchParams } = new URL(req.url ?? '');
+  const flag = searchParams.get('flag');
+
+  const requestHeaders = Object.fromEntries(req.headers.entries());
+
+  const nextReq = new NextRequest(req, {
+    headers: requestHeaders,
+  });
+
+  const token = await getToken({ req: nextReq });
+
+  if (!flag) {
+    return NextResponse.json(
+      {
+        error: 'Missing flag query parameter.',
+      },
+      {
+        status: 400,
+        headers: {
+          'content-type': 'application/json',
+        },
+      },
+    );
+  }
+
+  const postHog = PostHogServerClient();
+
+  // Return the local feature flags if PostHog is not enabled, true by default.
+  // The front end should not call this API if PostHog is disabled to reduce network requests.
+  if (!postHog) {
+    return NextResponse.json(LOCAL_FEATURE_FLAGS[flag] ?? true);
+  }
+
+  const distinctId = extractDistinctUserId(token, nextReq);
+
+  const featureFlag = await postHog.getFeatureFlag(flag, distinctId, mapJwtToFlagProperties(token));
+
+  const res = NextResponse.json(featureFlag);
+
+  res.headers.set('Cache-Control', 'public, s-maxage=60, stale-while-revalidate=300');
+
+  return res;
+}
+
+/**
+ * Map a JWT to properties which are consumed by PostHog to evaluate feature flags.
+ *
+ * @param jwt The JWT of the current user.
+ * @returns A map of properties which are consumed by PostHog.
+ */
+export const mapJwtToFlagProperties = (
+  jwt?: JWT | null,
+): {
+  groups?: Record<string, string>;
+  personProperties?: Record<string, string>;
+  groupProperties?: Record<string, Record<string, string>>;
+} => {
+  return {
+    personProperties: {
+      email: jwt?.email ?? '',
+    },
+    groupProperties: {
+      // Add properties to group users into different groups, such as billing plan.
+    },
+  };
+};
+
+/**
+ * Extract a distinct ID from a JWT and request.
+ *
+ * Will fallback to a random ID if no ID could be extracted from either the JWT or request.
+ *
+ * @param jwt The JWT of the current user.
+ * @param request Request potentially containing a PostHog `distinct_id` cookie.
+ * @returns A distinct user ID.
+ */
+export const extractDistinctUserId = (jwt: JWT | null, request: NextRequest): string => {
+  const config = extractPostHogConfig();
+
+  const email = jwt?.email;
+  const userId = jwt?.id.toString();
+
+  let fallbackDistinctId = nanoid();
+
+  if (config) {
+    try {
+      const postHogCookie = JSON.parse(
+        request.cookies.get(`ph_${config.key}_posthog`)?.value ?? '',
+      );
+
+      const postHogDistinctId = postHogCookie['distinct_id'];
+
+      if (typeof postHogDistinctId === 'string') {
+        fallbackDistinctId = postHogDistinctId;
+      }
+    } catch {
+      // Do nothing.
+    }
+  }
+
+  return email ?? userId ?? fallbackDistinctId;
+};

packages/lib/server-only/pdf/insert-field-in-pdf.ts

@@ -1,25 +1,31 @@
 import fontkit from '@pdf-lib/fontkit';
-import { readFileSync } from 'fs';
 import { PDFDocument, StandardFonts } from 'pdf-lib';
 
+import {
+  CAVEAT_FONT_PATH,
+  DEFAULT_HANDWRITING_FONT_SIZE,
+  DEFAULT_STANDARD_FONT_SIZE,
+  MIN_HANDWRITING_FONT_SIZE,
+  MIN_STANDARD_FONT_SIZE,
+} from '@documenso/lib/constants/pdf';
 import { FieldType } from '@documenso/prisma/client';
 import { isSignatureFieldType } from '@documenso/prisma/guards/is-signature-field';
 import { FieldWithSignature } from '@documenso/prisma/types/field-with-signature';
 
-const DEFAULT_STANDARD_FONT_SIZE = 15;
-const DEFAULT_HANDWRITING_FONT_SIZE = 50;
-
 export const insertFieldInPDF = async (pdf: PDFDocument, field: FieldWithSignature) => {
+  // Fetch the font file from the public URL.
+  const fontResponse = await fetch(CAVEAT_FONT_PATH);
+  const fontCaveat = await fontResponse.arrayBuffer();
+
   const isSignatureField = isSignatureFieldType(field.type);
 
   pdf.registerFontkit(fontkit);
 
-  const fontCaveat = readFileSync('./public/fonts/caveat.ttf');
-
   const pages = pdf.getPages();
 
+  const minFontSize = isSignatureField ? MIN_HANDWRITING_FONT_SIZE : MIN_STANDARD_FONT_SIZE;
   const maxFontSize = isSignatureField ? DEFAULT_HANDWRITING_FONT_SIZE : DEFAULT_STANDARD_FONT_SIZE;
-  let fontSize = isSignatureField ? DEFAULT_HANDWRITING_FONT_SIZE : DEFAULT_STANDARD_FONT_SIZE;
+  let fontSize = maxFontSize;
 
   const page = pages.at(field.page - 1);
 
@@ -50,11 +56,6 @@ export const insertFieldInPDF = async (pdf: PDFDocument, field: FieldWithSignatu
     let imageWidth = image.width;
     let imageHeight = image.height;
 
-    const initialDimensions = {
-      width: imageWidth,
-      height: imageHeight,
-    };
-
     const scalingFactor = Math.min(fieldWidth / imageWidth, fieldHeight / imageHeight, 1);
 
     imageWidth = imageWidth * scalingFactor;
@@ -76,14 +77,9 @@ export const insertFieldInPDF = async (pdf: PDFDocument, field: FieldWithSignatu
     let textWidth = font.widthOfTextAtSize(field.customText, fontSize);
     const textHeight = font.heightAtSize(fontSize);
 
-    const initialDimensions = {
-      width: textWidth,
-      height: textHeight,
-    };
-
     const scalingFactor = Math.min(fieldWidth / textWidth, fieldHeight / textHeight, 1);
 
-    fontSize = Math.max(fontSize * scalingFactor, maxFontSize);
+    fontSize = Math.max(Math.min(fontSize * scalingFactor, maxFontSize), minFontSize);
     textWidth = font.widthOfTextAtSize(field.customText, fontSize);
 
     const textX = fieldX + (fieldWidth - textWidth) / 2;