tjhintz/thereactshow
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

use email contact page

Browse Source
This commit is contained in:
Thomas Hintz
2025-07-16 07:20:20 -07:00
parent 2330d85701
commit 1c22efbd5c
1 changed files with 9 additions and 169 deletions
Download Patch File Download Diff File Expand all files Collapse all files

178
src/app/(main)/contact-us/page.jsx
View File

@@ -1,180 +1,20 @@
export const dynamic = 'force-dynamic'
import { redirect } from 'next/navigation';
import nodemailer from 'nodemailer';
import sanitizeHtml from 'sanitize-html';
import { Container } from '@/components/Container'
export default async function Page({ searchParams }) {
const firstName = searchParams['first-name'];
const lastName = searchParams['last-name'];
const hostName = searchParams['host-name'];
const email = searchParams['email'];
const message = searchParams['message'];
const submitted = firstName || lastName || email || message || hostName;
const valid = submitted && firstName && lastName && email && message && hostName;
const validHostName = valid &&
(hostName.toLowerCase().replaceAll(' ', '') === 'thomashintz' ||
hostName.toLowerCase().replaceAll(' ', '') === 'thomas' ||
hostName.toLowerCase().replaceAll(' ', '') === 'hintz');
let emailSentSuccessfully = false;
if (valid && validHostName) {
const transporter = nodemailer.createTransport({
host: process.env.CONTACT_HOST,
port: process.env.CONTACT_PORT,
secure: true, // true for 465, false for other ports
auth: {
user: process.env.CONTACT_USER,
pass: process.env.CONTACT_PASSWORD,
},
});
// send mail with defined transport object
await transporter.sendMail({
from: `"${firstName} ${lastName}" <${process.env.CONTACT_FROM_ADDRESS}>`,
replyTo: `"${firstName} ${lastName}" <${email}>`,
to: process.env.CONTACT_TO_ADDRESS,
subject: "The React Show - Form Submission",
text: message,
html: sanitizeHtml(message, {
allowedTags: [],
allowedAttributes: {}
}),
});
redirect('/contact-success')
} else if (valid && !validHostName) {
redirect('/contact-success')
}
export default async function Page() {
return (
<div className="pt-16 pb-12 sm:pb-4 lg:pt-12">
<Container>
<h1 className="text-2xl font-bold leading-7 text-slate-900">
Contact Us
</h1>
{valid && validHostName && !emailSentSuccessfully && (
<div className="divide-y divide-slate-100 sm:mt-4 lg:mt-8 lg:border-t lg:border-slate-100">
<p>
Unable to send message. Please go back and reload the page and try again or try again later. Sorry!
</p>
</div>
)}
{!valid && (
<div className="divide-y divide-slate-100 sm:mt-4 lg:mt-8 lg:border-t lg:border-slate-100">
<p className="mt-4 italic">
Like the show? Want to hear us talk about something specific? Or just want to say hi? We’d love to hear from you!
</p>
<form className="space-y-8">
<div className="space-y-8">
<div className="pt-8">
<div className="mt-6 grid grid-cols-1 gap-y-6 gap-x-4 sm:grid-cols-6">
<div className="sm:col-span-3">
<label htmlFor="first-name" className="block text-sm font-medium text-gray-700">
First name
</label>
<div className="mt-1">
<input
type="text"
name="first-name"
id="first-name"
autoComplete="given-name"
defaultValue={firstName}
required
title="First/Given Name (required)"
className="block w-full rounded-md shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm border-gray-300"
/>
</div>
</div>
<div className="sm:col-span-3">
<label htmlFor="last-name" className="block text-sm font-medium text-gray-700">
Last name
</label>
<div className="mt-1">
<input
type="text"
name="last-name"
id="last-name"
autoComplete="family-name"
defaultValue={lastName}
required
title="Last/Family Name (required)"
className="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
/>
</div>
</div>
<div className="sm:col-span-4">
<label htmlFor="email" className="block text-sm font-medium text-gray-700">
Email address
</label>
<div className="mt-1">
<input
id="email"
name="email"
type="email"
autoComplete="email"
required
defaultValue={email}
title="Email Address (required)"
className="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
/>
</div>
</div>
<div className="sm:col-span-3">
<label htmlFor="last-name" className="block text-sm font-medium text-gray-700">
Name of the podcast host: (required because of bots)
</label>
<div className="mt-1">
<input
type="text"
name="host-name"
id="host-name"
defaultValue={hostName}
required
title="Name of the podcast host (required)"
className="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
/>
</div>
</div>
</div>
</div>
<div className="sm:col-span-6">
<label htmlFor="message" className="block text-sm font-medium text-gray-700">
Your Message
</label>
<div className="mt-1">
<textarea
id="message"
name="message"
rows={3}
className="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
defaultValue={message}
required
title="Your message to us! (required)"
/>
</div>
</div>
</div>
<div className="pt-5">
<div className="flex justify-end">
<button
type="submit"
className="ml-3 inline-flex justify-center rounded-md border border-transparent bg-indigo-600 py-2 px-4 text-sm font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
>
Send
</button>
</div>
</div>
</form>
</div>
)}
<div className="divide-y divide-slate-100 sm:mt-4 lg:mt-8 lg:border-t lg:border-slate-100">
<p className="mt-4 italic">
Like the show? Want to hear us talk about something specific? Or just want to say hi? We’d love to hear from you!
</p>
<p className="mt-4 italic">
Send an email to thereactshow [at] thintz.com with the word "NORIS" somewhere in the subject line (to help with spam). Looking forward to it!
</p>
</div>
</Container>
</div>
);