Fri Jan 1 06:15:06 2010
The situation is as follows: a website which, after logging in with an 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 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, field name is not the reason why Firefox only fills
first password field but not the second one, it seems that it only looks for
the first password field.
-
Second attempt: hiding password fields and instead show a link to change
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 password field in 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 password field in 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>
Comments: 0
