Add captcha to contact
This commit is contained in:
parent
18a427c7b0
commit
0066061a7b
104
app.js
104
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) => {
|
||||
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
|
||||
|
@ -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",
|
||||
|
@ -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>
|
||||
|
Loading…
Reference in New Issue
Block a user