Bug 888731: Bugzilla login field should use "placeholder" HTML5 attribute instead of JavaScript

r=dkl a=justdave

3 files changed, 21 insertions, 113 deletions

diff --git a/js/global.js b/js/global.js
index 265ade46b..ea1a11dd3 100644
--- a/js/global.js
+++ b/js/global.js
@@ -6,8 +6,6 @@
  * defined by the Mozilla Public License, v. 2.0.
  */
 
-var mini_login_constants;
-
 function show_mini_login_form( suffix ) {
     var login_link = document.getElementById('login_link' + suffix);
     var login_form = document.getElementById('mini_login' + suffix);
@@ -54,53 +52,6 @@ function hide_forgot_form( suffix ) {
     return false;
 }
 
-function init_mini_login_form( 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);
-    // If the login and password are blank when the page loads, we display
-    // "login" and "password" in the boxes by default.
-    if (mini_login.value == "" && mini_password.value == "") {
-        mini_login.value = mini_login_constants.login;
-        YAHOO.util.Dom.addClass(mini_login, "bz_mini_login_help");
-        YAHOO.util.Dom.addClass(mini_password, 'bz_default_hidden');
-        YAHOO.util.Dom.removeClass(mini_dummy, 'bz_default_hidden');
-    }
-    else {
-        show_mini_login_form(suffix);
-    }
-}
-
-// 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(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 )
-    {
-      return true;
-    }
-    window.alert( mini_login_constants.warning );
-    return false;
-}
-
 function set_language( value ) {
     YAHOO.util.Cookie.set('LANG', value,
     {
diff --git a/skins/standard/global.css b/skins/standard/global.css
index cd89be4f3..29dd9f44e 100644
--- a/skins/standard/global.css
+++ b/skins/standard/global.css
@@ -86,9 +86,6 @@
     form.mini_login input.bz_remember {
         margin: 0;
     }
-    .bz_mini_login_help {
-        color: #777;
-    }
 
 /* header (end)   */
 
diff --git a/template/en/default/account/auth/login-small.html.tmpl b/template/en/default/account/auth/login-small.html.tmpl
index 801fef81e..433925d72 100644
--- a/template/en/default/account/auth/login-small.html.tmpl
+++ b/template/en/default/account/auth/login-small.html.tmpl
@@ -25,74 +25,29 @@
      onclick="return show_mini_login_form('[% qs_suffix %]')">Log In</a>
 
   [% Hook.process('additional_methods') %]
-  
-  <form action="[% login_target FILTER html %]" method="POST" 
+
+  <form action="[% login_target FILTER html %]" method="POST"
         class="mini_login bz_default_hidden"
-        id="mini_login[% qs_suffix FILTER html %]"
-        onsubmit="return check_mini_login_fields( '[% qs_suffix FILTER html %]' );"
-  >
-    <input id="Bugzilla_login[% qs_suffix FILTER html %]" 
-           class="bz_login"
-           name="Bugzilla_login"
-           title="Login"
-           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"
-           title="Password"
-    >
-    <input class="bz_password bz_default_hidden bz_mini_login_help" type="text" 
-           id="Bugzilla_password_dummy[% qs_suffix %]" value="password"
-           title="Password"
-           onfocus="mini_login_on_focus('[% qs_suffix FILTER js %]')"
-    >
+        id="mini_login[% qs_suffix FILTER html %]">
+    <input id="Bugzilla_login[% qs_suffix FILTER html %]" required
+           name="Bugzilla_login" class="bz_login"
+      [% IF Param('emailsuffix') %]
+        placeholder="Login"
+      [% ELSE %]
+        type="email" placeholder="Email Address"
+      [% END %]>
+    <input class="bz_password" name="Bugzilla_password" type="password"
+           id="Bugzilla_password[% qs_suffix FILTER html %]" required
+           placeholder="Password">
     [% IF Param('rememberlogin') == 'defaulton' ||
-          Param('rememberlogin') == 'defaultoff' 
-    %]
+          Param('rememberlogin') == 'defaultoff' %]
       <input type="checkbox" id="Bugzilla_remember[% qs_suffix %]" 
              name="Bugzilla_remember" value="on" class="bz_remember"
-                 [%+ "checked" IF Param('rememberlogin') == "defaulton" %]>
+             [%+ "checked" IF Param('rememberlogin') == "defaulton" %]>
       <label for="Bugzilla_remember[% qs_suffix %]">Remember</label>
     [% END %]
     <input type="submit" name="GoAheadAndLogIn" value="Log in" 
             id="log_in[% qs_suffix %]">
-    <script type="text/javascript">
-      mini_login_constants = {
-          "login" : "login",
-          "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 %]');
-          });
-      }
-      else {
-          YAHOO.util.Event.on(window, 'load', function () {
-              window.setTimeout(function() {
-                  init_mini_login_form('[% qs_suffix FILTER html %]');
-              }, 200);
-          });
-    }
-    </script>
     <a href="#" onclick="return hide_mini_login_form('[% qs_suffix %]')">[x]</a>
   </form>
 </li>
@@ -103,7 +58,12 @@
   <form action="token.cgi" method="post" id="forgot_form[% qs_suffix %]"
         class="mini_forgot bz_default_hidden">
     <label for="login[% qs_suffix FILTER html %]">Login:</label>
-    <input type="text" name="loginname" size="20" id="login[% qs_suffix FILTER html %]">
+    <input name="loginname" size="20" id="login[% qs_suffix FILTER html %]" required
+      [% IF Param('emailsuffix') %]
+        placeholder="Your Login"
+      [% ELSE %]
+        type="email" placeholder="Your Email Address"
+      [% END %]>
     <input id="forgot_button[% qs_suffix %]" value="Reset Password" 
            type="submit">
     <input type="hidden" name="a" value="reqpw">