From 1394121e1401d843134a8ba1a58374afa85dc2e2 Mon Sep 17 00:00:00 2001
From: Shane Tomlinson <stomlinson@mozilla.com>
Date: Thu, 3 Nov 2011 20:30:50 +0000
Subject: [PATCH] Adding directions once the user has verified their password.
* Added some unit tests for verify_email_address
* Standardized ids and class names between verifyemail.ejs and verifyuser.ejs
close #528
---
resources/static/css/style.css | 8 +-
resources/static/dialog/qunit.html | 7 +-
.../qunit/pages/add_email_address_test.js | 18 +-
.../qunit/pages/verify_email_address_test.js | 174 ++++++++++++++++++
resources/static/dialog/test/qunit/qunit.js | 1 +
.../static/js/pages/add_email_address.js | 4 +-
.../static/js/pages/verify_email_address.js | 69 ++++---
resources/views/verifyemail.ejs | 7 +-
resources/views/verifyuser.ejs | 15 +-
9 files changed, 249 insertions(+), 54 deletions(-)
create mode 100644 resources/static/dialog/test/qunit/pages/verify_email_address_test.js
diff --git a/resources/static/css/style.css b/resources/static/css/style.css
index 64e8c5f17..69a40d3e1 100644
--- a/resources/static/css/style.css
+++ b/resources/static/css/style.css
@@ -736,16 +736,20 @@ h1 {
}
-#congrats #siteinfo, #congrats {
+.siteinfo, #congrats {
display: none;
}
#congrats p {
color: #62615F;
- display: block;
+ /*display: block;*/
text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5);
}
+#congrats .siteinfo {
+ margin-top: 10px;
+}
+
#congrats .website {
display: block;
text-align: center;
diff --git a/resources/static/dialog/qunit.html b/resources/static/dialog/qunit.html
index 023680721..17d4b0b53 100644
--- a/resources/static/dialog/qunit.html
+++ b/resources/static/dialog/qunit.html
@@ -33,10 +33,13 @@
</div>
<input id="email" />
+ <input id="password" />
+ <input id="vpassword" />
+ <div id="congrats">Congrats!</div>
<span id="cannotconfirm" class="error">Cannot confirm</span>
<span id="cannotcommunicate" class="error">Cannot communicate</span>
- <span id="siteinfo" class="error"><span class="website"></span></span>
- <span class=".hint">Hint</span>
+ <span class="siteinfo" class="error"><span class="website"></span></span>
+ <span class="hint">Hint</span>
</div>
<div id="needsTooltip">Tooltip Anchor</div>
diff --git a/resources/static/dialog/test/qunit/pages/add_email_address_test.js b/resources/static/dialog/test/qunit/pages/add_email_address_test.js
index d353a848f..f457a7425 100644
--- a/resources/static/dialog/test/qunit/pages/add_email_address_test.js
+++ b/resources/static/dialog/test/qunit/pages/add_email_address_test.js
@@ -64,8 +64,8 @@ steal.plugins("jquery").then("/dialog/test/qunit/mocks/xhr", "/dialog/resources/
setTimeout(function() {
equal($("#email").text(), "testuser@testuser.com", "email set");
- ok($("#siteinfo").is(":visible"), "siteinfo is visible when we say what it is");
- equal($("#siteinfo .website").text(), "browserid.org", "origin is updated");
+ ok($(".siteinfo").is(":visible"), "siteinfo is visible when we say what it is");
+ equal($(".website").text(), "browserid.org", "origin is updated");
start();
}, 500);
stop();
@@ -76,8 +76,8 @@ steal.plugins("jquery").then("/dialog/test/qunit/mocks/xhr", "/dialog/resources/
setTimeout(function() {
equal($("#email").text(), "testuser@testuser.com", "email set");
- equal($("#siteinfo").is(":visible"), false, "siteinfo is not visible without having it");
- equal($("#siteinfo .website").text(), "", "origin is not updated");
+ equal($(".siteinfo").is(":visible"), false, "siteinfo is not visible without having it");
+ equal($(".siteinfo .website").text(), "", "origin is not updated");
start();
}, 500);
stop();
@@ -105,14 +105,4 @@ steal.plugins("jquery").then("/dialog/test/qunit/mocks/xhr", "/dialog/resources/
stop();
});
- test("addEmailAddress with completeEmailRegistration XHR failure", function() {
- xhr.useResult("ajaxError");
- bid.addEmailAddress("token");
-
- setTimeout(function() {
- ok($("#cannotcommunicate").is(":visible"), "cannot communicate box is visible");
- start();
- }, 500);
- stop();
- });
});
diff --git a/resources/static/dialog/test/qunit/pages/verify_email_address_test.js b/resources/static/dialog/test/qunit/pages/verify_email_address_test.js
new file mode 100644
index 000000000..306540fbd
--- /dev/null
+++ b/resources/static/dialog/test/qunit/pages/verify_email_address_test.js
@@ -0,0 +1,174 @@
+/*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/test/qunit/mocks/xhr", "/dialog/resources/network", "/js/pages/verify_email_address", function() {
+ "use strict";
+
+ var bid = BrowserID,
+ network = bid.Network,
+ storage = bid.Storage,
+ xhr = bid.Mocks.xhr,
+ validToken = true;
+
+ module("pages/verify_email_address", {
+ setup: function() {
+ network.setXHR(xhr);
+ xhr.useResult("valid");
+ $(".error").stop().hide();
+ $(".website").text("");
+ },
+ teardown: function() {
+ network.setXHR($);
+ $(".error").stop().hide();
+ $(".website").text("");
+ }
+ });
+
+ test("verifyEmailAddress with good token and site", function() {
+ storage.setStagedOnBehalfOf("browserid.org");
+
+ bid.verifyEmailAddress("token");
+
+ setTimeout(function() {
+ equal($("#email").val(), "testuser@testuser.com", "email set");
+ ok($(".siteinfo").is(":visible"), "siteinfo is visible when we say what it is");
+ equal($(".website").text(), "browserid.org", "origin is updated");
+ start();
+ }, 500);
+ stop();
+ });
+
+ test("verifyEmailAddress with good token and nosite", function() {
+ $(".siteinfo").hide();
+ storage.setStagedOnBehalfOf("");
+
+ bid.verifyEmailAddress("token");
+
+
+ setTimeout(function() {
+ equal($("#email").val(), "testuser@testuser.com", "email set");
+ equal($(".siteinfo").is(":visible"), false, "siteinfo is not visible without having it");
+ equal($(".siteinfo .website").text(), "", "origin is not updated");
+ start();
+ }, 500);
+ stop();
+ });
+
+ test("verifyEmailAddress with bad token", function() {
+ xhr.useResult("invalid");
+
+ bid.verifyEmailAddress("token");
+ setTimeout(function() {
+ ok($("#cannotconfirm").is(":visible"), "cannot confirm box is visible");
+ start();
+ }, 500);
+ stop();
+ });
+
+ test("verifyEmailAddress with emailForVerficationToken XHR failure", function() {
+ xhr.useResult("ajaxError");
+ bid.verifyEmailAddress("token");
+
+ setTimeout(function() {
+ ok($("#cannotcommunicate").is(":visible"), "cannot communicate box is visible");
+ start();
+ }, 500);
+ stop();
+ });
+
+ test("submit with good token, both passwords", function() {
+ bid.verifyEmailAddress("token");
+
+
+ $("#password").val("password");
+ $("#vpassword").val("password");
+
+ bid.verifyEmailAddress.submit();
+
+ setTimeout(function() {
+ equal($("#congrats").is(":visible"), true, "congrats is visible, we are complete");
+ start();
+ }, 500);
+ stop();
+ });
+
+ test("submit with good token, missing password", function() {
+ bid.verifyEmailAddress("token");
+
+
+ $("#password").val("");
+ $("#vpassword").val("password");
+
+ bid.verifyEmailAddress.submit();
+
+ setTimeout(function() {
+ equal($("#congrats").is(":visible"), false, "congrats is not visible, missing password");
+ start();
+ }, 500);
+ stop();
+ });
+
+ test("submit with good token, missing verification password", function() {
+ bid.verifyEmailAddress("token");
+
+
+ $("#password").val("password");
+ $("#vpassword").val("");
+
+ bid.verifyEmailAddress.submit();
+
+ setTimeout(function() {
+ equal($("#congrats").is(":visible"), false, "congrats is not visible, missing verification password");
+ start();
+ }, 500);
+ stop();
+ });
+
+ test("submit with good token, different passwords", function() {
+ bid.verifyEmailAddress("token");
+
+ $("#password").val("password");
+ $("#vpassword").val("pass");
+
+ bid.verifyEmailAddress.submit();
+
+ setTimeout(function() {
+ equal($("#congrats").is(":visible"), false, "congrats is not visible, different passwords");
+ start();
+ }, 500);
+ stop();
+ });
+});
diff --git a/resources/static/dialog/test/qunit/qunit.js b/resources/static/dialog/test/qunit/qunit.js
index 414860785..a0eb18633 100644
--- a/resources/static/dialog/test/qunit/qunit.js
+++ b/resources/static/dialog/test/qunit/qunit.js
@@ -24,6 +24,7 @@ steal("/dialog/resources/browserid.js",
.then("include_unit_test")
.then("relay/relay_unit_test")
.then("pages/add_email_address_test")
+ .then("pages/verify_email_address_test")
.then("pages/forgot_unit_test")
.then("resources/tooltip_unit_test")
.then("resources/channel_unit_test")
diff --git a/resources/static/js/pages/add_email_address.js b/resources/static/js/pages/add_email_address.js
index 58b4198f6..0faff6d6c 100644
--- a/resources/static/js/pages/add_email_address.js
+++ b/resources/static/js/pages/add_email_address.js
@@ -43,8 +43,8 @@
$("#email").text(info.email);
if (info.origin) {
- $("#siteinfo .website").html(info.origin);
- $("#siteinfo").show();
+ $(".website").html(info.origin);
+ $(".siteinfo").show();
}
$("#signUpForm").delay(2000).fadeOut(ANIMATION_TIME, function() {
diff --git a/resources/static/js/pages/verify_email_address.js b/resources/static/js/pages/verify_email_address.js
index 6c97f5347..5d3002a60 100644
--- a/resources/static/js/pages/verify_email_address.js
+++ b/resources/static/js/pages/verify_email_address.js
@@ -1,4 +1,4 @@
-/*globals BrowserID:true, $:true */
+/*globals BrowserID: true, $:true */
/* ***** BEGIN LICENSE BLOCK *****
* Version: MPL 1.1/GPL 2.0/LGPL 2.1
*
@@ -37,43 +37,47 @@
(function() {
"use strict";
- var bid = BrowserID;
+ var bid = BrowserID,
+ token;
function showError(el) {
$(el).fadeIn(250);
$("#signUpForm").remove();
}
- bid.verifyEmailAddress = function(token) {
- $("#signUpForm").submit(function(event) {
- event.preventDefault();
+ function submit(event) {
+ if (event) event.preventDefault();
- var pass = $("#password").val(),
- vpass = $("#vpassword").val();
+ var pass = $("#password").val(),
+ vpass = $("#vpassword").val();
- var valid = bid.Validation.passwordAndValidationPassword(pass, vpass);
+ var valid = bid.Validation.passwordAndValidationPassword(pass, vpass);
- if (valid) {
- bid.Network.completeUserRegistration(token, pass, function onSuccess(registered) {
- if (registered) {
- $("#signUpForm").hide();
- $("#congrats").fadeIn(250);
- }
- else {
- showError("#cannotcomplete");
- }
- }, function onFailure() {
- showError("#cannotconnect");
- });
- }
- });
+ if (valid) {
+ bid.Network.completeUserRegistration(token, pass, function onSuccess(registered) {
+ if (registered) {
+ $("#signUpForm").hide();
+ $("#congrats").fadeIn(250);
+ }
+ else {
+ showError("#cannotcomplete");
+ }
+ }, function onFailure() {
+ showError("#cannotcommunicate");
+ });
+ }
+ }
+
+ function init(tok) {
+ $("#signUpForm").bind("submit", submit);
+ $(".siteinfo").hide();
+ $("#congrats").hide();
+ token = tok;
var staged = bid.Storage.getStagedOnBehalfOf();
if (staged) {
$('.website').html(staged);
- }
- else {
- $('.hint').hide();
+ $('.siteinfo').show();
}
// go get the email address
@@ -82,9 +86,20 @@
$('#email').val(email);
}
else {
- showError("#badtoken");
+ showError("#cannotconfirm");
}
+ }, function() {
+ showError("#cannotcommunicate");
});
+ }
+
+ function reset() {
+ $("#signUpForm").unbind("submit", submit);
+ }
+
+ init.submit = submit;
+ init.reset = reset;
+
+ bid.verifyEmailAddress = init;
- };
}());
diff --git a/resources/views/verifyemail.ejs b/resources/views/verifyemail.ejs
index d9ee49385..ffaf2540d 100644
--- a/resources/views/verifyemail.ejs
+++ b/resources/views/verifyemail.ejs
@@ -4,8 +4,9 @@
<h1 class="serif">Email Verification</h1>
<ul class="notifications">
- <li class="notification error" id="cannotconnect">Error comunicating with server.</li>
+ <li class="notification error" id="cannotcommunicate">Error comunicating with server.</li>
<li class="notification error" id="cannotconfirm">Error encountered while attempting to confirm your address. Have you previously verified this address?</li>
+ <li class="notification error" id="cannotcomplete">Error encountered trying to complete registration.</li>
</ul>
<p class="hint">One moment while we attempt to confirm your email address...</p>
@@ -16,11 +17,11 @@
<p class="serif">
<strong id="email">Your address</strong> has been verified!
- <span id="siteinfo">
+ <p class="siteinfo">
Your new address is set up and you should now be signed in.
You may now close this window and go back to
<strong class="website"></strong>
- </span>
+ </p>
</p>
</div>
</div>
diff --git a/resources/views/verifyuser.ejs b/resources/views/verifyuser.ejs
index b173f3580..dbc34d501 100644
--- a/resources/views/verifyuser.ejs
+++ b/resources/views/verifyuser.ejs
@@ -1,13 +1,13 @@
<div id="vAlign" class="display_always">
<div id="signUpFormWrap">
<ul class="notifications">
- <li class="notification error" id="badtoken">There was a problem with your signup link. Has this address already been registered?</li>
- <li class="notification error" id="cannotconnect">Error comunicating with server.</li>
+ <li class="notification error" id="cannotconfirm">There was a problem with your signup link. Has this address already been registered?</li>
+ <li class="notification error" id="cannotcommunicate">Error comunicating with server.</li>
<li class="notification error" id="cannotcomplete">Error encountered trying to complete registration.</li>
</ul>
<form id="signUpForm" class="cf">
- <p class="hint">Finish signing into: <strong><span class="website"></span></strong></p>
+ <p class="hint siteinfo">Finish signing into: <strong><span class="website"></span></strong></p>
<h1 class="serif">Last step!</h1>
@@ -49,7 +49,14 @@
</form>
<div id="congrats">
- <p class="serif">Thank you for signing up with <strong>BrowserID</strong>. You can now use your <strong>BrowserID</strong> account to <em>Sign In</em> or <em>Sign Up</em> to websites all across the web!</p>
+ <p class="serif">Thank you for signing up with <strong>BrowserID</strong>. You can now use your <strong>BrowserID</strong> account to <em>Sign In</em> or <em>Sign Up</em> to websites all across the web!
+ </p>
+
+ <p class="serif siteinfo">
+ Your new address is set up and you should now be signed in.
+ You may now close this window and go back to
+ <strong class="website"></strong>
+ </p>
</div>
</div>
--
GitLab