diff --git a/resources/static/dialog/controllers/authenticate.js b/resources/static/dialog/controllers/authenticate.js index 5c0c55cdcc7ae8097e2bf6778e2f8a2762691399..743b3c856cf6522d342598fd193f3c50231bf2f5 100644 --- a/resources/static/dialog/controllers/authenticate.js +++ b/resources/static/dialog/controllers/authenticate.js @@ -17,7 +17,8 @@ BrowserID.Modules.Authenticate = (function() { complete = helpers.complete, dom = bid.DOM, lastEmail = "", - addressInfo; + addressInfo, + hints = ["newuser","forgot","returning","start","addressInfo"]; function getEmail() { return helpers.getAndValidateEmail("#email"); @@ -31,7 +32,7 @@ BrowserID.Modules.Authenticate = (function() { enterPasswordState.call(self, info.ready); } else { - animateSwap(".newuser,.forgot,.returning", ".start"); + showHint("start"); complete(info.ready); } } @@ -46,6 +47,7 @@ BrowserID.Modules.Authenticate = (function() { onAddressInfo(info); } else { + showHint("addressInfo"); user.addressInfo(email, onAddressInfo, self.getErrorDialog(errors.addressInfo)); } @@ -91,16 +93,20 @@ BrowserID.Modules.Authenticate = (function() { } } - function animateSwap(fadeOutSelector, fadeInSelector, callback) { - // XXX instead of using jQuery here, think about using CSS animations. - $(fadeOutSelector).hide(); - $(fadeInSelector).fadeIn(ANIMATION_TIME, callback); + function showHint(showSelector, callback) { + hints.forEach(function(className) { + if(className != showSelector) { + $("." + className).not("." + showSelector).hide(); + } + }); + + $("." + showSelector).fadeIn(ANIMATION_TIME, callback); } function enterEmailState(el) { if (!$("#email").is(":disabled")) { this.submit = checkEmail; - animateSwap(".returning:visible,.newuser:visible", ".start"); + showHint("start"); } } @@ -109,7 +115,7 @@ BrowserID.Modules.Authenticate = (function() { self.publish("enter_password", addressInfo); self.submit = authenticate; - animateSwap(".start:visible,.newuser:visible,.forgot:visible", ".returning", function() { + showHint("returning", function() { dom.focus("#password"); }); complete(callback); @@ -128,7 +134,7 @@ BrowserID.Modules.Authenticate = (function() { self.publish("create_user"); self.submit = createSecondaryUser; - animateSwap(".start:visible,.returning:visible", ".newuser"); + showHint("newuser"); } diff --git a/resources/static/dialog/views/authenticate.ejs b/resources/static/dialog/views/authenticate.ejs index 5d598a5b3da1aa7ae6d7c342cd0f22d8bebc91fd..ec7f373d1ffd3f99e002c78ad654d80a2681f7fe 100644 --- a/resources/static/dialog/views/authenticate.ejs +++ b/resources/static/dialog/views/authenticate.ejs @@ -27,11 +27,16 @@ </li> <li id="hint_section" class="start"> - <p><%= format(gettext('Enter your email address to sign in to <strong>%s</strong>'), [sitename]) %></p> + <%= format(gettext('Enter your email address to sign in to <strong>%s</strong>'), [sitename]) %> + + </li> + + <li id="hint_section" class="addressInfo"> + <%= gettext("Please hold on while we get information about your email provider.") %> </li> <li id="create_text_section" class="newuser"> - <p><strong><%= gettext('Welcome to BrowserID!') %></strong></p> + <strong><%= gettext('Welcome to BrowserID!') %></strong> <p><%= gettext("This email looks new, so let's get you set up.") %></p> </li> @@ -65,7 +70,7 @@ </p> <p> <% } %> - <button class="start" tabindex="3"><%= gettext('next') %></button> + <button class="start addressInfo" tabindex="3"><%= gettext('next') %></button> <button class="newuser" tabindex="3"><%= gettext('verify email') %></button> <button class="returning" tabindex="3"><%= gettext('sign in') %></button> <% if (privacy_url && tos_url) { %>