fix: improve sign in and sign up pages

Improve the general styling of the app by removing floats and replacing it `flex`. Additionally, improve the constrast of certain parts of the app and add some transitions to hover changes.

.dockerignore

@@ -0,0 +1,38 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+**/node_modules
+**/.pnp
+**.pnp.js
+
+# testing
+**/coverage
+
+# next.js
+**/.next/
+**/out/
+
+# production
+**/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+.env
+.env.example

.env.example

@@ -1,6 +1,9 @@
 # Database
 # Option 1: You can use the provided remote test database, courtesy of the documenso team: postgres://documenso_test_user:GnmLG14u12sd9zHsd4vVWwP40WneFJMo@dpg-cf2hljh4reb5o45oqpq0-a.oregon-postgres.render.com/documenso_test_e2i3
 # Option 2: Set up a local Postgres SQL instance (RECOMMENDED)
+# Option 3: Use the provided dx setup (RECOMMENDED)
+#   => postgres://documenso:password@127.0.0.1:54320/documenso
+#
 # ⚠ WARNING: The test database can be resetted or taken offline at any point.
 # ⚠ WARNING: Please be aware that nothing written to the test databae is private.
 DATABASE_URL=''
@@ -20,6 +23,12 @@ SENDGRID_API_KEY=''
 
 # SMTP
 # Set SMTP credentials to use SMTP instead of the Sendgrid API.
+# If you're using the dx setup you can use the following values:
+#
+# SMTP_MAIL_HOST='127.0.0.1'
+# SMTP_MAIL_PORT='2500'
+# SMTP_MAIL_USER='documenso'
+# SMTP_MAIL_PASSWORD='documenso'
 SMTP_MAIL_HOST=''
 SMTP_MAIL_PORT=''
 SMTP_MAIL_USER=''

.gitmodules

@@ -1,3 +0,0 @@
-[submodule "apps/website/documenso/website"]
-	path = apps/website/documenso/website
-	url = http://github.com/documenso/website.git

README.md

