diff --git a/browserid/static/dialog/controllers/authenticate_controller.js b/browserid/static/dialog/controllers/authenticate_controller.js
index ee62a1988df743ea40559db159129223ed2b1bd1..4daaa55d7bd90a33bd7e173ab0845d886c0a51bf 100644
--- a/browserid/static/dialog/controllers/authenticate_controller.js
+++ b/browserid/static/dialog/controllers/authenticate_controller.js
@@ -193,11 +193,10 @@
init: function(el, options) {
options = options || {};
- this._super({
+ this._super(el, {
bodyTemplate: "authenticate.ejs",
bodyVars: {
sitename: user.getOrigin(),
- siteicon: "/i/times.gif",
email: options.email || ""
}
});
diff --git a/browserid/static/dialog/controllers/checkregistration_controller.js b/browserid/static/dialog/controllers/checkregistration_controller.js
index 9988c00a4e70b9620cb00187c26a775eac899874..e9c15fd1650f7840cf19a586d903c91ece36b05d 100644
--- a/browserid/static/dialog/controllers/checkregistration_controller.js
+++ b/browserid/static/dialog/controllers/checkregistration_controller.js
@@ -42,9 +42,9 @@
PageController.extend("Checkregistration", {}, {
init: function(el, options) {
var me=this;
- me._super({
- bodyTemplate: "confirmemail.ejs",
- bodyVars: {
+ me._super(el, {
+ waitTemplate: "confirmemail.ejs",
+ waitVars: {
email: options.email
}
});
diff --git a/browserid/static/dialog/controllers/dialog_controller.js b/browserid/static/dialog/controllers/dialog_controller.js
index 924f77cbb3e9e8e5fe6e879f1ed48f85200af6a1..5583cbd4787e8d19b94267f86a5433b8557c6919 100644
--- a/browserid/static/dialog/controllers/dialog_controller.js
+++ b/browserid/static/dialog/controllers/dialog_controller.js
@@ -61,6 +61,9 @@
this.onerror = onerror;
user.setOrigin(origin_url);
+
+ // get the cleaned origin.
+ $("#sitename").text(user.getOrigin());
this.doCheckAuth();
diff --git a/browserid/static/dialog/controllers/page_controller.js b/browserid/static/dialog/controllers/page_controller.js
index 40a2ec79b4a6c3acbc73011336b57440d0429887..6904b0fb8655e5e19a6b3a98399796dff154e070 100644
--- a/browserid/static/dialog/controllers/page_controller.js
+++ b/browserid/static/dialog/controllers/page_controller.js
@@ -42,13 +42,23 @@
$.Controller.extend("PageController", {
}, {
- init: function(options) {
+ init: function(el, options) {
+ options = options || {};
+
var me=this,
bodyTemplate = options.bodyTemplate,
- bodyVars = options.bodyVars;
+ bodyVars = options.bodyVars,
+ waitTemplate = options.waitTemplate,
+ waitVars = options.waitVars;
- me.renderTemplates(bodyTemplate, bodyVars);
+ if(bodyTemplate) {
+ me.renderDialog(bodyTemplate, bodyVars);
+ }
+
+ if(waitTemplate) {
+ me.renderWait(waitTemplate, waitVars);
+ }
// XXX move all of these, bleck.
$("form").bind("submit", me.onSubmit.bind(me));
@@ -69,18 +79,29 @@
this._super();
},
- renderTemplates: function(body, body_vars) {
-
+ renderTemplates: function(target, body, body_vars) {
if (body) {
var bodyHtml = $.View("//dialog/views/" + body, body_vars);
- var form = $("#formWrap > form");
- form.html(bodyHtml).hide().fadeIn(ANIMATION_TIME, function() {
- $("body").removeClass("waiting");
- form.find("input").eq(0).focus();
- });
+ target = $(target + " .contents");
+ target.html(bodyHtml).find("input").eq(0).focus();
}
},
+ renderDialog: function(body, body_vars) {
+ this.renderTemplates("#formWrap", body, body_vars);
+ $("#wait").stop().fadeOut(ANIMATION_TIME);
+ },
+
+ renderWait: function(body, body_vars) {
+ this.renderTemplates("#wait", body, body_vars);
+ $("#wait").stop().css('opacity', 1).hide().fadeIn(ANIMATION_TIME);
+ },
+
+ renderError: function(error_vars) {
+ this.renderTemplates("#error", "wait.ejs", error_vars);
+ $("#error").stop().css('opacity', 1).hide().fadeIn(ANIMATION_TIME);
+ },
+
onSubmit: function(event) {
event.stopPropagation();
event.preventDefault();
@@ -100,7 +121,7 @@
},
doWait: function(info) {
- this.renderTemplates("wait.ejs", {title: info.message, message: info.description});
+ this.renderWait("wait.ejs", info);
$("body").addClass("waiting");
},
@@ -112,23 +133,6 @@
}
},
- /**
- * Immediately show the error dialog
- * @method errorDialog
- * @param {object} info - info to use for the error dialog. Should have
- * two fields, message, description.
- */
- errorDialog: function(info) {
- $("form").hide();
-
- $("#error_dialog .title").text(info.message);
- $("#error_dialog .content").text(info.description);
-
- $("body").removeClass("authenticated").addClass("error");
-
- $("#error_dialog").fadeIn(ANIMATION_TIME);
- },
-
/**
* Get a curried function to an error dialog.
* @method getErrorDialog
@@ -137,7 +141,7 @@
*/
getErrorDialog: function(info) {
var self=this;
- return self.errorDialog.bind(self, info);
+ return self.renderError.bind(self, info);
},
onCancel: function(event) {
diff --git a/browserid/static/dialog/controllers/pickemail_controller.js b/browserid/static/dialog/controllers/pickemail_controller.js
index b0ebdaa3dc657175cef6444768d5d45877b9615a..43e23513bec1d6b5cfb0a6ca6557291cdea11209 100644
--- a/browserid/static/dialog/controllers/pickemail_controller.js
+++ b/browserid/static/dialog/controllers/pickemail_controller.js
@@ -134,6 +134,7 @@
var valid = checkEmail.call(self, email);
if (valid) {
+// self.doWait(bid.Wait.generateKey);
getAssertion.call(self, email);
startAnimation.call(self);
}
@@ -172,13 +173,11 @@
PageController.extend("Pickemail", {}, {
- init: function(options) {
- this._super({
+ init: function(el, options) {
+ this._super(el, {
bodyTemplate: "pickemail.ejs",
bodyVars: {
- sitename: user.getOrigin(),
- siteicon: '/i/times.gif',
- identities: user.getStoredEmailKeypairs(),
+ identities: user.getStoredEmailKeypairs()
}
});
diff --git a/browserid/static/dialog/css/m.css b/browserid/static/dialog/css/m.css
index 486ef920599d9bad0f05d6375f13c111e46d13c2..6688319e75c24c28df1069b9eb3b6a4676b9aed3 100644
--- a/browserid/static/dialog/css/m.css
+++ b/browserid/static/dialog/css/m.css
@@ -24,6 +24,11 @@
font-size: 17px;
}
+ section {
+ position: static;
+ overflow: visible;
+ }
+
.inputs > li > label {
font-size: 18px;
}
@@ -73,11 +78,6 @@
background-color: transparent;
}
- #formWrap,
- .vertical {
- height: auto;
- }
-
.arrow {
display: none;
}
@@ -86,10 +86,6 @@
height: 250px;
}
- #footer {
- padding: 10px;
- }
-
#signIn .vertical {
padding-bottom: 0;
}
@@ -101,4 +97,9 @@
#signIn .submit > p {
font-size: 14px;
}
+
+ #content, .pickemail .form_section, .pickemail .inputs, .vertical {
+ height: auto;
+ overflow: visible;
+ }
}
diff --git a/browserid/static/dialog/css/popup.css b/browserid/static/dialog/css/popup.css
index 872a2fade3ed7565bfc2ace0a058ef4420a09376..b1b54243f2d023bc6e2a46f27d7a621ad3b1ba01 100644
--- a/browserid/static/dialog/css/popup.css
+++ b/browserid/static/dialog/css/popup.css
@@ -65,9 +65,13 @@ h1 {
}
h2 {
- font-size: 1em;
+ margin-bottom: 20px;
+ font-size: 150%;
+ color: #222;
+ font-weight: bold;
}
+
.right {
text-align: right;
}
@@ -77,11 +81,6 @@ h2 {
position: relative;
}
-#error_dialog {
- text-align: center;
- margin: 100px auto;
- display: none;
-}
.table {
display: table;
@@ -95,37 +94,55 @@ h2 {
width: 100%;
}
-.authenticate #formWrap, .pickemail #formWrap {
- background-color: #fff;
- background-image: none;
-}
-
-#formWrap, .waiting #formWrap, .checkregistration #formWrap {
- background-color: rgba(0, 0, 0, 0.035);
- background-image: url('/i/bg.png');
+#content {
position: relative;
- width: 100%;
height: 250px;
overflow: hidden;
}
-.waiting #formWrap, .checkregistration #formWrap {
- width: 325px;
- margin: 0 auto;
- text-align: center;
+section {
+ display: block;
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ right: 0;
+ z-index: 0;
}
-.waiting #formWrap > form, .checkregistration #formWrap > form {
- height: 250px;
- width: 325px;
+section > .contents {
display: table-cell;
vertical-align: middle;
+ height: 250px;
}
-#signIn,
-#favicon {
- display: inline-block;
- float: left;
+#wait, #error {
+ text-align: center;
+ background-image: url("/i/bg.png");
+}
+
+#wait {
+ z-index: 1;
+}
+
+#error {
+ display: none;
+ z-index: 2;
+}
+
+#wait strong, #error strong {
+ color: #222;
+ font-weight: bold;
+}
+
+#error {
+ z-index: 2;
+}
+
+#formWrap {
+ background-color: #fff;
+ background-image: none;
+ display: block;
}
#signIn {
@@ -166,6 +183,7 @@ h2 {
#favicon {
position: absolute;
left: 450px;
+ top: 0;
z-index: 10;
}
@@ -355,21 +373,12 @@ footer .learn a {
text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5);
}
-.checkregistration p:first-child {
- margin-bottom: 20px;
- font-size: 150%;
-}
-
-.checkregistration strong {
- color: #222;
- font-weight: bold;
-}
-
+ /*
#favicon {
text-align: center;
max-width: 940px;
}
-
+*/
header {
padding: 20px;
font-weight: bold;
@@ -435,11 +444,11 @@ header,
footer {
display: block;
width: 100%;
+ border-top: 1px solid rgba(0, 0, 0, 0.05);
}
footer {
padding: 20px;
- border-top: 1px solid rgba(0,0,0,0.05);
color: #aaa;
}
diff --git a/browserid/static/dialog/qunit.html b/browserid/static/dialog/qunit.html
index 8b7142e7746ea2a5a0b69dc5350c7f27ac6f3699..108cc60fd8fbc23e0105384c865a527e58e19b92 100644
--- a/browserid/static/dialog/qunit.html
+++ b/browserid/static/dialog/qunit.html
@@ -2,9 +2,6 @@
<head>
<link rel="stylesheet" type="text/css" href="/funcunit/qunit/qunit.css" />
<title>dialog QUnit Test</title>
- <script type='text/javascript'>
- steal = {ignoreControllers: true}
- </script>
<script type='text/javascript' src='/vepbundle'></script>
<script type='text/javascript' src='/steal/steal.js?/dialog/test/qunit'></script>
</head>
@@ -14,7 +11,23 @@
<h2 id="qunit-banner"></h2>
<div id="qunit-testrunner-toolbar"></div>
<h2 id="qunit-userAgent"></h2>
- <div id="test-content"></div>
+ <div id="test-content">
+ <div id="page_controller">
+
+ <div id="formWrap">
+ <div class="contents"></div>
+ </div>
+
+ <div id="wait">
+ <div class="contents"></div>
+ </div>
+
+ <div id="error">
+ <div class="contents"></div>
+ </div>
+
+ </div>
+ </div>
<ol id="qunit-tests"></ol>
<div id="qunit-test-area"></div>
</body>
diff --git a/browserid/static/dialog/resources/error-messages.js b/browserid/static/dialog/resources/error-messages.js
index dd7ee7313210e4a5dd20645c2c06ed030e77fd05..860760fb88febb0e2645a94dda23b3cf7f314b5f 100644
--- a/browserid/static/dialog/resources/error-messages.js
+++ b/browserid/static/dialog/resources/error-messages.js
@@ -38,44 +38,44 @@ BrowserID.Errors = (function(){
var Errors = {
authentication: {
type: "serverError",
- message: "Error Authenticating",
- description: "There was a technical problem while trying to log you in. Yucky!"
+ title: "Error Authenticating",
+ message: "There was a technical problem while trying to log you in. Yucky!"
},
addEmail: {
type: "serverError",
- message: "Error Adding Address",
- description: "There was a technical problem while trying to add this email to your account. Yucky!"
+ title: "Error Adding Address",
+ message: "There was a technical problem while trying to add this email to your account. Yucky!"
},
checkAuthentication: {
type: "serverError",
- message: "Error Checking Authentication",
- description: "There was a technical problem while trying to log you in. Yucky!"
+ title: "Error Checking Authentication",
+ message: "There was a technical problem while trying to log you in. Yucky!"
},
createAccount: {
type: "serverError",
- message: "Error Creating Account",
- description: "There was a technical problem while trying to create your account. Yucky!"
+ title: "Error Creating Account",
+ message: "There was a technical problem while trying to create your account. Yucky!"
},
registration: {
type: "serverError",
- message: "Registration Failed",
- description: "An error was encountered and the signup cannot be completed. Yucky!"
+ title: "Registration Failed",
+ message: "An error was encountered and the signup cannot be completed. Yucky!"
},
signIn: {
type: "serverError",
- message: "Signin Failed",
- description: "There was an error signing in. Yucky!"
+ title: "Signin Failed",
+ message: "There was an error signing in. Yucky!"
},
syncAddress: {
type: "serverError",
- message: "Error Syncing Address",
- description: "There was a technical problem while trying to synchronize your account. Yucky!"
+ title: "Error Syncing Address",
+ message: "There was a technical problem while trying to synchronize your account. Yucky!"
}
};
diff --git a/browserid/static/dialog/resources/wait-messages.js b/browserid/static/dialog/resources/wait-messages.js
index 190074c3096c8df63338351037e84a0805912ac3..561a93a57e623220282b5f0ef749c2db686de8e1 100644
--- a/browserid/static/dialog/resources/wait-messages.js
+++ b/browserid/static/dialog/resources/wait-messages.js
@@ -37,24 +37,15 @@ BrowserID.Wait = (function(){
var Wait = {
authentication: {
- message: "Finishing Sign In...",
- description: "In just a moment you'll be signed into BrowserID."
+ title: "Finishing Sign In...",
+ message: "In just a moment you'll be signed into BrowserID."
},
- addEmail: {
- message: "One Moment Please...",
- description: "We're adding this email to your account, this should only take a couple of seconds."
- },
-
- checkAuth: {
- message: "Communicating with server",
- description: "Just a moment while we talk with the server."
- },
-
- createAccount: {
- message: "One Moment Please...",
- description: "We're creating your account, this should only take a couple of seconds."
+ generateKey: {
+ title: "Finishing Sign In...",
+ message: "Please wait just a moment while your account is authenticated."
}
+
};
diff --git a/browserid/static/dialog/test/qunit/controllers/page_controller_unit_test.js b/browserid/static/dialog/test/qunit/controllers/page_controller_unit_test.js
new file mode 100644
index 0000000000000000000000000000000000000000..fca829d5c917981be1272ff7ee2148d1f089fa5c
--- /dev/null
+++ b/browserid/static/dialog/test/qunit/controllers/page_controller_unit_test.js
@@ -0,0 +1,146 @@
+/*jshint browsers:true, forin: true, laxbreak: true */
+/*global steal: true, test: true, start: true, stop: true, module: true, ok: true, equal: true, BrowserID:true */
+/* ***** BEGIN LICENSE BLOCK *****
+ * Version: MPL 1.1/GPL 2.0/LGPL 2.1
+ *
+ * The contents of this file are subject to the Mozilla Public License Version
+ * 1.1 (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ * http://www.mozilla.org/MPL/
+ *
+ * Software distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License
+ * for the specific language governing rights and limitations under the
+ * License.
+ *
+ * The Original Code is Mozilla BrowserID.
+ *
+ * The Initial Developer of the Original Code is Mozilla.
+ * Portions created by the Initial Developer are Copyright (C) 2011
+ * the Initial Developer. All Rights Reserved.
+ *
+ * Contributor(s):
+ *
+ * Alternatively, the contents of this file may be used under the terms of
+ * either the GNU General Public License Version 2 or later (the "GPL"), or
+ * the GNU Lesser General Public License Version 2.1 or later (the "LGPL"),
+ * in which case the provisions of the GPL or the LGPL are applicable instead
+ * of those above. If you wish to allow use of your version of this file only
+ * under the terms of either the GPL or the LGPL, and not to allow others to
+ * use your version of this file under the terms of the MPL, indicate your
+ * decision by deleting the provisions above and replace them with the notice
+ * and other provisions required by the GPL or the LGPL. If you do not delete
+ * the provisions above, a recipient may use your version of this file under
+ * the terms of any one of the MPL, the GPL or the LGPL.
+ *
+ * ***** END LICENSE BLOCK ***** */
+steal.plugins("jquery").then("/dialog/controllers/page_controller", function() {
+ "use strict";
+
+ var controller, el,
+ bodyTemplate = "testBodyTemplate.ejs",
+ waitTemplate = "wait.ejs";
+
+ module("PageController", {
+ setup: function() {
+ el = $("#page_controller");
+ },
+
+ teardown: function() {
+ el.find("#formWrap .contents").html("");
+ el.find("#wait .contents").html("");
+ el.find("#error .contents").html("");
+ controller.destroy();
+ }
+ });
+
+ test("page controller with no template causes no side effects", function() {
+ controller = el.page().controller();
+
+ var html = el.find("#formWrap .contents").html();
+ equal(html, "", "with no template specified, no text is loaded");
+
+ html = el.find("#wait .contents").html();
+ equal(html, "", "with no template specified, no text is loaded");
+ });
+
+ test("page controller with body template renders in #formWrap .contents", function() {
+ controller = el.page({
+ bodyTemplate: bodyTemplate,
+ bodyVars: {
+ title: "Test title",
+ message: "Test message"
+ }
+ }).controller();
+
+ var html = el.find("#formWrap .contents").html();
+ ok(html.length, "with template specified, form text is loaded");
+
+
+ var input = el.find("input").eq(0);
+ ok(input.is(":focus"), "make sure the first input is focused");
+
+ html = el.find("#wait .contents").html();
+ equal(html, "", "with body template specified, wait text is not loaded");
+ });
+
+ test("page controller with wait template renders in #wait .contents", function() {
+ controller = el.page({
+ waitTemplate: waitTemplate,
+ waitVars: {
+ title: "Test title",
+ message: "Test message"
+ }
+ }).controller();
+
+ var html = el.find("#formWrap .contents").html();
+ equal(html, "", "with wait template specified, form is ignored");
+
+ html = el.find("#wait .contents").html();
+ ok(html.length, "with wait template specified, wait text is loaded");
+ });
+
+ test("renderError renders an error message", function() {
+ controller = el.page({
+ waitTemplate: waitTemplate,
+ waitVars: {
+ title: "Test title",
+ message: "Test message"
+ }
+ }).controller();
+
+ controller.renderError({
+ title: "error title",
+ message: "error message"
+ });
+
+ var html = el.find("#error .contents").html();
+ // XXX underpowered test, we don't actually check the contents.
+ ok(html.length, "with error template specified, error text is loaded");
+ });
+
+ test("getErrorDialog gets a function that can be used to render an error message", function() {
+ controller = el.page({
+ waitTemplate: waitTemplate,
+ waitVars: {
+ title: "Test title",
+ message: "Test message"
+ }
+ }).controller();
+
+ var func = controller.getErrorDialog({
+ title: "error title",
+ message: "error message"
+ });
+
+ equal(typeof func, "function", "a function was returned from getErrorDialog");
+ func();
+
+ var html = el.find("#error .contents").html();
+ // XXX underpowered test, we don't actually check the contents.
+ ok(html.length, "when function is run, error text is loaded");
+
+ });
+
+});
+
diff --git a/browserid/static/dialog/test/qunit/qunit.js b/browserid/static/dialog/test/qunit/qunit.js
index 9c0289f75ab429893ca827cdbbc14277f93c65ac..435935bdb970b11177eb07a37efc7aaa60a63e99 100644
--- a/browserid/static/dialog/test/qunit/qunit.js
+++ b/browserid/static/dialog/test/qunit/qunit.js
@@ -3,9 +3,18 @@ steal("/dialog/resources/browserid.js",
"/dialog/resources/tooltip.js",
"/dialog/resources/validation.js",
"/dialog/resources/underscore-min.js")
- .plugins("funcunit/qunit")
+ .plugins(
+ "jquery",
+ "jquery/controller",
+ "jquery/controller/subscribe",
+ "jquery/controller/view",
+ "jquery/view/ejs",
+ "funcunit/qunit")
+ .views('testBodyTemplate.ejs')
+ .views('wait.ejs')
.then("browserid_unit_test")
- .then("validation_unit_test")
- .then("storage_unit_test")
- .then("network_unit_test")
- .then("user_unit_test")
+ .then("controllers/page_controller_unit_test")
+ .then("resources/validation_unit_test")
+ .then("resources/storage_unit_test")
+ .then("resources/network_unit_test")
+ .then("resources/user_unit_test")
diff --git a/browserid/static/dialog/test/qunit/network_unit_test.js b/browserid/static/dialog/test/qunit/resources/network_unit_test.js
similarity index 100%
rename from browserid/static/dialog/test/qunit/network_unit_test.js
rename to browserid/static/dialog/test/qunit/resources/network_unit_test.js
diff --git a/browserid/static/dialog/test/qunit/storage_unit_test.js b/browserid/static/dialog/test/qunit/resources/storage_unit_test.js
similarity index 100%
rename from browserid/static/dialog/test/qunit/storage_unit_test.js
rename to browserid/static/dialog/test/qunit/resources/storage_unit_test.js
diff --git a/browserid/static/dialog/test/qunit/user_unit_test.js b/browserid/static/dialog/test/qunit/resources/user_unit_test.js
similarity index 100%
rename from browserid/static/dialog/test/qunit/user_unit_test.js
rename to browserid/static/dialog/test/qunit/resources/user_unit_test.js
diff --git a/browserid/static/dialog/test/qunit/validation_unit_test.js b/browserid/static/dialog/test/qunit/resources/validation_unit_test.js
similarity index 100%
rename from browserid/static/dialog/test/qunit/validation_unit_test.js
rename to browserid/static/dialog/test/qunit/resources/validation_unit_test.js
diff --git a/browserid/static/dialog/views/authenticate.ejs b/browserid/static/dialog/views/authenticate.ejs
index 81150fcbab15c53b08bb085340f91acd6e70b671..3341bac640d68f72ff23d609be20cdc9eb3e736f 100644
--- a/browserid/static/dialog/views/authenticate.ejs
+++ b/browserid/static/dialog/views/authenticate.ejs
@@ -1,78 +1,54 @@
- <!-- This takes care of the core user creation/authentication. When the user
- enters an email address and hits "next", the address will be checked
- against the currently registered addresses. If the address exists,
- the password container is shown, if the address does not exist, the
- option to create a new account is given.
- -->
+ <strong>Sign in using</strong>
+ <ul class="inputs">
- <div id="favicon">
- <div class="table">
- <div class="vertical">
- <strong><%= sitename %></strong>
- </div>
- </div>
- </div>
+ <li>
+ <label for="email" class="serif">Email</label>
+ <input id="email" class="sans" type="email" autocapitalize="off" autocorrect="off" value="<%= email %>" />
- <div id="signIn">
- <div class="arrow"></div>
- <div class="table">
- <div class="vertical">
- <strong>Sign in using</strong>
- <ul class="inputs">
+ <div id="email_format" class="tooltip" for="email">
+ This field must be an email address.
+ </div>
- <li>
- <label for="email" class="serif">Email</label>
- <input id="email" class="sans" type="email" autocapitalize="off" autocorrect="off" value="<%= email %>" />
+ <div id="email_required" class="tooltip" for="email">
+ The email field is required.
+ </div>
+ </li>
- <div id="email_format" class="tooltip" for="email">
- This field must be an email address.
- </div>
+ <li id="hint_section" class="start">
+ <p>Enter your email address to sign in to <strong><%= sitename %></strong></p>
+ </li>
- <div id="email_required" class="tooltip" for="email">
- The email field is required.
- </div>
- </li>
+ <li id="create_text_section" class="newuser">
+ <p><strong>Welcome to BrowserID!</strong></p>
+ <p>This email looks new, so let's get you set up.</p>
+ </li>
- <li id="hint_section" class="start">
- <p>Enter your email address to sign in to <strong><%= sitename %></strong></p>
- </li>
+ <li id="password_section" class="returning">
- <li id="create_text_section" class="newuser">
- <p><strong>Welcome to BrowserID!</strong></p>
- <p>This email looks new, so let's get you set up.</p>
- </li>
+ <label for="password" class="half serif">Password</label>
+ <div class="half right">
+ <a id="forgotPassword" href="#">forgot your password?</a>
+ </div>
+ <input id="password" class="sans" type="password" maxlength="80">
- <li id="password_section" class="returning">
- <label for="password" class="half serif">Password</label>
- <div class="half right">
- <a id="forgotPassword" href="#">forgot your password?</a>
- </div>
- <input id="password" class="sans" type="password" maxlength="80">
+ <div id="password_required" class="tooltip" for="password">
+ The password field is required.
+ </div>
+ <div id="cannot_authenticate" class="tooltip" for="password">
+ The account cannot be logged in with this username and password.
+ </div>
+ </li>
+
+ </ul>
- <div id="password_required" class="tooltip" for="password">
- The password field is required.
- </div>
-
- <div id="cannot_authenticate" class="tooltip" for="password">
- The account cannot be logged in with this username and password.
- </div>
- </li>
-
- </ul>
-
- <div class="submit cf">
- <button class="start">next</button>
- <button class="newuser">Verify Email</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>
- </div>
+ <div class="submit cf">
+ <button class="start">next</button>
+ <button class="newuser">Verify Email</button>
+ <button class="returning">sign in</button>
+ <button class="forgot">Reset Password</button>
+ <button id="cancel_forgot_password" class="forgot">Cancel</button>
+ </div>
diff --git a/browserid/static/dialog/views/confirmemail.ejs b/browserid/static/dialog/views/confirmemail.ejs
index 008e988e20443aba4aeb436c0990e442b88ffeaa..6b264b86267b4e5bba8a8b33bf5f9dd875b616e0 100644
--- a/browserid/static/dialog/views/confirmemail.ejs
+++ b/browserid/static/dialog/views/confirmemail.ejs
@@ -1,4 +1,4 @@
- <p><strong>Check your email!</strong></p>
+ <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>
diff --git a/browserid/static/dialog/views/pickemail.ejs b/browserid/static/dialog/views/pickemail.ejs
index e710c8e829bd4522f89f6cb773240e1bb08f2c66..f7d3c60a5072b187d839501bf23fbc97bdf4ce23 100644
--- a/browserid/static/dialog/views/pickemail.ejs
+++ b/browserid/static/dialog/views/pickemail.ejs
@@ -1,72 +1,55 @@
- <div id="favicon">
- <div class="table">
- <div class="vertical">
- <strong><%= sitename %></strong>
- </div>
+ <strong>Sign in using</strong>
+
+ <div id="selectEmail" class="form_section">
+ <ul class="inputs">
+ <% _.each(identities, function(email_obj, email_address) { %>
+ <li>
+ <label for="<%= email_address %>" class="serif">
+ <input type="radio" name="email" id="<%= email_address %>" value="<%= email_address %>" />
+ <%= email_address %>
+ </label>
+ </li>
+ <% }); %>
+ </ul>
+
+ <div class="submit add cf">
+ <button id="signInButton">sign in</button>
+ <p>
+ <a id="thisIsNotMe" href="#">This is not me</a>
+ <a id="useNewEmail" href="#">Use a different email</a>
+ </p>
</div>
</div>
+ <div id="addEmail" class="cf form_section">
- <div id="signIn">
- <div class="arrow"></div>
- <div class="table">
- <div class="vertical">
- <strong>Sign in using</strong>
+ <ul class="inputs">
+ <li>
+ <label for="newEmail">New email address</label>
+ <input id="newEmail" name="newEmail" type="email" />
- <div id="selectEmail" class="form_section">
- <ul class="inputs">
- <% _.each(identities, function(email_obj, email_address) { %>
- <li>
- <label for="<%= email_address %>" class="serif">
- <input type="radio" name="email" id="<%= email_address %>" value="<%= email_address %>" />
- <%= email_address %>
- </label>
- </li>
- <% }); %>
- </ul>
-
- <div class="submit add cf">
- <button id="signInButton">sign in</button>
- <p>
- <a id="thisIsNotMe" href="#">This is not me</a>
- <a id="useNewEmail" href="#">Use a different email</a>
- </p>
- </div>
+ <div id="email_format" class="tooltip" for="newEmail">
+ This field must be an email address.
</div>
- <div id="addEmail" class="cf form_section">
-
- <ul class="inputs">
- <li>
- <label for="newEmail">New email address</label>
- <input id="newEmail" name="newEmail" type="email" />
-
- <div id="email_format" class="tooltip" for="newEmail">
- This field must be an email address.
- </div>
-
- <div id="email_required" class="tooltip" for="newEmail">
- The email field is required.
- </div>
-
- <div id="could_not_add" class="tooltip" for="newEmail">
- This email address could not be added.
- </div>
-
- <div id="already_taken" class="tooltip" for="newEmail">
- This email address is already taken.
- </div>
- </li>
- </ul>
+ <div id="email_required" class="tooltip" for="newEmail">
+ The email field is required.
+ </div>
- <div class="submit cf">
- <button id="addNewEmail">add</button>
- <button id="cancelNewEmail">cancel</button>
- </div>
+ <div id="could_not_add" class="tooltip" for="newEmail">
+ This email address could not be added.
+ </div>
+ <div id="already_taken" class="tooltip" for="newEmail">
+ This email address is already taken.
</div>
+ </li>
+ </ul>
- </div>
+ <div class="submit cf">
+ <button id="addNewEmail">add</button>
+ <button id="cancelNewEmail">cancel</button>
</div>
+
</div>
diff --git a/browserid/static/dialog/views/testBodyTemplate.ejs b/browserid/static/dialog/views/testBodyTemplate.ejs
new file mode 100644
index 0000000000000000000000000000000000000000..77a06e46bbf5acedeb0fbb140b6f289c40389a8b
--- /dev/null
+++ b/browserid/static/dialog/views/testBodyTemplate.ejs
@@ -0,0 +1,2 @@
+<input type="text" value="" />
+
diff --git a/browserid/views/dialog.ejs b/browserid/views/dialog.ejs
index 9adac52ad887be1a5c3913f2c8369df5e82e6ba3..4bde9a26a0106b5e5f6664f4f357ef107b42cfc3 100644
--- a/browserid/views/dialog.ejs
+++ b/browserid/views/dialog.ejs
@@ -23,20 +23,42 @@
</ul>
</header>
- <div id="formWrap" class="cf">
- <form novalidate class="cf">
+ <div id="content">
+ <section id="formWrap">
+ <form novalidate>
+ <div id="favicon">
+ <div class="vertical">
+ <strong id="sitename"></strong>
+ </div>
+ </div>
- <!-- All of this is going to be replaced on startup, but we need some temporary placeholder -->
- <h2>Communicating with server</h2>
- <p>Just a moment while we talk with the server.</p>
+ <div id="signIn">
+ <div class="arrow"></div>
+ <div class="table">
+ <div class="vertical contents">
+ </div>
+ </div>
+ </div>
+ </form>
+ </section>
- </form>
- <div id="error_dialog">
- <h3 class="title"></h3>
- <p class="content"></p>
- </div>
+ <section id="wait">
+ <div class="table">
+ <div class="vertical contents">
+ <h2>Communicating with server</h2>
+ <p>Just a moment while we talk with the server.</p>
+ </div>
+ </div>
+ </section>
+
+ <section id="error">
+ <div class="table">
+ <div class="vertical contents">
+ </div>
+ </div>
+ </section>
</div>
<footer>