diff --git a/browserid/compress.sh b/browserid/compress.sh
index e224d4e4a55609b33a2f9e384f79510c3c45f74e..8166eeaafec334165353393eb6f98286989f1c82 100755
--- a/browserid/compress.sh
+++ b/browserid/compress.sh
@@ -44,7 +44,7 @@ echo ''
cd ../js
# re-minimize everything together
-cat jquery-1.6.2.min.js json2.js browserid.js ../dialog/resources/underscore-min.js ../dialog/resources/storage.js ../dialog/resources/browserid-network.js ../dialog/resources/browserid-identities.js pages/index.js pages/add_email_address.js pages/verify_email_address.js pages/manage_account.js pages/signin.js pages/signup.js pages/forgot.js > lib.js
+cat jquery-1.6.2.min.js json2.js browserid.js ../dialog/resources/underscore-min.js ../dialog/resources/storage.js ../dialog/resources/browserid-network.js ../dialog/resources/browserid-identities.js ../dialog/resources/tooltip.js pages/index.js pages/add_email_address.js pages/verify_email_address.js pages/manage_account.js pages/signin.js pages/signup.js pages/forgot.js > lib.js
$UGLIFY < lib.js > lib.min.js
cd ../css
diff --git a/browserid/static/css/style.css b/browserid/static/css/style.css
index d7c40e10ebab7cdf4fa0ee9e050d306c5518a1d5..355babc78fd14c58ca0420cffab7b05189ac9736 100644
--- a/browserid/static/css/style.css
+++ b/browserid/static/css/style.css
@@ -58,6 +58,22 @@ footer {
font-family: 'Monaco', monospace;
}
+.tooltip {
+ position: absolute;
+ top: 10px;
+ left: 10px;
+ background: rgba(0,0,0,.7);
+ color: #fff;
+ border-radius: 5px;
+ padding: 2px 15px;
+ border: 2px solid #000;
+ font-weight: bold;
+ display: none;
+ max-width: 275px;
+ z-index: 5;
+}
+
+
a {
color: #222;
text-decoration: none;
@@ -644,6 +660,10 @@ a.forgot {
font-size: 11px;
}
+.notifications {
+ list-style-type: none;
+}
+
.notifications > .notification {
margin-top: 20px;
padding: 5px;
@@ -652,10 +672,8 @@ a.forgot {
-moz-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
-}
-
-.notifications > .notification {
display: none;
+ text-align: center;
}
.notifications .notification.error {
diff --git a/browserid/static/js/pages/verify_email_address.js b/browserid/static/js/pages/verify_email_address.js
index 7f556fa1788747f4c22c7b33b5d15ff0709a6098..d4355614066107055f57fcdc97d5ca1a3a152048 100644
--- a/browserid/static/js/pages/verify_email_address.js
+++ b/browserid/static/js/pages/verify_email_address.js
@@ -37,7 +37,35 @@
(function() {
"use strict";
- var bid = BrowserID;
+ var bid = BrowserID,
+ tooltip = bid.Tooltip;
+
+ function showError(el) {
+ $(el).fadeIn(250);
+ $("#signUpForm").remove();
+ }
+
+ function validate(pass, vpass) {
+ var valid = false;
+
+ if(!pass) {
+ tooltip.showTooltip("#password_required");
+ }
+ else if(pass.length < 8) {
+ tooltip.showTooltip("#password_too_short");
+ }
+ else if(!vpass) {
+ tooltip.showTooltip("#vpassword_required");
+ }
+ else if(pass !== vpass) {
+ tooltip.showTooltip("#passwords_no_match");
+ }
+ else {
+ valid = true;
+ }
+
+ return valid;
+ }
bid.verifyEmailAddress = function(token) {
$("#signUpForm").submit(function(event) {
@@ -45,16 +73,21 @@
var email = $("#email").val(),
pass = $("#password").val(),
- pass2 = $("#vpassword").val();
+ vpass = $("#vpassword").val();
- if (pass && pass === pass2) {
+ var valid = validate(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");
});
}
});
@@ -73,7 +106,7 @@
$('#email').val(email);
}
else {
- $('#signUpFormWrap').html('There was a problem with your signup link.');
+ showError("#badtoken");
}
});
diff --git a/browserid/views/layout.ejs b/browserid/views/layout.ejs
index af056d0ecfc42a7e0226f1f9666ab24d7ea7e66e..490e5c4659b8b1b4c5cbf9ffd30e9edfb0f7076f 100644
--- a/browserid/views/layout.ejs
+++ b/browserid/views/layout.ejs
@@ -19,15 +19,16 @@
<script src="/dialog/resources/underscore-min.js" type="text/javascript"></script>
<script src="/js/browserid.js" type="text/javascript"></script>
<script src="/js/pages/index.js" type="text/javascript"></script>
+ <script src="/dialog/resources/storage.js" type="text/javascript"></script>
+ <script src="/dialog/resources/browserid-network.js" type="text/javascript"></script>
+ <script src="/dialog/resources/browserid-identities.js" type="text/javascript"></script>
+ <script src="/dialog/resources/tooltip.js" type="text/javascript"></script>
<script src="/js/pages/add_email_address.js" type="text/javascript"></script>
<script src="/js/pages/verify_email_address.js" type="text/javascript"></script>
<script src="/js/pages/forgot.js" type="text/javascript"></script>
<script src="/js/pages/manage_account.js" type="text/javascript"></script>
<script src="/js/pages/signin.js" type="text/javascript"></script>
<script src="/js/pages/signup.js" type="text/javascript"></script>
- <script src="/dialog/resources/storage.js" type="text/javascript"></script>
- <script src="/dialog/resources/browserid-network.js" type="text/javascript"></script>
- <script src="/dialog/resources/browserid-identities.js" type="text/javascript"></script>
<% } %>
<title><%- title %></title>
</head>
@@ -62,5 +63,11 @@
</div>
+<script type="text/html" id="templateTooltip">
+ <div class="tooltip">
+ {{ contents }}
+ </div>
+</script>
+
</body>
</html>
diff --git a/browserid/views/verifyuser.ejs b/browserid/views/verifyuser.ejs
index 811b1763d54927af76023f9ae35a56bf1d48c736..f429d52fee6705546d506320c2712ca74a343c0c 100644
--- a/browserid/views/verifyuser.ejs
+++ b/browserid/views/verifyuser.ejs
@@ -1,8 +1,16 @@
<div id="vAlign">
<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="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>
<h1 class="serif">Last step!</h1>
+
+
<ul class="inputs">
<li>
<label class="serif" for="email">Email Address</label>
@@ -10,16 +18,34 @@
</li>
<li>
<label class="serif" for="password">New Password</label>
- <input required class="sans" id="password" placeholder="Enter a Password" type="password" autofocus maxlength=80>
+ <input class="sans" id="password" placeholder="Enter a Password" type="password" autofocus maxlength=80>
+
+ <div class="tooltip" id="password_required" for="password">
+ Password is required.
+ </div>
+
+ <div class="tooltip" id="password_too_short" for="password">
+ Password must be at least 8 characters long.
+ </div>
</li>
<li>
<label class="serif" for="vpassword">Verify Password</label>
- <input required class="sans" id="vpassword" placeholder="Repeat Password" type="password" maxlength=80>
+ <input class="sans" id="vpassword" placeholder="Repeat Password" type="password" maxlength=80>
+
+ <div class="tooltip" id="vpassword_required" for="vpassword">
+ Verification password is required.
+ </div>
+
+ <div class="tooltip" id="passwords_no_match" for="vpassword">
+ Passwords do not match
+ </div>
</li>
</ul>
+
<div class="submit cf">
<input type="submit" class="create" value="Finish"/>
</div>
+
</form>
<div id="congrats">