Dev (#44)

* 🚀 refactor: simplify deployment process in workflow file

* 🚀 chore: add IMAGE_NAME to GITHUB_ENV for deployment workflow

* ✨ chore: simplify deployment logging in workflow file

* 🚀 fix: correct container name in deployment script logic

* 🚀 refactor: rename job and streamline deployment steps

* Update README.md

* ✨ fix: prevent multiple form submissions in Contact component

* ✨ feat: honeypot and timestamp checks to form submission

* ✨ refactor: simplify contact form and improve UI elements

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
 

app/__tests__/components/Contact.test.tsx

@@ -1,4 +1,4 @@
-import { render, screen, fireEvent } from '@testing-library/react';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
 import Contact from '@/app/components/Contact';
 import '@testing-library/jest-dom';
 
@@ -10,20 +10,34 @@ global.fetch = jest.fn(() =>
 ) as jest.Mock;
 
 describe('Contact', () => {
+  beforeAll(() => {
+    jest.useFakeTimers('modern');
+  });
+
+  afterAll(() => {
+    jest.useRealTimers();
+  });
+
   it('renders the contact form', () => {
     render(<Contact />);
-    expect(screen.getByPlaceholderText('Name')).toBeInTheDocument();
+    expect(screen.getByPlaceholderText('Your Name')).toBeInTheDocument();
-    expect(screen.getByPlaceholderText('Email')).toBeInTheDocument();
+    expect(screen.getByPlaceholderText('you@example.com')).toBeInTheDocument();
-    expect(screen.getByPlaceholderText('Message')).toBeInTheDocument();
+    expect(screen.getByPlaceholderText('Your Message...')).toBeInTheDocument();
+    expect(screen.getByLabelText('I accept the privacy policy.')).toBeInTheDocument();
   });
 
   it('submits the form', async () => {
     render(<Contact />);
-    fireEvent.change(screen.getByPlaceholderText('Name'), { target: { value: 'John Doe' } });
-    fireEvent.change(screen.getByPlaceholderText('Email'), { target: { value: 'john@example.com' } });
-    fireEvent.change(screen.getByPlaceholderText('Message'), { target: { value: 'Hello!' } });
-    fireEvent.click(screen.getByText('Send'));
 
-    expect(await screen.findByText('Email sent')).toBeInTheDocument();
+    // Fast forward time to ensure the timestamp check passes
+    jest.advanceTimersByTime(3000);
+
+    fireEvent.change(screen.getByPlaceholderText('Your Name'), { target: { value: 'John Doe' } });
+    fireEvent.change(screen.getByPlaceholderText('you@example.com'), { target: { value: 'john@example.com' } });
+    fireEvent.change(screen.getByPlaceholderText('Your Message...'), { target: { value: 'Hello!' } });
+    fireEvent.click(screen.getByLabelText('I accept the privacy policy.'));
+    fireEvent.click(screen.getByText('Send Message'));
+
+    await waitFor(() => expect(screen.getByText('Email sent')).toBeInTheDocument());
   });
 });

app/components/Contact.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from "react";
 import { sendEmail } from "@/app/utils/send-email";
+import Link from "next/link";
 
 export type ContactFormData = {
   name: string;
@@ -18,11 +19,14 @@ export default function Contact() {
     message: "",
     type: "success",
   });
+  // Record the time when the form is rendered
+  const [formLoadedTimestamp, setFormLoadedTimestamp] = useState<number>(Date.now());
 
   useEffect(() => {
+    setFormLoadedTimestamp(Date.now());
     setTimeout(() => {
       setIsVisible(true);
-    }, 350); // Delay to start the animation after Projects
+    }, 350);
   }, []);
 
   async function onSubmit(e: React.FormEvent<HTMLFormElement>) {
@@ -31,72 +35,170 @@ export default function Contact() {
     const form = e.currentTarget as HTMLFormElement;
     const formData = new FormData(form);
 
+    // Honeypot check
+    const honeypot = formData.get("hp-field");
+    if (honeypot) {
+      setBanner({
+        show: true,
+        message: "Bot detected",
+        type: "error",
+      });
+      setTimeout(() => setBanner((prev) => ({ ...prev, show: false })), 3000);
+      return;
+    }
+
+    // Time-based anti-bot check
+    const timestampStr = formData.get("timestamp") as string;
+    const timestamp = parseInt(timestampStr, 10);
+    if (Date.now() - timestamp < 3000) {
+      setBanner({
+        show: true,
+        message: "Please take your time filling out the form.",
+        type: "error",
+      });
+      setTimeout(() => setBanner((prev) => ({ ...prev, show: false })), 3000);
+      return;
+    }
+
     const data: ContactFormData = {
       name: formData.get("name") as string,
       email: formData.get("email") as string,
       message: formData.get("message") as string,
     };
 
-    // Convert FormData to a plain object
     const jsonData = JSON.stringify(data);
 
+    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 Message";
+        }, 2000);
       }
