?
Solved

Install Password Strength Meter on New Page

Posted on 2009-07-09
12
Medium Priority
?
1,619 Views
Last Modified: 2012-05-07
I am trying to set up a page on my WordPress site so that a user can change their name, email address and password instead of them accessing their profile in the Dashboard.  I would like to install the password strength meter used on the Profile page.  I have tried copying over the following code from the wp-admin/user-edit.php file, but I don't know enough about WordPress' actions, api's and wp_enqueue_script's to know where I would need to make changes in order for it to work.

Can anyone give me a clue as to what to do?
/**
 * Display JavaScript for profile page.
 *
 * @since 2.5.0
 */
function profile_js ( ) {
?>
<script type="text/javascript">
(function($){
 
	function check_pass_strength () {
 
		var pass = $('#pass1').val();
		var user = $('#user_login').val();
 
		$('#pass-strength-result').removeClass('short bad good strong');
		if ( ! pass ) {
			$('#pass-strength-result').html( pwsL10n.empty );
			return;
		}
 
		var strength = passwordStrength(pass, user);
 
		if ( 2 == strength )
			$('#pass-strength-result').addClass('bad').html( pwsL10n.bad );
		else if ( 3 == strength )
			$('#pass-strength-result').addClass('good').html( pwsL10n.good );
		else if ( 4 == strength )
			$('#pass-strength-result').addClass('strong').html( pwsL10n.strong );
		else
			// this catches 'Too short' and the off chance anything else comes along
			$('#pass-strength-result').addClass('short').html( pwsL10n.short );
 
	}
 
	function update_nickname () {
 
		var nickname = $('#nickname').val();
		var display_nickname = $('#display_nickname').val();
 
		if ( nickname == '' ) {
			$('#display_nickname').remove();
		}
		$('#display_nickname').val(nickname).html(nickname);
 
	}
 
	$(document).ready( function() {
		$('#nickname').blur(update_nickname);
		$('#pass1').val('').keyup( check_pass_strength );
		$('.color-palette').click(function(){$(this).siblings('input[name=admin_color]').attr('checked', 'checked')});
    });
})(jQuery);
</script>
<?php
}
 
if ( $is_profile_page ) {
	add_action('admin_head', 'profile_js');
	wp_enqueue_script('jquery');
	wp_enqueue_script('password-strength-meter');
}

Open in new window

0
Comment
Question by:OmniUnlimited
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 6
  • 5
12 Comments
 
LVL 31

Expert Comment

by:gwkg
ID: 24825787
wp_enqueue_script is a new way for you to only include scripts that are needed, when they are needed.

I think the problem is that you are checking IF it is a profile page, then include the scripts (if they are not included already)  Since the page you are using is not a profile page, no scripts.

Try removing that check and just call the enqueue functions

so instead of

if ( $is_profile_page ) {
        add_action('admin_head', 'profile_js');
        wp_enqueue_script('jquery');
        wp_enqueue_script('password-strength-meter');
}

just use

        wp_enqueue_script('jquery');
        wp_enqueue_script('password-strength-meter');

0
 
LVL 17

Author Comment

by:OmniUnlimited
ID: 24826151
Thank you, qwkq, for being my first response!  I was beginning to think I was not going to get any help on this issue.  You are right, in looking over the code I saw several elements that I thought were not necessary for the new page (among them the need to check on the nickname), so I went ahead and modified the code according to what I believe is needed.  Unfortunately, it still does not work.  Attached is the code as I have modified, incorporating into it the changes you suggested.
/**
 * Display JavaScript for profile page.
 *
 * @since 2.5.0
 */
function profile_js ( ) {
?>
<script type="text/javascript">
 
(function($){
 
	function check_pass_strength () {
 
		var pass = $('#pass1').val();
		var user = $('#user_login').val();
 
		$('#pass-strength-result').removeClass('short bad good strong');
		if ( ! pass ) {
			$('#pass-strength-result').html( pwsL10n.empty );
			return;
		}
 
		var strength = passwordStrength(pass, user);
 
		if ( 2 == strength )
			$('#pass-strength-result').addClass('bad').html( pwsL10n.bad );
		else if ( 3 == strength )
			$('#pass-strength-result').addClass('good').html( pwsL10n.good );
		else if ( 4 == strength )
			$('#pass-strength-result').addClass('strong').html( pwsL10n.strong );
		else
			// this catches 'Too short' and the off chance anything else comes along
			$('#pass-strength-result').addClass('short').html( pwsL10n.short );
 
	}
 
	$(document).ready( function() {
		$('#pass1').val('').keyup( check_pass_strength );
    });
})(jQuery);
</script>
 
<?php
}
wp_enqueue_script('jquery');
wp_enqueue_script('password-strength-meter');

Open in new window

0
 
LVL 31

Expert Comment

by:gwkg
ID: 24826680
Sorry, try getting rid of the opening

function profile_js ( ) {
?>

and the ending

<?php
}

