<div id="wrapper">

      <div id="boxy-login-wrapper">

             <form id="boxy-login-form" name="boxy-login-form" > 
              
                  <fieldset>
                      <div class="boxy-form-inner rotateFirst3d">
            
                          <span class="end-cap left"><span class="glyphicon glyphicon-user" data-toggle="tooltip" title="click to login"></span></span>
                      
                            <span class="side front">
                                  <span class="glyphicon glyphicon-user" data-toggle="tooltip" title="enter your username"></span>
                                  <input id="boxy-input"  type="input" name="username" class="rotate" placeholder="username" required />
                                  <button class="boxy-button next-field" data-step="0"></button>
                            </span>

                            <span class="side bottom">
                                  <span class="glyphicon glyphicon-asterisk" data-toggle="tooltip" title="enter your password"></span>
                                  <input id="boxy-password" step="2" type="password" name="password" class="rotate" placeholder="password" required />
                                  <button class="boxy-button next-field sub" data-step="1"></button>
                            </span>

                            <span class="side back">
                                  <span class="boxy-checked glyphicon glyphicon-check"></span>
                                  <span class="boxy-unchecked glyphicon glyphicon-unchecked"></span>
                                      <label for="remember-me">
                                        <input id="remember-me" type="checkbox" name="remember-me" checked />remember me next time?
                                      </label>
                                  <button class="boxy-button boxy-final-button" data-step="2">OK</button>
                            </span>

                            <span class="side top">
                                  <span class="glyphicon glyphicon-question-sign" data-toggle="tooltip" title="we'll email login details."></span>
                                  <input id="boxy-email" step="9" type="email" name="email" class="rotate" placeholder="email" />
                                  <button class="boxy-button next-field forgot-btn" data-step="9"></button>
                            </span>
                            <span class="end-cap right">
                                <span class="glyphicon glyphicon-remove-circle icon-failure" data-toggle="tooltip" title="login failed, try again"></span>
                                <span class="glyphicon glyphicon-user icon-success" data-toggle="tooltip" title=""></span>
                            </span>
                      </div>
                  </fieldset>
               </form>

            <span class="boxy-refresh glyphicon glyphicon-refresh"></span>
            <em class="small-forgot">
                      <a href="#" class="boxy-forgot">forgot?</a>
            </em>

        </div>
   </div>
<div id="r8-logo-coin" ></div>
@import "compass/css3";

@import 'compass';

@import 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/1251/bootstrap.min.css';
@import 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/1251/r8-style.css';
@import 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/1251/r8-login.css';
@import 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/1251/r8-keyframes.css';


@mixin vendor-prefix($name, $argument) {
  -webkit-#{$name}: #{$argument};
  -ms-#{$name}: #{$argument};
  -moz-#{$name}: #{$argument};
  -o-#{$name}: #{$argument};
  #{$name}: #{$argument};
}

@mixin absolute-position-center {
	content:'';
	position:absolute;
	top:50%;
	left:50%;
}



body {
  #r8-logo-coin{
        width:110px;
			height:110px;
			display:block;
			margin:15px;
			position:absolute;
			bottom:15px;
			right:15px;
			border: none;
			outline:none;
			@include vendor-prefix( user-select, none );
			background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/1251/R8-launcher-icon-dark.svg') 0 0 no-repeat!important;
		}
  
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/1251/stardust.png") repeat;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  body {
    background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/1251/stardust_@2X.png") repeat;
  }
}


#wrapper{
  min-height:500px;     
  }