-
       setBanner({
         show: true,
         message: response.message,
         type: response.success ? "success" : "error",
       });
-    setTimeout(() => {
+      setTimeout(() => setBanner((prev) => ({ ...prev, show: false })), 3000);
-      setBanner((prev) => ({ ...prev, show: false }));
-    }, 3000);
     }
+  }
+
   return (
     <section
       id="contact"
-      className={`p-10 ${isVisible ? "animate-fly-in" : "opacity-0"}`}
+      className={`p-10 ${isVisible ? "animate-fade-in" : "opacity-0"}`}
     >
-      <h2 className="text-3xl font-bold text-center text-gray-800 dark:text-white">
+      <h2 className="text-4xl font-extrabold text-center text-gray-900 dark:text-white mb-8">
-        Contact Me
+        Get in Touch
       </h2>
-      <div className="flex flex-col items-center p-8 bg-gradient-to-br from-white/60 to-white/30 backdrop-blur-lg rounded-2xl shadow-xl max-w-lg mx-auto mt-6 relative">
+      <div className="bg-white/30 dark:bg-gray-800 p-8 rounded-3xl shadow-xl max-w-lg mx-auto">
         {banner.show && (
           <div
-            className={`absolute top-0 left-0 right-0 text-white text-center py-2 rounded-2xl animate-fade-out ${banner.type === "success" ? "bg-green-500" : "bg-red-500"}`}
+            className={`mb-4 text-center rounded-full py-2 px-4 text-white ${
+              banner.type === "success" ? "bg-green-500" : "bg-red-500"
+            }`}
           >
             {banner.message}
           </div>
         )}
-        <form className="w-full space-y-4" onSubmit={onSubmit}>
+        <form className="space-y-6" onSubmit={onSubmit}>
+          {/* Honeypot field */}
+          <input
+            type="text"
+            name="hp-field"
+            style={{ display: "none" }}
+            autoComplete="off"
+          />
+          {/* Hidden timestamp field */}
+          <input
+            type="hidden"
+            name="timestamp"
+            value={formLoadedTimestamp.toString()}
+          />
+
+          <div>
+            <label
+              htmlFor="name"
+              className="block text-sm font-medium text-gray-700 dark:text-gray-300"
+            >
+              Name
+            </label>
             <input
               type="text"
               name="name"
-            placeholder="Name"
+              id="name"
-            className="w-full p-2 border rounded dark:text-white"
+              placeholder="Your Name"
               required
+              className="mt-1 bg-white/60 block w-full p-3 border border-gray-300 dark:border-gray-700 rounded-lg shadow-sm"
             />
+          </div>
+
+          <div>
+            <label
+              htmlFor="email"
+              className="block text-sm font-medium text-gray-700 dark:text-gray-300"
+            >
+              Email
+            </label>
             <input
               type="email"
               name="email"
-            placeholder="Email"
+              id="email"
-            className="w-full p-2 border rounded dark:text-white"
+              placeholder="you@example.com"
               required
+              className="mt-1 bg-white/60 block w-full p-3 border border-gray-300 dark:border-gray-700 rounded-lg shadow-sm"
             />
+          </div>
+
+          <div>
+            <label
+              htmlFor="message"
+              className="block text-sm font-medium text-gray-700 dark:text-gray-300"
+            >
+              Message
+            </label>
             <textarea
               name="message"
-            placeholder="Message"
+              id="message"
-            className="w-full p-2 border rounded dark:text-white"
+              placeholder="Your Message..."
               rows={5}
               required
+              className="mt-1 bg-white/60 block w-full p-3 border border-gray-300 rounded-lg shadow-sm "
             ></textarea>
+          </div>
+
+          <div className="flex items-center">
+            <input
+              type="checkbox"
+              name="privacy"
+              id="privacy"
+              required
+              className="h-5 w-5 text-indigo-600 border-gray-300 rounded focus:ring-indigo-500"
+            />
+            <label htmlFor="privacy" className="ml-2 text-sm text-gray-700 dark:text-gray-300">
+              I accept the{" "}
+              <Link
+              href="/privacy-policy"
+              className="text-blue-800 transition-underline"
+            >
+              privacy policy
+            </Link>.
+                        </label>
+          </div>
+
           <button
             type="submit"
-            className="w-full p-2 text-white bg-gradient-to-r from-blue-500 to-purple-500 rounded hover:from-blue-600 hover:to-purple-600 transition"
+            className="w-full py-3 px-6 text-lg font-semibold text-white bg-gradient-to-r from-blue-500 to-purple-500 rounded-2xl hover:from-blue-600 hover:to-purple-600"
           >
-            Send
+            Send Message
           </button>
         </form>
       </div>