How to Show Password Strength Meter and Password Verification Features on Change Password Page in Websites that Generated by PHPMaker 9.0.2

Up to PHPMaker version 9.0.2, there is no password strength meter in the generated Change Password page. Now I will show you how to add and displaying the Password Strength Meter and Password Verification features on the Change Password page of websites that generated by PHPMaker 9.0.2. We will customize PHPMaker template files and also adding some functions into the Client Scripts section of PHPMaker. In other words, we will not modify any generated files, so you are able to re-use this template and also the client scripts for your future projects.

This feature is very useful for your users in order to encourage them to enter the strong password as possible while changing their password for security reason. In addition they will feel comfortable while entering their password, this will also make your web applications look more professional and more beautiful for your users. Actually, it's a simple modification though, yet so powerful for your web applications.

Please note that you are strongly recommended to implement this customization before doing the customization below, since there are some replacements that you will not find if you have not implemented the customization in that article.

Updated on July 22, 2012: This customization has been implemented in PHPMaker version 9.0.3, it matches to each other, and as a result, it works properly.

Updated on September 5, 2012: This customization has been implemented in PHPMaker version 9.0.4, it matches to each other, and as a result, it works properly.

Updated on November 29, 2012: This customization has been implemented in PHPMaker version 9.1.0, it matches to each other, and as a result, it works properly.

Updated on February 10, 2013: This customization has been implemented in PHPMaker version 9.2.0, it matches to each other, and as a result, it works properly.

[hidepost]

1. Open your C:\Program Files\PHPMaker 9\languages\english.xml file, and find this code:

   </global>
   

   before that line, please insert the following code:

   	<phrase id="mismatch" value="Mismatch"/>
   	<phrase id="match" value="Match"/>
   	<phrase id="empty" value="Empty"/>
   	<phrase id="veryweak" value="Very weak"/>
   	<phrase id="weak" value="Weak"/>
   	<phrase id="better" value="Better"/>
   	<phrase id="good" value="Good"/>
   	<phrase id="strong" value="Strong"/>
   	<phrase id="strongest" value="Strongest"/>
   

   Do the same way with your another .xml language file (if any). For example, I am also using Indonesian, then I will add the similar code into my C:\Program Files\PHPMaker 9\languages\indonesian.xml file:

   	<phrase id="mismatch" value="Tidak cocok"/>
   	<phrase id="match" value="Cocok"/>
   	<phrase id="empty" value="Kosong"/>
   	<phrase id="veryweak" value="Sangat lemah"/>
   	<phrase id="weak" value="Lemah"/>
   	<phrase id="better" value="Lumayan"/>
   	<phrase id="good" value="Bagus"/>
   	<phrase id="strong" value="Kuat"/>
   	<phrase id="strongest" value="Sangat kuat"/>
   

2. The next step, we will add the related style for the graph meter by customizing the template file. Please note that the customization in this step will be used for the Change Password and Registration pages. Now open your \Script\phpcommon-scripts.php file and find this code:

   <!--##session phpunload##-->
   

   after that line, please insert the following code:

   <?php // Begin of modification Password Strength Meter, by Masino Sinaga, June 9, 2012 ?>
   <!--## if (CTRL.CtrlID.toLowerCase() == "register" || CTRL.CtrlID.toLowerCase() == "changepwd") { ##-->
   <style>
   .password-meter {
       position:relative;
       width: 180px;
   }
   .password-meter-message {
       text-align: right;
       font-weight: bold;
       color: #676767;
   }
   .password-meter-bg, .password-meter-bar {
       height: 5px;
       width: 100px;
   }
   .password-meter-bg {
       top: 8px;
       background: #cccccc;
   }
   
   #passconfConfirmation
   {
       height:5px;
       display:block;
       float:left;
   }
   .conf0
   {
       width:50px;
       background:#ff0000;
   }
   
   .conf1
   {
       background:#256800;
      width:100px;
   }
   
   #passwordStrength
   {
       height:5px;
       display:block;
       float:left;
   }
   
   .strength0
   {
       background:#cccccc;
      width:100px;
   }
   
   .strength1
   {
       background:#ff0000;
      width:20px;
   }
   
   .strength2
   {
       background:#ff5f5f;
      width:40px;
   }
   
   .strength3
   {
       background:#56e500;
      width:60px;
   }
   
   .strength4
   {
       background:#4dcd00;
      width:80px;
   }
   
   .strength5
   {
       background:#399800;
      width:90px;
   }
   
   .strength6
   {
       background:#256800;
      width:100px;
   }
   
   </style>
   <!--## } ##-->
   <?php // End of modification Password Strength Meter, by Masino Sinaga, June 9, 2012 ?>
   