Now that you removed add_action('admin_head', 'profile_js'); there is nothing calling the profile_js function, so none of the code inside of that function is being executed.
0
Get real performance insights from real users

Key features:
- Total Pages Views and Load times
- Top Pages Viewed and Load Times
- Real Time Site Page Build Performance
- Users’ Browser and Platform Performance
- Geographic User Breakdown
- And more

 
LVL 17

Author Comment

by:OmniUnlimited
ID: 24826756
Sorry, it wouldn't run without the ending and starting php encoding (<?, <?php).  I tried it just eliminating the function declaration and end brace, but it still does not work.
0
 
LVL 31

Expert Comment

by:gwkg
ID: 24827053
Your best bet is probably to just find a separate password strength meter and incorporating into your page.

http://www.webresourcesdepot.com/10-password-strength-meter-scripts-for-a-better-registration-interface/

0
 
LVL 31

Expert Comment

by:gwkg
ID: 24827086
The reason I say that is because there are too many other variables and other files involved that could be causing this not to work.
0
 
LVL 17

Accepted Solution

by:
OmniUnlimited earned 0 total points
ID: 24827525
Well, qwkq.  I am so sorry you were unable to come up with a solution.  I do appreciate your willingness to help.  The good news is that I was able to come up with a working solution.  I found out that admin functions are just too separate from the main website for me to be able to realistically use them, and also the syntax of the jQuery function was not one I recognized (being somewhat of a newbe at jQuery), so I changed the syntax of the function to one I did recognize, transferred the passwordStrength function over to my user.js file, and added definitions for the pwsL10n variable, and viola!  It works!

Below you can see the updated function:
wp_enqueue_script('jquery');
wp_enqueue_script('password-strength-meter');
?>
<script type="text/javascript">
     jQuery(document).ready( function () {
 
         jQuery('#pass1').val('').keyup(function(){	
 
	var pass = jQuery('#pass1').val();
	var user = jQuery('#user_login').val();
	var pwsL10n = {
		empty: "Strength indicator",
		short: "Very weak",
		bad: "Weak",
		good: "Medium",
		strong: "Strong"
	}
 
	jQuery('#pass-strength-result').removeClass('short bad good strong');
	if ( ! pass ) {
	         jQuery('#pass-strength-result').html( pwsL10n.empty );
	         return;
	}
 
	var strength = passwordStrength(pass, user);
 
	if ( 2 == strength )
          	jQuery('#pass-strength-result').addClass('bad').html( pwsL10n.bad );
	else if ( 3 == strength )
		jQuery('#pass-strength-result').addClass('good').html( pwsL10n.good );
	else if ( 4 == strength )
		jQuery('#pass-strength-result').addClass('strong').html( pwsL10n.strong );
	else
		// this catches 'Too short' and the off chance anything else comes along
		jQuery('#pass-strength-result').addClass('short').html( pwsL10n.short );
 
           });
 
     });
</script>
<?php
 
// In the page I had to add the following coding:
 
global $current_user;
get_currentuserinfo();
$username = ucwords($current_user->display_name);
?>
<input type="hidden" name="user_login" id="user_login" value="<?php echo $username ?>" />
 
<!-- And of course the following: -->
<input type="password" name="pass1" id="pass1" size="25" />
<input type="password" name="pass2" id="pass2" size="25" />
<div id="pass-strength-result"><?php _e('Strength indicator'); ?></div>

Open in new window

0
 
LVL 17

Author Comment

by:OmniUnlimited
ID: 24827578
I just found out that the two wp_enqueue_script's are not necessary either.
0
 
LVL 31

Expert Comment

by:gwkg
ID: 24827797
Very good.  Thank you for posting your solution... I'm sure this will be useful to others as well.
0
 
LVL 17

Author Comment

by:OmniUnlimited
ID: 24827896
Thank you gwkg.  I hope it will be useful to someone as well.  I look forward to your help on future problems.  Do you know anything about the php pdf library, tcpdf?
0
 
LVL 3

Expert Comment

by:CoastalData
ID: 24851062
Hello, Try the "Register Plus" plugin, it has the code already in it to do this for you, and you don't even have to modify the WordPress code.
0
 
LVL 17

Author Comment

by:OmniUnlimited
ID: 24851949
Thanks for your input, CoastalData.  As a matter of fact, my site already uses the "Register Plus" plugin, and I had already gone over the code before I posted my question.   I chose to use the code from the profile page because the strength meter is located on a page that for me is easier to modify ("Register Plus" loads the password strength meter onto a page based in wp-login.php and for me was not as elegant a code.)  But I'm sure that for others that may wish to do the same as I have done, "Register Plus" is definitely a viable option.
0

Featured Post

Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
There are times when I have encountered the need to decompress a response from a PHP request. This is how it's done, but you must have control of the request and you can set the Accept-Encoding header.
The purpose of this video is to demonstrate how to add AdSense Ads to a WordPress Website, and how to set up WordPress to automatically place Ads in Sidebars. This will be demonstrated using a Windows 8 PC. Log into your AdSense account. : Cli…
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
Suggested Courses

777 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question