From 002b22b1a88d52823ebea215ae074a6d6b9b8ff8 Mon Sep 17 00:00:00 2001
From: Ephraim Atta-Duncan <ephraimduncan68@gmail.com>
Date: Mon, 5 Jun 2023 12:50:11 +0000
Subject: [PATCH] Add forgot password page

---
 apps/web/components/forgot-password.tsx | 77 +++++++++++++++++++++++++
 apps/web/components/login.tsx           |  6 +-
 apps/web/pages/forgot-password.tsx      | 34 +++++++++++
 3 files changed, 115 insertions(+), 2 deletions(-)
 create mode 100644 apps/web/components/forgot-password.tsx
 create mode 100644 apps/web/pages/forgot-password.tsx

diff --git a/apps/web/components/forgot-password.tsx b/apps/web/components/forgot-password.tsx
new file mode 100644
index 000000000..30a7eb036
--- /dev/null
+++ b/apps/web/components/forgot-password.tsx
@@ -0,0 +1,77 @@
+import Link from "next/link";
+import { Button } from "@documenso/ui";
+import Logo from "./logo";
+import { ArrowLeftIcon } from "@heroicons/react/24/outline";
+import { FormProvider, useForm } from "react-hook-form";
+
+interface IResetPassword {
+  email: string;
+}
+
+export default function ForgotPassword(props: any) {
+  const methods = useForm<IResetPassword>();
+  const { register, formState, resetField } = methods;
+
+  const onSubmit = async (values: IResetPassword) => {
+    resetField("email");
+
+    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">
+              Forgot Password?
+            </h2>
+            <p className="mt-2 text-center text-sm text-gray-600">
+              No worries, we'll send you reset instructions.
+            </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="email-address" className="sr-only">
+                    Email
+                  </label>
+                  <input
+                    {...register("email")}
+                    id="email-address"
+                    name="email"
+                    type="email"
+                    autoComplete="email"
+                    required
+                    className="focus:border-neon focus:ring-neon relative block w-full appearance-none rounded-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="Email"
+                  />
+                </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>
+    </>
+  );
+}
diff --git a/apps/web/components/login.tsx b/apps/web/components/login.tsx
index 4f086a8e1..f78513d87 100644
--- a/apps/web/components/login.tsx
+++ b/apps/web/components/login.tsx
@@ -111,9 +111,11 @@ export default function Login(props: any) {
               </div>
               <div className="flex items-center justify-between">
                 <div className="text-sm">
-                  <a href="#" className="hover:text-neon-700 font-medium text-gray-500">
+                  <Link
+                    href="/forgot-password"
+                    className="hover:text-neon-700 font-medium text-gray-500">
                     Forgot your password?
-                  </a>
+                  </Link>
                 </div>
               </div>
               <div>
diff --git a/apps/web/pages/forgot-password.tsx b/apps/web/pages/forgot-password.tsx
new file mode 100644
index 000000000..ffcf6e470
--- /dev/null
+++ b/apps/web/pages/forgot-password.tsx
@@ -0,0 +1,34 @@
+import Head from "next/head";
+import { getUserFromToken } from "@documenso/lib/server";
+import ForgotPassword from "../components/forgot-password";
+
+export default function ForgotPasswordPage(props: any) {
+  return (
+    <>
+      <Head>
+        <title>Reset Password | Documenso</title>
+      </Head>
+      <ForgotPassword allowSignup={props.ALLOW_SIGNUP}></ForgotPassword>
+    </>
+  );
+}
+
+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,
+    },
+  };
+}