Change password in database to new reset password

apps/web/components/reset-password.tsx

@@ -1,4 +1,5 @@
 import Link from "next/link";
+import { useRouter } from "next/router";
 import { Button } from "@documenso/ui";
 import Logo from "./logo";
 import { ArrowLeftIcon } from "@heroicons/react/24/outline";
@@ -11,14 +12,50 @@ interface IResetPassword {
 }
 
 export default function ResetPassword(props: any) {
+  const router = useRouter();
+  const { token } = router.query;
+
   const methods = useForm<IResetPassword>();
   const { register, formState, watch } = methods;
   const password = watch("password", "");
 
   const onSubmit = async (values: IResetPassword) => {
+    await toast.promise(
+      fetch(`/api/auth/reset-password`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({ password: values.password, token }),
+      }),
+      {
+        loading: "Resetting...",
+        success: `Reset password successful`,
+        error: "Could not reset password :/",
+      }
+    );
+
     console.log(values);
   };
 
+  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>
+    );
+  }
+
   return (
     <>
       <div className="flex min-h-full items-center justify-center py-12 px-4 sm:px-6 lg:px-8">