Для начала создадим простую форму авторизации на которой и будем реализовывать функцию показать/скрыть пароль: 

<h1>Авторизация</h1>
<form class="my-form">
    <div class="form-group">
        <label for="email">Введите e-mail:</label>
        <input id="email" type="text" placeholder="E-mail" />
    </div>
    <div class="form-group">
        <label for="password">Введите пароль:</label>
        <input id="password" type="password" placeholder="Пароль" />
    </div>
    <div class="form-group">
        <a href="#" id="s-h-pass">Показать пароль</a>
    </div>
    <div class="form-group">
        <input id="enter" type="submit" value="Вход" />
    </div>
</form>

Добавим немного стиля для хоть какой-то красоты: 

<style>
    body{
        font-family:sans-serif;
        font-size: 13px;
    }
    h1 {
        text-align: center;
    }
    .my-form{
        width: 300px;
        margin: 0 auto;
    }
    .form-group {
        padding: 5px;
    }
    .form-group label {
        width: 105px;
        display: inline-block;
    }
    .form-group input {
        width: 165px;
        padding: 5px;
    }
    #enter {
        width: 100%;
    }
</style>

Форма готова, выглядит довольно сносно, теперь реализуем работу функции показать/скрыть пароль на нажатию на соответствующую ссылку, для ее работы нам понадобиться jQuery, подключаем его следующим образом: 

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

Подключить jQuery вы можете любым удобным для вас способом, если этот не подходит. Теперь перейдем к функции показать/скрыть пароль в форме, она будет выглядеть следующим образом: 

<script>
    $( document ).ready(function() {
        $('#s-h-pass').click(function(){
            var type = $('#password').attr('type') == "text" ? "password" : 'text',
             c = $(this).text() == "Скрыть пароль" ? "Показать пароль" : "Скрыть пароль";
            $(this).text(c);
            $('#password').prop('type', type);
        });
    });
</script>

Разберем ее подробнее.
2 строка - скрипт начинает работу после загрузки страницы.
3 - строка обрабатываем нажатие (клик) по элементы с id s-h-pass, наша ссылка показать/скрыть пароль.
Строки 4-5 - в соответствии с текущим типом поля ввода пароля (text или password) меняем тип поля ввода пароля на обратный и выводим текст на кнопке показать/скрыть пароль.
Строка 6 - задаем текст кнопке показать/скрыть.
Строка 7 - задаем тип поля (text - показать или password - скрыть).

Общий вид index.html: 

<!DOCTYPE html>
<html lang="ru">
<head>

    <meta charset="UTF-8">
    <title>JQuery, добавляем возможность показать/скрыть пароль в форме</title>
    <style>
        body{
            font-family:sans-serif;
            font-size: 13px;
        }
        h1 {
            text-align: center;
        }
        .my-form{
            width: 300px;
            margin: 0 auto;
        }
        .form-group {
            padding: 5px;
        }
        .form-group label {
            width: 105px;
            display: inline-block;
        }
        .form-group input {
            width: 165px;
            padding: 5px;
        }
        #enter {
            width: 100%;
        }
    </style>

</head>
<body>

<h1>Авторизация</h1>

<form class="my-form">
    <div class="form-group">
        <label for="email">Введите e-mail:</label>
        <input id="email" type="text" placeholder="E-mail" />
    </div>
    <div class="form-group">
        <label for="password">Введите пароль:</label>
        <input id="password" type="password" placeholder="Пароль" />
    </div>
    <div class="form-group">
        <a href="#" id="s-h-pass">Показать пароль</a>
    </div>
    <div class="form-group">
        <input id="enter" type="submit" value="Вход" />
    </div>
</form>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
    $( document ).ready(function() {
        $('#s-h-pass').click(function(){
            var type = $('#password').attr('type') == "text" ? "password" : 'text',
             c = $(this).text() == "Скрыть пароль" ? "Показать пароль" : "Скрыть пароль";
             $(this).text(c);
             $('#password').prop('type', type);
        });
    });
</script>

</body>
</html>

Результат:

Пример работу функции показать/скрыть пароль в форме

Вот демо примера или можно скачать.

Можно еще немного улучшить форму с помощью bootstrap и заменить ссылку показать/скрыть пароль на иконку, приведу стразу полный код файла: 

<!DOCTYPE html>
<html lang="ru">
<head>

    <meta charset="UTF-8">
    <title>JQuery, добавляем возможность показать/скрыть пароль в форме</title>

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

    <script>
        $( document ).ready(function() {
            $('#s-h-pass').click(function(){
                var type = $('#password').attr('type') == "text" ? "password" : 'text',
                    c = $(this).html() == "<span class=\"glyphicon glyphicon-eye-close\" title=\"Скрыть пароль\"></span>" ? "<span class=\"glyphicon glyphicon-eye-open\" title=\"Показать пароль\"></span>" : "<span class=\"glyphicon glyphicon-eye-close\" title=\"Скрыть пароль\"></span>";
                $(this).html(c);
                $('#password').prop('type', type);
            });
        });
    </script>
</head>
<body>

    <div class="container">
        <h1>Авторизация</h1>

        <form class="my-form">
            <div class="form-group">
                <label for="email">Введите e-mail:</label>
                <input id="email" type="text" placeholder="E-mail" class="form-control" />
            </div>
            <div class="form-group">
                <label for="password">Введите пароль:</label>
                <div class="input-group">
                    <input id="password" type="password" placeholder="Пароль" class="form-control" />
                    <div class="input-group-addon" id="s-h-pass"><span class="glyphicon glyphicon-eye-open" title="Показать пароль"></span></div>
                </div>
            </div>
            <div class="form-group">
                <input id="enter" type="submit" value="Вход" class="btn btn-success pull-right" />
            </div>
        </form>

    </div>
</body>
</html>

Результат:

Пример работу функции показать/скрыть пароль в форме с использованием bootstrap

Приятной работы.