Toggle Password Display

by Robert Mullaney

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
<script src="//code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<link rel="stylesheet" href="//opensource.keycdn.com/fontawesome/4.7.0/font-awesome.min.css">
<div class="input-group">
  <input type="password" name="password" value="P@$$w0rD" placeholder="Password" id="input-password" class="form-control" required>
  <span id="view-password" class="input-group-addon"><i class="fa fa-eye" aria-hidden="true"></i></span>
</div>

JavaScript

$('#view-password').click(function(e) {
  $password = $('#input-password');
  if ($password.prop('type') == 'password') {
    $password.prop('type', 'text');
  } else {
    $password.prop('type', 'password');
  }
  $('i', this).toggleClass('fa-eye-slash');
});