Alternar visibilidad del campo de contraseña

Un caso de uso común es permitir que los usuarios que rellenen el formulario puedan acceder al texto introducido en el campo de contraseña.
Para lograr este caso de uso, he utilizado el icono de ojo del Biblioteca Awesome de fuentes. El CSS requerido y el eye.svg se incluyen en la biblioteca de cliente creada para esta demostración.

Código de muestra

El formulario adaptable tiene un campo de tipo PasswordBox denominado ssnField.

El siguiente código se ejecuta cuando se carga el formulario

$(document).ready(function() {
    $(".ssnField").append("<p id='fisheye' style='color: Dodgerblue';><i class='fa fa-eye'></i></p>");

    $(document).on('click', 'p', function() {
        var type = $(".ssnField").find("input").attr("type");

        if (type == "text") {
            $(".ssnField").find("input").attr("type", "password");
        }

        if (type == "password") {
            $(".ssnField").find("input").attr("type", "text");
        }

    });

});

Se ha utilizado el CSS siguiente para colocar el ojo dentro del campo de contraseña

.svg-inline--fa {
    /* display: inline-block; */
    font-size: inherit;
    height: 1em;
    overflow: visible;
    vertical-align: -.125em;
    position: absolute;
    top: 45px;
    right: 40px;
}

Implementar el ejemplo de contraseña de alternador

En esta página