How to Add the Password Strength Meter and Password Validation Features on Change Password Page in Websites that Generated With PHPMaker 8.0.3

After implementing the similar customization for Registration page, then we want to add the password strength meter and password confirmation validation by customizing the other page Change Password too. Unlike the customization in the generated Registration page, this time we will customize the related template file for Change Password page. We can customize its template easily, since the new password and the confirmation new password fields are the two fields that already exist in the template file, and not generated by PHPMaker application.

Please note that it is strongly recommended you have to implement the customization for the Registration page first, afterwards implement the customization for this Change Password page. The reason for this is since there is some customizations that will be applied to the template file; both for Registration and Change Password pages, especially the step number 2 and 3 for customization in the Registration page above. So, again, don't forget to implement the customization for the Registration page before doing the following customization.

Please click on the following image below to see the demo:

[hidepost]

1. Open your PHPMaker project (.pmp) file using PHPMaker application, and then click on Database icon on the toolbar, and click on your users (adjust the name with yours) table, and then go to the Server Events/Client Scripts tab. Expand the Client Scripts -> Other -> Change Password Page -> Client Script, and then insert the following code into the code editor in the right 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;
        
   }
   

2. Make sure you have implemented the step number 2 and 3 from this article.
3. Open your \Script\changepwd.php file, and find this code:

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

   then replace it with the following code:

                        <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>
   

4. Generate your changepwd.php, english.xml, and indonesian.xml (please adjust with yours according to the languages you are using) files using PHPMaker application. Make sure you do not skip this step, otherwise, you will never get the code in the first and second step above in your generated register.php file, also you will never get the updated language files.

[/hidepost]