From 8a66110b3a66ca3a1fc88ed10a1235826584d25c Mon Sep 17 00:00:00 2001 From: oonyeje Date: Wed, 29 Nov 2023 00:33:47 -0500 Subject: [PATCH] - form submission working with nodemailer --- components/form/ContactForm/index.tsx | 22 ++++++++- package.json | 1 + pages/api/contact.ts | 65 +++++++++++++++++++++++++++ yarn.lock | 19 ++++++++ 4 files changed, 105 insertions(+), 2 deletions(-) create mode 100644 pages/api/contact.ts diff --git a/components/form/ContactForm/index.tsx b/components/form/ContactForm/index.tsx index 91d7781..56b2a24 100644 --- a/components/form/ContactForm/index.tsx +++ b/components/form/ContactForm/index.tsx @@ -1,3 +1,4 @@ +import { useState } from 'react'; import { useForm, SubmitHandler, FieldValues } from 'react-hook-form'; const ContactForm = () => { @@ -7,8 +8,25 @@ const ContactForm = () => { formState: { errors }, } = useForm(); - const handleFormSubmission: SubmitHandler = (data) => { + const [submitted, setSubmitted] = useState(false); + + const handleFormSubmission: SubmitHandler = async (data) => { console.log(data) + + const res = await fetch('/api/contact', { + method: 'POST', + headers: { + 'Accept': 'application/json, text/plain, */*', + 'Content-Type': 'application/json' + }, + body: JSON.stringify(data) + }); + + console.log('Response received') + if (res.status === 200) { + console.log('Response succeeded!') + setSubmitted(true) + } }; const handleFormError: SubmitHandler = (error) => { @@ -50,7 +68,7 @@ const ContactForm = () => { - + diff --git a/package.json b/package.json index b1a2aaa..febe8eb 100644 --- a/package.json +++ b/package.json @@ -15,6 +15,7 @@ "@fortawesome/free-regular-svg-icons": "^6.4.2", "@fortawesome/free-solid-svg-icons": "^6.4.2", "@fortawesome/react-fontawesome": "^0.2.0", + "@types/nodemailer": "^6.4.14", "iframe-resizer-react": "^1.1.0", "next": "latest", "nodemailer": "^6.9.7", diff --git a/pages/api/contact.ts b/pages/api/contact.ts new file mode 100644 index 0000000..643b862 --- /dev/null +++ b/pages/api/contact.ts @@ -0,0 +1,65 @@ +// Next.js API route support: https://nextjs.org/docs/api-routes/introduction +import type { NextApiRequest, NextApiResponse } from 'next'; +import nodemailer from 'nodemailer'; + +type Data = { + firstName: string, + lastName: string, + email: string, + subject: string, + summary: string, +} + +type MailData = { + from?: string, + to?: string, + subject?: string, + text?: string, + html?: string + } + +export default function handler( + req: NextApiRequest, + res: NextApiResponse +) { + console.log(req.body) + + const { + firstName, + lastName, + subject, + email, + summary + + } = req.body; + const {SMTP_PROXY_EMAIL, SMTP_RECIPIENT_EMAIL, SMTP_HOST, SMTP_PORT, SMTP_USERNAME, SMTP_PASSWORD} = process.env; + + console.log(JSON.stringify({SMTP_PROXY_EMAIL, SMTP_RECIPIENT_EMAIL, SMTP_HOST, SMTP_PORT, SMTP_USERNAME, SMTP_PASSWORD})); + const transporter = nodemailer.createTransport({ + port: parseInt(SMTP_PORT!), + host: SMTP_HOST!, + auth: { + user: SMTP_USERNAME!, + pass: SMTP_PASSWORD!, + }, + secure: true, + }); + + const mailData: MailData = { + from: SMTP_PROXY_EMAIL!, + to: SMTP_RECIPIENT_EMAIL!, + subject: `Message From ${firstName} ${lastName}: ${subject}`, + text: summary + " | Sent from: " + email, + html: `
${summary}

Sent from: + ${email}

` + } + + transporter.sendMail(mailData, function (err, info) { + if(err) + console.log(err) + else + console.log(info) + }) + + res.status(200).json(req.body); +} diff --git a/yarn.lock b/yarn.lock index ba06404..5722d8f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -252,11 +252,25 @@ resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee" integrity sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ== +"@types/node@*": + version "20.10.0" + resolved "https://registry.yarnpkg.com/@types/node/-/node-20.10.0.tgz#16ddf9c0a72b832ec4fcce35b8249cf149214617" + integrity sha512-D0WfRmU9TQ8I9PFx9Yc+EBHw+vSpIub4IDvQivcp26PtPrdMGAq5SDcpXEo/epqa/DXotVpekHiLNTg3iaKXBQ== + dependencies: + undici-types "~5.26.4" + "@types/node@latest": version "20.7.0" resolved "https://registry.yarnpkg.com/@types/node/-/node-20.7.0.tgz#c03de4572f114a940bc2ca909a33ddb2b925e470" integrity sha512-zI22/pJW2wUZOVyguFaUL1HABdmSVxpXrzIqkjsHmyUjNhPoWM1CKfvVuXfetHhIok4RY573cqS0mZ1SJEnoTg== +"@types/nodemailer@^6.4.14": + version "6.4.14" + resolved "https://registry.yarnpkg.com/@types/nodemailer/-/nodemailer-6.4.14.tgz#5c81a5e856db7f8ede80013e6dbad7c5fb2283e2" + integrity sha512-fUWthHO9k9DSdPCSPRqcu6TWhYyxTBg382vlNIttSe9M7XfsT06y0f24KHXtbnijPGGRIcVvdKHTNikOI6qiHA== + dependencies: + "@types/node" "*" + "@types/prop-types@*": version "15.7.7" resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.7.tgz#f9361f7b87fd5d8188b2c998db0a1f47e9fb391a" @@ -3049,6 +3063,11 @@ unbox-primitive@^1.0.2: has-symbols "^1.0.3" which-boxed-primitive "^1.0.2" +undici-types@~5.26.4: + version "5.26.5" + resolved "https://registry.yarnpkg.com/undici-types/-/undici-types-5.26.5.tgz#bcd539893d00b56e964fd2657a4866b221a65617" + integrity sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA== + update-browserslist-db@^1.0.13: version "1.0.13" resolved "https://registry.yarnpkg.com/update-browserslist-db/-/update-browserslist-db-1.0.13.tgz#3c5e4f5c083661bd38ef64b6328c26ed6c8248c4"