Merge pull request #1658 from haseebzaki-07/new_branch_2

Add Contact us Implementation

backend/controllers/ContactController.js

@@ -0,0 +1,15 @@
+
+const ContactUs = require('../models/ContactUs');
+
+exports.submitContactForm = async (req, res) => {
+  const { name, email, message } = req.body;
+
+  try {
+    const newContact = new ContactUs({ name, email, message });
+    await newContact.save();
+    return res.status(201).json({ message: 'Message sent successfully!' });
+  } catch (error) {
+    console.error('Error saving contact form:', error);
+    return res.status(500).json({ message: 'Failed to send message. Please try again later.' });
+  }
+};

backend/index.js

@@ -2,6 +2,7 @@
 const express = require('express');
 const connectDB = require('./config/db');  // Database connection
 const authRoutes = require('./routes/authRoutes');  // Authentication routes
+const ContactRoutes = require('./routes/ContactRoutes');  
 const cookieParser = require('cookie-parser');  // Middleware for parsing cookies
 const config = require('./config/config');  // Config file for environment variables
 const cors = require('cors');  // Middleware for Cross-Origin Resource Sharing
@@ -14,7 +15,7 @@ connectDB();
 
 // CORS configuration
 app.use(cors({
-    origin: 'http://your-frontend-domain.com',  // Replace with your frontend URL
+    origin: 'http://127.0.0.1:5504',  // Correct: specify the base URL only
     credentials: true  // Allow credentials (cookies) to be sent with requests
 }));
 
@@ -23,7 +24,8 @@ app.use(express.json());  // Parse JSON bodies
 app.use(cookieParser());  // Enable cookie parsing
 
 // API routes
-app.use('/api/auth', authRoutes);  // Route for authentication endpoints
+app.use('/api/auth', authRoutes); 
+app.use('/api/contact', ContactRoutes); 
 
 // Server listening on configured port
 const PORT = config.port || 5000;  // Use config for port, default to 5000 if undefined

backend/models/ContactUs.js

@@ -0,0 +1,23 @@
+// models/Contact.js
+const mongoose = require('mongoose');
+
+const ContactSchema = new mongoose.Schema({
+  name: {
+    type: String,
+    required: true,
+    trim: true,
+  },
+  email: {
+    type: String,
+
+    trim: true,
+    match: /.+\@.+\..+/,
+  },
+  message: {
+    type: String,
+    required: true,
+    trim: true,
+  },
+}, { timestamps: true });
+
+module.exports = mongoose.model('Contact', ContactSchema);

backend/routes/ContactRoutes.js

@@ -0,0 +1,9 @@
+const express = require('express');
+const { submitContactForm } = require('../controllers/ContactController.js');
+
+
+const router = express.Router();
+
+router.post('/', submitContactForm);
+
+module.exports = router;

index.html

@@ -2251,23 +2251,27 @@ <h3>About BuddyTrail</h3>
                         <h3>Send Us a Message</h3>
                         <form id="contactForm">
                             <div class="form-group">
-                                <input type="text" id="name" class="form-control" placeholder="Your Name" required required pattern="[a-zA-Z ]+"
+                                <input type="text" id="name" class="form-control" placeholder="Your Name" required pattern="[a-zA-Z ]+"
                                 oninvalid="this.setCustomValidity('Numbers and Symbols are not allowed')"
                                 oninput="this.setCustomValidity('')">
                             </div>
                             <div class="form-group">
-                                <input type="email" id="email" class="form-control" placeholder="Your Email" required>
+                              <input type="email" id="email" class="form-control" placeholder="Your Email" required>
+
                             </div>
                             <div class="form-group">
                                 <textarea id="message" class="form-control" rows="4" placeholder="Your Message" required></textarea>
                             </div>
-                            <button class="book-btn" type="submit" style="padding: 15px 30px; font-size: 16px; width: 200px; border: none; border-radius: 5px; cursor: pointer;">Send Message</button>
+                            <button class="book-btn" type="submit">Send Message</button>
                         </form>
                     </div>
                 </div>
             </div>
         </section>
         <style>
+
+
+
 /* General Section Styles */
 .contact-section {
     background-color: #f9f9f9;
@@ -2655,6 +2659,52 @@ <h2 style="color: #0057B3;" id="h1darkbtn">Rate your experience</h2>
       </span>
     </button>
   </div>
+
+  <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            document.getElementById('contactForm').addEventListener('submit', async function(event) {
+                event.preventDefault(); // Prevent the default form submission
+
+                const name = document.getElementById('name').value;
+                const email = document.getElementById('email').value;
+                const message = document.getElementById('message').value;
+
+                // Create an object with the form data
+                const formData = {
+                    name: name,
+                    email: email,
+                    message: message
+                };
+
+                console.log('Form Data:', formData); // Debugging statement
+
+                try {
+                    // Send the data to the backend
+                    const response = await fetch('http://localhost:5000/api/contact/', {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/json',
+                        },
+                        body: JSON.stringify(formData)
+                    });
+
+                    // Check if the response is ok (status code 200-299)
+                    if (response.ok) {
+                        const result = await response.json();
+                        alert(result.message); // Show success message
+                        // Optionally reset the form
+                        document.getElementById('contactForm').reset();
+                    } else {
+                        const errorData = await response.json();
+                        alert(`Error: ${errorData.message}`); // Show error message
+                    }
+                } catch (error) {
+                    alert('Failed to send message. Please try again later.'); // Handle network errors
+                    console.error('Error:', error);
+                }
+            });
+        });
+    </script>
   <script>
     window.addEventListener('scroll', function() {
       const scrollContainer = document.getElementById('scrollContainer');
@@ -2824,34 +2874,34 @@ <h2>Exclusive Deals and Offers!</h2>
       window.scrollTo({ top: 0, behavior: "smooth" }); // Smooth scroll to top
     };
   </script>
-  <script>
-    document.getElementById('contactForm').addEventListener('submit', function (e) {
-      e.preventDefault();
-
-      // Submit the form data using fetch
-      fetch(this.action, {
-        method: 'POST',
-        body: new FormData(this),
-        headers: {
-          'Accept': 'application/json'
-        }
-      }).then(response => {
-        // Show the confirmation popup
-        document.getElementById('confirmationPopup').style.display = 'block';
-        // Reset the form
-        this.reset();
-      }).catch(error => {
-        console.error('Error:', error);
-        // Still show the confirmation popup even if there's an error
-        document.getElementById('confirmationPopup').style.display = 'block';
-      });
-    });
-
-
-    function closePopup() {
-      document.getElementById('confirmationPopup').style.display = 'none';
-    }
-  </script>
+  // <script>
+  //   document.getElementById('contactForm').addEventListener('submit', function (e) {
+  //     e.preventDefault();
+
+  //     // Submit the form data using fetch
+  //     fetch(this.action, {
+  //       method: 'POST',
+  //       body: new FormData(this),
+  //       headers: {
+  //         'Accept': 'application/json'
+  //       }
+  //     }).then(response => {
+  //       // Show the confirmation popup
+  //       document.getElementById('confirmationPopup').style.display = 'block';
+  //       // Reset the form
+  //       this.reset();
+  //     }).catch(error => {
+  //       console.error('Error:', error);
+  //       // Still show the confirmation popup even if there's an error
+  //       document.getElementById('confirmationPopup').style.display = 'block';
+  //     });
+  //   });
+
+
+  //   function closePopup() {
+  //     document.getElementById('confirmationPopup').style.display = 'none';
+  //   }
+  // </script>
   <script>
   document.getElementById('reviewForm').addEventListener('submit', function(event) {
   event.preventDefault(); // Prevents form submission