a re-thinking of forgotten password flow and partial implementation (for the...

a re-thinking of forgotten password flow and partial implementation (for the purposes of initial launch, forgotton password flow is a re-verification of email, and it will require re-verification of other emails as well)

browserid/static/dialog/index.html

@@ -29,7 +29,8 @@
 </div>
 <div id="create_dialog" class="dialog">
   <div class="content">
-    <div class="summary">BrowserID makes logging in <b>safer and easier</b>.  To begin, please provide an email address and pick a password:</div>
+    <div class="summary create">BrowserID makes logging in <b>safer and easier</b>.  To begin, please provide an email address and pick a password:</div>
+    <div class="summary forgot"><b>Forgot your password?</b>  No problem!  Enter your email address, pick a new password, and we'll get you set up again!</div>
     <div class="input">
       <div class="label"> Email </div>
       <div class="input"> <input type="text"></input></div>
@@ -81,12 +82,6 @@
     </div>
   </div>
 </div>
-<div id="forgot_password_dialog" class="dialog">
-  <div class="content">
-    <p class="prompt"><b>Forgot your password?</b>  No problem, enter your email, and we'll help you reset it:</p>
-    <div class="input"> <input type="text"></input></div>
-  </div>
-</div>
 <div id="sign_in_dialog" class="dialog">
   <div class="content">
     <p class="prompt">What email address would you like to use to log into <span class="sitename bad"></span>?</p>

browserid/static/dialog/main.js

@@ -247,10 +247,10 @@
     }
 
     $("#authenticate_dialog div.note > a").unbind('click').click(function() {
-      runForgotDialog(onsuccess, onerror);
+      runCreateDialog(true, onsuccess, onerror);
     });
     $("#authenticate_dialog div.actions div.action").unbind('click').click(function() {
-      runCreateDialog(onsuccess, onerror);
+      runCreateDialog(false, onsuccess, onerror);
     });
 
     $("#authenticate_dialog div.attention_lame").hide();
@@ -329,7 +329,7 @@
 
     $("#back").show().unbind('click').click(function() {
       window.clearTimeout(pollTimeout);
-      runCreateDialog(onsuccess, onerror);
+      runCreateDialog(false, onsuccess, onerror);
     });
 
     $("#cancel").show().unbind('click').click(function() {
@@ -451,9 +451,13 @@
     $("#add_email_dialog").fadeIn(500);
   }
 
-  function runCreateDialog(onsuccess, onerror) {
+  function runCreateDialog(forgot, onsuccess, onerror) {
     $(".dialog").hide();
 
+    // show the proper summary text
+    $("#create_dialog .content .summary").hide();
+    $("#create_dialog .content " + (forgot ? ".forgot" : ".create")).show();
+
     $("#back").show().unbind('click').click(function() {
       runAuthenticateDialog(undefined, onsuccess, onerror);
     });
@@ -515,13 +519,15 @@
           // user anything, cause this is a non-critical issue
 
         } else if (typeof valid === 'boolean') {
-          if (valid) {
-            $("#create_dialog div.note:eq(0)").html($('<span class="good"/>').text("Not registered"));
-            $("#create_dialog div.attention_lame").hide();
-          } else {
-            $("#create_dialog div.attention_lame").fadeIn(300);
-            $("#create_dialog div.attention_lame span.email").text(email);
-            $("#submit").addClass("disabled");
+          if (!forgot) {
+            if (valid) {
+              $("#create_dialog div.note:eq(0)").html($('<span class="good"/>').text("Not registered"));
+              $("#create_dialog div.attention_lame").hide();
+            } else {
+              $("#create_dialog div.attention_lame").fadeIn(300);
+              $("#create_dialog div.attention_lame span.email").text(email);
+              $("#submit").addClass("disabled");
+            }
           }
         } else {
           // this is an email that needs to be checked!

browserid/static/dialog/style.css

@@ -185,16 +185,6 @@ div.input input {
     padding: .4em;
 }
 
-#forgot_password_dialog input {
-    width: 80%;
-    margin: 1em 10% 0 10%;
-    font-size: 1.5em;
-    padding: 1em .5em 1em .5em;
-    -moz-border-radius: 4px;
-    -webkit-border-radius: 4px;
-    border-radius: 4px 4px 4px 4px;
-}
-
 a {
     color: rgb(65, 126, 208);
     text-decoration: none;