denshooter/portfolio
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

✨ refactor: simplify contact form and improve UI elements

Browse Source
This commit is contained in:
Denshooter
2025-02-22 21:53:57 +01:00
parent a1c4adc4b1
commit 82d5ab5fcf
2 changed files with 111 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
app/__tests__/components/Contact.test.tsx
View File

@@ -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());
});
});

102
app/components/Contact.tsx
View File

@@ -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;
@@ -34,7 +35,7 @@ export default function Contact() {
const form = e.currentTarget as HTMLFormElement;
const formData = new FormData(form);
// Honeypot check: if the hidden field has a value, it's likely a bot.
// Honeypot check
const honeypot = formData.get("hp-field");
if (honeypot) {
setBanner({
@@ -42,14 +43,11 @@ export default function Contact() {
message: "Bot detected",
type: "error",
});
setTimeout(() => {
setBanner((prev) => ({ ...prev, show: false }));
}, 3000);
setTimeout(() => setBanner((prev) => ({ ...prev, show: false })), 3000);
return;
}
// Time based anti-bot check:
// Read the timestamp from the hidden field and ensure at least 3 seconds have passed.
// Time-based anti-bot check
const timestampStr = formData.get("timestamp") as string;
const timestamp = parseInt(timestampStr, 10);
if (Date.now() - timestamp < 3000) {
@@ -58,9 +56,7 @@ export default function Contact() {
message: "Please take your time filling out the form.",
type: "error",
});
setTimeout(() => {
setBanner((prev) => ({ ...prev, show: false }));
}, 3000);
setTimeout(() => setBanner((prev) => ({ ...prev, show: false })), 3000);
return;
}
@@ -83,7 +79,7 @@ export default function Contact() {
submitButton.textContent = "Sent!";
setTimeout(() => {
submitButton.removeAttribute("disabled");
submitButton.textContent = "Send";
submitButton.textContent = "Send Message";
}, 2000);
}
setBanner({
@@ -91,70 +87,118 @@ export default function Contact() {
message: response.message,
type: response.success ? "success" : "error",
});
setTimeout(() => {
setBanner((prev) => ({ ...prev, show: false }));
}, 3000);
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 ${
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}>
{/* Honeypot field: should remain empty */}
<form className="space-y-6" onSubmit={onSubmit}>
{/* Honeypot field */}
<input
type="text"
name="hp-field"
style={{ display: "none" }}
autoComplete="off"
/>
{/* Hidden timestamp field to check how fast the form was filled */}
{/* 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"
className="w-full p-2 border rounded dark:text-white"
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"
placeholder="Email"
className="w-full p-2 border rounded dark:text-white"
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"
placeholder="Message"
className="w-full p-2 border rounded dark:text-white"
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>