Show/hide Password button in pure JS

Pure javascript solution for show hide password button near to password input

by Maksim

HTML

<form name="sign-up" action="/sign-up" method="post" novalidate autocomplete="off">
  <div class="form-group">
    <input type="email" id="email" name="email" class="form-control" required placeholder="Email" autocomplete="off"/>
	</div>

  <div class="form-group input-group">
    <input type="password" id="password" name="password" class="form-control" required
         placeholder="Password" autocomplete="off"/>
    <label class="input-group-addon">
      <input type="checkbox" style="display:none"
        onclick="(function(e, el){
          document.getElementById('password').type = el.checked ? 'text' : 'password';
          el.parentNode.lastElementChild.innerHTML = el.checked ? '<i class=\'glyphicon glyphicon-eye-close\'>' : '<i class=\'glyphicon glyphicon-eye-open\'>';
          })(event, this)">
       <span><i class="glyphicon glyphicon-eye-open"></i></span>
    </label>
	</div>
	<div class="form-group text-center">
		<button type="submit" class="btn btn-primary btn-lg">Sign Up</button>
	</div>
</form>

CSS

@import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css");

form { margin:50px auto;max-width:560px;}