add mailing system

pages/api/contactForm.js

@@ -0,0 +1,68 @@
+/**
+ *
+ *
+ * Imports
+ * ------------------------------------------------------------------------------
+ *
+ */
+const fs = require("fs");
+const nodemailer = require("nodemailer");
+
+/** ********************* Functions and Other API Imports */
+
+// let transporter = nodemailer.createTransport({
+//     host: "smtp.dreamhost.com",
+//     port: 465,
+//     secure: true, // true for 465, false for other ports
+//     auth: {
+//         user: "info@tben.design",
+//         pass: "tobybenoti",
+//     },
+// });
+
+let transporter = nodemailer.createTransport({
+    host: "smtp.gmail.com",
+    port: 465,
+    secure: true,
+    auth: {
+        user: "benoti.san@gmail.com",
+        pass: "pzeacyigrdutlbbr",
+    },
+});
+
+/**
+ *
+ *
+ * API handler
+ * ------------------------------------------------------------------------------
+ * @param {Object} req - http incoming request
+ * @param {Object} res - http response
+ *
+ */
+export default async function handler(req, res) {
+    /** ********************* Get Page Data */
+    if (req.method === "POST") {
+        let name = req.body.name;
+        let email = req.body.email;
+        let message = req.body.message;
+
+        console.log("Message Sending ...");
+
+        try {
+            // send mail with defined transport object
+            let info = await transporter.sendMail({
+                from: email, // sender address
+                to: "benoti.san@gmail.com", // list of receivers
+                subject: "Tben Client Request", // Subject line
+                text: "Hello from tben",
+                html: `<h1>Message from ${name}</h1><p>${message}</p>`, // html body
+            });
+
+            console.log("Message sent: %s", info.messageId);
+            res.json({ msg: "Success", info: info });
+        } catch (error) {
+            console.log(error);
+            res.json({ msg: "Failed" });
+        }
+    }
+}

pages/contact.jsx

@@ -1,8 +1,12 @@
 import React from 'react'
 import TextShuffler from '../components/actions/TextShuffler'
+import submitContactForm from '../functions/frontend/submitContactForm'
 import GeneralLayout from '../layouts/general_layout/GeneralLayout'
 
 const contact = () => {
+
+    let [success, setSuccess] = React.useState(false);
+
     return (
         <GeneralLayout>
             <h1><TextShuffler textInput="Great things await ..." /></h1>
@@ -10,11 +14,13 @@ const contact = () => {
                 <TextShuffler textInput="Let's talk" />
             </span>
 
-            <form autoComplete='true'>
-                <input type="text" placeholder='Your Name' />
-                <input type="email" placeholder='Your Email Address' />
+            <form autoComplete='on' onSubmit={(e) => { submitContactForm(e, setSuccess) }}>
+                <input type="text" placeholder='Your Name' autoComplete='name' />
+                <input type="email" placeholder='Your Email Address' autoComplete='email' />
                 <textarea name="message" id="contact-form-message" cols="30" rows="10" placeholder='Message'></textarea>
                 <button type="submit">Submit</button>
+                {success === "Success" && <div className='message-response'>Success!!! <button onClick={() => { window.location.reload() }}>Reload</button></div>}
+                {success === "Failed" && <div className='message-response failed'>Failed <button onClick={() => { window.location.reload() }}>Reload</button></div>}
             </form>
         </GeneralLayout>
     )

pages/index.jsx

@@ -8,7 +8,7 @@ const index = () => {
         <GeneralLayout>
             <h1><TextShuffler textInput="UI/UX designer, Full Stack Web Developer, Web/graphic/motion designer" /></h1>
             <span className='hero-sub-text'>
-                <TextShuffler textInput="Hi, I'm Ben, a highly talented fullstack web developer with extensive enxperience in web design, frontend and backend development." />
+                <TextShuffler textInput="Hi, I'm Benjamin Toby, a highly talented fullstack web developer with extensive enxperience in web design, frontend and backend development." />
             </span>
             <div className="hero-ctas-section">
                 <a href='/documents/Benjamin_Toby_CV.pdf' download={true}>See my resume</a>