gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix(email-auth): add disable and loading indication to button

Browse Source
This commit is contained in:
Mrugesh Mohapatra
2017-06-04 10:40:12 +05:30
committed by Berkeley Martinez
parent 5adff6a292
commit 4ae52983f6
1 changed files with 20 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
server/views/account/email-signin.jade
View File

@ -16,9 +16,9 @@ block content
form(method='POST', action='/passwordless-auth') form(method='POST', action='/passwordless-auth')
input(type='hidden', name='_csrf', value=_csrf) input(type='hidden', name='_csrf', value=_csrf)
.form-group .form-group
input.input-lg.form-control(type='email', name='email', id='email', placeholder='Email', autofocus=true) input.input-lg.form-control(type='email', name='email', id='email', placeholder='Email', autofocus=true, required)
.button-spacer .button-spacer
button.btn.btn-primary.btn-lg.btn-block(type='submit') button#magic-btn.btn.btn-primary.btn-lg.btn-block(type='submit')
span.fa.fa-envelope span.fa.fa-envelope
| Get a magic link to sign in. | Get a magic link to sign in.
.row .row
@ -27,17 +27,31 @@ block content
p.text-center p.text-center
| freeCodeCamp uses passwordless authentication. | freeCodeCamp uses passwordless authentication.
br br
| If you are a new camper just use any email, and sign up instantly, | Sign up instantly, using a valid email address, or Sign in
| or use your existing email with us, if you already have an account. | using your existing email with us, if you already have an account.
br br
p.text-center p.text-center
a(href="/signin") Or click here if you want to sign in with other options. a(href="/signin") Or click here if you want to sign in with other options.
script. script.
$(document).ready(function() { $(document).ready(function() {
function disableMagicButton (isDisabled) {
if (isDisabled) {
$('#magic-btn')
.html('<span class="fa fa-circle-o-notch fa-spin fa-fw"></span>')
.prop('disabled', true);
} else {
$('#magic-btn')
.html('<span class="fa.fa-envelope">Get a magic link to sign in.</span>')
.prop('disabled', false);
}
}
$('form').submit(function(event){ $('form').submit(function(event){
event.preventDefault(); event.preventDefault();
$('#flash-board').hide(); $('#flash-board').hide();
disableMagicButton(true);
var $form = $(event.target); var $form = $(event.target);
$.ajax({ $.ajax({
type : 'POST', type : 'POST',
@ -56,6 +70,7 @@ block content
.removeClass('alert-success') .removeClass('alert-success')
.addClass('alert-info') .addClass('alert-info')
.fadeIn(); .fadeIn();
disableMagicButton(false);
} }
}) })
.done(data =>{ .done(data =>{
@ -65,6 +80,7 @@ block content
.removeClass('alert-info') .removeClass('alert-info')
.addClass('alert-success') .addClass('alert-success')
.fadeIn(); .fadeIn();
disableMagicButton(false);
} }
}); });
}); });