Major cleanup.

README.md

@@ -10,25 +10,22 @@ Also, here's a [list of bots](https://github.com/botwiki/botmakers.org/blob/mast
 
 # Auto-invite page for your Slack community
 
-This repo also serves as a template for a neat-looking auto-invite page for your Slack community. It is loosely based on [outsideris/slack-invite-automation](https://github.com/outsideris/slack-invite-automation), but kept simpler and easier to customize. You can easily host it on [OpenShift](https://www.openshift.com/) or [Heroku](https://www.heroku.com/).
-
-Note: the code could use a bit more cleanup, but I was in a rush to open the Botmakers community :-)
+This repo also serves as a template for a neat-looking auto-invite page for your Slack community. It is loosely based on [outsideris/slack-invite-automation](https://github.com/outsideris/slack-invite-automation), but kept simpler and easier to customize. You can easily host it on [OpenShift](https://www.openshift.com/) or [Heroku](https://www.heroku.com/), or check out the [Glitch version](https://glitch.com/edit/#!/slack-invite).
 
 Running this thing is pretty simple:
 
 0. Clone this repo.
 1. Make a copy of `config-example.js` and call it `config.js`.
 2. Edit 'config.js':
  1. `community`: name of your community
- 2. `slackUrl`: URL of your community
- 3. `slacktoken`: get yours [here](https://api.slack.com/web#auth)
+ 2. `slack_url`: URL of your community
+ 3. `slack_token`: get yours [here](https://api.slack.com/custom-integrations/legacy-tokens)
 3. Make a copy of `visitor_stats-example.handlebars` (it's inside the `views/partials` folder) and call it `visitor_stats.handlebars`. Here you can paste your Google Analytics or StatCounter (or similar) code.
 4. Install dependencies with `npm install` (or `sudo npm install`, if necessary).
 5. I recommend using [pm2](https://github.com/Unitech/pm2) to run the app on your server.
 
 Enjoy!
 
-
 A few more notes:
 
 About the **step 3** above: If you don't need to include this code, you can simply leave the file empty, but note that this file is by deafult not going to be committed, so you will have to either update `.gitignore` to remove the file from the list, or, if you want to keep your site's code open, upload this file separately.
@@ -37,9 +34,6 @@ You can also edit the file `main/handlebars` inside the `views/layouts` folder a
 
 As for hosting your signup page on Heroku, note that Heroku's free plan [forces your app to sleep for a few hours every day](https://www.heroku.com/pricing), so I don't recommend using Heroku if you expect a lot of traffic spread roughly evenly throughout the day, as you might lose signups.
 
-And finally, you might also want to update the [error messages](https://github.com/botwiki/botmakers.org/blob/master/botmakers.js#L49) to include your email/link to your Twitter page/etc.
-
-
 If you want to develop this app, you can run `gulp.js`. The app will run at `http://localhost:3011/`, and there is a proxy at `http://localhost:4000/` that has code hot swapping (changes to the styles or script files are immediately visible without reloading the page).
 
 Note that you might need to reload the page if it gets stuck loading after you run `gulp` the first time. `/shrug`

config-example.js

@@ -1,5 +1,7 @@
 module.exports = {
-  community: 'COMMUNITY',
-  slackUrl: 'COMMUNITY.slack.com',
-  slacktoken: 'TOKEN'
+  community_name: 'Community',
+  community_description: 'A brief description',
+  contact: '[email protected]',
+  slack_url: 'https://community.slack.com',
+  slack_token: 'secretstuff1234'
 };

public/css/styles.1.20.css → public/css/styles.1.21.css

@@ -11,32 +11,20 @@ body {
   color: #525252;
   font-size: 1.2em;
   margin: 0;
-  min-height: 100%;
   height: 100%;
 }
 body {
   background: url('../images/background/geometry-alt.png');
+  position: relative;
+  padding-bottom: 20em;
+  min-height: 100%;
 }
 header,
 section,
 footer {
   width: 95%;
   margin: 0 auto;
 }
-section#content {
-  min-height: 100%;
-  background-color: #fff;
-}
-@media (min-width: 1200px) {
-  section#content {
-    padding: 1em 2em;
-  }
-}
-section#content div#content-inner {
-  max-width: 1200px;
-  margin-right: auto;
-  margin-left: auto;
-}
 @media (min-width: 800px) {
   header p {
     text-align: justify;
@@ -46,18 +34,29 @@ section {
   font-weight: bold;
   min-height: 100%;
   margin: 0 auto;
-  padding: 0;
+  position: relative;
+  padding: 0 0 15em;
   border-left: 1px solid #ececec;
   border-right: 1px solid #ececec;
 }
+section#content {
+  min-height: 100vh;
+  background-color: #fff;
+  position: relative;
+}
+section#content div#content-inner {
+  max-width: 1200px;
+  margin-right: auto;
+  margin-left: auto;
+}
 form,
 p {
   padding: 0.5rem 1rem;
-  margin: 2em 0;
+  margin: 1em 0;
 }
 form {
   max-width: 960px;
-  margin: 0 auto 4em;
+  margin: 4em auto 6em;
   content: "";
   display: block;
   clear: both;
@@ -138,6 +137,11 @@ twitterwidget {
   margin: 2em auto !important;
 }
 footer {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  padding: 1rem;
   border-top: 3px dashed #ececec;
   font-size: 0.8em;
   font-weight: normal;
@@ -151,7 +155,7 @@ footer {
 }
 img.logo {
   display: block;
-  margin: 0 auto;
+  margin: 0 auto -1em;
   width: 20%;
   max-width: 600px;
 }

public/js/scripts.1.1.js

@@ -1,4 +1,4 @@
-"strict";
+"use strict";
 
 function ready(fn) {
   if (document.readyState !== 'loading'){

src/scripts/scripts.1.1.js → public/js/scripts.1.2.js

@@ -1,4 +1,4 @@
-"strict";
+"use strict";
 
 function ready(fn) {
   if (document.readyState !== 'loading'){

server.js

@@ -5,7 +5,14 @@ var express = require('express'),
     bodyParser = require('body-parser'),
     app = express(),
     server = http.Server(app),
-    config = require('./config.js');
+    config = require('./config.js'),
+    community_info = {
+      community_name: config.community_name,
+      community_description: config.community_description,
+      slack_url: config.slack_url,
+      contact: config.contact
+    };
+
 
 var loggingEnabled = false;
 
@@ -26,43 +33,37 @@ app.get('/', function (req, res) {
 app.post('/invite', function(req, res) {
   if (req.body.email) {
     request.post({
-        url: 'https://'+ config.slackUrl + '/api/users.admin.invite',
+        url: config.slack_url + '/api/users.admin.invite',
         form: {
           email: req.body.email,
-          token: config.slacktoken,
+          token: config.slack_token,
           set_active: true
         }
       }, function(err, httpResponse, body) {
         if (err) { return res.send('Error:' + err); }
         body = JSON.parse(body);
         if (body.ok) {
-          res.render('done', {
-            header: 'Success!',
-            message: 'Check <em>'+ req.body.email +'</em> for an invite from Slack! If you have any questions, feel free to reach out to <a href="mailto:[email protected]">[email protected]</a> (or <a href="https://twitter.com/fourtonfish">@fourtonfish</a> on Twitter).</p><p class="shifted">Looking forward to seeing you in our community :-)'
-          });
+          community_info.user_email = req.body.email;
+          res.render('success', community_info);
         } else {
           var error_message = body.error;
 
           switch(error_message){
             case 'already_invited':
             case 'sent_recently':
-              error_message = 'Looks like you were already invited. Please check your inbox again. If you didn\'t get your invitation, please contact <a href="mailto:[email protected]">[email protected]</a> or <a href="https://twitter.com/fourtonfish">@fourtonfish</a> on Twitter.<br/>Thanks!';
-            break;
+              res.render('recently-invited', community_info);
+              break;
             case 'already_in_team':
-              error_message = 'Good news, you are already a member! <a href="https://botmakers.slack.com/">Click here</a> to sign in. If you\'re having a problem, please contact <a href="mailto:[email protected]">[email protected]</a> or <a href="https://twitter.com/fourtonfish">@fourtonfish</a> on Twitter.<br/>Thanks!';
-            break;
+              res.render('already-member', community_info);
+              break;
             case 'invalid_email':
-              error_message = 'That email doesn\'t look quite right. Mind going back and trying again?';
+              res.render('invalid-email', community_info);
             break;            
             default:
-              error_message = 'Looks like an unhandled error. Can you contact <a href="mailto:[email protected]">[email protected]</a> or <a href="https://twitter.com/fourtonfish">@fourtonfish</a> on Twitter and say you got this error message? Thanks!<br/><tt>' + error_message + '</tt>';
+              community_info.error_message = error_message;
+              res.render('invalid-email', community_info);
             break;
           }
-
-          res.render('done', {
-            header: 'Oops.',
-            message: error_message
-          });
         }
       });
   } else {

src/scripts/scripts.1.2.js

@@ -0,0 +1,23 @@
+"use strict";
+
+function ready(fn) {
+  if (document.readyState !== 'loading'){
+    fn();
+  } else {
+    document.addEventListener('DOMContentLoaded', fn);
+  }
+}
+
+ready(function(){
+  var shiftedEls = document.getElementsByClassName('shifted');
+  if (shiftedEls.length > 0){
+    Array.prototype.forEach.call(shiftedEls, function(el, index) {
+      setTimeout(
+        function(){
+          el.classList.remove('shifted');
+          el.classList.add('unshifted');
+        },
+        55*index*index);
+    });
+  }
+});