@import "http://lib.zetabin.com/jQuery/facebox/facebox.css";
|
Simple Password Strength
|
|
Topic Started: Jun 30 2008, 02:47 PM (134 Views)
|
|
Admin
|
Jun 30 2008, 02:47 PM
Post #1
|
|
Administrator
- Posts:
- 303
- Group:
- Admins
- Member
- #1
- Joined:
- Mar 20, 2008
|
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>
|
|
|
| |
| 1 user reading this topic (1 Guest and 0 Anonymous)
|