This demo demonstrates how developers are able to use ZK client programming to measure password strength on the ZK Textbox component.

Password strength is a measure of the effectiveness of a password in resisting guessing and brute-force attacks. In its usual form, it estimates how many trials an attacker who does not have direct access to the password would need, on average, to guess it correctly. The strength of a password is a function of length, complexity, and unpredictability.

<zk xmlns:c="client">
	<style>
		.meter {
			font-size: 1px;
			height: 3px;
		}
		.meter-inner {
			width: 0px;
			height: 3px;
		}
		.meter-red .meter-inner{
			background: red;
		}
		.meter-orange .meter-inner{
			background: orange;
		}
		.meter-green .meter-inner{
			background: green;
		}
	</style>
	<grid width="530px">
		<columns>
			<column hflex="1" />
			<column hflex="2" />
		</columns>
		<rows>
			<row>
				Password
				<textbox id="pwd" width="150px" type="password" c:onChanging="meterUpdate(event)" />
			</row>
			<row>
				Password Strength
				<vlayout>
					<div id="meter" sclass="meter" width="240px">
						<div sclass="meter-inner"></div>
					</div>
					<label id="msg" />
				</vlayout>
			</row>
		</rows>
	</grid>
	<script src="/widgets/client_side/password_strength/pwd_str.js" ></script>
</zk>

<zk xmlns:c="client">
	<groupbox closable="false" sclass="z-demo-config" style="padding: 10px;">
		<caption label="Password Test"></caption>
		
		<hlayout spacing="10px">
			<button label="Very Weak" width="100px">
				<attribute c:name="onClick"><![CDATA[ typePassword("zknice"); ]]></attribute>
			</button>
			<button label="Weak" width="100px">
				<attribute c:name="onClick"><![CDATA[ typePassword("zkawesome"); ]]></attribute>
			</button>
			<button label="Medium" width="100px">
				<attribute c:name="onClick"><![CDATA[ typePassword("zkAwesome"); ]]></attribute>
			</button>
			<button label="Strong" width="100px">
				<attribute c:name="onClick"><![CDATA[ typePassword("zk5Awesome!"); ]]></attribute>
			</button>
			<button label="Strongest" width="100px">
				<attribute c:name="onClick"><![CDATA[ typePassword("zk%ISAwe50me4ramew0rk!"); ]]></attribute>
			</button>
			<checkbox label="Show Password" onCheck='pwd.setType(self.isChecked() ? "text" : "password")' />
		</hlayout>
	</groupbox>
	<script><![CDATA[
		function typePassword(text) {
			var pwdWidget = zk.Widget.$("$pwd");
			pwdWidget.setValue(text);
			pwdWidget.fire('onChanging',{ value : text });			
		}
	]]></script>
</zk>

//Meter update function 
function meterUpdate(e) {
	var score = strengthMeasure(e.value), 
		desc = [ "", "Very Weak", "Weak", "Medium", "Medium", "Strong", "Strongest" ],
		meter = $("$meter"), 
		meterWidget = zk.Widget.$(meter);

	switch (score) {
		case 1:
		case 2:
			meterWidget.setSclass("meter meter-red");
			break;
		case 3:
		case 4:
			meterWidget.setSclass("meter meter-orange");
			break;
		case 5:
		case 6:
			meterWidget.setSclass("meter meter-green");
			break;
		default:
			meterWidget.setSclass("meter");
	}
	
	//Get ZK Widget through jQuery selector
	zk.Widget.$($(".meter-inner")).setWidth(score * meter.width() / desc.length + "px");
	
	//Get ZK Widget through ID
	zk.Widget.$("$msg").setValue(desc[score]);
}

/* Simple Rule */
function strengthMeasure(text) {
	var score = 0;
	if (text.length > 0)
		score++;

	if (text.length > 6)
		score++;

	if ((text.match(/[a-z]/)) && (text.match(/[A-Z]/)))
		score++;

	if (text.match(/\d+/))
		score++;

	if (text.match(/.[!,@,#,$,%,^,&,*,?,_,~,-,(,)]/))
		score++;

	if (text.length > 12)
		score++;

	if (text.length == 0)
		score = 0;

	return score;
}