From b547110879b2cbd91fdba03de784c0aacbfc78f2 Mon Sep 17 00:00:00 2001
From: Shane Tomlinson <stomlinson@mozilla.com>
Date: Thu, 6 Oct 2011 13:08:38 +0100
Subject: [PATCH] Starting a new common validation class. Using this to show
tooltips that are common across areas.
Starting on error messages for sign in page.
issue #364
---
browserid/compress.sh | 2 +-
.../controllers/authenticate_controller.js | 14 ++----
.../dialog/controllers/page_controller.js | 19 +------
.../controllers/pickemail_controller.js | 2 +-
browserid/static/dialog/css/popup.css | 2 +
browserid/static/dialog/dialog.js | 1 +
.../static/dialog/resources/browserid.js | 7 ---
.../static/dialog/resources/validation.js | 49 +++++++++++++++++++
browserid/static/js/pages/signin.js | 34 ++++++++-----
browserid/views/layout.ejs | 1 +
browserid/views/signin.ejs | 18 +++++--
11 files changed, 97 insertions(+), 52 deletions(-)
create mode 100644 browserid/static/dialog/resources/validation.js
diff --git a/browserid/compress.sh b/browserid/compress.sh
index 8166eeaaf..6872fe9fb 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 ../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
+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 ../dialog/resources/validation.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/dialog/controllers/authenticate_controller.js b/browserid/static/dialog/controllers/authenticate_controller.js
index 2c1f21454..1472bf4a3 100644
--- a/browserid/static/dialog/controllers/authenticate_controller.js
+++ b/browserid/static/dialog/controllers/authenticate_controller.js
@@ -39,7 +39,8 @@
var ANIMATION_TIME = 250,
bid = BrowserID,
- identities = bid.Identities;
+ identities = bid.Identities,
+ validation = bid.Validation;
function checkEmail(el, event) {
var email = $("#email").val(),
@@ -47,7 +48,7 @@
cancelEvent(event);
- if(!self.validateEmail(email)) {
+ if(!validation.email(email)) {
return;
}
@@ -67,7 +68,7 @@
cancelEvent(event);
- if(!self.validateEmail(email)) {
+ if(!validation.email(email)) {
return;
}
@@ -91,12 +92,7 @@
cancelEvent(event);
- if(!self.validateEmail(email)) {
- return;
- }
-
- if(!pass) {
- bid.Tooltip.showTooltip("#password_required");
+ if(!validation.emailAndPassword(email, pass)) {
return;
}
diff --git a/browserid/static/dialog/controllers/page_controller.js b/browserid/static/dialog/controllers/page_controller.js
index a63ea765c..aee8e85b1 100644
--- a/browserid/static/dialog/controllers/page_controller.js
+++ b/browserid/static/dialog/controllers/page_controller.js
@@ -41,21 +41,6 @@
identities = bid.Identities;
- function validateEmail(email) {
- var valid = true;
-
- if(!email) {
- bid.Tooltip.showTooltip("#email_required");
- valid = false;
- }
- else if(!bid.verifyEmail(email)) {
- bid.Tooltip.showTooltip("#email_format");
- valid = false;
- }
-
- return valid;
- }
-
$.Controller.extend("PageController", {
}, {
init: function(options) {
@@ -165,9 +150,7 @@
event.preventDefault();
event.stopPropagation();
this.close("start");
- },
-
- validateEmail: validateEmail
+ }
});
}());
diff --git a/browserid/static/dialog/controllers/pickemail_controller.js b/browserid/static/dialog/controllers/pickemail_controller.js
index caf7f1e73..fc4cb138e 100644
--- a/browserid/static/dialog/controllers/pickemail_controller.js
+++ b/browserid/static/dialog/controllers/pickemail_controller.js
@@ -123,7 +123,7 @@
cancelEvent(event);
- if(!self.validateEmail(email)) {
+ if(!bid.Validation.email(email)) {
return;
}
diff --git a/browserid/static/dialog/css/popup.css b/browserid/static/dialog/css/popup.css
index b95a704b0..fcd2eb0d1 100644
--- a/browserid/static/dialog/css/popup.css
+++ b/browserid/static/dialog/css/popup.css
@@ -504,10 +504,12 @@ html[xmlns] .cf {
margin: 1em 0 .5em;
padding: 0 1em;
line-height: 18px;
+ min-height: 110px;
}
.pickemail .inputs {
height: 110px;
+ min-height: 0;
overflow-y: auto;
}
diff --git a/browserid/static/dialog/dialog.js b/browserid/static/dialog/dialog.js
index b163ea65e..061ffa15f 100644
--- a/browserid/static/dialog/dialog.js
+++ b/browserid/static/dialog/dialog.js
@@ -54,6 +54,7 @@ steal.plugins(
'browserid',
'storage',
'tooltip',
+ 'validation',
'browserid-extensions',
'browserid-network',
'browserid-identities',
diff --git a/browserid/static/dialog/resources/browserid.js b/browserid/static/dialog/resources/browserid.js
index ad6c7d8de..6bc596beb 100644
--- a/browserid/static/dialog/resources/browserid.js
+++ b/browserid/static/dialog/resources/browserid.js
@@ -39,11 +39,4 @@
window.BrowserID = window.BrowserID || {};
- window.BrowserID.verifyEmail = function(address) {
- // gotten from http://blog.gerv.net/2011/05/html5_email_address_regexp/
- // changed the requirement that there must be a ldh-str because BrowserID
- // is only used on internet based networks.
- return /^[\w.!#$%&'*+\-/=?\^`{|}~]+@[a-z0-9-]+(\.[a-z0-9-]+)+$/.test(address);
- };
-
}());
diff --git a/browserid/static/dialog/resources/validation.js b/browserid/static/dialog/resources/validation.js
new file mode 100644
index 000000000..12b3d5c0d
--- /dev/null
+++ b/browserid/static/dialog/resources/validation.js
@@ -0,0 +1,49 @@
+/*globals BrowserID: true */
+BrowserID.Validation = (function() {
+ var bid = BrowserID,
+ tooltip = bid.Tooltip;
+
+ bid.verifyEmail = function(address) {
+ // gotten from http://blog.gerv.net/2011/05/html5_email_address_regexp/
+ // changed the requirement that there must be a ldh-str because BrowserID
+ // is only used on internet based networks.
+ return /^[\w.!#$%&'*+\-/=?\^`{|}~]+@[a-z0-9-]+(\.[a-z0-9-]+)+$/.test(address);
+ };
+
+
+ function validateEmail(email) {
+ var valid = false;
+
+ if (!email) {
+ tooltip.showTooltip("#email_required");
+ }
+ else if (!bid.verifyEmail(email)) {
+ tooltip.showTooltip("#email_format");
+ }
+ else {
+ valid = true;
+ }
+
+ return valid;
+ }
+
+ function validateEmailAndPassword(email, password) {
+ var valid = validateEmail(email);
+
+ if (valid) {
+ if (!password) {
+ tooltip.showTooltip("#password_required");
+ valid = false;
+ }
+ }
+
+ return valid;
+ }
+
+ return {
+ email: validateEmail,
+ emailAndPassword: validateEmailAndPassword
+ };
+
+}());
+
diff --git a/browserid/static/js/pages/signin.js b/browserid/static/js/pages/signin.js
index 1afb9d305..4eca01bd7 100644
--- a/browserid/static/js/pages/signin.js
+++ b/browserid/static/js/pages/signin.js
@@ -37,7 +37,11 @@
(function() {
"use strict";
- BrowserID.signIn = function () {
+ var bid = BrowserID,
+ network = bid.Network,
+ validation = bid.Validation;
+
+ bid.signIn = function () {
$("form input[autofocus]").focus();
$("#signUpForm").bind("submit", function(event) {
@@ -45,18 +49,22 @@
var email = $("#email").val(),
password = $("#password").val();
-
- BrowserID.Network.authenticate(email, password, function onSuccess(authenticated) {
- if (authenticated) {
- document.location = "/";
- }
- else {
- // bad authentication
- $(".notifications .notification.doh").fadeIn();
- }
- }, function onFailure() {
- // Wah wah. Network error
- });
+
+ var valid = validation.emailAndPassword(email, password);
+
+ if (valid) {
+ network.authenticate(email, password, function onSuccess(authenticated) {
+ if (authenticated) {
+ document.location = "/";
+ }
+ else {
+ // bad authentication
+ $(".notifications .notification.doh").fadeIn();
+ }
+ }, function onFailure() {
+ // Wah wah. Network error
+ });
+ }
});
};
}());
diff --git a/browserid/views/layout.ejs b/browserid/views/layout.ejs
index 490e5c465..1aa89ac02 100644
--- a/browserid/views/layout.ejs
+++ b/browserid/views/layout.ejs
@@ -23,6 +23,7 @@
<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="/dialog/resources/validation.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>
diff --git a/browserid/views/signin.ejs b/browserid/views/signin.ejs
index 10f279a20..54089605e 100644
--- a/browserid/views/signin.ejs
+++ b/browserid/views/signin.ejs
@@ -1,7 +1,7 @@
<div id="vAlign">
<div id="signUpFormWrap">
<!-- XXX this form submits to nowhere -->
- <form id="signUpForm" class="cf authform">
+ <form id="signUpForm" class="cf authform" novalidate>
<h1 class="serif">Sign In</h1>
<ul class="notifications">
@@ -11,7 +11,15 @@
<ul class="inputs">
<li>
<label class="serif" for="email">Email Address</label>
- <input class="sans" id="email" autofocus placeholder="Your Email" type="email" required x-moz-errormessage="Enter the email address you created your account with" tabindex="1">
+ <input class="sans" id="email" autofocus placeholder="Your Email" type="email" tabindex="1">
+
+ <div id="email_format" class="tooltip" for="email">
+ This field must be an email address.
+ </div>
+
+ <div id="email_required" class="tooltip" for="email">
+ The email field is required.
+ </div>
</li>
<li>
<label class="serif half" for="password">Password</label>
@@ -19,7 +27,11 @@
<!-- XXX: this needs to be fixed -->
<a class="forgot" href="/forgot" tabindex="4">forgot your password?</a>
</div>
- <input class="sans" id="password" placeholder="Your Password" type="password" required x-moz-errormessage="Oops! We need your password to sign you in" tabindex="2" maxlength="80">
+ <input class="sans" id="password" placeholder="Your Password" type="password" tabindex="2" maxlength="80">
+
+ <div id="password_required" class="tooltip" for="password">
+ The password field is required.
+ </div>
</li>
</ul>
--
GitLab