Add redirect to user page on submit

client/main.js

@@ -1,12 +1,19 @@
-var mapShareKey = 'map-shares';
+var main = window.main || {};
+
+main.mapShareKey = 'map-shares';
+
 var lastCompleted = typeof lastCompleted !== 'undefined' ?
   lastCompleted :
   '';
 
 function getMapShares() {
-  var alreadyShared = JSON.parse(localStorage.getItem(mapShareKey) || '[]');
+  var alreadyShared = JSON.parse(
+    localStorage.getItem(main.mapShareKey) ||
+    '[]'
+  );
+
   if (!alreadyShared || !Array.isArray(alreadyShared)) {
-    localStorage.setItem(mapShareKey, JSON.stringify([]));
+    localStorage.setItem(main.mapShareKey, JSON.stringify([]));
     alreadyShared = [];
   }
   return alreadyShared;
@@ -23,7 +30,7 @@ function setMapShare(id) {
   if (!found) {
     alreadyShared.push(id);
   }
-  localStorage.setItem(mapShareKey, JSON.stringify(alreadyShared));
+  localStorage.setItem(main.mapShareKey, JSON.stringify(alreadyShared));
   return alreadyShared;
 }
 

server/boot/commit.js

@@ -1,9 +1,21 @@
+import dedent from 'dedent';
+import {
+  ifNoUserRedirectTo
+} from '../utils/middleware';
+
+const sendNonUserToFront = ifNoUserRedirectTo('/');
+
 export default function commit(app) {
   const router = app.loopback.Router();
   router.get(
     '/commit',
     commitToNonprofit
   );
+  router.get(
+    '/commit/pledge',
+    sendNonUserToFront,
+    pledge
+  );
 
   app.use(router);
 
@@ -12,4 +24,23 @@ export default function commit(app) {
       title: 'Commit to a nonprofit. Commit to your goal.'
     });
   }
+
+  function pledge(req, res) {
+    const { user } = req;
+    const {
+      nonprofit = 'girl develop it',
+      amount = '5',
+      goal = 'front end certification'
+    } = req.query;
+
+    req.flash('success', {
+      msg: dedent`
+        Congratulations, you have commit to giving ${nonprofit} ${amount}
+        dollars a month until you have reached your goal
+        of completing your ${goal}
+      `
+    });
+
+    res.redirect('/' + user.username);
+  }
 }

server/utils/middleware.js

@@ -1,8 +1,14 @@
-export function ifNoUserRedirectTo(url) {
+export function ifNoUserRedirectTo(url, message) {
   return function(req, res, next) {
+    const { path } = req;
     if (req.user) {
       return next();
     }
+
+    req.flash('errors', {
+      msg: message || `You must be signed to go to ${path}`
+    });
+
     return res.redirect(url);
   };
 }

server/views/commit/index.jade

@@ -13,16 +13,18 @@ block content
                         img.img-responsive(src='http://i.imgur.com/U1CyEuA.jpg' alt="Girl Develop It participants coding at tables.")
                         p Girl Develop It is a nonprofit that provides in-person classes for women to learn to code.
                 .spacer
-            form.form
+            form.form(name='commit')
+                .hidden
+                    input(type='text' value='girl develop it' name='nonprofit')
                 .row
                     .col-xs-12.col-sm-6.col-sm-offset-3
                         h4 Step 1: Choose your goal
                         .btn-group.btn-group-justified(data-toggle='buttons' role='group')
                             label.btn.btn-info.active
-                                input(type='radio' id='front-end-development-certificate' name='goal')
+                                input(type='radio' id='front-end-development-certificate' value='front end certification' name='goal' checked="checked")
                                 | Front End Development Certificate (takes about 400 hours)
                             label.btn.btn-info
-                                input(type='radio' id='full-stack-development-certificate' name='goal')
+                                input(type='radio' id='full-stack-development-certificate' value='full stack certification' name='goal')
                                 | Full Stack Development Certificate (takes about 800 hours)
                     .spacer
                 .row
@@ -30,19 +32,25 @@ block content
                         h4 Step 2: Choose how much you want to donate each month
                         .btn-group.btn-group-justified(data-toggle='buttons' role='group')
                             label.btn.btn-primary
-                                input(type='radio' id='5-dollar-pledge' name='pledge-amount')
+                                input(type='radio' id='5-dollar-pledge' value='5' name='amount')
                                 | $5 per month
                             label.btn.btn-primary.active
-                                input(type='radio' id='10-dollar-pledge' name='pledge-amount')
+                                input(type='radio' id='10-dollar-pledge' value='10' name='amount' checked="checked")
                                 | $10 per month
                             label.btn.btn-primary
-                                input(type='radio' id='50-dollar-pledge' name='pledge-amount')
+                                input(type='radio' id='50-dollar-pledge' value='50' name='amount')
                                 | $50 per month
                     .spacer
                 .row
                     .col-xs-12.col-sm-6.col-sm-offset-3
                         h4 Step 3: Commit
-                        a.btn.btn-block.btn-primary(href='https://www.girldevelopit.com/donate') Commit
+                        a#commit-btn-submit.btn.btn-block.btn-primary(href='https://www.girldevelopit.com/donate' target='_blank') Commit
                         .button-spacer
                         a.btn.btn-block.btn-warning(href='/') Maybe later
                         .spacer
+    script.
+      $(function() {
+        $('#commit-btn-submit').click(function() {
+          window.location.href = '/commit/pledge?' + $('form').serialize();
+        });
+      });

server/views/commit/pledge.jade

@@ -0,0 +1,15 @@
+extends ../layout
+block content
+    .panel.panel-info
+        .panel-body
+            h3.text-center You've commited!
+            .row
+                .col-xs-12.col-sm-6.col-sm-offset-3
+                  p Congratulations, you have commit to giving
+                    span(style='text-transform: capitalize')  #{nonprofit}
+                    |  #{amount} dollars a month until you have reached your goal
+                    |  of completing your #{goal}
+            .row
+                .col-xs-12.col-sm-6.col-sm-offset-3
+                  img.img-responsive(src='http://i.imgur.com/U1CyEuA.jpg' alt="Girl Develop It participants coding at tables.")
+                  p Girl Develop It is a nonprofit that provides in-person classes for women to learn to code.