kostiklv/remember_password.html

## remember_password.html
<html>
<!--
	This is an example of how to make browsers
	offer to remember password and later fill in those passwords
	for dynamic login forms.

	To make the browser offer to remember passwords the form should be actually submitted.
	Since we are handling login with AJAX we don't want the form to submit, so we are still submitting it
	into a dummmy iframe with dummy URL.
	It's good idea to actually create empty dummy.html file, otherwise you'll flood you error.log with 404s

	To make the browser fill in/suggest login/password the login/password fields
	should be loaded with the page, so we create a hidden form with login/password fields and later replace parts of
	dynamically loaded login form with these fields.

	(c) Konstantin Tjuterev / kostik.lv at gmail com
-->

<head>
	<title>Test remember password</title>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">

function display_login_form_good()
{
	// dyamically add the form -
	// for simplicity it's hardcoded here, but it can be loaded by AJAX
	// note the placeholders for login/password fields
	$('#login').html(
		'<h3>Remember password should WORK</h3>' +
		'Email:<br/>' +
		'<span id="email_place_holder"/><br/>' +
		'Password:<br/>' +
		'<span id="password_place_holder"/><br/>' +
		'<input id="login-button" type="submit" value="Login"/>');

	// replace placeholders with the actual fields from hidden div
	$('#email_place_holder').replaceWith($('#email'));
	$('#password_place_holder').replaceWith($('#password'));

	// this is not required, just cleaning up
	$('#dont_forget').remove();

	// suppose our login is handled via AJAX
	// so there is no direct submit
	$('#login-button').click(function (ev) {
		// do NOT call ev.preventDefault() or return false
		// otherwise you will not get Remember Password prompt in IE and Chrome
		alert('AJAX login...');
	});
}

// This form will not work, since the fields are created dynamically
// and browsers don't offer saved passwords for such fields
function display_login_form_bad()
{
	$('#dont_forget').remove();
	$('#login').html(
		'<h3>Remember password should NOT work</h3>' +
		'Email:<br/>' +
		'<input type="text" name="email" id="email"/><br/>' +
		'Password:<br/>' +
		'<input type="password" name="password" id="password"/><br/>' +
		'<input type="submit" value="Login"/>');
}

</script>
</head>
<body>
	<input type="button" value="Show good form" onclick="display_login_form_good()"/>
	<input type="button" value="Show bad form" onclick="display_login_form_bad()"/>

	<!-- Our dummy iframe where the form submits to -->
	<iframe src="dummy.html" name="dummy" style="display: none"></iframe>
	<form action="" method="post" target="dummy">
		<div id="login">

		</div>
	</form>

	<!--
		This hidden div should be included in static page content.
		Currently, browsers check for fields suitable for remembered passwords
		only when page initially loads.
		Later we simply move the fields from this div to actual form, where required
	-->
	<div id="dont_forget" style="display: none">
		<form action="" method="post">
			<input type="text" name="email" id="email"/>
			<input type="password" name="password" id="password"/>
			<input type="submit" value="Login" id="dummy_submit"/>
		</form>
	</div>
</body>
</html>
	<html>
	<!--
	This is an example of how to make browsers
	offer to remember password and later fill in those passwords
	for dynamic login forms.

	To make the browser offer to remember passwords the form should be actually submitted.
	Since we are handling login with AJAX we don't want the form to submit, so we are still submitting it
	into a dummmy iframe with dummy URL.
	It's good idea to actually create empty dummy.html file, otherwise you'll flood you error.log with 404s

	To make the browser fill in/suggest login/password the login/password fields
	should be loaded with the page, so we create a hidden form with login/password fields and later replace parts of
	dynamically loaded login form with these fields.

	(c) Konstantin Tjuterev / kostik.lv at gmail com
	-->

	<head>
	<title>Test remember password</title>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
	<script type="text/javascript">

	function display_login_form_good()
	{
	// dyamically add the form -
	// for simplicity it's hardcoded here, but it can be loaded by AJAX
	// note the placeholders for login/password fields
	$('#login').html(
	'<h3>Remember password should WORK</h3>' +
	'Email:<br/>' +
	'<span id="email_place_holder"/><br/>' +
	'Password:<br/>' +
	'<span id="password_place_holder"/><br/>' +
	'<input id="login-button" type="submit" value="Login"/>');

	// replace placeholders with the actual fields from hidden div
	$('#email_place_holder').replaceWith($('#email'));
	$('#password_place_holder').replaceWith($('#password'));

	// this is not required, just cleaning up
	$('#dont_forget').remove();

	// suppose our login is handled via AJAX
	// so there is no direct submit
	$('#login-button').click(function (ev) {
	// do NOT call ev.preventDefault() or return false
	// otherwise you will not get Remember Password prompt in IE and Chrome
	alert('AJAX login...');
	});
	}

	// This form will not work, since the fields are created dynamically
	// and browsers don't offer saved passwords for such fields
	function display_login_form_bad()
	{
	$('#dont_forget').remove();
	$('#login').html(
	'<h3>Remember password should NOT work</h3>' +
	'Email:<br/>' +
	'<input type="text" name="email" id="email"/><br/>' +
	'Password:<br/>' +
	'<input type="password" name="password" id="password"/><br/>' +
	'<input type="submit" value="Login"/>');
	}

	</script>
	</head>
	<body>
	<input type="button" value="Show good form" onclick="display_login_form_good()"/>
	<input type="button" value="Show bad form" onclick="display_login_form_bad()"/>

	<!-- Our dummy iframe where the form submits to -->
	<iframe src="dummy.html" name="dummy" style="display: none"></iframe>
	<form action="" method="post" target="dummy">
	<div id="login">

	</div>
	</form>

	<!--
	This hidden div should be included in static page content.
	Currently, browsers check for fields suitable for remembered passwords
	only when page initially loads.
	Later we simply move the fields from this div to actual form, where required
	-->
	<div id="dont_forget" style="display: none">
	<form action="" method="post">
	<input type="text" name="email" id="email"/>
	<input type="password" name="password" id="password"/>
	<input type="submit" value="Login" id="dummy_submit"/>
	</form>
	</div>
	</body>
	</html>