Wednesday, December 11, 2013

Password Strength Check In Oracle APEX

Step 1: - Create a page and go to Header Text of the page and past the following ..

<style>
#passwordStrength
{
        height:10px;
        display:block;
        float:left;
}
.strength0
{
        width:190px;
        background:#cccccc;
}
.strength1
{
        width:45px;
        background:#ff0000;
}
.strength2
{
        width:90px;  
        background:#ff5f5f;
}
.strength3
{
        width:135px;
        background:#56e500;
}
.strength4
{
        background:#4dcd00;
        width:160px;
}
.strength5
{
        background:#399800;
        width:190px;
}
</style>

Step 2. Create an password item named (P2_PASSWORD)

Go to the HTML Form Element Attributes Of  P2_PASSWORD Item and past the following onkeyup="return passwordStrength();"

Go to the Pre Element Text Of  P2_PASSWORD Item and past the following

    <script language="javascript">
    function passwordStrength(){
    var pwd = document.getElementById('P2_PASSWORD');
    var password = document.getElementById("P2_PASSWORD").value;
    var desc = new Array();
            desc[0] = "Very Weak";
            desc[1] = "Weak";
            desc[2] = "Better";
            desc[3] = "Medium";
            desc[4] = "Strong";
            desc[5] = "Strongest";
            var score   = 0;
            if (password.length > 6) score++;
            if ( ( password.match(/[a-z]/) ) && ( password.match(/[A-Z]/) ) ) score++;
            if (password.match(/\d+/)) score++;
            if ( password.match(/.[!,@,#,$,%,^,&,*,?,_,~,-,(,)]/) ) score++;
            if (password.length > 12) score++;
            document.getElementById("passwordDescription").innerHTML = desc[score];
            if (password.length==0) {
                 document.getElementById("passwordDescription").innerHTML  = 'Password not entered';
           }

          document.getElementById("passwordStrength").className = "strength" + score;

    }
    </script>

Go to the Post Element Text Of  P2_PASSWORD Item and past the following 

    <div id="passwordDescription">Password not entered</div>

    <div id="passwordStrength" class="strength0">
    </div>

Now run your page and check



1 comment: