Creating contact page with captcha
Esther
parent
dd37e2e22c
commit
f638cf4d8b
2
app.js
2
app.js
|
|
@ -8,6 +8,7 @@ var logger = require('./config/winston');
|
|||
|
||||
var indexRouter = require('./routes/index');
|
||||
var aboutRouter = require('./routes/about');
|
||||
var contactRouter = require('./routes/contact');
|
||||
|
||||
var app = express();
|
||||
|
||||
|
|
@ -37,6 +38,7 @@ app.use(express.static(path.join(__dirname, 'public')));
|
|||
|
||||
app.use('/', indexRouter);
|
||||
app.use('/about', aboutRouter);
|
||||
app.use('/contact', contactRouter);
|
||||
|
||||
// catch 404 and forward to error handler
|
||||
app.use(function(req, res, next) {
|
||||
|
|
|
|||
|
|
@ -872,6 +872,11 @@
|
|||
"resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz",
|
||||
"integrity": "sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk="
|
||||
},
|
||||
"hcaptcha": {
|
||||
"version": "0.0.2",
|
||||
"resolved": "https://registry.npmjs.org/hcaptcha/-/hcaptcha-0.0.2.tgz",
|
||||
"integrity": "sha512-wWOncj/sY+q8s7tV12tjn3cFNoQhSu3l/7nTJi4QkFKALQi9XnduoXrV/KFzLg5lnB+5560zSAoi9YdYPDw6Eg=="
|
||||
},
|
||||
"hosted-git-info": {
|
||||
"version": "2.8.8",
|
||||
"resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.8.tgz",
|
||||
|
|
@ -1316,6 +1321,11 @@
|
|||
"node-sass": "^4.3.0"
|
||||
}
|
||||
},
|
||||
"nodemailer": {
|
||||
"version": "6.4.10",
|
||||
"resolved": "https://registry.npmjs.org/nodemailer/-/nodemailer-6.4.10.tgz",
|
||||
"integrity": "sha512-j+pS9CURhPgk6r0ENr7dji+As2xZiHSvZeVnzKniLOw1eRAyM/7flP0u65tCnsapV8JFu+t0l/5VeHsCZEeh9g=="
|
||||
},
|
||||
"nopt": {
|
||||
"version": "3.0.6",
|
||||
"resolved": "https://registry.npmjs.org/nopt/-/nopt-3.0.6.tgz",
|
||||
|
|
|
|||
|
|
@ -12,9 +12,11 @@
|
|||
"cookie-parser": "1.4.4",
|
||||
"debug": "4.1.1",
|
||||
"express": "4.17.1",
|
||||
"hcaptcha": "0.0.2",
|
||||
"http-errors": "1.7.3",
|
||||
"morgan": "1.10.0",
|
||||
"node-sass-middleware": "0.11.0",
|
||||
"nodemailer": "^6.4.10",
|
||||
"pug": "3.0.0",
|
||||
"winston": "^3.3.2"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,6 +7,10 @@ After=network.target
|
|||
Environment=PORT=7000
|
||||
Environment=NODE_ENV=production
|
||||
Environment=GHOST_KEY=key
|
||||
Environment=HCAPTCHA_KEY=key
|
||||
Environment=TO_GMAIL_USER=user
|
||||
Environment=FROM_GMAIL_USER=user
|
||||
Environment=GMAIL_PASS=pass
|
||||
StandardOutput=syslog
|
||||
SyslogIdentifier=pastel-codes
|
||||
User=web
|
||||
|
|
|
|||
|
|
@ -0,0 +1,65 @@
|
|||
var express = require('express');
|
||||
const {verify} = require('hcaptcha');
|
||||
const nodemailer = require('nodemailer')
|
||||
var router = express.Router();
|
||||
|
||||
// POST route from contact form
|
||||
router.post('/', (req, res) => {
|
||||
const TO_GMAIL_USER = process.env.TO_GMAIL_USER
|
||||
const FROM_GMAIL_USER = process.env.FROM_GMAIL_USER
|
||||
const GMAIL_PASS = process.env.GMAIL_PASS
|
||||
const HCAPTCHA_KEY = process.env.HCAPTCHA_KEY
|
||||
const token = req.body["g-recaptcha-response"];
|
||||
|
||||
verify(HCAPTCHA_KEY, token)
|
||||
.then((data) => {
|
||||
console.log(data)
|
||||
if (data.success === true) {
|
||||
// Instantiate the SMTP server
|
||||
const smtpTrans = nodemailer.createTransport({
|
||||
host: 'smtp.gmail.com',
|
||||
port: 465,
|
||||
secure: true,
|
||||
auth: {
|
||||
user: FROM_GMAIL_USER,
|
||||
pass: GMAIL_PASS
|
||||
}
|
||||
})
|
||||
|
||||
// Specify what the email will look like
|
||||
const mailOpts = {
|
||||
from: 'Pastel.codes Contact Notifications', // This is ignored by Gmail
|
||||
to: TO_GMAIL_USER,
|
||||
subject: 'New message from contact form at pastel.codes',
|
||||
text: `${req.body.name} (${req.body.email}) says: ${req.body.message}`
|
||||
}
|
||||
|
||||
// maybe send conformation email?
|
||||
|
||||
// Attempt to send the email
|
||||
smtpTrans.sendMail(mailOpts, (error, response) => {
|
||||
if (error) {
|
||||
console.log(error)
|
||||
res.render('error', {message: "Email did not send"}) // Show a page indicating failure
|
||||
}
|
||||
else {
|
||||
res.render('contact-success') // Show a page indicating success
|
||||
}
|
||||
})
|
||||
} else {
|
||||
// rerender with same info in the text box and show error message
|
||||
res.render('contact', { title: 'Contact', description: "Contact me!", message: "Captcha failed, try again" });
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.log(error);
|
||||
res.render('contact', {title: 'Contact', description: "Contact me!", message: "Something wrong happened, try again later"});
|
||||
});
|
||||
})
|
||||
|
||||
/* GET home page. */
|
||||
router.get('/', function(req, res, next) {
|
||||
res.render('contact', { title: 'Contact', description: "Contact me!", message: null });
|
||||
});
|
||||
|
||||
module.exports = router;
|
||||
|
|
@ -17,7 +17,7 @@ block nav-links
|
|||
a.nav-link(href='https://blog.pastel.codes')
|
||||
span Blog
|
||||
li.nav-item
|
||||
a.nav-link(href='#')
|
||||
a.nav-link(href='/contact')
|
||||
span Contact
|
||||
|
||||
block content
|
||||
|
|
@ -29,7 +29,6 @@ block content
|
|||
span Hello.
|
||||
p I’m Esther, a 19 year old student in 2nd year of university, who studies computer science & artificial intelligence.
|
||||
p In my free time, I create small projects to learn new skills and for them to function well for others to use; additionally, I do some graphic design / art as a hobby but has helped me create catching designs.
|
||||
p I focus on developing secure, well designed, efficient programs.
|
||||
.row
|
||||
.col.start
|
||||
h1
|
||||
|
|
|
|||
|
|
@ -0,0 +1,4 @@
|
|||
extends layout
|
||||
|
||||
block content
|
||||
p fuck
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
extends layout
|
||||
|
||||
block content
|
||||
p yay
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
extends layout
|
||||
|
||||
block head
|
||||
script(src='https://hcaptcha.com/1/api.js' async='' defer='defer')
|
||||
|
||||
block nav-links
|
||||
li.nav-item.active
|
||||
a.nav-link(href='/')
|
||||
span Home
|
||||
li.nav-item
|
||||
a.nav-link(href='/about')
|
||||
span About
|
||||
li.nav-item
|
||||
a.nav-link(href='#')
|
||||
span CV
|
||||
li.nav-item
|
||||
a.nav-link(href='https://git.pastel.codes/Blankie')
|
||||
span Projects
|
||||
li.nav-item
|
||||
a.nav-link(href='https://blog.pastel.codes')
|
||||
span Blog
|
||||
li.nav-item
|
||||
a.nav-link(href='#')
|
||||
span Contact
|
||||
|
||||
block content
|
||||
.container
|
||||
form#contact-form(action='/contact' method='post' role='form')
|
||||
.form-group
|
||||
label(for='name') Name
|
||||
input#name(name='name' class="form-control" type='text' placeholder='Your name' required='')
|
||||
.form-group
|
||||
label(for='email') Email
|
||||
input#email(name='email' class="form-control" type='text' placeholder='Your email' required='')
|
||||
.form-group
|
||||
label(for='message') Message
|
||||
textarea#message(name='message' class="form-control" placeholder='Enter your message here' rows='3' required='')
|
||||
.h-captcha(data-sitekey='49abba50-1813-4ab3-acbf-2a8bfff1f7c3')
|
||||
button(type='submit' class="btn btn-primary") Submit
|
||||
if message
|
||||
#contact-error
|
||||
p=message
|
||||
|
|
@ -17,7 +17,7 @@ block nav-links
|
|||
a.nav-link(href='https://blog.pastel.codes')
|
||||
span Blog
|
||||
li.nav-item
|
||||
a.nav-link(href='#')
|
||||
a.nav-link(href='/contact')
|
||||
span Contact
|
||||
|
||||
block content
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ block nav-links
|
|||
a.nav-link(href='https://blog.pastel.codes')
|
||||
span Blog
|
||||
li.nav-item
|
||||
a.nav-link(href='#')
|
||||
a.nav-link(href='/contact')
|
||||
span Contact
|
||||
|
||||
block content
|
||||
|
|
|
|||
|
|
@ -13,6 +13,7 @@ html
|
|||
|
||||
link(rel='stylesheet', href='/stylesheets/bootstrap.css')
|
||||
link(rel='stylesheet', href='/stylesheets/style.css')
|
||||
block head
|
||||
body
|
||||
article
|
||||
header
|
||||
|
|
|
|||
Loading…
Reference in New Issue