@astreetweb
sure, I add in my plugin
function my_plugin_show_hide_pw_wp_members( $rows, $action, $arr ) {
$rows[1]['field_after'] = '<a class="password-toggle-icon"><i class="fas fa-eye"></i></a>';
$rows[1]['row_after'] = '<script type="text/javascript">
const passwordField = document.getElementById("pwd");
const togglePassword = document.querySelector(".password-toggle-icon i");
togglePassword.addEventListener("click", function () {
if (passwordField.type === "password") {
passwordField.type = "text";
togglePassword.classList.remove("fa-eye");
togglePassword.classList.add("fa-eye-slash");
} else {
passwordField.type = "password";
togglePassword.classList.remove("fa-eye-slash");
togglePassword.classList.add("fa-eye");
}
});
</script>
';
return $rows;
}
add_filter( 'wpmem_login_form_rows', 'my_plugin_show_hide_pw_wp_members', 10, 3 );
and add some css
#wpmem_login_form .div_text {
position: relative;
}
.password-toggle-icon {
position: absolute;
top: 30px;
right: 10px;
transform: translateY(-50%);
cursor: pointer;
}
.password-toggle-icon i {
font-size: 18px;
line-height: 1;
transition: color 0.3s ease-in-out;
margin-bottom: 20px;
}
.password-toggle-icon i:hover {
color: #000;
}
this is based on font awesome.
I hope this helps you