Current File : //etc/zpanel/panel/modules/password_assistant/module.zpm

<style>
#register .short{
font-weight:bold;
color:#FF0000;
font-size:larger;
}
#register .weak{
font-weight:bold;
color:orange;
font-size:larger;
}
#register .good{
font-weight:bold;
color:#2D98F3;
font-size:larger;
}
#register .strong{
font-weight:bold;
color: limegreen;
font-size:larger;
}

</style>
<style>
.helpicon {
display: block;
float: right;
border: 1px solid #ccc;
background-color: #f3f3f3;
padding: 5px 10px;
font-size: 12px;
margin-top:-80px;
margin-right:6px;    
-webkit-box-shadow: -8px 7px 5px 0px rgba(204,204,204,1);
-moz-box-shadow: -8px 7px 5px 0px rgba(204,204,204,1);    
box-shadow: -8px 7px 5px 0px rgba(204,204,204,1);    
-webkit-box-shadow: 8px 7px 5px 0px rgba(204,204,204,1);
-moz-box-shadow: 8px 7px 5px 0px rgba(204,204,204,1);
box-shadow: 8px 7px 5px 0px rgba(204,204,204,1);
}
</style>



<div class="zmodule_content panel" id="zmodule_header_<@ ModuleName @>">
    <div class="panel-heading">
        <img src="<@ ModuleIcon @>" width="35" height="35" border="0" alt="<@ ModuleName @>">

        <div class="zmodule_title">
            <@ ModuleName @>
        </div>

        <div class="zmodule_desc" id="zmodule_desc_<@ ModuleName @>"><@ ModuleDesc @></div>

    </div>
<div class="helpicon">
<a href="<@ helpicon @>" target="_blank"><img src="etc/styles/CstyleX-master/images/help.png" style="float:left;" ><span style="float:left;margin-top:8px;font-weight:bold;font-size:12px;" >Video Tutorial</span></a>
</div>
    <@ Result @>

    <div class="zform_wrapper">
        <h2><: Enter your current and new password :></h2>
        <form action="./?module=password_assistant&action=UpdatePassword" method="post" id="register">
            <table class="table table-striped">
                <tr>
                    <th><: Current password :>:</th>
                    <td><input name="inCurPass" type="password" id="inCurPass" /></td>
                </tr>
                <tr>
                    <th><: New password :>:</th>
                    <td><input name="inNewPass" type="password" id="<@ CurrentPassID @>" /></td>
		    <td><span id="<@ CurrentID @>"></span></td>
                </tr>
                <tr>
                    <th><: Confirm new password :>:</th>
                    <td><input name="inConPass" type="password" id="inConPass" /></td>
                </tr>
                <tr>
                    <td>&nbsp;</td>
                    <td align="right"><@ CSFR_Tag @><button class="button-loader btn btn-primary" type="submit" id="button"><: Change :></button></td>
                </tr>
            </table>
        </form>
        
                         <% if currentnote %>
                    <p><b>Note : </b>Characters needed for password length : 9 with atleast 1 uppercase,lowercase,special character,number.</p>
                   <% endif %>
    </div>

</div>


<script>
/*
	jQuery document ready.
*/
$(document).ready(function()
{
	/*
		assigning keyup event to password field
		so everytime user type code will execute
	*/

        if($('#inNewPass').val().length ==0){

               $('#button').attr('disabled', 'disabled');
        	}
	$('#inNewPass').keyup(function()
	{
            
              $('#result').html(checkStrength($('#inNewPass').val()))
		

	})	
		
        
	/*
		checkStrength is function which will do the 
		main password strength checking for us
	*/
	
	function checkStrength(password)
	{
		//initial strength
		var strength = 0
		
		//if the password length is less than 6, return message.
		if (password.length < 6) { 
			$('#result').removeClass();
			$('#result').addClass('short');
			$('#button').attr('disabled','disabled');
			return 'Too short'; 
		}
		
		//length is ok, lets continue.
		
		//if length is 8 characters or more, increase strength value
		//if (password.length > 7) strength += 1
		
		//if password contains both lower and uppercase characters, increase strength value
		//if (password.match(/([a-z].*[A-Z])|([A-Z].*[a-z])/))  strength += 1
		
		//if it has numbers and characters, increase strength value
		//if (password.match(/([a-zA-Z])/) && password.match(/([0-9])/))  strength += 1 
		
		//if it has one special character, increase strength value
		//if (password.match(/([!,%,&,@,#,$,^,*,?,_,~])/))  strength += 1
		
		//if it has two special characters, increase strength value
		//if (password.match(/(.*[!,%,&,@,#,$,^,*,?,_,~].*[!,%,&,@,#,$,^,*,?,_,~])/)) strength += 1
                
                if(password.match(/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[#$@!%&*?])[A-Za-z\d#$@!%&*?]{9,}$/))
                strength = 9		
		//now we have calculated strength value, we can return messages
		
		//if value is less than 2
		if (strength <2 )
		{
			$('#result').removeClass();
			$('#result').addClass('weak');
			$('#button').attr('disabled','disabled');			
                        return 'Weak'			
		}
		else if (strength >= 9 )
		{
			$('#result').removeClass();
			$('#result').addClass('strong');
                        // $("#pwdstr").show();	
                        $('#button').removeAttr('disabled');	
			return 'Strong'		
		}
		else
		{
			$('#result').removeClass();
			$('#result').addClass('strong');
                        // $("#pwdstr").show();
                        $('#button').removeAttr('disabled');	
			return 'Strong'
		}
	}
});
</script>