Create centralized button component

src/app/(auth)/forgot-password/page.tsx

@@ -1,51 +1,49 @@
 "use client";
 
-import React, { useRef, useState } from "react";
+import { useState } from "react";
 
 import Link from "next/link";
-import { useRouter } from "next/navigation";
 
 import MessagePage from "@/components/layout/message-page";
 import LinkText from "@/components/link-text";
 import TextInputField from "@/features/auth/components/text-input-field";
+import ActionButton from "@/features/button/components/action";
+import LinkButton from "@/features/button/components/link";
 import formatApiError from "@/lib/utils/api/format-api-error";
 
 export default function Page() {
   const [email, setEmail] = useState("");
   const [emailSent, setEmailSent] = useState(false);
-  const isSubmitting = useRef(false);
-  const router = useRouter();
 
-  const handleSubmit = async (e: React.FormEvent) => {
+  const stopRefresh = (e: React.FormEvent) => {
     e.preventDefault();
+  };
 
-    if (isSubmitting.current) return;
-    isSubmitting.current = true;
-
+  const handleSubmit = async () => {
     if (!email) {
       alert("Missing email");
-      isSubmitting.current = false;
-      return;
+      return false;
     }
 
-    await fetch("/api/auth/start-password-reset/", {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ email }),
-    })
-      .then(async (res) => {
-        if (res.ok) {
-          setEmailSent(true);
-        } else {
-          alert(formatApiError(await res.json()));
-        }
-      })
-      .catch((err) => {
-        console.error("Fetch error:", err);
-        alert("An error occurred. Please try again.");
+    try {
+      const res = await fetch("/api/auth/start-password-reset/", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ email }),
       });
 
-    isSubmitting.current = false;
+      if (res.ok) {
+        setEmailSent(true);
+        return true;
+      } else {
+        alert(formatApiError(await res.json()));
+        return false;
+      }
+    } catch (err) {
+      console.error("Fetch error:", err);
+      alert("An error occurred. Please try again.");
+      return false;
+    }
   };
 
   return (
@@ -55,16 +53,17 @@ export default function Page() {
           title="Check your email"
           description={`A password reset link was sent to ${email}.`}
           buttons={[
-            {
-              type: "primary",
-              label: "back to login",
-              onClick: () => router.push("/login"),
-            },
+            <LinkButton
+              key="0"
+              buttonStyle="primary"
+              label="Back to Login"
+              href="/login"
+            />,
           ]}
         />
       ) : (
         <form
-          onSubmit={handleSubmit}
+          onSubmit={stopRefresh}
           className="flex w-80 flex-col items-center"
         >
           {/* Title */}
@@ -87,12 +86,12 @@ export default function Page() {
             </Link>
 
             {/* Email Button */}
-            <button
-              type="submit"
-              className="bg-blue dark:bg-red mb-2 cursor-pointer gap-2 rounded-full px-4 py-2 font-medium text-white transition"
-            >
-              Send Link
-            </button>
+            <ActionButton
+              buttonStyle="primary"
+              label="Send Link"
+              onClick={handleSubmit}
+              loadOnSuccess
+            />
           </div>
         </form>
       )}

src/app/(auth)/login/page.tsx

@@ -1,13 +1,14 @@
 "use client";
 
-import React, { useRef, useState, useContext } from "react";
+import React, { useContext, useState } from "react";
 
 import Link from "next/link";
 import { useRouter } from "next/navigation";
 
 import Checkbox from "@/components/checkbox";
 import LinkText from "@/components/link-text";
 import TextInputField from "@/features/auth/components/text-input-field";
+import ActionButton from "@/features/button/components/action";
 import { LoginContext } from "@/lib/providers";
 import formatApiError from "@/lib/utils/api/format-api-error";
 
@@ -16,50 +17,47 @@ export default function Page() {
   const [password, setPassword] = useState("");
   const [rememberMe, setRememberMe] = useState(false);
   const { setLoggedIn } = useContext(LoginContext);
-  const isSubmitting = useRef(false);
   const router = useRouter();
 
-  const handleSubmit = async (e: React.FormEvent) => {
+  const stopRefresh = (e: React.FormEvent) => {
     e.preventDefault();
+  };
 
-    if (isSubmitting.current) return;
-    isSubmitting.current = true;
-
+  const handleSubmit = async () => {
     if (!email) {
       alert("Missing email");
-      isSubmitting.current = false;
-      return;
+      return false;
     }
     if (!password) {
       alert("Missing password");
-      isSubmitting.current = false;
-      return;
+      return false;
     }
 
-    await fetch("/api/auth/login/", {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ email, password, remember_me: rememberMe }),
-    })
-      .then(async (res) => {
-        if (res.ok) {
-          setLoggedIn(true);
-          router.push("/dashboard");
-        } else {
-          alert(formatApiError(await res.json()));
-        }
-      })
-      .catch((err) => {
-        console.error("Fetch error:", err);
-        alert("An error occurred. Please try again.");
+    try {
+      const res = await fetch("/api/auth/login/", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ email, password, remember_me: rememberMe }),
       });
 
-    isSubmitting.current = false;
+      if (res.ok) {
+        setLoggedIn(true);
+        router.push("/dashboard");
+        return true;
+      } else {
+        alert(formatApiError(await res.json()));
+        return false;
+      }
+    } catch (err) {
+      console.error("Fetch error:", err);
+      alert("An error occurred. Please try again.");
+      return false;
+    }
   };
 
   return (
     <div className="flex h-screen items-center justify-center">
-      <form onSubmit={handleSubmit} className="flex w-80 flex-col items-center">
+      <form onSubmit={stopRefresh} className="flex w-80 flex-col items-center">
         {/* Title */}
         <h1 className="font-display text-lion mb-4 block text-5xl leading-none md:text-8xl">
           login
@@ -81,7 +79,7 @@ export default function Page() {
           onChange={setPassword}
         />
 
-        <div className="flex w-full justify-between">
+        <div className="flex w-full items-start justify-between">
           <div className="m-0 flex flex-col gap-2">
             {/* Remember Me Checkbox */}
             <Checkbox
@@ -96,16 +94,16 @@ export default function Page() {
           </div>
 
           {/* Login Button */}
-          <button
-            type="submit"
-            className="bg-blue dark:bg-red mb-2 cursor-pointer gap-2 rounded-full px-4 py-2 font-medium text-white transition"
-          >
-            Login
-          </button>
+          <ActionButton
+            buttonStyle="primary"
+            label="Login"
+            onClick={handleSubmit}
+            loadOnSuccess
+          />
         </div>
 
         {/* Register Link */}
-        <div className="w-full text-right text-xs">
+        <div className="mt-2 w-full text-right text-xs">
           No account?{" "}
           <Link href="/register">
             <LinkText>Register!</LinkText>

src/app/(auth)/register/email-sent/page.tsx

@@ -5,6 +5,8 @@ import { useEffect, useRef, useState } from "react";
 import { useRouter } from "next/navigation";
 
 import MessagePage from "@/components/layout/message-page";
+import ActionButton from "@/features/button/components/action";
+import LinkButton from "@/features/button/components/link";
 import formatApiError from "@/lib/utils/api/format-api-error";
 
 export default function Page() {
@@ -36,27 +38,29 @@ export default function Page() {
     timeLeft = Math.ceil(timeLeft);
     if (timeLeft > 0) {
       alert(`Slow down! ${timeLeft} seconds until you can send again.`);
-      return;
+      return false;
     }
 
-    await fetch("/api/auth/resend-register-email/", {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ email }),
-    })
-      .then(async (res) => {
-        if (res.ok) {
-          alert("Email resent. Please check your inbox.");
-        } else {
-          alert(formatApiError(await res.json()));
-        }
-      })
-      .catch((err) => {
-        console.error("Fetch error:", err);
-        alert("An error occurred. Please try again.");
+    try {
+      const res = await fetch("/api/auth/resend-register-email/", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ email }),
       });
 
-    lastEmailResend.current = Date.now();
+      if (res.ok) {
+        alert("Email resent. Please check your inbox.");
+        lastEmailResend.current = Date.now();
+        return true;
+      } else {
+        alert(formatApiError(await res.json()));
+        return false;
+      }
+    } catch (err) {
+      console.error("Fetch error:", err);
+      alert("An error occurred. Please try again.");
+      return false;
+    }
   };
 
   return (
@@ -65,16 +69,18 @@ export default function Page() {
         title="Check your email"
         description={`A verification link was sent to ${email}.`}
         buttons={[
-          {
-            type: "secondary",
-            label: "Resend Email",
-            onClick: handleResendEmail,
-          },
-          {
-            type: "primary",
-            label: "Go to Login",
-            onClick: () => router.push("/login"),
-          },
+          <ActionButton
+            key="0"
+            buttonStyle="secondary"
+            label="Resend Email"
+            onClick={handleResendEmail}
+          />,
+          <LinkButton
+            key="1"
+            buttonStyle="primary"
+            label="Go to Login"
+            href="/login"
+          />,
         ]}
       />
     </div>