#boxy-login-wrapper {
          width: 31.5em;
          height: 4em!important;
          position: absolute;
          top: 50%;
          left: 50%;
          margin-left: -16em;
          border: 1em;

        @include vendor-prefix( perspective, 1000 );
        @include vendor-prefix( transition, width 550ms linear );

      &.shake {
            @include vendor-prefix( animation, bad-input-animation .5s linear );
           }

                .tooltip{
                      display: block;
                      white-space: nowrap!important;
                      text-transform: lowercase;
                      border-top: 1px solid #F9F9F9!important;
                      padding-top: -8px!important;

                    @include vendor-prefix( border-radius, 2px );

                    .tooltip-arrow {
                          border-bottom-color: #222229; 
                        }
                    
                    .tooltip-inner{
                        display:block;
                        padding: 4px 5px 4px 5px!important;
                        margin: -4px 0px 0px 0px!important;
                        border-width: 1px;
                        background-color: #222229;
                        white-space: nowrap;
                        text-transform: lowercase;

                      @include vendor-prefix( border-radius, 2px );

                          -webkit-border-image: 
                            -webkit-gradient(linear, 0 0, 0 100%, from(#F9F9F9), to(rgba(0, 0, 0, 0))) 1 100%;
                          -webkit-border-image: 
                            -webkit-linear-gradient(#F9F9F9, rgba(0, 0, 0, 0)) 1 100%;
                          -o-border-image:
                                 -o-linear-gradient(#F9F9F9, rgba(0, 0, 0, 0)) 1 100%;
                          -moz-border-image:
                               -moz-linear-gradient(#F9F9F9, rgba(0, 0, 0, 0)) 1 100%;
                          -ms-border-image:
                               -ms-linear-gradient(#F9F9F9, rgba(0, 0, 0, 0)) 1 100%;      
                    }
                  }




              span.boxy-refresh{
                width: 1.30em;
                height: 1.30em;
                position: absolute;
                top: -.25em;
                right: -1.5em;
                //clear: both;
                //float: right;
                opacity: .5;
                display: none;

                &:hover{
                  opacity: 1;
                }
                &:before{
                  clear: both; 
                  width: 1.30em;
                  height: 1.30em;
                  padding: .15em 0 0 .15em; 
                  color: #D9D9DA;
                  display: block;
                  @include vendor-prefix( border-radius, 50% );
                  @include vendor-prefix( transform-origin, center ); 
                  @include vendor-prefix( transition, all 250ms linear );   
                  }
                &:hover:before{
                    color: #2EBEA5;
                    @include vendor-prefix( transform, rotate(180deg) );
                  }
                /*&.animate-refresh{
                    &:before{
                      background: #f9f9f9;
                      }
                    }*/
                  }

        em.small-forgot{
              display:none;
              font-size: 12px;
              font-style: italic;
              font-weight: 400;
              float: right;
              height: 30px;
              color: #666;
              margin: 5px 5px 0 0;

            @include vendor-prefix( transition, all 250ms linear );

              a.boxy-forgot{
                color: #777!important;
                @include vendor-prefix( transition, color 250ms linear );
                
                &:link,
                &:focus,
                &:active{
                  color: #666!important;
                  text-decoration: none;
                }
                &:hover{
                  color: #2EBEA5!important;
                }
              }
            }    

        form#boxy-login-form{
          height: 4em!important;
          margin: 0!important;
          padding: 0!important;
          margin-left: 1em!important;

            .glyphicon{

                &.glyphicon-refresh{
                   
                    @include vendor-prefix( transition, all 250ms linear);

                  &:hover{
                    color: #F7F7F7;
                  }  
                } 
              } 

            fieldset{

              margin:0!important;
              padding:0!important;
            }

              .boxy-form-inner{
                  color: #ccc;
                  cursor: pointer;
                  font-family: 'Josefin Sans', sans-serif;
                  width: 30em;
                  height: 4em;
                  border: none;

                @include vendor-prefix( transition, all 0.85s cubic-bezier(.17,.67,.14,.93) );
                @include vendor-prefix( transform-style, preserve-3d );
                @include vendor-prefix( transform-origin, 50% 50% );

                &.rotated {
                  @include vendor-prefix( transform, rotateX(0deg) );
                }
                
                &.rotated90 {
                  @include vendor-prefix( transform, rotateX(90deg) );
                }

                &.rotated180 {
                  @include vendor-prefix( transform, rotateX(180deg) );
                }

                &.rotatedBack90 {
                  @include vendor-prefix( transform, rotateX(-90deg) );
                }

                &.rotatedBack180 {
                  @include vendor-prefix( transform, rotateX(-180deg) );
                }

                &.rotate3d{
                  @include vendor-prefix( transform, rotateY(90deg) );
                }

                &.rotateFirst3d{
                  @include vendor-prefix( transform, rotateY(-90deg) );
                }

                &.rotate360{
                  //animation-iteration-count:2;
                  @include vendor-prefix( transform, rotateX(360deg) );
                }

                .end-cap{
                  height: 4em;
                  width: 4em;
                  display: inline-block;
                  background-color: #F7F7F7!important;
                  position: absolute;
                  cursor: normal;
                  margin:0;
                  padding:20px auto;

                  @include vendor-prefix( border-radius, 2px );

                    &.left,
                    &.right {

                     
                       .tooltip{
                          margin-left: -1em!important;
                          margin-bottom: -1em!important;
                          margin-top: 1em!important;
                          }
                  
                      .glyphicon{

                        width: 100%!important;
                        @include vendor-prefix( transition, color  250ms linear);

                         &:hover{
                            color: #2EBEA5;
                          }

                        &.glyphicon-user,
                        &.glyphicon-remove-circle{
                            &:before{
                              display: block;
                              width: 1.3em;
                              height: 1.3em;
                              padding: 2em auto;
                              margin: 0.73em;
                              font-size: 22px;
                            }
                          }
                        }
                      @include vendor-prefix( transform, rotateY( 90deg ) translate3d(0, 0, 28em) );
                    }

                    &.right {
                      border: 2px solid #F9F9F9;
                      background: url('../img/loader.gif') 50% 50% no-repeat;
                      @include vendor-prefix( transform, rotateY( -90deg ) translate3d(0, 0, 2em) );

                      .tooltip{
                          margin-left: -0.73em!important;
                          margin-bottom: 2em!important;
                          margin-top: -2em!important;
                          }

                            .icon-success,
                            .icon-failure {
                                    display: none;
                                   }

                            &.boxy-success{

                                color: #2EBEA5!important;
                                background: #F7F7F7!important;

                                &:hover{
                                    color: #666!important;
                                  }
                                  .icon-success {
                                    display: block;
                                   }
                                  .icon-failure {
                                    display: none;
                                   }
                                }

                            &.boxy-failure{

                                color: #EA1F54!important;
                                background: #F7F7F7!important;

                                &:hover{
                                    color: #333!important;
                                  }

                                  .icon-success {
                                    display: none;
                                   }
                                  .icon-failure {
                                    display: block;
                                   }
                                }
                        }
                      }

                  

                .side{
                   background-color: #F7F7F7!important;
                    border:1px thin #ccc;
                    box-sizing: border-box;
                    position: absolute;
                    display: inline-block;
                    height: 4em;
                    width: 30em;
                    text-align: center;
                    text-transform: uppercase;

                  @include vendor-prefix( border-radius, 2px );

                  
                  .glyphicon{ 
                    &.glyphicon-check{}
                    &.glyphicon-user,
                    &.glyphicon-asterisk,
                    &.glyphicon-question-sign{
                      display: inline-block;
                      float: left;
                      height: 1em;
                      margin: 1.3em 1.2em;
                      color: #999;
                      background: transparent;

                      &.bad-resp{
                        color: #EA1F54;
                      }

                      &:after{
                        content: '|';
                        font-weight: 300;
                        font-size: 18px;
                        font-family: 'Josefin Sans', sans-serif;
                        float: right;
                        margin-right: -1.6em;
                        height: 2em;
                      }

                      @include vendor-prefix( transition, color  250ms linear);

                      &:hover{
                        color: #2EBEA5;
                      }
                    }
                  }

                  input{
                      background:transparent;
                      border: none;
                      margin: 0 0 0 -5px;
                      height: 4em;
                      width: 21em;
                      padding: 15px 15px 15px 35px; 
                      color: #666;
                      float: left;
                      font-size: 14px;
                      font-size-adjust: 3em;
                      font-weight: 700;
                      outline: none;
                    }

                  button{
                      background: transparent;
                      border:none;
                      margin: 0;
                      height: 4em;
                      width: 4em;
                      padding: 15px 5px;
                      float: right;
                      overflow: hidden!important;
                      color: #333;
                      opacity:.25;
                      outline:none;

                      @include vendor-prefix( transition, all 250ms linear );

                    &:before{
                      content: "\00BB";
                      font-size: 5em;
                      line-height: .4em;
                    }

                    &:hover{
                      opacity:1;
                      color:#2EBEA5;
                    }
                  }
  
                  input+button{}



                  &.front {
                    @include vendor-prefix(transform, translate3d(0, 0, 2em) );
                  }

                  &.bottom {
                   @include vendor-prefix(transform, rotateX(-90deg) translate3d(0, 0, 2em) );
                  }

                  &.top {
                   @include vendor-prefix(transform, rotateX(90deg) translate3d(0, 0, 2em) );
                  }

                  &.back {
                    
                    .glyphicon{
                      width: 4em;
                      height: 4em;
                      display: block;
                      position: absolute;
                      padding: 20px;
                      vertical-align: middle;
                      text-align: center;

                      @include vendor-prefix( transition, color 250ms linear );

                      &.boxy-checked{
                        display:block;
                        color: #2EBEA5;
                      }
                      &.boxy-unchecked{
                        display:none;
                      }
                    }

                    label{

                      max-width: 25em;
                      height: 4em;
                      width: 100%;
                      display: inline-block;
                      clear: both;
                      overflow: hidden;
                      padding-left: 3em;
                      margin-top: 20px;
                      text-align: left;
                      cursor: pointer;

                      @include vendor-prefix( user-select, none);

                      &:hover{
                          cursor:pointer;
                        }

                      input[type=checkbox]{
                        height: 4em;
                        width: 4em!important;
                        clear: both;
                        overflow: hidden;
                        display: none;

                        &:hover{
                            cursor:pointer;
                          }
                        }
                      }
                    
                    button{

                      width:4em;   
                      background: transparent;
                      border: none;
                      margin: 0;
                      height: 4em;
                      padding: 15px 5px;
                      float: right;
                      overflow: hidden;
                      color: #1B1B1B;
                      outline: none;

                      @include vendor-prefix( transition, all 250ms linear );

                      &:hover{
                        background-color: #2EBEA5!important;
                        color: #F7F7F7!important;
                        font-weight: 700;
                      }

                      &:first-of-type{
                        border-right: 1px solid #666;
                      }

                      &:last-of-type{
                        border-left: 1px solid #999;
                      }

                      &:before{
                        content:'';
                        display:none;
                      }
                    }
                    @include vendor-prefix(transform, rotateX(-180deg) translate3d(0, 0, 2em) );
                  }
                }
              }
            }
          }
View Compiled
$(function(){

'use strict';

// The following values are used to test as dummy data only so that
// we can fake a successful login…
var _boxyUsernameFakedValue = 'admin';
var _boxyPasswordFakedValue = '1234';

var _boxyWrap = document.getElementById('boxy-login-wrapper');
var _boxyLoginForm = document.forms['boxy-login-form'];
var _boxyFormInner = $(_boxyLoginForm).find('div.boxy-form-inner');

//var _boxySide = jQuery.makeArray( $(_boxyFormInner).find('span.side') );
var _boxySide = $(_boxyFormInner).find('span.side');
var	_boxySideA = _boxySide[0],
	_boxySideB = _boxySide[1],
	_boxySideC = _boxySide[2],
	_boxySideD = _boxySide[3];

var _boxyInput;
var _boxyPassword;
var _boxyEmail;

var _boxyButton = [ $(_boxySideA).find('button.boxy-button').attr('data-step','0'),
					$(_boxySideB).find('button.boxy-button').attr('data-step','1'),
					$(_boxySideC).find('button.boxy-button').attr('data-step','2'),
					$(_boxySideC).find('input[name=remember-me]'),
					$(_boxySideC).find('label[for=remember-me]'),
					$(_boxySideD).find('button.boxy-button').attr('data-step','9')
					];

var _boxyEndCaps = $(_boxyFormInner).find('span.end-cap');

var _boxyLeftCap = $(_boxyEndCaps[0]);
var _boxyRightCap = $(_boxyEndCaps[1]);

var _toLogin = _boxyLeftCap.find('.glyphicon-user'),
	_okLogin = _boxyRightCap.find('.icon-success'),
	_badLogin = _boxyRightCap.find('.icon-failure');

var _boxyButtonA = _boxyButton[0],
	_boxyButtonB = _boxyButton[1],
	_boxyButtonC = _boxyButton[2],
	_boxyButtonD = _boxyButton[5];

var _boxyButtonInput = _boxyButton[3],
	_boxyButtonCombined = _boxyButton[4],
	_boxyMessage = $(_boxyWrap).find('em.small-forgot'),
	_rememberMeOp = $('input#remember-me');

var _checked = $(_boxyWrap).find('span.boxy-checked'),
	_unchecked = $(_boxyWrap).find('span.boxy-unchecked'),
	_boxyRefreshButton = $(_boxyWrap).find('.boxy-refresh'),
	_boxyForgot = $(_boxyWrap).find('.boxy-forgot');



var _toolTipOps = {'placement' : 'top',
					'data-html' : true,
					'data-animation' : true,
					'selector' : '[data-toggle=tooltip]',
					'trigger' : 'hover',
					'delay' : { 'show': 250,
								'hide': 150 
							}
					};

// Inits Bootstrap Tooltips
$(_boxyWrap).tooltip( _toolTipOps );

/********************************************************/
/*	END OF GLOBAL    ************************************/
/*	VARIABLES…       ************************************/
/********************************************************/

// Handles "Remember me" checkbox icons
$(_rememberMeOp).on('change', function(){

	if( $(this).is(':checked') ){

		_checked.css('display','block');
		_unchecked.css('display','none');

	}else{

		_checked.css('display','none');
		_unchecked.css('display','block');
	}
	return false;
});



// Sets focus on next available input field
$(_boxyFormInner).on('keydown', '#boxy-input , #boxy-password', function(evt) { 
	  
	  var keyCode = evt.keyCode || evt.which; 

	  if (keyCode == 9) {
      evt.preventDefault(); 

	    $(this).next('button').click();

      $(this).parent().next('.side').find('input').focus();
	  } 
});


			
_okLogin.on('click',function(evt){
	evt.preventDefault();

	var _disableInputs = $(_boxyFormInner).find('input');

		_disableInputs.attr('disabled','disabled');

		$(_boxyFormInner).removeClass('rotated90');
		$(_boxyFormInner).removeClass('rotated180');
		$(_boxyFormInner).removeClass('rotatedBack90');
		$(_boxyFormInner).removeClass('rotatedBack180');
		$(_boxyFormInner).removeClass('rotate3d');

		if( $(_boxyWrap).hasClass('shake') ){ 
        $(_boxyWrap).removeClass('shake');
      }

		$(_boxyRefreshButton).fadeIn('slow');

	});


_badLogin.on('click',function(evt){
	evt.preventDefault();
	$(_boxyFormInner).removeClass('rotated90');
		$(_boxyFormInner).removeClass('rotated180');
		$(_boxyFormInner).removeClass('rotatedBack90');
		$(_boxyFormInner).removeClass('rotatedBack180');
		$(_boxyFormInner).removeClass('rotate3d');

		
  if( $(_boxyWrap).hasClass('shake') ){ 
        $(_boxyWrap).removeClass('shake');
      }
  
	$(_boxyFormInner).addClass('rotate360');

$(_boxyRefreshButton).click();
	});


$(_toLogin).on('click', function(evt){
		
		$(_boxyFormInner).removeClass('rotateFirst3d');
		$(this).next('.side').find('input').focus();
		//var _stepVal = Math.floor( $(this).attr('data-step') );
		evt.preventDefault();
		return false;
	});


	// Next -- Username field
	_boxyButtonA.on('click', function(evt){
		$(this).next('.side').find('input').focus();
		var _stepVal = Math.floor( $(this).attr('data-step') );
		evt.preventDefault();
		return validateForm(_stepVal);
	});

	// Next -- Password field
	_boxyButtonB.on('click', function(evt){
		var _stepVal = Math.floor( $(this).attr('data-step') );
		evt.preventDefault();
		return validateForm(_stepVal);
	});

	// OK button -- check login and submit
	_boxyButtonC.on('click', function(evt){
		var _stepVal = Math.floor( $(this).attr('data-step') );
		
		$(_boxyFormInner).addClass('rotate3d');

		evt.preventDefault();
		return validateForm(_stepVal);
	});

	_boxyButtonD.on('click', function(evt){
		var _stepVal = Math.floor( $(this).attr('data-step') );
		evt.preventDefault();
		return validateForm(_stepVal);
	});


function testLogin( _user, _pass ){

	var _boxyUser = _user;
	var _boxyPass = _pass;

	var _userValidateAgainst = _boxyUsernameFakedValue;
	var _passValidateAgainst = _boxyPasswordFakedValue;

	var _rightCap = $('.end-cap.right');
	var _leftCap = $('.end-cap.left');

		if ( ( _boxyUser !== _userValidateAgainst ) || ( _boxyPass !== _passValidateAgainst ) ){

			_rightCap.addClass('boxy-failure');
			$('.boxy-failure').find('.icon-failure').stop().fadeIn('slow');
		}


		if ( (_boxyUser === _userValidateAgainst) && (_boxyPass === _passValidateAgainst) ){
			
			_rightCap.addClass('boxy-success');
			$('.boxy-success').find('.icon-success').attr('title','logged in as, ' + _boxyUser );
			$('.boxy-success').find('.icon-success').stop().fadeIn('slow');

		}

}



function validateForm(_step){

	_boxyInput = document.forms['boxy-login-form']['username'];
	_boxyPassword = document.forms['boxy-login-form']['password'];
	_boxyEmail = document.forms['boxy-login-form']['email'];

	if( $(_boxyWrap).hasClass('shake') ){
				$(_boxyWrap).removeClass('shake');
			}

	switch(_step){
		case 0:
/****************************************************************************************/
	// Checks to make sure we are passing a value for the username field
	if( !_boxyInput.value ){
    
    if( $(_boxyWrap).hasClass('shake') ){ 
        $(_boxyWrap).removeClass('shake');
      }
				
			$(_boxyWrap).addClass('shake');
			$(_boxyMessage).fadeIn('slow');
			
			document.getElementsByName('username')[0].placeholder = 'enter your username to continue';
			
	}else if( _boxyInput.value ){

			$(_boxyLoginForm).find('.boxy-form-inner').addClass('rotated90');
			$(_boxyMessage).fadeOut('slow');
	}
/****************************************************************************************/
		break;
		case 1:
/****************************************************************************************/
	if( !_boxyPassword.value ){
				
    if( $(_boxyWrap).hasClass('shake') ){ 
        $(_boxyWrap).removeClass('shake');
      }
		$(_boxyWrap).addClass('shake');
		$(_boxyMessage).fadeIn('slow');
		$(_boxyRefreshButton).fadeIn('slow');
		document.getElementsByName('password')[0].placeholder = 'enter your password to continue';
			
	}else if( _boxyPassword.value ){
    
    if( $(_boxyWrap).hasClass('shake') ){ 
        $(_boxyWrap).removeClass('shake');
      }

		$(_boxyLoginForm).find('.boxy-form-inner').addClass('rotated180');
		$(_boxyMessage).fadeOut('slow');
	}
/****************************************************************************************/
		break;
		case 2:

		var _valUser = _boxyInput.value;
		var _valPass = _boxyPassword.value;

			testLogin( _valUser, _valPass );
		//console.log('testing login creds');

		break;
		case 9:
/****************************************************************************************/
	if( !_boxyEmail.value ){
    
      if( $(_boxyWrap).hasClass('shake') ){ 
        $(_boxyWrap).removeClass('shake');
      }
    
		$(_boxyWrap).addClass('shake');
		$(_boxyRefreshButton).fadeIn('slow');
				
		document.getElementsByName('email')[0].placeholder = 'enter your email for instructions';
			
	}else if( _boxyEmail.value ){
    
    if( $(_boxyWrap).hasClass('shake') ){ 
        $(_boxyWrap).removeClass('shake');
      }

		//$(_boxyRefreshButton).fadeOut('slow');
    $(_boxyLoginForm).find('.boxy-form-inner').addClass('rotated180');
		$(_boxyMessage).fadeOut('slow');
		$(_boxyRefreshButton).click();

	}
/****************************************************************************************/
		break;
	}
}


			$(_boxyRefreshButton).on('click',function(evt){

				if( $(this).hasClass('animate-refresh') ){
							$(this).removeClass('animate-refresh');
						}

				var _usernameInput = document.getElementsByName('username')[0];
				var _passwordInput = document.getElementsByName('password')[0];
				var _emailInput = document.getElementsByName('email')[0];


				_boxyEndCaps.removeClass('boxy-failure').removeClass('boxy-success');
						
					$(this).addClass('animate-refresh');
				
					_usernameInput.placeholder = 'username';
					_passwordInput.placeholder = 'password';
					_emailInput.placeholder = 'email';

					_usernameInput.value = '';
					_passwordInput.value = '';
					_emailInput.value = '';
				
					$(_boxyFormInner).removeClass('rotated90');
					$(_boxyFormInner).removeClass('rotated180');
					$(_boxyFormInner).removeClass('rotatedBack90');
					$(_boxyFormInner).removeClass('rotatedBack180');
					$(_boxyFormInner).removeClass('rotate3d');

					if( $(_boxyWrap).hasClass('shake') ){ 
                  $(_boxyWrap).removeClass('shake');
                }
					
					$(_boxyMessage).fadeOut('slow');
					$(_boxyRefreshButton).fadeOut('slow');

				var _disableInputs = $(_boxyFormInner).find('input');
					_disableInputs.removeAttr('disabled');

					evt.preventDefault();
				});

$(_boxyForgot).on('click',function(evt){
				evt.preventDefault();

				$(_boxyMessage).fadeOut('slow');
				$(_boxyRefreshButton).fadeOut('slow');
				$(_boxyFormInner).addClass('rotatedBack90');

			});	

});


$('.glyphicon-user, .glyphicon-asterisk, .glyphicon-question-sign').on('click',function(evt){
			evt.preventDefault();		
			var _setFocusInput = $(this).parent().find('input');

			return _setFocusInput.focus();	
			});

External CSS

  1. https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css
  2. https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
  2. https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js
  3. https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/4.2.0/bootbox.min.js
  4. https://s3-us-west-2.amazonaws.com/s.cdpn.io/1251/bootstrap.glyphs.js