Merge branch 'main' into release

Change "Open" links to "Open Startup" to reduce confusion about how to open the web app.

Additionally add the OSS Friends link to the footer since it was dropped during some changes.

.env.example

@@ -2,11 +2,6 @@
 NEXTAUTH_URL="http://localhost:3000"
 NEXTAUTH_SECRET="secret"
 
-# [[CRYPTO]]
-# Application Key for symmetric encryption and decryption
-# This should be a random string of at least 32 characters
-NEXT_PRIVATE_ENCRYPTION_KEY="CAFEBABE"
-
 # [[AUTH OPTIONAL]]
 NEXT_PRIVATE_GOOGLE_CLIENT_ID=""
 NEXT_PRIVATE_GOOGLE_CLIENT_SECRET=""

.github/ISSUE_TEMPLATE/bug-report.yml

@@ -1,5 +1,5 @@
 name: "Bug Report"
-labels: "bug"
+labels: ["bug"]
 description: Create a bug report to help us improve
 body:
   - type: markdown

.github/dependabot.yml

@@ -5,7 +5,7 @@ updates:
     directory: '/'
     schedule:
       interval: "weekly"
-    target-branch: "feat/refresh"
+    target-branch: "main"
     labels:
       - "ci dependencies"
       - "ci"
@@ -15,7 +15,7 @@ updates:
     directory: "/apps/marketing"
     schedule:
       interval: "weekly"
-    target-branch: "feat/refresh"
+    target-branch: "main"
     labels:
       - "npm dependencies"
       - "frontend"
@@ -25,7 +25,7 @@ updates:
     directory: "/apps/web"
     schedule:
       interval: "weekly"
-    target-branch: "feat/refresh"
+    target-branch: "main"
     labels:
       - "npm dependencies"
       - "frontend"

.github/workflows/ci.yml

@@ -2,9 +2,9 @@ name: "Continuous Integration"
 
 on:
   push:
-    branches: [ "feat/refresh" ]
+    branches: [ "main" ]
   pull_request:
-    branches: [ "feat/refresh" ]
+    branches: [ "main" ]
 
 concurrency:
   group: ${{ github.workflow }}-${{ github.head_ref || github.run_id }}

.github/workflows/codeql-analysis.yml

@@ -3,9 +3,9 @@ name: "CodeQL"
 on:
   workflow_dispatch:
   push:
-    branches: [ feat/refresh ]
+    branches: [ "main" ]
   pull_request:
-    branches: [ feat/refresh ]
+    branches: [ "main" ]
 
 jobs:
   analyze:

.github/workflows/e2e-tests.yml

@@ -1,9 +1,9 @@
 name: Playwright Tests
 on:
   push:
-    branches: [feat/refresh]
+    branches: [ "main" ]
   pull_request:
-    branches: [feat/refresh]
+    branches: [ "main" ]
 jobs:
   e2e_tests:
     timeout-minutes: 60

CONTRIBUTING.md

