Add captcha to contact

This commit is contained in:
Raven Scott 2024-09-19 08:30:19 -04:00
parent 18a427c7b0
commit 0066061a7b
3 changed files with 67 additions and 44 deletions

104
app.js
View File

@ -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) => {
const { name, email, subject, message } = req.body;
app.post('/contact', async (req, res) => {
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
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>
`;
// Verify the reCAPTCHA token
const captchaSecret = process.env.CAPTCHA_SECRET_KEY; // Your reCAPTCHA secret key
const captchaVerifyUrl = `https://www.google.com/recaptcha/api/siteverify?secret=${captchaSecret}&response=${captchaToken}`;
// 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,
},
});
try {
const captchaResponse = await axios.post(captchaVerifyUrl);
// 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!' });
if (!captchaResponse.data.success) {
return res.render('contact', { title: 'Contact Raven Scott', msg: 'Captcha verification failed. Please try again.' });
}
});
// 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

View File

@ -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",

View File

@ -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>