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

fix: Re-enable button and add disable styles

Browse Source
This commit is contained in:
Mrugesh Mohapatra
2018-01-05 12:53:26 +05:30
parent 07ca7c4376
commit 7d2e9bc15e
1 changed files with 33 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -10,18 +10,17 @@ block content
#flash-content #flash-content
.row .row
.text-center .text-center
h2 Sign in or Sign Up with an Email h2 Sign in or Sign Up with an Email here:
.button-spacer .button-spacer
div#sign-in-form .col-sm-6.col-sm-offset-3
.col-sm-6.col-sm-offset-3
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, required) 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
.col-sm-6.col-sm-offset-3 .col-sm-6.col-sm-offset-3
br br
@ -36,12 +35,16 @@ block content
script. script.
$(document).ready(function() { $(document).ready(function() {
function disableMagicButton () { function disableMagicButton (isDisabled) {
var userEmail = $("input[name=email]").val(); if (isDisabled) {
$('#sign-in-form') $('#magic-btn')
.empty() .prop('disabled', true)
.html('<h3 class="text-center"> OK - we are sending a magic link to ' + userEmail + ' </h3>') .html('<span style="color:#E0E0E0;"><i class="fa fa-circle-o-notch fa-spin fa-fw"></i>Ok - We will attempt sending to the email above.</span>');
.fadeIn(100); } else {
$('#magic-btn')
.prop('disabled', true)
.html('<span style="color:#E0E0E0;">Did not get a link? Reload the page and resend again.</span>');
}
} }
$('form').submit(function(event){ $('form').submit(function(event){
@ -50,17 +53,17 @@ block content
disableMagicButton(true); disableMagicButton(true);
var $form = $(event.target); var $form = $(event.target);
$.ajax({ $.ajax({
type : 'POST', type : 'POST',
url : $form.attr('action'), url : $form.attr('action'),
data : $form.serialize(), data : $form.serialize(),
dataType : 'json', dataType : 'json',
encode : true, encode : true,
xhrFields : { withCredentials: true } xhrFields : { withCredentials: true }
}) })
.fail(error => { .fail(error => {
if (error.responseText){ if (error.responseText){
var data = JSON.parse(error.responseText); var data = JSON.parse(error.responseText);
if(data.error && data.error.message) if(data.error && data.error.message) {
$('#flash-content').html(data.error.message); $('#flash-content').html(data.error.message);
$('#flash-board') $('#flash-board')
.removeClass('alert-success') .removeClass('alert-success')
@ -68,9 +71,11 @@ block content
.slideDown(400) .slideDown(400)
.delay(800) .delay(800)
.fadeIn(); .fadeIn();
disableMagicButton(false);
} }
}
}) })
.done(data =>{ .done(data => {
if(data && data.message) { if(data && data.message) {
var alertType = 'alert-'; var alertType = 'alert-';
switch (data.type) { switch (data.type) {
@ -88,12 +93,13 @@ block content
} }
$('#flash-content').html(data.message); $('#flash-content').html(data.message);
$('#flash-board') $('#flash-board')
.removeClass('alert-info alert-success alert-danger') .removeClass('alert-info alert-success alert-danger')
.addClass(alertType) .addClass(alertType)
.slideDown(400) .slideDown(400)
.delay(800) .delay(800)
.fadeIn(); .fadeIn();
disableMagicButton(false);
} }
}); });
}); });
}); });