Password switcher

v0.1a

Your password

Implementing this component

The Markup

				
	<form id="password-switch">
        <fieldset class="t-neutral password-switcher">
            <label class="password-switcher__label" for="password-control">Your password</label>
            <div class="password-switcher__inner">
                <input type="password" class="password-switcher__input js-password-input" id="password-control" />
                <button type="button" title="Show Hide Password Toggle" class="password-switcher__button js-password-switch" aria-controls="password-control" />
            </div>
        </fieldset>
    </form>
				
			

The CSS: Theming

				
.t-neutral .password-switcher__input {
    background: #fff;
    border: 1px solid #ddd;
}
.t-neutral .password-switcher__button {
    background: url("../img/icon_view.svg") no-repeat 0 50%;
}

				
			

The CSS: Reset

				
/* Reset */
.password-switcher input::-ms-clear,
.password-switcher input::-ms-reveal {
    display: none;
}

				
			

The CSS: Component

				
/* Component */
.password-switcher__inner {
    margin: 1.5em 0 0 0;
    position: relative;
}
.password-switcher__input {
    background: none;
    border: none;
    font-size: 1em;
    padding: 1em 3em 1em 1em;
    width: 100%;
}
.password-switcher__input:focus {
    outline-offset:5px;
}
.password-switcher__input:hover,
.password-switcher__input:focus,
.password-switcher__input:active {
    font-size: 1em;
}

.password-switcher__button {
    display: block;
    height: 3.25em;
    overflow: hidden;
    position: absolute;
    right: 1.5em;
    top: 0.75em;
    width: 2.5em;
    transition: opacity 0.3s ease;
    cursor:pointer;

}
.password-switcher__button:focus {
    outline:thin dotted;
    outline-offset:5px;
}
.password-switcher__button:hover {
    opacity:0.8;
}
//is revealing
.password-switcher__button.is-active {
    background-position: -28px 50%;
}
				
			

The Javascript

				
//initialise with the id
function PasswordSwitcher(elemId) {
  'use strict';
  //password switcher
  var passwordInput = document.getElementById(elemId);
  //this requires that your button is directly after your input
  var btnPasswordSwitch = passwordInput.nextElementSibling;

  function init(){
    btnPasswordSwitch.addEventListener('click', togglePasswordReveal, false);
    if(supportsTouch){
      btnPasswordSwitch.addEventListener('touchend', removeClickDelay, false);
    }
    if(supportsPointer){
      btnPasswordSwitch.addEventListener('pointerup', removeClickDelay, false);
    }
  }
  function removeClickDelay(e){
      e.preventDefault();
      e.target.click();
  }
  function supportsTouch(){
     return ('ontouchstart' in window);
  }
  function supportsPointer(){
    return ('pointerdown' in window);
  }
  function togglePasswordReveal(e){
     e.preventDefault();
    (btnPasswordSwitch.classList.contains('is-active')) ? passwordInput.setAttribute('type', 'password') :  passwordInput.setAttribute('type', 'text');
    btnPasswordSwitch.classList.toggle('is-active');
  }
  init();
};


				
			

About the component

TBD.

Screen Readers

Apple Voiceover

TBD.

JAWS

TBD.

NVDA

TBD.

Keyboard control

TBD.

High Contrast

TBD.

Inputs

TBD.

Cross browser notes

TBD.

Cross device notes

TBD.