Creating contact page with captcha

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) {

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

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"
   }

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

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;

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

views/contact-failure.pug

@@ -0,0 +1,4 @@
+extends layout
+
+block content
+    p fuck

views/contact-success.pug

@@ -0,0 +1,4 @@
+extends layout
+
+block content
+    p yay

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

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

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

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