From 664e619bb61679462587470dd6bb4ccf4e4755c8 Mon Sep 17 00:00:00 2001
From: Shane Tomlinson <stomlinson@mozilla.com>
Date: Thu, 26 Jul 2012 13:03:44 +0100
Subject: [PATCH] Cleanup on the signin page.
* Slide the password fields down whenever they are shown.
* Add slideUp/slideDown, fadeIn/fadeOut to dom-jquery.js
---
resources/static/common/css/style.css | 6 +++
resources/static/common/js/lib/dom-jquery.js | 40 ++++++++++++++++++++
resources/static/dialog/css/style.css | 1 -
resources/static/pages/css/style.css | 12 ++++--
resources/static/pages/js/signin.js | 37 +++++++++---------
resources/views/signin.ejs | 31 +++++++--------
6 files changed, 87 insertions(+), 40 deletions(-)
diff --git a/resources/static/common/css/style.css b/resources/static/common/css/style.css
index ab5a2a960..cd2760e4c 100644
--- a/resources/static/common/css/style.css
+++ b/resources/static/common/css/style.css
@@ -61,7 +61,9 @@ strong {
}
.hidden {
+ /* This funkiness is so that labels still appear for screen readers */
visibility: hidden;
+ display: block;
height: 0;
}
@@ -139,6 +141,10 @@ input[type=password]:disabled {
border-color: #b2b2b2;
}
+label {
+ display: block;
+}
+
label + input[type=text],
label + input[type=password],
label + input[type=email] {
diff --git a/resources/static/common/js/lib/dom-jquery.js b/resources/static/common/js/lib/dom-jquery.js
index 0faeb1ccc..e4cd8be64 100644
--- a/resources/static/common/js/lib/dom-jquery.js
+++ b/resources/static/common/js/lib/dom-jquery.js
@@ -328,6 +328,46 @@ BrowserID.DOM = ( function() {
*/
hide: function( elementToHide ) {
return jQuery( elementToHide ).hide();
+ },
+
+ /**
+ * Slide an element down
+ * @method slideDown
+ * @param {selector || element} elementToSlide
+ * @param {number} [animationTime]
+ */
+ slideDown: function( elementToSlide, animationTime ) {
+ return jQuery( elementToSlide ).slideDown( animationTime || 250 );
+ },
+
+ /**
+ * Slide an element up
+ * @method slideUp
+ * @param {selector || element} elementToSlide
+ * @param {number} [animationTime]
+ */
+ slideUp: function( elementToSlide, animationTime ) {
+ return jQuery( elementToSlide ).slideUp( animationTime );
+ },
+
+ /**
+ * Fade an element in
+ * @method fadeIn
+ * @param {selector || element} elementToFade
+ * @param {number} [animationTime]
+ */
+ fadeIn: function( elementToFade, animationTime ) {
+ return jQuery( elementToFade ).fadeIn( animationTime );
+ },
+
+ /**
+ * Fade an element out
+ * @method fadeOut
+ * @param {selector || element} elementToFade
+ * @param {number} [animationTime]
+ */
+ fadeOut: function( elementToFade, animationTime ) {
+ return jQuery( elementToFade ).fadeOut( animationTime );
}
};
diff --git a/resources/static/dialog/css/style.css b/resources/static/dialog/css/style.css
index 9543dd9df..73ac003f8 100644
--- a/resources/static/dialog/css/style.css
+++ b/resources/static/dialog/css/style.css
@@ -104,7 +104,6 @@ footer {
}
label {
- display: block;
text-shadow: 1px 1px 0 rgba(255,255,255,0.5);
}
diff --git a/resources/static/pages/css/style.css b/resources/static/pages/css/style.css
index b3e7e543e..4c617136e 100644
--- a/resources/static/pages/css/style.css
+++ b/resources/static/pages/css/style.css
@@ -454,20 +454,24 @@ button.delete:active {
}
#signUpForm li {
- margin: 0 0 10px;
+ margin: 10px 0 0;
padding: 0;
}
+#signUpForm li:first-child {
+ margin: 0;
+}
+
#signUpForm > .siteinfo {
margin-bottom: 10px;
}
-.siteinfo, #congrats, .password_entry, .vpassword_entry, #verify_password, .enter_password .hint, .verify_primary .forminputs, .known_secondary .start, .unknown_secondary .start, .unknown_secondary .forgot {
+.siteinfo, #congrats, .password_entry, .vpassword_entry, .verify_primary, .known_secondary .start, .unknown_secondary .start, .primary .start, .unknown_secondary .forgot {
display: none;
}
-.enter_verify_password #verify_password, .known_secondary .password_entry, .unknown_secondary .vpassword_entry, .verify_primary #verify_primary {
- display: block;
+label.vpassword_entry {
+ margin-top: 15px;
}
.submit > p {
diff --git a/resources/static/pages/js/signin.js b/resources/static/pages/js/signin.js
index ecabbb961..1ac3037c7 100644
--- a/resources/static/pages/js/signin.js
+++ b/resources/static/pages/js/signin.js
@@ -1,4 +1,4 @@
-/*globals BrowserID:true, $:true*/
+/*globals BrowserID:true, gettext:true */
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
@@ -39,7 +39,7 @@ BrowserID.signIn = (function() {
}, pageHelpers.getFailure(errors.authenticateWithAssertion, callback));
}
else {
- $("#primary_no_login").fadeIn(250);
+ dom.fadeIn("#primary_no_login", 250);
setTimeout(complete.curry(callback), 250);
}
}, pageHelpers.getFailure(errors.provisioningPrimary, callback));
@@ -59,20 +59,20 @@ BrowserID.signIn = (function() {
if (info.type === "secondary") {
// A secondary user has to either sign in or sign up depending on the
// status of their email address.
- var className = "unknown_secondary",
- submit = signUpSubmit,
- title = gettext("Sign Up");
-
- if (info.known) {
- className = "known_secondary";
- submit = signInSubmit;
- title = gettext("Sign In");
+ var bodyClassName = "known_secondary",
+ showClassName = "password_entry",
+ submit = signInSubmit;
+
+ if (!info.known) {
+ bodyClassName = "unknown_secondary";
+ showClassName = "vpassword_entry";
+ submit = signUpSubmit;
}
- dom.addClass("body", className);
- dom.focus("#password");
- dom.setInner("#title", title);
+ dom.addClass("body", bodyClassName);
+ dom.slideDown("." + showClassName);
self.submit = submit;
+ dom.focus("#password");
complete(oncomplete);
}
@@ -85,6 +85,7 @@ BrowserID.signIn = (function() {
// primary user who is not authenticated with primary, must auth with
// primary and then authenticate them to BrowserID.
dom.addClass("body", "verify_primary");
+ dom.slideDown("#verify_primary");
dom.setInner("#primary_email", email);
self.submit = authWithPrimary;
@@ -105,12 +106,11 @@ BrowserID.signIn = (function() {
password = helpers.getAndValidatePassword("#password");
if (email && password) {
- user.authenticate(email, password, function onSuccess(authenticated) {
+ user.authenticate(email, password, function(authenticated) {
if (authenticated) {
userAuthenticated();
}
else {
- // bad authentication
tooltip.showTooltip("#cannot_authenticate");
}
complete(oncomplete);
@@ -169,9 +169,10 @@ BrowserID.signIn = (function() {
// this is basically a state reset.
var email = dom.getInner("#email");
if(email !== lastEmail) {
- dom.removeClass("body", "verify_primary");
+ dom.removeClass("body", "primary");
dom.removeClass("body", "known_secondary");
dom.removeClass("body", "unknown_secondary");
+ dom.slideUp(".password_entry, .vpassword_entry, .verify_primary");
this.submit = emailSubmit;
lastEmail = email;
}
@@ -190,10 +191,6 @@ BrowserID.signIn = (function() {
self.bind("#email", "change", onEmailChange);
self.bind("#email", "keyup", onEmailChange);
- // a redirect to the signup page using the link needs to clear the stored
- // email address or else the user may be redirected here.
- self.bind(".redirect", "click", pageHelpers.clearStoredEmail);
-
sc.start.call(self, options);
// If there is an email already set up in pageHelpers.setupEmail, see if
diff --git a/resources/views/signin.ejs b/resources/views/signin.ejs
index 5a1b04f28..64112c241 100644
--- a/resources/views/signin.ejs
+++ b/resources/views/signin.ejs
@@ -6,7 +6,7 @@
<div id="vAlign">
<!-- XXX this form submits to nowhere -->
<form id="signUpForm" class="cf authform" novalidate>
- <h1 id="title"><%- gettext('Sign In') %></h1>
+ <h1><%- gettext('Sign In') %></h1>
<ul class="notifications">
<li class="notification emailsent">
@@ -43,7 +43,8 @@
<li class="password_entry vpassword_entry">
<a class="forgot right" href="/forgot"><%- gettext('forgot your password?') %></a>
- <label for="password"><%- gettext('Password') %></label>
+ <label for="password" class="password_entry"><%- gettext('Password') %></label>
+ <label for="password" class="vpassword_entry"><%- gettext('Your email address is new to us. Please create a password to use with Persona.') %></label>
<input id="password" placeholder="<%- gettext('password') %>" type="password" maxlength="80">
<div id="password_required" class="tooltip" for="password">
@@ -61,7 +62,7 @@
</li>
<li class="vpassword_entry">
- <label for="vpassword"><%- gettext('Verify Password') %></label>
+ <label for="vpassword" class="hidden"><%- gettext('Verify Password') %></label>
<input id="vpassword" placeholder="<%- gettext('verify password') %>" type="password" maxlength="80">
<div id="password_required" class="tooltip" for="vpassword">
@@ -84,7 +85,9 @@
</div>
<div class="submit cf forminputs vpassword_entry">
- <button id="verifyEmail"><%- gettext('Verify Email') %></button>
+ <p class="cf">
+ <button id="verifyEmail"><%- gettext('Verify Email') %></button>
+ </p>
<p class="tospp cf">
<%- format(
@@ -97,18 +100,16 @@
</div>
- <ul class="notifications">
- <li class="notification" id="verify_primary">
- <p>
- <%- format(gettext('To verify that you own <strong %(emailId)>this address</strong>, you must sign in with your provider. A new window will be opened.'),
- { emailId: 'id="primary_email"' }) %>
- </p>
+ <div class="submit cf forminputs verify_primary">
+ <p>
+ <%- format(gettext('To verify that you own <strong %(emailId)>this address</strong>, you must sign in with your provider. A new window will be opened.'),
+ { emailId: 'id="primary_email"' }) %>
+ </p>
- <p class="submit">
- <button id="authWithPrimary"><%- gettext('Verify') %></button>
- </p>
- </li>
- </ul>
+ <p class="submit">
+ <button id="authWithPrimary"><%- gettext('Verify') %></button>
+ </p>
+ </div>
</form>
</div>
</div>
--
GitLab