From bcbefe0f6f8d4b5ad37e401cbea64bcbb57c8478 Mon Sep 17 00:00:00 2001
From: Shane Tomlinson <stomlinson@mozilla.com>
Date: Mon, 26 Sep 2011 15:08:04 +0100
Subject: [PATCH] Making the authentication dialog flow smoother.
Making sure the correct buttons are shown when appropriate, smoothing out jumps.
---
.../controllers/authenticate_controller.js | 30 +++++++++++++------
browserid/static/dialog/css/popup.css | 1 +
2 files changed, 22 insertions(+), 9 deletions(-)
diff --git a/browserid/static/dialog/controllers/authenticate_controller.js b/browserid/static/dialog/controllers/authenticate_controller.js
index 0ac885a44..73f0329c9 100644
--- a/browserid/static/dialog/controllers/authenticate_controller.js
+++ b/browserid/static/dialog/controllers/authenticate_controller.js
@@ -37,6 +37,7 @@
(function() {
"use strict";
+ var ANIMATION_TIME = 250;
// XXX this needs changed so that the create account/authenticate flow is
// cleaner. Right now we are trying to authenticate on every "enter" press,
// this is no good.
@@ -54,6 +55,12 @@
});
},
+ "#email click" : function(event) {
+ $(".returning:visible,.newuser:visible").fadeOut(ANIMATION_TIME, function() {
+ $(".start").fadeIn();
+ });
+ },
+
"#next click": function(event) {
var email = $("#email").val();
@@ -61,15 +68,20 @@
// show error message if bad.
network.haveEmail(email, function onComplete(registered) {
// XXX instead of using jQuery here, think about using CSS animations.
- $(".start").hide();
- if(registered) {
- $(".returning").slideDown(300, function() {
- $("#password").focus();
- });
- }
- else {
- $(".newuser").slideDown(300);
- }
+ $(".start").fadeOut(function() {
+ if(registered) {
+ $(".newuser").fadeOut(ANIMATION_TIME, function() {
+ $(".returning").fadeIn(ANIMATION_TIME, function() {
+ $("#password").focus();
+ });
+ });
+ }
+ else {
+ $(".returning").fadeOut(ANIMATION_TIME, function() {
+ $(".newuser").fadeIn(ANIMATION_TIME);
+ });
+ }
+ })
});
},
diff --git a/browserid/static/dialog/css/popup.css b/browserid/static/dialog/css/popup.css
index fe1b20558..4b145c126 100644
--- a/browserid/static/dialog/css/popup.css
+++ b/browserid/static/dialog/css/popup.css
@@ -174,6 +174,7 @@ h1 {
#signIn form ul li {
padding: 0 0 10px 0;
+ min-height: 53px;
}
#signIn .submit {
--
GitLab