Oh no! Where's the JavaScript?
Your Web browser does not have JavaScript enabled or does not support JavaScript. Please enable JavaScript on your Web browser to properly view this Web site, or upgrade to a Web browser that does support JavaScript.
Not a member yet? Click here to register.
Forgot Password?

GUIDE:: Password Strenght Meter For Register

Asked Modified Viewed 4,384 times
C
Craig
C
Craig 14
  • Fusioneer, joined since
  • Contributed 4,462 posts on the community forums.
  • Started 212 threads in the forums
  • Started this discussions
asked
Fusioneer

Password Strength Meter For Register

www.fangree.co.uk/images/pwstrength_meter_preview.png

In this guide I will show you how to implement a nice jQuery and CSS Password Strength meter for the Register page (register.php).

The file we will edit is register.php

BACKUP register.php



1. First off we will add the CSS for the Password Strength Meter. We will use the add_to_head function for this.

register.php at around line 180 look for...

opentable($locale['400']);


After that paste the CSS...


   // Password Strenght Meter Css
add_to_head("<style type='text/css'>
        .password { font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 10px;
   color: #555;
   background-color: #f6f6f6;
   border: 1px solid #ccc;
   }
   
   .password:hover { font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
    color: #555;
   background-color: #FFE3FE;
   border: 1px solid #ccc;
   }
   
      .pstrength-minchar {
       font-size : 10px;
       }
</style>");
//




2. Next we will add the jQuery stuff.

Look at around lines 237 to 241

echo "<form name='inputform' method='post' action='".FUSION_SELF."' onsubmit='return ValidateForm(this)'>\n";
   echo "<table cellpadding='0' cellspacing='0' class='center'>\n<tr>\n";
   echo "<td class='tbl'>".$locale['u001']."<span style='color:#ff0000'>*</span></td>\n";
   echo "<td class='tbl'><input type='text' name='username' maxlength='30' class='textbox' style='width:200px;' /></td>\n";
   echo "</tr>\n<tr>\n";


After that paste...

//Password Strength Meter Script
   echo"<script type='text/javascript' src='".INCLUDES."jquery.pstrength-min.1.2.js'></script>
    <script type='text/javascript'>
    $(function() {
    $('.password').pstrength();
    });
    </script>";
   ///





3. Now we will Insert class="password" into the password input box tag to identify the password box.

At or around line 241 look for...

echo "<td class='tbl'><input type='password' name='password1' maxlength='20' class='textbox' style='width:200px;' /></td>\n";


Change it to...

echo "<td class='tbl'><input type='password' name='password1' maxlength='20' class='password' style='width:200px;' /></td>\n";


OK that is register complete, Save it.



4. Now all we need to do is upload jquery.pstrength-min.1.2.js to root/includes/

Copy this and save it as jquery.pstrength-min.1.2.js

(function(A){A.extend(A.fn,{pstrength:function(B){var B=A.extend({verdects:["Very weak","Weak","Medium","Strong","Very strong"],colors:["#f00","#c06","#f60","#3c0","#3f0"],scores:[10,15,30,40],common:["password","sex","god","123456","123","liverpool","letmein","qwerty","monkey"],minchar:6},B);return this.each(function(){var C=A(this).attr("id");A(this).after("<div class=\"pstrength-minchar\" id=\""+C+"_minchar\">Minimum number of characters is "+B.minchar+"</div>");A(this).after("<div class=\"pstrength-info\" id=\""+C+"_text\"></div>");A(this).after("<div class=\"pstrength-bar\" id=\""+C+"_bar\" style=\"border: 1px solid white; font-size: 1px; height: 5px; width: 0px;\"></div>");A(this).keyup(function(){A.fn.runPassword(A(this).val(),C,B)})})},runPassword:function(D,F,C){nPerc=A.fn.checkPassword(D,C);var B="#"+F+"_bar";var E="#"+F+"_text";if(nPerc==-200){strColor="#f00";strText="Unsafe password word!";A(B).css({width:"0%"})}else{if(nPerc<0&&nPerc>-199){strColor="#ccc";strText="Too short";A(B).css({width:"5%"})}else{if(nPerc<=C.scores[0]){strColor=C.colors[0];strText=C.verdects[0];A(B).css({width:"10%"})}else{if(nPerc>C.scores[0]&&nPerc<=C.scores[1]){strColor=C.colors[1];strText=C.verdects[1];A(B).css({width:"25%"})}else{if(nPerc>C.scores[1]&&nPerc<=C.scores[2]){strColor=C.colors[2];strText=C.verdects[2];A(B).css({width:"50%"})}else{if(nPerc>C.scores[2]&&nPerc<=C.scores[3]){strColor=C.colors[3];strText=C.verdects[3];A(B).css({width:"75%"})}else{strColor=C.colors[4];strText=C.verdects[4];A(B).css({width:"92%"})}}}}}}A(B).css({backgroundColor:strColor});A(E).html("<span style='color: "+strColor+";'>"+strText+"</span>")},checkPassword:function(C,B){var F=0;var E=B.verdects[0];if(C.length<B.minchar){F=(F-100)}else{if(C.length>=B.minchar&&C.length<=(B.minchar+2)){F=(F+6)}else{if(C.length>=(B.minchar+3)&&C.length<=(B.minchar+4)){F=(F+12)}else{if(C.length>=(B.minchar+5)){F=(F+18)}}}}if(C.match(/[a-z]/)){F=(F+1)}if(C.match(/[A-Z]/)){F=(F+5)}if(C.match(/\d+/)){F=(F+5)}if(C.match(/(.*[0-9].*[0-9].*[0-9])/)){F=(F+7)}if(C.match(/.[!,@,#,$,%,^,&,*,?,_,~]/)){F=(F+5)}if(C.match(/(.*[!,@,#,$,%,^,&,*,?,_,~].*[!,@,#,$,%,^,&,*,?,_,~])/)){F=(F+7)}if(C.match(/([a-z].*[A-Z])|([A-Z].*[a-z])/)){F=(F+2)}if(C.match(/([a-zA-Z])/)&&C.match(/([0-9])/)){F=(F+3)}if(C.match(/([a-zA-Z0-9].*[!,@,#,$,%,^,&,*,?,_,~])|([!,@,#,$,%,^,&,*,?,_,~].*[a-zA-Z0-9])/)){F=(F+3)}for(var D=0;D<B.common.length;D++){if(C.toLowerCase()==B.common[D]){F=-200}}return F}})})(jQuery)




5. Upload and overwrite register.php and upload jquery.pstrength-min.1.2.js to root/includes/

Password Strength Meter For Register is now implemented.

Test it on your register page.
Edited by Craig on 22-01-2011 18:56,
0 replies

9 posts

H
Homdax
H
Homdax 10
  • Fusioneer, joined since
  • Contributed 2,246 posts on the community forums.
  • Started 108 threads in the forums
answered
Fusioneer

Is this properly localized? I see words in the jquery that should perhaps be a locale definitions instead? If possible?
0 replies
J
Jack Daniels
J
  • Member, joined since
  • Contributed 77 posts on the community forums.
  • Started 9 threads in the forums
answered
Member

Think you have to learn to count my friend cause this is the lines 237 to 241

Quote

$result2 = dbquery(
"SELECT * FROM ".DB_USER_FIELDS." tuf
INNER JOIN ".DB_USER_FIELD_CATS." tufc ON tuf.field_cat = tufc.field_cat_id
ORDER BY field_cat_order, field_order"
);
after the first changes.

Last line change is in line 221 after all the other changes and if you start in line 180 and set the code in after that line you have to count down 20 lines for the next code and change the value in line 221 at the end and its the second line under the new code.

Hope you can understand this **** I'm writing. :D
Edited by Jack Daniels on 22-01-2011 10:55,
0 replies
H
Homdax
H
Homdax 10
  • Fusioneer, joined since
  • Contributed 2,246 posts on the community forums.
  • Started 108 threads in the forums
answered
Fusioneer

Line numbering may sometimes depend on what editor one uses.
0 replies
J
Jack Daniels
J
  • Member, joined since
  • Contributed 77 posts on the community forums.
  • Started 9 threads in the forums
answered
Member

Quote

Homdax wrote:
Line numbering may sometimes depend on what editor one uses.


If you put in some code, the linecount changes.

For example you are in line 180 and put in code which is 20 lines, all the lines behinde gets a new linenumber.
0 replies
H
Homdax
H
Homdax 10
  • Fusioneer, joined since
  • Contributed 2,246 posts on the community forums.
  • Started 108 threads in the forums
answered
Fusioneer

Well, again it depends. The editor may be set at UTF or MSDOS or UNIX and stuff like that. However, you seem to be correct since in an unedited register.php (7.01.2) I find
[syntaxhighlighter brush=php,first-line=1,highlight=0,collapse=false,html-script=false]echo "<form name='inputform' method='post' action='".FUSION_SELF."' onsubmit='return ValidateForm(this)'>\n";
echo "<table cellpadding='0' cellspacing='0' class='center'>\n<tr>\n";
echo "<td class='tbl'>".$locale['u001']."<span style='color:#ff0000'>*</span></td>\n";
echo "<td class='tbl'><input type='text' name='username' maxlength='30' class='textbox' style='width:200px;' /></td>\n";
echo "</tr>\n<tr>\n";[/syntaxhighlighter] from line 186.

And even after pasting, below 180,
[syntaxhighlighter brush=php,first-line=1,highlight=0,collapse=false,html-script=false]// Password Strenght Meter Css
add_to_head("<style type='text/css'>
.password { font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #555;
background-color: #f6f6f6;
border: 1px solid #ccc;
}

.password:hover { font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #555;
background-color: #FFE3FE;
border: 1px solid #ccc;
}

.pstrength-minchar {
font-size : 10px;
}
</style>"wink;
//[/syntaxhighlighter]
that is still not on the line 237 but rather 207.

I am using Programmers Notepad with defult settings.
Edited by Homdax on 22-01-2011 11:54,
0 replies
J
Jack Daniels
J
  • Member, joined since
  • Contributed 77 posts on the community forums.
  • Started 9 threads in the forums
answered
Member

Ok, in my editor, winSCP, I have to count down the lines after I put in some code.
Like you said, there is a diffrend in the editors.
0 replies
C
Craig
C
Craig 14
  • Fusioneer, joined since
  • Contributed 4,462 posts on the community forums.
  • Started 212 threads in the forums
  • Started this discussions
answered
Fusioneer

I use notepad ++ so if lines are different for you then it might be due to you using a different editor.

Anyway if line numbers are not correct for you then there is no issue anyway because I pasted what code to look for so really it's not a big deal and really there is no need for 6 posts to discuss it. lol
0 replies
H
Homdax
H
Homdax 10
  • Fusioneer, joined since
  • Contributed 2,246 posts on the community forums.
  • Started 108 threads in the forums
answered
Fusioneer

Thats fine...just goes to show the importance of giving code examples to look for.
0 replies
C
Craig
C
Craig 14
  • Fusioneer, joined since
  • Contributed 4,462 posts on the community forums.
  • Started 212 threads in the forums
  • Started this discussions
answered
Fusioneer

To help you guy's even more I have changed the wording in my post #1 to say "at around line....". Hope it helps!
0 replies

Labels

None yet

Statistics

  • Views 0 views
  • Posts 9 posts
  • Votes 0 votes
  • Topic users 3 members

3 participants

H
H
Homdax 10
  • Fusioneer, joined since
  • Contributed 2,246 posts on the community forums.
  • Started 108 threads in the forums
C
C
Craig 14
  • Fusioneer, joined since
  • Contributed 4,462 posts on the community forums.
  • Started 212 threads in the forums
  • Started this discussions
J
J
  • Member, joined since
  • Contributed 77 posts on the community forums.
  • Started 9 threads in the forums

Notifications

Track thread

You are not receiving notifications from this thread.

Related Questions

Not yet