observe-to-email

git clone git://git.codymlewis.com/observe-to-email.git
Log | Files | Refs | README

commit 71b424781515ca11aa5baa204f12708b15f33fa1
parent a3a464dfbea317477b9daca58fb3bba92ee00861
Author: Cody Lewis <luxdotsugi@gmail.com>
Date:   Sat,  8 Sep 2018 20:13:23 +1000

Got a working form with latex submission

Diffstat:
Mpackage-lock.json | 10++++++++++
Mpackage.json | 4+++-
Mroutes/index.js | 52+++++++++++++++++++++++++++++++++++++++++++++++++++-
Mviews/error.dust | 25++++++++++++++++++++++---
Mviews/index.dust | 37++++++++++++++++++++++++++++++++-----
Aviews/success.dust | 33+++++++++++++++++++++++++++++++++
6 files changed, 151 insertions(+), 10 deletions(-)

diff --git a/package-lock.json b/package-lock.json @@ -402,6 +402,11 @@ "for-in": "^1.0.1" } }, + "formidable": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/formidable/-/formidable-1.2.1.tgz", + "integrity": "sha512-Fs9VRguL0gqGHkXS5GQiMCr1VhZBxz0JnJs4JmMp/2jL18Fmbzvv7vOFRU+U8TBkHEE/CX1qDXzJplVULgsLeg==" + }, "forwarded": { "version": "0.1.2", "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.1.2.tgz", @@ -1142,6 +1147,11 @@ "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.1.tgz", "integrity": "sha1-KzJxhOiZIQEXeyhWP7XnECrNDKk=" }, + "nodemailer": { + "version": "4.6.8", + "resolved": "https://registry.npmjs.org/nodemailer/-/nodemailer-4.6.8.tgz", + "integrity": "sha512-A3s7EM/426OBIZbLHXq2KkgvmKbn2Xga4m4G+ZUA4IaZvG8PcZXrFh+2E4VaS2o+emhuUVRnzKN2YmpkXQ9qwA==" + }, "normalize-path": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-2.1.1.tgz", diff --git a/package.json b/package.json @@ -10,7 +10,9 @@ "cookie-parser": "~1.4.3", "debug": "~2.6.9", "express": "~4.16.0", + "formidable": "^1.2.1", "http-errors": "~1.6.2", - "morgan": "~1.9.0" + "morgan": "~1.9.0", + "nodemailer": "^4.6.8" } } diff --git a/routes/index.js b/routes/index.js @@ -1,9 +1,59 @@ var express = require('express'); var router = express.Router(); +var formidable = require('formidable'); /* GET home page. */ router.get('/', function(req, res, next) { - res.render('index', { title: 'HLA9000 - Observations' }); + res.render('index', { title: 'HLA9000 - Observations' }); }); +router.get('/observe', function(req, res, next) { + res.redirect('/'); +}); + +router.post('/observe', function(req, res, next) { + var nodemailer = require('nodemailer'); + var form = new formidable.IncomingForm(); + form.parse(req, function (err, fields, files) { + var today = new Date(); + var photo = files.photo.path; + msg = '\\subsubsection{Test from ' + today.toDateString() + '}\n' + + '\\begin{center}\n\\begin{tabular}{| c | c |}\n\\hline\n' + + '\ninterface type & ' + fields.interface + + '\\\\\\hline\ntime taken & ' + fields.time + 'mins' + + '\\\\\\hline\nThe tester felt & ' + fields.expression + + '\\\\\\hline\nThe tester thought the system would be useful for & ' + fields.testerAction + + '\\\\\\hline\nThe tester commented & ' + fields.testerComment + + '\\\\\\hline\nOther observations & ' + fields.otherComment + + '\\\\\n\\hline\n\\end{tabular}\n\\end{center}'; + var transporter = nodemailer.createTransport({ + service: 'gmail', + auth: { + user: 'seng2260efg@gmail.com', + pass: 'seng2260hla9000' + } + }); + var mailOptions = { + from: 'seng2260efg@gmail.com', + to: 'seng2260efg@gmail.com', + subject: 'HLA9000 - Observations: ' + today.toDateString(), + text: msg, + attachments: [{ + path: photo, + contentType: "image/png" + }] + }; + transporter.sendMail(mailOptions, function(error, info){ + if (error) { + console.log(error); + } else { + console.log('Email sent: ' + info.response); + } + }); + }); + res.redirect('/success'); +}); +router.get('/success', function(req, res, next) { + res.render('success', { title: 'HLA9000 - Success' }); +}); module.exports = router; diff --git a/views/error.dust b/views/error.dust @@ -2,11 +2,30 @@ <html> <head> <title>{title}</title> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <!-- Latest compiled and minified CSS --> + <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> + + <!-- jQuery library --> + <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> + + <!-- Popper JS --> + <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> + + <!-- Latest compiled JavaScript --> + <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> + <link rel='stylesheet' href='/stylesheets/style.css' /> </head> <body> - <h1>{message}</h1> - <h2>{error.status}</h2> - <pre>{error.stack}</pre> + <div class="container bg-light"> + <div class="container"> + <h1 class="text-center">{message}</h1> + <h2>{error.status}</h2> + <pre>{error.stack}</pre> + </div> + </div> + </body> </html> diff --git a/views/index.dust b/views/index.dust @@ -20,12 +20,24 @@ <body> <div class="container bg-light"> <div class="container"> - <h1 class="display-5 text-center">{title}</h1> + <h1 class="text-center">{title}</h1> <p>Please enter the usability observations below</p> - <form action="/"> + <form action="/observe" method="post" enctype="multipart/form-data"> + <div class="form-group"> + <label for="interface">Interface type:</label> + <div class="custom-control custom-radio"> + <input type="radio" class="custom-control-input" id="va" name="interface" value="virtual assistant"> + <label for="va" class="custom-control-label">Virtual Assistant</label> + </div> + <div class="custom-control custom-radio"> + <input type="radio" class="custom-control-input" id="cb" + name="interface" value="card based (desktop-like)"> + <label for="cb" class="custom-control-label">Card based (desktop-like)</label> + </div> + </div> <div class="form-group"> <label for="time">How long did it take? (in minutes)</label> - <input type="number" class="form-control" id="time" class="time"> + <input type="number" class="form-control" id="time" name="time"> </div> <div class="form-group"> <label for="expression">How did the tester seem to feel?</label> @@ -40,13 +52,28 @@ </select> </div> <div class="form-group"> + <label for="tester-action">What did the tester think the system could be used for?</label> + <input type="text" class="form-control" id="tester-action" name="testerAction"> + </div> + <div class="form-group"> <label for="tester-comment">Tester's Comments:</label> - <textarea class="form-control" rows="5" id="tester-comment" name="tester-comment"></textarea> + <textarea class="form-control" rows="5" id="tester-comment" name="testerComment"></textarea> </div> <div class="form-group"> <label for="other-comment">Other observations:</label> - <textarea class="form-control" rows="5" id="other-comment" name="other-comment"></textarea> + <textarea class="form-control" rows="5" id="other-comment" name="otherComment"></textarea> </div> + <p>Add a photo: </p> + <div class="form-group container"> + <div class="container"> + <input type="file" id="photo" name="photo"> + </div> + </div> + <div class="form-group"> + <button type="submit" class="btn btn-success">Submit</button> + <button type="reset" class="btn btn-danger float-right">Reset</button> + </div> + </form> </div> </div> diff --git a/views/success.dust b/views/success.dust @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + <title>{title}</title> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <!-- Latest compiled and minified CSS --> + <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> + + <!-- jQuery library --> + <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> + + <!-- Popper JS --> + <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> + + <!-- Latest compiled JavaScript --> + <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> + <link rel='stylesheet' href='/stylesheets/style.css' /> + </head> + <body> + <div class="container bg-light"> + <div class="container"> + <h1 class="text-center">{title}</h1> + <h3 class="text-success">Successfully sent the form!</h3> + <div class="text-center"> + <a href="/"> + <button class="btn btn-primary">Start a new form</button> + </a> + </div> + </div> + </div> + </body> +</html>