contact-Page:added complete contact page backend and frontend

client/src/App.jsx

@@ -21,6 +21,7 @@ import AboutPage from "./pages/AboutPage";
 import NotFound from "./pages/NotFound";
 
 import FaqWidget from "./components/FaqWidget"; // ✅ merged from feat/faq
+import ContactForm from "./pages/contact";
 
 // Socket connection (change URL as needed)
 const socket = io("http://localhost:3000");
@@ -109,6 +110,7 @@ const App = () => {
         <Route path="/chat" element={<ChatPage socket={socket} />} />
         <Route path="/about" element={<AboutPage />} />
         <Route path="/authpage" element={<AuthPage />} />
+        <Route path="/contact" element={<ContactForm/>}/>
         <Route path="*" element={<NotFound />} />
       </Routes>
 

client/src/pages/Contact.jsx

@@ -0,0 +1,159 @@
+import React, { useState } from "react";
+import { motion } from "framer-motion";
+
+const ContactForm = () => {
+  const [formData, setFormData] = useState({
+    name: "",
+    email: "",
+    subject: "",
+    message: "",
+  });
+
+  const [status, setStatus] = useState(null);
+
+  const handleChange = (e) => {
+    setFormData({ ...formData, [e.target.name]: e.target.value });
+  };
+
+  const handleSubmit = async (e) => {
+  e.preventDefault();
+
+  try {
+    const res = await fetch("http://localhost:5000/api/auth/send", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify(formData),
+    });
+
+    const data = await res.json(); // fetch ke liye yeh zaruri hai
+
+    if (res.ok) {
+      setStatus({ success: true, message: data.success });
+      setFormData({
+        name: "",
+        email: "",
+        subject: "",
+        message: "",
+      });
+    } else {
+      setStatus({ success: false, message: data.error || "Something went wrong!" });
+    }
+  } catch (error) {
+    console.error("Error:", error);
+    setStatus({
+      success: false,
+      message: "Something went wrong!",
+    });
+  }
+};
+
+
+  return (
+    <>
+     <motion.div className="p-8 bg-gradient-to-br from-gray-800 via-purple-600 to-gray-800 min-h-screen flex flex-col items-center text-white space-y-6">
+      <form
+        onSubmit={handleSubmit}
+        className="bg-white shadow-md rounded px-8 pt-6 pb-8 w-full max-w-md mt-12"
+      >
+        <h2 className="text-2xl font-bold mb-6 text-center text-black">Contact Us -:</h2>
+
+        {status && (
+          <p
+            className={`text-center mb-4 ${
+              status.success ? "text-green-500" : "text-red-500"
+            }`}
+          >
+            {status.message}
+          </p>
+        )}
+
+        <div className="mb-4">
+          <label
+            className="block text-black text-sm font-bold mb-2"
+            htmlFor="name"
+          >
+            Name
+          </label>
+          <input
+            type="text"
+            id="name"
+            name="name"
+            value={formData.name}
+            onChange={handleChange}
+            placeholder="Your Name"
+            className="shadow appearance-none border rounded w-full py-2 px-3 text-black leading-tight focus:outline-none focus:ring"
+            required
+          />
+        </div>
+
+        <div className="mb-4">
+          <label
+            className="block text-black text-sm font-bold mb-2"
+            htmlFor="email"
+          >
+            Email
+          </label>
+          <input
+            type="email"
+            id="email"
+            name="email"
+            value={formData.email}
+            onChange={handleChange}
+            placeholder="Your Email"
+            className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:ring"
+            required
+          />
+        </div>
+
+        <div className="mb-4">
+          <label
+            className="block text-gray-700 text-sm font-bold mb-2"
+            htmlFor="subject"
+          >
+            Subject
+          </label>
+          <input
+            type="text"
+            id="subject"
+            name="subject"
+            value={formData.subject}
+            onChange={handleChange}
+            placeholder="Subject"
+            className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:ring"
+          />
+        </div>
+
+        <div className="mb-4">
+          <label
+            className="block text-gray-700 text-sm font-bold mb-2"
+            htmlFor="message"
+          >
+            Message
+          </label>
+          <textarea
+            id="message"
+            name="message"
+            value={formData.message}
+            onChange={handleChange}
+            placeholder="Your Message"
+            rows="5"
+            className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:ring"
+            required
+          ></textarea>
+        </div>
+
+        <button
+          type="submit"
+          className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline w-full"
+        >
+          Send
+        </button>
+      </form>
+    </motion.div>
+    </>
+  );
+};
+
+export default ContactForm;

server/config/emailConfig.js

@@ -18,7 +18,7 @@ const sendMail = async (to, subject, text, html) => {
       from: `"ChatterSpace" <${process.env.EMAIL_USER}>`,
       to,
       subject,
-      text,
+      html:text,
     };
 
     await transporter.sendMail(mailOptions);

server/controllers/authController.js

@@ -288,6 +288,39 @@ const resetPassword = async (req, res) => {
 }
 
 
+//contactUs
+
+
+const sendContactEmail = async (req, res) => {
+  const { name, email, subject, message } = req.body;
+
+  if (!name || !email || !message) {
+    return res.status(400).json({ error: 'All fields are required' });
+  }
+
+  try {
+    const emailMessage = `
+      <h3>New Contact Query</h3>
+      <p><strong>Name:</strong> ${name}</p>
+      <p><strong>Email:</strong> ${email}</p>
+      <p><strong>Message:</strong></p>
+      <p>${message}</p>
+    `;
+
+    await sendMail(
+      process.env.SMTP_FROM_EMAIL,
+      subject || 'New Query',
+      emailMessage
+    );
+
+    res.status(200).json({ success: 'Email sent successfully!' });
+  } catch (error) {
+    console.error('Error in sending email:', error);
+    res.status(500).json({ error: 'Failed to send email' });
+  }
+};
+
+
 
 module.exports = {
     signupUser,
@@ -297,5 +330,6 @@ module.exports = {
     getuserbyid,
     deleteuser,
     forgotPassword,
-    resetPassword
+    resetPassword,
+    sendContactEmail
 }

server/routes/authRoutes.js

@@ -21,5 +21,7 @@ router.delete("/delete/:id",authController.deleteuser);
 
 // ⬅️ Add this new route for forgot password
 router.post('/forgotpassword', authController.forgotPassword); 
+//contactUs
+router.post('/send', authController.sendContactEmail);
 
 module.exports = router;