diff --git a/browserid/static/css/style.css b/browserid/static/css/style.css index d1d7450a3fb8c85a894da8d2e09bf19b780e15ae..69a743ac5de04b2bb349dd56aa4c7890522b8310 100644 --- a/browserid/static/css/style.css +++ b/browserid/static/css/style.css @@ -609,10 +609,13 @@ h1 { } #signUpForm ul { - margin: 20px 0; list-style-type: none; } +#signUpForm .inputs { + margin: 20px 0; +} + #signUpForm li { padding: 0 0 10px 0; } @@ -636,7 +639,7 @@ a.forgot { font-size: 11px; } -.authform .notifications > .notification { +.notifications > .notification { margin-top: 20px; padding: 5px; line-height: 16px; @@ -646,11 +649,11 @@ a.forgot { border-radius: 3px; } -.authform .notifications > .notification { +.notifications > .notification { display: none; } -.authform .notifications .notification.error { +.notifications .notification.error { color: red; background-color: rgba(255,0,0,0.25); } @@ -856,22 +859,15 @@ html[xmlns] .cf { text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5); } -#signUpForm ul { - margin: 20px 0; - list-style-type: none; -} - -#signUpForm li { - padding: 0 0 10px 0; -} - -#signUpForm label, -#signUpForm p.hint { +#signUpForm label/*, +#signUpForm p.hint*/ { display: block; color: #62615F; text-shadow: 1px 1px 0 rgba(255,255,255,0.5); } +/* + #signUpForm p.hint { margin: -20px -20px 20px; padding: 10px 20px 10px 45px; @@ -885,7 +881,7 @@ html[xmlns] .cf { -o-border-radius: 5px 5px 0 0; border-radius: 5px 5px 0 0; } - +*/ #signUpForm label.half, .half { width: 50%; diff --git a/browserid/views/signup.ejs b/browserid/views/signup.ejs index 07c11219fc662a848a92e96353de7c49309dc9a0..58b1ee634e621d8c21f7d90342a231f5b4584b29 100644 --- a/browserid/views/signup.ejs +++ b/browserid/views/signup.ejs @@ -3,55 +3,78 @@ <!-- XXX this form submits to nowhere --> <form id="signUpForm" class="cf authform"> <h1 class="serif">Create Account</h1> - <div class="notifications"> - <div class="notification error doh">Doh! Something went wrong :-( </div> - <div class="notification error mismatchpassword">XXX: Your passwords need to match</div> - <div class="notification emailsent">A confirmation email has been sent to you at <strong id="sent_to_email"></strong>. Check it!</div> - </div> + <div id="forminputs"> - <ul class="inputs"> - <li> - <label class="serif" for="email">Email Address</label> - <input class="sans" id="email" autofocus required placeholder="Your Email" type="email" x-moz-errormessage="Please enter the email address you would like to use"> - </li> - </ul> - <div class="submit cf"> - <div class="remember cf"> - <a class="signUpIn" href="/signin">Existing account? Sign in.</a> + <ul class="inputs"> + <li> + <label class="serif" for="email">Email Address</label> + <input class="sans" id="email" autofocus required placeholder="Your Email" type="email" x-moz-errormessage="Please enter the email address you would like to use"> + </li> + </ul> + + <div class="submit cf"> + <div class="remember cf"> + <a class="signUpIn" href="/signin">Existing account? Sign in.</a> + </div> + <input type="submit" class="create" value="Verify Email"/> </div> - <input type="submit" class="create" value="Verify Email"/> - </div> + + <ul class="notifications"> + <li class="notification error doh">Doh! Something went wrong :-( </li> + <li class="notification alreadyRegistered"><strong id="registeredEmail"></strong> is already registered. Would you like to <a class="signUpIn" href="/signin">sign in</a> instead?</li> + <li class="notification emailsent">A confirmation email has been sent to you at <strong id="sentToEmail"></strong>. Check it!</li> + </ul> + </div> </form> </div> </div> <script type="text/javascript"> - $(document).ready(function () { - $("form input[autofocus]").focus(); + var ANIMATION_SPEED = 250; - $("#signUpForm").bind("submit", function(event) { - event.preventDefault(); - $(".notifications .notification").hide(); + function replaceWithMessage(selector) { + $('#forminputs').fadeOut(ANIMATION_SPEED, function() { + $(selector).fadeIn(ANIMATION_SPEED); + }); + } - var email = $("#email").val(), - password = $("#password").val(), - vpassword = $("#vpassword").val(); + function showNotice(selector) { + $(selector).fadeIn(ANIMATION_SPEED); + } - if (password != vpassword) { - $(".notifications .notification.mismatchpassword").fadeIn(); - return false; + function onFailure() { + replaceWithMessage(".doh"); + } + + + $(function () { + var identities = BrowserIDIdentities; + + $("form input[autofocus]").focus(); + + $("#email").bind("keyup", function(event) { + if (event.which !== 13) { + $(".notification").fadeOut(ANIMATION_SPEED); } + }); - BrowserIDIdentities.createUser(email, function onSuccess(keypair) { - $('#sent_to_email').html(email); - $('#forminputs').fadeOut(); - $(".notifications .notification.emailsent").fadeIn(); - }, function onFailure() { - // bad authentication - $(".notifications .notification.doh").fadeIn(); - }); - return false; + $("#signUpForm").bind("submit", function(event) { + event.preventDefault(); + + var email = $("#email").val(); + identities.emailRegistered(email, function(registered) { + if (!registered) { + identities.createUser(email, function onSuccess(keypair) { + $('#sentToEmail').html(email); + replaceWithMessage(".emailsent"); + }, onFailure); + } + else { + $('#registeredEmail').html(email); + showNotice(".alreadyRegistered"); + } + }, onFailure); }); });