Layalena

this article will show you how to create a JavaScript password strength Checker in the registration form in your web site.
just like the one is used in Hotmail ,Google ,Yahoo and even in Cpanel
once i was asked to add the password strength checker in a form
and as any developer i have to start searching the internet looking for something ready made to do this kind of act in the form but after many wasted hours i found that most of the scripts is using the Google password checker or thy created a huge script to do a small thing

What makes a strong password
a strong password should appear to be a random string of characters.use this tips for strong passwords:

1. Make your password 8 characters or more in length, 14 characters or longer is ideal
2. Use upper and lower case letters
3. Combine letters, numbers, and special characters (!,@,#,$,%,^,&,*,?,_,~)

that was three tips for a stronger password.
so i have now to create a small function JavaScript function to do the password strength checker (meter)

first this is the password field that should be in the form

<input onkeyup="DoPasswordStrength(this)" name="usr_password"
 class="input req" type="text" id="usr_password" size="40" />
<BR>
<div id="passwdRating">Password Strength:
<div id="pass_bar" class="pass_bar" style="height: 10px;
border: 1px solid #fff;width:100px!important;
display:block!important;">
<div class="progress_bar_base" id="progress_bar_base" 
style="height: 10px;"></div></div>
<div style="display:inline;" id="ps-rating">
</div>
</div>

and we used these CSS styles to display the BAR

.progress_bar_100{width:100px!important;background-color:#EA0000!important;}
.progress_bar_90{width:90px!important;background-color:#EA0000!important;}
.progress_bar_80{width:80px!important;background-color:#EA0000!important;}
.progress_bar_70{width:70px!important;background-color:#FC0!important;}
.progress_bar_60{width:60px!important;background-color:#FC0!important;}
.progress_bar_50{width:50px!important;background-color:#FC0!important;}
.progress_bar_40{width:40px!important;background-color:#0C3!important;}
.progress_bar_30{width:30px!important;background-color:#0C3!important;}
.progress_bar_20{width:20px!important;background-color:#0C3!important;}
.progress_bar_10{width:10px!important;background-color:#0C3!important;}
.progress_bar_0{width:0!important;background-color:#0C3!important;}

.pass_bar_0{width:0!important;}
.pass_bar_10{width:10px!important;}
.pass_bar_20{width:20px!important;}
.pass_bar_30{width:30px!important;}
.pass_bar_40{width:40px!important;}
.pass_bar_50{width:50px!important;}
.pass_bar_60{width:60px!important;}
.pass_bar_70{width:70px!important;}
.pass_bar_80{width:80px!important;}
.pass_bar_90{width:90px!important;}
.pass_bar_100{width:100px!important;}

.pass_bar_color_1{background-color:#EA0000!important;}
.pass_bar_color_2{background-color:#ffa200!important;}
.pass_bar_color_3{background-color:#ff0!important;}
.pass_bar_color_4{background-color:#c0ff00!important;}
.pass_bar_color_5{background-color:#0f0!important;}

now we add this JavaScript Function any where inside the body tag

<script type="text/javascript">
var pass_strength_phrases = {
    0: 'Very Weak',
    10: 'Very Weak',
    20: 'Weak',
    30: 'Weak',
    40: 'Weak',
    50: 'Medium',
    60: 'OK',
    70: 'Quite strong',
    80: 'Medium strong',
    90: 'Strong',
    100: 'Very Strong'
};
function getPasswordStrength(h)
{

        var d=(h.length);
        if(d>5){d=5}
        var f=h.replace(/[0-9]/g,"");
        var g=(h.length-f.length);
        if(g>3){g=3}
        var a=h.replace(/W/g,"");
        var c=(h.length-a.length);
        if(c>3){c=3}
        var b=h.replace(/[A-Z]/g,"");
        var i=(h.length-b.length);
        if(i>3){i=3}
        var e=((d*10)-20)+(g*10)+(c*15)+(i*10);
        if(e<0){e=0}
        if(e>100){e=100}
        //alert(e)
        return e

}
function DoPasswordStrength(g)
{
        var f=""+g.value;
        PassStringth=getPasswordStrength(f)
        var pwminstrength=0,passNum=0;

        if(PassStringth>0&&PassStringth<=10){passNum=10;}
        if(PassStringth>10&&PassStringth<=40){passNum=40;}
        if(PassStringth>40&&PassStringth<=60){passNum=60;}
        if(PassStringth>60&&PassStringth<=80){passNum=80;}
        if(PassStringth>80&&PassStringth<=100){passNum=100;}
j="passwdRating";
var l=getPasswordStrength(f);
var q=(parseInt(l/10)*10);

var e=document.getElementById(j);
if(!e){return;alert("Password Strength Display Element Missing")}
var p=e.getElementsByTagName("div");
var a=p[0].getElementsByTagName("div");

var t=pwminstrength>0?pwminstrength:100;
var m=l<t?l:t;
var d=parseInt((m/t)*5);

a[0].className="pass_bar_base pass_bar_"+q+" pass_bar_color_"+(d?d:1);

        document.getElementById("ps-rating").innerHTML=
pass_strength_phrases[q]+' ('+PassStringth+'/100)';
        document.getElementById("progress_bar_base").className=
"progress_bar_base pass_bar_"+q+" pass_bar_color_"+(d?d:1);
        }
document.getElementById("ps-rating").innerHTML=pass_strength_phrases[10]+' (0/100)';
</script>

it all should be like this :

if you like it and like to use feel free to change what ever you like in it just please if you can add a link to this article.

Thanks

salaam

Now we have don most of the work if you don’t want to use the sound in the form you can just stop here and upload your work.

in this article i will show you and help you to add the captcha sound where we will use a recorder sound for all the alphabetical and numeric of the English language i did search the internet and found these recorded WAV files i can’t say its free or something but i can’t fined the copyright of the files you can download the files from this link captcha sound wav after you download the RAR file extract it and upload the WAV files to your server.

now we need to create a span tag or div in the document with the style display:none it would be like this

<span id="speech" style="display:none"></span>

after that we will add the speakers icon in front of the refresh icon that we used before you can creat your own icon or use this one

and add a link on this image to execute a JavaScript function the code will be like this :

<a href="#" onclick="PlaySound(0);return false;"
   alt="" title="Click to hear the code spoken" " title="Change the code">
<img src="images/speaker.gif" height="22" border=0> </a>

and we gonna use this JavaScript function to play the sound and hear the code spoken :

function PlaySound(times)
{
        var t = 1;
        if(times==0)
        {
            setTimeout("PlaySound(1)", t*1000)
        }
        else
        {
            src="play_sound.php";
            var newSrc = src + '?d=' + LBD_GetTimestamp();
            document.getElementById("speech").innerHTML="";
      var ie=document.all && !window.opera
      if(ie)
      {
        document.getElementById("speech").innerHTML=document.getElementById("speech")
.innerHTML+'<embed src="'+newSrc+'" type="audio/wav" autostart="true" 
loop="false" width="0" height="0" name="BEEPMOUSEOVER" enablejavascript="true"> '
      }
      else
      {
        document.getElementById("speech").innerHTML=document.getElementById("speech")
.innerHTML+'<object
 data="'+newSrc+'" loop="0" autoplay="1" type="audio/wav" height="0" width="0">'
        document.getElementById("speech").innerHTML=document.getElementById("speech")
.innerHTML+'</object>'
      }
        }
}

in the function above we had to change the code of inserting abject related to the browser is used by the user is it IE or Firefox because each one behave different than the other and if you read the code you will find that i used the source as play_sound.php not any WAV files.

This play_sound.php contains a function to join the WAV files to be as one file and here is the code for this file :

session_start();
ob_start();
$code=strtolower($_SESSION['image_sound_value']);
$arr = str_split($code);
$WavPath="includes/wav/";

$MyFile="";
$ctype="audio/x-wav";
foreach ($arr as $key => $value) {
    $arr[$key]=$WavPath."$value.wav";
}
$MyFile = joinwavs($arr);
header('Content-Type: '.$ctype);
header('Expires: -1');
echo $MyFile;

function joinwavs($wavs){
    $fields = join('/',array( 'H8ChunkID', 'VChunkSize', 'H8Format',
                              'H8Subchunk1ID', 'VSubchunk1Size',
                              'vAudioFormat', 'vNumChannels', 'VSampleRate',
                              'VByteRate', 'vBlockAlign', 'vBitsPerSample' ));
    $data = '';
    foreach($wavs as $wav){
        $fp     = fopen($wav,'rb');
        $header = fread($fp,36);
        $info   = unpack($fields,$header);
        // read optional extra stuff
        if($info['Subchunk1Size'] > 16){
            $header .= fread($fp,($info['Subchunk1Size']-16));
        }
        // read SubChunk2ID
        $header .= fread($fp,4);
        // read Subchunk2Size
        $size  = unpack('vsize',fread($fp, 4));
        $size  = $size['size'];
        // read data
        $data .= fread($fp,$size);
    }
    return $header.pack('V',strlen($data)).$data;
}

now we have it all.

all you have to do now is to join all the codes i wrote in this article and the past tow articles and you got your self a fully functional captcha security code with spoken characters like what most of the sites these days

hope you like it

if you do like it and fined it worth it please add a link to my articles.

thanks

hi

yesterday we talked about how to generate the captcha image code and i wrote the function to do so.

now we will add the refresh button to the image so the user can change the code to a new one

i got this button from the internet to use it as a refresh button you can use it or you can create your own.

now we add this button to the left of the captcha image and we do a link on this image calling a JavaScript function that looks like this

<a class="small" href="#" onclick="reloadImage(0); return false;" title="Change the code">

<img height="22" border=0 alt="Refresh" src="images/captcha_refresh_icon.gif">
</a>

now we add the JavaScript function reloadImage(0) and it will be like this

<script type="text/javascript">
function reloadImage(times)
{
        var t = 2;
        if(times==0)
        {
                      document.getElementById("CapthaSrc").src="images/anim_search.gif";
                      setTimeout("reloadImage(1)", t*1000)
        }
        else
        {
                      src="img.php";
                      var newSrc = src + '?d=' + LBD_GetTimestamp();
                      //alert(newSrc);
                      document.getElementById("CapthaSrc").src=newSrc;
        }

}

function LBD_GetTimestamp() {
  var d = new Date();
  var t = d.getTime() + (d.getTimezoneOffset() * 60000);
  return t;
}

</script>

i added the LBD_GetTimestamp function to use it to change the parameters sent to img.php so the browser would get the new generated image not the cashed one and i used the anim.gif first time to give the user animation that the image is changing

now the image is changing every time the user clicks on the reload button

next we will talk about how to do the sound on captcha code so the users can hear the letters spoken to get it right

thanks

hi again

before a few days i was working on a website in the registration form thy asked to add the security code and thy wanted to have the visual code and the sound reading of the characters in the code.

so i started to add the captcha code to the form

everything worked fine i added the PHP code to generate the image you need the GD2 library and here is the function to call to generate the image

function ImageCodeCreat() {

  //first to generate a random word 5 char
  $code = strtoupper(substr(md5(uniqid(rand(), true)), 0, 5));

  //strip any spaces that may have crept in
  //end-user wouldn't know to type the space! :)
  $code = str_replace(" ", "", $code);

  //now save the random value in a session after change it to MD5
  $_SESSION['image_random_value'] = md5($code);

  //save the random value in a second session to play the sound
  $_SESSION['image_sound_value']=$code;

  $imwidth=105; //image width
  $imheight=28;  // image height
  Header("Content-type: image/Jpeg");

  //now lets creat the image
  $im = @ImageCreate ($imwidth, $imheight) or die ("ERROR! Cannot create new GD image");

  //now lets select the background color
  $background_color = ImageColorAllocate ($im, 255, 255, 255);

  //select the border color of the image
  $border_color = ImageColorAllocate ($im, 154, 154, 154);

  $x=0;

  $stringlength = strlen($code);
  for ($i = 0; $i< $stringlength; $i++) 
  {
    $text_color = ImageColorAllocate ($im, rand(50,200), rand(50,200), rand(50,200));
    $x = $x + (rand (10, 17));
    $y = rand (2, 10);
    $font = rand (6,7);
    $single_char = substr($code, $i, 1);
    imagechar($im, $font, $x, $y, $single_char, $text_color);
  }

  imagerectangle ($im, 2, 2, $imwidth-2, $imheight-2, $border_color);

  ImageJpeg($im, "", 17);
  ImageDestroy;

}

now this function created the image as we want with 2 sessions the first contains the code in md5 and the second contains the actual code as is to read it

all what we need to do now is to call this function from a file lets name it as img.php inside it will be like this

include_once("functions.php");
ImageCodeCreat();

we add an HTML img tag to our form and add an input text so the user can write the code that he see in the image

<img src="img.php" id="CapthaSrc"/>

save and upload we got the image captcha in the form all what we have to do if the user submit the for is to compare the session value with the what the user did write in the text box

…… next

i will write how to refresh the image and how to read the image in sound as many web sites do these days

thanks

Hello there

This is my first blog

I am a webmaster a programmer my name is Esam Hajouk

I started programming in 1997 or 96 started with the HTML and moved on with JavaScript and now i know many web Based languages HTML,JavaScript, Perl, PHP, ASP, ASP.NET, CSS plus the database MS-SQL and MySQL

I have 4 sites that i manage right now 2 sites was created in 1998 and the other tow was created in 2005 i think.

The first site was created by an idea from one of my old friends (Nasser) he helpped me to creat the site called A7LA in A7la.com its online now and you can brows the site here you can fined many links and categories in the site the mane category was the WEB DIRECTORY or LINKS DIRECTORY at the start now i containes more than 40,000 pages indexed at google and yahoo it have sections as Holy quraan, Dreams Meaning, Sites directory, and many many more its in arabic all and free all the information in there.

The second site is arabdev.com the site can help you to create and make your own new web site. It gives suggestions and tips that you will need while choosing a services to start your own web site up and it is in arabic and english

The thered site is aramedic.com its an online medical directory with powerful searching features to provide you with all necessary information about Hospitals, Ayurvedic Centers, Homeopathic Clinics, Diagnostic Centers, Rehabilitation Centers, Nursing Colleges, Medical Institutes, Pharmaceuticals, Blood Banks, Physiotherapists, Nurses etc

and now this is the fourth site and i hope you like all the info and articals that i will write in here

Salam - Peace

Esam Hajouk