diff --git a/browserid/static/dialog/controllers/authenticate_controller.js b/browserid/static/dialog/controllers/authenticate_controller.js index 3ad5d5e8b7f21a77833ca98ca2729b3ffe96e24d..1611288faf10c34b890d19acd9f009d1c8c05d29 100644 --- a/browserid/static/dialog/controllers/authenticate_controller.js +++ b/browserid/static/dialog/controllers/authenticate_controller.js @@ -103,9 +103,6 @@ if (authenticated) { self.doWait(BrowserID.Wait.authentication); } - else { - // XXX error screen - } }, function onComplete(authenticated) { if (authenticated) { @@ -113,7 +110,7 @@ email: email }); } else { - // XXX error screen. + self.showTooltip("#cannot_authenticate"); } }, self.getErrorDialog(BrowserID.Errors.authentication) diff --git a/browserid/static/dialog/controllers/page_controller.js b/browserid/static/dialog/controllers/page_controller.js index 72b1198c8a0c01d7336137605fefb55c50e3c36b..9514e779dc09723d79a4dc0789c873c5f24ea045 100644 --- a/browserid/static/dialog/controllers/page_controller.js +++ b/browserid/static/dialog/controllers/page_controller.js @@ -40,6 +40,18 @@ (function() { "use strict"; + var ANIMATION_TIME = 250, + identities = BrowserID.Identities; + + function showTooltip(el) { + $(el).fadeIn(ANIMATION_TIME, function() { + setTimeout(function() { + $(el).fadeOut(ANIMATION_TIME); + }, 2000); + }); + } + + $.Controller.extend("PageController", { }, { init: function(options) { @@ -149,7 +161,9 @@ event.preventDefault(); event.stopPropagation(); this.close("start"); - } + }, + + showTooltip: showTooltip }); }()); diff --git a/browserid/static/dialog/controllers/pickemail_controller.js b/browserid/static/dialog/controllers/pickemail_controller.js index 38cc32491a867b61d70872ea8bb897126b590f11..73e7bab4ae41ebd59fb6c1c8a8eb426df3a73c93 100644 --- a/browserid/static/dialog/controllers/pickemail_controller.js +++ b/browserid/static/dialog/controllers/pickemail_controller.js @@ -116,17 +116,22 @@ cancelEvent(event); if (email) { - identities.addEmail(email, function(keypair) { - if (keypair) { - self.close("email_staged", { - email: email - }); + identities.emailRegistered(email, function onComplete(registered) { + if(registered) { + self.showTooltip("#already_taken"); } else { - // XXX BAAAAAAAAAAAAAH. + identities.addEmail(email, function(added) { + if (added) { + self.close("email_staged", { + email: email + }); + } + else { + } + }, function onFailure() { + }); } - }, function onFailure() { - }); } else { diff --git a/browserid/static/dialog/css/popup.css b/browserid/static/dialog/css/popup.css index 61a6f9a587d88357e7f4455745bfbbf840b50674..391afa23c2a4cbd507a7ab6ce652085c6a7ecfa6 100644 --- a/browserid/static/dialog/css/popup.css +++ b/browserid/static/dialog/css/popup.css @@ -184,7 +184,8 @@ h2 { } #signIn .vertical ul { - list-style-type: none; + list-style-type: none; + position: relative; } #signIn .vertical ul li { @@ -477,13 +478,21 @@ html[xmlns] .cf { height: 1%; } +.tooltip { + position: absolute; + top: 10px; + left: 10px; + background: rgba(0,0,0,.7); + color: #fff; + border-radius: 10px; + padding: 5px; + border: 2px solid #000; +} + .inputs { min-height: 106px; max-height: 140px; overflow-y: auto; -} - -.inputs { margin: 1em 0 .5em; padding: 0 1em; line-height: 18px; @@ -514,12 +523,17 @@ html[xmlns] .cf { } #cannot_authenticate, +#already_taken, .newuser, .forgot, .returning { display: none; } +.invalid_auth #cannot_authenticate { + display: block; +} + #create_text_section { color: #222; } diff --git a/browserid/static/dialog/views/authenticate.ejs b/browserid/static/dialog/views/authenticate.ejs index f1a86022a80d31d49f8166405a2fbb5c9e77de8b..318f77e993e396a581c669b1718d7b2f656500b5 100644 --- a/browserid/static/dialog/views/authenticate.ejs +++ b/browserid/static/dialog/views/authenticate.ejs @@ -20,12 +20,12 @@ <strong>Sign in using</strong> <ul class="inputs"> - <li class="section"> + <li> <label for="email" class="serif">Email</label> <input id="email" class="sans" type="email" autocapitalize="off" autocorrect="off" required x-moz-errormessage="an email address is required"> </li> - <li class="section"> + <li> <div id="password_section" class="returning"> <label for="password" class="half serif">Password</label> @@ -44,7 +44,7 @@ <p>This email looks new, so let's get you set up.</p> </div> - <div id="cannot_authenticate"> + <div id="cannot_authenticate" class="tooltip" for="password"> The account cannot be logged in with this username and password. </div> </li> diff --git a/browserid/static/dialog/views/pickemail.ejs b/browserid/static/dialog/views/pickemail.ejs index 4754b1cbca2b01a2e5deb55062ec701207ff8fed..2aab1ae027f6d3f9dada34acb392f382cc6b6df6 100644 --- a/browserid/static/dialog/views/pickemail.ejs +++ b/browserid/static/dialog/views/pickemail.ejs @@ -34,10 +34,16 @@ <div id="addEmail" class="cf"> - <div class="inputs"> - <label for="newEmail">New email address</label> - <input id="newEmail" name="newEmail" type="email"/> - </div> + <ul class="inputs"> + <li> + <label for="newEmail">New email address</label> + <input id="newEmail" name="newEmail" type="email" required/> + + <div id="already_taken" class="tooltip" for="newEmail"> + This email address is already taken. + </div> + </li> + </ul> <div class="submit cf"> <button id="addNewEmail">add</button>