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

pmpro-reveal-password.php

<?php
/**
 * Password visibility toggle with Fontawesome eye icon.
 *
 * 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 Fontawesome font 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_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>
		let inputElement = document.getElementById('password');
		let inputElementTwo = document.getElementById('password2');
		let inputElementThree = document.getElementById('password_current');
		let pmproButtonSubmit = document.getElementById('pmpro_btn-submit');

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

		if( ! inputElement && ! inputElementTwo && ! pmproButtonSubmit ) {
			inputElement = document.getElementById('pass1');
			inputElementTwo = document.getElementById('pass2');
			pmproButtonSubmit = document.querySelector('.pmpro_btn-submit');
			if ( ! pmproButtonSubmit ) {
				pmproButtonSubmit = document.getElementById('resetpass-button');
			}
		}

		// Create container
		let btn = document.createElement('button');
		btn.type = 'button';
		btn.classList.add( "btn", "fa" );
		btn.id = 'pmpro-toggle-password-button';

		inputElement.appendChild(btn);
		const toggleButton = document.getElementById("pmpro-toggle-password-button");

		// Create icon
		const showIcon = document.createElement('i');
		showIcon.id = 'pmpro-toggle-password-icon';
		showIcon.classList.add("fa", "fa-eye-slash");
		toggleButton.appendChild(showIcon);
		const toggleIcon = document.getElementById('pmpro-toggle-password-icon');

		// Place toggle next to password field
		if (inputElement.parentNode) {
		inputElement.parentNode.insertBefore(toggleButton, inputElement.nextSibling);
		}

		// Change field type and icon class
		toggleButton.addEventListener('click', (e) => {
			typeSwop( inputElement, 'password', 'text');
			if (inputElementTwo) {
				typeSwop( inputElementTwo, 'password', 'text');
			}
			if (inputElementThree) {
				typeSwop( inputElementThree, 'password', 'text');
			}
			classSwop(toggleIcon, 'fa-eye-slash', 'fa-eye' );
		});

		// Force input fields to password type for password managers
		pmproButtonSubmit.addEventListener('click', (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.classList.toggle(classOne);
				el.classList.toggle(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.type) {
					case typeOne:
						el.type = typeTwo;
						break;
					case typeTwo:
						el.type = typeOne;
						break;
				}
			}
		}

		/**
		 * Force element type to password.
		 *
		 * @param element el Element
		 * @param string elType Element type
		 */
		function setElementType(el, elType) {
			if (el && el.type != elType) {
				el.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.fa-eye {
			color: #4f4f4f;
		}
	</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