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

Unlike the similar customization I created in this article in order to show the password strength meter in the generated Registration page that created by PHPMaker version 8, then the following article will show you how to implement the customization to PHPMaker version 9 template file instead of customizing the generated Registration page.

I am so pleased that the following customization successfully fulfill my promise a while ago. As I mentioned or promised in that my previous article in the other day:

I hope someday I will update this article by customizing the template file even it will take the longer time. We only customize the template in order to add the related style code.

And now... that my promise in that article has been fulfilled by myself. Hopefully you will get the same advantage too from this customization, as you don't need to modify your generated register.php file anymore. Oh, how much I love PHPMaker from day to day.
There is always new thing that I can learn from its flexibility. How about you? 🙂

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]

Open your C:\Program Files\PHPMaker 9\languages\english.xml file, and find this 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"/>

If you don't find it, then insert that code before the following line:

</global>

And do the same way with your another .xml language file. For example, I am also using Indonesian, then I will add the similar phrase into my C:\Program Files\PHPMaker 9\languages\indonesian.xml file the following code:

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

Otherwise (if that code has already been there), just skip this step.

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:

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

If you don't find it, then insert that code after the following line:

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

otherwise, just skip this step.

Open your \Script\register.php file, and find this code (please note that you have to implement my customization in this article before doing this step, since there are some difference between the following code with the code in your original register.php template file; so please be kind!):

