diff --git a/browserid/static/css/style.css b/browserid/static/css/style.css index dcb365ad387868405f2668875ffa3ed353336cac..18f0d79050b442264f77bad9224b632db60e9bba 100644 --- a/browserid/static/css/style.css +++ b/browserid/static/css/style.css @@ -628,24 +628,31 @@ a.forgot { font-size: 11px; } -#signUpForm .error { +.authform .notifications > .notification { margin-top: 20px; - color: red; - background-color: rgba(255,0,0,0.25); padding: 5px; line-height: 16px; - -webkit-border-radius: 3px; -moz-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; } +.authform .notifications > .notification { + display: none; +} + +.authform .notifications .notification.error { + color: red; + background-color: rgba(255,0,0,0.25); +} + #signUpForm .red { color: red; } -#signUpForm input[type=text] { +#signUpForm input[type=email], +#signUpForm input[type=password] { width: 100%; font-size: 14px; padding: 5px; @@ -665,7 +672,8 @@ a.forgot { box-shadow: 1px 1px 0 rgba(255,255,255,0.5); } -#signUpForm input[type=text]:focus { +#signUpForm input[type=email]:focus, +#signUpForm input[type=password]:focus { border: 1px solid #549FDC; -webkit-border-radius: 0; diff --git a/browserid/views/signin.ejs b/browserid/views/signin.ejs index 0288c769de132ac0594bb028bd3c08b3c3e8b7e7..efca199d80a62182122508f5c92d864aa2511c0d 100644 --- a/browserid/views/signin.ejs +++ b/browserid/views/signin.ejs @@ -1,12 +1,15 @@ <div id="vAlign"> <div id="signUpFormWrap"> <!-- XXX this form submits to nowhere --> - <form id="signUpForm" class="cf"> + <form id="signUpForm" class="cf authform"> <h1 class="serif">Sign In</h1> + <div class="notifications"> + <div class="notification error doh">Doh! Something went wrong :-( </div> + </div> <ul class="inputs"> <li> <label class="serif" for="email">Email Address</label> - <input class="sans" id="email" placeholder="Your Email" type="text"> + <input class="sans" id="email" autofocus placeholder="Your Email" type="email" required x-moz-errormessage="Enter the email address you created your account with"> </li> <li> <label class="serif half" for="password">Password</label> @@ -14,7 +17,7 @@ <!-- XXX: this needs to be fixed --> <a class="forgot" href="/signup">forgot your password?</a> </div> - <input class="sans" id="password" placeholder="Your Password" type="text"> + <input class="sans" id="password" placeholder="Your Password" type="password" required x-moz-errormessage="Oops! We need your password to sign you in"> </li> </ul> <div class="submit cf"> @@ -33,7 +36,7 @@ <script type="text/javascript"> $(document).ready(function () { - $("form input:visible:first").focus(); + $("form input[autofocus]").focus(); $("#signUpForm").bind("submit", function(event) { event.preventDefault(); @@ -47,6 +50,7 @@ } else { // bad authentication + $(".notifications .notification.doh").fadeIn(); } }, function onFailure() { // Wah wah. Network error diff --git a/browserid/views/signup.ejs b/browserid/views/signup.ejs index 33b4654dc0c8d0dc61427b18633e5825198758a9..b15236ca56d53e267d56e7e5e81067eb80107c85 100644 --- a/browserid/views/signup.ejs +++ b/browserid/views/signup.ejs @@ -1,20 +1,24 @@ <div id="vAlign"> <div id="signUpFormWrap"> <!-- XXX this form submits to nowhere --> - <form id="signUpForm" class="cf"> + <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> <ul class="inputs"> <li> <label class="serif" for="email">Email Address</label> - <input class="sans" id="email" placeholder="Your Email" type="text"> + <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> <li> <label class="serif" for="password">New Password</label> - <input class="sans" id="password" placeholder="Enter a Password" type="text"> + <input class="sans" type="password" id="password" required placeholder="Enter a Password" type="password" x-moz-errormessage="Please create a new password for your BrowserID account"> </li> <li> <label class="serif" for="vpassword">Verify Password</label> - <input class="sans" id="vpassword" placeholder="Repeat Password" type="text"> + <input class="sans" type="password" id="vpassword" required placeholder="Repeat Password" type="text" x-moz-errormessage="Oops! Just repeat your password above to double check. Thanks!"> </li> </ul> <div class="submit cf"> @@ -29,24 +33,33 @@ <script type="text/javascript"> $(document).ready(function () { - $("form input:visible:first").focus(); + $("form input[autofocus]").focus(); $("#signUpForm").bind("submit", function(event) { event.preventDefault(); + $(".notifications .notification").hide(); var email = $("#email").val(), - password = $("#password").val(); - + password = $("#password").val(), + vpassword = $("#vpassword").val(); + + if (password != vpassword) { + $(".notifications .notification.mismatchpassword").fadeIn(); + return false; + } + BrowserIDIdentities.stageIdentity(email, password, function onSuccess(authenticated) { if (authenticated) { document.location = "/"; } else { // bad authentication + $(".notifications .notification.doh").fadeIn(); } }, function onFailure() { // Wah wah. Network error }); + return false; }); });