Welcome Guest [Log In] [Register]
Add Reply
Simple Password Strength
Topic Started: Jun 30 2008, 02:47 PM (134 Views)
Admin
Administrator
This is only for the registration page, you can do the same for the edit page.


ajax.php (put it in the include folder)

Code:
 

<?php
$do = $_GET['do'];
switch($do) {
case 'check_password_strength':
$password = $_GET['pass'];
$strength = 0;
// letters (lowercase)
if(preg_match("/([a-z]+)/", $password)) {
$strength++;
}
// letters (uppercase)
if(preg_match("/([A-Z]+)/", $password)) {
$strength++;
}
// numbers
if(preg_match("/([0-9]+)/", $password)) {
$strength++;
}
// non word characters
if(preg_match("/(W+)/", $password)) {
$strength++;
}
header('Content-Type: text/xml');
header('Pragma: no-cache');
echo '<?xml version="1.0" encoding="UTF-8"?>';
echo '<result><![CDATA[';
switch($strength) {
case 1:

echo '<div style="width: 25%" id="password_bar">Very Weak</div>';
break;
case 2:
echo '<div style="width: 50%" id="password_bar">Weak</div>';
break;
case 3:
echo '<div style="width: 75%" id="password_bar">Strong</div>';
break;
case 4:
echo '<div style="width: 100%" id="password_bar">Very Strong</div>';
break;
}
echo ']]></result>';
break;
default:
echo 'Error, invalid action';
break;
}
?>


the stuff in the css file
Code:
 

#password_strength {
width: 250px;
background: #cccccc;
}
#password_bar {
font-size: 11px;
background: #7FFF00;
border: 1px solid #cccccc;
padding: 5px;
}


top of register.php

Code:
 




<script type="text/javascript">
function toggle_pass(passid) {
if (window.XMLHttpRequest) {
http = new XMLHttpRequest();
} else if (window.ActiveXObject) {
http = new ActiveXObject("Microsoft.XMLHTTP");
}
handle = document.getElementById(passid);
var url = 'include/ajax.php?';
if(handle.value.length > 0) {
var fullurl = url + 'do=check_password_strength&pass=' + encodeURIComponent(handle.value);
http.open("GET", fullurl, true);
http.send(null);
http.onreadystatechange = statechange_password;
}else{
document.getElementById('password_strength').innerHTML = '';
}
}

function statechange_password() {
if (http.readyState == 4) {
var xmlObj = http.responseXML;
var html = xmlObj.getElementsByTagName('result').item(0).firstChild.data;
document.getElementById('password_strength').innerHTML = html;
}
}
</script>



make your password box look like this
Code:
 

<input type="password" name="pass" id="pass" onChange="toggle_pass('pass')" maxlength="30" value="<? echo $form->value("pass"); ?>">



then add under it (or w.e you want the bar to go
Code:
 

<strong>Password Strength</strong>: <div id="password_strength"> </div>


Offline Profile Quote Post Goto Top
 
1 user reading this topic (1 Guest and 0 Anonymous)
« Previous Topic · Other · Next Topic »
Add Reply