AhPwcheck :: Customization

Customization

For a first basic intro go to Get Started

You can influence several behaviours.

customize texts and/ or use other languages
change output style (css)
change requirements for a check
change weights for scoring

They way to do this is using an option array. With pre defined keys you can override the internal defaults.

<script>
	var aOptions = {
		// put settings to override here
		(...)
	};
	var oPwCheck = new ahpwcheck(aOptions);
</script>

All override settings can be mixed.

<script>
	var aOptions = {
		'checks': { ...	},
		'lang': { ... }
	};
	var oPwCheck = new ahpwcheck(aOptions);
</script>

Texts/ language

Basics for texts

The default text is in english. You can override the default texts. The key in the options hash is "lang".

<script>
	var aOptions = {
		'lang': {
			[Name of subkey]: [your text]  // string
		},
	};
	var oPwCheck = new ahpwcheck(aOptions);
</script>

Keys for language specific texts

There is a intro text (Check of the password - matching requirements: 0) and one text for each check (they have the same keys like the checks).
The existing keys for texts are:

Key	Check	Default
introtext	Pre text before boxes for each check
lcase	lower case character; a-z
ucase	upper case character; A-Z
digits	digits; characters 0-9
special	special characters; everything that is not a letter a-z/ A-Z or a digit 0-9
count	count of characters

Replacements

What you already see in the table above: there are some pre defined placeholders.

Key	Description
[COUNT]	Count of detected characters in a check. In the introtext it is the count of fullfilled required checks
[REQUIRED]	Count of required characters in a check; remark: you can override it for each check
[SCORE]	score value; available in introtext only

Example

As an example: use German texts and show the the required chars for each check.

<script>
	var aOptions = {
		'lang': {
			'introtext': 'Check des Passwortes - erfüllte Bedingungen: [COUNT]/ [REQUIRED]',

			'lcase': 'Kleinbuchstaben (min [REQUIRED]): [COUNT]',
			'ucase': 'Grossbuchstaben (min [REQUIRED]): [COUNT]',
			'digits': 'Ziffern (min [REQUIRED]): [COUNT]',
			'special': 'Sonderzeichen (min [REQUIRED]): [COUNT]',
			'count': 'Zeichen (min [REQUIRED]): [COUNT]'
		},
	var oPwCheck = new ahpwcheck(aOptions);
</script>

Style output

The is styled with pure css. It must be additionally defined in your css.

Css class	Description
#outpwcheck	your own wrapping box
#outpwcheck .divCheck	box for each check inside the wrapping div
#outpwcheck .divCheck.checkok	mark a box for a check with fullfilled requirements

<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>

Customize checks

Basics for checks

Each single check can have zero, one or more required characters. (zero means disabled - it is not recommended).

The key in the options hash is "checks".
Each check has its own subkey - and there is a key "required".

<script>
	var aOptions = {
		'checks': {
			[Name of the check]:{
				'required': 1 // integer for count of required chars
			}
		}
	};
	var oPwCheck = new ahpwcheck(aOptions);
</script>

Checks and their keys

The existing checks are:

Key	Check	Default
lcase	lower case character; a-z	required:
ucase	upper case character; A-Z	required:
digits	digits; characters 0-9	required:
special	special characters; everything that is not a letter a-z/ A-Z or a digit 0-9	required:
count	count of characters	required:

Example

If you want to check for a password with minimum length of 12 (key "count") and it should contain 4 upper case letters (key "ucase"):

<script>
	var aOptions = {
		'checks': {
			'ucase':{
				'required': 4
			},
			'count':{
				'required': 12
			}
		}
	};
	var oPwCheck = new ahpwcheck(aOptions);
</script>

Scoring

Basics for scoring

The scoring is a float value between 0..1. It says how many requirements were fulfilled in a given password. It depends on the number of checks, their required count (see "Customize checks" above) and a weight for each check.

Important to say:
Here is no check for dictionary words, simple sequences (i.e. "abc" or "qwer"). So the score is NOT the measurement for the real strength of a given password.

<script>
	var oPwCheck = new ahpwcheck();
	
	// some tests ...
	
	alert(oPwCheck.getScore("aB1"); 
	//  ... not enough chars; no special char
	
	alert(oPwCheck.getScore("aB1:3"); 
	//  ... one special char but still not enough chars; 
	
	alert(oPwCheck.getScore("aaaaaaaaaaaa"); 
	//  ... enough chars but of a single character
	
	alert(oPwCheck.getScore("abcabc123..."); 
	//  ... no capital letter
	
	alert(oPwCheck.getScore("abcABC123..."); 
	// 
	
</script>

The key in the options hash is "checks".
Each check has its own subkey - and there is a key "weight". A weight is value greater equal 0. It represents the relative weight for each of the checkitem.

<script>
	var aOptions = {
		'checks': {
			[Name of the check]:{
				'weight': 1 // float value >= 0 
			}
		}
	};
	var oPwCheck = new ahpwcheck(aOptions);
</script>

Checks and their keys

The existing checks and their weights are:

Key	Check	Default
lcase	lower case character; a-z	weight:
ucase	upper case character; A-Z	weight:
digits	digits; characters 0-9	weight:
special	special characters; everything that is not a letter a-z/ A-Z or a digit 0-9	weight:
count	upper case character	weight:

Callback

With the callback option you can react on changes in the password field.
In the example below a function called "mycallback()" is defined. This function must exist.

<span id="outscore"></span>
<script>
	var aOptions = {
		'callback': 'mycallback()'
	};
        /**
         * custom callback function
         */
        function mycallback(){
            var sPassword=document.getElementById('ePassword').value;
            document.getElementById('outscore').innerHTML=oPwCheck.getScore(sPassword);
        }
	var oPwCheck = new ahpwcheck(aOptions);
        oPwCheck.watch('ePassword', 'outpwcheck');
</script>