Add an eye toggle to view or hide password in login page

In Event pane -> Login page -> Javascript OnLoad event we write the code
$( "#password" ).parent().append( '<span toggle="#password" class="fa fa-fw fa-eye fa-lg pass-icon toggle-password"></span>' );
$(".pass-icon").css({
"float": "right",
"margin-left": "-25px",
"margin-top": "-22px",
"position": "relative" ,
"z-index": '2'
});
$(".toggle-password").click(function() {
$(this).toggleClass("fa-eye fa-eye-slash");
var input = $($(this).attr("toggle"));
if (input.attr("type") == "password") {
input.attr("type", "text");
} else {
input.attr("type", "password");
}
});
If the eye icon is lower from middle then decrease the margin-top value from -22px to -25px or what else
If the eye icon is higher from middle then change the margin-top value from -22px to -20px or what else.
the same we can do to a dialog input field.
if the the password field is the second field in dialog then add the afterCreate event to dialog.
a sample dialog in a client before button is
return ctrl.dialog( {
title: 'Store login crendentials ',
fields: [{
name: 'user_name',
label:'User Name',
value: ''
},
{
name: 'user_pass',
label:'Password',
value: ''
}],
ok: 'Store Login',
cancel: 'Cancel',
afterCreate: function( popup, controls ) {
controls[1].attr('type', 'password');
controls[1].parent().append('<span toggle="#'+controls[1].attr('id')+'" class="fa fa-fw fa-eye fa-lg pass-icon toggle-password"></span>');
$(".pass-icon").css({
"float": "right",
"margin-left": "-25px",
"margin-top": "-22px",
"position": "relative" ,
"z-index": '2'
});
$(".toggle-password").click(function() {
$(this).toggleClass("fa-eye fa-eye-slash");
var input = $($(this).attr("toggle"));
if (input.attr("type") == "password") {
input.attr("type", "text");
} else {
input.attr("type", "password");
}
});
}
});