Unobtrusive Password Security Level Form

Few days ago I've put two JavaScript and PHP simple functions on devpro.it, called password security.

Today I would show You hot to use thoose functions, creating a valid W3 and WatchFire form to set or update one password with security level informations.
Security Level is a simple graphic/textual element used, for example, when You create a Windows Live account.

This kind of information is really useful for users because they've to choose at least a medium security password to have a "secure" account.

That's why I've created this example page and now I'm telling You how I did them.



First step, external files
I've saved PHP and JavaScript dedicated functions in different files.
Then I've created an external CSS file too and a simple graphic bar:


It's dimension are the same of element that will show this bar.

CSS important things are p.pwdlevelN informations, used to show background image with differents positions.



Next step, procedural PHP code
Example page uses few PHP lines of code, and thoose need to show different pages if user hasn't JavaScript support (or He has JS disabled) with or without a notice message.
This is used code:

// array with every password security levels
$security_levels = array('not secure', 'low security', 'medium security', 'high secutiry');

// if user choosed a password
if(isset($_POST['pwd'])) {

    // include psl function [http://www.devpro.it/code/141.html]
    require 'psl.php';

    // get security level
    $level = psl($_POST['pwd']);

    // create an element with security level informations
        $security_informations =
    '
'.$security_levels[$level].'
';
   
    // show message if password has been approved
    if($level > 1) {
        $security_informations .= 'password successful setted
';
   
        // do stuff, for example change password on db
    }
    else
        // just show a message about bad security
        $security_informations .= 'please choose a better password
';
}
else {
   
    // create default element
        $security_informations = '
';
}

// create output
?>

As You can see, this code is really simple and sure, basic too but is useful to understand why whe need PHP to create an unobtrusive JS like page.



Next step, JS code, using PHP too
Since I've defined an array without special chars, I could use them to create same JavaScript array too while other code is used to enable or disable submit button showing security level under the password input.

// returns an element by id
function $(id){
    return document.getElementById(id);
};

// checks password security, enables submit if it's secure
function checkSecurity(inputId, securityId, submitId){

    // array with every password security levels (simple with a php variable)
    var    security_levels = ["<?php echo implode('","', $security_levels); ?>"];
   
    // get security level
    var    level = psl($(inputId).value);
   
    // create an element with security level informations
    var    security_informations = document.createElement("P");
    security_informations.id = securityId;
    security_informations.className = "pwdlevel".concat(level);
    security_informations.appendChild(document.createTextNode(security_levels[level]));
   
    // switch the old information element with new one
    var    oldinformations = $(securityId);
    oldinformations.parentNode.replaceChild(security_informations, oldinformations);

    // enable submit if password is secure enought
    $(submitId).disabled = level < 2;
};

// clean pwd value and disable the submit
onload = function(){
    $("userpwd").value = "";
    $("setpwd").disabled = true;
}

Just a note about DOM, Internet Explorer is not compatible with standard (what a news ...) setAttribute HTMLElement method, then I've used direct assignment for id and className.




Final step, W3 / WCAG compilant layout
To show security level and to choose the new password, I've used a standard output that should be compatible with every browser from IE 5 to 7, FF 1 to 2, Opera 8 and 9 and maybe 7 too.
I've not tested KDE, Safari and Camino but I hope these browsers will don't have any problem with simple code used.
You can see full used code in this page.



I hope this example page will be a start point to create your own password security level area.