<?php if ($<!--##=gsFldObj##-->->Visible) { // <!--##=gsFldName##--> ?>
    <tr id="r_<!--##=gsFldParm##-->"<?php echo $<!--##=gsTblVar##-->->RowAttributes() ?>>
        <td<!--##=ewCSSTableHeaderClass##--> width="40%"><span id="<!--##=sHeaderSpanId##-->">&nbsp;&nbsp;&nbsp;<!--##=SYSTEMFUNCTIONS.FieldCaption()##--><!--##=sFldReqInd##--></span></td>
        <td>&nbsp;</td>
        <td<?php echo $<!--##=gsFldObj##-->->CellAttributes() ?> width="58%"><span id="<!--##=sSpanId##-->"><!--##=SYSTEMFUNCTIONS.FieldAdd()##--></span><?php echo $<!--##=gsFldObj##-->->CustomMsg ?></td>
    </tr>
<?php } ?>
<!--##
                        if (goFld.FldName == PROJ.SecPasswdFld) { // Generate Confirm Password Field
                            sTmpFldVar = goFld.FldVar; // Save Field Variable Name
                            gsFldVar = "c_" + gsFldParm; // New Variable as c_FldVar
                            goFld.FldVar = gsFldVar;
                            sHeaderSpanId = "e2h_" + gsTblVar + "_" + gsFldParm;
                            sSpanId = "e2_" + gsTblVar + "_" + gsFldParm;
                            rowcnt += 1;
##-->
<?php if ($<!--##=gsFldObj##-->->Visible) { // <!--##=gsFldName##--> ?>
    <tr id="rc_<!--##=gsFldParm##-->"<?php echo $<!--##=gsTblVar##-->->RowAttributes() ?>>
        <td<!--##=ewCSSTableHeaderClass##-->><span id="<!--##=sHeaderSpanId##-->">&nbsp;&nbsp;&nbsp;<!--##=SYSTEMFUNCTIONS.FieldCaption()##--><!--##=sFldReqInd##--></span></td>
        <td>&nbsp;</td>
        <td<?php echo $<!--##=gsFldObj##-->->CellAttributes() ?>><span id="<!--##=sSpanId##-->"><!--##=SYSTEMFUNCTIONS.FieldAdd()##--></span></td>
    </tr>
<?php } ?>

then replace it with the following code:

<?php // Begin of modification Password Strength Meter for Registration Page, by Masino Sinaga, June 9, 2012 ?>
<!--##
	if (goFld.FldName == PROJ.SecPasswdFld) {
 ##-->
 
<?php if ($<!--##=gsFldObj##-->->Visible) { // <!--##=gsFldName##--> ?>
    <tr id="r_<!--##=gsFldParm##-->"<?php echo $<!--##=gsTblVar##-->->RowAttributes() ?>>
        <td<!--##=ewCSSTableHeaderClass##--> width="40%"><span id="<!--##=sHeaderSpanId##-->">&nbsp;&nbsp;&nbsp;<!--##=SYSTEMFUNCTIONS.FieldCaption()##--><!--##=sFldReqInd##--></span></td>
        <td>&nbsp;</td>
        <td<?php echo $<!--##=gsFldObj##-->->CellAttributes() ?> width="58%">
		<?php if ($<!--##=gsTblVar##-->->CurrentAction <> "F") { ?>
           <span id="<!--##=sSpanId##-->">
             <input type="password" name="x_<!--##=gsFldParm##-->" id="x_<!--##=gsFldParm##-->" size="30" maxlength="30" <?php echo $<!--##=gsTblVar##-->-><!--##=gsFldParm##-->->EditAttributes() ?> onkeyup="passwordStrength(this.value, c_<!--##=gsFldParm##-->.value)">
               <div id="passwordDescription"><?php echo $Language->Phrase("empty"); ?></div>
                  <div class="password-meter-bg">
                    <div id="passwordStrength" class="strength0">
				  </div>
               </div>               
           </span><?php echo $<!--##=gsFldObj##-->->CustomMsg ?>
		<?php } else { ?>
                <div<?php echo $<!--##=gsFldObj##-->->ViewAttributes() ?>><?php echo $<!--##=gsFldObj##-->->ViewValue ?></div>
                <input type="hidden" name="x_<!--##=gsFldParm##-->" id="x_<!--##=gsFldParm##-->" value="<?php echo ew_HtmlEncode($<!--##=gsFldObj##-->->FormValue) ?>">		
		<?php } ?>
        </td>
    </tr>
<?php } ?>

<!--##
	} else {
 ##-->

     <tr id="r_<!--##=gsFldParm##-->"<?php echo $<!--##=gsTblVar##-->->RowAttributes() ?>>
        <td<!--##=ewCSSTableHeaderClass##--> width="40%"><span id="<!--##=sHeaderSpanId##-->">&nbsp;&nbsp;&nbsp;<!--##=SYSTEMFUNCTIONS.FieldCaption()##--><!--##=sFldReqInd##--></span></td>
        <td>&nbsp;</td>
        <td<?php echo $<!--##=gsFldObj##-->->CellAttributes() ?>><span id="<!--##=sSpanId##-->"><!--##=SYSTEMFUNCTIONS.FieldAdd()##--></span></td>
     </tr>
	
<!--##
	} 
 ##-->
 
<!--##
                        if (goFld.FldName == PROJ.SecPasswdFld) { // Generate Confirm Password Field
                            sTmpFldVar = goFld.FldVar; // Save Field Variable Name
                            gsFldVar = "c_" + gsFldParm; // New Variable as c_FldVar
                            goFld.FldVar = gsFldVar;
                            sHeaderSpanId = "e2h_" + gsTblVar + "_" + gsFldParm;
                            sSpanId = "e2_" + gsTblVar + "_" + gsFldParm;
                            rowcnt += 1;
##-->
<?php if ($<!--##=gsFldObj##-->->Visible) { // <!--##=gsFldName##--> ?>
    <tr id="rc_<!--##=gsFldParm##-->"<?php echo $<!--##=gsTblVar##-->->RowAttributes() ?>>
        <td<!--##=ewCSSTableHeaderClass##-->><span id="<!--##=sHeaderSpanId##-->">&nbsp;&nbsp;&nbsp;<!--##=SYSTEMFUNCTIONS.FieldCaption()##--><!--##=sFldReqInd##--></span></td>
        <td>&nbsp;</td>
        <td<?php echo $<!--##=gsFldObj##-->->CellAttributes() ?> width="58%">
		<?php if ($<!--##=gsTblVar##-->->CurrentAction <> "F") { ?>
          <span id="<!--##=sSpanId##-->">
             <input type="password" name="c_<!--##=gsFldParm##-->" id="c_<!--##=gsFldParm##-->" size="30" maxlength="30"<?php echo $<!--##=gsTblVar##-->-><!--##=gsFldParm##-->->EditAttributes() ?> onkeyup="passwordConfirmation(x_<!--##=gsFldParm##-->.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><?php echo $<!--##=gsFldObj##-->->CustomMsg ?>
		<?php } else { ?>
                <div<?php echo $<!--##=gsFldObj##-->->ViewAttributes() ?>><?php echo $<!--##=gsFldObj##-->->ViewValue ?></div>
                <input type="hidden" name="c_<!--##=gsFldParm##-->" id="c_<!--##=gsFldParm##-->" value="<?php echo ew_HtmlEncode($<!--##=gsFldObj##-->->FormValue) ?>">
		<?php } ?>
        </td>		
    </tr>
<?php } ?>
<?php // End of modification Password Strength Meter for Registration Page, by Masino Sinaga, June 9, 2012 ?>

Open your PHPMaker project (.pmp) file using PHPMaker application, and then click on Database icon on the toolbar, and click on your users (adjust with yours) table, and then go to the Code (Server Events, Client Scripts and Custom Templates) tab. Expand the Client Scripts -> Other -> Registration 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;
     
}

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

[/hidepost]

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

Demo Website

Another Demo

Demo Explanation

Categories

Articles based on version

Leave a Reply Cancel reply

Demo Website

Another Demo

Demo Explanation

Categories

Articles based on version