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
This commit is contained in:
denshooter
@@ -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('Email')).toBeInTheDocument();
|
||||
expect(screen.getByPlaceholderText('Message')).toBeInTheDocument();
|
||||
expect(screen.getByPlaceholderText('Your Name')).toBeInTheDocument();
|
||||
expect(screen.getByPlaceholderText('you@example.com')).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());
|
||||
});
|
||||
});
|
||||
@@ -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 response = await sendEmail(jsonData);
|
||||
if (response.success) {
|
||||
form.reset();
|
||||
}
|
||||
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 Message";
|
||||
}, 2000);
|
||||
}
|
||||
setBanner({
|
||||
show: true,
|
||||
message: response.message,
|
||||
type: response.success ? "success" : "error",
|
||||
});
|
||||
setTimeout(() => 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">
|
||||
Contact Me
|
||||
<h2 className="text-4xl font-extrabold text-center text-gray-900 dark:text-white mb-8">
|
||||
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="name"
|
||||
placeholder="Name"
|
||||
className="w-full p-2 border rounded dark:text-white"
|
||||
required
|
||||
name="hp-field"
|
||||
style={{ display: "none" }}
|
||||
autoComplete="off"
|
||||
/>
|
||||
{/* Hidden timestamp field */}
|
||||
<input
|
||||
type="email"
|
||||
name="email"
|
||||
placeholder="Email"
|
||||
className="w-full p-2 border rounded dark:text-white"
|
||||
required
|
||||
type="hidden"
|
||||
name="timestamp"
|
||||
value={formLoadedTimestamp.toString()}
|
||||
/>
|
||||
<textarea
|
||||
name="message"
|
||||
placeholder="Message"
|
||||
className="w-full p-2 border rounded dark:text-white"
|
||||
rows={5}
|
||||
required
|
||||
></textarea>
|
||||
|
||||
<div>
|
||||
<label
|
||||
htmlFor="name"
|
||||
className="block text-sm font-medium text-gray-700 dark:text-gray-300"
|
||||
>
|
||||
Name
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
name="name"
|
||||
id="name"
|
||||
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"
|
||||
id="email"
|
||||
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"
|
||||
id="message"
|
||||
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>
|
||||
|
||||
Reference in New Issue
Block a user