Merge branch 'main' into branch1

backend/.env.example

@@ -2,4 +2,6 @@
 MONGO_URI=mongodb://localhost:27017/bloggingdb
 JWT_SECRET=scijyasfy7dsvegdffvbfbfgg435tgrsnbgfgn
 PORT=5000
-
+EMAIL_ID=
+PASS_KEY=
+ADMIN_EMAIL_ID=

backend/app.js

@@ -8,6 +8,7 @@ import contactRoutes from "./routes/contactRoute.js";
 import ratingRoutes from "./routes/ratingRoutes.js";
 import getInTouch from "./routes/getInTouchRoutes.js";
 import addBlog from "./routes/addBlogRoutes.js";
+import subscribe from "./routes/subscribeRoutes.js";
 import cors from "cors";
 import path from "path"; // Import path module
 import { fileURLToPath } from "url"; // Import fileURLToPath
@@ -35,6 +36,7 @@ app.use("/api/rating", ratingRoutes);
 app.use("/api/contact", contactRoutes);
 app.use("/api/getInTouch", getInTouch);
 app.use("/api/addBlog", addBlog);
+app.use("/api/newsletter", subscribe);
 
 const PORT = process.env.PORT || 5000;
 app.listen(PORT, () => {

backend/controllers/feedController.js

@@ -1,4 +1,5 @@
 import Feedback from "../models/feedback.js";
+import { sendMailToAdmin } from "../sendFeedbackToAdmin.js";
 
 // Controller to handle feedback submission
 export async function submitFeedback(req, res) { // Changed resp to res
@@ -33,7 +34,7 @@ export async function submitFeedback(req, res) { // Changed resp to res
 
         // Save the feedback data to MongoDB
         await feedback.save();
-
+        sendMailToAdmin(feedback)
         // Respond with a success message
         res.status(201).json({ message: 'Feedback submitted successfully', feedback });
     } catch (error) {

backend/controllers/subscribeController.js

@@ -0,0 +1,26 @@
+import Suscribe from "../models/subscribe.js";
+import { sendMailToSubscriber } from "../utils/sendMailToSubscribe.js";
+export async function saveSubsribe(req, res) {
+    try {
+        const { name, email } = req.body;
+
+        if (!name || !email) {
+            return res.status(400).json({ message: "All fields are required." });
+        }
+
+        // Create new contact document
+        const newSuscribe = new Suscribe({ name, email });
+        sendMailToSubscriber(newSuscribe)
+        await newSuscribe.save();
+        res
+            .status(201)
+            .json({ message: "Contact form submitted successfully!", newSuscribe });
+    } catch (error) {
+        console.error("Error saving contact form:", error);
+        res.status(500).json({ message: "Failed to submit contact form.", error });
+    }
+}
+
+export async function getSubscribe(req, res) {
+    res.send('hello subscriber')
+}

backend/models/subscribe.js

@@ -0,0 +1,23 @@
+import mongoose from "mongoose";
+
+const subscribeSchema = new mongoose.Schema({
+    name: {
+        type: String,
+        required: true,
+        trim: true
+    },
+    email: {
+        type: String,
+        required: true,
+        trim: true,
+        match: [/^\S+@\S+\.\S+$/, "Please enter a valid email address"]
+    },
+    subscribedAt: {
+        type: Date,
+        default: Date.now
+    }
+});
+
+const Subscribe = mongoose.model("Subscribe", subscribeSchema);
+
+export default Subscribe;

backend/routes/subscribeRoutes.js

@@ -0,0 +1,8 @@
+import express from "express";
+const router = express.Router();
+import { getSubscribe, saveSubsribe } from "../controllers/subscribeController.js";
+
+router.post("/subscribe", saveSubsribe);
+router.get("/getSubscribe", getSubscribe);
+
+export default router;

backend/sendFeedbackToAdmin.js

@@ -0,0 +1,85 @@
+import nodemailer from 'nodemailer';
+import dotenv from 'dotenv';
+
+// Load environment variables from .env file
+dotenv.config();
+
+const sendMailToAdmin = (userdata) => {
+    const transporter = nodemailer.createTransport({
+        service: "gmail",
+        host: "smtp.gmail.com",
+        port: 587,
+        secure: false,
+        auth: {
+            user: process.env.EMAIL_ID, // by this email id you will get mail 
+            pass: process.env.PASS_KEY, // passkey 
+        },
+    });
+
+    async function main() {
+        await transporter.sendMail({
+            from: {
+                name: `Wordwise - ${new Date().toLocaleString()}`,
+                address: process.env.EMAIL_ID,
+            }, // sender address
+            to: process.env.ADMIN_EMAIL_ID, // list of receivers
+            subject: "New User Feedback from Wordwise ✔", // Subject line
+            text: "Wordwise User Feedback", // plain text body
+            html: `<div style="background: black; color: white; height: 100vh; padding: 20px;">
+                        <div class="heading" style="font-size: 2rem; text-align: center; margin-bottom: 20px;">
+                            Wordwise User Feedback
+                        </div>
+                        <table style="width: 50%; border-collapse: collapse; margin: 0 auto;">
+                            <thead>
+                                <tr>
+                                    <th style="border: 1px solid white; padding: 10px; text-align:center; background-color: #0076b4;">
+                                        Field
+                                    </th>
+                                    <th style="border: 1px solid white; padding: 10px; text-align:center; background-color: #0076b4;">
+                                        Value
+                                    </th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <tr>
+                                    <td style="border: 1px solid white; padding: 10px; text-align:center;">Submitted At</td>
+                                    <td style="border: 1px solid white; padding: 10px; text-align:center;">${new Date(userdata.submittedAt).toLocaleString()}</td>
+                                </tr>
+                                <tr>
+                                    <td style="border: 1px solid white; padding: 10px; text-align:center;">Overall Experience</td>
+                                    <td style="border: 1px solid white; padding: 10px; text-align:center;">${userdata.overallExperience}</td>
+                                </tr>
+                                <tr>
+                                    <td style="border: 1px solid white; padding: 10px; text-align:center;">Recommendation</td>
+                                    <td style="border: 1px solid white; padding: 10px; text-align:center;">${userdata.recommendation}</td>
+                                </tr>
+                                <tr>
+                                    <td style="border: 1px solid white; padding: 10px; text-align:center;">Additional Comments</td>
+                                    <td style="border: 1px solid white; padding: 10px; text-align:center;">${userdata.additionalComments}</td>
+                                </tr>
+                                <tr>
+                                    <td style="border: 1px solid white; padding: 10px; text-align:center;">Improvement</td>
+                                    <td style="border: 1px solid white; padding: 10px; text-align:center;">${userdata.improvement}</td>
+                                </tr>
+                                <tr>
+                                    <td style="border: 1px solid white; padding: 10px; text-align:center;">Most Helpful Feature</td>
+                                    <td style="border: 1px solid white; padding: 10px; text-align:center;">${userdata.mostHelpfulFeature}</td>
+                                </tr>
+                                <tr>
+                                    <td style="border: 1px solid white; padding: 10px; text-align:center;">New Features</td>
+                                    <td style="border: 1px solid white; padding: 10px; text-align:center;">${userdata.newFeatures}</td>
+                                </tr>
+                                <tr>
+                                    <td style="border: 1px solid white; padding: 10px; text-align:center;">Features Used</td>
+                                    <td style="border: 1px solid white; padding: 10px; text-align:center;">${userdata.featuresUsed.join(', ')}</td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>`, // html body
+        });
+    }
+
+    main().catch(console.error);
+}
+
+export { sendMailToAdmin };

backend/utils/sendMailToSubscribe.js

@@ -0,0 +1,58 @@
+import nodemailer from 'nodemailer';
+import dotenv from 'dotenv';
+dotenv.config();
+
+const sendMailToSubscriber = (userdata) => {
+    const transporter = nodemailer.createTransport({
+        service: "gmail",
+        host: "smtp.gmail.com",
+        port: 587,
+        secure: false,
+        auth: {
+            user: process.env.EMAIL_ID,
+            pass: process.env.PASS_KEY,
+        },
+    });
+
+    async function main() {
+        await transporter.sendMail({
+            from: {
+                name: "WordWise",
+                address: process.env.EMAIL_ID,
+            },
+            to: userdata.email,
+            subject: "Welcome to WordWise! 📖 Your Vocabulary Journey Begins Here",
+            text: "Thank you for subscribing to WordWise!",
+            html: `
+                <div style="background-color: #f9f9fb; padding: 40px; font-family: Arial, sans-serif; color: #333;">
+                    <div style="max-width: 600px; margin: 0 auto; background-color: white; padding: 30px; border-radius: 8px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);">
+                        <h2 style="font-size: 28px; color: #008080; text-align: center; margin-bottom: 20px;">Welcome to WordWise, ${userdata.name}!</h2>
+                        <p style="font-size: 16px; line-height: 1.7; color: #555; margin-bottom: 20px;">
+                            We’re thrilled to have you join the WordWise community—a place where words come alive, and every blog post is crafted to expand your vocabulary and deepen your understanding of language and topics you care about.
+                        </p>
+                        <p style="font-size: 16px; line-height: 1.7; color: #555; margin-bottom: 20px;">
+                            At WordWise, we believe in the power of words to enlighten and inspire. Our responsive, user-friendly platform is designed with you in mind, ensuring that each visit feels as seamless as it is engaging. Whether you’re here to explore our latest blogs, delve into specific topics, or simply enjoy a well-crafted read, WordWise has something for everyone.
+                        </p>
+                        <p style="font-size: 16px; line-height: 1.7; color: #555; margin-bottom: 20px;">
+                            As part of our community, you’ll be among the first to receive fresh content that’s both insightful and enriching. From curated articles that explore a variety of subjects to interactive features that enhance your reading experience, WordWise is more than just a blog—it’s a journey into the world of words.
+                        </p>
+                        <p style="font-size: 16px; line-height: 1.7; color: #555; margin-bottom: 20px;">
+                            We encourage you to dive into our sections, such as Home, Leading Blogs, About, and Contact Us. Each one is thoughtfully designed to guide you through your reading adventure. And if you ever wish to share feedback or connect with us, our Contact Us page is always open.
+                        </p>
+                        <p style="font-size: 16px; line-height: 1.7; color: #555; margin-bottom: 20px;">
+                            Thank you for subscribing to WordWise! We’re excited to share our latest blogs and updates with you. Here’s to many engaging reads and enriching experiences ahead!
+                        </p>
+                        <p style="font-size: 16px; line-height: 1.7; color: #555; text-align: center; margin-top: 30px;">
+                            With warm regards,<br/>
+                            <strong>The WordWise Team</strong>
+                        </p>
+                    </div>
+                </div>
+            `,
+        });
+    }
+
+    main().catch(console.error);
+};
+
+export { sendMailToSubscriber };

contact_us.html

@@ -539,10 +539,7 @@ <h1 class="fade-in" style="font-size: 48px; margin-bottom: 20px; color: var(--te
         Send
     </button>
 
-    </form>
-    <div id="backToTop" title="Back to Top">
-      <i class="fas fa-arrow-up"></i>
-    </div>
+
 
   </div>
 </div>
@@ -572,6 +569,11 @@ <h1 class="fade-in" style="font-size: 48px; margin-bottom: 20px; color: var(--te
   }
 </style>
 
+</form>
+<div id="backToTop" title="Back to Top">
+  <i class="fas fa-arrow-up"></i>
+</div>
+
 <!-- footer -->
 <footer id="footer">
   <div class="footer-container">

frontend/src/components/Footer.js

@@ -1,6 +1,7 @@
 import '../styles/footer.css';
 import { renderLogin } from '../pages/Login';
 import { renderTranslator } from '../pages/GoogleTranslator';
+import toastr from 'toastr';
 
 
 export function renderFooter() {
@@ -50,6 +51,28 @@ export function renderFooter() {
                         <div id="login-container" class="flex justify-center items-center"></div> 
                     </div>
                 </div>
+                <div class="p-6 w-full flex flex-col items-center justify-center">
+                    <form id="subscribeForm" class="w-full md:w-8/12 flex flex-col items-center md:flex-row">
+                    <input
+                        type="text"
+                        id="name"
+                        placeholder="Your Name"
+                        class="mb-4 md:mb-0 md:mr-2 px-4 py-2 w-full md:w-1/2 rounded-md border border-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-500 text-gray-800"
+                    />
+                    <input
+                        type="email"
+                        id="email"
+                        placeholder="Your Email"
+                        class="mb-4 md:mb-0 md:mr-2 px-4 py-2 w-full md:w-1/2 rounded-md border border-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-500 text-gray-800"
+                    />
+                    <button
+                        type="submit"
+                        class="px-6 py-2 text-white bg-red-600 rounded-md hover:bg-red-800 transition-colors duration-200"
+                    >
+                        Subscribe
+                    </button>
+                    </form>
+                </div>
                 <div class="mt-8 border-t border-gray-700 pt-8 text-center" data-aos="zoom-in"  data-aos-delay="400">
                     <p class="text-gray-400">&copy; ${new Date().getFullYear()} WordWise. All rights reserved.</p>
                     <p class="text-gray-400 mt-2">An open-source project dedicated to language learning.</p>
@@ -63,4 +86,62 @@ export function renderFooter() {
     renderLogin(loginContainer);
     const googleTranslator = document.getElementById('google-translator-container');
     renderTranslator(googleTranslator)
+
+    document.getElementById("subscribeForm").addEventListener("submit", function (event) {
+        event.preventDefault();
+
+        // Get the values of the input fields
+        const name = document.getElementById("name").value;
+        const email = document.getElementById("email").value;
+
+        // Define the API endpoint
+        const apiEndpoint = "http://localhost:5000/api/newsletter/subscribe";
+
+        // Submit the data to the API
+        fetch(apiEndpoint, {
+            method: "POST",
+            headers: {
+                "Content-Type": "application/json",
+            },
+            body: JSON.stringify({ name, email }),
+        })
+            .then(response => {
+                if (!response.ok) {
+                    throw new Error("Network response was not ok");
+                }
+                return response.json();
+            })
+            .then(data => {
+                // Handle the response from the API
+                toastr.success("Subscription successful!");
+                document.getElementById("name").value = '';
+                document.getElementById("email").value = '';
+            })
+            .catch(error => {
+                // Handle errors
+                console.error("There was a problem with the fetch operation:", error);
+                alert("There was an error with your subscription.");
+            });
+    });
 }
+
+
+
+
+toastr.options = {
+    "closeButton": true,
+    "debug": false,
+    "newestOnTop": true,
+    "progressBar": true,
+    "positionClass": "toast-top-right",
+    "preventDuplicates": false,
+    "onclick": null,
+    "showDuration": "300",
+    "hideDuration": "1000",
+    "timeOut": "5000",
+    "extendedTimeOut": "1000",
+    "showEasing": "swing",
+    "hideEasing": "linear",
+    "showMethod": "fadeIn",
+    "hideMethod": "fadeOut"
+}