added backend to the newsletter functionality

backend/controllers/ContactController.js

@@ -114,3 +114,73 @@ exports.suggestion = async (req, resp) => {
     });
   }
 };
+
+exports.newsletter = async (req, resp) => {
+  try {
+    const { email } = req.body;
+
+    if (!email) {
+      return resp.status(400).json({ message: "Email is required" });
+    }
+
+    // Configure the transporter with your email credentials
+    const transporter = nodemailer.createTransport({
+      service: "gmail",
+      auth: {
+        user:  process.env.EMAIL_USER,
+        pass:  process.env.EMAIL_PASS,
+      },
+    });
+
+    const mailOptions = {
+      from: process.env.EMAIL_USER,
+      to: email,
+      subject: "Thank you for Subscribing to BuddyTrail",
+      html: `
+    <div style="font-family: Arial, sans-serif; color: #333; max-width: 600px; margin: 0 auto; border: 1px solid #e0e0e0; border-radius: 8px;">
+      <!-- Header -->
+     <div style="background:#000000; padding: 20px; text-align: center; border-top-left-radius: 8px; border-top-right-radius: 8px; border-bottom: 1px solid #e0e0e0;">
+        <img src="cid:headerImage" alt="BuddyTrail Logo" style="width: 100px; margin-bottom: 10px;">
+        <h1 style="color:#e3e3e3; margin: 0;">Welcome to Our Newsletter</h1>
+      </div>
+
+      <!-- Body Content -->
+      <div style="padding: 20px; text-align: center;">
+        <h2 style="color: #007BFF;">Thank You for Subscribing!</h2>
+        <p>Dear Subscriber,</p>
+        <p>We are thrilled to have you with us. Stay tuned for our latest updates, offers, and insights to keep you informed and inspired!</p>
+
+        <!-- Button -->
+        <div style="margin-top: 20px;">
+          <a href="https://buddytrail.netlify.app/" 
+             style="display: inline-block; padding: 12px 25px; background-color: #007BFF; color: white; font-size: 16px; font-weight: bold; text-decoration: none; border-radius: 5px;">
+            Discover More
+          </a>
+        </div>
+      </div>
+
+      <!-- Footer -->
+      <div style="background-color: #f5f5f5; padding: 15px; text-align: center; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px;">
+        <p style="font-size: 14px; color: #666;">Best Regards,<br><strong>BuddyTrail Team</strong></p>
+        <p style="font-size: 12px; color: #999;">&copy; ${new Date().getFullYear()} BuddyTrail. All rights reserved.</p>
+      </div>
+    </div>
+  `,
+      attachments: [
+        {
+          filename: "buddytrail-logo.png",
+          path: "C:/Users/ayush/OneDrive/Desktop/BuddyTrail/backend/controllers/image.png",
+          cid: "headerImage",
+        },
+      ],
+    };
+
+    // Send the email
+    await transporter.sendMail(mailOptions);
+
+    resp.status(200).json({ message: "Newsletter email sent successfully!" });
+  } catch (error) {
+    console.error("Error sending newsletter:", error);
+    resp.status(500).json({ message: "Error sending newsletter" });
+  }
+};

backend/routes/ContactRoutes.js

@@ -5,6 +5,7 @@ const {
   userfeedback,
 
   sendEmail,
+  newsletter,
   suggestion,
 } = require("../controllers/ContactController.js");
 
@@ -18,4 +19,5 @@ router.post("/email", sendEmail);
 
 router.post("/suggestion", suggestion);
 
+router.post("/newsletter", newsletter);
 module.exports = router;

index.html

@@ -3232,12 +3232,50 @@ <h3>About Us</h3>
     <div class="footer-column newsletter" id="newsletter">
       <h3>Subscribe to Our Newsletter</h3>
       <form id="newsletter-form">
-        <input type="email" id="email" placeholder="Enter your email" required />
+        <input type="email" id="email1" placeholder="Enter your email" required />
         <button type="submit">Subscribe</button>
       </form>
       <p id="subscription-message"></p>
     </div>
     </div>
+    <script>
+      document.getElementById("newsletter-form").addEventListener("submit", async function(event) {
+  event.preventDefault(); // Prevent the form from refreshing the page
+
+  const email = document.getElementById("email1").value;
+  const subscriptionMessage = document.getElementById("subscription-message");
+
+  try {
+    console.log(email)
+    // Call the API to subscribe the user to the newsletter
+    const response = await fetch("http://localhost:5000/api/contact/newsletter", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({ email }),
+    });
+
+    const result = await response.json();
+
+    if (response.ok) {
+      // Show success message
+      subscriptionMessage.textContent = "Thank you for subscribing!";
+      subscriptionMessage.style.color = "green";
+      document.getElementById("email").value = ""; // Clear the email input
+    } else {
+      // Show error message from the server
+      subscriptionMessage.textContent = result.message || "Subscription failed. Please try again.";
+      subscriptionMessage.style.color = "red";
+    }
+  } catch (error) {
+    // Show a generic error message if the API call fails
+    subscriptionMessage.textContent = "An error occurred. Please try again.";
+    subscriptionMessage.style.color = "red";
+  }
+});
+
+    </script>
 
     <!-- Quick Links Section -->
     <div class="footer-column">
@@ -3500,7 +3538,7 @@ <h2>Exclusive Deals and Offers!</h2>
   }
     </style>
   </script>
-  <script src="script.js">
+  <!-- <script src="script.js">
 document.getElementById('newsletter-form').addEventListener('submit', function (e) {
     e.preventDefault(); // Prevent the default form submission
 
@@ -3522,7 +3560,7 @@ <h2>Exclusive Deals and Offers!</h2>
         messageElement.style.color =  'red'; // Change message color to red
     }
 });
-    </script>
+    </script> -->
 
     <div class="gtranslate_wrapper"></div>
     <script>window.gtranslateSettings = {"default_language":"en","detect_browser_language":true,"wrapper_selector":".gtranslate_wrapper"}</script>