<div class="card" style="max-width: 500px;">
  <div class="card-header">
    <i class="fa fa-lock"></i> Zmiana hasła
  </div>
  <div class="card-body">
    <form method="POST" id="password-settings" action="/users/password_change/">
      <div class="form-field">
        <label>Stare hasło</label>
        <div class="password-wrap">
          <input type="password" name="password_old" id="password_old" class="form-control" required>
          <a href="#" class="password-eye" onclick="password_toggle( $(this).children('i'), 'password_old' ); return false;">
            <i class="fa fa-eye"></i>
          </a>
        </div>
      </div>
      <div class="form-field">
        <label>Nowe hasło</label>
        <div class="password-wrap">
          <input type="password" name="password_new" id="password_new" class="form-control" required>
          <a href="#" class="password-eye" onclick="password_toggle( $(this).children('i'), 'password_new' ); return false;">
            <i class="fa fa-eye"></i>
          </a>
        </div>
      </div>
      <button type="submit" class="btn btn-success" style="margin-top: 10px;">
        <i class="fa fa-check"></i> Zmień hasło
      </button>
    </form>
  </div>
</div>
<script type="text/javascript">
  function password_toggle( input, id )
  {
    $( input ).toggleClass( 'fa-eye' ).toggleClass( 'fa-eye-slash' );
    if ( $( '#' + id ).attr( 'type' ) === 'password' )
      $( '#' + id ).attr( 'type', 'text' );
    else
      $( '#' + id ).attr( 'type', 'password' );
  }
</script>
