form-to-mail 1.0.0

package/.env.sample

@@ -0,0 +1,22 @@
+# This is a sample .env file for use in local development.
+# Duplicate this file as .env in the root of the project
+# and update the environment variables to match your
+# desired config
+#
+# See the README for full descriptions of each of the
+# available configurations.
+
+#Node
+NODE_ENV=
+
+# SMTP
+SMTP_HOST=
+SMTP_PORT=
+SMTP_USER=
+SMTP_PASSWORD=
+
+#Mail Options
+MAIL_FROM_NAME=
+MAIL_FROM_EMAIL=
+MAIL_TO_NAME=
+MAIL_TO_EMAIL=

package/README.md

@@ -0,0 +1,106 @@
+# Form To Mail
+
+Form To mail is a simple way to receive emails ✉ from contact forms on your website. Which handles files uploads on the fly for you Out of the box itself. 
+Just Plugin the  formToMail middleware and setup the .env variable's.  You are good to go.
+
+In development  test SMTP service account from ethereal.email are generated and  Preview URL's are logged. you can visit them to view the emails.
+
+## Getting Started
+
+## 1. Install
+
+```bash
+npm install form-to-mail
+```
+
+## 2. Setup SMTP and Mail Options
+
+Create a `.env` file in the root of your project with below environmental variables and fill them with your credentials. 
+
+```dosini
+# SMTP
+SMTP_HOST=
+SMTP_PORT=
+SMTP_USER=
+SMTP_PASSWORD=
+
+#Mail Options
+MAIL_FROM_NAME=
+MAIL_FROM_EMAIL=
+MAIL_TO_NAME=
+MAIL_TO_EMAIL=
+```
+## Example
+
+Suppose you have this HTML from  in your contact page.Set the form action URL to your Custom endpoint.
+
+contact-form.html
+```html
+<form action="/" method="POST">
+
+    <div>
+        <label for="name" class="form-label"> Full Name </label>
+        <input type="text" name="name" id="name" placeholder="Full Name" class="form-input" />
+    </div>
+
+    <div>
+        <label for="email" class="form-label"> Email Address </label>
+        <input type="email" name="email" id="email" placeholder="Enter your email" class="form-input"/>
+    </div>
+
+    <div>
+        <label for="subject" class="form-label"> Subject </label>
+        <input type="text" name="subject" id="subject" placeholder="Enter your subject" class="form-input"/>
+    </div>
+
+    <div class="mb-5">
+        <label for="message" class="form-label"> Message </label>
+        <textarea rows="6" name="message" id="message" placeholder="Type your message" class="form-input"></textarea>
+    </div>
+
+    <div>
+        <button class="form-btn">Submit</button>
+    </div>
+
+</form>
+```
+## 3. Create a express app  
+creates the routes for the POST endpoint. and add formToEmail middleware which will handle the form submission for you. 
+After that you can redirect the users to a confirmation / thank you page or you cloud send a custom response.
+```js
+const express = require('express')
+const app = express()
+const port = 3000
+const formToMail = require('form-to-mail')
+
+
+app.get('/', (req, res) => res.sendFile('contact-form.html'))
+app.get('/thank-you', (req, res) => res.sendFile('thank-you.html'))
+
+// POST endpoint
+app.post('/',formToMail, (req, res) => {
+    res.redirect(303, '/thank-you');
+})
+
+app.listen(port, () => console.log(`listening on port ${port}!`))
+```
+Sample Form Submission
+
+![Sample Form Submission](/images/form-submission.jpeg)
+
+You can find the sample Contact and Thank you pages inside the test folder.
+
+
+<!-- CONTRIBUTING -->
+## Contributing
+
+Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are **greatly appreciated**.
+
+If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement".
+Don't forget to give the project a star! Thanks again!
+
+1. Fork the Project
+2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`)
+3. Commit your Changes (`git commit -m 'Add some AmazingFeature'`)
+4. Push to the Branch (`git push origin feature/AmazingFeature`)
+5. Open a Pull Request

package/app.js

@@ -0,0 +1,21 @@
+const formidable =  require('formidable')
+const mailer = require('./modules/mailer.js')
+
+const formMailer = (req, res, next) => {
+
+    const form = formidable({ multiples: true });
+
+    form.parse(req, async(err, fields, files) => {
+      if (err) {
+        next(err);
+        return;
+      }
+      req.fields = fields;
+      req.files = files;
+      await mailer(req.fields,req.files)
+      next();
+
+    });
+};
+
+module.exports =  formMailer 

package/modules/mailer.js

@@ -0,0 +1,106 @@
+"use strict";
+const  nodemailer = require('nodemailer')
+const dotenv = require('dotenv')
+dotenv.config()
+
+const getSMTPCredientails = () => {
+
+    const SMTP = {
+        host: process.env.SMTP_HOST,
+        port: process.env.SMTP_PORT,
+        user: process.env.SMTP_USER,
+        password: process.env.SMTP_PASSWORD
+    }
+    return SMTP
+}
+
+const createTestTransport = (testAccount) => {
+
+    // create reusable transporter object using the default SMTP transport
+    const transporter = nodemailer.createTransport({
+        host: "smtp.ethereal.email",
+        port: 587,
+        secure: false, // true for 465, false for other ports
+        auth: {
+            user: testAccount.user, // generated ethereal user
+            pass: testAccount.pass, // generated ethereal password
+        },
+    });
+    return transporter
+}
+
+const createTransport = () => {
+
+    const SMTP = getSMTPCredientails()
+    const transporter = nodemailer.createTransport({
+        host: SMTP.host,
+        port: SMTP.port || 587,
+        secure: SMTP.port === 465, // true for 465, false for other ports
+        auth: {
+          user: SMTP.user,
+          pass: SMTP.password,
+        },
+    })
+    return transporter
+}
+
+const getTransporter = (testAccount) => {
+    if(process.env.NODE_ENV === 'production') return createTransport()
+    return createTestTransport(testAccount)     
+}
+
+const mailer = async (fields,files) => {
+
+    // Generate test SMTP service account from ethereal.email
+    // Only needed if you don't have a real mail account for testing
+    let testAccount
+    if(process.env.NODE_ENV !== 'production') {
+        testAccount = await nodemailer.createTestAccount()
+        console.log('testAccount: ', testAccount)
+    }
+
+    let transporter = getTransporter(testAccount)
+    
+    const mailFromName = process.env.MAIL_FROM_NAME
+    const mailFrom = process.env.MAIL_FROM_EMAIL
+    const mailToName = process.env.MAIL_TO_NAME
+    const mailTo = process.env.MAIL_TO_EMAIL
+
+    let attachments = []
+    Object.entries(files).forEach(([file, value]) => {
+        attachments.push({
+            path:file
+        })
+    })
+
+    let submissionFields=''
+    Object.entries(fields).forEach(([filed, value]) => {
+        let capitalizefirstLetter=  filed.charAt(0).toUpperCase()+ filed.slice(1)
+        submissionFields+=`<p><b>${capitalizefirstLetter}:</b> ${value}</p>`
+    })
+
+    const mailSubject = fields.subject ? fields.subject : "New submission"
+
+    // send mail with defined transport object
+    let email = await transporter.sendMail({
+    from: `${mailFromName} <${mailFrom}>`, // sender address
+    to: mailTo, // list of receivers
+    subject: mailSubject, // Subject line
+    html:`<p>Hola ${mailToName}, </p>
+        <p>You have a new submission on from Contact form.</p>
+        <p style="color: #999999;"><strong>SUBMISSION<strong></p>
+        ${submissionFields}
+        `, // html body
+    attachments:attachments
+    });
+
+    console.log("Message sent: %s", email.messageId);
+    // Message sent: <b658f8ca-6296-ccf4-8306-87d57a0b4321@example.com>
+
+    // Preview only available when sending through an Ethereal account
+    console.log("Preview URL: %s", nodemailer.getTestMessageUrl(email))
+    // Preview URL: https://ethereal.email/message/WaQKMgKddxQDoou...
+
+}
+
+module.exports=mailer

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "form-to-mail",
+  "version": "1.0.0",
+  "description": "A Simple Form Mailer. ✉",
+  "main": "app.js",
+  "scripts": {
+    "test": "node test/test.js"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/LazyFolks/form-to-mail.git"
+  },
+  "keywords": [
+    "email",
+    "email-sender",
+    "form-to-mail",
+    "form-mail",
+    "form-mailer",
+    "formtoemail"
+  ],
+  "author": "Karthik",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/LazyFolks/form-to-mail/issues"
+  },
+  "homepage": "https://github.com/LazyFolks/form-to-mail#readme",
+  "dependencies": {
+    "dotenv": "^16.0.3",
+    "formidable": "^2.0.1",
+    "form-to-mail": "^1.0.0",
+    "nodemailer": "^6.8.0"
+  },
+  "directories": {
+    "test": "test"
+  },
+  "devDependencies": {
+    "express": "^4.18.2"
+  }
+}

package/test/pages/contact-form.html

@@ -0,0 +1,129 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Contact Form</title>
+    <style>
+    * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+    }
+    body {
+        font-family: 'Source Sans Pro', sans-serif;
+    }
+    .mb-5 {
+        margin-bottom: 20px;
+    }
+    .form-main-wrapper {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 48px;
+    }
+    .form-wrapper {
+        margin: 0 auto;
+        max-width: 550px;
+        width: 100%;
+        background: white;
+    }
+    .form-label {
+        display: block;
+        font-weight: 500;
+        font-size: 16px;
+        color: #07074d;
+        margin-bottom: 12px;
+    }
+    .form-input {
+        width: 100%;
+        padding: 12px 24px;
+        border-radius: 6px;
+        border: 1px solid #e0e0e0;
+        background: white;
+        font-weight: 500;
+        font-size: 16px;
+        color: #6b7280;
+        outline: none;
+        resize: none;
+    }
+    .form-input:focus {
+        border-color: #5892FF;
+        box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.05);
+    }
+
+    .form-btn {
+        text-align: center;
+        font-size: 16px;
+        border-radius: 6px;
+        padding: 14px 32px;
+        border: none;
+        font-weight: 600;
+        background-color: #5892FF;
+        color: white;
+        cursor: pointer;
+    }
+    .form-btn:hover {
+        box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.05);
+    }
+    </style>
+</head>
+<body>
+    <main>
+        <div class="form-main-wrapper">
+            <div class="form-wrapper">
+              <form action="/" method="POST">
+                <div class="mb-5">
+                  <label for="name" class="form-label"> Full Name </label>
+                  <input
+                    type="text"
+                    name="name"
+                    id="name"
+                    placeholder="Full Name"
+                    class="form-input"
+                  />
+                </div>
+          
+                <div class="mb-5">
+                  <label for="email" class="form-label"> Email Address </label>
+                  <input
+                    type="email"
+                    name="email"
+                    id="email"
+                    placeholder="Enter your email"
+                    class="form-input"
+                  />
+                </div>
+          
+                <div class="mb-5">
+                  <label for="subject" class="form-label"> Subject </label>
+                  <input
+                    type="text"
+                    name="subject"
+                    id="subject"
+                    placeholder="Enter your subject"
+                    class="form-input"
+                  />
+                </div>
+          
+                <div class="mb-5">
+                  <label for="message" class="form-label"> Message </label>
+                  <textarea
+                    rows="6"
+                    name="message"
+                    id="message"
+                    placeholder="Type your message"
+                    class="form-input"
+                  ></textarea>
+                </div>
+          
+                <div>
+                  <button class="form-btn">Submit</button>
+                </div>
+              </form>
+            </div>
+          </div>
+    </main>
+</body>
+</html>

package/test/pages/thank-you.html

@@ -0,0 +1,123 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Thank you !</title>
+    <style>
+        *{
+        box-sizing:border-box;
+        }
+        body{
+        background: #ffffff;
+        background: linear-gradient(to bottom, #ffffff 0%,#e1e8ed 100%);
+        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e1e8ed',GradientType=0 );
+            height: 100%;
+                margin: 0;
+                background-repeat: no-repeat;
+                background-attachment: fixed;
+        
+        }
+        .parent-wrapper{
+        width:100%;
+        height:100vh;
+        display: flex;
+        flex-direction: column;
+        }
+        .child-wrapper{
+        padding :30px;
+        text-align:center;
+        }
+        h1{
+            font-family: 'Kaushan Script', cursive;
+        font-size:4em;
+        letter-spacing:3px;
+        color:#5892FF ;
+        margin:0;
+        margin-bottom:20px;
+        }
+        .child-wrapper p{
+        margin:0;
+        font-size:1.3em;
+        color:#aaa;
+        font-family: 'Source Sans Pro', sans-serif;
+        letter-spacing:1px;
+        }
+        .go-home{
+        color:#fff;
+        background:#5892FF;
+        border:none;
+        padding:10px 50px;
+        margin:30px 0;
+        border-radius:30px;
+        text-transform:capitalize;
+        box-shadow: 0 10px 16px 1px rgba(174, 199, 251, 1);
+        cursor:pointer;
+        }
+        .footer-wrapper{
+        margin-top: auto; 
+        background:#D7E6FE;
+        padding:6px;
+        text-align:center;
+        }
+        .footer-wrapper p{
+        margin:0;
+        padding:4px;
+        color:#5892FF;
+        font-family: 'Source Sans Pro', sans-serif;
+        letter-spacing:1px;
+        }
+        .footer-wrapper p a{
+        text-decoration:none;
+        color:#5892FF;
+        font-weight:600;
+        }
+
+        @media (min-width:360px){
+            h1{
+                font-size:4.5em;
+            }
+            .go-home{
+                margin-bottom:20px;
+            }
+        }
+
+        @media (min-width:600px){
+            .content{
+                max-width:1000px;
+                margin:0 auto;
+            }
+            .parent-wrapper{
+                height: initial;
+                max-width:620px;
+                margin:0 auto;
+                margin-top:50px;
+                box-shadow: 4px 8px 40px 8px rgba(88, 146, 255, 0.2);
+            }
+        }
+    </style>
+</head>
+<body>
+    <main>
+        <div class=content>
+            <div class="parent-wrapper">
+              <div class="child-wrapper">
+                <h1>Thank you !</h1>
+                <p>we will get in touch with you as soon as possible and</p>
+                <p>you should receive a confirmation email soon.</p>
+                <button class="go-home" onclick="history.back()">
+                go back
+                </button>
+              </div>
+              <div class="footer-wrapper">
+                <p>Email not received?
+                 <a href="#" onclick="history.back()">Click here to send again</a>
+                </p>
+              </div>
+          </div>
+          </div>
+          
+    </main>
+</body>
+</html>

package/test/test.js

@@ -0,0 +1,18 @@
+const express = require('express')
+const app = express()
+const port = 3000
+const formToMail = require('form-to-mail')
+
+const path = require('path')
+const pages = '/pages'
+
+
+app.get('/', (req, res) => res.sendFile(path.join(__dirname, pages, 'contact-form.html')))
+app.get('/thank-you', (req, res) => res.sendFile(path.join(__dirname,pages, 'thank-you.html')))
+
+app.post('/',formToMail, (req, res) => {
+    res.redirect(303, '/thank-you');
+})
+
+
+app.listen(port, () => console.log(`listening on port ${port}!`))