Start on Slack form

.gitignore

@@ -8,4 +8,6 @@ dist/*
 *.hbs
 partials/*
 !src/**/*.hbs
-assets/*
+assets/*
+
+slackConfig.js

README.md

@@ -4,6 +4,8 @@
 
 ### Getting Started
 
+Make sure you have [Node.js]() installed.
+
 Clone the repo using `git clone` or by clicking the *Download ZIP* button to the right.
 
 ```sh
@@ -22,6 +24,12 @@ Install all dependencies using npm:
 npm install
 ```
 
+Run the start command (make sure you run this before `gulp`, otherwise you will run into errors):
+
+```sh
+npm start
+```
+
 Run the default Gulp task to get started:
 
 ```sh

app.js

@@ -0,0 +1,54 @@
+var express = require('express');
+var path = require('path');
+var cookieParser = require('cookie-parser');
+var bodyParser = require('body-parser');
+
+var routes = require('./routes/slack');
+
+var app = express();
+
+// view engine setup
+app.set('views', path.join(__dirname, 'dist'));
+app.set('view engine', 'ejs');
+app.engine('html', require('ejs').renderFile);
+
+app.use(bodyParser.json());
+app.use(bodyParser.urlencoded({ extended: false }));
+app.use(cookieParser());
+app.use(express.static(path.join(__dirname, 'dist')));
+
+app.use('/', routes);
+
+// catch 404 and forward to error handler
+app.use(function(req, res, next) {
+  var err = new Error('Not Found');
+  err.status = 404;
+  next(err);
+});
+
+// error handlers
+
+// development error handler
+// will print stacktrace
+if (app.get('env') === 'development') {
+  app.use(function(err, req, res, next) {
+    res.status(err.status || 500);
+    res.render('error', {
+      message: err.message,
+      error: err
+    });
+  });
+}
+
+// production error handler
+// no stacktraces leaked to user
+app.use(function(err, req, res, next) {
+  res.status(err.status || 500);
+  res.render('error', {
+    message: err.message,
+    error: {}
+  });
+});
+
+
+module.exports = app;

bin/www

@@ -0,0 +1,62 @@
+#!/usr/bin/env node
+
+/**
+ * Module dependencies.
+ */
+
+var app = require('../app');
+var debug = require('debug')('slack-invite-automation:server');
+var http = require('http');
+
+/**
+ * Get port from environment and store in Express.
+ */
+
+var port = parseInt(process.env.PORT, 10) || 3000;
+app.set('port', port);
+
+/**
+ * Create HTTP server.
+ */
+
+var server = http.createServer(app);
+
+/**
+ * Listen on provided port, on all network interfaces.
+ */
+
+server.listen(port);
+server.on('error', onError);
+server.on('listening', onListening);
+
+/**
+ * Event listener for HTTP server "error" event.
+ */
+
+function onError(error) {
+  if (error.syscall !== 'listen') {
+    throw error;
+  }
+
+  // handle specific listen errors with friendly messages
+  switch (error.code) {
+    case 'EACCES':
+      console.error('Port ' + port + ' requires elevated privileges');
+      process.exit(1);
+      break;
+    case 'EADDRINUSE':
+      console.error('Port ' + port + ' is already in use');
+      process.exit(1);
+      break;
+    default:
+      throw error;
+  }
+}
+
+/**
+ * Event listener for HTTP server "listening" event.
+ */
+
+function onListening() {
+  debug('Listening on port ' + server.address().port);
+}

gulpfile.js

@@ -89,19 +89,19 @@ gulp.task('clean:images', function(a) {
 });
 
 gulp.task('files', function() {
-  gulp.src(['src/*.{html,txt}'])
+  gulp.src(['src/*.{html,txt,ejs}'])
     .pipe(gulp.dest(dist));
 });
 
 gulp.task('clean:files', function(a) {
-  del([dist + '/*.{html,txt}'], a);
+  del([dist + '/*.{html,txt,ejs}'], a);
 });
 
 gulp.task('watch', function() {
   gulp.watch('src/scss/**/*.scss', ['styles']);
   gulp.watch('src/js/**/*.js', ['scripts']);
   gulp.watch('src/**/*.hbs', ['templates']);
-  gulp.watch('src/*.{html,txt}', ['clean:files', 'files']);
+  gulp.watch('src/*.{html,txt,ejs}', ['clean:files', 'files']);
   gulp.watch('src/images/**/*.{jpg,jpeg,svg,png,gif}', ['clean:images', 'images']);
 });
 

package.json

@@ -2,6 +2,9 @@
   "name": "SecretHandshake",
   "version": "1.0.0",
   "description": "Secret Handshake meetup website.",
