Add contact page and data stored in database (#49)

* contact page added

* Add Nodemailer Feature

package.json

@@ -29,6 +29,7 @@
     "method-override": "^3.0.0",
     "mongodb": "^6.6.2",
     "mongoose": "^7.0.3",
+    "nodemailer": "^6.9.15",
     "zod": "^3.23.8"
   },
   "devDependencies": {

public/css/style.css

@@ -397,3 +397,85 @@ img {
 .welcome-section a.cta-button:hover {
   background-color: #004d40;
 }
+
+/* Contact Us Page Styling */
+.contact-section {
+  width: 100%;
+  padding: 2rem 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.contact-container {
+  background: rgba(255, 255, 255, 0.9);
+  border-radius: 10px;
+  padding: 2rem 3rem;
+  max-width: 600px;
+  width: 100%;
+  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
+}
+
+.contact-container h1 {
+  font-size: 2rem;
+  margin-bottom: 1rem;
+  color: #333;
+  text-align: center;
+}
+
+.contact-container p {
+  font-size: 1rem;
+  margin-bottom: 2rem;
+  text-align: center;
+  color: #444;
+}
+
+.form-group {
+  margin-bottom: 1.5rem;
+}
+
+.form-group label {
+  display: block;
+  margin-bottom: 0.5rem;
+  color: #333;
+}
+
+.form-group input,
+.form-group textarea {
+  width: 100%;
+  padding: 0.8rem;
+  border: 1px solid #ddd;
+  border-radius: 5px;
+  font-size: 1rem;
+}
+
+.form-group textarea {
+  resize: none;
+}
+
+.btn-submit {
+  display: inline-block;
+  padding: 0.8rem 1.5rem;
+  background: #ccc;
+  color: #333;
+  border: none;
+  border-radius: 5px;
+  font-size: 1rem;
+  cursor: pointer;
+  transition: background 0.3s ease, color 0.3s ease;
+}
+
+.btn-submit:hover {
+  background: #bbb;
+  color: #000;
+}
+
+.message {
+  background-color: #d4edda;
+  color: #155724;
+  border: 1px solid #c3e6cb;
+  padding: 1rem;
+  margin-bottom: 1.5rem;
+  border-radius: 5px;
+  text-align: center;
+}

server/config/nodemailerConfig.js

@@ -0,0 +1,11 @@
+const nodemailer = require('nodemailer');
+
+const transporter = nodemailer.createTransport({
+  service: 'gmail',
+  auth: {
+   user: process.env.EMAIL_USERNAME,
+    pass: process.env.EMAIL_APP_PASSWORD,
+  },
+});
+
+module.exports = transporter;

server/models/contactMessage.js

@@ -0,0 +1,10 @@
+const mongoose = require('mongoose');
+
+const ContactMessageSchema = new mongoose.Schema({
+  name: { type: String, required: true },
+  email: { type: String, required: true },
+  message: { type: String, required: true },
+  createdAt: { type: Date, default: Date.now },
+});
+
+module.exports = mongoose.model('ContactMessage', ContactMessageSchema);

server/routes/main.js

@@ -1,7 +1,8 @@
 const express = require('express');
 const router = express.Router();
 const Post = require('../models/Post');
-
+const ContactMessage = require('../models/contactMessage');
+const transporter = require('../config/nodemailerConfig');
 /**
  * GET /
  * HOME
@@ -128,6 +129,56 @@ router.get('/about', (req, res) => {
   });
 });
 
+/**
+ * GET /
+ * Contact
+*/
+router.get('/contact', (req, res) => {
+  res.render('contact', {
+    currentRoute: '/contact'
+  });
+});
+
+router.post('/send-message', async (req, res) => {
+  const { name, email, message } = req.body;
+
+  try {
+    // Create a new contact message
+    const newMessage = new ContactMessage({ name, email, message });
+    await newMessage.save();
+
+     // Send an email notification
+     const mailOptions = {
+      from: `"BlogLog Contact Form" <${email}>`, 
+      to: process.env.EMAIL_USERNAME, 
+      subject: `New Contact Message from ${name} - BlogLog`, 
+      html: `
+        <div style="font-family: Arial, sans-serif; margin: 20px; padding: 20px; border: 1px solid #eaeaea; border-radius: 5px; background-color: #f9f9f9;">
+          <h2 style="color: #333;">New Contact Message from BlogLog</h2>
+          <p><strong style="color: #555;">Name:</strong> ${name}</p>
+          <p><strong style="color: #555;">Email:</strong> ${email}</p>
+          <p><strong style="color: #555;">Message:</strong></p>
+          <p style="background-color: #fff; border-left: 4px solid #007BFF; padding: 10px; color: #333;">${message}</p>
+          <br>
+          <p style="color: #777;">Thank you,<br>BlogLog Team</p>
+        </div>
+      `,
+    }
+    await transporter.sendMail(mailOptions); 
+
+    // Render the contact page with a success message
+    res.render('contact', {
+      currentRoute: '/contact',
+      message: 'Thank you for reaching out! We will get back to you soon.',
+    });
+  } catch (error) {
+    console.error(error);
+    res.render('contact', {
+      currentRoute: '/contact',
+      message: 'There was an error sending your message. Please try again later.',
+    });
+  }
+});
 
 // function insertPostData() {
 //   Post.insertMany([

views/contact.ejs

@@ -0,0 +1,29 @@
+<section class="contact-section">
+    <div class="contact-container">
+      <h1>Contact Us</h1>
+      <p>If you have any questions or feedback, feel free to reach out!</p>
+
+       <!-- Display success message if available -->
+       <% if (typeof message !== 'undefined') { %>
+        <div class="message">
+          <p><%= message %></p>
+        </div>
+      <% } %>
+
+      <form action="/send-message" method="POST">
+        <div class="form-group">
+          <label for="name">Name:</label>
+          <input type="text" id="name" name="name" required />
+        </div>
+        <div class="form-group">
+          <label for="email">Email:</label>
+          <input type="email" id="email" name="email" required />
+        </div>
+        <div class="form-group">
+          <label for="message">Message:</label>
+          <textarea id="message" name="message" rows="5" required></textarea>
+        </div>
+        <button type="submit" class="btn-submit">Send Message</button>
+      </form>
+    </div>
+  </section>