Add reset password page

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>
+    </>
+  );
+}