Fighting Firefox password reminder

Posted on Friday, January 1, 2010 in Web development

Fighting Firefox password reminder

The situation is as follows: a website which, after logging in with a username and a password, allows you to register new users and a Mozilla Firefox user with the option to remember passwords enabled.

The case: the user adds a new account or logs in with an account and then edits this account from another account.

The problem: When the user is adding the new account Firefox will fill the fields with the user and password of the current account. When the user is editing an existing account Firefox will fill the fields with the username and password from the account being edited —which is also in the password reminder— if the user is not editing the account with the intent to change its password will not notice that only the first of the two fields "Password" and "Repeat password" is filled, so when the user tries to save it will display "Passwords don't match" error.

Solution:

  • First attempt: rename the password field on the edit form so it doesn't have the same name as the password field in the login form:

    Log in:

    <tr>
      <td><label for="user">Username:</label></td>
      <td><input name="user" id="user" type="text"></td>
    </tr>
    <tr>
      <td><label for="pass">Password:</label></td>
      <td><input name="pass" id="pass" type="password"></td>
    </tr>
    

    Add/edit user:

    <tr>
      <td><label for="edituser">Username:</label></td>
      <td><input name="edituser" id="edituser" type="text"></td>
    </tr>
    <tr>
      <td><label for="editpass">Password:</label></td>
      <td><input name="editpass" id="editpass" type="password"></td>
    </tr>
    <tr>
      <td><label for="editpass2">Repeat Password:</label></td>
      <td><input name="editpass2" id="editpass2" type="password"></td>
    </tr>
    

    Problem: same result, the field name is not the reason why Firefox only fills the first password field but not the second one, it seems it only looks for the first password field.

  • Second attempt: hiding password fields and instead show a link to change the password that, when clicked, shows the password fields.

    <script type="text/javascript;">
    <!--
      function show_pass()
      {
        document.getElementById('tr_chpass').style.display = 'none';
        document.getElementById('tr_pass').style.display = 'table-row';
        document.getElementById('tr_pass2').style.display = 'table-row';
      }
    //-->
    </script>
    
    <!-- ... -->
    
    <tr>
      <td><label for="user">Username:</label></td>
      <td><input name="user" id="user" type="text"></td>
    </tr>
    <tr id="tr_chpass">
      <td><label for="chpass">Password:</label></td>
      <td><span
          id="chpass"
          style="cursor: pointer; color: blue; border-bottom: 1px dotted blue;"
          onclick="show_pass();">
          Change password</span>
      </td>
    </tr>
    <tr style="display: none;" id="tr_pass">
      <td><label for="pass">Password:</label></td>
      <td><input name="pass" id="pass" type="password"></td>
    </tr>
    <tr style="display: none;" id="tr_pass2">
      <td><label for="pass2">Repeat password:</label></td>
      <td><input name="pass2" id="pass2" type="password"></td>
    </tr>
    

    Problem: same result.

  • Third attempt: not including the password field in the form, create it with JavaScript adding them with element.innerHTML.

    <script type="text/javascript;">
    <!--
      function show_pass()
      {
        var tr_chpass = document.getElementById("tr_chpass");
        tr_chpass.style.display = "none";
        var tr_pass = document.createElement('tr');
        tr_pass.innerHTML =
            "<td><label for='pass'>Password:<\/label><\/td>" +
            "<td><input type='password' name='pass' id='pass'><\/td>";
        var tr_pass2 = document.createElement('tr');
        tr_pass2.innerHTML =
            "<td><label for='pass2'>Repeat Password:<\/label><\/td>" +
            "<td><input type='password' name='pass2' id='pass2'><\/td>";
        var parent_table = tr_chpass.parentNode;
        parent_table.insertBefore(tr_pass, tr_chpass);
        parent_table.insertBefore(tr_pass2, tr_chpass);
      }
    //-->
    </script>
    
    <!-- ... -->
    
    <tr>
      <td><label for="user">Username:</label></td>
      <td><input name="user" id="user" type="text"></td>
    </tr>
    <tr id="tr_chpass">
      <td><label for="chpass">Password:</label></td>
      <td><span
          id="chpass"
          style="cursor: pointer; color: blue; border-bottom: 1px dotted blue;"
          onclick="show_pass();">
          Change password</span>
      </td>
    </tr>
    

    Problem: it seems that Firefox doesn't render correctly tables created with innerHTML since the resulting table seems like this:

  • Fourth and last attempt: not including the password field in the form, create it with JavaScript adding them with element.insertBefore()

    <script type="text/javascript;">
    <!--
      function show_pass()
      {
        document.getElementById("tr_chpass").style.display = "none";
        var tr_pass = document.createElement('tr');
        var tr_pass2 = document.createElement('tr');
        var td_label_pass = document.createElement('td');
        td_label_pass.innerHTML = "<label for='pass'>Password:<\/label>";
        var td_input_pass = document.createElement('td');
        td_input_pass.innerHTML = "<input type='password' name='pass' id='pass'>";
        var td_label_pass2 = document.createElement('td');
        td_label_pass2.innerHTML = "<label for='pass2'>Repeat Password:<\/label>";
        var td_label_pass2 = document.createElement('td');
        tr2td2.innerHTML = "<input type='password' name='pass2' id='pass2'>";
        tr_pass.insertBefore(td_label_pass, null);
        tr_pass.insertBefore(td_input_pass, null);
        tr_pass2.insertBefore(td_label_pass2, null);
        tr_pass2.insertBefore(td_input_pass2, null);
        var tr_chpass = document.getElementById("chpass_row");
        var parent_table = tr_chpass.parentNode;
        parent_table.insertBefore(tr_pass, tr_chpass);
        parent_table.insertBefore(tr_pass2, tr_chpass);
      }
    //-->
    </script>
    
    <!-- ... -->
    
    <tr>
      <td><label for="user">Username:</label></td>
      <td><input name="user" id="user" type="text"></td>
    </tr>
    <tr id="tr_chpass">
      <td><label for="chpass">Password:</label></td>
      <td><span
          id="chpass"
          style="cursor: pointer; color: blue; border-bottom: 1px dotted blue;"
          onclick="show_pass();">
          Change password</span>
      </td>
    </tr>