diff options
-rw-r--r-- | js/global.js | 45 | ||||
-rw-r--r-- | skins/standard/global.css | 5 | ||||
-rw-r--r-- | template/en/default/account/auth/login-small.html.tmpl | 40 |
3 files changed, 62 insertions, 28 deletions
diff --git a/js/global.js b/js/global.js index 2efa698b6..de3d7915d 100644 --- a/js/global.js +++ b/js/global.js @@ -19,38 +19,41 @@ var mini_login_constants; function init_mini_login_form( suffix ) { var mini_login = document.getElementById('Bugzilla_login' + suffix ); var mini_password = document.getElementById('Bugzilla_password' + suffix ); - // check if the login and password are blank and if they are - // put in the text login and password and make them slightly greyed out - if( mini_login.value == "" && mini_password.value == "" ) { + var mini_dummy = document.getElementById( + 'Bugzilla_password_dummy' + suffix); + // If the login and password are blank when the page loads, we display + // "login" and "password" in the boxes + if (mini_login.value == "" && mini_password.value == "") { mini_login.value = mini_login_constants.login; - mini_password.value = mini_login_constants.password; - mini_password.type = "text"; - YAHOO.util.Dom.addClass(mini_login, "bz_mini_login_help"); - YAHOO.util.Dom.addClass(mini_password, "bz_mini_login_help"); + YAHOO.util.Dom.addClass(mini_password, 'bz_default_hidden'); + YAHOO.util.Dom.removeClass(mini_dummy, 'bz_default_hidden'); } } -function mini_login_on_focus( el ) { - if( el.name == "Bugzilla_password" ){ - if( el.type != "password" ) { - el.value = ""; - el.type = "password"; - } - } else if ( el.value == mini_login_constants.login ) { - if( el.value == mini_login_constants.login ) { - el.value = ""; - } +// Clear the words "login" and "password" from the form when you click +// in one of the boxes. We clear them both when you click in either box +// so that the browser's password-autocomplete can work. +function mini_login_on_focus( suffix ) { + var mini_login = document.getElementById('Bugzilla_login' + suffix ); + var mini_password = document.getElementById('Bugzilla_password' + suffix ); + var mini_dummy = document.getElementById( + 'Bugzilla_password_dummy' + suffix); + + YAHOO.util.Dom.removeClass(mini_login, "bz_mini_login_help"); + if (mini_login.value == mini_login_constants.login) { + mini_login.value = ''; } - YAHOO.util.Dom.removeClass(el, "bz_mini_login_help"); + YAHOO.util.Dom.removeClass(mini_password, 'bz_default_hidden'); + YAHOO.util.Dom.addClass(mini_dummy, 'bz_default_hidden'); } function check_mini_login_fields( suffix ) { var mini_login = document.getElementById('Bugzilla_login' + suffix ); var mini_password = document.getElementById('Bugzilla_password' + suffix ); - if(( mini_login.value != "" && mini_password.value != "" ) && - ( mini_login.value != mini_login_constants.login && - mini_password.value != mini_login_constants.password )) { + if( ( mini_login.value != "" && mini_password.value != "" ) && + mini_login.value != mini_login_constants.login) + { return true; } window.alert( mini_login_constants.warning ); diff --git a/skins/standard/global.css b/skins/standard/global.css index aa3b9d758..75dc437d3 100644 --- a/skins/standard/global.css +++ b/skins/standard/global.css @@ -320,7 +320,10 @@ div#docslinks { /** End Comments **/ .bz_default_hidden, .bz_tui_hidden { - display: none; + /* We have !important because we want elements with these classes to always + * be hidden, even if there is some CSS that overrides it (we use these + * classes inside JavaScript to hide things). */ + display: none !important; } span.quote { diff --git a/template/en/default/account/auth/login-small.html.tmpl b/template/en/default/account/auth/login-small.html.tmpl index 821244cb8..ba1d671fa 100644 --- a/template/en/default/account/auth/login-small.html.tmpl +++ b/template/en/default/account/auth/login-small.html.tmpl @@ -39,13 +39,16 @@ <input id="Bugzilla_login[% qs_suffix FILTER html %]" class="bz_login" name="Bugzilla_login" - onfocus="mini_login_on_focus( this )" + onfocus="mini_login_on_focus('[% qs_suffix FILTER js %]')" > <input class="bz_password" id="Bugzilla_password[% qs_suffix FILTER html %]" name="Bugzilla_password" type="password" - onfocus="mini_login_on_focus( this )" + > + <input class="bz_password bz_default_hidden bz_mini_login_help" type="text" + id="Bugzilla_password_dummy[% qs_suffix %]" value="password" + onfocus="mini_login_on_focus('[% qs_suffix FILTER js %]')" > [% IF Param('rememberlogin') == 'defaulton' || Param('rememberlogin') == 'defaultoff' @@ -63,12 +66,37 @@ <script type="text/javascript"> mini_login_constants = { "login" : "login", - "password" : "password", "warning" : "You must set the login and password before logging in." + }; + [%# We need this event to fire after autocomplete, because it does + # something different depending on whether or not there's already + # data in the login and password box. + # However, autocomplete happens at all sorts of different times in + # different browsers (before or after onDOMReady, before or after + # window.onload, in almost all combinations you can imagine). + # The only good solution I found is to time the event 200 + # milliseconds after window.onload for WebKit (doing it immediately + # at onload works in Chrome but not in Safari, but I can't detect + # them separately using YUI), and right after onDOMReady in Gecko. + # The WebKit solution is also fairly guaranteed to work on any + # browser (it's just strange, since the fields only populate 200 ms + # after the page loads), so it's the default. IE doesn't even + # recognize our forms as login forms, so I made it use the Gecko + # method also (since it's nicer visually). Opera never autocompletes + # forms without user interaction, so it also uses the Gecko method. + #%] + if (YAHOO.env.ua.gecko || YAHOO.env.ua.ie || YAHOO.env.ua.opera) { + YAHOO.util.Event.onDOMReady(function() { + init_mini_login_form('[% qs_suffix FILTER html %]'); + }); } - YAHOO.util.Event.onDOMReady(function() { - init_mini_login_form('[% qs_suffix FILTER html %]'); - } ); + else { + YAHOO.util.Event.on(window, 'load', function () { + window.setTimeout(function() { + init_mini_login_form('[% qs_suffix FILTER html %]'); + }, 200); + }); + } </script> </form> </li> |