fix: prevent multiple form submissions in Contact component

This commit is contained in:
2025-02-22 17:15:05 +01:00
parent b0f2533710
commit a00e8241d2
2 changed files with 23 additions and 15 deletions

View File

@@ -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

View File

@@ -40,11 +40,21 @@ export default function Contact() {
// Convert FormData to a plain object
const jsonData = JSON.stringify(data);
//prevent multiple submissions
const submitButton = form.querySelector("button[type='submit']");
if (submitButton) {
submitButton.setAttribute("disabled", "true");
submitButton.textContent = "Sending...";
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,
@@ -54,6 +64,7 @@ export default function Contact() {
setBanner((prev) => ({ ...prev, show: false }));
}, 3000);
}
}
return (
<section
id="contact"