+  "scripts": {
+    "start": "node ./bin/www"
+  },
   "devDependencies": {
     "browser-sync": "^2.7.1",
     "del": "^1.2.0",
@@ -15,5 +18,13 @@
     "gulp-sass-bulk-import": "^0.3.1",
     "gulp-uglify": "^1.2.0",
     "gulp-util": "^3.0.4"
+  },
+  "dependencies": {
+    "body-parser": "^1.13.2",
+    "cookie-parser": "^1.3.5",
+    "debug": "^2.2.0",
+    "ejs": "^2.3.3",
+    "express": "^4.13.1",
+    "request": "^2.60.0"
   }
 }

routes/slack.js

@@ -0,0 +1,37 @@
+var express = require('express');
+var router = express.Router();
+var request = require('request');
+var config = require('../slackConfig');
+
+router.get('/', function(req, res) {
+  res.render('index');
+});
+
+router.post('/invite', function(req, res) {
+  if (req.body.email) {
+    request.post({
+        url: 'https://'+ config.slackUrl + '/api/users.admin.invite',
+        form: {
+          email: req.body.email,
+          token: config.slacktoken,
+          set_active: true
+        }
+      }, function(err, httpResponse, body) {
+        if (err) return res.send('Error:' + err);
+
+        body = JSON.parse(body);
+
+        console.log(body);
+
+        if (body.ok) {
+          res.send('Success! Check "'+ req.body.email +'" for an invite from Slack.');
+        } else {
+          res.send('Failed! ' + body.error);
+        }
+      });
+  } else {
+    res.status(400).send('email is required.');
+  }
+});
+
+module.exports = router;

src/error.ejs

@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Secret Handshake</title>
+    <meta name="viewport" content="width=device-width">
+    <meta name="description" content="">
+    <meta name="keywords" content="">
+
+    <meta property="og:description" content="">
+    <meta property="og:site_name" content="">
+    <meta property="og:title" content="">
+    <meta property="og:type" content="website">
+    <meta property="og:url" content="">
+
+    <meta name="twitter:card" content="summary">
+    <meta name="twitter:site" content="">
+    <meta name="twitter:title" content="">
+    <meta name="twitter:description" content="">
+    <meta name="twitter:domain" content="">
+
+    <!-- Favicons -->
+    <link rel="shortcut icon" href="">
+    <link rel="apple-touch-icon" href="" sizes="120x120">
+
+    <script src="//use.typekit.net/hwg1smq.js"></script>
+    <script>try{Typekit.load();}catch(e){}</script>
+
+    <!-- Stylesheets -->
+    <link rel="stylesheet" href="css/main.css">
+  </head>
+  <body>
+
+    <section id="not-found" class="sec">
+      <div class="inner">
+        <a href="/">
+          <h1><%= error.status %></h1>
+          <div class="seven columns cat"></div>
+        </a>
+      </div>
+    </section>
+    <footer id="main-footer" class="sec">
+      <div class="inner">
+        <div class="row">
+          <div class="eight columns center">
+            <ul class="social">
+              <li><a href="https://twitter.com/SHWPG" title="Secret Handshake on Twitter">Twitter</a></li>
+              <li><a href="https://www.facebook.com/secret.handshake.winnipeg" title="Secret Handshake on Facebook">Facebook</a></li>
+            </ul>
+            <div class="copyright">Copyright &copy; 2015 Secret Handshake. All rights reserved.</div>
+            <div class="sponsor">Secret Handshake is graciously supported by <a href="https://newmediamanitoba.com" title="New Media Manitoba">New Media Manitoba.</a></div>
+          </div>
+        </div>
+      </div>
+    </footer>
+    <script src="js/libs/jquery.min.js"></script>
+
+    <script src="js/bundle.js"></script>
+  </body>
+</html>
+

src/index.hbs

@@ -89,15 +89,14 @@
   </div>
 </section>
 
-<section id="email-signup">
+<section id="slack">
   <div class="inner">
     <div class="seven columns offset-by-four">
-      <h3>Email Newsletter</h3>
-      <div>Sign-up for exclusive offerings and shit.</div>
-      <form>
-        <input type="text" placeholder="Name" class="five columns">
-        <input type="email" placeholder="Email" class="five columns">
-        <input type="submit" value="&rarr;" class="two columns">
+      <h3>Slack Chat</h3>
+      <div>Add your email to reveive an invite to our Slack group.</div>
+      <form method="post" action="/invite">
+        <input type="email" name="email" placeholder="Email" class="nine columns">
+        <input type="submit" value="Send" class="three columns">
 
         <!-- div class="error">Please enter your email.</div -->
       </form>

src/scss/pages/home/email-signup.scss → src/scss/pages/home/slack.scss

@@ -1,4 +1,4 @@
-#email-signup {
+#slack {
   position: relative;
   margin-top: - ws(xx-large);
   z-index: 9;