From f638cf4d8ba5fe63a92056c4a61d24ab80b82ed4 Mon Sep 17 00:00:00 2001 From: Esther Date: Mon, 29 Jun 2020 10:09:10 +0100 Subject: [PATCH] Creating contact page with captcha --- app.js | 2 ++ package-lock.json | 10 ++++++ package.json | 2 ++ pastel-codes.service | 4 +++ public/javascript/contact.js | 0 routes/contact.js | 65 ++++++++++++++++++++++++++++++++++++ views/about.pug | 3 +- views/contact-failure.pug | 4 +++ views/contact-success.pug | 4 +++ views/contact.pug | 42 +++++++++++++++++++++++ views/error.pug | 2 +- views/index.pug | 2 +- views/layout.pug | 1 + 13 files changed, 137 insertions(+), 4 deletions(-) create mode 100644 public/javascript/contact.js create mode 100644 routes/contact.js create mode 100644 views/contact-failure.pug create mode 100644 views/contact-success.pug create mode 100644 views/contact.pug diff --git a/app.js b/app.js index c08f35d..1e46232 100644 --- a/app.js +++ b/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) { diff --git a/package-lock.json b/package-lock.json index 2955e15..c2ff963 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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", diff --git a/package.json b/package.json index 7ec59ce..982715c 100644 --- a/package.json +++ b/package.json @@ -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" } diff --git a/pastel-codes.service b/pastel-codes.service index e75967e..e39b90a 100644 --- a/pastel-codes.service +++ b/pastel-codes.service @@ -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 diff --git a/public/javascript/contact.js b/public/javascript/contact.js new file mode 100644 index 0000000..e69de29 diff --git a/routes/contact.js b/routes/contact.js new file mode 100644 index 0000000..e263fd8 --- /dev/null +++ b/routes/contact.js @@ -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; diff --git a/views/about.pug b/views/about.pug index b084a90..6819067 100644 --- a/views/about.pug +++ b/views/about.pug @@ -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 diff --git a/views/contact-failure.pug b/views/contact-failure.pug new file mode 100644 index 0000000..711c469 --- /dev/null +++ b/views/contact-failure.pug @@ -0,0 +1,4 @@ +extends layout + +block content + p fuck \ No newline at end of file diff --git a/views/contact-success.pug b/views/contact-success.pug new file mode 100644 index 0000000..6dffe16 --- /dev/null +++ b/views/contact-success.pug @@ -0,0 +1,4 @@ +extends layout + +block content + p yay \ No newline at end of file diff --git a/views/contact.pug b/views/contact.pug new file mode 100644 index 0000000..c78b28d --- /dev/null +++ b/views/contact.pug @@ -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 diff --git a/views/error.pug b/views/error.pug index 9d2a4a1..ae4720c 100644 --- a/views/error.pug +++ b/views/error.pug @@ -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 diff --git a/views/index.pug b/views/index.pug index fe83307..9deeec3 100644 --- a/views/index.pug +++ b/views/index.pug @@ -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 diff --git a/views/layout.pug b/views/layout.pug index 3f9c381..cba1468 100644 --- a/views/layout.pug +++ b/views/layout.pug @@ -13,6 +13,7 @@ html link(rel='stylesheet', href='/stylesheets/bootstrap.css') link(rel='stylesheet', href='/stylesheets/style.css') + block head body article header