use email contact page
This commit is contained in:
@@ -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'
|
import { Container } from '@/components/Container'
|
||||||
|
|
||||||
export default async function Page({ searchParams }) {
|
export default async function Page() {
|
||||||
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')
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="pt-16 pb-12 sm:pb-4 lg:pt-12">
|
<div className="pt-16 pb-12 sm:pb-4 lg:pt-12">
|
||||||
<Container>
|
<Container>
|
||||||
<h1 className="text-2xl font-bold leading-7 text-slate-900">
|
<h1 className="text-2xl font-bold leading-7 text-slate-900">
|
||||||
Contact Us
|
Contact Us
|
||||||
</h1>
|
</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">
|
<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">
|
<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!
|
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>
|
||||||
<form className="space-y-8">
|
<p className="mt-4 italic">
|
||||||
<div className="space-y-8">
|
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!
|
||||||
<div className="pt-8">
|
</p>
|
||||||
<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>
|
|
||||||
|
|
||||||
<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>
|
|
||||||
)}
|
|
||||||
</Container>
|
</Container>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
Reference in New Issue
Block a user