AhPwcheck :: Get started

Get the files

You can download a zip file and extract it

OR

if you use a version control client you can checkout the sources of the project. It will make it easier to keep the files up to date.

Git clone

Checkout sources with git client.
The following commands create a directory ahpwcheck below webroot and put all files there:

cd [webroot-directory]/[install-dir]/
git clone https://github.com/axelhahn/ahpwcheck.git [optional-name-of-subdir]

Leaving [optional-name-of-subdir] empty will create a subdir named "ahpwcheck"

Download

Get the latest version:
Download

Start

You should have a form with a password field. Here in a simplified example: it has the id "ePassword".

<html>
	(...)
	<body>
		(...)
		<form>
			new password:
			<input type="password" id="ePassword">
			(...)
		</form>
		(...)
	</body>
</html>

Add class to your website

The following codesnippet shows the most simple steps to integrate a basic check into your website.

add the javascript file
add css
create a div for output
initialize password check

This is a basic example.

<html>
	<head>
		(...)
		<!-- step 1: add the javascript file -->
		<script src="/javascript/ahpwcheck.class.js"></script>
		(...)
		<!-- step 2: add css -->
		<style>
			#outpwcheck{border: 1px solid #ddd; padding: 0.3em 1em;}
			#outpwcheck .divCheck{float: left; margin-right: 1em; margin-bottom: 1em; border: 0px solid #ccc; border-left: 1em solid #ccc; padding: 0.1em 0.5em; }
			#outpwcheck .divCheck.checkok{background:#cfc; border-left-color: #080; color:#040}
		</style>
		(...)
	</head>
	<body>
		(...)
		<form>
			new password:
			<input type="password" id="ePassword">
			(...)
		</form>
		
		<!-- step 3: create a div element with an id as placeholder -->
		<div id="outpwcheck"></div>
		
		(...)
		
		<!-- step 4: init check - bind password field an define output -->
		<script>
			var oPwCheck = new ahpwcheck();
			oPwCheck.watch('ePassword', 'outpwcheck');
		</script>
	</body>
</html>

Demo of first example

The basic example code above creates a div below the form. Binding the password field updates the infos during the user types.

It requires by default

1 lowercase letter
1 uppercase letter
1 digit
1 special character
minimum 8 chars

See Customization for more details with all supported functions.