Merge branch 'main' into logo

apps/web/pages/_app.tsx

@@ -1,6 +1,7 @@
 import { ReactElement, ReactNode } from "react";
 import { NextPage } from "next";
 import type { AppProps } from "next/app";
+import { Montserrat, Qwigley } from "next/font/google";
 import { SubscriptionProvider } from "@documenso/lib/stripe/providers/subscription-provider";
 import "../../../node_modules/placeholder-loading/src/scss/placeholder-loading.scss";
 import "../../../node_modules/react-resizable/css/styles.css";
@@ -11,6 +12,20 @@ import "react-tooltip/dist/react-tooltip.css";
 
 export { coloredConsole } from "@documenso/lib";
 
+const montserrat = Montserrat({
+  subsets: ["latin"],
+  weight: ["400", "700"],
+  display: "swap",
+  variable: "--font-sans",
+});
+
+const qwigley = Qwigley({
+  subsets: ["latin"],
+  weight: ["400"],
+  display: "swap",
+  variable: "--font-qwigley",
+});
+
 export type NextPageWithLayout<P = {}, IP = P> = NextPage<P, IP> & {
   getLayout?: (page: ReactElement) => ReactNode;
 };
@@ -27,8 +42,10 @@ export default function App({
   return (
     <SessionProvider session={session}>
       <SubscriptionProvider initialSubscription={initialSubscription}>
-        <Toaster position="top-center" />
-        {getLayout(<Component {...pageProps} />)}
+        <main className={`${montserrat.variable} h-full font-sans`}>
+          <Toaster position="top-center" />
+          {getLayout(<Component {...pageProps} />)}
+        </main>
       </SubscriptionProvider>
     </SessionProvider>
   );

apps/web/pages/api/auth/forgot-password.ts

@@ -0,0 +1,63 @@
+import { NextApiRequest, NextApiResponse } from "next";
+import { sendResetPassword } from "@documenso/lib/mail";
+import { defaultHandler, defaultResponder } from "@documenso/lib/server";
+import prisma from "@documenso/prisma";
+import crypto from "crypto";
+
+async function postHandler(req: NextApiRequest, res: NextApiResponse) {
+  const { email } = req.body;
+  const cleanEmail = email.toLowerCase();
+
+  if (!cleanEmail || !/.+@.+/.test(cleanEmail)) {
+    res.status(400).json({ message: "Invalid email" });
+    return;
+  }
+
+  const user = await prisma.user.findFirst({
+    where: {
+      email: cleanEmail,
+    },
+  });
+
+  if (!user) {
+    return res.status(200).json({ message: "A password reset email has been sent." });
+  }
+
+  const existingToken = await prisma.passwordResetToken.findFirst({
+    where: {
+      userId: user.id,
+      createdAt: {
+        gte: new Date(Date.now() - 1000 * 60 * 60),
+      },
+    },
+  });
+
+  if (existingToken) {
+    return res.status(200).json({ message: "A password reset email has been sent." });
+  }
+
+  const token = crypto.randomBytes(64).toString("hex");
+  const expiry = new Date();
+  expiry.setHours(expiry.getHours() + 24); // Set expiry to one hour from now
+
+  let passwordResetToken;
+  try {
+    passwordResetToken = await prisma.passwordResetToken.create({
+      data: {
+        token,
+        expiry,
+        userId: user.id,
+      },
+    });
+  } catch (error) {
+    return res.status(500).json({ message: "Something went wrong" });
+  }
+
+  await sendResetPassword(user, passwordResetToken.token);
+
+  return res.status(200).json({ message: "A password reset email has been sent." });
+}
+
+export default defaultHandler({
+  POST: Promise.resolve({ default: defaultResponder(postHandler) }),
+});

apps/web/pages/api/auth/reset-password.ts

@@ -0,0 +1,69 @@
+import { NextApiRequest, NextApiResponse } from "next";
+import { hashPassword, verifyPassword } from "@documenso/lib/auth";
+import { sendResetPasswordSuccessMail } from "@documenso/lib/mail";
+import { defaultHandler, defaultResponder } from "@documenso/lib/server";
+import prisma from "@documenso/prisma";
+
+async function postHandler(req: NextApiRequest, res: NextApiResponse) {
+  const { token, password } = req.body;
+
+  if (!token) {
+    res.status(400).json({ message: "Invalid token" });
+    return;
+  }
+
+  const foundToken = await prisma.passwordResetToken.findUnique({
+    where: {
+      token,
+    },
+    include: {
+      User: true,
+    },
+  });
+
+  if (!foundToken) {
+    return res.status(404).json({ message: "Invalid token." });
+  }
+
+  const now = new Date();
+
+  if (now > foundToken.expiry) {
+    return res.status(400).json({ message: "Token has expired" });
+  }
+
+  const isSamePassword = await verifyPassword(password, foundToken.User.password!);
+
+  if (isSamePassword) {
+    return res.status(400).json({ message: "New password must be different" });
+  }
+
+  const hashedPassword = await hashPassword(password);
+
+  const transaction = await prisma.$transaction([
+    prisma.user.update({
+      where: {
+        id: foundToken.userId,
+      },
+      data: {
+        password: hashedPassword,
+      },
+    }),
+    prisma.passwordResetToken.deleteMany({
+      where: {
+        userId: foundToken.userId,
+      },
+    }),
+  ]);
+
+  if (!transaction) {
+    return res.status(500).json({ message: "Error resetting password." });
+  }
+
+  await sendResetPasswordSuccessMail(foundToken.User);
+
+  res.status(200).json({ message: "Password reset successful." });
+}
+
+export default defaultHandler({
+  POST: Promise.resolve({ default: defaultResponder(postHandler) }),
+});

apps/web/pages/api/auth/signup.ts

@@ -8,13 +8,13 @@ async function postHandler(req: NextApiRequest, res: NextApiResponse) {
   const { email, password, source } = req.body;
   const cleanEmail = email.toLowerCase();
 
-  if (!cleanEmail || !cleanEmail.includes("@")) {
-    res.status(422).json({ message: "Invalid email" });
+  if (!cleanEmail || !/.+@.+/.test(cleanEmail)) {
+    res.status(400).json({ message: "Invalid email" });
     return;
   }
 
   if (!password || password.trim().length < 7) {
-    return res.status(422).json({
+    return res.status(400).json({
       message: "Password should be at least 7 characters long.",
     });
   }

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

@@ -6,53 +6,62 @@ import prisma from "@documenso/prisma";
 import { Document as PrismaDocument, SendStatus } from "@prisma/client";
 
 async function postHandler(req: NextApiRequest, res: NextApiResponse) {
-  const user = await getUserFromToken(req, res);
-  const { id: documentId } = req.query;
-  const { resendTo: resendTo = [] } = req.body;
+  try {
+    const user = await getUserFromToken(req, res);
+    const { id: documentId } = req.query;
+    const { resendTo: resendTo = [] } = req.body;
 
-  if (!user) return;
+    if (!user) {
+      return res.status(401).send("Unauthorized");
+    }
 
-  if (!documentId) {
-    res.status(400).send("Missing parameter documentId.");
-    return;
-  }
+    if (!documentId) {
+      return res.status(400).send("Missing parameter documentId.");
+    }
 
-  const document: PrismaDocument = await getDocument(+documentId, req, res);
+    const document: PrismaDocument = await getDocument(+documentId, req, res);
 
-  if (!document) res.status(404).end(`No document with id ${documentId} found.`);
+    if (!document) {
+      res.status(404).end(`No document with id ${documentId} found.`);
+    }
 
-  let recipientCondition: any = {
-    documentId: +documentId,
-    sendStatus: SendStatus.NOT_SENT,
-  };
-
-  if (resendTo.length) {
-    recipientCondition = {
+    let recipientCondition: any = {
       documentId: +documentId,
-      id: { in: resendTo },
+      sendStatus: SendStatus.NOT_SENT,
     };
-  }
 
-  const recipients = await prisma.recipient.findMany({
-    where: {
-      ...recipientCondition,
-    },
-  });
+    if (resendTo.length) {
+      recipientCondition = {
+        documentId: +documentId,
+        id: { in: resendTo },
+      };
+    }
 
-  if (!recipients.length) return res.status(200).send(recipients.length);
-
-  let sentRequests = 0;
-  recipients.forEach(async (recipient) => {
-    await sendSigningRequest(recipient, document, user).catch((err) => {
-      console.log(err);
-      return res.status(502).end("Coud not send request for signing.");
+    const recipients = await prisma.recipient.findMany({
+      where: {
+        ...recipientCondition,
+      },
+    });
+
+    if (!recipients.length) {
+      return res.status(200).send(recipients.length);
+    }
+
+    let sentRequests = 0;
+    recipients.forEach(async (recipient) => {
+      await sendSigningRequest(recipient, document, user);
+
+      sentRequests++;
     });
 
-    sentRequests++;
     if (sentRequests === recipients.length) {
       return res.status(200).send(recipients.length);
     }
-  });
+
+    return res.status(502).end("Coud not send request for signing.");
+  } catch (err) {
+    return res.status(502).end("Coud not send request for signing.");
+  }
 }
 
 export default defaultHandler({

apps/web/pages/auth/reset/[token].tsx

@@ -0,0 +1,30 @@
+import Head from "next/head";
+import { getUserFromToken } from "@documenso/lib/server";
+import ResetPassword from "../../../components/reset-password";
+
+export default function ResetPasswordPage() {
+  return (
+    <>
+      <Head>
+        <title>Reset Password | Documenso</title>
+      </Head>
+      <ResetPassword />
+    </>
+  );
+}
+
+export async function getServerSideProps(context: any) {
+  const user = await getUserFromToken(context.req, context.res);
+  if (user)
+    return {
+      redirect: {
+        source: "/login",
+        destination: "/dashboard",
+        permanent: false,
+      },
+    };
+
+  return {
+    props: {},
+  };
+}

apps/web/pages/auth/reset/index.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import Logo from "../../../components/logo";
+
+export default function ResetPage() {
+  return (
+    <div className="flex min-h-full items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
+      <div className="w-full max-w-md space-y-8">
+        <div>
+          <Logo className="mx-auto h-20 w-auto"></Logo>
+          <h2 className="mt-6 text-center text-3xl font-bold tracking-tight text-gray-900">
+            Reset Password
+          </h2>
+          <p className="mt-2 text-center text-sm text-gray-600">
+            The token you provided is invalid. Please try again.
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}

apps/web/pages/documents.tsx

@@ -4,6 +4,7 @@ import Head from "next/head";
 import { useRouter } from "next/router";
 import { uploadDocument } from "@documenso/features";
 import { deleteDocument, getDocuments } from "@documenso/lib/api";
+import { useSubscription } from "@documenso/lib/stripe";
 import { Button, IconButton, SelectBox } from "@documenso/ui";
 import Layout from "../components/layout";
 import type { NextPageWithLayout } from "./_app";
@@ -20,7 +21,6 @@ import {
 } from "@heroicons/react/24/outline";
 import { DocumentStatus } from "@prisma/client";
 import { Tooltip as ReactTooltip } from "react-tooltip";
-import { useSubscription } from "@documenso/lib/stripe";
 
 const DocumentsPage: NextPageWithLayout = (props: any) => {
   const router = useRouter();
@@ -145,24 +145,24 @@ const DocumentsPage: NextPageWithLayout = (props: any) => {
             </Button>
           </div>
         </div>
-        <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>
+        <div className="mt-3 mb-12 flex flex-wrap items-center justify-start gap-x-4 md:justify-end gap-y-4">
           <SelectBox
-            className="block w-1/4"
-            label="Created"
-            options={createdFilter}
-            value={selectedCreatedFilter}
-            onChange={setSelectedCreatedFilter}
-          />
-          <SelectBox
-            className="block w-1/4"
+            className="block flex-1 md:flex-none md:w-1/4"
             label="Status"
             options={statusFilters}
             value={selectedStatusFilter}
             onChange={handleStatusFilterChange}
           />
+          <SelectBox
+            className="block flex-1 md:flex-none md:w-1/4"
+            label="Created"
+            options={createdFilter}
+            value={selectedCreatedFilter}
+            onChange={setSelectedCreatedFilter}
+          />
+          <div className="block w-fit pt-5">
+            {filteredDocuments.length != 1 ? filteredDocuments.length + " Documents" : "1 Document"}
+          </div>
         </div>
         <div className="mt-8 max-w-[1100px]" hidden={!loading}>
           <div className="ph-item">
@@ -224,13 +224,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 inline-flex py-3 gap-x-2 gap-y-1 flex-wrap max-w-[250px] text-sm text-gray-500">
+                        <td className="inline-flex max-w-[250px] flex-wrap gap-x-2 gap-y-1 whitespace-nowrap py-3 text-sm text-gray-500">
                           {document.Recipient.map((item: any) => (
                             <div key={item.id}>
                               {item.sendStatus === "NOT_SENT" ? (
                                 <span
                                   id="sent_icon"
-                                  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">
+                                  className="inline-flex h-6 flex-shrink-0 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>
                               ) : (
@@ -240,7 +240,7 @@ const DocumentsPage: NextPageWithLayout = (props: any) => {
                                 <span id="sent_icon">
                                   <span
                                     id="sent_icon"
-                                    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">
+                                    className="inline-flex h-6 flex-shrink-0 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>
@@ -253,7 +253,7 @@ const DocumentsPage: NextPageWithLayout = (props: any) => {
                                 <span id="read_icon">
                                   <span
                                     id="sent_icon"
-                                    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">
+                                    className="inline-flex h-6 flex-shrink-0 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}
@@ -264,7 +264,7 @@ const DocumentsPage: NextPageWithLayout = (props: any) => {
                               )}
                               {item.signingStatus === "SIGNED" ? (
                                 <span id="signed_icon">
-                                  <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">
+                                  <span className="inline-flex h-6 flex-shrink-0 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]/signed.tsx

@@ -5,6 +5,7 @@ import prisma from "@documenso/prisma";
 import { Button, IconButton } from "@documenso/ui";
 import { NextPageWithLayout } from "../../_app";
 import { ArrowDownTrayIcon, CheckBadgeIcon } from "@heroicons/react/24/outline";
+import { truncate } from "@documenso/lib/helpers";
 
 const Signed: NextPageWithLayout = (props: any) => {
   const router = useRouter();
@@ -21,7 +22,7 @@ const Signed: NextPageWithLayout = (props: any) => {
         <CheckBadgeIcon className="text-neon mr-1 inline w-10"></CheckBadgeIcon>
         <h1 className="text-neon inline align-middle text-base font-medium">It's done!</h1>
         <p className="mt-2 text-4xl font-bold tracking-tight">
-          You signed "{props.document.title}"
+          You signed "{truncate(props.document.title)}"
         </p>
         <p className="mt-2 max-w-sm text-base text-gray-500" hidden={allRecipientsSigned}>
           You will be notfied when all recipients have signed.

apps/web/pages/forgot-password.tsx

@@ -0,0 +1,32 @@
+import { GetServerSideProps, GetServerSidePropsContext } from "next";
+import Head from "next/head";
+import { getUserFromToken } from "@documenso/lib/server";
+import ForgotPassword from "../components/forgot-password";
+
+export default function ForgotPasswordPage() {
+  return (
+    <>
+      <Head>
+        <title>Forgot Password | Documenso</title>
+      </Head>
+      <ForgotPassword />
+    </>
+  );
+}
+
+export async function getServerSideProps({ req }: GetServerSidePropsContext) {
+  const user = await getUserFromToken(req);
+
+  if (user)
+    return {
+      redirect: {
+        source: "/login",
+        destination: "/dashboard",
+        permanent: false,
+      },
+    };
+
+  return {
+    props: {},
+  };
+}