diff --git a/browserid/static/dialog/controllers/authenticate_controller.js b/browserid/static/dialog/controllers/authenticate_controller.js index 0afc27d467f042d04ab7029aeab379569ae9e3f4..63f476c96149fca46b34a95f5df7934cf521035c 100644 --- a/browserid/static/dialog/controllers/authenticate_controller.js +++ b/browserid/static/dialog/controllers/authenticate_controller.js @@ -51,7 +51,8 @@ bodyVars: { sitename: BrowserIDNetwork.origin, siteicon: '/i/times.gif' - } + }, + className: 'authenticate' }); }, diff --git a/browserid/static/dialog/controllers/dialog_controller.js b/browserid/static/dialog/controllers/dialog_controller.js index b2e17a87deadd2eadd33e563d7622c4808c26853..4940f3d47b0bdafdf87702c991f3fec7cc5bb091 100644 --- a/browserid/static/dialog/controllers/dialog_controller.js +++ b/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)); } }); diff --git a/browserid/static/dialog/controllers/forgotpassword_controller.js b/browserid/static/dialog/controllers/forgotpassword_controller.js index 1be33dda11c1d68ecd8ac20431b60bc3da6fe2b9..0fe45ac2536f10742cebf3167dcc77f5a6d58656 100644 --- a/browserid/static/dialog/controllers/forgotpassword_controller.js +++ b/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 diff --git a/browserid/static/dialog/controllers/page_controller.js b/browserid/static/dialog/controllers/page_controller.js index 03fbec8e8f1e18347a38c0c6463f76bd0c09ef1f..a289fd7b49351dbcb64d882c96d0de354a195444 100644 --- a/browserid/static/dialog/controllers/page_controller.js +++ b/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) { diff --git a/browserid/static/dialog/controllers/setpassword_controller.js b/browserid/static/dialog/controllers/setpassword_controller.js index bacbf0185c3a611dae69c739f1b0dc931fefe72a..3f1dce7bef1ec87e2490958773b86183e002b3d2 100644 --- a/browserid/static/dialog/controllers/setpassword_controller.js +++ b/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; diff --git a/browserid/static/dialog/css/popup.css b/browserid/static/dialog/css/popup.css index 4ce0fb1e5af9c612dc3f2e9e983c6e6e5171d52d..0eb01645eff5fe9686cf9f15369ea459b29ffc9d 100644 --- a/browserid/static/dialog/css/popup.css +++ b/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; diff --git a/browserid/static/dialog/views/body.ejs b/browserid/static/dialog/views/body.ejs index d69f42483ee5bd0dda173260ba53727f8b36b93a..591dc38af1dbfb1a4275c4dead4bf67a60b5ee8b 100644 --- a/browserid/static/dialog/views/body.ejs +++ b/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>