From 7cc1ae2de09dc0bd441eff82d2f0fb5dd433f6ad Mon Sep 17 00:00:00 2001
From: Ephraim Atta-Duncan <ephraimduncan68@gmail.com>
Date: Wed, 7 Jun 2023 10:33:05 +0000
Subject: [PATCH] Refactor forgot password and reset component

---
 apps/web/components/forgot-password.tsx |  98 ++++++---------
 apps/web/components/reset-password.tsx  | 152 ++++++++++--------------
 apps/web/pages/auth/reset.tsx           |   0
 apps/web/pages/auth/reset/index.tsx     |  20 ++++
 4 files changed, 119 insertions(+), 151 deletions(-)
 delete mode 100644 apps/web/pages/auth/reset.tsx
 create mode 100644 apps/web/pages/auth/reset/index.tsx

diff --git a/apps/web/components/forgot-password.tsx b/apps/web/components/forgot-password.tsx
index a0eee29f4..cafdd067e 100644
--- a/apps/web/components/forgot-password.tsx
+++ b/apps/web/components/forgot-password.tsx
@@ -57,19 +57,53 @@ export default function ForgotPassword() {
     resetField("email");
   };
 
-  if (resetSuccessful) {
-    return (
+  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
+              {resetSuccessful ? "Reset Password" : "Forgot Password?"}
             </h2>
             <p className="mt-2 text-center text-sm text-gray-600">
-              Please check your email for reset instructions.
+              {resetSuccessful
+                ? "Please check your email for reset instructions."
+                : "No worries, we'll send you reset instructions."}
             </p>
           </div>
+          {resetSuccessful ? null : (
+            <FormProvider {...methods}>
+              <form className="mt-8 space-y-6" onSubmit={methods.handleSubmit(onSubmit)}>
+                <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>
+              </form>
+            </FormProvider>
+          )}
           <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">
@@ -80,62 +114,6 @@ export default function ForgotPassword() {
           </div>
         </div>
       </div>
-    );
-  }
-
-  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)}>
-              <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/reset-password.tsx b/apps/web/components/reset-password.tsx
index a1b240058..3ac6c8b74 100644
--- a/apps/web/components/reset-password.tsx
+++ b/apps/web/components/reset-password.tsx
@@ -7,7 +7,7 @@ import { ArrowLeftIcon } from "@heroicons/react/24/outline";
 import { FormProvider, useForm } from "react-hook-form";
 import { toast } from "react-hot-toast";
 
-interface ForgotPasswordForm {
+interface ResetPasswordForm {
   password: string;
   confirmPassword: string;
 }
@@ -16,13 +16,13 @@ export default function ResetPassword(props: any) {
   const router = useRouter();
   const { token } = router.query;
 
-  const methods = useForm<ForgotPasswordForm>();
+  const methods = useForm<ResetPasswordForm>();
   const { register, formState, watch } = methods;
   const password = watch("password", "");
 
   const [resetSuccessful, setResetSuccessful] = useState(false);
 
-  const onSubmit = async (values: ForgotPasswordForm) => {
+  const onSubmit = async (values: ResetPasswordForm) => {
     const response = await toast.promise(
       fetch(`/api/auth/reset-password`, {
         method: "POST",
@@ -52,40 +52,6 @@ export default function ResetPassword(props: any) {
     }
   };
 
-  if (!token) {
-    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>
-    );
-  }
-
-  if (resetSuccessful) {
-    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">Your password has been reset.</p>
-          </div>
-        </div>
-      </div>
-    );
-  }
-
   return (
     <>
       <div className="flex min-h-full items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
@@ -95,63 +61,67 @@ export default function ResetPassword(props: any) {
             <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>
+            <p className="mt-2 text-center text-sm text-gray-600">
+              {resetSuccessful ? "Your password has been reset." : "Please chose your new password"}
+            </p>
           </div>
-          <FormProvider {...methods}>
-            <form className="mt-8 space-y-6" onSubmit={methods.handleSubmit(onSubmit)}>
-              <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
+          {resetSuccessful ? null : (
+            <FormProvider {...methods}>
+              <form className="mt-8 space-y-6" onSubmit={methods.handleSubmit(onSubmit)}>
+                <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>
-                </Link>
+                  <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>
+              </form>
+            </FormProvider>
+          )}
+          <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>
-            </form>
-          </FormProvider>
+            </Link>
+          </div>
         </div>
       </div>
     </>
diff --git a/apps/web/pages/auth/reset.tsx b/apps/web/pages/auth/reset.tsx
deleted file mode 100644
index e69de29bb..000000000
diff --git a/apps/web/pages/auth/reset/index.tsx b/apps/web/pages/auth/reset/index.tsx
new file mode 100644
index 000000000..f21145422
--- /dev/null
+++ b/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>
+  );
+}