From a00e8241d262acefb4d4423250633b9b7ae2564a Mon Sep 17 00:00:00 2001
From: Denshooter <dennis@konkol.net>
Date: Sat, 22 Feb 2025 17:15:05 +0100
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20fix:=20prevent=20multiple=20form=20?=
 =?UTF-8?q?submissions=20in=20Contact=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 Dockerfile                 |  3 ---
 app/components/Contact.tsx | 35 +++++++++++++++++++++++------------
 2 files changed, 23 insertions(+), 15 deletions(-)

diff --git a/Dockerfile b/Dockerfile
index 24ba3e3..8ffb440 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -19,9 +19,6 @@ COPY .env .env
 # Build the Next.js application
 RUN npm run build
 
-# Set environmental variable for production mode
-ENV NODE_ENV=production
-
 # Expose the port the app runs on
 EXPOSE 3000
 
diff --git a/app/components/Contact.tsx b/app/components/Contact.tsx
index 3898dc8..28cfd2f 100644
--- a/app/components/Contact.tsx
+++ b/app/components/Contact.tsx
@@ -40,19 +40,30 @@ export default function Contact() {
     // Convert FormData to a plain object
     const jsonData = JSON.stringify(data);
 
-    const response = await sendEmail(jsonData);
-    if (response.success) {
-      form.reset();
-    }
+    //prevent multiple submissions 
+    const submitButton = form.querySelector("button[type='submit']");
+    if (submitButton) {
+      submitButton.setAttribute("disabled", "true");
+      submitButton.textContent = "Sending...";
 
-    setBanner({
-      show: true,
-      message: response.message,
-      type: response.success ? "success" : "error",
-    });
-    setTimeout(() => {
-      setBanner((prev) => ({ ...prev, show: false }));
-    }, 3000);
+      const response = await sendEmail(jsonData);
+      if (response.success) {
+        form.reset();
+        submitButton.textContent = "Sent!";
+        setTimeout(() => {
+          submitButton.removeAttribute("disabled");
+          submitButton.textContent = "Send";
+        }, 2000);
+      }
+      setBanner({
+        show: true,
+        message: response.message,
+        type: response.success ? "success" : "error",
+      });
+      setTimeout(() => {
+        setBanner((prev) => ({ ...prev, show: false }));
+      }, 3000);
+    }
   }
   return (
     <section