3. Open your \Script\changepwd.php file, and find this code (please adjust with yours if the following code is not identically between one and the other, for example, you may will find that some TD or TR tag for HTML table are different between the following code and yours):

                        <tr>
                           <td>&nbsp;&nbsp;&nbsp;&nbsp;<span class="phpmaker"><!--##@NewPassword##--></span></td>
                           <td><span class="phpmaker"><input type="password" name="npwd" id="npwd" size="30" /></span></td>
                        </tr>
                        <tr>
               <td >&nbsp;</td>
               <td >&nbsp;</td>
              <tr/>                    
                        <tr>
                           <td>&nbsp;&nbsp;&nbsp;&nbsp;<span class="phpmaker"><!--##@ConfirmPassword##--></span></td>
                           <td><span class="phpmaker"><input type="password" name="cpwd" id="cpwd" size="30" /></span></td>
                        </tr>
   

   then replace it with the following code (adjust also with yours above):

   <?php // Begin of modification Password Strength Meter, by Masino Sinaga, June 9, 2012 ?>		   
                        <tr>
                           <td>&nbsp;&nbsp;&nbsp;&nbsp;<span class="phpmaker"><!--##@NewPassword##--></span></td>
                           <td><span class="phpmaker"><input type="password" name="npwd" id="npwd" size="30" onkeyup="passwordStrength(this.value, cpwd.value)" />
                               <div id="passwordDescription"><?php echo $Language->Phrase("empty"); ?></div>
       <div class="password-meter-bg">
         <div id="passwordStrength" class="strength0"></div>
       </div>
                           </span></td>
                        </tr>
                        <tr>
               <td >&nbsp;</td>
               <td >&nbsp;</td>
              <tr/>                    
                        <tr>
                           <td>&nbsp;&nbsp;&nbsp;&nbsp;<span class="phpmaker"><!--##@ConfirmPassword##--></span></td>
                           <td><span class="phpmaker"><input type="password" name="cpwd" id="cpwd" size="30" onkeyup="passwordConfirmation(npwd.value, this.value)"/>
                               <div id="passconfDescription"><?php echo $Language->Phrase("match"); ?></div>
       <div class="password-meter-bg">        
         <div id="passconfConfirmation" class="conf1"></div>
       </div>
                           </span></td>
                        </tr>
   <?php // End of modification Password Strength Meter, by Masino Sinaga, June 9, 2012 ?>
   

4. Open your PHPMaker project (.pmp) file using PHPMaker application, and then click on Database menu icon on the toolbar, and click on your users (adjust the name with yours) table, and then go to the Code (Server Events, Client Scripts and Custom Templates) tab. Expand the Client Scripts -> Other -> Change Password Page -> Client Script, and then insert the following code into the code editor in the right pane/side:

   function passwordConfirmation(pass1, pass2)
   {
       var desc = new Array();
       desc[0] = "<?php echo $Language->Phrase("mismatch"); ?>";
       desc[1] = "<?php echo $Language->Phrase("match"); ?>";
      
       // var score = 0;
      
       if (pass1 != pass2) {
         score = 0;  
       } else {
         score = 1;
       }
        document.getElementById("passconfDescription").innerHTML = desc[score];
        document.getElementById("passconfConfirmation").className = "conf" + score;
   
   }
   
   function passwordStrength(password, password2)
   {
       var desc = new Array();
       desc[0] = "<?php echo $Language->Phrase("empty"); ?>";
       desc[1] = "<?php echo $Language->Phrase("veryweak"); ?>";
       desc[2] = "<?php echo $Language->Phrase("weak"); ?>";
       desc[3] = "<?php echo $Language->Phrase("better"); ?>";
       desc[4] = "<?php echo $Language->Phrase("good"); ?>";
       desc[5] = "<?php echo $Language->Phrase("strong"); ?>";
       desc[6] = "<?php echo $Language->Phrase("strongest"); ?>";
      
       var descc = new Array();
       descc[0] = "<?php echo $Language->Phrase("mismatch"); ?>";
       descc[1] = "<?php echo $Language->Phrase("match"); ?>";
      
       var score = 1;
      
       //if password is empty, reset the score
       if (password.length == 0) score=0;
   
       //if password bigger than 6 give 1 point
       if (password.length > 6) score++;
   
       //if password has both lower and uppercase characters give 1 point
       if ( ( password.match(/[a-z]/) ) && ( password.match(/[A-Z]/) ) ) score++;
   
       //if password has at least one number give 1 point
       if (password.match(/\d+/)) score++;
   
       //if password has at least one special caracther give 1 point
       if ( password.match(/.[!,@,#,$,%,^,&,*,?,_,~,-,(,)]/) ) score++;
   
       //if password bigger than 12 give another 1 point
       if (password.length > 12) score++;
   
        document.getElementById("passwordDescription").innerHTML = desc[score];
        document.getElementById("passwordStrength").className = "strength" + score;
        
       var scorec = 0;
      
       if (password != password2) {
         scorec = 0;  
       } else {
         scorec = 1;
       }
        document.getElementById("passconfDescription").innerHTML = descc[scorec];
        document.getElementById("passconfConfirmation").className = "conf" + scorec;
        
   }
   

5. Finally, re-generate your changepwd.php, english.xml, and indonesian.xml (adjust with yours according to the other languages you are using) files using PHPMaker application as always.

[/hidepost]