Add captcha to contact

app.js

@@ -6,6 +6,7 @@ const { marked } = require('marked');
 const nodemailer = require('nodemailer');
 const hljs = require('highlight.js');
 const { format } = require('date-fns'); // To format dates in a proper XML format
+const axios = require('axios'); // Add axios for reCAPTCHA verification
 
 const app = express();
 
@@ -134,59 +135,74 @@ app.get('/contact', (req, res) => {
 });
 
 // Handle contact form submission
-app.post('/contact', (req, res) => {
+app.post('/contact', async (req, res) => {
-    const { name, email, subject, message } = req.body;
+    const { name, email, subject, message, 'g-recaptcha-response': captchaToken } = req.body;
 
     // Validate form inputs (basic example)
     if (!name || !email || !subject || !message) {
         return res.render('contact', { title: 'Contact Raven Scott', msg: 'All fields are required.' });
     }
 
-    // Create email content
+    // Verify the reCAPTCHA token
-    const output = `
+    const captchaSecret = process.env.CAPTCHA_SECRET_KEY; // Your reCAPTCHA secret key
-        <p>You have a new contact request from <strong>${name}</strong>.</p>
+    const captchaVerifyUrl = `https://www.google.com/recaptcha/api/siteverify?secret=${captchaSecret}&response=${captchaToken}`;
-        <h3>Contact Details</h3>
-        <ul>
-            <li><strong>Name:</strong> ${name}</li>
-            <li><strong>Email:</strong> ${email}</li>
-            <li><strong>Subject:</strong> ${subject}</li>
-        </ul>
-        <h3>Message</h3>
-        <p>${message}</p>
-    `;
 
-    // Set up Nodemailer transporter
+    try {
-    let transporter = nodemailer.createTransport({
+        const captchaResponse = await axios.post(captchaVerifyUrl);
-        host: process.env.SMTP_HOST,
-        port: process.env.SMTP_PORT,
-        secure: false, // true for 465, false for other ports
-        auth: {
-            user: process.env.EMAIL_USER, // Email user from environment variables
-            pass: process.env.EMAIL_PASS, // Email password from environment variables
-        },
-        tls: {
-            rejectUnauthorized: false,
-        },
-    });
 
-    // Set up email options
+        if (!captchaResponse.data.success) {
-    let mailOptions = {
+            return res.render('contact', { title: 'Contact Raven Scott', msg: 'Captcha verification failed. Please try again.' });
-        from: `"${name}" <quote@node-geeks.com>`,
-        to: process.env.RECEIVER_EMAIL, // Your email address to receive contact form submissions
-        subject: subject,
-        html: output,
-    };
-
-    // Send email
-    transporter.sendMail(mailOptions, (error, info) => {
-        if (error) {
-            console.error(error);
-            return res.render('contact', { title: 'Contact Raven Scott', msg: 'An error occurred. Please try again.' });
-        } else {
-            console.log('Email sent: ' + info.response);
-            return res.render('contact', { title: 'Contact Raven Scott', msg: 'Your message has been sent successfully!' });
         }
-    });
+
+        // CAPTCHA passed, proceed with sending email
+        const output = `
+            <p>You have a new contact request from <strong>${name}</strong>.</p>
+            <h3>Contact Details</h3>
+            <ul>
+                <li><strong>Name:</strong> ${name}</li>
+                <li><strong>Email:</strong> ${email}</li>
+                <li><strong>Subject:</strong> ${subject}</li>
+            </ul>
+            <h3>Message</h3>
+            <p>${message}</p>
+        `;
+
+        // Set up Nodemailer transporter
+        let transporter = nodemailer.createTransport({
+            host: process.env.SMTP_HOST,
+            port: process.env.SMTP_PORT,
+            secure: false, // true for 465, false for other ports
+            auth: {
+                user: process.env.EMAIL_USER, // Email user from environment variables
+                pass: process.env.EMAIL_PASS, // Email password from environment variables
+            },
+            tls: {
+                rejectUnauthorized: false,
+            },
+        });
+
+        // Set up email options
+        let mailOptions = {
+            from: `"${name}" <quote@node-geeks.com>`,
+            to: process.env.RECEIVER_EMAIL, // Your email address to receive contact form submissions
+            subject: subject,
+            html: output,
+        };
+
+        // Send email
+        transporter.sendMail(mailOptions, (error, info) => {
+            if (error) {
+                console.error(error);
+                return res.render('contact', { title: 'Contact Raven Scott', msg: 'An error occurred. Please try again.' });
+            } else {
+                console.log('Email sent: ' + info.response);
+                return res.render('contact', { title: 'Contact Raven Scott', msg: 'Your message has been sent successfully!' });
+            }
+        });
+    } catch (error) {
+        console.error('Error verifying CAPTCHA:', error);
+        return res.render('contact', { title: 'Contact Raven Scott', msg: 'An error occurred while verifying CAPTCHA. Please try again.' });
+    }
 });
 
 // Blog Post Route

package.json

@@ -10,6 +10,7 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
+    "axios": "^1.7.7",
     "body-parser": "^1.20.3",
     "bootstrap": "^5.3.3",
     "date-fns": "^4.0.0",

views/contact.ejs

@@ -12,6 +12,8 @@
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
     <!-- Custom CSS -->
     <link rel="stylesheet" href="/css/styles.css">
+    <!-- reCAPTCHA API -->
+    <script src="https://www.google.com/recaptcha/api.js" async defer></script>
 </head>
 
 <body class="bg-dark text-white">
@@ -70,6 +72,10 @@
                     <label for="message" class="form-label">Your Message<span class="text-danger">*</span></label>
                     <textarea class="form-control bg-dark text-white border-secondary" id="message" name="message" rows="6" required></textarea>
                 </div>
+
+                <!-- reCAPTCHA -->
+                <div class="g-recaptcha" data-sitekey="6LcLN0kqAAAAAJtseh3ESCUtOWPcEB0y7PsMuimR"></div>
+
                 <button type="submit" class="btn btn-primary">Send Message</button>
             </form>
         </div>