Search code examples
node.jsmongodbmongoosenodemailer

Connect nodemailer to form

I have a mail.js file that when run independently sends me a mail. And I have a form. I want to send mail to the email id that fils the form. How can I do that? I am not able to connect these two.

Where and how do I add mail.send();? And how to add variable email if both of these codes are in different files?

Also my html is in index.html

Thank you!!

index.html

<form action="/sign_up" method="POST" id="myForm">

              <div>
                <p class="cuboid-text">Subscribe</p>
              </div>

              <div>

                <label for="submit" class="submit-icon">
                  <i class="fa fa-chevron-right"></i>
                </label>
                <input type="text" id="email" class="cuboid-text" placeholder="Your Email" autocomplete="off" name="email"/>

                <input type="submit" id="submit" name="submit" class="submit" formaction="/sign_up" formmethod="POST"/>
              </div>

              <div>
                <p class="cuboid-text loader">Just a moment ...
                  <i class="fa fa-spinner fa-pulse"></i>
                </p>
              </div>
              <div>

                <span class="reset-icon"><i class="fa fa-refresh"></i></span>
                <p class="cuboid-text">Thankyou, we'll be in touch</p>
              </div>
            </form>

 <script>
    $("#email").focus(function () {
      $("#cuboid form").addClass("ready");
  
    })
    //remove '.ready' when user blus away but only if there is no content
    $("#email").blur(function () {
      if ($(this).val() == "")
        $("#cuboid form").removeClass("ready");
    
    })

    //If the user is typing something make the arrow green/.active
    $("#email").keyup(function () {
      //this adds .active class only if the input has some text
      $(".submit-icon").toggleClass("active", $(this).val().length > 0);
  
    })

    $("#cuboid #myForm").submit(function () {
      const re = /(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:(2(5[0-5]|[0-4][0-9])|1[0-9][0-9]|[1-9]?[0-9]))\.){3}(?:(2(5[0-5]|[0-4][0-9])|1[0-9][0-9]|[1-9]?[0-9])|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])/;
  const email=document.getElementById("email").value;
  const re1='abcd';
  console.log(email);
      
      //prevent default form submisson
      if(re.test(String(email).toLowerCase())){
        console.log("true");
        document.getElementById("demo1").style.visibility="hidden";
        $(this).removeClass("ready").addClass("loading");
        setTimeout(complete, 3000);
      return true;}
      else{
        document.getElementById("demo1").style.visibility="visible";
        // setTimeout(complete, 1000);
      return false;
      }
    })
    

    function complete() {
      $("#cuboid form").removeClass("loading").addClass("complete");
    }
    //reset/refresh functionality
    $(".reset-icon").click(function () {
      $("#cuboid form").removeClass("complete");
  
    })




  </script>

index.js

var express = require("express")
var bodyParser = require("body-parser")
var mongoose = require("mongoose")


const app = express()

app.use(bodyParser.json())
app.use(express.static('public'))
app.use(bodyParser.urlencoded({
    extended: true
}))

mongoose.connect('mongodb://localhost:27017/mydb123', {
    useNewUrlParser: true,
    useUnifiedTopology: true
});

var db = mongoose.connection;

db.on('error', () => console.log("Error in Connecting to Database"));
db.once('open', () => console.log("Connected to Database"));





app.post("/sign_up", (req, res) => {
    // var name = req.body.name;
    var email = req.body.email;

    // var phno = req.body.phno;
    // var password = req.body.password;
    // var initrefnum = req.body.demo;
    // var newrefnum = req.body.newdemo;

    console.log("step1");

    var data = {
        // "name": name,
        "email": email
        // "initrefnum": initrefnum,
        // "newrefnum": newrefnum
    }


    db.collection('users').insertOne(data, (err, collection) => {
        if (err) {
            throw err;
        }
        console.log("Record Inserted Successfully");
    });

    // return res.redirect('index.html')


})



app.get("/", (req, res) => {
    res.set({
        "Allow-access-Allow-Origin": '*'
    })
    return res.redirect('index1.html');
}).listen(3000);


console.log("Listening on PORT 3000");

mail.js


const nodemailer=require('nodemailer')

let mailTransporter = nodemailer.createTransport({
    service: 'gmail',
    auth: {
        user: 'mail@gmail.com',
        pass: '*********'
    }
});

let mailDetails = {
    from: 'xyz@gmail.com',
    to: 'abc@gmail.com',
    subject: 'Test mail',
    text: 'Node.js testing mail for GeeksforGeeks'
};

mailTransporter.sendMail(mailDetails, function(err, data) {
    if(err) {
        console.log('Error Occurs');
    } else {
        console.log('Email sent successfully');
    }
});
Solution

  • Just this <input type="submit" id="submit" /> or <button type="submit">Submit</button> is fine

    app.use(express.static('public')) // this is enough in case if you think what more to do to wire up.

    Mail.js

    const nodemailer = require('nodemailer');

let mailTransporter = nodemailer.createTransport({
     service: 'gmail',
     host: 'smtp.gmail.com',
     auth: {
       user: 'dee@gmail.com', //this should be same as 'from' address
       pass: 'workingpassword'
      } 
   });

module.exports = mailTransporter;

    App.js

    const mailTransporter = require('./mail);

    for your form action, in your /sign_up post method do below

    app.post('/sign_up', (req, res)=>{
  
  mailTransporter.sendMail({
    from: 'dee@gmail.com',  //this should be same as above auth.user
    to: `${req.body.email}`,
    subject: 'Test',
    text: 'hello',
    html: `Hello ${req.body.name} thank you for contacting. We will get in touch`
  }).then(res=>{
      console.log("success........", res)
      resp.send(`email sent to ${req.body.name}` successfully);
  }).catch(e=>{
      console.log("failed........", e)
  });
});

    Things to do to avoid issues,

    go to https://myaccount.google.com/lesssecureapps and enable for less secure apps.

    go to https://accounts.google.com/DisplayUnlockCaptcha and enable.