Trying to make the wait screens look reasonable, simplify the addition of dialog class names.

browserid/static/dialog/controllers/authenticate_controller.js

@@ -51,7 +51,8 @@
         bodyVars: {
           sitename: BrowserIDNetwork.origin,
           siteicon: '/i/times.gif'
-        }
+        },
+        className: 'authenticate'
       });
     },
 

browserid/static/dialog/controllers/dialog_controller.js

@@ -199,16 +199,17 @@ PageController.extend("Dialog", {}, {
 
 
     doCheckAuth: function() {
-      this.doWait(BrowserIDWait.checkAuth);
       var self=this;
+      self.doWait(BrowserIDWait.checkAuth);
       BrowserIDIdentities.checkAuthenticationAndSync(function onSuccess() {}, 
-      function onComplete(authenticated) {
-        if (authenticated) {
-          self.doSignIn();
-        } else {
-          self.doAuthenticate();
-        }
-      }, self.getErrorDialog(BrowserIDErrors.checkAuthentication));
+        function onComplete(authenticated) {
+          if (authenticated) {
+              self.doSignIn();
+          } else {
+            self.doAuthenticate();
+          }
+        }, 
+        self.getErrorDialog(BrowserIDErrors.checkAuthentication));
   }
 
   });

browserid/static/dialog/controllers/forgotpassword_controller.js

@@ -41,16 +41,13 @@
       init: function(el, options) {
         this._super({
           bodyTemplate: "forgotpassword.ejs",
-          bodyVars: options
+          bodyVars: options,
+          className: "forgotpassword"
         });
-      
-        $("body").addClass("forgotpassword");
       },
 
 
       submit: function() {
-        $("body").removeClass("forgotpassword");
-
         var email = $("#email_input").val();
         this.close("forgotpassword:reset", {
           email: email

browserid/static/dialog/controllers/page_controller.js

@@ -43,17 +43,25 @@
   $.Controller.extend("PageController", {
     }, {
     init: function(options) {
-      var bodyTemplate = options.bodyTemplate;
-      var bodyVars = options.bodyVars;
-      var footerTemplate = options.footerTemplate;
-      var footerVars = options.footerVars;
+      var me=this,
+          bodyTemplate = options.bodyTemplate,
+          bodyVars = options.bodyVars,
+          footerTemplate = options.footerTemplate,
+          footerVars = options.footerVars;
+
+
+      me.renderTemplates(bodyTemplate, bodyVars, footerTemplate, footerVars);
 
-      this.renderTemplates(bodyTemplate, bodyVars, footerTemplate, footerVars);
       // XXX move all of these, bleck.
-      $("form").bind("submit", this.onSubmit.bind(this));
-      $("#cancel").click(this.onCancel.bind(this));
-      $("#back").click(this.onBack.bind(this));
-      $("#signOut").click(this.close.bind(this, "pickemail:notme"));
+      $("form").bind("submit", me.onSubmit.bind(me));
+      $("#cancel").click(me.onCancel.bind(me));
+      $("#back").click(me.onBack.bind(me));
+      $("#signOut").click(me.close.bind(me, "pickemail:notme"));
+
+      me.className = options.className;
+      if (me.className) {
+        $("body").addClass(me.className);
+      }
     },
 
     destroy: function() {
@@ -62,10 +70,19 @@
       $("#cancel").unbind("click");
       $("#back").unbind("click");
       $("#signOut").unbind("click");
+
+      if (this.className) {
+        $("body").removeClass(this.className);
+      }
+
+      $("body").removeClass("waiting");
+
       this._super();
     },
 
     renderTemplates: function(body, body_vars, footer, footer_vars) {
+      $("body").removeClass("waiting");
+
       if (body) {
         var bodyHtml = $.View("//dialog/views/" + body, body_vars);
         $("#dialog").html(bodyHtml).hide().fadeIn(300, function() {
@@ -83,6 +100,7 @@
     onSubmit: function(event) {
       event.stopPropagation();
       event.preventDefault();
+
       if (this.validate()) {
         this.submit();
       }
@@ -98,7 +116,13 @@
     },
 
     doWait: function(info) {
+      if (this.className) {
+        $("body").removeClass(this.className);
+      }
+
       this.renderTemplates("wait.ejs", {title: info.message, message: info.description});
+
+      $("body").addClass("waiting");
     },
 
     close: function(message, data) {

browserid/static/dialog/controllers/setpassword_controller.js

@@ -45,9 +45,9 @@
           sitename: BrowserIDNetwork.origin,
           siteicon: '/i/times.gif',
           email: options.email
-        }
+        },
+        className: "setpassword"
       });
-      $("body").addClass("setpassword");
     },
 
 
@@ -56,7 +56,6 @@
     },
 
     submit: function() {
-      $("body").removeClass("setpassword");
       var password = $("#pass").val(),
           me=this;
 

browserid/static/dialog/css/popup.css

@@ -90,7 +90,12 @@ h2 {
     width: 100%;
 }
 
-#formWrap {
+.authenticate #formWrap, .authenticated #formWrap {
+    background-color: #fff;
+    background-image: none;
+}
+
+#formWrap, .waiting #formWrap {
     background-color: rgba(0, 0, 0, 0.035);
     background-image: url('/i/bg.png');
     position: relative;
@@ -99,17 +104,13 @@ h2 {
     overflow: hidden;
 }
 
-.authenticate #formWrap, .authenticated #formWrap {
-    background-color: #fff;
-    background-image: none;
-}
 
-.forgotpassword #formWrap {
+.forgotpassword #formWrap, .waiting #formWrap {
     width: 325px;
     margin: 0 auto;
 }
 
-.forgotpassword #formWrap > form {
+.forgotpassword #formWrap > form, .waiting #formWrap > form {
     height: 250px;
     width: 325px;
     display: table-cell;

browserid/static/dialog/views/body.ejs

@@ -8,7 +8,7 @@
   </header>
 
   <div id="formWrap" class="cf">
-    <form action="" onsubmit="return false;"> <!-- using the form element to hook into with js -->
+    <form> 
       <div id="dialog" class="dialog">
       </div>