From 1b3d5e434fbe811cc4f30c76d6c30e84420fa275 Mon Sep 17 00:00:00 2001
From: Shane Tomlinson <stomlinson@mozilla.com>
Date: Wed, 14 Dec 2011 19:51:44 +0000
Subject: [PATCH] Printing an "new user? learn about Browser ID" message for
first time users of the manage page.
close #384
---
resources/static/css/style.css | 22 +++++++++++++++
resources/static/pages/manage_account.js | 10 +++++++
resources/static/shared/storage.js | 27 +++++++++++++++++++
.../qunit/pages/manage_account_unit_test.js | 10 +++++++
.../test/qunit/shared/storage_unit_test.js | 9 +++++++
resources/views/index.ejs | 4 +++
resources/views/layout.ejs | 2 +-
7 files changed, 83 insertions(+), 1 deletion(-)
diff --git a/resources/static/css/style.css b/resources/static/css/style.css
index 02e790e53..37e2a3a01 100644
--- a/resources/static/css/style.css
+++ b/resources/static/css/style.css
@@ -178,6 +178,28 @@ div.steps {
padding: 75px 125px;
}
+#newuser {
+ background-color: #faca33;
+ line-height: 32px;
+ border-radius: 4px;
+ margin-bottom: 20px;
+ text-align: center;
+ color: #626160;
+ text-shadow: 1px 1px 0 rgba(255,255,255,0.5);
+ height: 0;
+ opacity: 0;
+}
+
+.newuser #newuser {
+ height: 32px;
+ opacity: 1;
+ -webkit-transition: all 500ms;
+ -moz-transition: all 500ms;
+ -ms-transition: all 500ms;
+ -o-transition: all 500ms;
+ transition: all 500ms;
+}
+
#manage {
padding: 75px;
}
diff --git a/resources/static/pages/manage_account.js b/resources/static/pages/manage_account.js
index 2bc2e54ff..c606a69f4 100644
--- a/resources/static/pages/manage_account.js
+++ b/resources/static/pages/manage_account.js
@@ -41,6 +41,7 @@ BrowserID.manageAccount = (function() {
user = bid.User,
errors = bid.Errors,
dom = bid.DOM,
+ storage = bid.Storage,
pageHelpers = bid.PageHelpers,
cancelEvent = pageHelpers.cancelEvent,
confirmAction = confirm,
@@ -218,6 +219,13 @@ BrowserID.manageAccount = (function() {
$("body").removeClass("edit");
}
+ function displayHelpTextToNewUser() {
+ var newUser = !storage.manage_page.get("has_visited_manage_page");
+
+ dom[newUser ? "addClass" : "removeClass"]("body", "newuser");
+ storage.manage_page.set("has_visited_manage_page", true);
+ }
+
function init(options, oncomplete) {
options = options || {};
@@ -229,6 +237,8 @@ BrowserID.manageAccount = (function() {
dom.bindEvent("#cancelManage", "click", cancelEvent(cancelManage));
syncAndDisplayEmails(oncomplete);
+
+ displayHelpTextToNewUser();
}
// BEGIN TESTING API
diff --git a/resources/static/shared/storage.js b/resources/static/shared/storage.js
index d774e86d7..3077cdfdf 100644
--- a/resources/static/shared/storage.js
+++ b/resources/static/shared/storage.js
@@ -53,6 +53,7 @@ BrowserID.Storage = (function() {
storage.removeItem("tempKeypair");
storage.removeItem("stagedOnBehalfOf");
storage.removeItem("siteInfo");
+ storage.removeItem("managePage");
}
function getEmails() {
@@ -191,6 +192,22 @@ BrowserID.Storage = (function() {
}
+ function managePageGet(key) {
+ var allInfo = JSON.parse(storage.managePage || "{}");
+ return allInfo[key];
+ }
+
+ function managePageSet(key, value) {
+ var allInfo = JSON.parse(storage.managePage || "{}");
+ allInfo[key] = value;
+ storage.managePage = JSON.stringify(allInfo);
+ }
+
+ function managePageRemove(key) {
+ var allInfo = JSON.parse(storage.managePage || "{}");
+ delete allInfo[key];
+ storage.managePage = JSON.stringify(allInfo);
+ }
return {
/**
* Add an email address and optional key pair.
@@ -247,6 +264,16 @@ BrowserID.Storage = (function() {
remove: siteRemove
},
+ manage_page: {
+ /**
+ * Set a data field for the manage page
+ * @method managePage.set
+ */
+ set: managePageSet,
+ get: managePageGet,
+ remove: managePageRemove
+ },
+
/**
* Clear all stored data - email addresses, key pairs, temporary key pairs,
* site/email associations.
diff --git a/resources/static/test/qunit/pages/manage_account_unit_test.js b/resources/static/test/qunit/pages/manage_account_unit_test.js
index ef3871ea4..1906a5919 100644
--- a/resources/static/test/qunit/pages/manage_account_unit_test.js
+++ b/resources/static/test/qunit/pages/manage_account_unit_test.js
@@ -155,4 +155,14 @@
});
});
+ asyncTest("first time a user goes to page should see help text", function() {
+ bid.manageAccount(mocks, function() {
+ equal($("body").hasClass("newuser"), true, "body has the newuser class on first visit");
+
+ bid.manageAccount(mocks, function() {
+ equal($("body").hasClass("newuser"), false, "body does not have the newuser class on repeat visits");
+ start();
+ });
+ });
+ });
}());
diff --git a/resources/static/test/qunit/shared/storage_unit_test.js b/resources/static/test/qunit/shared/storage_unit_test.js
index b75d5131d..8f2e578bb 100644
--- a/resources/static/test/qunit/shared/storage_unit_test.js
+++ b/resources/static/test/qunit/shared/storage_unit_test.js
@@ -164,6 +164,15 @@
equal(typeof email, "undefined", "after removing an email address, email for site is no longer available");
});
+ test("user.manage_page.set", function() {
+ storage.manage_page.set("user_has_visited", true);
+
+ equal(storage.manage_page.get("user_has_visited"), true, "user_has_visited set correctly");
+
+ storage.clear();
+ equal(typeof storage.manage_page.get("user_has_visited"), "undefined", "after reset, user_has_visited reset correctly");
+ });
+
test("storeTemporaryKeypair", function() {
// XXX needs a test
});
diff --git a/resources/views/index.ejs b/resources/views/index.ejs
index 0f39976e1..46cae5c26 100644
--- a/resources/views/index.ejs
+++ b/resources/views/index.ejs
@@ -1,4 +1,8 @@
<div id="content" style="display:none" class="display_auth">
+ <div id="newuser">
+ New to BrowserID? <a href="/about">Learn more</a>
+ </div>
+
<div id="manage">
<h1 class="serif">Account Manager</h1>
<div class="buttonrow cf">
diff --git a/resources/views/layout.ejs b/resources/views/layout.ejs
index abb211356..638478881 100644
--- a/resources/views/layout.ejs
+++ b/resources/views/layout.ejs
@@ -54,7 +54,7 @@
<div id="wrapper">
- <header id="header">
+ <header id="header" class="cf">
<ul class="cf">
<li><a class="home" href="/"></a></li>
</ul>
--
GitLab