- form submission working with nodemailer

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<FieldValues> = (data) => {
+  const [submitted, setSubmitted] = useState(false);
+
+  const handleFormSubmission: SubmitHandler<FieldValues> = 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<FieldValues>  = (error) => {
@@ -50,7 +68,7 @@ const ContactForm = () => {
                 </div>
 
               </div>
-              <input className="bg-blue-600" type="submit" />
+              <input className="bg-blue-600 text-white rounded-sm cursor-pointer" type="submit" />
             </div>
           </div>
         </form>

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",

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<Data>
+) {
+    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: `<div>${summary}</div><p>Sent from:
+        ${email}</p>`
+      }
+
+    transporter.sendMail(mailData, function (err, info) {
+        if(err)
+          console.log(err)
+        else
+          console.log(info)
+      })
+    
+    res.status(200).json(req.body);
+}

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"