fix(sign-up): Add check boxes for confirm

client/less/main.less

@@ -35,14 +35,46 @@ pre.wrappable {
   word-wrap: break-word;      /* IE 5+ */
 }
 
-//input[type=checkbox] {
+.checkbox label:after {
-//  /* Double-sized Checkboxes */
+  content: '';
-//  -ms-transform: scale(2); /* IE */
+  display: table;
-//  -moz-transform: scale(2); /* FF */
+  clear: both;
-//  -webkit-transform: scale(2); /* Safari and Chrome */
+}
-//  -o-transform: scale(2); /* Opera */
+
-//  padding: 10px;
+.checkbox .cr {
-//}
+  position: relative;
+  display: inline-block;
+  border: 1px solid #a9a9a9;
+  border-radius: .25em;
+  width: 1.3em;
+  height: 1.3em;
+  float: left;
+  margin-right: .5em;
+}
+
+.checkbox .cr .cr-icon {
+  position: absolute;
+  font-size: .8em;
+  line-height: 0;
+  top: 50%;
+  left: 15%;
+}
+
+.checkbox label input[type="checkbox"] {
+  display: none;
+}
+
+.checkbox label input[type="checkbox"]+.cr>.cr-icon {
+  opacity: 0;
+}
+
+.checkbox label input[type="checkbox"]:checked+.cr>.cr-icon {
+  opacity: 1;
+}
+
+.checkbox label input[type="checkbox"]:disabled+.cr {
+  opacity: .5;
+}
 
 .btn-group {
   border-color: @brand-primary;

server/boot/authentication.js

@@ -29,10 +29,10 @@ module.exports = function enableAuthentication(app) {
   const api = app.loopback.Router();
   const { AuthToken, User } = app.models;
 
-  router.get('/login', (req, res) => res.redirect(301, '/signin'));
+  router.get('/signup', (req, res) => res.redirect(301, '/login'));
-  router.get('/logout', (req, res) => res.redirect(301, '/signout'));
+  router.get('/email-signin', (req, res) => res.redirect(301, '/login'));
-  router.get('/signup', (req, res) => res.redirect(301, '/signin'));
+  router.get('/signin', (req, res) => res.redirect(301, '/login'));
-  router.get('/email-signin', (req, res) => res.redirect(301, '/signin'));
+  router.get('/signout', (req, res) => res.redirect(301, '/logout'));
 
   function getEmailSignin(req, res) {
     if (isSignUpDisabled) {
@@ -45,9 +45,9 @@ module.exports = function enableAuthentication(app) {
     });
   }
 
-  router.get('/signin', ifUserRedirect, getEmailSignin);
+  router.get('/login', ifUserRedirect, getEmailSignin);
 
-  router.get('/signout', (req, res) => {
+  router.get('/logout', (req, res) => {
     req.logout();
     res.redirect('/');
   });

server/views/account/email-signin.jade

@@ -17,9 +17,26 @@ block content
                   input(type='hidden', name='_csrf', value=_csrf)
                   .form-group
                       input.input-lg.form-control(type='email', name='email', id='email', placeholder='Enter your email address', autofocus=true, required, oninvalid="this.setCustomValidity('Enter your email address')", oninput="setCustomValidity('')")
-                  .button-spacer
+                      .button-spacer
-                  button#magic-btn.btn.btn-primary.btn-lg.btn-block(type='submit')
+                      div.checkbox
-                    | Get a sign in link
+                        label
+                          input#terms-privacy(type='checkbox', name='terms-privacy', checked=false)
+                          span.cr
+                            i.cr-icon.fa.fa-check 
+                          | I accept the 
+                          a(href="/terms" target="_blank") Terms of Service 
+                          | and 
+                          a(href="/privacy" target="_blank") Privacy Policy 
+                          | (required)
+                      div.checkbox
+                        label
+                          input(type='checkbox', name='quincy-emails', checked=false)
+                          span.cr
+                            i.cr-icon.fa.fa-check 
+                          |  I want weekly emails from Quincy (freeCodeCamp.org's founder)
+                      .button-spacer
+                      button#magic-btn.btn.btn-primary.btn-lg.btn-block(type='submit')
+                        | Get a sign in link
         .row
           .col-sm-6.col-sm-offset-3
               br
@@ -30,7 +47,7 @@ block content
 
         script.
           $(document).ready(function() {
-            function disableMagicButton (isDisabled) {
+            function disableMagicButton (isDisabled, isLaunched) {
                 if (isDisabled) {
                   $('#magic-btn')
                     .prop('disabled', true)
@@ -41,7 +58,30 @@ block content
                     .html('<span style="color:#E0E0E0;">If you didn\'t get the email, check your spam folder, or reload the page to try again.</span>');
                 }
             }
-
+            
+            function disableMagicButtonForAgreement (isLaunched) {
+              if(isLaunched) {
+                $('#magic-btn')
+                  .prop('disabled', true)
+                  .html('<span style="color:#E0E0E0;">Get a sign in link</span>');
+                return;
+              } else {
+              $('#magic-btn')
+                .prop('disabled', false)
+                .html('<span>Get a sign in link</span>');
+              }
+            }
+            
+            disableMagicButtonForAgreement(true);
+            
+            $('#terms-privacy').click(function(){
+              if(this.checked) {
+                disableMagicButtonForAgreement(false);
+              } else {
+                disableMagicButtonForAgreement(true);
+              }
+            });
+            
             $('form').submit(function(event){
               event.preventDefault();
               $('#flash-board').hide();