- reviewed #1212 and manually merged it into development/2.6.9;

assets/css/um-styles.css

@@ -383,6 +383,32 @@ p.um-notice.warning a {
 	word-wrap: break-word;
 }
 
+.um-field-area-password {
+	position: relative;
+}
+
+.um-toggle-password {
+	cursor: pointer;
+	display: block;
+	position: absolute;
+	right: 0;
+	top: 0;
+	height: 100%;
+	width: 40px;
+	text-align: center;
+	box-sizing: border-box;
+	font-size: 20px;
+	line-height: 2;
+}
+
+.um-toggle-password i {
+	transition: all .2s linear;
+}
+
+.um-toggle-password:hover i {
+	color: #44b0ec;
+}
+
 .um-field-value p {
 	margin: 0 0 6px 0 !important;
 	padding: 0;
@@ -432,11 +458,11 @@ p.um-notice.warning a {
 	line-height: 1.7em;
 }
 
-.um-form input[type=text],
-.um-form input[type=search],
-.um-form input[type=tel],
-.um-form input[type=number],
-.um-form input[type=password] {
+.um-form input[type="text"],
+.um-form input[type="search"],
+.um-form input[type="tel"],
+.um-form input[type="number"],
+.um-form input[type="password"] {
 	padding: 0 12px !important;
 	width: 100%;
 	display: block !important;
@@ -451,32 +477,35 @@ p.um-notice.warning a {
 	box-shadow: none !important;
 	margin: 0 !important;
 	position: static;
-	outline: none !important;
 }
 
-.um-form input[type=number] {
+.um-form .um-field-area-password input[type="password"] {
+	padding-right: 40px !important;
+}
+
+.um-form input[type="number"] {
 	width: auto;
 	padding: 0 0 0 5px !important;
 	height: 30px !important;
 }
 
-.um-form input[type=text]:focus,
-.um-form input[type=search]:focus,
-.um-form input[type=tel]:focus,
-.um-form input[type=number]:focus,
-.um-form input[type=password]:focus,
+.um-form input[type="text"]:focus,
+.um-form input[type="search"]:focus,
+.um-form input[type="tel"]:focus,
+.um-form input[type="number"]:focus,
+.um-form input[type="password"]:focus,
 .um-form textarea:focus {
 	box-shadow: none !important;
 	outline: none !important;
 }
 
-.um-form input[type=text].um-iconed,
-.um-form input[type=tel].um-iconed,
-.um-form input[type=password].um-iconed { padding-left: 44px !important }
+.um-form input[type="text"].um-iconed,
+.um-form input[type="tel"].um-iconed,
+.um-form input[type="password"].um-iconed { padding-left: 44px !important }
 
-.um-form input[type=text].um-error,
-.um-form input[type=tel].um-error,
-.um-form input[type=password].um-error { border-color: #C74A4A !important }
+.um-form input[type="text"].um-error,
+.um-form input[type="tel"].um-error,
+.um-form input[type="password"].um-error { border-color: #C74A4A !important }
 
 .um-form textarea {
 	width: 100%;
@@ -633,15 +662,15 @@ p.um-notice.warning a {
 
 .um div.disabled,
 .um-disabled,
-.um input[type=submit]:disabled,
-.um input[type=text]:disabled,
-.um input[type=number]:disabled {
+.um input[type="submit"]:disabled,
+.um input[type="text"]:disabled,
+.um input[type="number"]:disabled {
 	opacity: 0.6 !important;
 	cursor: no-drop !important;
 }
 
-input[type=submit].um-button,
-input[type=submit].um-button:focus {
+input[type="submit"].um-button,
+input[type="submit"].um-button:focus {
 	vertical-align: middle !important;
 	height: auto !important;
 	font-size: 15px;
@@ -656,7 +685,7 @@ input[type=submit].um-button:focus {
 	-webkit-appearance: none;
 }
 
-input[type=submit].um-button:hover {
+input[type="submit"].um-button:hover {
 	opacity: 1;
 }
 
@@ -1098,4 +1127,4 @@ small.um-max-filesize span{
 .um-field-area .wp-switch-editor{
 	float: none;
 	height: auto;
-}
+}

assets/js/um-scripts.js

@@ -713,4 +713,16 @@ jQuery(document).ready(function() {
 		}
 	}
 
+	jQuery( document.body ).on('click', '.um-toggle-password', function (){
+		let parent = jQuery(this).closest('.um-field-area-password');
+		let passwordField = parent.find('input');
+		let type = passwordField.attr('type');
+		if ( 'text' === type ) {
+			passwordField.attr('type', 'password');
+			parent.find('i').toggleClass('um-icon-eye um-icon-eye-disabled');
+		} else {
+			passwordField.attr('type', 'text');
+			parent.find('i').toggleClass('um-icon-eye um-icon-eye-disabled');
+		}
+	});
 });