Bootstrap 4 Advanced Components : password reveal

Bootstrap 4 Advanced Components : Clear button v2 for input field

by djibe89

HTML

<link rel="stylesheet" href="https://daemonite.github.io/material/css/material.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<script src="https://daemonite.github.io/material/js/material.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="container">
  <div class="row mt-4">
    <div class="col">
      <div class="jumbotron">

        <h1>Password reveal button for input fields (forms) for Bootstrap 4 - Advanced Components</h1>
        <p class="lead">by djibe.</p>
        <span class="text-muted">(thx to BS4 + Daemonite Material Design)</span>
        <p>
          Plugin for BS4 to add a clear button to any input with standard BS4 tags and material design.<br> Start typing to see the effect.
        </p>
        <ol>
          <li>
            Just add the data-password attrribute to the concerned input password.
          </li>
        </ol>
        <p>
          TODO: integrate with floating-label component of Daemonite material design for BS4
        </p>
        <div class="form-group">
          <label for="example-password">Enter your password</label>
          <input type="password" class="form-control" id="example-password" placeholder="Choose a password" data-password>
        </div>
        <div class="form-group mt-3">
          <label for="example-password2">Enter your password (ex 2 with form-text helper)</label>
          <input type="password" class="form-control" id="example-password2" placeholder="Enter your password" data-password>
          <small class="form-text text-muted">At least 8 characters.</small>
        </div>

      </div>
   ...

CSS

.form-group.position-relative input {
  padding-right: 32px;
}

.form-password-icon {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  bottom: 8px;
  color: rgba(0, 0, 0, .54);
  cursor: pointer;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 24px;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: absolute;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  right: 0;
  width: 24px;
  z-index: 10;
}

.form-text~.form-password-icon {
  bottom: calc(1rem + 18px);
}

.form-password-icon .material-icons {
  font-size: 16px;
  font-weight: 500;
}

JavaScript

/*! Bootstrap 4 material reveal password plugin
 * by djibe
 * Add a reval password icon for your password inputs, for Daemonite : material design for bootstrap 4 available here : https://github.com/Daemonite/material
 * Google material guidelines : https://material.io/guidelines/components/text-fields.html
 * MIT license
 */

// Init the script on the pages you need
bootstrapRevealPassword();

// Plugin to integrate in your javascript file
function bootstrapRevealPassword() {
  $('[data-password]').closest('.form-group').addClass('position-relative').append('<span class="form-password-icon"><i class="material-icons">visibility_off</i></span>');

  $('.form-password-icon').on('click', function() {
    var clicks = $(this).data('clicks');
    if (clicks) {
      // odd clicks
      $(this).html('<i class="material-icons">visibility_off</i>').prevAll(':input').attr('type', 'password');
    } else {
      // even clicks
      $(this).html('<i class="material-icons">visibility</i>').prevAll(':input').attr('type', 'text');
    }
    $(this).data("clicks", !clicks);
  });
}