@@ -78,7 +78,7 @@ The current project goal is to <b>[release a production ready version](https://g
 Documenso is built using awesome open source tech including:
 
 - [Typescript](https://www.typescriptlang.org/)
-- [Javascript (when neccessary)](https://developer.mozilla.org/en-US/docs/Web/JavaScript)
+- [Javascript (when necessary)](https://developer.mozilla.org/en-US/docs/Web/JavaScript)
 - [NextJS (JS Fullstack Framework)](https://nextjs.org/)
 - [Postgres SQL (Database)](https://www.postgresql.org/)
 - [Prisma (ORM - Object-relational mapping)](https://www.prisma.io/)
@@ -96,12 +96,39 @@ Documenso is built using awesome open source tech including:
 To run Documenso locally you need
 
 - [Node.js (Version: >=18.x)](https://nodejs.org/en/download/)
-- Node Package Manger NPM - included in Node.js
+- Node Package Manager NPM - included in Node.js
 - [PostgreSQL (local or remote)](https://www.postgresql.org/download/)
 
+## Developer Quickstart
+
+> **Note**: This is a quickstart for developers. It assumes that you have both [docker](https://docs.docker.com/get-docker/) and [docker-compose](https://docs.docker.com/compose/) installed on your machine.
+
+Want to get up and running quickly? Follow these steps:
+
+- [Clone the repository](https://help.github.com/articles/cloning-a-repository/) it to your local device.
+
+  ```sh
+  git clone https://github.com/documenso/documenso
+  ```
+
+- Set up your .env file using the recommendations in the .env.example file.
+- Run `npm run dx` in the root directory
+  - This will spin up a postgres database and inbucket mail server in docker containers.
+- Run `npm run dev` in the root directory
+- Want it even faster? Just use
+    ```sh
+  npm run d
+  ```
+
+That's it! You should now be able to access the app at http://localhost:3000
+
+Incoming mail will be available at http://localhost:9000
+
+Your database will also be available on port `5432`. You can connect to it using your favorite database client.
+
 ## Developer Setup
 
-Follow these steps to setup documenso on you local machnine:
+Follow these steps to setup documenso on you local machine:
 
 - [Clone the repository](https://help.github.com/articles/cloning-a-repository/) it to your local device.
   ```sh
@@ -111,12 +138,12 @@ Follow these steps to setup documenso on you local machnine:
 - Rename <code>.env.example</code> to <code>.env</code>
 - Set DATABASE_URL value in .env file
   - You can use the provided test database url (may be wiped at any point)
-  - Or setup a local postgres sql instance (recommened)
+  - Or setup a local postgres sql instance (recommended)
 - Create the database scheme by running <code>db-migrate:dev</code>
 - Setup your mail provider
   - Set <code>SENDGRID_API_KEY</code> value in .env file
   - You need a SendGrid account, which you can create [here](https://signup.sendgrid.com/).
-  - Documenso uses [Nodemailer](https://nodemailer.com/about/) so you can easily use your own SMTP server by setting the <code>SMTP\_\* varibles</code> in your .env
+  - Documenso uses [Nodemailer](https://nodemailer.com/about/) so you can easily use your own SMTP server by setting the <code>SMTP\_\* variables</code> in your .env
 - Run <code>npm run dev</code> root directory to start
 - Register a new user at http://localhost:3000/signup
 
@@ -127,20 +154,20 @@ Follow these steps to setup documenso on you local machnine:
 
 - Optional: Create your own signing certificate
   - A demo certificate is provided in /app/web/ressources/certificate.p12
-  - To generate you own using these steps and a linux Terminal or Windows Linux Subsystem see **Create your own signging certificate**.
+  - To generate your own using these steps and a linux Terminal or Windows Linux Subsystem see **Create your own signing certificate**.
 
 ## Updating
 
-- If you pull the newest version from main, using <code>git pull</code>, it may be neccessary to regenerate your database client
+- If you pull the newest version from main, using <code>git pull</code>, it may be necessary to regenerate your database client
 - You can do this by running the generate command in /packages/prisma:
   ```sh
   npx prisma generate
   ```
-- This is not neccessary on first clone
+- This is not necessary on first clone
 
-# Creating your own signging certificate
+# Creating your own signing certificate
 
-For the digital signature of you documents you need a signign certificate in .p12 formate (public and private key). You can buy one (not recommended for dev) or use the steps to create a self-signed one:
+For the digital signature of your documents you need a signing certificate in .p12 formate (public and private key). You can buy one (not recommended for dev) or use the steps to create a self-signed one:
 
 1. Generate a private key using the OpenSSL command. You can run the following command to generate a 2048-bit RSA key:\
    <code>openssl genrsa -out private.key 2048</code>
@@ -153,6 +180,15 @@ For the digital signature of you documents you need a signign certificate in .p1
 4. You will be prompted to enter a password for the p12 file. Choose a strong password and remember it, as you will need it to use the certificate (**can be empty for dev certificates**)
 5. Place the certificate <code>/apps/web/ressource/certificate.p12</code>
 
+# Docker
+
+> We are still working on the publishing of docker images, in the meantime you can follow the steps below to create a production ready docker image.
+
+Want to create a production ready docker image? Follow these steps:
+
+- Run `./docker/build.sh` in the root directory.
+- Publish the image to your docker registry of choice.
+
 # Deploying - Coming Soon™
 
 - Docker support

apps/web/components/editor/pdf-signer.tsx

@@ -80,12 +80,11 @@ export default function PDFSigner(props: any) {
                 : props.document.User.email}{" "}
               would like you to sign this document.
             </p>
-            <p className="mt-3 text-sm md:mt-0 md:ml-6">
+            <p className="mt-3 text-sm md:mt-0 md:ml-6 text-right md:text-inherit">
               <Button
                 disabled={!signingDone}
                 color="secondary"
                 icon={CheckBadgeIcon}
-                className="float-right"
                 onClick={() => {
                   signDocument(props.document, localSignatures, `${router.query.token}`).then(
                     () => {

apps/web/components/editor/recipient-selector.tsx

@@ -45,10 +45,11 @@ export default function RecipientSelector(props: any) {
               {props?.recipients.map((recipient: any) => (
                 <Listbox.Option
                   key={recipient?.id}
+                  disabled={!recipient?.email}
                   className={({ active }) =>
                     classNames(
                       active ? "bg-neon-dark text-white" : "text-gray-900",
-                      "relative cursor-default select-none py-2 pl-3 pr-9"
+                      "relative cursor-default select-none py-2 pl-3 pr-9 aria-disabled:opacity-50 aria-disabled:cursor-not-allowed"
                     )
                   }
                   value={recipient}>
@@ -66,7 +67,7 @@ export default function RecipientSelector(props: any) {
                             selected ? "font-semibold" : "font-normal",
                             "ml-3 block truncate"
                           )}>
-                          {`${recipient?.name} <${recipient?.email}>`}
+                          {`${recipient?.name} <${recipient?.email || 'unknown'}>`}
                         </span>
                       </div>
 
@@ -76,7 +77,7 @@ export default function RecipientSelector(props: any) {
                             active ? "text-white" : "text-neon-dark",
                             "absolute inset-y-0 right-0 flex items-center pr-4"
                           )}>
-                          <CheckIcon className="h-5 w-5" aria-hidden="true" />
+                          <CheckIcon className="h-5 w-5" strokeWidth={3} aria-hidden="true" />
                         </span>
                       ) : null}
                     </>

apps/web/components/editor/signature-dialog.tsx

@@ -5,6 +5,7 @@ import { Button, IconButton } from "@documenso/ui";
 import { Dialog, Transition } from "@headlessui/react";
 import { LanguageIcon, PencilIcon, TrashIcon } from "@heroicons/react/24/outline";
 import SignatureCanvas from "react-signature-canvas";
+import { useDebouncedValue } from "../../hooks/use-debounced-value";
 
 const tabs = [
   { name: "Type", icon: LanguageIcon, current: true },
@@ -15,6 +16,9 @@ export default function SignatureDialog(props: any) {
   const [currentTab, setCurrentTab] = useState(tabs[0]);
   const [typedSignature, setTypedSignature] = useState("");
   const [signatureEmpty, setSignatureEmpty] = useState(true);
+  // This is a workaround to prevent the canvas from being rendered when the dialog is closed
+  // we also need the debounce to avoid rendering while transitions are occuring.
+  const showCanvas = useDebouncedValue<boolean>(props.open, 1);
   let signCanvasRef: any | undefined;
 
   useEffect(() => {
@@ -85,7 +89,7 @@ export default function SignatureDialog(props: any) {
                     </div>
                     {isCurrentTab("Type") ? (
                       <div>
-                        <div className="my-8 mb-3 border-b border-gray-300">
+                        <div className="my-7 mb-3 border-b border-gray-300">
                           <input
                             value={typedSignature}
                             onChange={(e) => {
@@ -98,7 +102,7 @@ export default function SignatureDialog(props: any) {
                             placeholder="Kindly type your name"
                           />
                         </div>
-                        <div className="float-right">
+                        <div className="flex flex-row-reverse items-center gap-x-3">
                           <Button
                             color="secondary"
                             onClick={() => {
@@ -126,47 +130,55 @@ export default function SignatureDialog(props: any) {
                       ""
                     )}
                     {isCurrentTab("Draw") ? (
-                      <div className="">
-                        <SignatureCanvas
-                          ref={(ref) => {
-                            signCanvasRef = ref;
-                          }}
-                          canvasProps={{
-                            className: "sigCanvas border-b b-2 border-slate w-full h-full mb-3",
-                          }}
-                          clearOnResize={true}
-                          onEnd={() => {
-                            setSignatureEmpty(signCanvasRef?.isEmpty());
-                          }}
-                        />
-                        <IconButton
-                          className="float-left block"
-                          icon={TrashIcon}
-                          onClick={() => {
-                            signCanvasRef?.clear();
-                            setSignatureEmpty(signCanvasRef?.isEmpty());
-                          }}></IconButton>
-                        <div className="float-right mt-10">
-                          <Button
-                            color="secondary"
-                            onClick={() => {
-                              props.onClose();
-                              props.setOpen(false);
-                              setCurrent(tabs[0]);
-                            }}>
-                            Cancel
-                          </Button>
-                          <Button
-                            className="ml-3"
-                            onClick={() => {
-                              props.onClose({
-                                type: "draw",
-                                signatureImage: signCanvasRef.toDataURL("image/png"),
-                              });
+                      <div className="" key={props.open ? "closed" : "open"}>
+                        {showCanvas && (
+                          <SignatureCanvas
+                            ref={(ref) => {
+                              signCanvasRef = ref;
                             }}
-                            disabled={signatureEmpty}>
-                            Sign
-                          </Button>
+                            canvasProps={{
+                              className: "sigCanvas border-b b-2 border-slate w-full h-full mb-3",
+                            }}
+                            clearOnResize={true}
+                            onEnd={() => {
+                              setSignatureEmpty(signCanvasRef?.isEmpty());
+                            }}
+                          />
+                        )}
+                        
+                        <div className="flex items-center justify-between">
+                          <IconButton
+                            className="block"
+                            icon={TrashIcon}
+                            onClick={() => {
+                              signCanvasRef?.clear();
+                              setSignatureEmpty(signCanvasRef?.isEmpty());
+                            }}
+                          />
+
+                          <div className="flex flex-row-reverse items-center gap-x-3">
+                            <Button
+                              color="secondary"
+                              onClick={() => {
+                                props.onClose();
+                                props.setOpen(false);
+                                setCurrent(tabs[0]);
+                              }}>
+                              Cancel
+                            </Button>
+
+                            <Button
+                              className="ml-3"
+                              onClick={() => {
+                                props.onClose({
+                                  type: "draw",
+                                  signatureImage: signCanvasRef.toDataURL("image/png"),
+                                });
+                              }}
+                              disabled={signatureEmpty}>
+                              Sign
+                            </Button>
+                          </div>
                         </div>
                       </div>
                     ) : (

apps/web/components/login.tsx

@@ -111,7 +111,7 @@ export default function Login(props: any) {
               </div>
               <div className="flex items-center justify-between">
                 <div className="text-sm">
-                  <a href="#" className="text-neon hover:text-neon font-medium">
+                  <a href="#" className="text-gray-500 hover:text-neon-700 font-medium">
                     Forgot your password?
                   </a>
                 </div>
@@ -123,7 +123,7 @@ export default function Login(props: any) {
                   className="group relative flex w-full">
                   <span className="absolute inset-y-0 left-0 flex items-center pl-3">
                     <LockClosedIcon
-                      className="text-neon-dark group-hover:text-neon h-5 w-5 disabled:disabled:bg-gray-600 disabled:group-hover:bg-gray-600"
+                      className="text-neon-700 group-hover:text-neon-dark-700 h-5 w-5 disabled:disabled:bg-gray-600 disabled:group-hover:bg-gray-600 duration-200"
                       aria-hidden="true"
                     />
                   </span>
@@ -141,7 +141,7 @@ export default function Login(props: any) {
               {props.allowSignup ? (
                 <p className="mt-2 text-center text-sm text-gray-600">
                   Are you new here?{" "}
-                  <Link href="/signup" className="text-neon hover:text-neon font-medium">
+                  <Link href="/signup" className="text-gray-500 hover:text-neon-700 duration-200 font-medium">
                     Create a new Account
                   </Link>
                 </p>

apps/web/components/signup.tsx

@@ -187,7 +187,7 @@ export default function Signup(props: { source: string }) {
               </div>
               <p className="mt-2 text-center text-sm text-gray-600">
                 Already have an account?{" "}
-                <Link href="/login" className="text-neon hover:text-neon font-medium">
+                <Link href="/login" className="text-gray-500 hover:text-neon-700 font-medium">
                   Sign In
                 </Link>
               </p>

apps/web/hooks/use-debounced-value.ts

@@ -0,0 +1,18 @@
+import { useEffect, useState } from "react";
+
+export function useDebouncedValue<T>(value: T, delay: number) {
+  // State and setters for debounced value
+  const [debouncedValue, setDebouncedValue] = useState(value);
+
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
+
+    return () => {
+      clearTimeout(handler);
+    };
+  }, [value, delay]);
+
+  return debouncedValue;
+}

apps/web/pages/api/documents/[id]/sign.ts

@@ -63,6 +63,7 @@ async function postHandler(req: NextApiRequest, res: NextApiResponse) {
     },
     data: {
       signingStatus: SigningStatus.SIGNED,
+      signedAt: new Date(),
     },
   });
 
@@ -86,7 +87,11 @@ async function postHandler(req: NextApiRequest, res: NextApiResponse) {
     where: {
       documentId: document.id,
       type: { in: [FieldType.DATE, FieldType.TEXT] },
+      recipientId: { in: signedRecipients.map((r) => r.id) },
     },
+    include: {
+      Recipient: true,
+    }
   });
 
   // Insert fields other than signatures
@@ -98,7 +103,7 @@ async function postHandler(req: NextApiRequest, res: NextApiResponse) {
             month: "long",
             day: "numeric",
             year: "numeric",
-          }).format(new Date())
+          }).format(field.Recipient?.signedAt ?? new Date())
         : field.customText || "",
       field.positionX,
       field.positionY,

apps/web/pages/dashboard.tsx

@@ -1,4 +1,4 @@
-import { ReactElement } from "react";
+import { ChangeEvent, ReactElement } from "react";
 import Head from "next/head";
 import Link from "next/link";
 import { uploadDocument } from "@documenso/features";
@@ -62,26 +62,27 @@ const DashboardPage: NextPageWithLayout = (props: any) => {
         <dl className="mt-8 grid gap-5 md:grid-cols-3 ">
           {stats.map((item) => (
             <Link href={item.link} key={item.name}>
-              <div className="overflow-hidden rounded-lg bg-white px-4 py-3 shadow sm:py-5 md:p-6">
-                <dt className="truncate text-sm font-medium text-gray-500 ">
+              <div className="overflow-hidden rounded-lg bg-white px-4 py-3 shadow hover:shadow-lg duration-300 sm:py-5 md:p-6">
+                <dt className="truncate text-sm font-medium text-gray-700 ">
                   <item.icon
-                    className="text-neon mr-3 inline h-5 w-5 flex-shrink-0 sm:h-6 sm:w-6"
+                    className="text-neon-600 mr-3 inline h-5 w-5 flex-shrink-0 sm:h-6 sm:w-6"
                     aria-hidden="true"></item.icon>
                   {item.name}
                 </dt>
-                <dd className="mt-1 text-2xl font-semibold tracking-tight text-gray-900 sm:text-3xl">
+                <dd className="mt-3 text-2xl font-semibold tracking-tight text-gray-900 sm:text-3xl">
                   {getStat(item.name, props)}
                 </dd>
               </div>
             </Link>
           ))}
         </dl>
+
         <div className="mt-12">
           <input
             id="fileUploadHelper"
             type="file"
             accept="application/pdf"
-            onChange={(event: any) => {
+            onChange={(event: ChangeEvent) => {
               uploadDocument(event);
             }}
             hidden
@@ -91,9 +92,10 @@ const DashboardPage: NextPageWithLayout = (props: any) => {
           onClick={() => {
             document?.getElementById("fileUploadHelper")?.click();
           }}
-          className="hover:border-neon relative block w-full cursor-pointer rounded-lg border-2 border-dashed border-gray-300 p-12 text-center focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
+          className="group hover:border-neon-600 duration-200 relative block w-full cursor-pointer rounded-lg border-2 border-dashed border-gray-300 p-12 text-center focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
+          
           <svg
-            className="mx-auto h-12 w-12 text-gray-400"
+            className="mx-auto h-12 w-12 text-gray-400 group-hover:text-gray-700 duration-200"
             stroke="currentColor"
             fill="none"
             viewBox="0 00 20 25"
@@ -104,7 +106,8 @@ const DashboardPage: NextPageWithLayout = (props: any) => {
               d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m3.75 9v6m3-3H9m1.5-12H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z"
             />
           </svg>
-          <span id="add_document" className="text-neon mt-2 block text-sm font-medium">
+
+          <span id="add_document" className="text-gray-500 group-hover:text-neon-700 mt-2 block text-sm font-medium duration-200">
             Add a new PDF document.
           </span>
         </div>

apps/web/pages/documents.tsx

@@ -27,7 +27,13 @@ const DocumentsPage: NextPageWithLayout = (props: any) => {
   const [filteredDocuments, setFilteredDocuments] = useState([]);
 
   const [loading, setLoading] = useState(true);
-  const statusFilters = [
+
+  type statusFilterType = {
+    label: string;
+    value: DocumentStatus | "ALL";
+  };
+
+  const statusFilters: statusFilterType[] = [
     { label: "All", value: "ALL" },
     { label: "Draft", value: "DRAFT" },
     { label: "Waiting for others", value: "PENDING" },
@@ -83,6 +89,20 @@ const DocumentsPage: NextPageWithLayout = (props: any) => {
     return filteredDocuments;
   }
 
+  function handleStatusFilterChange(status: statusFilterType) {
+    router.replace(
+      {
+        pathname: router.pathname,
+        query: { filter: status.value },
+      },
+      undefined,
+      {
+        shallow: true, // Perform a shallow update, without reloading the page
+      }
+    );
+    setSelectedStatusFilter(status);
+  }
+
   function wasXDaysAgoOrLess(documentDate: Date, lastXDays: number): boolean {
     if (lastXDays < 0) return true;
 
@@ -122,26 +142,26 @@ const DocumentsPage: NextPageWithLayout = (props: any) => {
             </Button>
           </div>
         </div>
-        <div className="mt-3 mb-12">
-          <div className="float-right ml-3 mt-7 block w-fit">
+        <div className="mt-3 mb-12 flex flex-row-reverse items-center gap-x-4">
+          <div className="pt-5 block w-fit">
             {filteredDocuments.length != 1 ? filteredDocuments.length + " Documents" : "1 Document"}
           </div>
           <SelectBox
-            className="float-right block w-1/4"
+            className="block w-1/4"
             label="Created"
             options={createdFilter}
             value={selectedCreatedFilter}
             onChange={setSelectedCreatedFilter}
           />
           <SelectBox
-            className="float-right ml-3 block w-1/4"
+            className="block w-1/4"
             label="Status"
             options={statusFilters}
             value={selectedStatusFilter}
-            onChange={setSelectedStatusFilter}
+            onChange={handleStatusFilterChange}
           />
         </div>
-        <div className="mt-20 max-w-[1100px]" hidden={!loading}>
+        <div className="mt-8 max-w-[1100px]" hidden={!loading}>
           <div className="ph-item">
             <div className="ph-col-12">
               <div className="ph-picture"></div>
@@ -158,7 +178,7 @@ const DocumentsPage: NextPageWithLayout = (props: any) => {
             </div>
           </div>
         </div>
-        <div className="mt-28 flex flex-col" hidden={!documents.length || loading}>
+        <div className="mt-8 flex flex-col" hidden={!documents.length || loading}>
           <div
             className="-my-2 -mx-4 overflow-x-auto sm:-mx-6 lg:-mx-8"
             hidden={!documents.length || loading}>
@@ -201,13 +221,13 @@ const DocumentsPage: NextPageWithLayout = (props: any) => {
                         <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
                           {document.title || "#" + document.id}
                         </td>
-                        <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
+                        <td className="whitespace-nowrap inline-flex py-3 gap-x-2 gap-y-1 flex-wrap max-w-[250px] text-sm text-gray-500">
                           {document.Recipient.map((item: any) => (
                             <div key={item.id}>
                               {item.sendStatus === "NOT_SENT" ? (
                                 <span
                                   id="sent_icon"
-                                  className="inline-block flex-shrink-0 rounded-full bg-green-100 px-2 py-0.5 text-xs font-medium text-green-800">
+                                  className="flex-shrink-0 h-6 inline-flex items-center rounded-full bg-green-100 px-2 py-0.5 text-xs font-medium text-green-800">
                                   {item.name ? item.name + " <" + item.email + ">" : item.email}
                                 </span>
                               ) : (
@@ -217,8 +237,8 @@ const DocumentsPage: NextPageWithLayout = (props: any) => {
                                 <span id="sent_icon">
                                   <span
                                     id="sent_icon"
-                                    className="inline-block flex-shrink-0 rounded-full bg-yellow-200 px-2 py-0.5 text-xs font-medium text-green-800">
-                                    <EnvelopeIcon className="mr-1 inline h-5"></EnvelopeIcon>
+                                    className="flex-shrink-0 h-6 inline-flex items-center rounded-full bg-yellow-200 px-2 py-0.5 text-xs font-medium text-yellow-800">
+                                    <EnvelopeIcon className="mr-1 inline h-4"></EnvelopeIcon>
                                     {item.name ? item.name + " <" + item.email + ">" : item.email}
                                   </span>
                                 </span>
@@ -230,9 +250,9 @@ const DocumentsPage: NextPageWithLayout = (props: any) => {
                                 <span id="read_icon">
                                   <span
                                     id="sent_icon"
-                                    className="inline-block flex-shrink-0 rounded-full bg-yellow-200 px-2 py-0.5 text-xs font-medium text-green-800">
-                                    <CheckIcon className="-mr-2 inline h-5"></CheckIcon>
-                                    <CheckIcon className="mr-1 inline h-5"></CheckIcon>
+                                    className="flex-shrink-0 h-6 inline-flex items-center rounded-full bg-yellow-200 px-2 py-0.5 text-xs font-medium text-yellow-800">
+                                    <CheckIcon className="-mr-2 inline h-4"></CheckIcon>
+                                    <CheckIcon className="mr-1 inline h-4"></CheckIcon>
                                     {item.name ? item.name + " <" + item.email + ">" : item.email}
                                   </span>
                                 </span>
@@ -241,7 +261,7 @@ const DocumentsPage: NextPageWithLayout = (props: any) => {
                               )}
                               {item.signingStatus === "SIGNED" ? (
                                 <span id="signed_icon">
-                                  <span className="inline-block flex-shrink-0 rounded-full bg-green-100 px-2 py-0.5 text-xs font-medium text-green-800">
+                                  <span className="flex-shrink-0 h-6 inline-flex items-center rounded-full bg-green-100 px-2 py-0.5 text-xs font-medium text-green-800">
                                     <CheckBadgeIcon className="mr-1 inline h-5"></CheckBadgeIcon>{" "}
                                     {item.email}
                                   </span>

apps/web/pages/documents/[id]/recipients.tsx

@@ -18,13 +18,16 @@ import {
   UserPlusIcon,
   XMarkIcon,
 } from "@heroicons/react/24/outline";
-import { DocumentStatus, Document as PrismaDocument } from "@prisma/client";
+import { DocumentStatus, Document as PrismaDocument, Recipient } from "@prisma/client";
 import { FormProvider, useFieldArray, useForm, useWatch } from "react-hook-form";
+import { toast } from "react-hot-toast";
 
 export type FormValues = {
-  signers: { id: number; email: string; name: string }[];
+  signers: Array<Pick<Recipient, 'id' | 'email' | 'name' | 'sendStatus' | 'readStatus' | 'signingStatus'>>;
 };
 
+type FormSigner = FormValues["signers"][number];
+
 const RecipientsPage: NextPageWithLayout = (props: any) => {
   const title: string = `"` + props?.document?.title + `"` + "Recipients | Documenso";
   const breadcrumbItems = [
@@ -63,7 +66,7 @@ const RecipientsPage: NextPageWithLayout = (props: any) => {
   });
   const formValues = useWatch({ control, name: "signers" });
   const cancelButtonRef = useRef(null);
-  const hasEmailError = (formValue: any): boolean => {
+  const hasEmailError = (formValue: FormSigner): boolean => {
     const index = formValues.findIndex((e) => e.id === formValue.id);
     return !!errors?.signers?.[index]?.email;
   };
@@ -108,12 +111,14 @@ const RecipientsPage: NextPageWithLayout = (props: any) => {
                   color="primary"
                   icon={PaperAirplaneIcon}
                   onClick={() => {
-                    setOpen(true);
+                    formValues.some((r) => r.email && hasEmailError(r))
+                      ? toast.error("Please enter a valid email address.", { id: "invalid email" })
+                      : setOpen(true);
                   }}
                   disabled={
                     (formValues.length || 0) === 0 ||
                     !formValues.some(
-                      (r: any) => r.email && !hasEmailError(r) && r.sendStatus === "NOT_SENT"
+                      (r) => r.email && !hasEmailError(r) && r.sendStatus === "NOT_SENT"
                     ) ||
                     loading
                   }>
@@ -138,7 +143,7 @@ const RecipientsPage: NextPageWithLayout = (props: any) => {
                 trigger();
               }}>
               <ul role="list" className="divide-y divide-gray-200">
-                {fields.map((item: any, index: number) => (
+                {fields.map((item, index) => (
                   <li
                     key={index}
                     className="group w-full border-0 px-2 py-3 hover:bg-green-50 sm:py-4">
@@ -175,7 +180,6 @@ const RecipientsPage: NextPageWithLayout = (props: any) => {
                                   });
                             }}
                             className="block w-full border-0  bg-inherit p-0 text-gray-900 placeholder-gray-500 outline-none disabled:bg-neutral-100 sm:text-sm"
-                            placeholder="john.dorian@loremipsum.com"
                           />
                           {errors?.signers?.[index] ? (
                             <p className="mt-2 text-sm text-red-600" id="email-error">
@@ -213,7 +217,6 @@ const RecipientsPage: NextPageWithLayout = (props: any) => {
                                 });
                             }}
                             className="block w-full border-0 bg-inherit p-0 text-gray-900 placeholder-gray-500 outline-none disabled:bg-neutral-100 sm:text-sm"
-                            placeholder="John Dorian"
                           />
                         </div>
                       </div>

apps/web/pages/login.tsx

@@ -1,4 +1,5 @@
 import Head from "next/head";
+import { getUserFromToken } from "@documenso/lib/server";
 import Login from "../components/login";
 
 export default function LoginPage(props: any) {
@@ -13,6 +14,16 @@ export default function LoginPage(props: any) {
 }
 
 export async function getServerSideProps(context: any) {
+  const user = await getUserFromToken(context.req, context.res);
+  if (user)
+    return {
+      redirect: {
+        source: "/login",
+        destination: "/dashboard",
+        permanent: false,
+      },
+    };
+
   const ALLOW_SIGNUP = process.env.ALLOW_SIGNUP === "true";
 
   return {

apps/web/pages/signup.tsx

@@ -1,5 +1,6 @@
 import { NextPageContext } from "next";
 import Head from "next/head";
+import { getUserFromToken } from "@documenso/lib/server";
 import Signup from "../components/signup";
 
 export default function SignupPage(props: { source: string }) {
@@ -22,6 +23,16 @@ export async function getServerSideProps(context: any) {
       },
     };
 
+  const user = await getUserFromToken(context.req, context.res);
+  if (user)
+    return {
+      redirect: {
+        source: "/signup",
+        destination: "/dashboard",
+        permanent: false,
+      },
+    };
+
   const signupSource: string = context.query["source"];
   return {
     props: {

apps/web/tailwind.config.js

@@ -16,9 +16,48 @@ module.exports = {
         qwigley: ["Qwigley", "serif"],
       },
       colors: {
-        neon: "#37f095",
-        "neon-dark": "#2CC077",
-        brown: "#353434",
+        neon: {
+          DEFAULT: "#37F095",
+          50: "#E2FDF0",
+          100: "#CFFBE5",
+          200: "#A9F9D1",
+          300: "#83F6BD",
+          400: "#5DF3A9",
+          500: "#37F095",
+          600: "#11DE79",
+          700: "#0DAA5D",
+          800: "#097640",
+          900: "#054224",
+          950: "#032816",
+        },
+        "neon-dark": {
+          DEFAULT: "#2CC077",
+          50: "#B5EED2",
+          100: "#A5EAC8",
+          200: "#84E3B4",
+          300: "#62DBA0",
+          400: "#41D48B",
+          500: "#2CC077",
+          600: "#22925B",
+          700: "#17653E",
+          800: "#0D3722",
+          900: "#020906",
+          950: "#000000",
+        },
+        brown: {
+          DEFAULT: "#353434",
+          50: "#918F8F",
+          100: "#878585",
+          200: "#737171",
+          300: "#5E5C5C",
+          400: "#4A4848",
+          500: "#353434",
+          600: "#191818",
+          700: "#000000",
+          800: "#000000",
+          900: "#000000",
+          950: "#000000",
+        },
       },
       borderRadius: {
         "4xl": "2rem",

docker/Dockerfile

@@ -0,0 +1,50 @@
+FROM node:18-alpine AS base
+
+# Install dependencies only when needed
+FROM base AS production_deps
+WORKDIR /app
+
+# Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
+RUN apk add --no-cache libc6-compat
+
+# Copy our current monorepo
+COPY . .
+
+RUN npm ci --production
+
+# Install dependencies only when needed
+FROM base AS builder
+WORKDIR /app
+
+# Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
+RUN apk add --no-cache libc6-compat
+
+# Copy our current monorepo
+COPY . .
+
+RUN npm ci
+
+RUN npm run build --workspaces
+
+# Production image, copy all the files and run next
+FROM base AS runner
+WORKDIR /app
+
+ENV NODE_ENV production
+ENV NEXT_TELEMETRY_DISABLED 1
+
+RUN addgroup --system --gid 1001 nodejs
+RUN adduser --system --uid 1001 nextjs
+
+COPY --from=production_deps --chown=nextjs:nodejs /app/node_modules ./node_modules
+COPY --from=production_deps --chown=nextjs:nodejs /app/package-lock.json ./package-lock.json
+
+COPY --from=builder --chown=nextjs:nodejs /app/apps/web/package.json ./package.json
+COPY --from=builder --chown=nextjs:nodejs /app/apps/web/public ./public
+COPY --from=builder --chown=nextjs:nodejs /app/apps/web/.next ./.next
+
+EXPOSE 3000
+
+ENV PORT 3000
+
+CMD ["npm", "run", "start"]

docker/build.sh

@@ -0,0 +1,28 @@
+#!/usr/bin/env bash
+
+command -v docker >/dev/null 2>&1 || {
+    echo "Docker is not running. Please start Docker and try again."
+    exit 1
+}
+
+command -v jq >/dev/null 2>&1 || {
+    echo "jq is not installed. Please install jq and try again."
+    exit 1
+}
+
+SCRIPT_DIR="$(readlink -f "$(dirname "$0")")"
+MONOREPO_ROOT="$(readlink -f "$SCRIPT_DIR/../")"
+
+APP_VERSION="$(jq -r '.version' "$MONOREPO_ROOT/apps/web/package.json")"
+GIT_SHA="$(git rev-parse HEAD)"
+
+echo "Building docker image for monorepo at $MONOREPO_ROOT"
+echo "App version: $APP_VERSION"
+echo "Git SHA: $GIT_SHA"
+
+docker build -f "$SCRIPT_DIR/Dockerfile" \
+    --progress=plain \
+    -t "documentso:latest" \
+    -t "documenso:$GIT_SHA" \
+    -t "documenso:$APP_VERSION" \
+    "$MONOREPO_ROOT"

docker/compose-entrypoint.sh

@@ -0,0 +1,12 @@
+#!/usr/bin/env bash
+
+SCRIPT_DIR="$(readlink -f "$(dirname "$0")")"
+MONOREPO_ROOT="$(readlink -f "$SCRIPT_DIR/../")"
+
+cd "$MONOREPO_ROOT"
+
+npm ci
+
+npm run db-migrate:dev
+
+npm run dev

docker/compose-without-app.yml

@@ -0,0 +1,19 @@
+name: documenso
+services:
+  database:
+    image: postgres:15
+    container_name: database
+    environment:
+      - POSTGRES_USER=documenso
+      - POSTGRES_PASSWORD=password
+      - POSTGRES_DB=documenso
+    ports:
+      - 54320:5432
+
+  inbucket:
+    image: inbucket/inbucket
+    container_name: mailserver
+    ports:
+      - 9000:9000
+      - 2500:2500
+      - 1100:1100

docker/compose.yml

@@ -0,0 +1,40 @@
+services:
+  database:
+    image: postgres:15
+    environment:
+      - POSTGRES_USER=documenso
+      - POSTGRES_PASSWORD=password
+      - POSTGRES_DB=documenso
+    ports:
+      - 5432:5432
+
+  inbucket:
+    image: inbucket/inbucket
+    ports:
+      - 9000:9000
+      - 2500:2500
+      - 1100:1100
+
+  documenso:
+    image: node:18
+    working_dir: /app
+    command: ./docker/compose-entrypoint.sh
+    depends_on:
+      - database
+      - inbucket
+    environment:
+      - DATABASE_URL=postgres://documenso:password@database:5432/documenso
+      - NEXT_PUBLIC_WEBAPP_URL=http://localhost:3000
+      - NEXTAUTH_SECRET=my-super-secure-secret
+      - NEXTAUTH_URL=http://localhost:3000
+      - SENDGRID_API_KEY=
+      - SMTP_MAIL_HOST=inbucket
+      - SMTP_MAIL_PORT=2500
+      - SMTP_MAIL_USER=username
+      - SMTP_MAIL_PASSWORD=password
+      - MAIL_FROM=admin@example.com
+      - ALLOW_SIGNUP=true
+    ports:
+      - 3000:3000
+    volumes:
+      - ../:/app

package-lock.json

@@ -40,6 +40,7 @@
       },
       "devDependencies": {
         "@trivago/prettier-plugin-sort-imports": "^4.1.1",
+        "npm-run-all": "^4.1.5",
         "prettier": "^2.8.7",
         "prettier-plugin-tailwindcss": "^0.2.5"
       }
@@ -2376,6 +2377,15 @@
         "node": ">=10.13.0"
       }
     },
+    "node_modules/error-ex": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
+      "integrity": "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==",
+      "dev": true,
+      "dependencies": {
+        "is-arrayish": "^0.2.1"
+      }
+    },
     "node_modules/es-abstract": {
       "version": "1.21.2",
       "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.21.2.tgz",
@@ -3438,6 +3448,12 @@
         "node": ">=8"
       }
     },
+    "node_modules/hosted-git-info": {
+      "version": "2.8.9",
+      "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.9.tgz",
+      "integrity": "sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==",
+      "dev": true
+    },
     "node_modules/http-signature": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/http-signature/-/http-signature-1.2.0.tgz",
@@ -3551,6 +3567,12 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-arrayish": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
+      "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==",
+      "dev": true
+    },
     "node_modules/is-bigint": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/is-bigint/-/is-bigint-1.0.4.tgz",
@@ -3908,6 +3930,12 @@
         "node": ">=4"
       }
     },
+    "node_modules/json-parse-better-errors": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz",
+      "integrity": "sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw==",
+      "dev": true
+    },
     "node_modules/json-parse-even-better-errors": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
@@ -4004,6 +4032,30 @@
         "node": ">=10"
       }
     },
+    "node_modules/load-json-file": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-4.0.0.tgz",
+      "integrity": "sha512-Kx8hMakjX03tiGTLAIdJ+lL0htKnXjEZN6hk/tozf/WOuYGdZBJrZ+rCJRbVCugsjB3jMLn9746NsQIf5VjBMw==",
+      "dev": true,
+      "dependencies": {
+        "graceful-fs": "^4.1.2",
+        "parse-json": "^4.0.0",
+        "pify": "^3.0.0",
+        "strip-bom": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/load-json-file/node_modules/pify": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz",
+      "integrity": "sha512-C3FsVNH1udSEX48gGX1xfvwTWfsYWj5U+8/uK15BGzIGrKoUpghX8hWZwa/OFnakBiiVNmBvemTJR5mcy7iPcg==",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/loader-runner": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-4.3.0.tgz",
@@ -4110,6 +4162,15 @@
         "url": "https://github.com/wojtekmaj/make-event-props?sponsor=1"
       }
     },
+    "node_modules/memorystream": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/memorystream/-/memorystream-0.3.1.tgz",
+      "integrity": "sha512-S3UwM3yj5mtUSEfP41UZmt/0SCoVYUcU1rkXv+BQ5Ig8ndL4sPoJNBUJERafdPb5jjHJGuMgytgKvKIf58XNBw==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.10.0"
+      }
+    },
     "node_modules/merge-refs": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/merge-refs/-/merge-refs-1.1.2.tgz",
@@ -4331,6 +4392,12 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/nice-try": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz",
+      "integrity": "sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ==",
+      "dev": true
+    },
     "node_modules/node-forge": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-1.3.1.tgz",
@@ -4371,6 +4438,27 @@
         "@sendgrid/mail": "^6.2.1"
       }
     },
+    "node_modules/normalize-package-data": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-2.5.0.tgz",
+      "integrity": "sha512-/5CMN3T0R4XTj4DcGaexo+roZSdSFW/0AOOTROrjxzCG1wrWXEsGbRKevjlIL+ZDE4sZlJr5ED4YW0yqmkK+eA==",
+      "dev": true,
+      "dependencies": {
+        "hosted-git-info": "^2.1.4",
+        "resolve": "^1.10.0",
+        "semver": "2 || 3 || 4 || 5",
+        "validate-npm-package-license": "^3.0.1"
+      }
+    },
+    "node_modules/normalize-package-data/node_modules/semver": {
+      "version": "5.7.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
+      "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
+      "dev": true,
+      "bin": {
+        "semver": "bin/semver"
+      }
+    },
     "node_modules/normalize-path": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
@@ -4536,6 +4624,169 @@
         "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
       }
     },
+    "node_modules/npm-run-all": {
+      "version": "4.1.5",
+      "resolved": "https://registry.npmjs.org/npm-run-all/-/npm-run-all-4.1.5.tgz",
+      "integrity": "sha512-Oo82gJDAVcaMdi3nuoKFavkIHBRVqQ1qvMb+9LHk/cF4P6B2m8aP04hGf7oL6wZ9BuGwX1onlLhpuoofSyoQDQ==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^3.2.1",
+        "chalk": "^2.4.1",
+        "cross-spawn": "^6.0.5",
+        "memorystream": "^0.3.1",
+        "minimatch": "^3.0.4",
+        "pidtree": "^0.3.0",
+        "read-pkg": "^3.0.0",
+        "shell-quote": "^1.6.1",
+        "string.prototype.padend": "^3.0.0"
+      },
+      "bin": {
+        "npm-run-all": "bin/npm-run-all/index.js",
+        "run-p": "bin/run-p/index.js",
+        "run-s": "bin/run-s/index.js"
+      },
+      "engines": {
+        "node": ">= 4"
+      }
+    },
+    "node_modules/npm-run-all/node_modules/ansi-styles": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+      "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+      "dev": true,
+      "dependencies": {
+        "color-convert": "^1.9.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/npm-run-all/node_modules/chalk": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+      "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^3.2.1",
+        "escape-string-regexp": "^1.0.5",
+        "supports-color": "^5.3.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/npm-run-all/node_modules/color-convert": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
+      "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
+      "dev": true,
+      "dependencies": {
+        "color-name": "1.1.3"
+      }
+    },
+    "node_modules/npm-run-all/node_modules/color-name": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
+      "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==",
+      "dev": true
+    },
+    "node_modules/npm-run-all/node_modules/cross-spawn": {
+      "version": "6.0.5",
+      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz",
+      "integrity": "sha512-eTVLrBSt7fjbDygz805pMnstIs2VTBNkRm0qxZd+M7A5XDdxVRWO5MxGBXZhjY4cqLYLdtrGqRf8mBPmzwSpWQ==",
+      "dev": true,
+      "dependencies": {
+        "nice-try": "^1.0.4",
+        "path-key": "^2.0.1",
+        "semver": "^5.5.0",
+        "shebang-command": "^1.2.0",
+        "which": "^1.2.9"
+      },
+      "engines": {
+        "node": ">=4.8"
+      }
+    },
+    "node_modules/npm-run-all/node_modules/escape-string-regexp": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
+      "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
+    "node_modules/npm-run-all/node_modules/has-flag": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+      "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/npm-run-all/node_modules/path-key": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/path-key/-/path-key-2.0.1.tgz",
+      "integrity": "sha512-fEHGKCSmUSDPv4uoj8AlD+joPlq3peND+HRYyxFz4KPw4z926S/b8rIuFs2FYJg3BwsxJf6A9/3eIdLaYC+9Dw==",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/npm-run-all/node_modules/semver": {
+      "version": "5.7.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
+      "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
+      "dev": true,
+      "bin": {
+        "semver": "bin/semver"
+      }
+    },
+    "node_modules/npm-run-all/node_modules/shebang-command": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz",
+      "integrity": "sha512-EV3L1+UQWGor21OmnvojK36mhg+TyIKDh3iFBKBohr5xeXIhNBcx8oWdgkTEEQ+BEFFYdLRuqMfd5L84N1V5Vg==",
+      "dev": true,
+      "dependencies": {
+        "shebang-regex": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/npm-run-all/node_modules/shebang-regex": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-1.0.0.tgz",
+      "integrity": "sha512-wpoSFAxys6b2a2wHZ1XpDSgD7N9iVjg29Ph9uV/uaP9Ex/KXlkTZTeddxDPSYQpgvzKLGJke2UU0AzoGCjNIvQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/npm-run-all/node_modules/supports-color": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+      "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+      "dev": true,
+      "dependencies": {
+        "has-flag": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/npm-run-all/node_modules/which": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",
+      "integrity": "sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==",
+      "dev": true,
+      "dependencies": {
+        "isexe": "^2.0.0"
+      },
+      "bin": {
+        "which": "bin/which"
+      }
+    },
     "node_modules/npm/node_modules/@colors/colors": {
       "version": "1.5.0",
       "inBundle": true,
@@ -7336,6 +7587,19 @@
         "node": ">=6"
       }
     },
+    "node_modules/parse-json": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-4.0.0.tgz",
+      "integrity": "sha512-aOIos8bujGN93/8Ox/jPLh7RwVnPEysynVFE+fQZyg6jKELEHwzgKdLRFHUgXJL6kylijVSBC4BvN9OmsB48Rw==",
+      "dev": true,
+      "dependencies": {
+        "error-ex": "^1.3.1",
+        "json-parse-better-errors": "^1.0.1"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/path-exists": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
@@ -7427,6 +7691,18 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
+    "node_modules/pidtree": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/pidtree/-/pidtree-0.3.1.tgz",
+      "integrity": "sha512-qQbW94hLHEqCg7nhby4yRC7G2+jYHY4Rguc2bjw7Uug4GIJuu1tvf2uHaZv5Q8zdt+WKJ6qK1FOI6amaWUo5FA==",
+      "dev": true,
+      "bin": {
+        "pidtree": "bin/pidtree.js"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
     "node_modules/pify": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
@@ -7915,6 +8191,41 @@
         "pify": "^2.3.0"
       }
     },
+    "node_modules/read-pkg": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz",
+      "integrity": "sha512-BLq/cCO9two+lBgiTYNqD6GdtK8s4NpaWrl6/rCO9w0TUS8oJl7cmToOZfRYllKTISY6nt1U7jQ53brmKqY6BA==",
+      "dev": true,
+      "dependencies": {
+        "load-json-file": "^4.0.0",
+        "normalize-package-data": "^2.3.2",
+        "path-type": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/read-pkg/node_modules/path-type": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/path-type/-/path-type-3.0.0.tgz",
+      "integrity": "sha512-T2ZUsdZFHgA3u4e5PfPbjd7HDDpxPnQb5jN0SrDsjNSuVXHJqtwTnWqG0B1jZrgmJ/7lj1EmVIByWt1gxGkWvg==",
+      "dev": true,
+      "dependencies": {
+        "pify": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/read-pkg/node_modules/pify": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz",
+      "integrity": "sha512-C3FsVNH1udSEX48gGX1xfvwTWfsYWj5U+8/uK15BGzIGrKoUpghX8hWZwa/OFnakBiiVNmBvemTJR5mcy7iPcg==",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/readdirp": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
@@ -8208,6 +8519,15 @@
         "node": ">=8"
       }
     },
+    "node_modules/shell-quote": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/shell-quote/-/shell-quote-1.8.1.tgz",
+      "integrity": "sha512-6j1W9l1iAs/4xYBI1SYOVZyFcCis9b4KCLQ8fgAGG07QvzaRLVVRQvAy85yNmmZSjYjg4MWh4gNvlPujU/5LpA==",
+      "dev": true,
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/short-uuid": {
       "version": "4.2.2",
       "resolved": "https://registry.npmjs.org/short-uuid/-/short-uuid-4.2.2.tgz",
@@ -8273,6 +8593,38 @@
         "source-map": "^0.6.0"
       }
     },
+    "node_modules/spdx-correct": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/spdx-correct/-/spdx-correct-3.2.0.tgz",
+      "integrity": "sha512-kN9dJbvnySHULIluDHy32WHRUu3Og7B9sbY7tsFLctQkIqnMh3hErYgdMjTYuqmcXX+lK5T1lnUt3G7zNswmZA==",
+      "dev": true,
+      "dependencies": {
+        "spdx-expression-parse": "^3.0.0",
+        "spdx-license-ids": "^3.0.0"
+      }
+    },
+    "node_modules/spdx-exceptions": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/spdx-exceptions/-/spdx-exceptions-2.3.0.tgz",
+      "integrity": "sha512-/tTrYOC7PPI1nUAgx34hUpqXuyJG+DTHJTnIULG4rDygi4xu/tfgmq1e1cIRwRzwZgo4NLySi+ricLkZkw4i5A==",
+      "dev": true
+    },
+    "node_modules/spdx-expression-parse": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/spdx-expression-parse/-/spdx-expression-parse-3.0.1.tgz",
+      "integrity": "sha512-cbqHunsQWnJNE6KhVSMsMeH5H/L9EpymbzqTQ3uLwNCLZ1Q481oWaofqH7nO6V07xlXwY6PhQdQ2IedWx/ZK4Q==",
+      "dev": true,
+      "dependencies": {
+        "spdx-exceptions": "^2.1.0",
+        "spdx-license-ids": "^3.0.0"
+      }
+    },
+    "node_modules/spdx-license-ids": {
+      "version": "3.0.13",
+      "resolved": "https://registry.npmjs.org/spdx-license-ids/-/spdx-license-ids-3.0.13.tgz",
+      "integrity": "sha512-XkD+zwiqXHikFZm4AX/7JSCXA98U5Db4AFd5XUg/+9UNtnH75+Z9KxtpYiJZx36mUDVOwH83pl7yvCer6ewM3w==",
+      "dev": true
+    },
     "node_modules/sshpk": {
       "version": "1.17.0",
       "resolved": "https://registry.npmjs.org/sshpk/-/sshpk-1.17.0.tgz",
@@ -8339,6 +8691,23 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/string.prototype.padend": {
+      "version": "3.1.4",
+      "resolved": "https://registry.npmjs.org/string.prototype.padend/-/string.prototype.padend-3.1.4.tgz",
+      "integrity": "sha512-67otBXoksdjsnXXRUq+KMVTdlVRZ2af422Y0aTyTjVaoQkGr3mxl2Bc5emi7dOQ3OGVVQQskmLEWwFXwommpNw==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.4",
+        "es-abstract": "^1.20.4"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/string.prototype.trim": {
       "version": "1.2.7",
       "resolved": "https://registry.npmjs.org/string.prototype.trim/-/string.prototype.trim-1.2.7.tgz",
@@ -8871,6 +9240,16 @@
       "integrity": "sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg==",
       "devOptional": true
     },
+    "node_modules/validate-npm-package-license": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz",
+      "integrity": "sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew==",
+      "dev": true,
+      "dependencies": {
+        "spdx-correct": "^3.0.0",
+        "spdx-expression-parse": "^3.0.0"
+      }
+    },
     "node_modules/verror": {
       "version": "1.10.0",
       "resolved": "https://registry.npmjs.org/verror/-/verror-1.10.0.tgz",
@@ -10922,6 +11301,15 @@
         "tapable": "^2.2.0"
       }
     },
+    "error-ex": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
+      "integrity": "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==",
+      "dev": true,
+      "requires": {
+        "is-arrayish": "^0.2.1"
+      }
+    },
     "es-abstract": {
       "version": "1.21.2",
       "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.21.2.tgz",
@@ -11698,6 +12086,12 @@
       "resolved": "https://registry.npmjs.org/hexoid/-/hexoid-1.0.0.tgz",
       "integrity": "sha512-QFLV0taWQOZtvIRIAdBChesmogZrtuXvVWsFHZTk2SU+anspqZ2vMnoLg7IE1+Uk16N19APic1BuF8bC8c2m5g=="
     },
+    "hosted-git-info": {
+      "version": "2.8.9",
+      "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.9.tgz",
+      "integrity": "sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==",
+      "dev": true
+    },
     "http-signature": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/http-signature/-/http-signature-1.2.0.tgz",
@@ -11780,6 +12174,12 @@
         "is-typed-array": "^1.1.10"
       }
     },
+    "is-arrayish": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
+      "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==",
+      "dev": true
+    },
     "is-bigint": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/is-bigint/-/is-bigint-1.0.4.tgz",
@@ -12021,6 +12421,12 @@
       "integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==",
       "dev": true
     },
+    "json-parse-better-errors": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz",
+      "integrity": "sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw==",
+      "dev": true
+    },
     "json-parse-even-better-errors": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
@@ -12099,6 +12505,26 @@
       "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.1.0.tgz",
       "integrity": "sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ=="
     },
+    "load-json-file": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-4.0.0.tgz",
+      "integrity": "sha512-Kx8hMakjX03tiGTLAIdJ+lL0htKnXjEZN6hk/tozf/WOuYGdZBJrZ+rCJRbVCugsjB3jMLn9746NsQIf5VjBMw==",
+      "dev": true,
+      "requires": {
+        "graceful-fs": "^4.1.2",
+        "parse-json": "^4.0.0",
+        "pify": "^3.0.0",
+        "strip-bom": "^3.0.0"
+      },
+      "dependencies": {
+        "pify": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz",
+          "integrity": "sha512-C3FsVNH1udSEX48gGX1xfvwTWfsYWj5U+8/uK15BGzIGrKoUpghX8hWZwa/OFnakBiiVNmBvemTJR5mcy7iPcg==",
+          "dev": true
+        }
+      }
+    },
     "loader-runner": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-4.3.0.tgz",
@@ -12181,6 +12607,12 @@
       "resolved": "https://registry.npmjs.org/make-event-props/-/make-event-props-1.4.2.tgz",
       "integrity": "sha512-ZOHqRpLn2htnMd9zqhE+wticVr31PdwrJXHcvEEdKgrfjCOuSDn8urG9SDzEIqzP1ayp1uTdDJcOiTlJhqWpEQ=="
     },
+    "memorystream": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/memorystream/-/memorystream-0.3.1.tgz",
+      "integrity": "sha512-S3UwM3yj5mtUSEfP41UZmt/0SCoVYUcU1rkXv+BQ5Ig8ndL4sPoJNBUJERafdPb5jjHJGuMgytgKvKIf58XNBw==",
+      "dev": true
+    },
     "merge-refs": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/merge-refs/-/merge-refs-1.1.2.tgz",
@@ -12323,6 +12755,12 @@
         "enhanced-resolve": "^5.10.0"
       }
     },
+    "nice-try": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz",
+      "integrity": "sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ==",
+      "dev": true
+    },
     "node-forge": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-1.3.1.tgz",
@@ -12352,6 +12790,26 @@
         "@sendgrid/mail": "^6.2.1"
       }
     },
+    "normalize-package-data": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-2.5.0.tgz",
+      "integrity": "sha512-/5CMN3T0R4XTj4DcGaexo+roZSdSFW/0AOOTROrjxzCG1wrWXEsGbRKevjlIL+ZDE4sZlJr5ED4YW0yqmkK+eA==",
+      "dev": true,
+      "requires": {
+        "hosted-git-info": "^2.1.4",
+        "resolve": "^1.10.0",
+        "semver": "2 || 3 || 4 || 5",
+        "validate-npm-package-license": "^3.0.1"
+      },
+      "dependencies": {
+        "semver": {
+          "version": "5.7.1",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
+          "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
+          "dev": true
+        }
+      }
+    },
     "normalize-path": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
@@ -14152,6 +14610,130 @@
         }
       }
     },
+    "npm-run-all": {
+      "version": "4.1.5",
+      "resolved": "https://registry.npmjs.org/npm-run-all/-/npm-run-all-4.1.5.tgz",
+      "integrity": "sha512-Oo82gJDAVcaMdi3nuoKFavkIHBRVqQ1qvMb+9LHk/cF4P6B2m8aP04hGf7oL6wZ9BuGwX1onlLhpuoofSyoQDQ==",
+      "dev": true,
+      "requires": {
+        "ansi-styles": "^3.2.1",
+        "chalk": "^2.4.1",
+        "cross-spawn": "^6.0.5",
+        "memorystream": "^0.3.1",
+        "minimatch": "^3.0.4",
+        "pidtree": "^0.3.0",
+        "read-pkg": "^3.0.0",
+        "shell-quote": "^1.6.1",
+        "string.prototype.padend": "^3.0.0"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "3.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+          "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+          "dev": true,
+          "requires": {
+            "color-convert": "^1.9.0"
+          }
+        },
+        "chalk": {
+          "version": "2.4.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+          "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^3.2.1",
+            "escape-string-regexp": "^1.0.5",
+            "supports-color": "^5.3.0"
+          }
+        },
+        "color-convert": {
+          "version": "1.9.3",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
+          "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
+          "dev": true,
+          "requires": {
+            "color-name": "1.1.3"
+          }
+        },
+        "color-name": {
+          "version": "1.1.3",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
+          "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==",
+          "dev": true
+        },
+        "cross-spawn": {
+          "version": "6.0.5",
+          "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz",
+          "integrity": "sha512-eTVLrBSt7fjbDygz805pMnstIs2VTBNkRm0qxZd+M7A5XDdxVRWO5MxGBXZhjY4cqLYLdtrGqRf8mBPmzwSpWQ==",
+          "dev": true,
+          "requires": {
+            "nice-try": "^1.0.4",
+            "path-key": "^2.0.1",
+            "semver": "^5.5.0",
+            "shebang-command": "^1.2.0",
+            "which": "^1.2.9"
+          }
+        },
+        "escape-string-regexp": {
+          "version": "1.0.5",
+          "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
+          "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
+          "dev": true
+        },
+        "has-flag": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+          "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
+          "dev": true
+        },
+        "path-key": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/path-key/-/path-key-2.0.1.tgz",
+          "integrity": "sha512-fEHGKCSmUSDPv4uoj8AlD+joPlq3peND+HRYyxFz4KPw4z926S/b8rIuFs2FYJg3BwsxJf6A9/3eIdLaYC+9Dw==",
+          "dev": true
+        },
+        "semver": {
+          "version": "5.7.1",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
+          "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
+          "dev": true
+        },
+        "shebang-command": {
+          "version": "1.2.0",
+          "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz",
+          "integrity": "sha512-EV3L1+UQWGor21OmnvojK36mhg+TyIKDh3iFBKBohr5xeXIhNBcx8oWdgkTEEQ+BEFFYdLRuqMfd5L84N1V5Vg==",
+          "dev": true,
+          "requires": {
+            "shebang-regex": "^1.0.0"
+          }
+        },
+        "shebang-regex": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-1.0.0.tgz",
+          "integrity": "sha512-wpoSFAxys6b2a2wHZ1XpDSgD7N9iVjg29Ph9uV/uaP9Ex/KXlkTZTeddxDPSYQpgvzKLGJke2UU0AzoGCjNIvQ==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "5.5.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+          "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^3.0.0"
+          }
+        },
+        "which": {
+          "version": "1.3.1",
+          "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",
+          "integrity": "sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==",
+          "dev": true,
+          "requires": {
+            "isexe": "^2.0.0"
+          }
+        }
+      }
+    },
     "oauth": {
       "version": "0.9.15",
       "resolved": "https://registry.npmjs.org/oauth/-/oauth-0.9.15.tgz",
@@ -14307,6 +14889,16 @@
         "callsites": "^3.0.0"
       }
     },
+    "parse-json": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-4.0.0.tgz",
+      "integrity": "sha512-aOIos8bujGN93/8Ox/jPLh7RwVnPEysynVFE+fQZyg6jKELEHwzgKdLRFHUgXJL6kylijVSBC4BvN9OmsB48Rw==",
+      "dev": true,
+      "requires": {
+        "error-ex": "^1.3.1",
+        "json-parse-better-errors": "^1.0.1"
+      }
+    },
     "path-exists": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
@@ -14374,6 +14966,12 @@
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
       "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA=="
     },
+    "pidtree": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/pidtree/-/pidtree-0.3.1.tgz",
+      "integrity": "sha512-qQbW94hLHEqCg7nhby4yRC7G2+jYHY4Rguc2bjw7Uug4GIJuu1tvf2uHaZv5Q8zdt+WKJ6qK1FOI6amaWUo5FA==",
+      "dev": true
+    },
     "pify": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
@@ -14627,6 +15225,34 @@
         "pify": "^2.3.0"
       }
     },
+    "read-pkg": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz",
+      "integrity": "sha512-BLq/cCO9two+lBgiTYNqD6GdtK8s4NpaWrl6/rCO9w0TUS8oJl7cmToOZfRYllKTISY6nt1U7jQ53brmKqY6BA==",
+      "dev": true,
+      "requires": {
+        "load-json-file": "^4.0.0",
+        "normalize-package-data": "^2.3.2",
+        "path-type": "^3.0.0"
+      },
+      "dependencies": {
+        "path-type": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/path-type/-/path-type-3.0.0.tgz",
+          "integrity": "sha512-T2ZUsdZFHgA3u4e5PfPbjd7HDDpxPnQb5jN0SrDsjNSuVXHJqtwTnWqG0B1jZrgmJ/7lj1EmVIByWt1gxGkWvg==",
+          "dev": true,
+          "requires": {
+            "pify": "^3.0.0"
+          }
+        },
+        "pify": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz",
+          "integrity": "sha512-C3FsVNH1udSEX48gGX1xfvwTWfsYWj5U+8/uK15BGzIGrKoUpghX8hWZwa/OFnakBiiVNmBvemTJR5mcy7iPcg==",
+          "dev": true
+        }
+      }
+    },
     "readdirp": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
@@ -14818,6 +15444,12 @@
       "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
       "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A=="
     },
+    "shell-quote": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/shell-quote/-/shell-quote-1.8.1.tgz",
+      "integrity": "sha512-6j1W9l1iAs/4xYBI1SYOVZyFcCis9b4KCLQ8fgAGG07QvzaRLVVRQvAy85yNmmZSjYjg4MWh4gNvlPujU/5LpA==",
+      "dev": true
+    },
     "short-uuid": {
       "version": "4.2.2",
       "resolved": "https://registry.npmjs.org/short-uuid/-/short-uuid-4.2.2.tgz",
@@ -14868,6 +15500,38 @@
         "source-map": "^0.6.0"
       }
     },
+    "spdx-correct": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/spdx-correct/-/spdx-correct-3.2.0.tgz",
+      "integrity": "sha512-kN9dJbvnySHULIluDHy32WHRUu3Og7B9sbY7tsFLctQkIqnMh3hErYgdMjTYuqmcXX+lK5T1lnUt3G7zNswmZA==",
+      "dev": true,
+      "requires": {
+        "spdx-expression-parse": "^3.0.0",
+        "spdx-license-ids": "^3.0.0"
+      }
+    },
+    "spdx-exceptions": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/spdx-exceptions/-/spdx-exceptions-2.3.0.tgz",
+      "integrity": "sha512-/tTrYOC7PPI1nUAgx34hUpqXuyJG+DTHJTnIULG4rDygi4xu/tfgmq1e1cIRwRzwZgo4NLySi+ricLkZkw4i5A==",
+      "dev": true
+    },
+    "spdx-expression-parse": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/spdx-expression-parse/-/spdx-expression-parse-3.0.1.tgz",
+      "integrity": "sha512-cbqHunsQWnJNE6KhVSMsMeH5H/L9EpymbzqTQ3uLwNCLZ1Q481oWaofqH7nO6V07xlXwY6PhQdQ2IedWx/ZK4Q==",
+      "dev": true,
+      "requires": {
+        "spdx-exceptions": "^2.1.0",
+        "spdx-license-ids": "^3.0.0"
+      }
+    },
+    "spdx-license-ids": {
+      "version": "3.0.13",
+      "resolved": "https://registry.npmjs.org/spdx-license-ids/-/spdx-license-ids-3.0.13.tgz",
+      "integrity": "sha512-XkD+zwiqXHikFZm4AX/7JSCXA98U5Db4AFd5XUg/+9UNtnH75+Z9KxtpYiJZx36mUDVOwH83pl7yvCer6ewM3w==",
+      "dev": true
+    },
     "sshpk": {
       "version": "1.17.0",
       "resolved": "https://registry.npmjs.org/sshpk/-/sshpk-1.17.0.tgz",
@@ -14920,6 +15584,17 @@
         "side-channel": "^1.0.4"
       }
     },
+    "string.prototype.padend": {
+      "version": "3.1.4",
+      "resolved": "https://registry.npmjs.org/string.prototype.padend/-/string.prototype.padend-3.1.4.tgz",
+      "integrity": "sha512-67otBXoksdjsnXXRUq+KMVTdlVRZ2af422Y0aTyTjVaoQkGr3mxl2Bc5emi7dOQ3OGVVQQskmLEWwFXwommpNw==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.4",
+        "es-abstract": "^1.20.4"
+      }
+    },
     "string.prototype.trim": {
       "version": "1.2.7",
       "resolved": "https://registry.npmjs.org/string.prototype.trim/-/string.prototype.trim-1.2.7.tgz",
@@ -15283,6 +15958,16 @@
       "integrity": "sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg==",
       "devOptional": true
     },
+    "validate-npm-package-license": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz",
+      "integrity": "sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew==",
+      "dev": true,
+      "requires": {
+        "spdx-correct": "^3.0.0",
+        "spdx-expression-parse": "^3.0.0"
+      }
+    },
     "verror": {
       "version": "1.10.0",
       "resolved": "https://registry.npmjs.org/verror/-/verror-1.10.0.tgz",

package.json

@@ -2,12 +2,17 @@
   "name": "documenso-monorepo",
   "version": "0.0.0",
   "scripts": {
-    "dev": "cd apps && cd web && next dev",
+    "dev": "npm run dev -w apps/web",
     "build": "npm i && cd apps && cd web && npm i && next build",
     "start": "cd apps && cd web && next start",
     "db-migrate:dev": "prisma migrate dev",
     "db-seed": "prisma db seed",
-    "db-studio": "prisma studio"
+    "db-studio": "prisma studio",
+    "docker:compose": "docker-compose -f ./docker/compose-without-app.yml",
+    "docker:compose-up": "npm run docker:compose -- up -d",
+    "docker:compose-down": "npm run docker:compose -- down",
+    "dx": "npm install && run-s docker:compose-up db-migrate:dev",
+    "d": "npm install && run-s docker:compose-up db-migrate:dev && npm run db-seed && npm run dev"
   },
   "workspaces": [
     "apps/*",
@@ -46,6 +51,7 @@
   },
   "devDependencies": {
     "@trivago/prettier-plugin-sort-imports": "^4.1.1",
+    "npm-run-all": "^4.1.5",
     "prettier": "^2.8.7",
     "prettier-plugin-tailwindcss": "^0.2.5"
   }

packages/features/uploadDocument.ts

@@ -1,9 +1,10 @@
 import router from "next/router";
 import { NEXT_PUBLIC_WEBAPP_URL } from "../lib/constants";
 import toast from "react-hot-toast";
+import { ChangeEvent } from "react";
 
-export const uploadDocument = async (event: any) => {
-  if (event.target.files && event.target.files[0]) {
+export const uploadDocument = async (event: ChangeEvent) => {
+  if (event.target instanceof HTMLInputElement && event.target?.files && event.target.files[0]) {
     const body = new FormData();
     const document = event.target.files[0];
     const fileName: string = event.target.files[0].name;
@@ -12,8 +13,10 @@ export const uploadDocument = async (event: any) => {
       toast.error("Non-PDF documents are not supported yet.");
       return;
     }
+
     body.append("document", document || "");
-    const response: any = await toast
+
+    await toast
       .promise(
         fetch("/api/documents", {
           method: "POST",

packages/lib/constants.ts

@@ -1 +1,8 @@
-export const NEXT_PUBLIC_WEBAPP_URL = process.env.NEXT_PUBLIC_WEBAPP_URL;
+export const NEXT_PUBLIC_WEBAPP_URL =
+  process.env.IS_PULL_REQUEST === "true"
+    ? process.env.RENDER_EXTERNAL_URL
+    : process.env.NEXT_PUBLIC_WEBAPP_URL;
+
+console.log("IS_PULL_REQUEST:" + process.env.IS_PULL_REQUEST);
+console.log("RENDER_EXTERNAL_URL:" + process.env.RENDER_EXTERNAL_URL);
+console.log("NEXT_PUBLIC_WEBAPP_URL:" + process.env.NEXT_PUBLIC_WEBAPP_URL);

packages/lib/mail/signingRequestTemplate.ts

@@ -11,8 +11,8 @@ export const signingRequestTemplate = (
   user: any
 ) => {
   const customContent = `
-  <p style="margin: 30px;">
-    <a href="${ctaLink}" style="background-color: #37f095; color: white; border-color: transparent; border-width: 1px; border-radius: 0.375rem; font-size: 18px; padding-left: 16px; padding-right: 16px; padding-top: 10px; padding-bottom: 10px; text-decoration: none; margin-top: 4px; margin-bottom: 4px;">
+  <p style="margin: 30px 0px; text-align: center">
+    <a href="${ctaLink}" style="background-color: #37f095; white-space: nowrap; color: white; border-color: transparent; border-width: 1px; border-radius: 0.375rem; font-size: 18px; padding-left: 16px; padding-right: 16px; padding-top: 10px; padding-bottom: 10px; text-decoration: none; margin-top: 4px; margin-bottom: 4px;">
       ${ctaLabel}
     </a>
   </p>

packages/lib/server/getUserFromToken.ts

@@ -26,7 +26,7 @@ export async function getUserFromToken(
   });
 
   if (!user) {
-    if (res) res.status(401).end();
+    if (res && res.status) res.status(401).end();
     return null;
   }
 

packages/prisma/migrations/20230421134018_doc_214_add_signed_at_field/migration.sql

@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "Recipient" ADD COLUMN     "signedAt" TIMESTAMP(3);

packages/prisma/schema.prisma

@@ -92,6 +92,7 @@ model Recipient {
   name          String        @default("") @db.VarChar(255)
   token         String
   expired       DateTime?
+  signedAt      DateTime?
   readStatus    ReadStatus    @default(NOT_OPENED)
   signingStatus SigningStatus @default(NOT_SIGNED)
   sendStatus    SendStatus    @default(NOT_SENT)

packages/ui/components/button/Button.tsx

@@ -6,8 +6,8 @@ export function Button(props: any) {
   const isLink = typeof props.href !== "undefined" && !props.disabled;
   const { color = "primary", icon, disabled, onClick } = props;
   const baseStyles =
-    "inline-flex items-center justify-center min-w-[80px] rounded-md border border-transparent px-4 py-2 text-sm font-medium shadow-sm disabled:bg-gray-300";
-  const primaryStyles = "text-white bg-neon hover:bg-neon-dark";
+    "inline-flex gap-x-2 items-center justify-center min-w-[80px] rounded-md border border-transparent px-4 py-2 text-sm font-medium shadow-sm disabled:bg-gray-300 duration-200";
+  const primaryStyles = "text-gray-900 bg-neon hover:bg-neon-dark";
   const secondaryStyles = "border-gray-300 bg-white text-gray-700 hover:bg-gray-50";
 
   return isLink ? (
@@ -21,7 +21,7 @@ export function Button(props: any) {
       )}
       hidden={props.hidden}>
       {props.icon ? (
-        <props.icon className="mr-1 inline h-5 text-inherit" aria-hidden="true"></props.icon>
+        <props.icon className="inline-block h-5 text-inherit" aria-hidden="true"></props.icon>
       ) : (
         ""
       )}
@@ -40,7 +40,7 @@ export function Button(props: any) {
       disabled={props.disabled || props.loading}
       hidden={props.hidden}>
       {props.icon ? (
-        <props.icon className="mr-1 inline h-5 text-inherit" aria-hidden="true"></props.icon>
+        <props.icon className="inline h-5 text-inherit" aria-hidden="true"></props.icon>
       ) : (
         ""
       )}