Merge pull request #24915 from BrandynL/show-password-hover-on-wc-forms

Show password hover on wc forms

assets/css/woocommerce-layout.scss

@@ -352,6 +352,28 @@
 		.form-row-wide {
 			clear: both;
 		}
+
+		.password-input {
+			display: flex;
+			flex-direction: column;
+			justify-content: center;
+			position: relative;
+		}
+
+		.show-password-input {
+			position: absolute;
+			right: 0.7em;
+			top: 0.7em;
+			cursor: pointer;
+		}
+
+		.show-password-input::after {
+			@include iconafter( "\e010" ); 	// Icon styles and glyph
+		}
+
+		.show-password-input.display-password:after {
+			color: #e8e8e8;
+		}
 	}
 
 	#payment {

assets/js/frontend/woocommerce.js

@@ -78,4 +78,19 @@ jQuery( function( $ ) {
 			}, 1000 );
 		}
 	};
+
+	// Show password visiblity hover icon on woocommerce forms
+	$( '.woocommerce form input[type="password"]' ).wrap( '<span class="password-input"></span>' );
+	$( '.password-input' ).append( '<span class="show-password-input"></span>' );
+
+	$( '.show-password-input' ).click(
+		function() {
+			$( this ).toggleClass( 'display-password' );
+			if ( $( this ).hasClass('display-password') ) {
+				$( this ).siblings( ['input[name="password"]', 'input[type="password"]'] ).prop('type', 'text');
+			} else {
+				$( this ).siblings( 'input[name="password"]' ).prop('type', 'password');
+			}
+		}
+	);
 });