From 09f6b71215de806e36ca05afde813b52664a8c16 Mon Sep 17 00:00:00 2001
From: Ayush <asharma7588@gmail.com>
Date: Fri, 8 Nov 2024 21:06:56 +0530
Subject: [PATCH] added newsleeter api and template

---
 backend/controllers/contactController.js | 107 ++++++++++++++++++-----
 backend/routes/contactRoute.js           |   8 +-
 index.html                               |  54 ++++++++++++
 3 files changed, 145 insertions(+), 24 deletions(-)

diff --git a/backend/controllers/contactController.js b/backend/controllers/contactController.js
index 53228419..65feebe5 100644
--- a/backend/controllers/contactController.js
+++ b/backend/controllers/contactController.js
@@ -1,30 +1,93 @@
 import Contact from "../models/contact.js";
+import nodemailer from "nodemailer";
 
 export async function saveContact(req, resp) {
-    try {
-        const { name, email, subject, message } = req.body;
-
-        // Check if all fields are provided
-        if (!name || !email || !subject || !message) {
-            return resp.status(400).json({ message: "All fields are required." });
-        }
-
-        // Create new contact document
-        const newContact = new Contact({ name, email, subject, message });
-
-        // Save contact form data to the database
-        await newContact.save();
-
-        // Respond with success message
-        resp
-            .status(201)
-            .json({ message: "Contact form submitted successfully!", newContact });
-    } catch (error) {
-        console.error("Error saving contact form:", error);
-        resp.status(500).json({ message: "Failed to submit contact form.", error });
+  try {
+    const { name, email, subject, message } = req.body;
+
+    // Check if all fields are provided
+    if (!name || !email || !subject || !message) {
+      return resp.status(400).json({ message: "All fields are required." });
     }
+
+    // Create new contact document
+    const newContact = new Contact({ name, email, subject, message });
+
+    // Save contact form data to the database
+    await newContact.save();
+
+    // Respond with success message
+    resp
+      .status(201)
+      .json({ message: "Contact form submitted successfully!", newContact });
+  } catch (error) {
+    console.error("Error saving contact form:", error);
+    resp.status(500).json({ message: "Failed to submit contact form.", error });
+  }
 }
 
 export async function getContact(req, resp) {
-    resp.send('hello contact')
+  resp.send("hello contact");
+}
+
+export async function newsletter(req, resp) {
+  try {
+    const { email } = req.body;
+
+    if (!email) {
+      return resp.status(400).json({ message: "Email is required" });
+    }
+
+    const transporter = nodemailer.createTransport({
+      service: "gmail",
+      auth: {
+        user: "taskmaster991@gmail.com",
+        pass: "kmepakzcabvztekd",
+      },
+    });
+
+    const mailOptions = {
+      from: process.env.EMAIL_USER,
+      to: email,
+      subject: "Thank you for Subscribing to WORDWISE",
+      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="padding: 20px; text-align: center; border-top-left-radius: 8px; border-top-right-radius: 8px; border-bottom: 1px solid #e0e0e0;">
+            <h3 style="color: #000; margin: 0;">WordWise</h3>
+              <h1 style="color: #000; 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://anshika-26.github.io/WordWise/" 
+                   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>WORDWISE Team</strong></p>
+              <p style="font-size: 12px; color: #999;">&copy; ${new Date().getFullYear()} WORDWISE. All rights reserved.</p>
+            </div>
+          </div>
+        `,
+    };
+
+    // 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" });
+  }
 }
diff --git a/backend/routes/contactRoute.js b/backend/routes/contactRoute.js
index 1d0e76db..b0964072 100644
--- a/backend/routes/contactRoute.js
+++ b/backend/routes/contactRoute.js
@@ -1,8 +1,12 @@
 import express from "express";
 const router = express.Router();
-import { getContact, saveContact } from "../controllers/contactController.js";
+import {
+  getContact,
+  saveContact,
+  newsletter,
+} from "../controllers/contactController.js";
 
 router.post("/saveContact", saveContact);
 router.get("/saveContact", getContact);
-
+router.post("/newsletter", newsletter);
 export default router;
diff --git a/index.html b/index.html
index d25ee611..56838b59 100644
--- a/index.html
+++ b/index.html
@@ -1555,7 +1555,61 @@ <h2>Subscribe to Our Newsletter</h2>
             <!-- Toast Popup -->
             <div id="toast" class="toast hidden"></div>
         </section>
+<script>
+    document.getElementById('newsletterForm').onsubmit = async function(event) {
+  event.preventDefault(); // Prevent the form from refreshing the page
+
+  const emailInput = document.getElementById('emailInput');
+  const email = emailInput.value;
+  const errorMessage = document.getElementById('error-message');
+  const toast = document.getElementById('toast');
+
+  // Basic validation to check if email contains '@'
+  if (!email.includes('@')) {
+    errorMessage.style.display = 'block';
+    return;
+  } else {
+    errorMessage.style.display = 'none';
+  }
+
+  try {
+    // Call the API
+    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();
+
+    // Show toast with feedback
+    if (response.ok) {
+      showToast("You've successfully subscribed to the newsletter!");
+      emailInput.value = ''; // Clear the input after success
+    } else {
+      showToast(result.message || 'Failed to subscribe. Please try again.');
+    }
+  } catch (error) {
+    console.error('Error:', error);
+    showToast('An error occurred. Please try again.');
+  }
+};
+
+// Function to display toast message
+function showToast(message) {
+  const toast = document.getElementById('toast');
+  toast.textContent = message;
+  toast.classList.remove('hidden');
+  
+  // Hide toast after 3 seconds
+  setTimeout(() => {
+    toast.classList.add('hidden');
+  }, 3000);
+}
 
+    </script>
         <style>
             /* Style the email input field */