toasts

apps/web/components/login.tsx

@@ -34,20 +34,30 @@ export default function Login() {
 
   const onSubmit = async (values: LoginValues) => {
     setErrorMessage(null);
-    const res = await signIn<"credentials">("credentials", {
-      ...values,
-      callbackUrl,
-      redirect: false,
-    });
+    const res = await toast.promise(
+      signIn<"credentials">("credentials", {
+        ...values,
+        callbackUrl,
+        redirect: false,
+      }),
+      {
+        loading: "Loggin in...",
+        success: "Login successful.",
+        error: "Could not log in :/",
+      },
+      {
+        style: {
+          minWidth: "200px",
+        },
+      }
+    );
     if (!res) {
       setErrorMessage("error");
       toast.error("Something went wrong.");
     }
     // we're logged in! let's do a hard refresh to the desired url
     else if (!res.error) {
-      router.push(callbackUrl).then(() => {
-        toast.success("Login successful");
-      });
+      router.push(callbackUrl);
       // toast.error("error");
     }
     // fallback if error not found
@@ -89,7 +99,7 @@ export default function Login() {
                     autoComplete="email"
                     required
                     className="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:border-neon focus:outline-none focus:ring-neon sm:text-sm"
-                    placeholder="Email address"
+                    placeholder="Email"
                   />
                 </div>
                 <div>
@@ -156,7 +166,7 @@ export default function Login() {
           </FormProvider>
         </div>
       </div>
-      <Toaster position="top-center" />
+      {/* <Toaster position="top-center" /> */}
     </>
   );
 }

apps/web/components/navigation.tsx

@@ -51,9 +51,22 @@ const userNavigation = [
     href: "",
     click: async (e: any) => {
       e.preventDefault();
-      const res: any = await signOut({ callbackUrl: "/login" }).finally(() => {
-        if (!res?.error) toast.success("Logout successful");
-      });
+      const res: any = await toast.promise(
+        signOut({ callbackUrl: "/login" }),
+        {
+          loading: "Logging out",
+          success: "Your are logged out.",
+          error: "Could not log out :/",
+        },
+        {
+          style: {
+            minWidth: "200px",
+          },
+          success: {
+            duration: 10000,
+          },
+        }
+      );
     },
     icon: ArrowRightOnRectangleIcon,
   },
@@ -229,7 +242,7 @@ export default function TopNavigation() {
           </>
         )}
       </Disclosure>
-      <Toaster position="top-center"></Toaster>
+      {/* <Toaster position="top-center"></Toaster> */}
     </>
   );
 }

apps/web/components/signup.tsx

@@ -2,7 +2,7 @@ import { XCircleIcon } from "@heroicons/react/24/outline";
 import { signIn } from "next-auth/react";
 import Link from "next/link";
 import { FormProvider, SubmitHandler, useForm } from "react-hook-form";
-import { Toast, Toaster } from "react-hot-toast";
+import { toast, Toast, Toaster } from "react-hot-toast";
 
 import Logo from "./logo";
 
@@ -29,26 +29,37 @@ export default function Signup() {
   };
 
   const signUp: SubmitHandler<FormValues> = async (data) => {
-    // methods.clearErrors();
-    await fetch("/api/auth/signup", {
-      body: JSON.stringify({
-        ...data,
-      }),
-      headers: {
-        "Content-Type": "application/json",
-      },
-      method: "POST",
-    })
-      .then(handleErrors)
-      .then(async () => {
-        await signIn<"credentials">("credentials", {
+    const res = await toast.promise(
+      fetch("/api/auth/signup", {
+        body: JSON.stringify({
           ...data,
-          callbackUrl: "http://localhost:3000/dashboard",
-        });
+        }),
+        headers: {
+          "Content-Type": "application/json",
+        },
+        method: "POST",
       })
-      .catch((err) => {
-        methods.setError("apiError", { message: err.message });
-      });
+        .then(handleErrors)
+        .then(async () => {
+          await signIn<"credentials">("credentials", {
+            ...data,
+            callbackUrl: "http://localhost:3000/dashboard",
+          });
+        })
+        .catch((err) => {
+          methods.setError("apiError", { message: err.message });
+        }),
+      {
+        loading: "Creating your account...",
+        success: "Done!",
+        error: (err) => err.message,
+      },
+      {
+        style: {
+          minWidth: "200px",
+        },
+      }
+    );
   };
 
   function renderApiError() {
@@ -202,7 +213,7 @@ export default function Signup() {
           </FormProvider>
         </div>
       </div>
-      <Toaster position="top-center"></Toaster>
+      {/* <Toaster position="top-center"></Toaster> */}
     </>
   );
 }

apps/web/pages/_app.tsx

@@ -4,6 +4,7 @@ import type { AppProps } from "next/app";
 import { NextPage } from "next";
 import { SessionProvider } from "next-auth/react";
 export { coloredConsole } from "@documenso/lib";
+import { Toaster } from "react-hot-toast";
 
 export type NextPageWithLayout<P = {}, IP = P> = NextPage<P, IP> & {
   getLayout?: (page: ReactElement) => ReactNode;
@@ -20,6 +21,7 @@ export default function App({
   const getLayout = Component.getLayout || ((page: any) => page);
   return (
     <SessionProvider session={session}>
+      <Toaster position="top-center"></Toaster>
       {getLayout(<Component {...pageProps} />)}
     </SessionProvider>
   );