J Wäge > Notes

I enjoy your site very much.

Notes

Delayed Password Masking With ign_password_protect

Requirements

• ign_password_protect (Textpattern Plugin)
• dpassword (jQuery Plugin)
• Textpattern (CMS)
• jQuery (Javascript Library)

Demonstration

In the password field (second field); enter some characters to see the delayed masking occur.

Javascript

1. Include jQuery library in head of document.
2. Include dPassword plugin in head of document.
3. Call on the plugin’s dPassword function also in the head of your document.

<script type="text/javascript" src="<txp:site_url />js/jquery.js"></script>
<script type="text/javascript" src="<txp:site_url />js/jQuery.dPassword.js"></script>
<script type="text/javascript">
	$(document).ready( function() {
		$('input:password').dPassword();
	});
</script>
</script>

Login Form

Called with the ign_password_protect plugin.

<txp:ign_show_login form="login_form" />

The Textpattern Form ‘login_form’ contains the following:

<input name="username" class="delayed-masking" type="username" />
<input name="delayed-masking" id="delayed-masking" class="delayed-masking" type="password" />

CSS (Optional)

An optional class was provided for each input field called delayed-masking. The following CSS mimics the example style above.

<style type="text/css">
input.delayed-masking {
width: 290px;
font-size: 20px;
margin-right: 10px;
}
</style>