“Show Passwords” feature in Ultimate Member Forms

-
um-show-password-field-LOTR-eye

Here’s another Friday trick that will make your site powerful as the Eye of Sauron with Ultimate Member!

In this tutorial, you will learn how to add “Show Password” functionallity in your Ultimate Member Login & Register forms.

Here’s a block of codes that will automatically add the “Show Password” in UM Forms with Password fields. You can add this in your Theme’s function.php file or paste it in the code snippet plugin.

add_filter("um_confirm_user_password_form_edit_field","um_user_password_form_edit_field", 10, 2 );
add_filter("um_user_password_form_edit_field","um_user_password_form_edit_field", 10, 2 );
function um_user_password_form_edit_field( $output, $set_mode ){
    
    ob_start();
     ?>
    <div id='um-field-show-passwords-<?php echo $set_mode;?>' style='text-align:right;display:block;'>
    	<i class='um-faicon-eye-slash'></i>
    	<a href='#'><?php _e("Show password","ultimate-member"); ?></a>
    </div>
    <script type='text/javascript'>
	    jQuery('div[id="um-field-show-passwords-<?php echo $set_mode;?>"] a').click(function(){ 
		 
            var $parent = jQuery(this).parent("div"); 
            var $form = jQuery(".um-<?php echo $set_mode;?> .um-form");

		    $parent.find("i").toggleClass(function() {
		    	if ( jQuery( this ).hasClass( "um-faicon-eye-slash" ) ) {
	                $parent.find("a").text('<?php _e("Hide password","ultimate-member"); ?>');
		    		jQuery( this ).removeClass( "um-faicon-eye-slash" )
		    		$form.find(".um-field-password").find("input[type=password]").attr("type","text");
		    	   return "um-faicon-eye";
			    }
				 
				jQuery( this ).removeClass( "um-faicon-eye" );
				$parent.find("a").text('<?php _e("Show password","ultimate-member"); ?>');
			    $form.find(".um-field-password").find("input[type=text]").attr("type","password");
			  
                return "um-faicon-eye-slash";
			});

		    return false; 

		});
	</script>
    <?php 
	return $output.ob_get_clean();

}

If you will notice in the code below, there are two UM filter hooks that is attached to a function.

add_filter("um_confirm_user_password_form_edit_field","um_user_password_form_edit_field", 10, 2 );
add_filter("um_user_password_form_edit_field","um_user_password_form_edit_field", 10, 2 );

UM HOOK: um_{$field_key}_form_edit_field – We use this UM filter to modify the field before it gets rendered in the form – allows us to add extra html elements.

user_password – This key is widely use in Login & Register form ( if confirm password is not enabled. The Show password link button will show below this field.

confirm_user – This key is when Confirm Password field is enabled in the form. The Show password link button will show below this field.

Now once you’ve added the code snippets, it should work and look like this!

If your site is in multi-language setup, it’s very easy to translate the strings. Just use poedit.com to add “Show password” and “Hide password” in UM’s English translation files.

So I hope that this new trick will help you with your site development with Ultimate Member! Don’t forget to subscribe to my newsletter to get updates and free plugins!

Leave some good vibes in the comment and let me know if you’re encountering any issues with this tutorial!

Subscribe to my newsletter!

Help me reach other people who need the help

17 Comments “Show Passwords” feature in Ultimate Member Forms

    1. Hi Bob, did you try changing your theme to a default WP theme e.g. 2020 and see if there’s a conflict issue with your theme?

      Regards,

  1. I have my Registration and Login on the same page. The show/hide password is visible on both forms, but works more like a toggle on one form and then the other. Meaning click the show on login and both forms show or hide, but if I click the show/hide on registration form it doesn’t work.

    1. Hi Dhomalley, I’ve updated the code snippet. Please test and let me know if you’re still encountering issues.

      Regards,

  2. Thank you, Champ! That did work. I’ve since changed my register and login to different pages, but it still works. Wonderful, and I appreciate the code!

  3. Hi Champ,

    I’m still experiencing the issue of Show/Hide password not working in Registration Page but it works for Login Page.

    It’s clickable in the registration page, but it won’t change to hide/show. It stays stuck in show password. It works great in login page though.

  4. Great, fantastic – works very well, I implemented my version as a custom plugin – many thanks.

    The one thing that amazes me is just how bad most membership plugins are at the basics like this, sure they have provision to divide a site up into umpteen different pay zones and so on. But options for core usability options are often completely bypassed and neglected.

    This is crucial – if people cannot get past basic sign-up because of usability issues then the site suffers.

    I still want to see a basic membership plugin that is properly designed usability wise.

    Also as I have raised with UM and so far been ignored…

    It is a privacy issue to inform someone

    “Sorry someone is already signed up with that email”

    I wonder how many private detectives are hired by someone who has the email address of someone they know and want to find out if they are signed up with a particular website – easy peasy just try and sign up with their email address and see if they see the warning message.

    The secure way to deal with repeated signups with the same email address is to advise…

    “Sorry there is a problem please check your email inbox to resolve this issue”

    Then you send them an email saying…

    “Someone just tried to sign up with your email address – if this was you then please be advised you are already signed up – just ask for a password reminder on site if you have forgotten”

    That way you do not tell people who happen to know your member and their email address if they are signed up with a particular site.

  5. This code does not works for me, very disappointed,
    this error occurs:
    Your PHP code changes were rolled back due to an error on line 1071 of file wp-content/themes/oceanwp/functions.php. Please fix and try saving again.

    Cannot redeclare um_user_password_form_edit_field() (previously declared in wp-content/plugins/code-snippets/php/snippet-ops.php(469) : eval()’d code:2)

  6. Works!! you saved me.

    There is some way that by default it remains to show I am using it for a very low-tech audience 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *