diff --git a/client/less/main.less b/client/less/main.less index db9a804e05..bbf9249e6b 100644 --- a/client/less/main.less +++ b/client/less/main.less @@ -35,14 +35,46 @@ pre.wrappable { word-wrap: break-word; /* IE 5+ */ } -//input[type=checkbox] { -// /* Double-sized Checkboxes */ -// -ms-transform: scale(2); /* IE */ -// -moz-transform: scale(2); /* FF */ -// -webkit-transform: scale(2); /* Safari and Chrome */ -// -o-transform: scale(2); /* Opera */ -// padding: 10px; -//} +.checkbox label:after { + content: ''; + display: table; + clear: both; +} + +.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; diff --git a/server/boot/authentication.js b/server/boot/authentication.js index 100880e0a4..38ceaa63de 100644 --- a/server/boot/authentication.js +++ b/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('/logout', (req, res) => res.redirect(301, '/signout')); - router.get('/signup', (req, res) => res.redirect(301, '/signin')); - router.get('/email-signin', (req, res) => res.redirect(301, '/signin')); + router.get('/signup', (req, res) => res.redirect(301, '/login')); + router.get('/email-signin', (req, res) => res.redirect(301, '/login')); + router.get('/signin', (req, res) => res.redirect(301, '/login')); + 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('/'); }); diff --git a/server/views/account/email-signin.jade b/server/views/account/email-signin.jade index cf1fb37390..fee55113fd 100644 --- a/server/views/account/email-signin.jade +++ b/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#magic-btn.btn.btn-primary.btn-lg.btn-block(type='submit') - | Get a sign in link + .button-spacer + div.checkbox + 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('If you didn\'t get the email, check your spam folder, or reload the page to try again.'); } } - + + function disableMagicButtonForAgreement (isLaunched) { + if(isLaunched) { + $('#magic-btn') + .prop('disabled', true) + .html('Get a sign in link'); + return; + } else { + $('#magic-btn') + .prop('disabled', false) + .html('Get a sign in link'); + } + } + + disableMagicButtonForAgreement(true); + + $('#terms-privacy').click(function(){ + if(this.checked) { + disableMagicButtonForAgreement(false); + } else { + disableMagicButtonForAgreement(true); + } + }); + $('form').submit(function(event){ event.preventDefault(); $('#flash-board').hide();