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>






Copyright © 2021 Axel Hahn
project page: GitHub (en)
results will be here