Toggle the password visibility on PMPro Checkout, Login, and Signup Shortcode pages by clicking on the Dashicon eye icon to reveal or hide the password.

pmpro-reveal-password.php

<?php
/**
 * Password visibility toggle with Dashicons.
 *
 * Adds an eye icon which on click reveals the password.
 * This also works for the Signup Shortcode Add On.
 *
 * This code recipe assumes that the Dashicons library is already enqueued.
 *
 * You can add this recipe to your site by creating a custom plugin
 * or using the Code Snippets plugin available for free in the WordPress repository.
 * Read this companion article for step-by-step directions on either method.
 * https://www.paidmembershipspro.com/create-a-plugin-for-pmpro-customizations/
 */

function my_enqueue_dashicons() {
	// Bail if dashicons already enqueued
	if ( wp_style_is( 'dashicons', 'enqueued' ) ) {
		return;
	}
	wp_enqueue_style( 'dashicons' );
}
add_action( 'wp_enqueue_scripts', 'my_enqueue_dashicons' );

function my_pmpro_password_toggle_loader() {
	global $pmpro_pages, $post;

	if ( ! function_exists( 'my_pmpro_password_toggle_js' ) || ! function_exists( 'my_pmpro_password_toggle_css' ) ) {
		return;
	} elseif ( is_page( $pmpro_pages['checkout'] ) || is_page( $pmpro_pages['login'] ) || is_page( $pmpro_pages['member_profile_edit'] ) || ( ! empty( $post->post_content ) && has_shortcode( $post->post_content, 'pmpro_signup' ) ) ) {
		// Let's add the JS & CSS
		add_action( 'wp_head', 'my_pmpro_password_toggle_css' );
		add_action( 'wp_footer', 'my_pmpro_password_toggle_js' );
	}
}
add_action( 'wp', 'my_pmpro_password_toggle_loader', 9 );

function my_pmpro_password_toggle_js() {
	?>
	<script>
		jQuery(document).ready(function($) {
			let $inputElement = $('#password');
			let $inputElementTwo = $('#password2');
			let $inputElementThree = $('#password_current');
			let $pmproButtonSubmit = $('#pmpro_btn-submit');

			// Get elements if we're on the login page.
			if( !$inputElement.length && !$pmproButtonSubmit.length ) {
				$inputElement = $('#user_pass');
				$pmproButtonSubmit = $('#wp-submit');
			}

			if( !$inputElement.length && !$inputElementTwo.length && !$pmproButtonSubmit.length ) {
				$inputElement = $('#pass1');
				$inputElementTwo = $('#pass2');
				$pmproButtonSubmit = $('.pmpro_btn-submit');
				if ( !$pmproButtonSubmit.length ) {
					$pmproButtonSubmit = $('#resetpass-button');
				}
			}

			// Create container
			let $btn = $('<button>', {
				type: 'button',
				class: 'btn',
				id: 'pmpro-toggle-password-button'
			});

			$inputElement.after($btn);
			const $toggleButton = $("#pmpro-toggle-password-button");

			// Create icon
			const $showIcon = $('<span>', {
				id: 'pmpro-toggle-password-icon',
				class: 'dashicons dashicons-visibility'
			});
			$toggleButton.append($showIcon);
			const $toggleIcon = $('#pmpro-toggle-password-icon');

			// Change field type and icon class
			$toggleButton.on('click', function(e) {
				typeSwop($inputElement, 'password', 'text');
				if ($inputElementTwo.length) {
					typeSwop($inputElementTwo, 'password', 'text');
				}
				if ($inputElementThree.length) {
					typeSwop($inputElementThree, 'password', 'text');
				}
				classSwop($toggleIcon, 'dashicons-visibility', 'dashicons-hidden');
			});

			// Force input fields to password type for password managers
			$pmproButtonSubmit.on('click', function(e) {
				setElementType($inputElement, 'password');
				setElementType($inputElementTwo, 'password');
			});

			/* HELPER FUNCTIONS */

			/**
			 * Swop element CSS classes
			 *
			 * @param element el Dom element
			 * @param string classOne Class name
			 * @param string classTwo Class name
			 */
			function classSwop(el, classOne, classTwo) {
				if (el) {
					el.toggleClass(classOne);
					el.toggleClass(classTwo);
				}
			}

			/**
			 * Swop element type
			 *
			 * @param element el Dom element
			 * @param string typeOne Type name
			 * @param string typeTwo Type name
			 */
			function typeSwop(el, typeOne, typeTwo) {
				if (el) {
					switch (el.prop('type')) {
						case typeOne:
							el.prop('type', typeTwo);
							break;
						case typeTwo:
							el.prop('type', typeOne);
							break;
					}
				}
			}

			/**
			 * Force element type to password.
			 *
			 * @param element el Element
			 * @param string elType Element type
			 */
			function setElementType(el, elType) {
				if (el && el.prop('type') != elType) {
					el.prop('type', elType);
				}
			}
		});
	</script>
	<?php
}

function my_pmpro_password_toggle_css() {
	?>
	<style>
		#pmpro-toggle-password-button {
			margin-left: 2rem;
			padding: unset;
			background-color: unset;
			box-shadow: unset;
			border: unset;
		}
		#pmpro-toggle-password-icon {
			padding: unset;
			color: #777;
		}

		#pmpro-toggle-password-icon:hover {
			color: #0a4b78;
		}
	</style>
	<?php
}

This recipe is intended as a temporary option as password reveal functionality may be integrated into PMPro in the future - strangerstudios/paid-memberships-pro#1851