@@ -37,7 +37,7 @@ The development branch is <code>main</code>. All pull requests should be made ag
 - Create a new branch (include the issue id and something readable):
 
   ```sh
-  git checkout -b doc-999-my-feature-or-fix
+  git checkout -b feat/doc-999-somefeature-that-rocks
   ```
 
 3. See the [Developer Setup](https://github.com/documenso/documenso/blob/main/README.md#developer-setup) for more setup details.

MANIFEST.md

@@ -0,0 +1,6 @@
+# The Documenso Manifest
+Signing documents is a fundamental building block of private, economic, and government interactions. Access to easy and secure signing to participate in society should therefore be a fundamental right for everyone. The technology to enable this should be accessible and widespread.
+
+We know that open source is the key to solving this need once and for all to benefit all humankind. Using open source kickstarts innovation by putting the open sharing of ideas and solutions first. With Documenso, we will create an open and globally accessible signing platform to empower users, customers, and developers to fulfill their needs. Documenso is built by and for the global community, listening and implementing what is needed. Being transparent with the  code and the processes that use it brings trust and security to the platform.
+
+We build Documenso for longevity and scale by embracing the capital efficiency and inclusiveness of the Commercial Open Source (COSS) movement. We are building a global commodity for the world.

README.md

@@ -1,5 +1,3 @@
-🚨 We are live on Product Hunt with Single Player Mode and the new free tier: [https://www.producthunt.com/products/documenso](https://www.producthunt.com/posts/documenso-singleplayer-mode)
-
 <img src="https://github.com/documenso/documenso/assets/13398220/a643571f-0239-46a6-a73e-6bef38d1228b" alt="Documenso Logo">
 
 <p align="center" style="margin-top: 20px">

apps/marketing/content/blog/pre-seed.mdx

@@ -14,9 +14,11 @@ tags:
 Today I'm happy to announce that we closed a \$1.25M Pre-Seed round for Documenso, bringing our total funding to \$1.54M. The round actually closed last month, we just were sneaky about it.
 
 ## Two more for the road (to open signing)
+
 We're ecstatic to welcome [OSS Capital](https://twitter.com/osscapital) and especially [Joseph Jacks](https://twitter.com/JosephJacks_) to the inner circle of the open signing revolution. We're also fortunate to be joined by Orrick's very own [John Harrison](https://www.linkedin.com/in/john-harrison-a1213b9/) and his legal experience. For those who are wondering, yes, the round was, of course, signed using Documenso.
 
 ## Open Source, Open Metrics
+
 If you follow us, you know we're firmly committed to the open source values of openness and transparency. For us, this includes not only the code side of things but also the business. As we aim to build trust among our investors, customers, and partners, we want to be open about what's going on. We also want to allow everyone to learn from our data and choices, just as we did from so many other COSS (Commercial Open Source) startups. The term "Open Startup" isn't precisely defined (and probably will never be, just like startup). There is however a [great write-up](https://cal.com/blog/open-startup) about the basics by the founder of our favorite open source scheduling tool Cal.com.
 
 The two main takeaways are:

apps/marketing/content/blog/switching-from-slack-to-discord.mdx

@@ -24,9 +24,9 @@ We’re an open-source project and focus on building a great developer experienc
 
 So, we’re switching all conversations, team and community-wide, to Discord.
 
-In this post, we won’t debate *why* we’re switching — Slack vs. Discord is a long-lasting debate with pros and cons, and fans on both sides. There are great [stories](https://blog.meilisearch.com/from-slack-to-discord-our-migration/) and [threads](https://twitter.com/McPizza0/status/1655519558600470528) on the topic. We just don’t want to write yet another story here.
+In this post, we won’t debate _why_ we’re switching — Slack vs. Discord is a long-lasting debate with pros and cons, and fans on both sides. There are great [stories](https://blog.meilisearch.com/from-slack-to-discord-our-migration/) and [threads](https://twitter.com/McPizza0/status/1655519558600470528) on the topic. We just don’t want to write yet another story here.
 
-Instead, we’ll focus on *how* we plan to make the switch.
+Instead, we’ll focus on _how_ we plan to make the switch.
 
 ## Who is this story for?
 
@@ -47,14 +47,13 @@ The detailed plan goes like this:
 - 2023-08-02 `t+8`: We announce to the community the upcoming changes in the different channels — GitHub, Twitter, and Slack.
 
   - **GitHub**
+
     - Create new Pull Request
       - Add story to the blog
       - Update link to the community
-                
       ```
       https://documen.so/discord
       ```
-                
     - Start a new Discussion
 
       ```markdown
@@ -73,6 +72,7 @@ The detailed plan goes like this:
       ```
 
   - **Twitter**
+
     - [Tweet the announcement](https://twitter.com/documenso/status/1686719482096766977)
     - Pin Tweet
     - Update link in bio
@@ -87,6 +87,7 @@ The detailed plan goes like this:
       ```
 
   - **Slack**
+
     - Post message in `#general`
 
       ```markdown
@@ -106,15 +107,15 @@ The detailed plan goes like this:
 
     - Pin post
     - Set topic and description
-            
       ```
       We're switching to Discord. Join the fun: https://documen.so/discord
       ```
-            
     - Archive channels: `#code-review` `#how-to` `#meet-and-greet` `#random-memes` `#self-hosting` `#support`
 
 - 2023-08-09 `t+15`: 7 days later, we send a reminder on Slack.
+
   - **Slack**
+
     - Schedule reminder in `#general`
 
       ```
@@ -131,5 +132,5 @@ The detailed plan goes like this:
 ## Final thoughts
 
 - We’re at the very, early stage on our journey to building a beautiful, open-source DocuSign alternative. We want to build a great developer experience with the open-source community and, switching to Discord, we want to set up the foundations of an open, safe place for community members to get in touch, brainstorm ideas, and have fun.
-- It doesn’t mean we won’t ever switch back to Slack. The tools of today aren’t the ones of tomorrow. We don’t delete the Slack workspace, we archive it, and keep the `documenso` handle. May it be just an *au revoir?*
+- It doesn’t mean we won’t ever switch back to Slack. The tools of today aren’t the ones of tomorrow. We don’t delete the Slack workspace, we archive it, and keep the `documenso` handle. May it be just an _au revoir?_
 - For now, we’re pushing forward and are eager to welcome you on Discord. Make sure to [join the server](https://documen.so/discord) in order to keep up to date on all things Documenso. See you there!

apps/marketing/next.config.js

@@ -14,6 +14,7 @@ ENV_FILES.forEach((file) => {
 const config = {
   experimental: {
     serverActionsBodySizeLimit: '10mb',
+    outputFileTracingRoot: path.join(__dirname, '../../'),
   },
   reactStrictMode: true,
   transpilePackages: ['@documenso/lib', '@documenso/prisma', '@documenso/trpc', '@documenso/ui'],

apps/marketing/src/app/(marketing)/blog/[post]/opengraph-image.tsx

@@ -4,13 +4,13 @@ import { allBlogPosts } from 'contentlayer/generated';
 
 export const runtime = 'edge';
 
-export const size = {
+export const contentType = 'image/png';
+
+export const IMAGE_SIZE = {
   width: 1200,
   height: 630,
 };
 
-export const contentType = 'image/png';
-
 type BlogPostOpenGraphImageProps = {
   params: { post: string };
 };
@@ -25,16 +25,16 @@ export default async function BlogPostOpenGraphImage({ params }: BlogPostOpenGra
   // The long urls are needed for a compiler optimisation on the Next.js side, lifting this up
   // to a constant will break og image generation.
   const [interBold, interRegular, backgroundImage, logoImage] = await Promise.all([
-    fetch(new URL('./../../../../assets/inter-bold.ttf', import.meta.url)).then(async (res) =>
+    fetch(new URL('@documenso/assets/fonts/inter-bold.ttf', import.meta.url)).then(async (res) =>
       res.arrayBuffer(),
     ),
-    fetch(new URL('./../../../../assets/inter-regular.ttf', import.meta.url)).then(async (res) =>
+    fetch(new URL('@documenso/assets/fonts/inter-regular.ttf', import.meta.url)).then(async (res) =>
       res.arrayBuffer(),
     ),
-    fetch(new URL('./../../../../assets/background-blog-og.png', import.meta.url)).then(
+    fetch(new URL('@documenso/assets/images/background-blog-og.png', import.meta.url)).then(
       async (res) => res.arrayBuffer(),
     ),
-    fetch(new URL('./../../../../../public/logo.png', import.meta.url)).then(async (res) =>
+    fetch(new URL('@documenso/assets/logo.png', import.meta.url)).then(async (res) =>
       res.arrayBuffer(),
     ),
   ]);
@@ -56,7 +56,7 @@ export default async function BlogPostOpenGraphImage({ params }: BlogPostOpenGra
       </div>
     ),
     {
-      ...size,
+      ...IMAGE_SIZE,
       fonts: [
         {
           name: 'Inter',

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

@@ -2,7 +2,7 @@ import Image from 'next/image';
 
 import { z } from 'zod';
 
-import backgroundPattern from '~/assets/background-pattern.png';
+import backgroundPattern from '@documenso/assets/images/background-pattern.png';
 
 import { OSSFriendsContainer } from './container';
 import { TOSSFriendsSchema, ZOSSFriendsSchema } from './schema';

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

@@ -7,11 +7,10 @@ import { useRouter } from 'next/navigation';
 import { motion } from 'framer-motion';
 import { ChevronLeft } from 'lucide-react';
 
+import backgroundPattern from '@documenso/assets/images/background-pattern.png';
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
 
-import backgroundPattern from '~/assets/background-pattern.png';
-
 export default function NotFound() {
   const router = useRouter();
 

apps/marketing/src/components/(marketing)/faster-smarter-beautiful-bento.tsx

@@ -2,14 +2,13 @@ import { HTMLAttributes } from 'react';
 
 import Image from 'next/image';
 
+import backgroundPattern from '@documenso/assets/images/background-pattern.png';
+import cardBeautifulFigure from '@documenso/assets/images/card-beautiful-figure.png';
+import cardFastFigure from '@documenso/assets/images/card-fast-figure.png';
+import cardSmartFigure from '@documenso/assets/images/card-smart-figure.png';
 import { cn } from '@documenso/ui/lib/utils';
 import { Card, CardContent } from '@documenso/ui/primitives/card';
 
-import backgroundPattern from '~/assets/background-pattern.png';
-import cardBeautifulFigure from '~/assets/card-beautiful-figure.png';
-import cardFastFigure from '~/assets/card-fast-figure.png';
-import cardSmartFigure from '~/assets/card-smart-figure.png';
-
 export type FasterSmarterBeautifulBentoProps = HTMLAttributes<HTMLDivElement>;
 
 export const FasterSmarterBeautifulBento = ({

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

@@ -1,16 +1,18 @@
 'use client';
 
-import { HTMLAttributes } from 'react';
+import type { HTMLAttributes } from 'react';
 
 import Image from 'next/image';
 import Link from 'next/link';
 
+import { Moon, Sun } from 'lucide-react';
+import { useTheme } from 'next-themes';
 import { FaXTwitter } from 'react-icons/fa6';
 import { LiaDiscord } from 'react-icons/lia';
 import { LuGithub } from 'react-icons/lu';
 
+import LogoImage from '@documenso/assets/logo.png';
 import { cn } from '@documenso/ui/lib/utils';
-import { ThemeSwitcher } from '@documenso/ui/primitives/theme-switcher';
 
 export type FooterProps = HTMLAttributes<HTMLDivElement>;
 
@@ -25,21 +27,24 @@ const FOOTER_LINKS = [
   { href: '/singleplayer', text: 'Singleplayer' },
   { href: '/blog', text: 'Blog' },
   { href: '/design-system', text: 'Design' },
-  { href: '/open', text: 'Open' },
+  { href: '/open', text: 'Open Startup' },
   { href: 'https://shop.documenso.com', text: 'Shop', target: '_blank' },
   { href: 'https://status.documenso.com', text: 'Status', target: '_blank' },
   { href: 'mailto:support@documenso.com', text: 'Support', target: '_blank' },
+  { href: '/oss-friends', text: 'OSS Friends' },
   { href: '/privacy', text: 'Privacy' },
 ];
 
 export const Footer = ({ className, ...props }: FooterProps) => {
+  const { setTheme } = useTheme();
+
   return (
     <div className={cn('border-t py-12', className)} {...props}>
       <div className="mx-auto flex w-full max-w-screen-xl flex-wrap items-start justify-between gap-8 px-8">
         <div>
           <Link href="/">
             <Image
-              src="/logo.png"
+              src={LogoImage}
               alt="Documenso Logo"
               className="dark:invert"
               width={170}
@@ -74,13 +79,21 @@ export const Footer = ({ className, ...props }: FooterProps) => {
           ))}
         </div>
       </div>
-      <div className="mx-auto mt-4 flex w-full max-w-screen-xl flex-wrap items-center justify-between gap-4 px-8 md:mt-12 lg:mt-24">
+      <div className="mx-auto mt-4 flex w-full max-w-screen-xl flex-wrap justify-between gap-4 px-8 md:mt-12 lg:mt-24">
         <p className="text-muted-foreground text-sm">
           © {new Date().getFullYear()} Documenso, Inc. All rights reserved.
         </p>
 
-        <div className="flex flex-wrap">
-          <ThemeSwitcher />
+        <div className="flex flex-wrap items-center gap-x-4 gap-y-2.5">
+          <button type="button" className="text-muted-foreground" onClick={() => setTheme('light')}>
+            <Sun className="h-5 w-5" />
+            <span className="sr-only">Light</span>
+          </button>
+
+          <button type="button" className="text-muted-foreground" onClick={() => setTheme('dark')}>
+            <Moon className="h-5 w-5" />
+            <span className="sr-only">Dark</span>
+          </button>
         </div>
       </div>
     </div>

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

@@ -1,10 +1,12 @@
 'use client';
 
-import { HTMLAttributes, useState } from 'react';
+import type { HTMLAttributes } from 'react';
+import { useState } from 'react';
 
 import Image from 'next/image';
 import Link from 'next/link';
 
+import LogoImage from '@documenso/assets/logo.png';
 import { useFeatureFlags } from '@documenso/lib/client-only/providers/feature-flag';
 import { cn } from '@documenso/ui/lib/utils';
 
@@ -25,7 +27,7 @@ export const Header = ({ className, ...props }: HeaderProps) => {
       <div className="flex items-center space-x-4">
         <Link href="/" className="z-10" onClick={() => setIsHamburgerMenuOpen(false)}>
           <Image
-            src="/logo.png"
+            src={LogoImage}
             alt="Documenso Logo"
             className="dark:invert"
             width={170}
@@ -62,7 +64,7 @@ export const Header = ({ className, ...props }: HeaderProps) => {
           href="/open"
           className="text-muted-foreground hover:text-muted-foreground/80 text-sm font-semibold"
         >
-          Open
+          Open Startup
         </Link>
 
         <Link

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

@@ -8,12 +8,11 @@ import { usePlausible } from 'next-plausible';
 import { LuGithub } from 'react-icons/lu';
 import { match } from 'ts-pattern';
 
+import backgroundPattern from '@documenso/assets/images/background-pattern.png';
 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 backgroundPattern from '~/assets/background-pattern.png';
-
 import { Widget } from './widget';
 
 export type HeroProps = {

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

@@ -8,6 +8,7 @@ import { FaXTwitter } from 'react-icons/fa6';
 import { LiaDiscord } from 'react-icons/lia';
 import { LuGithub } from 'react-icons/lu';
 
+import LogoImage from '@documenso/assets/logo.png';
 import { Sheet, SheetContent } from '@documenso/ui/primitives/sheet';
 
 export type MobileNavigationProps = {
@@ -30,7 +31,7 @@ export const MENU_NAVIGATION_LINKS = [
   },
   {
     href: '/open',
-    text: 'Open',
+    text: 'Open Startup',
   },
   {
     href: 'https://status.documenso.com',
@@ -63,7 +64,7 @@ export const MobileNavigation = ({ isMenuOpen, onMenuOpenChange }: MobileNavigat
       <SheetContent className="w-full max-w-[400px]">
         <Link href="/" className="z-10" onClick={handleMenuItemClick}>
           <Image
-            src="/logo.png"
+            src={LogoImage}
             alt="Documenso Logo"
             className="dark:invert"
             width={170}

apps/marketing/src/components/(marketing)/open-build-template-bento.tsx

@@ -2,14 +2,13 @@ import { HTMLAttributes } from 'react';
 
 import Image from 'next/image';
 
+import backgroundPattern from '@documenso/assets/images/background-pattern.png';
+import cardBuildFigure from '@documenso/assets/images/card-build-figure.png';
+import cardOpenFigure from '@documenso/assets/images/card-open-figure.png';
+import cardTemplateFigure from '@documenso/assets/images/card-template-figure.png';
 import { cn } from '@documenso/ui/lib/utils';
 import { Card, CardContent } from '@documenso/ui/primitives/card';
 
-import backgroundPattern from '~/assets/background-pattern.png';
-import cardBuildFigure from '~/assets/card-build-figure.png';
-import cardOpenFigure from '~/assets/card-open-figure.png';
-import cardTemplateFigure from '~/assets/card-template-figure.png';
-
 export type OpenBuildTemplateBentoProps = HTMLAttributes<HTMLDivElement>;
 
 export const OpenBuildTemplateBento = ({ className, ...props }: OpenBuildTemplateBentoProps) => {

apps/marketing/src/components/(marketing)/share-connect-paid-widget-bento.tsx

@@ -2,15 +2,14 @@ import { HTMLAttributes } from 'react';
 
 import Image from 'next/image';
 
+import backgroundPattern from '@documenso/assets/images/background-pattern.png';
+import cardConnectionsFigure from '@documenso/assets/images/card-connections-figure.png';
+import cardPaidFigure from '@documenso/assets/images/card-paid-figure.png';
+import cardSharingFigure from '@documenso/assets/images/card-sharing-figure.png';
+import cardWidgetFigure from '@documenso/assets/images/card-widget-figure.png';
 import { cn } from '@documenso/ui/lib/utils';
 import { Card, CardContent } from '@documenso/ui/primitives/card';
 
-import backgroundPattern from '~/assets/background-pattern.png';
-import cardConnectionsFigure from '~/assets/card-connections-figure.png';
-import cardPaidFigure from '~/assets/card-paid-figure.png';
-import cardSharingFigure from '~/assets/card-sharing-figure.png';
-import cardWidgetFigure from '~/assets/card-widget-figure.png';
-
 export type ShareConnectPaidWidgetBentoProps = HTMLAttributes<HTMLDivElement>;
 
 export const ShareConnectPaidWidgetBento = ({

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

@@ -4,6 +4,7 @@ import { useEffect, useState } from 'react';
 
 import Link from 'next/link';
 
+import signingCelebration from '@documenso/assets/images/signing-celebration.png';
 import { useFeatureFlags } from '@documenso/lib/client-only/providers/feature-flag';
 import { DocumentStatus, Signature } from '@documenso/prisma/client';
 import { DocumentWithRecipient } from '@documenso/prisma/types/document-with-recipient';
@@ -14,7 +15,6 @@ import { SigningCard3D } from '@documenso/ui/components/signing-card';
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
 
-import signingCelebration from '~/assets/signing-celebration.png';
 import { ConfettiScreen } from '~/components/(marketing)/confetti-screen';
 
 interface SinglePlayerModeSuccessProps {

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

@@ -1,7 +1,6 @@
 import { NextApiRequest, NextApiResponse } from 'next';
 
 import { randomBytes } from 'crypto';
-import { readFileSync } from 'fs';
 import { buffer } from 'micro';
 
 import { insertImageInPDF } from '@documenso/lib/server-only/pdf/insert-image-in-pdf';
@@ -88,7 +87,11 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
 
       const now = new Date();
 
-      const bytes64 = readFileSync('./public/documenso-supporter-pledge.pdf').toString('base64');
+      const bytes64 = await fetch(
+        new URL('@documenso/assets/documenso-supporter-pledge.pdf', import.meta.url),
+      )
+        .then(async (res) => res.arrayBuffer())
+        .then((buffer) => Buffer.from(buffer).toString('base64'));
 
       const { id: documentDataId } = await prisma.documentData.create({
         data: {

apps/web/next.config.js

@@ -14,6 +14,7 @@ ENV_FILES.forEach((file) => {
 const config = {
   output: process.env.DOCKER_OUTPUT ? 'standalone' : undefined,
   experimental: {
+    outputFileTracingRoot: path.join(__dirname, '../../'),
     serverActionsBodySizeLimit: '50mb',
   },
   reactStrictMode: true,

apps/web/package.json

@@ -43,7 +43,6 @@
     "sharp": "0.32.5",
     "ts-pattern": "^5.0.5",
     "typescript": "5.2.2",
-    "uqr": "^0.1.2",
     "zod": "^3.22.4"
   },
   "devDependencies": {

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

@@ -2,12 +2,15 @@
 
 import Link from 'next/link';
 
-import { Edit, Pencil, Share } from 'lucide-react';
+import { Download, Edit, Pencil } from 'lucide-react';
 import { useSession } from 'next-auth/react';
 import { match } from 'ts-pattern';
 
-import { Document, DocumentStatus, Recipient, SigningStatus, User } from '@documenso/prisma/client';
-import { DocumentShareButton } from '@documenso/ui/components/document/document-share-button';
+import { getFile } from '@documenso/lib/universal/upload/get-file';
+import type { Document, Recipient, User } from '@documenso/prisma/client';
+import { DocumentStatus, SigningStatus } from '@documenso/prisma/client';
+import type { DocumentWithData } from '@documenso/prisma/types/document-with-data';
+import { trpc as trpcClient } from '@documenso/trpc/client';
 import { Button } from '@documenso/ui/primitives/button';
 
 export type DataTableActionButtonProps = {
@@ -33,6 +36,41 @@ export const DataTableActionButton = ({ row }: DataTableActionButtonProps) => {
   const isComplete = row.status === DocumentStatus.COMPLETED;
   const isSigned = recipient?.signingStatus === SigningStatus.SIGNED;
 
+  const onDownloadClick = async () => {
+    let document: DocumentWithData | null = null;
+
+    if (!recipient) {
+      document = await trpcClient.document.getDocumentById.query({
+        id: row.id,
+      });
+    } else {
+      document = await trpcClient.document.getDocumentByToken.query({
+        token: recipient.token,
+      });
+    }
+
+    const documentData = document?.documentData;
+
+    if (!documentData) {
+      return;
+    }
+
+    const documentBytes = await getFile(documentData);
+
+    const blob = new Blob([documentBytes], {
+      type: 'application/pdf',
+    });
+
+    const link = window.document.createElement('a');
+
+    link.href = window.URL.createObjectURL(blob);
+    link.download = row.title || 'document.pdf';
+
+    link.click();
+
+    window.URL.revokeObjectURL(link.href);
+  };
+
   return match({
     isOwner,
     isRecipient,
@@ -42,7 +80,7 @@ export const DataTableActionButton = ({ row }: DataTableActionButtonProps) => {
     isSigned,
   })
     .with({ isOwner: true, isDraft: true }, () => (
-      <Button className="w-24" asChild>
+      <Button className="w-32" asChild>
         <Link href={`/documents/${row.id}`}>
           <Edit className="-ml-1 mr-2 h-4 w-4" />
           Edit
@@ -50,23 +88,24 @@ export const DataTableActionButton = ({ row }: DataTableActionButtonProps) => {
       </Button>
     ))
     .with({ isRecipient: true, isPending: true, isSigned: false }, () => (
-      <Button className="w-24" asChild>
+      <Button className="w-32" asChild>
         <Link href={`/sign/${recipient?.token}`}>
           <Pencil className="-ml-1 mr-2 h-4 w-4" />
           Sign
         </Link>
       </Button>
     ))
-    .otherwise(() => (
-      <DocumentShareButton
-        documentId={row.id}
-        token={recipient?.token}
-        trigger={({ loading }) => (
-          <Button className="w-24" loading={loading}>
-            {!loading && <Share className="-ml-1 mr-2 h-4 w-4" />}
-            Share
+    .with({ isPending: true, isSigned: true }, () => (
+      <Button className="w-32" disabled={true}>
+        <Pencil className="-ml-1 mr-2 inline h-4 w-4" />
+        Sign
       </Button>
-        )}
-      />
-    ));
+    ))
+    .with({ isComplete: true }, () => (
+      <Button className="w-32" onClick={onDownloadClick}>
+        <Download className="-ml-1 mr-2 inline h-4 w-4" />
+        Download
+      </Button>
+    ))
+    .otherwise(() => <div></div>);
 };

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

@@ -147,12 +147,12 @@ export const DataTableActionDropdown = ({ row }: DataTableActionDropdownProps) =
 
         <DocumentShareButton
           documentId={row.id}
-          token={recipient?.token}
+          token={isOwner ? undefined : recipient?.token}
           trigger={({ loading, disabled }) => (
             <DropdownMenuItem disabled={disabled || isDraft} onSelect={(e) => e.preventDefault()}>
               <div className="flex items-center">
                 {loading ? <Loader className="mr-2 h-4 w-4" /> : <Share className="mr-2 h-4 w-4" />}
-                Share
+                Share Signing Card
               </div>
             </DropdownMenuItem>
           )}

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

@@ -30,7 +30,12 @@ export const DuplicateDocumentDialog = ({
     id,
   });
 
-  const documentData = document?.documentData;
+  const documentData = document?.documentData
+    ? {
+        ...document.documentData,
+        data: document.documentData.initialData,
+      }
+    : undefined;
 
   const { mutateAsync: duplicateDocument, isLoading: isDuplicateLoading } =
     trpcReact.document.duplicateDocument.useMutation({

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

@@ -78,7 +78,12 @@ export default async function DocumentsPage({ searchParams = {} }: DocumentsPage
                 ExtendedDocumentStatus.DRAFT,
                 ExtendedDocumentStatus.ALL,
               ].map((value) => (
-                <TabsTrigger key={value} className="min-w-[60px]" value={value} asChild>
+                <TabsTrigger
+                  key={value}
+                  className="hover:text-foreground min-w-[60px]"
+                  value={value}
+                  asChild
+                >
                   <Link href={getTabHref(value)} scroll={false}>
                     <DocumentStatus status={value} />
 

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

@@ -6,7 +6,6 @@ import Link from 'next/link';
 import { useRouter } from 'next/navigation';
 
 import { Loader } from 'lucide-react';
-import { useSession } from 'next-auth/react';
 
 import { useLimits } from '@documenso/ee/server-only/limits/provider/client';
 import { createDocumentData } from '@documenso/lib/server-only/document-data/create-document-data';
@@ -23,7 +22,6 @@ export type UploadDocumentProps = {
 
 export const UploadDocument = ({ className }: UploadDocumentProps) => {
   const router = useRouter();
-  const { data: session } = useSession();
 
   const { toast } = useToast();
 
@@ -81,7 +79,7 @@ export const UploadDocument = ({ className }: UploadDocumentProps) => {
     <div className={cn('relative', className)}>
       <DocumentDropzone
         className="min-h-[40vh]"
-        disabled={remaining.documents === 0 || !session?.user.emailVerified}
+        disabled={remaining.documents === 0}
         onDrop={onFileDrop}
       />
 

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

@@ -8,9 +8,7 @@ import { LimitsProvider } from '@documenso/ee/server-only/limits/provider/server
 import { NEXT_AUTH_OPTIONS } from '@documenso/lib/next-auth/auth-options';
 import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
 
-import { CommandMenu } from '~/components/(dashboard)/common/command-menu';
 import { Header } from '~/components/(dashboard)/layout/header';
-import { VerifyEmailBanner } from '~/components/(dashboard)/layout/verify-email-banner';
 import { RefreshOnFocus } from '~/components/(dashboard)/refresh-on-focus/refresh-on-focus';
 import { NextAuthProvider } from '~/providers/next-auth';
 
@@ -32,8 +30,6 @@ export default async function AuthenticatedDashboardLayout({
   return (
     <NextAuthProvider session={session}>
       <LimitsProvider>
-        {!user.emailVerified && <VerifyEmailBanner email={user.email} />}
-        <CommandMenu />
         <Header user={user} />
 
         <main className="mt-8 pb-8 md:mt-12 md:pb-12">{children}</main>

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

@@ -41,7 +41,7 @@ export default async function BillingSettingsPage() {
 
   return (
     <div>
-      <h3 className="text-2xl font-semibold">Billing</h3>
+      <h3 className="text-lg font-medium">Billing</h3>
 
       <div className="text-muted-foreground mt-2 text-sm">
         {isMissingOrInactiveOrFreePlan && (

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

@@ -1,5 +1,19 @@
-import { redirect } from 'next/navigation';
+import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
 
-export default function PasswordSettingsPage() {
-  redirect('/settings/security');
+import { PasswordForm } from '~/components/forms/password';
+
+export default async function PasswordSettingsPage() {
+  const { user } = await getRequiredServerComponentSession();
+
+  return (
+    <div>
+      <h3 className="text-lg font-medium">Password</h3>
+
+      <p className="text-muted-foreground mt-2 text-sm">Here you can update your password.</p>
+
+      <hr className="my-4" />
+
+      <PasswordForm user={user} className="max-w-xl" />
+    </div>
+  );
 }

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

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

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

@@ -1,46 +0,0 @@
-import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
-
-import { AuthenticatorApp } from '~/components/forms/2fa/authenticator-app';
-import { RecoveryCodes } from '~/components/forms/2fa/recovery-codes';
-import { PasswordForm } from '~/components/forms/password';
-
-export default async function SecuritySettingsPage() {
-  const { user } = await getRequiredServerComponentSession();
-
-  return (
-    <div>
-      <h3 className="text-2xl font-semibold">Security</h3>
-
-      <p className="text-muted-foreground mt-2 text-sm">
-        Here you can manage your password and security settings.
-      </p>
-
-      <hr className="my-4" />
-
-      <PasswordForm user={user} className="max-w-xl" />
-
-      <hr className="mb-4 mt-8" />
-
-      <h4 className="text-lg font-medium">Two Factor Authentication</h4>
-
-      <p className="text-muted-foreground mt-2 text-sm">
-        Add and manage your two factor security settings to add an extra layer of security to your
-        account!
-      </p>
-
-      <div className="mt-4 max-w-xl">
-        <h5 className="font-medium">Two-factor methods</h5>
-
-        <AuthenticatorApp isTwoFactorEnabled={user.twoFactorEnabled} />
-      </div>
-
-      {user.twoFactorEnabled && (
-        <div className="mt-4 max-w-xl">
-          <h5 className="font-medium">Recovery methods</h5>
-
-          <RecoveryCodes isTwoFactorEnabled={user.twoFactorEnabled} />
-        </div>
-      )}
-    </div>
-  );
-}

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

@@ -3,17 +3,16 @@ import { NextResponse } from 'next/server';
 
 import { P, match } from 'ts-pattern';
 
-import { getRecipientOrSenderByShareLinkSlug } from '@documenso/lib/server-only/share/get-recipient-or-sender-by-share-link-slug';
+import type { ShareHandlerAPIResponse } from '~/pages/api/share';
 
-import { Logo } from '~/components/branding/logo';
-import { getAssetBuffer } from '~/helpers/get-asset-buffer';
+export const runtime = 'edge';
 
-const CARD_OFFSET_TOP = 152;
-const CARD_OFFSET_LEFT = 350;
-const CARD_WIDTH = 500;
-const CARD_HEIGHT = 250;
+const CARD_OFFSET_TOP = 173;
+const CARD_OFFSET_LEFT = 307;
+const CARD_WIDTH = 590;
+const CARD_HEIGHT = 337;
 
-const size = {
+const IMAGE_SIZE = {
   width: 1200,
   height: 630,
 };
@@ -24,15 +23,27 @@ type SharePageOpenGraphImageProps = {
 
 export async function GET(_request: Request, { params: { slug } }: SharePageOpenGraphImageProps) {
   const [interSemiBold, interRegular, caveatRegular, shareFrameImage] = await Promise.all([
-    getAssetBuffer('/fonts/inter-semibold.ttf'),
-    getAssetBuffer('/fonts/inter-regular.ttf'),
-    getAssetBuffer('/fonts/caveat-regular.ttf'),
-    getAssetBuffer('/static/og-share-frame.png'),
+    fetch(new URL('@documenso/assets/fonts/inter-semibold.ttf', import.meta.url)).then(
+      async (res) => res.arrayBuffer(),
+    ),
+    fetch(new URL('@documenso/assets/fonts/inter-regular.ttf', import.meta.url)).then(async (res) =>
+      res.arrayBuffer(),
+    ),
+    fetch(new URL('@documenso/assets/fonts/caveat-regular.ttf', import.meta.url)).then(
+      async (res) => res.arrayBuffer(),
+    ),
+    fetch(new URL('@documenso/assets/static/og-share-frame2.png', import.meta.url)).then(
+      async (res) => res.arrayBuffer(),
+    ),
   ]);
 
-  const recipientOrSender = await getRecipientOrSenderByShareLinkSlug({ slug }).catch(() => null);
+  const baseUrl = process.env.NEXT_PUBLIC_WEBAPP_URL || 'http://localhost:3000';
 
-  if (!recipientOrSender) {
+  const recipientOrSender: ShareHandlerAPIResponse = await fetch(
+    new URL(`/api/share?slug=${slug}`, baseUrl),
+  ).then(async (res) => res.json());
+
+  if ('error' in recipientOrSender) {
     return NextResponse.json({ error: 'Not found' }, { status: 404 });
   }
 
@@ -60,11 +71,6 @@ export async function GET(_request: Request, { params: { slug } }: SharePageOpen
         {/* @ts-expect-error Lack of typing from ImageResponse */}
         <img src={shareFrameImage} alt="og-share-frame" tw="absolute inset-0 w-full h-full" />
 
-        <div tw="absolute top-20 flex w-full items-center justify-center">
-          {/* @ts-expect-error Lack of typing from ImageResponse */}
-          <Logo tw="h-8 w-60" />
-        </div>
-
         {signatureImage ? (
           <div
             tw="absolute py-6 px-12 flex items-center justify-center text-center"
@@ -96,40 +102,28 @@ export async function GET(_request: Request, { params: { slug } }: SharePageOpen
           </p>
         )}
 
-        {/* <div
-          tw="absolute flex items-center justify-center text-slate-500"
-          style={{
-            top: `${CARD_OFFSET_TOP + CARD_HEIGHT - 45}px`,
-            left: `${CARD_OFFSET_LEFT}`,
-            width: `${CARD_WIDTH}px`,
-            fontSize: '30px',
-          }}
-        >
-          {signatureName}
-        </div> */}
-
         <div
-          tw="absolute flex flex-col items-center justify-center pt-12 w-full"
+          tw="absolute flex w-full"
           style={{
-            top: `${CARD_OFFSET_TOP + CARD_HEIGHT}px`,
+            top: `${CARD_OFFSET_TOP - 78}px`,
+            left: `${CARD_OFFSET_LEFT}px`,
           }}
         >
           <h2
-            tw="text-3xl text-slate-500"
+            tw="text-xl"
             style={{
+              color: '#828282',
               fontFamily: 'Inter',
-              fontWeight: 600,
+              fontWeight: 700,
             }}
           >
-            {isRecipient
-              ? 'I just signed with Documenso and you can too!'
-              : 'I just sent a document with Documenso and you can too!'}
+            {isRecipient ? 'Document Signed!' : 'Document Sent!'}
           </h2>
         </div>
       </div>
     ),
     {
-      ...size,
+      ...IMAGE_SIZE,
       fonts: [
         {
           name: 'Caveat',

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

@@ -11,7 +11,7 @@ type SharePageProps = {
 export function generateMetadata({ params: { slug } }: SharePageProps) {
   return {
     title: 'Documenso - Share',
-    description: 'I just signed a document with Documenso!',
+    description: 'I just signed a document in style with Documenso!',
     openGraph: {
       title: 'Documenso - Join the open source signing revolution',
       description: 'I just signed with Documenso!',

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

@@ -4,6 +4,7 @@ import { notFound } from 'next/navigation';
 import { CheckCircle2, Clock8 } from 'lucide-react';
 import { match } from 'ts-pattern';
 
+import signingCelebration from '@documenso/assets/images/signing-celebration.png';
 import { getDocumentAndSenderByToken } from '@documenso/lib/server-only/document/get-document-by-token';
 import { getFieldsForToken } from '@documenso/lib/server-only/field/get-fields-for-token';
 import { getRecipientByToken } from '@documenso/lib/server-only/recipient/get-recipient-by-token';
@@ -13,8 +14,6 @@ import { DocumentDownloadButton } from '@documenso/ui/components/document/docume
 import { DocumentShareButton } from '@documenso/ui/components/document/document-share-button';
 import { SigningCard3D } from '@documenso/ui/components/signing-card';
 
-import signingCelebration from '~/assets/signing-celebration.png';
-
 export type CompletedSigningPageProps = {
   params: {
     token?: string;

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

@@ -11,7 +11,6 @@ import { FieldWithSignature } from '@documenso/prisma/types/field-with-signature
 import { trpc } from '@documenso/trpc/react';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
-import { useRequiredSigningContext } from './provider';
 import { SigningFieldContainer } from './signing-field-container';
 
 export type DateFieldProps = {
@@ -26,8 +25,6 @@ export const DateField = ({ field, recipient }: DateFieldProps) => {
 
   const [isPending, startTransition] = useTransition();
 
-  const { dateFormat } = useRequiredSigningContext();
-
   const { mutateAsync: signFieldWithToken, isLoading: isSignFieldWithTokenLoading } =
     trpc.field.signFieldWithToken.useMutation();
 
@@ -43,7 +40,7 @@ export const DateField = ({ field, recipient }: DateFieldProps) => {
       await signFieldWithToken({
         token: recipient.token,
         fieldId: field.id,
-        value: dateFormat,
+        value: '',
       });
 
       startTransition(() => router.refresh());

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

@@ -16,17 +16,8 @@ import { Button } from '@documenso/ui/primitives/button';
 import { Card, CardContent } from '@documenso/ui/primitives/card';
 import { Input } from '@documenso/ui/primitives/input';
 import { Label } from '@documenso/ui/primitives/label';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@documenso/ui/primitives/select';
 import { SignaturePad } from '@documenso/ui/primitives/signature-pad';
 
-import { DATE_FORMATS } from '~/helpers/constants';
-
 import { useRequiredSigningContext } from './provider';
 import { SignDialog } from './sign-dialog';
 
@@ -40,13 +31,9 @@ export const SigningForm = ({ document, recipient, fields }: SigningFormProps) =
   const router = useRouter();
   const { data: session } = useSession();
 
-  const { fullName, signature, setFullName, setSignature, dateFormat, setDateFormat } =
-    useRequiredSigningContext();
-
+  const { fullName, signature, setFullName, setSignature } = useRequiredSigningContext();
   const [validateUninsertedFields, setValidateUninsertedFields] = useState(false);
 
-  const hasDateField = fields.find((field) => field.type === 'DATE');
-
   const {
     handleSubmit,
     formState: { isSubmitting },
@@ -117,30 +104,6 @@ export const SigningForm = ({ document, recipient, fields }: SigningFormProps) =
                 />
               </div>
 
-              {hasDateField && (
-                <div>
-                  <Label htmlFor="date-format">Date Format</Label>
-
-                  <Select
-                    onValueChange={(value) => {
-                      setDateFormat(value);
-                    }}
-                    defaultValue={dateFormat}
-                  >
-                    <SelectTrigger className="bg-background mt-2">
-                      <SelectValue />
-                    </SelectTrigger>
-                    <SelectContent>
-                      {DATE_FORMATS.map((format) => (
-                        <SelectItem key={format.key} value={format.value}>
-                          {format.label}
-                        </SelectItem>
-                      ))}
-                    </SelectContent>
-                  </Select>
-                </div>
-              )}
-
               <div>
                 <Label htmlFor="Signature">Signature</Label>
 

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

@@ -9,8 +9,6 @@ export type SigningContextValue = {
   setEmail: (_value: string) => void;
   signature: string | null;
   setSignature: (_value: string | null) => void;
-  dateFormat: string;
-  setDateFormat: (_value: string) => void;
 };
 
 const SigningContext = createContext<SigningContextValue | null>(null);
@@ -33,7 +31,6 @@ export interface SigningProviderProps {
   fullName?: string | null;
   email?: string | null;
   signature?: string | null;
-  dateFormat?: string | null;
   children: React.ReactNode;
 }
 
@@ -41,13 +38,11 @@ export const SigningProvider = ({
   fullName: initialFullName,
   email: initialEmail,
   signature: initialSignature,
-  dateFormat: initialDateFormat,
   children,
 }: SigningProviderProps) => {
   const [fullName, setFullName] = useState(initialFullName || '');
   const [email, setEmail] = useState(initialEmail || '');
   const [signature, setSignature] = useState(initialSignature || null);
-  const [dateFormat, setDateFormat] = useState(initialDateFormat || 'yyyy-MM-dd hh:mm a');
 
   return (
     <SigningContext.Provider
@@ -58,8 +53,6 @@ export const SigningProvider = ({
         setEmail,
         signature,
         setSignature,
-        dateFormat,
-        setDateFormat,
       }}
     >
       {children}

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

@@ -2,7 +2,7 @@ import React from 'react';
 
 import Image from 'next/image';
 
-import backgroundPattern from '~/assets/background-pattern.png';
+import backgroundPattern from '@documenso/assets/images/background-pattern.png';
 
 type UnauthenticatedLayoutProps = {
   children: React.ReactNode;

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

@@ -1,97 +0,0 @@
-import Link from 'next/link';
-
-import { AlertTriangle, CheckCircle2, XCircle, XOctagon } from 'lucide-react';
-
-import { verifyEmail } from '@documenso/lib/server-only/user/verify-email';
-import { Button } from '@documenso/ui/primitives/button';
-
-export type PageProps = {
-  params: {
-    token: string;
-  };
-};
-
-export default async function VerifyEmailPage({ params: { token } }: PageProps) {
-  if (!token) {
-    return (
-      <div className="w-full">
-        <div className="mb-4 text-red-300">
-          <XOctagon />
-        </div>
-
-        <h2 className="text-4xl font-semibold">No token provided</h2>
-        <p className="text-muted-foreground mt-2 text-base">
-          It seems that there is no token provided. Please check your email and try again.
-        </p>
-      </div>
-    );
-  }
-
-  const verified = await verifyEmail({ token });
-
-  if (verified === null) {
-    return (
-      <div className="flex w-full items-start">
-        <div className="mr-4 mt-1 hidden md:block">
-          <AlertTriangle className="h-10 w-10 text-yellow-500" strokeWidth={2} />
-        </div>
-
-        <div>
-          <h2 className="text-2xl font-bold md:text-4xl">Something went wrong</h2>
-
-          <p className="text-muted-foreground mt-4">
-            We were unable to verify your email. If your email is not verified already, please try
-            again.
-          </p>
-
-          <Button className="mt-4" asChild>
-            <Link href="/">Go back home</Link>
-          </Button>
-        </div>
-      </div>
-    );
-  }
-
-  if (!verified) {
-    return (
-      <div className="flex w-full items-start">
-        <div className="mr-4 mt-1 hidden md:block">
-          <XCircle className="text-destructive h-10 w-10" strokeWidth={2} />
-        </div>
-
-        <div>
-          <h2 className="text-2xl font-bold md:text-4xl">Your token has expired!</h2>
-
-          <p className="text-muted-foreground mt-4">
-            It seems that the provided token has expired. We've just sent you another token, please
-            check your email and try again.
-          </p>
-
-          <Button className="mt-4" asChild>
-            <Link href="/">Go back home</Link>
-          </Button>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="flex w-full items-start">
-      <div className="mr-4 mt-1 hidden md:block">
-        <CheckCircle2 className="h-10 w-10 text-green-500" strokeWidth={2} />
-      </div>
-
-      <div>
-        <h2 className="text-2xl font-bold md:text-4xl">Email Confirmed!</h2>
-
-        <p className="text-muted-foreground mt-4">
-          Your email has been successfully confirmed! You can now use all features of Documenso.
-        </p>
-
-        <Button className="mt-4" asChild>
-          <Link href="/">Go back home</Link>
-        </Button>
-      </div>
-    </div>
-  );
-}

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

@@ -1,28 +0,0 @@
-import Link from 'next/link';
-
-import { XCircle } from 'lucide-react';
-
-import { Button } from '@documenso/ui/primitives/button';
-
-export default function EmailVerificationWithoutTokenPage() {
-  return (
-    <div className="flex w-full items-start">
-      <div className="mr-4 mt-1 hidden md:block">
-        <XCircle className="text-destructive h-10 w-10" strokeWidth={2} />
-      </div>
-
-      <div>
-        <h2 className="text-2xl font-bold md:text-4xl">Uh oh! Looks like you're missing a token</h2>
-
-        <p className="text-muted-foreground mt-4">
-          It seems that there is no token provided, if you are trying to verify your email please
-          follow the link in your email.
-        </p>
-
-        <Button className="mt-4" asChild>
-          <Link href="/">Go back home</Link>
-        </Button>
-      </div>
-    </div>
-  );
-}

apps/web/src/components/(dashboard)/common/command-menu.tsx

@@ -40,22 +40,61 @@ const SETTINGS_PAGES = [
   { label: 'Password', path: '/settings/password' },
 ];
 
-export function CommandMenu() {
+export type CommandMenuProps = {
+  open?: boolean;
+  onOpenChange?: (_open: boolean) => void;
+};
+
+export function CommandMenu({ open, onOpenChange }: CommandMenuProps) {
   const { setTheme } = useTheme();
-  const { push } = useRouter();
-  const [open, setOpen] = useState(false);
+  const router = useRouter();
+
+  const [isOpen, setIsOpen] = useState(() => open ?? false);
   const [search, setSearch] = useState('');
   const [pages, setPages] = useState<string[]>([]);
+
   const currentPage = pages[pages.length - 1];
 
   const toggleOpen = () => {
-    setOpen((open) => !open);
+    setIsOpen((isOpen) => !isOpen);
+    onOpenChange?.(!isOpen);
+
+    if (isOpen) {
+      setPages([]);
+      setSearch('');
+    }
+  };
+
+  const setOpen = useCallback(
+    (open: boolean) => {
+      setIsOpen(open);
+      onOpenChange?.(open);
+
+      if (!open) {
+        setPages([]);
+        setSearch('');
+      }
+    },
+    [onOpenChange],
+  );
+
+  const push = useCallback(
+    (path: string) => {
+      router.push(path);
+      setOpen(false);
+    },
+    [router, setOpen],
+  );
+
+  const addPage = (page: string) => {
+    setPages((pages) => [...pages, page]);
+    setSearch('');
   };
 
   const goToSettings = useCallback(() => push(SETTINGS_PAGES[0].path), [push]);
   const goToDocuments = useCallback(() => push(DOCUMENTS_PAGES[0].path), [push]);
 
-  useHotkeys('ctrl+k', toggleOpen);
+  useHotkeys(['ctrl+k', 'meta+k'], toggleOpen);
   useHotkeys(SETTINGS_PAGE_SHORTCUT, goToSettings);
   useHotkeys(DOCUMENTS_PAGE_SHORTCUT, goToDocuments);
 
@@ -64,9 +103,11 @@ export function CommandMenu() {
     // Backspace goes to previous page when search is empty
     if (e.key === 'Escape' || (e.key === 'Backspace' && !search)) {
       e.preventDefault();
+
       if (currentPage === undefined) {
         setOpen(false);
       }
+
       setPages((pages) => pages.slice(0, -1));
     }
   };
@@ -78,6 +119,7 @@ export function CommandMenu() {
         onValueChange={setSearch}
         placeholder="Type a command or search..."
       />
+
       <CommandList>
         <CommandEmpty>No results found.</CommandEmpty>
         {!currentPage && (
@@ -89,7 +131,7 @@ export function CommandMenu() {
               <Commands push={push} pages={SETTINGS_PAGES} />
             </CommandGroup>
             <CommandGroup heading="Preferences">
-              <CommandItem onSelect={() => setPages([...pages, 'theme'])}>Change theme</CommandItem>
+              <CommandItem onSelect={() => addPage('theme')}>Change theme</CommandItem>
             </CommandGroup>
           </>
         )}

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

@@ -1,16 +1,44 @@
 'use client';
 
-import { HTMLAttributes } from 'react';
+import { HTMLAttributes, useState } from 'react';
+
+import { Search } from 'lucide-react';
 
 import { cn } from '@documenso/ui/lib/utils';
+import { Button } from '@documenso/ui/primitives/button';
+
+import { CommandMenu } from '../common/command-menu';
 
 export type DesktopNavProps = HTMLAttributes<HTMLDivElement>;
 
 export const DesktopNav = ({ className, ...props }: DesktopNavProps) => {
   // const pathname = usePathname();
+  const [open, setOpen] = useState(false);
 
   return (
-    <div className={cn('ml-8 hidden flex-1 gap-x-6 md:flex', className)} {...props}>
+    <div
+      className={cn('ml-8 hidden flex-1 gap-x-6 md:flex md:justify-center', className)}
+      {...props}
+    >
+      <CommandMenu open={open} onOpenChange={setOpen} />
+
+      <Button
+        variant="outline"
+        className="text-muted-foreground flex w-96 items-center justify-between rounded-lg"
+        onClick={() => setOpen((open) => !open)}
+      >
+        <div className="flex items-center">
+          <Search className="mr-2 h-5 w-5" />
+          Search
+        </div>
+
+        <div>
+          <div className="text-muted-foreground bg-muted rounded-md px-1.5 py-0.5 font-mono text-xs">
+            Ctrl+K
+          </div>
+        </div>
+      </Button>
+
       {/* We have no other subpaths rn */}
       {/* <Link
         href="/documents"

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

@@ -4,7 +4,7 @@ import Link from 'next/link';
 
 import {
   CreditCard,
-  Lock,
+  Key,
   LogOut,
   User as LucideUser,
   Monitor,
@@ -87,9 +87,9 @@ export const ProfileDropdown = ({ user }: ProfileDropdownProps) => {
         </DropdownMenuItem>
 
         <DropdownMenuItem asChild>
-          <Link href="/settings/security" className="cursor-pointer">
-            <Lock className="mr-2 h-4 w-4" />
-            Security
+          <Link href="/settings/password" className="cursor-pointer">
+            <Key className="mr-2 h-4 w-4" />
+            Password
           </Link>
         </DropdownMenuItem>
 

apps/web/src/components/(dashboard)/layout/verify-email-banner.tsx

@@ -1,123 +0,0 @@
-'use client';
-
-import { useEffect, useState } from 'react';
-
-import { AlertTriangle } from 'lucide-react';
-
-import { ONE_SECOND } from '@documenso/lib/constants/time';
-import { trpc } from '@documenso/trpc/react';
-import { Button } from '@documenso/ui/primitives/button';
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogTitle,
-} from '@documenso/ui/primitives/dialog';
-import { useToast } from '@documenso/ui/primitives/use-toast';
-
-export type VerifyEmailBannerProps = {
-  email: string;
-};
-
-const RESEND_CONFIRMATION_EMAIL_TIMEOUT = 20 * ONE_SECOND;
-
-export const VerifyEmailBanner = ({ email }: VerifyEmailBannerProps) => {
-  const { toast } = useToast();
-  const [isOpen, setIsOpen] = useState(false);
-
-  const [isButtonDisabled, setIsButtonDisabled] = useState(false);
-
-  const { mutateAsync: sendConfirmationEmail, isLoading } =
-    trpc.profile.sendConfirmationEmail.useMutation();
-
-  const onResendConfirmationEmail = async () => {
-    try {
-      setIsButtonDisabled(true);
-
-      await sendConfirmationEmail({ email: email });
-
-      toast({
-        title: 'Success',
-        description: 'Verification email sent successfully.',
-      });
-
-      setIsOpen(false);
-      setTimeout(() => setIsButtonDisabled(false), RESEND_CONFIRMATION_EMAIL_TIMEOUT);
-    } catch (err) {
-      setIsButtonDisabled(false);
-
-      toast({
-        title: 'Error',
-        description: 'Something went wrong while sending the confirmation email.',
-        variant: 'destructive',
-      });
-    }
-  };
-
-  useEffect(() => {
-    // Check localStorage to see if we've recently automatically displayed the dialog
-    // if it was within the past 24 hours, don't show it again
-    // otherwise, show it again and update the localStorage timestamp
-    const emailVerificationDialogLastShown = localStorage.getItem(
-      'emailVerificationDialogLastShown',
-    );
-
-    if (emailVerificationDialogLastShown) {
-      const lastShownTimestamp = parseInt(emailVerificationDialogLastShown);
-
-      if (Date.now() - lastShownTimestamp < 24 * 60 * 60 * 1000) {
-        return;
-      }
-    }
-
-    setIsOpen(true);
-
-    localStorage.setItem('emailVerificationDialogLastShown', Date.now().toString());
-  }, []);
-
-  return (
-    <>
-      <div className="bg-yellow-200 dark:bg-yellow-400">
-        <div className="mx-auto flex max-w-screen-xl items-center justify-center gap-x-4 px-4 py-2 text-sm font-medium text-yellow-900">
-          <div className="flex items-center">
-            <AlertTriangle className="mr-2.5 h-5 w-5" />
-            Verify your email address to unlock all features.
-          </div>
-
-          <div>
-            <Button
-              variant="ghost"
-              className="h-auto px-2.5 py-1.5 text-yellow-900 hover:bg-yellow-100 hover:text-yellow-900 dark:hover:bg-yellow-500"
-              disabled={isButtonDisabled}
-              onClick={() => setIsOpen(true)}
-              size="sm"
-            >
-              {isButtonDisabled ? 'Verification Email Sent' : 'Verify Now'}
-            </Button>
-          </div>
-        </div>
-      </div>
-
-      <Dialog open={isOpen} onOpenChange={setIsOpen}>
-        <DialogContent>
-          <DialogTitle>Verify your email address</DialogTitle>
-
-          <DialogDescription>
-            We've sent a confirmation email to <strong>{email}</strong>. Please check your inbox and
-            click the link in the email to verify your account.
-          </DialogDescription>
-
-          <div>
-            <Button
-              disabled={isButtonDisabled}
-              loading={isLoading}
-              onClick={onResendConfirmationEmail}
-            >
-              {isLoading ? 'Sending...' : 'Resend Confirmation Email'}
-            </Button>
-          </div>
-        </DialogContent>
-      </Dialog>
-    </>
-  );
-};

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

@@ -5,7 +5,7 @@ import { HTMLAttributes } from 'react';
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 
-import { CreditCard, Lock, User } from 'lucide-react';
+import { CreditCard, Key, User } from 'lucide-react';
 
 import { useFeatureFlags } from '@documenso/lib/client-only/providers/feature-flag';
 import { cn } from '@documenso/ui/lib/utils';
@@ -35,16 +35,16 @@ export const DesktopNav = ({ className, ...props }: DesktopNavProps) => {
         </Button>
       </Link>
 
-      <Link href="/settings/security">
+      <Link href="/settings/password">
         <Button
           variant="ghost"
           className={cn(
             'w-full justify-start',
-            pathname?.startsWith('/settings/security') && 'bg-secondary',
+            pathname?.startsWith('/settings/password') && 'bg-secondary',
           )}
         >
-          <Lock className="mr-2 h-5 w-5" />
-          Security
+          <Key className="mr-2 h-5 w-5" />
+          Password
         </Button>
       </Link>
 

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

@@ -5,7 +5,7 @@ import { HTMLAttributes } from 'react';
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 
-import { CreditCard, Lock, User } from 'lucide-react';
+import { CreditCard, Key, User } from 'lucide-react';
 
 import { useFeatureFlags } from '@documenso/lib/client-only/providers/feature-flag';
 import { cn } from '@documenso/ui/lib/utils';
@@ -38,16 +38,16 @@ export const MobileNav = ({ className, ...props }: MobileNavProps) => {
         </Button>
       </Link>
 
-      <Link href="/settings/security">
+      <Link href="/settings/password">
         <Button
           variant="ghost"
           className={cn(
             'w-full justify-start',
-            pathname?.startsWith('/settings/security') && 'bg-secondary',
+            pathname?.startsWith('/settings/password') && 'bg-secondary',
           )}
         >
-          <Lock className="mr-2 h-5 w-5" />
-          Security
+          <Key className="mr-2 h-5 w-5" />
+          Password
         </Button>
       </Link>
 

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

@@ -1,58 +0,0 @@
-'use client';
-
-import { useState } from 'react';
-
-import { Button } from '@documenso/ui/primitives/button';
-
-import { DisableAuthenticatorAppDialog } from './disable-authenticator-app-dialog';
-import { EnableAuthenticatorAppDialog } from './enable-authenticator-app-dialog';
-
-type AuthenticatorAppProps = {
-  isTwoFactorEnabled: boolean;
-};
-
-export const AuthenticatorApp = ({ isTwoFactorEnabled }: AuthenticatorAppProps) => {
-  const [modalState, setModalState] = useState<'enable' | 'disable' | null>(null);
-
-  const isEnableDialogOpen = modalState === 'enable';
-  const isDisableDialogOpen = modalState === 'disable';
-
-  return (
-    <>
-      <div className="mt-4 flex flex-col justify-between gap-4 rounded-lg border p-4 md:flex-row md:items-center md:gap-8">
-        <div className="flex-1">
-          <p>Authenticator app</p>
-
-          <p className="text-muted-foreground mt-2 max-w-[50ch] text-sm">
-            Create one-time passwords that serve as a secondary authentication method for confirming
-            your identity when requested during the sign-in process.
-          </p>
-        </div>
-
-        <div>
-          {isTwoFactorEnabled ? (
-            <Button variant="destructive" onClick={() => setModalState('disable')} size="sm">
-              Disable 2FA
-            </Button>
-          ) : (
-            <Button onClick={() => setModalState('enable')} size="sm">
-              Enable 2FA
-            </Button>
-          )}
-        </div>
-      </div>
-
-      <EnableAuthenticatorAppDialog
-        key={isEnableDialogOpen ? 'open' : 'closed'}
-        open={isEnableDialogOpen}
-        onOpenChange={(open) => !open && setModalState(null)}
-      />
-
-      <DisableAuthenticatorAppDialog
-        key={isDisableDialogOpen ? 'open' : 'closed'}
-        open={isDisableDialogOpen}
-        onOpenChange={(open) => !open && setModalState(null)}
-      />
-    </>
-  );
-};

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

@@ -1,161 +0,0 @@
-import { useRouter } from 'next/navigation';
-
-import { zodResolver } from '@hookform/resolvers/zod';
-import { flushSync } from 'react-dom';
-import { useForm } from 'react-hook-form';
-import { z } from 'zod';
-
-import { trpc } from '@documenso/trpc/react';
-import { Button } from '@documenso/ui/primitives/button';
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-} from '@documenso/ui/primitives/dialog';
-import {
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from '@documenso/ui/primitives/form/form';
-import { Input } from '@documenso/ui/primitives/input';
-import { useToast } from '@documenso/ui/primitives/use-toast';
-
-export const ZDisableTwoFactorAuthenticationForm = z.object({
-  password: z.string().min(6).max(72),
-  backupCode: z.string(),
-});
-
-export type TDisableTwoFactorAuthenticationForm = z.infer<
-  typeof ZDisableTwoFactorAuthenticationForm
->;
-
-export type DisableAuthenticatorAppDialogProps = {
-  open: boolean;
-  onOpenChange: (_open: boolean) => void;
-};
-
-export const DisableAuthenticatorAppDialog = ({
-  open,
-  onOpenChange,
-}: DisableAuthenticatorAppDialogProps) => {
-  const router = useRouter();
-  const { toast } = useToast();
-
-  const { mutateAsync: disableTwoFactorAuthentication } =
-    trpc.twoFactorAuthentication.disable.useMutation();
-
-  const disableTwoFactorAuthenticationForm = useForm<TDisableTwoFactorAuthenticationForm>({
-    defaultValues: {
-      password: '',
-      backupCode: '',
-    },
-    resolver: zodResolver(ZDisableTwoFactorAuthenticationForm),
-  });
-
-  const { isSubmitting: isDisableTwoFactorAuthenticationSubmitting } =
-    disableTwoFactorAuthenticationForm.formState;
-
-  const onDisableTwoFactorAuthenticationFormSubmit = async ({
-    password,
-    backupCode,
-  }: TDisableTwoFactorAuthenticationForm) => {
-    try {
-      await disableTwoFactorAuthentication({ password, backupCode });
-
-      toast({
-        title: 'Two-factor authentication disabled',
-        description:
-          'Two-factor authentication has been disabled for your account. You will no longer be required to enter a code from your authenticator app when signing in.',
-      });
-
-      flushSync(() => {
-        onOpenChange(false);
-      });
-
-      router.refresh();
-    } catch (_err) {
-      toast({
-        title: 'Unable to disable two-factor authentication',
-        description:
-          'We were unable to disable two-factor authentication for your account. Please ensure that you have entered your password and backup code correctly and try again.',
-        variant: 'destructive',
-      });
-    }
-  };
-
-  return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="w-full max-w-xl md:max-w-xl lg:max-w-xl">
-        <DialogHeader>
-          <DialogTitle>Disable Authenticator App</DialogTitle>
-
-          <DialogDescription>
-            To disable the Authenticator App for your account, please enter your password and a
-            backup code. If you do not have a backup code available, please contact support.
-          </DialogDescription>
-        </DialogHeader>
-
-        <Form {...disableTwoFactorAuthenticationForm}>
-          <form
-            onSubmit={disableTwoFactorAuthenticationForm.handleSubmit(
-              onDisableTwoFactorAuthenticationFormSubmit,
-            )}
-            className="flex flex-col gap-y-4"
-          >
-            <FormField
-              name="password"
-              control={disableTwoFactorAuthenticationForm.control}
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel className="text-muted-foreground">Password</FormLabel>
-                  <FormControl>
-                    <Input
-                      {...field}
-                      type="password"
-                      autoComplete="current-password"
-                      value={field.value ?? ''}
-                    />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-
-            <FormField
-              name="backupCode"
-              control={disableTwoFactorAuthenticationForm.control}
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel className="text-muted-foreground">Backup Code</FormLabel>
-                  <FormControl>
-                    <Input {...field} type="text" value={field.value ?? ''} />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-
-            <div className="flex w-full items-center justify-between">
-              <Button type="button" variant="ghost" onClick={() => onOpenChange(false)}>
-                Cancel
-              </Button>
-
-              <Button
-                type="submit"
-                variant="destructive"
-                loading={isDisableTwoFactorAuthenticationSubmitting}
-              >
-                Disable 2FA
-              </Button>
-            </div>
-          </form>
-        </Form>
-      </DialogContent>
-    </Dialog>
-  );
-};

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

@@ -1,283 +0,0 @@
-import { useMemo } from 'react';
-
-import { useRouter } from 'next/navigation';
-
-import { zodResolver } from '@hookform/resolvers/zod';
-import { flushSync } from 'react-dom';
-import { useForm } from 'react-hook-form';
-import { match } from 'ts-pattern';
-import { renderSVG } from 'uqr';
-import { z } from 'zod';
-
-import { trpc } from '@documenso/trpc/react';
-import { Button } from '@documenso/ui/primitives/button';
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-} from '@documenso/ui/primitives/dialog';
-import {
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from '@documenso/ui/primitives/form/form';
-import { Input } from '@documenso/ui/primitives/input';
-import { useToast } from '@documenso/ui/primitives/use-toast';
-
-import { RecoveryCodeList } from './recovery-code-list';
-
-export const ZSetupTwoFactorAuthenticationForm = z.object({
-  password: z.string().min(6).max(72),
-});
-
-export type TSetupTwoFactorAuthenticationForm = z.infer<typeof ZSetupTwoFactorAuthenticationForm>;
-
-export const ZEnableTwoFactorAuthenticationForm = z.object({
-  token: z.string(),
-});
-
-export type TEnableTwoFactorAuthenticationForm = z.infer<typeof ZEnableTwoFactorAuthenticationForm>;
-
-export type EnableAuthenticatorAppDialogProps = {
-  open: boolean;
-  onOpenChange: (_open: boolean) => void;
-};
-
-export const EnableAuthenticatorAppDialog = ({
-  open,
-  onOpenChange,
-}: EnableAuthenticatorAppDialogProps) => {
-  const router = useRouter();
-  const { toast } = useToast();
-
-  const { mutateAsync: setupTwoFactorAuthentication, data: setupTwoFactorAuthenticationData } =
-    trpc.twoFactorAuthentication.setup.useMutation();
-
-  const { mutateAsync: enableTwoFactorAuthentication, data: enableTwoFactorAuthenticationData } =
-    trpc.twoFactorAuthentication.enable.useMutation();
-
-  const setupTwoFactorAuthenticationForm = useForm<TSetupTwoFactorAuthenticationForm>({
-    defaultValues: {
-      password: '',
-    },
-    resolver: zodResolver(ZSetupTwoFactorAuthenticationForm),
-  });
-
-  const { isSubmitting: isSetupTwoFactorAuthenticationSubmitting } =
-    setupTwoFactorAuthenticationForm.formState;
-
-  const enableTwoFactorAuthenticationForm = useForm<TEnableTwoFactorAuthenticationForm>({
-    defaultValues: {
-      token: '',
-    },
-    resolver: zodResolver(ZEnableTwoFactorAuthenticationForm),
-  });
-
-  const { isSubmitting: isEnableTwoFactorAuthenticationSubmitting } =
-    enableTwoFactorAuthenticationForm.formState;
-
-  const step = useMemo(() => {
-    if (!setupTwoFactorAuthenticationData || isSetupTwoFactorAuthenticationSubmitting) {
-      return 'setup';
-    }
-
-    if (!enableTwoFactorAuthenticationData || isEnableTwoFactorAuthenticationSubmitting) {
-      return 'enable';
-    }
-
-    return 'view';
-  }, [
-    setupTwoFactorAuthenticationData,
-    isSetupTwoFactorAuthenticationSubmitting,
-    enableTwoFactorAuthenticationData,
-    isEnableTwoFactorAuthenticationSubmitting,
-  ]);
-
-  const onSetupTwoFactorAuthenticationFormSubmit = async ({
-    password,
-  }: TSetupTwoFactorAuthenticationForm) => {
-    try {
-      await setupTwoFactorAuthentication({ password });
-    } catch (_err) {
-      toast({
-        title: 'Unable to setup two-factor authentication',
-        description:
-          'We were unable to setup two-factor authentication for your account. Please ensure that you have entered your password correctly and try again.',
-        variant: 'destructive',
-      });
-    }
-  };
-
-  const onEnableTwoFactorAuthenticationFormSubmit = async ({
-    token,
-  }: TEnableTwoFactorAuthenticationForm) => {
-    try {
-      await enableTwoFactorAuthentication({ code: token });
-
-      toast({
-        title: 'Two-factor authentication enabled',
-        description:
-          'Two-factor authentication has been enabled for your account. You will now be required to enter a code from your authenticator app when signing in.',
-      });
-    } catch (_err) {
-      toast({
-        title: 'Unable to setup two-factor authentication',
-        description:
-          'We were unable to setup two-factor authentication for your account. Please ensure that you have entered your password correctly and try again.',
-        variant: 'destructive',
-      });
-    }
-  };
-
-  const onCompleteClick = () => {
-    flushSync(() => {
-      onOpenChange(false);
-    });
-
-    router.refresh();
-  };
-
-  return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="w-full max-w-xl md:max-w-xl lg:max-w-xl">
-        <DialogHeader>
-          <DialogTitle>Enable Authenticator App</DialogTitle>
-
-          {step === 'setup' && (
-            <DialogDescription>
-              To enable two-factor authentication, please enter your password below.
-            </DialogDescription>
-          )}
-
-          {step === 'view' && (
-            <DialogDescription>
-              Your recovery codes are listed below. Please store them in a safe place.
-            </DialogDescription>
-          )}
-        </DialogHeader>
-
-        {match(step)
-          .with('setup', () => {
-            return (
-              <Form {...setupTwoFactorAuthenticationForm}>
-                <form
-                  onSubmit={setupTwoFactorAuthenticationForm.handleSubmit(
-                    onSetupTwoFactorAuthenticationFormSubmit,
-                  )}
-                  className="flex flex-col gap-y-4"
-                >
-                  <FormField
-                    name="password"
-                    control={setupTwoFactorAuthenticationForm.control}
-                    render={({ field }) => (
-                      <FormItem>
-                        <FormLabel className="text-muted-foreground">Password</FormLabel>
-                        <FormControl>
-                          <Input
-                            {...field}
-                            type="password"
-                            autoComplete="current-password"
-                            value={field.value ?? ''}
-                          />
-                        </FormControl>
-                        <FormMessage />
-                      </FormItem>
-                    )}
-                  />
-
-                  <div className="flex w-full items-center justify-between">
-                    <Button type="button" variant="ghost" onClick={() => onOpenChange(false)}>
-                      Cancel
-                    </Button>
-
-                    <Button type="submit" loading={isSetupTwoFactorAuthenticationSubmitting}>
-                      Continue
-                    </Button>
-                  </div>
-                </form>
-              </Form>
-            );
-          })
-          .with('enable', () => (
-            <Form {...enableTwoFactorAuthenticationForm}>
-              <form
-                onSubmit={enableTwoFactorAuthenticationForm.handleSubmit(
-                  onEnableTwoFactorAuthenticationFormSubmit,
-                )}
-                className="flex flex-col gap-y-4"
-              >
-                <p className="text-muted-foreground text-sm">
-                  To enable two-factor authentication, scan the following QR code using your
-                  authenticator app.
-                </p>
-
-                <div
-                  className="flex h-36 justify-center"
-                  dangerouslySetInnerHTML={{
-                    __html: renderSVG(setupTwoFactorAuthenticationData?.uri ?? ''),
-                  }}
-                />
-
-                <p className="text-muted-foreground text-sm">
-                  If your authenticator app does not support QR codes, you can use the following
-                  code instead:
-                </p>
-
-                <p className="bg-muted/60 text-muted-foreground rounded-lg p-2 text-center font-mono tracking-widest">
-                  {setupTwoFactorAuthenticationData?.secret}
-                </p>
-
-                <p className="text-muted-foreground text-sm">
-                  Once you have scanned the QR code or entered the code manually, enter the code
-                  provided by your authenticator app below.
-                </p>
-
-                <FormField
-                  name="token"
-                  control={enableTwoFactorAuthenticationForm.control}
-                  render={({ field }) => (
-                    <FormItem>
-                      <FormLabel className="text-muted-foreground">Token</FormLabel>
-                      <FormControl>
-                        <Input {...field} type="text" value={field.value ?? ''} />
-                      </FormControl>
-                      <FormMessage />
-                    </FormItem>
-                  )}
-                />
-
-                <div className="flex w-full items-center justify-between">
-                  <Button type="button" variant="ghost" onClick={() => onOpenChange(false)}>
-                    Cancel
-                  </Button>
-
-                  <Button type="submit" loading={isEnableTwoFactorAuthenticationSubmitting}>
-                    Enable 2FA
-                  </Button>
-                </div>
-              </form>
-            </Form>
-          ))
-          .with('view', () => (
-            <div>
-              {enableTwoFactorAuthenticationData?.recoveryCodes && (
-                <RecoveryCodeList recoveryCodes={enableTwoFactorAuthenticationData.recoveryCodes} />
-              )}
-
-              <div className="mt-4 flex w-full flex-row-reverse items-center justify-between">
-                <Button type="button" onClick={() => onCompleteClick()}>
-                  Complete
-                </Button>
-              </div>
-            </div>
-          ))
-          .exhaustive()}
-      </DialogContent>
-    </Dialog>
-  );
-};

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

@@ -1,57 +0,0 @@
-import { Copy } from 'lucide-react';
-
-import { useCopyToClipboard } from '@documenso/lib/client-only/hooks/use-copy-to-clipboard';
-import { useToast } from '@documenso/ui/primitives/use-toast';
-
-export type RecoveryCodeListProps = {
-  recoveryCodes: string[];
-};
-
-export const RecoveryCodeList = ({ recoveryCodes }: RecoveryCodeListProps) => {
-  const { toast } = useToast();
-  const [, copyToClipboard] = useCopyToClipboard();
-
-  const onCopyRecoveryCodeClick = async (code: string) => {
-    try {
-      const result = await copyToClipboard(code);
-
-      if (!result) {
-        throw new Error('Unable to copy recovery code');
-      }
-
-      toast({
-        title: 'Recovery code copied',
-        description: 'Your recovery code has been copied to your clipboard.',
-      });
-    } catch (_err) {
-      toast({
-        title: 'Unable to copy recovery code',
-        description:
-          'We were unable to copy your recovery code to your clipboard. Please try again.',
-        variant: 'destructive',
-      });
-    }
-  };
-
-  return (
-    <div className="grid grid-cols-2 gap-4">
-      {recoveryCodes.map((code) => (
-        <div
-          key={code}
-          className="bg-muted text-muted-foreground relative rounded-lg p-4 font-mono md:text-center"
-        >
-          <span>{code}</span>
-
-          <div className="absolute inset-y-0 right-4 flex items-center justify-center">
-            <button
-              className="opacity-60 hover:opacity-80"
-              onClick={() => void onCopyRecoveryCodeClick(code)}
-            >
-              <Copy className="h-5 w-5" />
-            </button>
-          </div>
-        </div>
-      ))}
-    </div>
-  );
-};

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

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

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

@@ -1,151 +0,0 @@
-import { useMemo } from 'react';
-
-import { zodResolver } from '@hookform/resolvers/zod';
-import { useForm } from 'react-hook-form';
-import { match } from 'ts-pattern';
-import { z } from 'zod';
-
-import { trpc } from '@documenso/trpc/react';
-import { Button } from '@documenso/ui/primitives/button';
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-} from '@documenso/ui/primitives/dialog';
-import {
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from '@documenso/ui/primitives/form/form';
-import { Input } from '@documenso/ui/primitives/input';
-import { useToast } from '@documenso/ui/primitives/use-toast';
-
-import { RecoveryCodeList } from './recovery-code-list';
-
-export const ZViewRecoveryCodesForm = z.object({
-  password: z.string().min(6).max(72),
-});
-
-export type TViewRecoveryCodesForm = z.infer<typeof ZViewRecoveryCodesForm>;
-
-export type ViewRecoveryCodesDialogProps = {
-  open: boolean;
-  onOpenChange: (_open: boolean) => void;
-};
-
-export const ViewRecoveryCodesDialog = ({ open, onOpenChange }: ViewRecoveryCodesDialogProps) => {
-  const { toast } = useToast();
-
-  const { mutateAsync: viewRecoveryCodes, data: viewRecoveryCodesData } =
-    trpc.twoFactorAuthentication.viewRecoveryCodes.useMutation();
-
-  const viewRecoveryCodesForm = useForm<TViewRecoveryCodesForm>({
-    defaultValues: {
-      password: '',
-    },
-    resolver: zodResolver(ZViewRecoveryCodesForm),
-  });
-
-  const { isSubmitting: isViewRecoveryCodesSubmitting } = viewRecoveryCodesForm.formState;
-
-  const step = useMemo(() => {
-    if (!viewRecoveryCodesData || isViewRecoveryCodesSubmitting) {
-      return 'authenticate';
-    }
-
-    return 'view';
-  }, [viewRecoveryCodesData, isViewRecoveryCodesSubmitting]);
-
-  const onViewRecoveryCodesFormSubmit = async ({ password }: TViewRecoveryCodesForm) => {
-    try {
-      await viewRecoveryCodes({ password });
-    } catch (_err) {
-      toast({
-        title: 'Unable to view recovery codes',
-        description:
-          'We were unable to view your recovery codes. Please ensure that you have entered your password correctly and try again.',
-        variant: 'destructive',
-      });
-    }
-  };
-
-  return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="w-full max-w-xl md:max-w-xl lg:max-w-xl">
-        <DialogHeader>
-          <DialogTitle>View Recovery Codes</DialogTitle>
-
-          {step === 'authenticate' && (
-            <DialogDescription>
-              To view your recovery codes, please enter your password below.
-            </DialogDescription>
-          )}
-
-          {step === 'view' && (
-            <DialogDescription>
-              Your recovery codes are listed below. Please store them in a safe place.
-            </DialogDescription>
-          )}
-        </DialogHeader>
-
-        {match(step)
-          .with('authenticate', () => {
-            return (
-              <Form {...viewRecoveryCodesForm}>
-                <form
-                  onSubmit={viewRecoveryCodesForm.handleSubmit(onViewRecoveryCodesFormSubmit)}
-                  className="flex flex-col gap-y-4"
-                >
-                  <FormField
-                    name="password"
-                    control={viewRecoveryCodesForm.control}
-                    render={({ field }) => (
-                      <FormItem>
-                        <FormLabel className="text-muted-foreground">Password</FormLabel>
-                        <FormControl>
-                          <Input
-                            {...field}
-                            type="password"
-                            autoComplete="current-password"
-                            value={field.value ?? ''}
-                          />
-                        </FormControl>
-                        <FormMessage />
-                      </FormItem>
-                    )}
-                  />
-
-                  <div className="flex w-full items-center justify-between">
-                    <Button type="button" variant="ghost" onClick={() => onOpenChange(false)}>
-                      Cancel
-                    </Button>
-
-                    <Button type="submit" loading={isViewRecoveryCodesSubmitting}>
-                      Continue
-                    </Button>
-                  </div>
-                </form>
-              </Form>
-            );
-          })
-          .with('view', () => (
-            <div>
-              {viewRecoveryCodesData?.recoveryCodes && (
-                <RecoveryCodeList recoveryCodes={viewRecoveryCodesData.recoveryCodes} />
-              )}
-
-              <div className="mt-4 flex flex-row-reverse items-center justify-between">
-                <Button onClick={() => onOpenChange(false)}>Complete</Button>
-              </div>
-            </div>
-          ))
-          .exhaustive()}
-      </DialogContent>
-    </Dialog>
-  );
-};

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

@@ -3,6 +3,7 @@
 import { useState } from 'react';
 
 import { zodResolver } from '@hookform/resolvers/zod';
+import { Eye, EyeOff } from 'lucide-react';
 import { signIn } from 'next-auth/react';
 import { useForm } from 'react-hook-form';
 import { FcGoogle } from 'react-icons/fc';
@@ -11,30 +12,23 @@ 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 { Dialog, DialogContent, DialogHeader, DialogTitle } from '@documenso/ui/primitives/dialog';
 import { FormErrorMessage } from '@documenso/ui/primitives/form/form-error-message';
-import { Input, PasswordInput } from '@documenso/ui/primitives/input';
+import { Input } from '@documenso/ui/primitives/input';
 import { Label } from '@documenso/ui/primitives/label';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
-const ERROR_MESSAGES: Partial<Record<keyof typeof ErrorCode, string>> = {
+const ERROR_MESSAGES = {
   [ErrorCode.CREDENTIALS_NOT_FOUND]: 'The email or password provided is incorrect',
   [ErrorCode.INCORRECT_EMAIL_PASSWORD]: 'The email or password provided is incorrect',
   [ErrorCode.USER_MISSING_PASSWORD]:
     'This account appears to be using a social login method, please sign in using that method',
-  [ErrorCode.INCORRECT_TWO_FACTOR_CODE]: 'The two-factor authentication code provided is incorrect',
-  [ErrorCode.INCORRECT_TWO_FACTOR_BACKUP_CODE]: 'The backup code provided is incorrect',
 };
 
-const TwoFactorEnabledErrorCode = ErrorCode.TWO_FACTOR_MISSING_CREDENTIALS;
-
 const LOGIN_REDIRECT_PATH = '/documents';
 
 export const ZSignInFormSchema = z.object({
   email: z.string().email().min(1),
   password: z.string().min(6).max(72),
-  totpCode: z.string().trim().optional(),
-  backupCode: z.string().trim().optional(),
 });
 
 export type TSignInFormSchema = z.infer<typeof ZSignInFormSchema>;
@@ -45,84 +39,33 @@ export type SignInFormProps = {
 
 export const SignInForm = ({ className }: SignInFormProps) => {
   const { toast } = useToast();
-  const [isTwoFactorAuthenticationDialogOpen, setIsTwoFactorAuthenticationDialogOpen] =
-    useState(false);
-
-  const [twoFactorAuthenticationMethod, setTwoFactorAuthenticationMethod] = useState<
-    'totp' | 'backup'
-  >('totp');
+  const [showPassword, setShowPassword] = useState(false);
 
   const {
     register,
     handleSubmit,
-    setValue,
     formState: { errors, isSubmitting },
   } = useForm<TSignInFormSchema>({
     values: {
       email: '',
       password: '',
-      totpCode: '',
-      backupCode: '',
     },
     resolver: zodResolver(ZSignInFormSchema),
   });
 
-  const onCloseTwoFactorAuthenticationDialog = () => {
-    setValue('totpCode', '');
-    setValue('backupCode', '');
-
-    setIsTwoFactorAuthenticationDialogOpen(false);
-  };
-
-  const onToggleTwoFactorAuthenticationMethodClick = () => {
-    const method = twoFactorAuthenticationMethod === 'totp' ? 'backup' : 'totp';
-
-    if (method === 'totp') {
-      setValue('backupCode', '');
-    }
-
-    if (method === 'backup') {
-      setValue('totpCode', '');
-    }
-
-    setTwoFactorAuthenticationMethod(method);
-  };
-
-  const onFormSubmit = async ({ email, password, totpCode, backupCode }: TSignInFormSchema) => {
+  const onFormSubmit = async ({ email, password }: TSignInFormSchema) => {
     try {
-      const credentials: Record<string, string> = {
+      const result = await signIn('credentials', {
         email,
         password,
-      };
-
-      if (totpCode) {
-        credentials.totpCode = totpCode;
-      }
-
-      if (backupCode) {
-        credentials.backupCode = backupCode;
-      }
-
-      const result = await signIn('credentials', {
-        ...credentials,
-
         callbackUrl: LOGIN_REDIRECT_PATH,
         redirect: false,
       });
 
       if (result?.error && isErrorCode(result.error)) {
-        if (result.error === TwoFactorEnabledErrorCode) {
-          setIsTwoFactorAuthenticationDialogOpen(true);
-
-          return;
-        }
-
-        const errorMessage = ERROR_MESSAGES[result.error];
-
         toast({
           variant: 'destructive',
-          title: 'Unable to sign in',
-          description: errorMessage ?? 'An unknown error occurred',
+          description: ERROR_MESSAGES[result.error],
         });
 
         return;
@@ -175,15 +118,32 @@ export const SignInForm = ({ className }: SignInFormProps) => {
           <span>Password</span>
         </Label>
 
-        <PasswordInput
+        <div className="relative">
+          <Input
             id="password"
+            type={showPassword ? 'text' : 'password'}
             minLength={6}
             maxLength={72}
-          className="bg-background mt-2"
             autoComplete="current-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>
 
@@ -213,67 +173,6 @@ export const SignInForm = ({ className }: SignInFormProps) => {
         <FcGoogle className="mr-2 h-5 w-5" />
         Google
       </Button>
-
-      <Dialog
-        open={isTwoFactorAuthenticationDialogOpen}
-        onOpenChange={onCloseTwoFactorAuthenticationDialog}
-      >
-        <DialogContent>
-          <DialogHeader>
-            <DialogTitle>Two-Factor Authentication</DialogTitle>
-          </DialogHeader>
-
-          <form onSubmit={handleSubmit(onFormSubmit)}>
-            {twoFactorAuthenticationMethod === 'totp' && (
-              <div>
-                <Label htmlFor="totpCode" className="text-muted-forground">
-                  Authentication Token
-                </Label>
-
-                <Input
-                  id="totpCode"
-                  type="text"
-                  className="bg-background mt-2"
-                  {...register('totpCode')}
-                />
-
-                <FormErrorMessage className="mt-1.5" error={errors.totpCode} />
-              </div>
-            )}
-
-            {twoFactorAuthenticationMethod === 'backup' && (
-              <div>
-                <Label htmlFor="backupCode" className="text-muted-forground">
-                  Backup Code
-                </Label>
-
-                <Input
-                  id="backupCode"
-                  type="text"
-                  className="bg-background mt-2"
-                  {...register('backupCode')}
-                />
-
-                <FormErrorMessage className="mt-1.5" error={errors.backupCode} />
-              </div>
-            )}
-
-            <div className="mt-4 flex items-center justify-between">
-              <Button
-                type="button"
-                variant="ghost"
-                onClick={onToggleTwoFactorAuthenticationMethodClick}
-              >
-                {twoFactorAuthenticationMethod === 'totp' ? 'Use Backup Code' : 'Use Authenticator'}
-              </Button>
-
-              <Button type="submit" loading={isSubmitting}>
-                Sign In
-              </Button>
-            </div>
-          </form>
-        </DialogContent>
-      </Dialog>
     </form>
   );
 };

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

@@ -6,11 +6,10 @@ import { useRouter } from 'next/navigation';
 import { motion } from 'framer-motion';
 import { ChevronLeft } from 'lucide-react';
 
+import backgroundPattern from '@documenso/assets/images/background-pattern.png';
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
 
-import backgroundPattern from '~/assets/background-pattern.png';
-
 export type NotFoundPartialProps = {
   children?: React.ReactNode;
 };

apps/web/src/helpers/constants.ts

@@ -1,17 +0,0 @@
-export const DATE_FORMATS = [
-  {
-    key: 'YYYYMMDD',
-    label: 'YYYY-MM-DD',
-    value: 'yyyy-MM-dd hh:mm a',
-  },
-  {
-    key: 'DDMMYYYY',
-    label: 'DD/MM/YYYY',
-    value: 'dd/MM/yyyy hh:mm a',
-  },
-  {
-    key: 'MMDDYYYY',
-    label: 'MM/DD/YYYY',
-    value: 'MM/dd/yyyy hh:mm a',
-  },
-];

apps/web/src/pages/api/share/index.ts

@@ -0,0 +1,23 @@
+import type { NextApiRequest, NextApiResponse } from 'next';
+
+import { getRecipientOrSenderByShareLinkSlug } from '@documenso/lib/server-only/share/get-recipient-or-sender-by-share-link-slug';
+
+export type ShareHandlerAPIResponse =
+  | Awaited<ReturnType<typeof getRecipientOrSenderByShareLinkSlug>>
+  | { error: string };
+
+export default async function shareHandler(req: NextApiRequest, res: NextApiResponse) {
+  try {
+    if (typeof req.query.slug !== 'string') {
+      throw new Error('Invalid slug');
+    }
+
+    const data = await getRecipientOrSenderByShareLinkSlug({
+      slug: req.query.slug,
+    });
+
+    return res.json(data);
+  } catch (error) {
+    return res.status(404).json({ error: 'Not found' });
+  }
+}

docker/compose-entrypoint.sh

@@ -7,6 +7,6 @@ cd "$MONOREPO_ROOT"
 
 npm ci
 
-npm run db-migrate:dev
+npm run prisma:migrate-dev
 
 npm run dev

package.json

@@ -47,7 +47,7 @@
     "packages/*"
   ],
   "dependencies": {
-    "recharts": "^2.7.2",
-    "react-hotkeys-hook": "^4.4.1"
+    "react-hotkeys-hook": "^4.4.1",
+    "recharts": "^2.7.2"
   }
 }