Contact form

controllers/contactController.js

@@ -0,0 +1,113 @@
+const validator = require("validator")
+const nodemailer = require("nodemailer")
+const sanitizeHtml = require("sanitize-html")
+const { ObjectId } = require("mongodb")
+const petsCollection = require("../db").db().collection("pets")
+const contactsCollection = require("../db").db().collection("contacts")
+
+const sanitizeOptions = {
+  allowedTags: [],
+  allowedAttributes: {}
+}
+
+exports.submitContact = async function (req, res, next) {
+  if (req.body.secret.toUpperCase() !== "PUPPY") {
+    console.log("spam detected")
+    return res.json({ message: "Sorry!" })
+  }
+
+  if (typeof req.body.name != "string") {
+    req.body.name = ""
+  }
+
+  if (typeof req.body.email != "string") {
+    req.body.email = ""
+  }
+
+  if (typeof req.body.comment != "string") {
+    req.body.comment = ""
+  }
+
+  if (!validator.isEmail(req.body.email)) {
+    console.log("Invalid email detected")
+    return res.json({ message: "Sorry!" })
+  }
+
+  if (!ObjectId.isValid(req.body.petId)) {
+    console.log("Invalid id detected")
+    return res.json({ message: "Sorry!" })
+  }
+
+  req.body.petId = new ObjectId(req.body.petId)
+  const doesPetExist = await petsCollection.findOne({ _id: req.body.petId })
+
+  if (!doesPetExist) {
+    console.log("Pet does not exist!")
+    return res.json({ message: "Sorry!" })
+  }
+
+  const ourObject = {
+    petId: req.body.petId,
+    name: sanitizeHtml(req.body.name, sanitizeOptions),
+    email: sanitizeHtml(req.body.email, sanitizeOptions),
+    comment: sanitizeHtml(req.body.comment, sanitizeOptions)
+  }
+
+  console.log(ourObject)
+  var transport = nodemailer.createTransport({
+    host: "sandbox.smtp.mailtrap.io",
+    port: 2525,
+    auth: {
+      user: process.env.MAILTRAPUSERNAME,
+      pass: process.env.MAILTRAPPASSWORD
+    }
+  })
+
+  try {
+    const promise1 = transport.sendMail({
+      to: ourObject.email,
+      from: "petadoption@localhost",
+      subject: `Thank you for your interest in this ${doesPetExist.name}.`,
+      html: `<h3 style="color:purple; font-size: 30px; font-weight: normal;">Thank you!</h3>
+      <p>We appreciate your interest in ${doesPetExist.name} and one of our staff members will reach out to you shortly! Below is the copy of the message you sent to us:</p>
+      <p><em>${ourObject.comment}</em></p>`
+    })
+
+    const promise2 = transport.sendMail({
+      to: "petadoption@localhost",
+      from: "petadoption@localhost",
+      subject: `Someone is interested in this ${doesPetExist.name}.`,
+      html: `<h3 style="color:purple; font-size: 30px; font-weight: normal;">New Contact!</h3>
+      <p>Name: ${ourObject.name}<br>
+      Pet Interested In: ${doesPetExist.name}<br>
+      Email: ${ourObject.email}<br>
+      Message: ${ourObject.comment}
+      </p>`
+    })
+
+    const promise3 = await contactsCollection.insertOne(ourObject)
+
+    await Promise.all([promise1, promise2, promise3])
+  } catch (err) {
+    next(err)
+  }
+
+  res.send("Thanks for sending data to us")
+}
+
+exports.viewPetContacts = async (req, res) => {
+
+  if (!ObjectId.isValid(req.params.id)) {
+    console.log("bad id")
+    return res.redirect("/")
+  }
+
+  const pet = await petsCollection.findOne({ _id: new ObjectId(req.params.id) })
+  if (!pet) {
+    console.log("pet does not exist")
+    return res.redirect("/")
+  }
+
+  const contacts = await contactsCollection.find({ petId: new ObjectId(req.params.id) }).toArray()
+  res.render("pet-contacts", { contacts, pet })
+}

controllers/petController.js

@@ -77,7 +77,7 @@ exports.actuallyUpdatePet = async (req, res) => {
   if (typeof req.body.name != "string") {
     req.body.name = ""
   }
-  
+
   if (typeof req.body.description != "string") {
     req.body.description = ""
   }
@@ -112,11 +112,11 @@ exports.storePet = async (req, res) => {
   if (typeof req.body.name != "string") {
     req.body.name = ""
   }
-  
+
   if (typeof req.body.description != "string") {
     req.body.description = ""
   }
-  
+
   let ourObject = { name: sanitizeHtml(req.body.name, sanitizeOptions), birthYear: new Date().getFullYear(), species: sanitizeHtml(req.body.species, sanitizeOptions), description: sanitizeHtml(req.body.description, sanitizeOptions) }
 
   if (req.body.birthYear > 999 && req.body.birthYear < 9999) {

package.json

@@ -11,7 +11,9 @@
     "express": "^4.18.2",
     "mongodb": "^6.2.0",
     "node-cache": "^5.1.2",
+    "nodemailer": "^6.9.13",
     "nodemon": "^3.0.1",
-    "sanitize-html": "^2.11.0"
+    "sanitize-html": "^2.11.0",
+    "validator": "^13.12.0"
   }
 }

public/js/main.js

@@ -6,7 +6,6 @@ async function start() {
   document.querySelector("#temperature-output").textContent = ourTemperature
 
 }
-
 start()
 
 // pet filter button code
@@ -32,4 +31,54 @@ function handleButtonClick(e) {
       el.style.display = "none"
     }
   })
-}
+}
+
+document.querySelector(".form-overlay").style.display = ""
+
+function openOverlay(el) {
+  document.querySelector(".form-content").dataset.id = el.dataset.id
+  document.querySelector(".form-photo p strong").textContent = el.closest(".pet-card").querySelector(".pet-name").textContent.trim() + "."
+  document.querySelector(".form-photo img").src = el.closest(".pet-card").querySelector(".pet-card-photo img").src
+  document.querySelector(".form-overlay").classList.add("form-overlay--is-visible")
+  document.querySelector(":root").style.overflowY = "hidden"
+}
+
+document.querySelector(".close-form-overlay").addEventListener("click", closeOverlay)
+
+function closeOverlay() {
+  document.querySelector(".form-overlay").classList.remove("form-overlay--is-visible")
+  document.querySelector(":root").style.overflowY = ""
+}
+
+document.querySelector(".form-content").addEventListener("submit", async function (e) {
+  e.preventDefault()
+
+  const userValues = {
+    petId: e.target.dataset.id,
+    name: document.querySelector("#name").value,
+    email: document.querySelector("#email").value,
+    secret: document.querySelector("#secret").value,
+    comment: document.querySelector("#comment").value,
+
+  }
+
+  console.log(userValues)
+
+  fetch("/submit-contact", {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json"
+    },
+    body: JSON.stringify(userValues)
+  })
+
+  document.querySelector(".thank-you").classList.add("thank-you--visible")
+  setTimeout(closeOverlay, 2500)
+  setTimeout(() => {
+    document.querySelector(".thank-you").classList.remove("thank-you--visible")
+    document.querySelector("#name").value = ""
+    document.querySelector("#email").value = ""
+    document.querySelector("#secret").value = ""
+    document.querySelector("#comment").value = ""
+  }, 2900)
+})