Trigger for change visibility state of input (from password to text and vice versa).

password-visibility.html

<div class="field-password">
  <input class="field" type="password">
</div>

password-visibility.js

function passwordVisibility() {
  var $wrapper = $('.field-password'),
      $input = $wrapper.find('input[type=password]');

  $wrapper.on('click', function (e) {
    var x = e.pageX - $(this).offset().left,
        triggerWidth = 14, // trigger width (from CSS - width: 14px)
        triggerOffsetRight = 7; // trigger offset right (from CSS - right: 7px)

    if (x >= ($wrapper.width() - triggerOffsetRight - triggerWidth) &&
        x <= ($wrapper.width() - triggerOffsetRight)) {

      if ($input.attr('type') === 'password') {
        $input.attr('type', 'text');
      } else {
        $input.attr('type', 'password');
      }
      $wrapper.toggleClass('__visible', $input.attr('type') === 'text');
    }
  });
}

password-visibility.scss

// password filed
.field-password {
  position: relative;

  &::after {
    content: '\f070';
    display: inline-block;
    position: absolute;
    width: 14px;
    height: 14px;
    right: 7px;
    top: (30px / 2) - (14px / 2); // (input height / 2) - (this height / 2)
    line-height: 14px;
    font-family: FontAwesome;
    cursor: pointer;
    color: $gray-light;

    @include user-select(none);
  }

  &.__visible {

    &::after {
      content: '\f06e';
      color: $brand-primary;
    }
  }
}