Edit in JSFiddle

$(function() {
    $('.password-toggle').click(function() {
        if ($(this).find('.icon').hasClass('icon-eye-close')) {
            $(this).find('.icon').addClass('icon-eye-open').removeClass('icon-eye-close');
            $('.password').prop('type', 'text');
        } else {
            $(this).find('.icon').addClass('icon-eye-close').removeClass('icon-eye-open');
            $('.password').prop('type', 'password');
        }
    });
});
<form class="well form-horizontal">
  <div class="form-group">
    <label class="col-sm-3 control-label text-right" for="input_username">Username</label>
    <div class="col-sm-9">
      <input type="text" class="form-control" id="input_username">
    </div>
  </div>
  <div class="form-group">
    <label class="col-sm-3 control-label text-right" for="input_password">Password</label>
    <div class="col-sm-9">
      <input type="text" class="form-control password" id="input_password" value="$ecReT-p@s$">
        <span class="btn btn-default password-toggle" title="show or hide the password"><i class="icon icon-eye-open"></i> show or hide the password</span>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-9 col-sm-offset-3">
      <input type="submit" class="btn btn-default" value="log in" />
    </div>
  </div>
</form>

External resources loaded into this fiddle: