Unifying the "we sent email" messages across all locations.

* Unifying both the message (with slight variation for current action) and the styles across dialog and main site.
* Adding a throttling message to the signup page.
* Adding a couple of page helper functions to take care of showing notifications.
* Adding the ability to go "back" in all of the main site email sent notifications in case of error.
* When going "back" after sent email, ensure the stored email is restored.

close #579
close #577

resources/static/css/style.css

@@ -657,7 +657,7 @@ h1 {
 }
 
 #signUpFormWrap {
-  margin: 122px 160px;
+  margin: 122px 115px;
 }
 
 #signUpFormWrap a.signUpIn {
@@ -815,7 +815,9 @@ a.forgot {
 .notifications > .notification {
   margin-top: 20px;
   padding: 5px;
-  line-height: 16px;
+  line-height: 21px;
+  color: #62615F;
+  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5);
   -webkit-border-radius: 3px;
      -moz-border-radius: 3px;
        -o-border-radius: 3px;
@@ -824,6 +826,10 @@ a.forgot {
   text-align: center;
 }
 
+.notifications > .notification a, .notifications > .notification strong {
+  color: #222;
+}
+
 .notifications .notification.error {
   color: red;
   background-color: rgba(255,0,0,0.25);

resources/static/dialog/views/confirmemail.ejs

     <h2>Check your email!</h2>
     <p>We sent a confirmation email to <strong><%= email %></strong></p>
     <p>To finish signing in just click the verify link we sent to your email address.</p><br />
-    <p>If this is a mistake, <a href="#" id="back">cancel this email</a>.</p>
+    <p>If this is a mistake, just ignore the sent email and <a href="#" id="back">use another</a>.</p>
 

resources/static/pages/forgot.js

@@ -54,10 +54,7 @@ BrowserID.forgot = (function() {
     if (valid) {
       user.requestPasswordReset(email, function onSuccess(info) {
         if (info.success) {
-          pageHelpers.clearStoredEmail();
-          $('#sent_to_email').html(email);
-          $('#forminputs').fadeOut();
-          $(".notifications .notification.emailsent").fadeIn();
+          pageHelpers.showEmailSent();
         }
         else {
           var tooltipEl = info.reason === "throttle" ? "#could_not_add" : "#not_registered";
@@ -67,20 +64,29 @@ BrowserID.forgot = (function() {
     }
   };
 
+  function back(event) {
+    if (event) event.preventDefault();
+
+    pageHelpers.cancelEmailSent();
+  }
+
   function init() {
     $("form input[autofocus]").focus();
 
     pageHelpers.setupEmail();
 
     $("form").bind("submit", submit);
+    $("#back").bind("click", back);
   }
 
   function reset() {
     $("form").unbind("submit", submit);
+    $("#back").unbind("click", back);
   }
 
   init.submit = submit; 
   init.reset = reset;
+  init.back = back;
 
   return init;
 

resources/static/pages/page_helpers.js

@@ -40,7 +40,9 @@ BrowserID.PageHelpers = (function() {
   var win = window,
       locStorage = win.localStorage,
       bid = BrowserID,
-      errorDisplay = bid.ErrorDisplay;
+      errorDisplay = bid.ErrorDisplay,
+      ANIMATION_SPEED = 250,
+      origStoredEmail;
 
   function setStoredEmail(email) {
     locStorage.signInEmail = email;
@@ -88,17 +90,46 @@ BrowserID.PageHelpers = (function() {
     return function onFailure(info) {
       info = $.extend(info, { action: error, dialog: false });
       bid.Screens.error("error", info);
-      $("#errorBackground").fadeIn();
-      $("#error").fadeIn();
+      $("#errorBackground").stop().fadeIn();
+      $("#error").stop().fadeIn();
     }
   }
 
+  function replaceInputsWithNotice(selector, onComplete) {
+    $('.forminputs').hide();
+    $(selector).stop().hide().css({opacity:1}).fadeIn(ANIMATION_SPEED, onComplete);
+  }
+
+  function showInputs(onComplete) {
+    $('.notification').hide();
+    $('.forminputs').stop().hide().css({opacity:1}).fadeIn(ANIMATION_SPEED, onComplete);
+  }
+
+  function showEmailSent(onComplete) {
+    origStoredEmail = getStoredEmail();
+    $('#sentToorigStoredEmail').html(origStoredEmail);
+
+    clearStoredEmail();
+
+    replaceInputsWithNotice(".emailsent", onComplete);
+  }
+
+  function cancelEmailSent(onComplete) {
+    setStoredEmail(origStoredEmail);
+
+    showInputs(onComplete);
+  }
+
   return {
     setupEmail: prefillEmail,
     setStoredEmail: setStoredEmail,
     clearStoredEmail: clearStoredEmail,
     getStoredEmail: getStoredEmail,
     getParameterByName: getParameterByName,
-    getFailure: getFailure
+    getFailure: getFailure,
+    replaceInputsWithNotice: replaceInputsWithNotice,
+    showInputs: showInputs,
+    showEmailSent: showEmailSent,
+    cancelEmailSent: cancelEmailSent
   };
 }());

resources/static/pages/signup.js

@@ -41,13 +41,9 @@ BrowserID.signUp = (function() {
       user = bid.User,
       pageHelpers = bid.PageHelpers,
       errors = bid.Errors,
-      ANIMATION_SPEED = 250;
-
-    function replaceWithMessage(selector) {
-        $('.forminputs').fadeOut(ANIMATION_SPEED, function() {
-          $(selector).fadeIn(ANIMATION_SPEED);
-        });
-    }
+      tooltip = BrowserID.Tooltip,
+      ANIMATION_SPEED = 250,
+      storedEmail = pageHelpers;
 
     function showNotice(selector) {
       $(selector).fadeIn(ANIMATION_SPEED);
@@ -65,10 +61,13 @@ BrowserID.signUp = (function() {
 
       user.isEmailRegistered(email, function(registered) {
         if (!registered) {
-          pageHelpers.clearStoredEmail();
-          user.createUser(email, function onSuccess(keypair) {
-            $('#sentToEmail').html(email);
-            replaceWithMessage(".emailsent");
+          user.createUser(email, function onSuccess(success) {
+            if(success) {
+              pageHelpers.showEmailSent();
+            }
+            else {
+              tooltip.showTooltip("#could_not_add");
+            }
           }, pageHelpers.getFailure(errors.createUser));
         }
         else {
@@ -78,6 +77,12 @@ BrowserID.signUp = (function() {
       }, pageHelpers.getFailure(errors.isEmailRegistered));
     }
 
+    function back(event) {
+      if (event) event.preventDefault();
+
+      pageHelpers.cancelEmailSent();
+    }
+
     function onEmailKeyUp(event) {
       if (event.which !== 13) $(".notification").fadeOut(ANIMATION_SPEED);
     }
@@ -89,15 +94,18 @@ BrowserID.signUp = (function() {
 
       $("#email").bind("keyup", onEmailKeyUp);
       $("form").bind("submit", submit);
+      $("#back").bind("click", back);
     }
 
     function reset() {
       $("form").unbind("submit", submit);
       $("#email").unbind("keyup", onEmailKeyUp);
+      $("#back").unbind("click", back);
     }
 
     init.submit = submit;
     init.reset = reset;
+    init.back = back;
 
     return init;
 }());

resources/static/test/qunit.html

@@ -65,6 +65,8 @@
     <ul id="emailList">
     </ul>
 
+    <div id="sentToEmail"></div>
+
     <script type="text/html" id="templateUser">
       <li>{{email}}</li>
     </script>

resources/static/test/qunit/pages/forgot_unit_test.js

@@ -117,4 +117,24 @@ steal.then("/pages/forgot", function() {
     });
   });
 
+  test("signup with unregistered email and cancel button pressed", function() {
+    $("#email").val("unregistered@testuser.com");
+
+    bid.signUp.submit();
+
+    setTimeout(function() {
+      bid.forgot.back();
+
+      setTimeout(function() {
+        equal($(".notification:visible").length, 0, "no notifications are visible");
+        equal($(".forminputs:visible").length, 1, "form inputs are again visible");
+        equal($("#email").val(), "unregistered@testuser.com", "email address restored");
+        start();
+      }, 500);
+    }, 100);
+
+    stop();
+  });
+
+
 });

resources/static/test/qunit/pages/page_helpers_unit_test.js

@@ -76,6 +76,54 @@ steal.then(function() {
     equal(pageHelpers.getStoredEmail(), "", "clearStoredEmail clears stored email");
   });
 
+  test("replaceInputsWithNotice replaces contents", function() {
+    pageHelpers.replaceInputsWithNotice(".emailsent", function() {
+      equal($(".emailsent").is(":visible"), true, "emailsent is visible");
+      equal($(".forminputs").is(":visible"), false, "inputs are hidden");
+      start();
+    });
+
+    stop();
+  });
+
+  test("showInputs hides notices and shows the inputs", function() {
+    pageHelpers.replaceInputsWithNotice(".emailsent", function() {
+      pageHelpers.showInputs(function() {
+        equal($(".emailsent").is(":visible"), false, "emailsent is hidden");
+        equal($(".forminputs").is(":visible"), true, "inputs are shown");
+        start();
+      });
+    });
+
+    stop();
+  });
+
+
+  test("showEmailSent shows correct email sent message", function() {
+    pageHelpers.setStoredEmail("testuser@testuser.com");
+    pageHelpers.showEmailSent(function() {
+      equal($("#sentToEmail").html(), "testuser@testuser.com", "correct email is set");
+      equal($(".emailsent").is(":visible"), true, "emailsent is visible");
+      equal($(".forminputs").is(":visible"), false, "inputs are hidden");
+      start();
+    });
+  });
+
+  test("cancelEmailSent restores the stored email, inputs are shown again", function() {
+    pageHelpers.setStoredEmail("testuser@testuser.com");
+    pageHelpers.showEmailSent(function() {
+      pageHelpers.cancelEmailSent(function() {
+        var email = pageHelpers.getStoredEmail();
+        equal(email, "testuser@testuser.com", "stored email is reset on cancel");
+        equal($(".emailsent").is(":visible"), false, "emailsent is not visible");
+        equal($(".forminputs").is(":visible"), true, "inputs are visible");
+        start();
+      });
+    });
+
+    stop();
+  });
+
 });
 
 

resources/static/test/qunit/pages/signup_unit_test.js

@@ -99,6 +99,14 @@ steal.then("/pages/signup", function() {
     testNoticeNotVisible();
   });
 
+  test("signup with throttling", function() {
+    xhr.useResult("throttle");
+
+    $("#email").val("throttled@testuser.com");
+
+    testNoticeNotVisible();
+  });
+
   test("signup with invalid XHR error", function() {
     xhr.useResult("invalid");
     $("#email").val("unregistered@testuser.com");
@@ -109,4 +117,23 @@ steal.then("/pages/signup", function() {
     });
   });
 
+  test("signup with unregistered email and cancel button pressed", function() {
+    $("#email").val("unregistered@testuser.com");
+
+    bid.signUp.submit();
+
+    setTimeout(function() {
+      bid.signUp.back();
+
+      setTimeout(function() {
+        equal($(".notification:visible").length, 0, "no notifications are visible");
+        equal($(".forminputs:visible").length, 1, "form inputs are again visible");
+        equal($("#email").val(), "unregistered@testuser.com", "email address restored");
+        start();
+      }, 500);
+    }, 100);
+
+    stop();
+  });
+
 });

resources/views/forgot.ejs

@@ -4,10 +4,23 @@
         <form id="signUpForm" class="cf authform" novalidate>
             <h1 class="serif">Forgot Password</h1>
             <div class="notifications">
-                <div class="notification emailsent">A confirmation email has been sent to you at <strong id="sent_to_email"></strong>. Check it!</div>
+                <div class="notification emailsent">
+                  <p>
+                    We sent a confirmation email to <strong id="sentToEmail"></strong>. 
+                  </p>
+
+                  <p>
+                    To finish resetting your password just click the verify link we sent to your email address.
+                  </p>
+
+                  <br />
+                  <p>
+                    If this is a mistake, just ignore the sent email and <a href="/signup" id="back">use another</a>.
+                  </p>
+                </div>
             </div>
-            <div id="forminputs">
-            <ul class="inputs">
+
+            <ul class="inputs forminputs">
                 <li>
                     <label class="serif" for="email">Email Address</label>
                     <input class="sans" id="email" autofocus required placeholder="Your Email" type="email" autocapitalize="off" autocorrect="off" maxlength="254" />
@@ -31,13 +44,13 @@
 
 
             </ul>
-            <div class="submit cf">
+
+            <div class="submit cf forminputs">
                 <div class="remember cf">
                     <a class="signUpIn" href="/signin">Know your password? Sign in.</a>
                 </div>
                 <input type="submit" class="create" value="Reset Password"/>
             </div>
-            </div>
         </form>
     </div>
 </div>

resources/views/signup.ejs

@@ -6,8 +6,27 @@
 
             <ul class="notifications">
                 <li class="notification error doh">Doh! Something went wrong :-( </li>
-                <li class="notification alreadyRegistered"><strong id="registeredEmail"></strong> is already registered. Would you like to <a class="signUpIn" href="/signin">sign in</a> instead?</li>
-                <li class="notification emailsent">A confirmation email has been sent to you at <strong id="sentToEmail"></strong>. Check it!</li>
+
+                <li class="notification alreadyRegistered">
+                  <strong id="registeredEmail"></strong> is already registered. 
+                  Would you like to <a class="signUpIn" href="/signin">sign in</a> instead?
+                </li>
+
+                <li class="notification emailsent">
+                  <p>
+                    We sent a confirmation email to <strong id="sentToEmail"></strong>. 
+                  </p>
+
+                  <p>
+                    To finish signing up just click the verify link we sent to your email address.
+                  </p>
+
+                  <br />
+                  <p>
+                    If this is a mistake, just ignore the sent email and <a href="/signup" id="back">use another</a>.
+                  </p>
+                </li>
+
             </ul>
 
             <ul class="inputs forminputs">
@@ -22,6 +41,10 @@
                     <div id="email_required" class="tooltip" for="email">
                       The email field is required.
                     </div>
+
+                    <div id="could_not_add" class="tooltip" for="email">
+                      We just sent an email to that address! If you really want to send another, wait a minute or two and try again.
+                    </div>
                 </li>
             </ul>