FRIHOST • FORUMS • FAQ • TOS • BLOGS • DIRECTORY
You are invited to Log in or Register a Frihost Account!

[HOW TO...] Password Strength Meter

   Frihost Forum Index -> Scripting -> Html, CSS and Javascript
 


gidevelop
This script measures the strength of a password. It's easy to integrate it into a registration form or whatever. This demo has 2 files.

password.js

Code:
var commonPasswords = new Array('password', 'pass', '1234', '1246');
 
var numbers = "0123456789";
var punctuation = "!.@$£#*()%~<>{}[]"; 
var lowercase = "abcdefghijklmnopqrstuvwxyz";
var uppercase = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";

 
function checkPassword(password) {
 
    var combinations = 0;
 
    if (contains(password, numbers) > 0) {
        combinations += 10;
    }
 
    if (contains(password, lowercase) > 0) {
        combinations += 26;
    }
 
    if (contains(password, uppercase) > 0) {
        combinations += 26;
    }
 
    if (contains(password, punctuation) > 0) {
        combinations += punctuation.length;
    }
 
   
    var totalCombinations = Math.pow(combinations, password.length);
 
   
    if (isCommonPassword(password)) {
        totalCombinations = 75000
    }
 
   
    var timeInSeconds = (totalCombinations / 200) / 2;
    var timeInDays = timeInSeconds / 86400
    var lifetime = 365;
    var percentage = timeInDays / lifetime;
 
    var friendlyPercentage = cap(Math.round(percentage * 100), 100);
    if (totalCombinations != 75000 && friendlyPercentage < (password.length * 5)) {
        friendlyPercentage += password.length * 5;
    }
 
    var progressBar = document.getElementById("progressBar");
    progressBar.style.width = friendlyPercentage + "%";
 
    if (percentage > 1) {
        progressBar.style.backgroundColor = "#3bce08";
        return;
    }
 
    if (percentage > 0.5) {
        progressBar.style.backgroundColor = "#ffd801";
        return;
    }
 
    if (percentage > 0.10) {
        progressBar.style.backgroundColor = "orange";
        return;
    }
 
    if (percentage <= 0.10) {
        progressBar.style.backgroundColor = "red";
        return;
    }
 
 
}
 
function cap(number, max) {
    if (number > max) {
        return max;
    } else {
        return number;
    }
}
 
function isCommonPassword(password) {
 
    for (i = 0; i < commonPasswords.length; i++) {
        var commonPassword = commonPasswords[i];
        if (password == commonPassword) {
            return true;
        }
    }
 
    return false;
 
}
 
function contains(password, validChars) {
 
    count = 0;
 
    for (i = 0; i < password.length; i++) {
        var char = password.charAt(i);
        if (validChars.indexOf(char) > -1) {
            count++;
        }
    }
 
    return count;
}


demo.html [this is a DEMO of how it works]

Code:
<html>
<head>
    <title>Javascript Password Strength Validator</title>
</head>
 
<body>
 
<h1>Javascript - Pass strength [DEMO FILE]</h1>
 
<script type="text/javascript" src="password.js"></script>
 
<table>
<tr>
<td>Parola:</td>
<td><input type="text" onKeyUp="checkPassword(this.value)"/></td>
<td>
<div style="border: 1px solid black; width: 100px;">
<div id="progressBar"
     style="font-size: 1px; height: 20px; width: 0px; border: 1px solid white;">
</div>
</div>
</td>
</tr>
</table>
<p>Credit: GIDevelop.frih.net</p>
</body>
</html>


EXPLANATION

In password.js
First row -> forbidden strings for password (u can add as many you want)
Rows 2,3,4,5 -> vars containing character sets (you can add or erase from existing ones. U also must add the IF sequence for ones you add or remove it if u remove a containing var)

In demo.html

Integrate
Code:
<td>Parola:</td>
<td><input type="text" onKeyUp="checkPassword(this.value)"/></td>
<td>
<div style="border: 1px solid gray; width: 100px;">
<div id="progressBar"
     style="font-size: 1px; height: 20px; width: 0px; border: 1px solid white;">
</div>
</div>
</td>

into a registration form

Inspired from : https://www.microsoft.com/protect/yourself/password/checker.mspx and
http://www.codeandcoffee.com/2007/06/27/how-to-make-a-password-strength-meter-like-google/

Last edited by gidevelop on Wed Jan 09, 2008 1:27 pm; edited 1 time in total
Arnie
Did you make the script yourself? It's also online here?

Do you happen to have a demo online? I'd like to see it!
gidevelop
Yes i made it myself. No online demo yet, i hope in the next 2 weeks to make a demo section on my site. You all going to know. This script is not made from the scratch is a mod from this one I just move the progressbar on right of the text box , add a little height to it and remove the words [weak , fair , medium, etc..]. If you will look to that code you will see that is almost the same. BYE!!!
Diablosblizz
The code is basically the same, except you made the punctuation after numbers. I'll test this when I get home. Thanks for the share!
snowboardalliance
Looks good, but some parts seem really arbitrary

like
Code:

var timeInSeconds = (totalCombinations / 200) / 2;
    var timeInDays = timeInSeconds / 86400
    var lifetime = 365;
    var percentage = timeInDays / lifetime;
 
    var friendlyPercentage = cap(Math.round(percentage * 100), 100);
    if (totalCombinations != 75000 && friendlyPercentage < (password.length * 5)) {
        friendlyPercentage += password.length * 5;
    }


I don't understand these time____ variables and the division doesn't make sense (where do the numbers come from). Also, I don't see why the value 75000 was chosen for common passwords.

Of course you just modified something so you may not know why this is written, but I think you should put some comments to describe this part. Anyway, it looks like a good script.
Arnie
The link I gave above contains notes, it seems he just removed them.
Reply to topic    Frihost Forum Index -> Scripting -> Html, CSS and Javascript

FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2007 Frihost, forums powered by phpBB.