Add reset password page

apps/web/components/forgot-password.tsx

@@ -5,15 +5,15 @@ import { ArrowLeftIcon } from "@heroicons/react/24/outline";
 import { FormProvider, useForm } from "react-hook-form";
 import { toast } from "react-hot-toast";
 
-interface IResetPassword {
+interface IForgotPassword {
   email: string;
 }
 
 export default function ForgotPassword(props: any) {
-  const methods = useForm<IResetPassword>();
+  const methods = useForm<IForgotPassword>();
   const { register, formState, resetField } = methods;
 
-  const onSubmit = async (values: IResetPassword) => {
+  const onSubmit = async (values: IForgotPassword) => {
     await toast.promise(
       fetch(`/api/auth/forgot-password`, {
         method: "POST",

apps/web/components/reset-password.tsx

@@ -0,0 +1,93 @@
+import Link from "next/link";
+import { Button } from "@documenso/ui";
+import Logo from "./logo";
+import { ArrowLeftIcon } from "@heroicons/react/24/outline";
+import { FormProvider, useForm, useWatch } from "react-hook-form";
+import { toast } from "react-hot-toast";
+
+interface IResetPassword {
+  password: string;
+  confirmPassword: string;
+}
+
+export default function ResetPassword(props: any) {
+  const methods = useForm<IResetPassword>();
+  const { register, formState, watch } = methods;
+  const password = watch("password", "");
+
+  const onSubmit = async (values: IResetPassword) => {
+    console.log(values);
+  };
+
+  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">Please chose your new password</p>
+          </div>
+          <FormProvider {...methods}>
+            <form className="mt-8 space-y-6" onSubmit={methods.handleSubmit(onSubmit)}>
+              <input type="hidden" name="remember" defaultValue="true" />
+              <div className="-space-y-px rounded-md shadow-sm">
+                <div>
+                  <label htmlFor="password" className="sr-only">
+                    Password
+                  </label>
+                  <input
+                    {...register("password", { required: "Password is required" })}
+                    id="password"
+                    name="password"
+                    type="password"
+                    autoComplete="current-password"
+                    required
+                    className="focus:border-neon focus:ring-neon relative block w-full appearance-none rounded-none rounded-t-md border border-gray-300 px-3 py-2 text-gray-900 placeholder-gray-500 focus:z-10 focus:outline-none sm:text-sm"
+                    placeholder="New password"
+                  />
+                </div>
+                <div>
+                  <label htmlFor="confirmPassword" className="sr-only">
+                    Password
+                  </label>
+                  <input
+                    {...register("confirmPassword", {
+                      required: "Please confirm password",
+                      validate: (value) => value === password || "The passwords do not match",
+                    })}
+                    id="confirmPassword"
+                    name="confirmPassword"
+                    type="password"
+                    required
+                    className="focus:border-neon focus:ring-neon relative block w-full appearance-none rounded-none rounded-b-md border border-gray-300 px-3 py-2 text-gray-900 placeholder-gray-500 focus:z-10 focus:outline-none sm:text-sm"
+                    placeholder="Confirm new password"
+                  />
+                </div>
+              </div>
+
+              <div>
+                <Button
+                  type="submit"
+                  disabled={formState.isSubmitting}
+                  className="group relative flex w-full">
+                  Reset password
+                </Button>
+              </div>
+              <div>
+                <Link href="/login">
+                  <div className="relative mt-10 flex items-center justify-center gap-2 text-sm text-gray-500 hover:cursor-pointer hover:text-gray-900">
+                    <ArrowLeftIcon className="h-4 w-4" />
+                    Back to log in
+                  </div>
+                </Link>
+              </div>
+            </form>
+          </FormProvider>
+        </div>
+      </div>
+    </>
+  );
+}

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

@@ -0,0 +1,42 @@
+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 || !cleanEmail.includes("@")) {
+    res.status(422).json({ message: "Invalid email" });
+    return;
+  }
+
+  const user = await prisma.user.findFirst({
+    where: {
+      email: cleanEmail,
+    },
+  });
+
+  if (!user) {
+    return res.status(400).json({ message: "No user found with this email." });
+  }
+
+  const token = crypto.randomBytes(64).toString("hex");
+
+  const passwordResetToken = await prisma.passwordResetToken.create({
+    data: {
+      token,
+      userId: user.id,
+    },
+  });
+
+  await sendResetPassword(user, passwordResetToken.token);
+
+  res.status(201).end();
+}
+
+export default defaultHandler({
+  POST: Promise.resolve({ default: defaultResponder(postHandler) }),
+});

apps/web/pages/auth/reset.tsx

@@ -0,0 +1,34 @@
+import Head from "next/head";
+import { getUserFromToken } from "@documenso/lib/server";
+import ResetPassword from "../../components/reset-password";
+
+export default function ResetPasswordPage(props: any) {
+  return (
+    <>
+      <Head>
+        <title>Reset Password | Documenso</title>
+      </Head>
+      <ResetPassword allowSignup={props.ALLOW_SIGNUP}></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,
+      },
+    };
+
+  const ALLOW_SIGNUP = process.env.NEXT_PUBLIC_ALLOW_SIGNUP === "true";
+
+  return {
+    props: {
+      ALLOW_SIGNUP,
+    },
+  };
+}

apps/web/pages/forgot-password.tsx

@@ -6,7 +6,7 @@ export default function ForgotPasswordPage(props: any) {
   return (
     <>
       <Head>
-        <title>Reset Password | Documenso</title>
+        <title>Forgot Password | Documenso</title>
       </Head>
       <ForgotPassword allowSignup={props.ALLOW_SIGNUP}></ForgotPassword>
     </>