The authenticate page now handles forgot password flow as well.

browserid/static/dialog/controllers/authenticate_controller.js

@@ -44,6 +44,12 @@
   var network = BrowserIDNetwork,
       identities = BrowserIDIdentities;
 
+  function animateSwap(fadeOutSelector, fadeInSelector, callback) {
+    $(fadeOutSelector).fadeOut(ANIMATION_TIME, function() {
+      $(fadeInSelector).fadeIn(ANIMATION_TIME, callback);
+    });
+  }
+
   PageController.extend("Authenticate", {}, {
     init: function() {
       this._super({
@@ -57,18 +63,28 @@
     },
 
     "#email click" : function(el, event) {
-      this.submitAction = "checkEmail";
-      $(".returning:visible,.newuser:visible").fadeOut(ANIMATION_TIME, function() {
-        $(".start").fadeIn();
-      });
+      if (!el.is(":disabled")) {
+        this.submitAction = "checkEmail";
+        animateSwap(".returning:visible,.newuser:visible", ".start");
+      }
+    },
+
+    "#forgotPassword click": function(el, event) {
+      event.preventDefault();
+
+      this.submitAction = "resetPassword";
+      $("#email").attr("disabled", "disabled");
+
+      animateSwap(".returning", ".forgot");
     },
 
-    "#forgotpassword click": function(el, event) {
+    '#cancel_forgot_password click': function(el, event) {
       event.preventDefault();
 
-      var email = $("#email").val();
-      this.close("forgotpassword", {
-        email: email  
+      this.submitAction = "authenticate";
+      $("#email").removeAttr("disabled");
+      animateSwap(".forgot", ".returning", function() {
+        $("#password").focus();
       });
     },
 
@@ -91,17 +107,13 @@
         $(".start").fadeOut(function() {
           if(registered) {
             self.submitAction = "authenticate";
-            $(".newuser").fadeOut(ANIMATION_TIME, function() {
-              $(".returning").fadeIn(ANIMATION_TIME, function() {
-                $("#password").focus();  
-              });
+            animateSwap(".newuser", ".returning", function() {
+              $("#password").focus();  
             });
           }
           else {
             self.submitAction = "createUser";
-            $(".returning").fadeOut(ANIMATION_TIME, function() {
-              $(".newuser").fadeIn(ANIMATION_TIME);
-            });
+            animateSwap(".returning", ".newuser");
           }
         });
       });
@@ -153,6 +165,9 @@
         self.getErrorDialog(BrowserIDErrors.authentication)
       );
 
+    },
+
+    resetPassword: function() {
     }
   });
 

browserid/static/dialog/css/popup.css

@@ -110,12 +110,12 @@ h2 {
 }
 
 
-.forgotpassword #formWrap, .waiting #formWrap {
+/*.forgotpassword #formWrap, */.waiting #formWrap {
     width: 325px;
     margin: 0 auto;
 }
 
-.forgotpassword #formWrap > form, .waiting #formWrap > form {
+/*.forgotpassword #formWrap > form,*/ .waiting #formWrap > form {
     height: 250px;
     width: 325px;
     display: table-cell;
@@ -212,7 +212,7 @@ h2 {
     float: left;
 }
 
-a.forgot {
+#forgotPassword {
     color: #888784;
     text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5);
     font-size: 11px;
@@ -483,17 +483,17 @@ html[xmlns] .cf {
     -moz-box-flex: 1;
 }
 
-#create,
-#password_section,
 #cannot_authenticate,
-#create_text_section,
 .newuser,
+.forgot,
 .returning {
     display: none;
 }
+
 #create_text_section {
     color: #222;
 }
+
 #checkemail {
     text-align: center;
 }

browserid/static/dialog/views/authenticate.ejs

@@ -31,7 +31,7 @@
                         <div id="password_section" class="returning">
                             <label for="password" class="half serif">Password</label>
                             <div class="half right">
-                                <a id="forgotpassword" class="forgot" href="#">forgot your password?</a>
+                                <a id="forgotPassword" href="#">forgot your password?</a>
                             </div>
                             <input id="password" class="sans" type="password">
                         </div>
@@ -53,10 +53,13 @@
                 </ul>
 
                 <div class="submit cf">
-                    <button id="next" class="start">next</button>
-                    <button id="create" class="newuser">Create Account</button>
+                    <button class="start">next</button>
+                    <button class="newuser">Create Account</button>
 
-                    <button id="signInButton" class="returning">sign in</button>
+                    <button class="returning">sign in</button>
+
+                    <button class="forgot">Reset Password</button>
+                    <button id="cancel_forgot_password" class="forgot">Cancel</button>
                 </div>
             </div>
         </div>