From 07ca7c4376ece6a4d008a2fb5f42bf8bab654e0a Mon Sep 17 00:00:00 2001 From: Mrugesh Mohapatra Date: Thu, 4 Jan 2018 23:21:26 +0530 Subject: [PATCH 1/2] fix(sign-in): Adds a feedback on sign-in request Closes #16266 --- server/views/account/email-signin.jade | 36 ++++++++++++-------------- 1 file changed, 17 insertions(+), 19 deletions(-) diff --git a/server/views/account/email-signin.jade b/server/views/account/email-signin.jade index cb965ee7d0..ed1578a169 100644 --- a/server/views/account/email-signin.jade +++ b/server/views/account/email-signin.jade @@ -10,17 +10,18 @@ block content #flash-content .row .text-center - h2 Sign in or Sign Up with an Email here: + h2 Sign in or Sign Up with an Email .button-spacer - .col-sm-6.col-sm-offset-3 + div#sign-in-form + .col-sm-6.col-sm-offset-3 form(method='POST', action='/passwordless-auth') input(type='hidden', name='_csrf', value=_csrf) .form-group input.input-lg.form-control(type='email', name='email', id='email', placeholder='Email', autofocus=true, required) .button-spacer - button#magic-btn.btn.btn-primary.btn-lg.btn-block(type='submit') - span.fa.fa-envelope - | Get a magic link to sign in. + button.btn.btn-primary.btn-lg.btn-block(type='submit') + span.fa.fa-envelope + | Get a magic link to sign in. .row .col-sm-6.col-sm-offset-3 br @@ -34,18 +35,13 @@ block content a(href="/deprecated-signin") Or click here if you want to sign in with other options. script. - $(document).ready(function() { - - function disableMagicButton (isDisabled) { - if (isDisabled) { - $('#magic-btn') - .html('') - .prop('disabled', true); - } else { - $('#magic-btn') - .html('Get a magic link to sign in.') - .prop('disabled', false); - } + $(document).ready(function() { + function disableMagicButton () { + var userEmail = $("input[name=email]").val(); + $('#sign-in-form') + .empty() + .html('

OK - we are sending a magic link to ' + userEmail + '

') + .fadeIn(100); } $('form').submit(function(event){ @@ -69,8 +65,9 @@ block content $('#flash-board') .removeClass('alert-success') .addClass('alert-info') + .slideDown(400) + .delay(800) .fadeIn(); - disableMagicButton(false); } }) .done(data =>{ @@ -93,8 +90,9 @@ block content $('#flash-board') .removeClass('alert-info alert-success alert-danger') .addClass(alertType) + .slideDown(400) + .delay(800) .fadeIn(); - disableMagicButton(false); } }); }); From 7d2e9bc15e6f2995122da013e00f43ac9549bc4b Mon Sep 17 00:00:00 2001 From: Mrugesh Mohapatra Date: Fri, 5 Jan 2018 12:53:26 +0530 Subject: [PATCH 2/2] fix: Re-enable button and add disable styles --- server/views/account/email-signin.jade | 60 ++++++++++++++------------ 1 file changed, 33 insertions(+), 27 deletions(-) diff --git a/server/views/account/email-signin.jade b/server/views/account/email-signin.jade index ed1578a169..d3a11c3b8a 100644 --- a/server/views/account/email-signin.jade +++ b/server/views/account/email-signin.jade @@ -10,18 +10,17 @@ block content #flash-content .row .text-center - h2 Sign in or Sign Up with an Email + h2 Sign in or Sign Up with an Email here: .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') input(type='hidden', name='_csrf', value=_csrf) .form-group input.input-lg.form-control(type='email', name='email', id='email', placeholder='Email', autofocus=true, required) .button-spacer - button.btn.btn-primary.btn-lg.btn-block(type='submit') - span.fa.fa-envelope - | Get a magic link to sign in. + button#magic-btn.btn.btn-primary.btn-lg.btn-block(type='submit') + span.fa.fa-envelope + | Get a magic link to sign in. .row .col-sm-6.col-sm-offset-3 br @@ -36,12 +35,16 @@ block content script. $(document).ready(function() { - function disableMagicButton () { - var userEmail = $("input[name=email]").val(); - $('#sign-in-form') - .empty() - .html('

OK - we are sending a magic link to ' + userEmail + '

') - .fadeIn(100); + function disableMagicButton (isDisabled) { + if (isDisabled) { + $('#magic-btn') + .prop('disabled', true) + .html('Ok - We will attempt sending to the email above.'); + } else { + $('#magic-btn') + .prop('disabled', true) + .html('Did not get a link? Reload the page and resend again.'); + } } $('form').submit(function(event){ @@ -50,17 +53,17 @@ block content disableMagicButton(true); var $form = $(event.target); $.ajax({ - type : 'POST', - url : $form.attr('action'), - data : $form.serialize(), - dataType : 'json', - encode : true, - xhrFields : { withCredentials: true } + type : 'POST', + url : $form.attr('action'), + data : $form.serialize(), + dataType : 'json', + encode : true, + xhrFields : { withCredentials: true } }) .fail(error => { if (error.responseText){ - var data = JSON.parse(error.responseText); - if(data.error && data.error.message) + var data = JSON.parse(error.responseText); + if(data.error && data.error.message) { $('#flash-content').html(data.error.message); $('#flash-board') .removeClass('alert-success') @@ -68,9 +71,11 @@ block content .slideDown(400) .delay(800) .fadeIn(); + disableMagicButton(false); } + } }) - .done(data =>{ + .done(data => { if(data && data.message) { var alertType = 'alert-'; switch (data.type) { @@ -88,12 +93,13 @@ block content } $('#flash-content').html(data.message); $('#flash-board') - .removeClass('alert-info alert-success alert-danger') - .addClass(alertType) - .slideDown(400) - .delay(800) - .fadeIn(); + .removeClass('alert-info alert-success alert-danger') + .addClass(alertType) + .slideDown(400) + .delay(800) + .fadeIn(); + disableMagicButton(false); } }); }); - }); + });