Merge pull request #393 from Ansh101112/codb

Server updated and contact fuctionality added

backend/index.js

@@ -371,6 +371,37 @@ const transporter = nodemailer.createTransport({
   },
 });
 
+// api route for contactus page
+app.post("/contactus", async (req, res) => {
+  const { name, email, message } = req.body;
+
+  try {
+    // Set up Nodemailer transporter
+    const transporter = nodemailer.createTransport({
+      service: "gmail",
+      auth: {
+        user: process.env.EMAIL,
+        pass: process.env.PASS,
+      },
+    });
+
+    const mailOptions = {
+      from: process.env.EMAIL,
+      to: process.env.EMAIL,
+      subject: `Contact Us message from ${name}`,
+      text: `From: ${name}\nEmail: ${email}\n\nMessage:\n${message}`,
+    };
+
+    await transporter.sendMail(mailOptions);
+    res.status(200).json({ message: "Message sent successfully" });
+  } catch (error) {
+    res.status(500).json({
+      message: "Server Error. Please try again after sometime.",
+      error: error.message,
+    });
+  }
+});
+
 // Route to handle forgot password
 app.post("/forgot-password", async (req, res) => {
   const { email } = req.body;
@@ -428,7 +459,9 @@ app.post("/user/reset-password/:token", async (req, res) => {
     });
 
     if (!user) {
-      return res.status(400).json({ message: "Password reset token is invalid or has expired." });
+      return res
+        .status(400)
+        .json({ message: "Password reset token is invalid or has expired." });
     }
 
     const hashedPassword = await bcrypt.hash(password, 10);
@@ -447,7 +480,7 @@ app.post("/user/reset-password/:token", async (req, res) => {
     res.status(500).json({ message: "Server error", error: error.message });
   }
 });
-app.put('/products/:id', async (req, res) => {
+app.put("/products/:id", async (req, res) => {
   try {
     const product = await Product.findByIdAndUpdate(req.params.id, req.body, {
       new: true,
@@ -470,9 +503,6 @@ app.delete("/products/:id", async (req, res) => {
   }
 });
 
-
-
-
 // Start the server
 const server = app.listen(PORT, () => {
   console.log(`Server running on port ${PORT}`);

src/pages/Contact.js

@@ -1,12 +1,39 @@
-import React from "react";
+import React, { useState } from "react";
 import Navbar from "../components/Navbar";
+import { toast, ToastContainer } from "react-toastify";
 import Footer from "../components/Footer";
+import axios from "axios";
+import "react-toastify/dist/ReactToastify.css";
 
 const CustomerVoices = () => {
+  const [name, setName] = useState("");
+  const [email, setEmail] = useState("");
+  const [message, setMessage] = useState("");
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    try {
+      const response = await axios.post("http://localhost:6352/contactus", {
+        name,
+        email,
+        message,
+      });
+      if (response.status === 200) {
+        toast.success("Message sent successfully");
+        setName("");
+        setEmail("");
+        setMessage("");
+      }
+    } catch (error) {
+      toast.error("Error occurred. Try again after sometime.");
+      console.log(error);
+    }
+  };
+
   return (
     <>
-      <Navbar></Navbar>
-      {/* old style contact page, not removed due to a testing */}
+      <Navbar />
+      <ToastContainer />
       <div className="min-h-screen bg-gray-100 p-6 flex flex-col items-center">
         <div className="container mx-auto">
           <header className="text-center mb-6">
@@ -24,14 +51,16 @@ const CustomerVoices = () => {
               Share your queries and message here and our team will contact you.
             </p>
 
-            <form>
+            <form onSubmit={handleSubmit}>
               <div className="mb-4">
                 <label htmlFor="name" className="block text-gray-700">
                   <i className="fas fa-user"></i> Name
                 </label>
                 <input
                   type="text"
                   id="name"
+                  value={name}
+                  onChange={(e) => setName(e.target.value)}
                   className="w-full mt-2 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring focus:border-green-300"
                   placeholder="Name"
                 />
@@ -43,6 +72,8 @@ const CustomerVoices = () => {
                 <input
                   type="email"
                   id="email"
+                  value={email}
+                  onChange={(e) => setEmail(e.target.value)}
                   className="w-full mt-2 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring focus:border-green-300"
                   placeholder="Email"
                 />
@@ -53,6 +84,8 @@ const CustomerVoices = () => {
                 </label>
                 <textarea
                   id="message"
+                  value={message}
+                  onChange={(e) => setMessage(e.target.value)}
                   rows="4"
                   className="w-full mt-2 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring focus:border-green-300"
                   placeholder="Message"
@@ -70,30 +103,7 @@ const CustomerVoices = () => {
           </div>
         </div>
       </div>
-      {/* new styled with google api integration */}
-      {/* <section class="text-gray-600 body-font relative">
-  <div class="absolute inset-0 bg-gray-300">
-    <iframe width="100%" height="100%" frameborder="0" marginheight="0" marginwidth="0" title="map" scrolling="no" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d14238.484340255187!2d80.94794955!3d26.852001650000002!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x399bfd09c18f1e13%3A0xbf01e68d3158fb37!2sHazratganj%2C%20Lucknow%2C%20Uttar%20Pradesh%20226001!5e0!3m2!1sen!2sin!4v1716560587108!5m2!1sen!2sin"></iframe>
-  </div>
-  <div class="container px-5 py-24 mx-auto flex">
-    <div class="lg:w-1/3 md:w-1/2 bg-white rounded-lg p-8 flex flex-col md:ml-auto w-full mt-10 md:mt-0 relative z-10 shadow-md">
-      <h2 class="text-gray-900 text-lg mb-1 font-medium title-font">Contact Us</h2>
-      <p class="leading-relaxed mb-5 text-gray-600">
-              Contact us and feel free to share your queries here.
-           </p>
-      <div class="relative mb-4">
-        <label for="email" class="leading-7 text-sm text-gray-600">Email</label>
-        <input type="email" id="email" name="email" className="w-full bg-white rounded border border-gray-300 focus:border-green-300 focus:ring-2 focus:ring-indigo-200 text-base outline-none text-gray-700 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out" />
-      </div>
-      <div class="relative mb-4">
-        <label for="message" class="leading-7 text-sm text-gray-600">Message</label>
-        <textarea id="message" name="message" class="w-full bg-white rounded border border-gray-300 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 h-32 text-base outline-none text-gray-700 py-1 px-3 resize-none leading-6 transition-colors duration-200 ease-in-out"></textarea>
-      </div>
-      <button class="text-white bg-indigo-500 border-0 py-2 px-6 focus:outline-none hover:bg-indigo-600 rounded text-lg">Send</button>
-      <p class="text-xs text-gray-500 mt-3">Our team will be in contact with you as soon as possibles.</p>
-    </div>
-  </div>
-</section> */}
+      <Footer />
     </>
   );
 };