mailer implemented

This commit is contained in:
Owen Rees
2023-06-21 14:11:16 +02:00
parent 5fd8b35762
commit b323d07d12
11 changed files with 220 additions and 56 deletions
+34
View File
@@ -0,0 +1,34 @@
import NodeMailer from "nodemailer";
import { NextResponse } from "next/server";
export async function POST(req: Request) {
const { email, subject, message } = await req.json();
try {
const mailContent = {
from: email,
to: process.env.GMAIL_USER,
subject: subject,
text: message,
html: `<p>${message}</p>`,
};
const transporter = NodeMailer.createTransport({
service: "gmail",
auth: {
user: process.env.GMAIL_USER,
pass: process.env.GMAIL_PASS,
},
});
const info = await transporter.sendMail(mailContent);
console.log(info);
return NextResponse.json(
{ success: `Message delivered to ${info.accepted}` },
{ status: 250 }
);
} catch (error) {
return NextResponse.json({ error: `Connection refused` }, { status: 404 });
}
}
+2 -52
View File
@@ -1,4 +1,5 @@
import Layout from "@/components/Layout";
import ContactForm from "@/components/ContactForm";
// TODO fix page sizing
export default function Contact() {
@@ -17,58 +18,7 @@ export default function Contact() {
Vous avez un problème technique? Vous aimeriez participer à ce
projet? Contactez-nous.
</p>
<form action="#" className="space-y-8">
<div>
<label
htmlFor="email"
className="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
>
Adresse e-mail
</label>
<input
type="email"
id="email"
className="shadow-sm bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500 dark:shadow-sm-light"
placeholder="nom@exemple.com"
required
/>
</div>
<div>
<label
htmlFor="subject"
className="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
>
Sujet
</label>
<input
type="text"
id="subject"
className="block p-3 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 shadow-sm focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500 dark:shadow-sm-light"
placeholder="Le motif de ma demande"
required
/>
</div>
<div className="sm:col-span-2">
<label
htmlFor="message"
className="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
>
Votre message
</label>
<textarea
id="message"
rows={6}
className="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg shadow-sm border border-gray-300 focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
placeholder="Détaillez ici votre demande..."
></textarea>
</div>
<button
type="submit"
className="py-3 px-5 text-sm font-medium text-center text-white rounded-lg bg-teal-600 sm:w-fit hover:bg-primary-800 focus:ring-4 focus:outline-none focus:ring-primary-300 dark:hover:bg-primary-700 dark:focus:ring-primary-800 dark:text-white"
>
Send message
</button>
</form>
<ContactForm />
</div>
</section>
</Layout>