JSFiddle - React, Tailwind, and code Playground

Passcode Fliplet

by Hugo Carneiro

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css">
<div class="container-fluid">
  <div class="row">
    <div class="content-wrapper col-xs-12 col-sm-6 col-sm-offset-3">
      <div class="passcode-wrapper">
        <div class="state animated" data-state="setup">
          <h1>Set up a Passcode</h1>
          <input type="tel" id="num-setup" class="passcode-field" placeholder="Tap to enter passcode" />
          <p>To protect your data and unlock your app you will need to set up a 4-digit passcode</p>
          <p class="text-danger">Passcodes did not match. Please try again.</p>
        </div>
        <div class="state animated" data-state="verify">
          <h1>Verify your Passcode</h1>
          <input type="tel" id="num-verify" class="passcode-field" placeholder="Tap to re-enter passcode" />
          <p>To protect your data and unlock your app you will need to set up a 4-digit passcode</p>
        </div>
        <div class="state animated" data-state="touchID">
          <h1>Unlock via Touch ID</h1>
          <p>You can use Touch ID to unlock your app in the future.</p>
          <button class="btn btn-primary" id="continue">Continue</button>
        </div>
        <div class="state animated" data-state="unlock">
          <h1>Unlock your app</h1>
          <input type="tel" id="num-unlock" class="passcode-field" placeholder="Tap to enter passcode" />
          <p>Enter your passcode to unlock your app.</p>
          <p class="text-danger">Incorrect passcode. Please try again.</p>
          <p><a href="#" class="btn btn-link btn-sm forgot-passcode">Forgot your passcode?</a></p>
        </div>
      </div>
    </div>
  </div>
</div>

CSS

body {
  font-size: 16px;
  font-family: Helvetica;
}

.passcode-wrapper .state {
  text-align: center;
  display: none;
}

.passcode-wrapper .passcode-field {
  width: 100%;
  text-align: center;
  margin: 50px 0 20px 0;
  border: none;
  border-bottom: 3px solid #1C90F3;
  border-radius: 0;
  padding: 10px 0;
  font-size: 30px;
  font-height: 30px;
  letter-spacing: 30px;
  -webkit-appearance: none;
  -webkit-text-security: disc;
  -moz-text-security: disc;
  text-security: disc;
}

.passcode-wrapper .passcode-field:focus {
  outline: none;
}

.passcode-wrapper .passcode-field:placeholder-shown {
  letter-spacing: 0;
}

.passcode-wrapper .passcode-field::-webkit-input-placeholder {
  color: #C2C2C2 !important;
  font-size: 20px;
}

.passcode-wrapper .passcode-field:-moz-placeholder {
  color: #F5F5F5 !important;
  font-size: 20px;
}

.passcode-wrapper .passcode-field::-moz-placeholder {
  color: #F5F5F5 !important;
  font-size: 20px;
}

.passcode-wrapper .passcode-field:-ms-input-placeholder {
  color: #F5F5F5 !important;
  font-size: 20px;
}

.passcode-wrapper .passcode-field:focus::-webkit-input-placeholder {
  color: transparent !important;
}

.passcode-wrapper .passcode-field:focus:-moz-placeholder {
  color: transparent !important;
}

.passcode-wrapper .passcode-field:focus::-moz-placeholder {
  color: transparent !important;
}

.passcode-wrapper .passcode-field:focus:-ms-input-placeholder {
  color: transparent !important;
}

.passcode-wrapper .state .text-danger {
  display: none;
}

.passcode-wrapper .state.error .text-danger {
  display: block;
}


</style> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <style>

JavaScript

$('.state[data-state=unlock]').addClass('show fadeIn');

var passcode = '';
passcode = "1234";

$('#num-setup').on('change keyup paste input', function() {

  var str = $(this).val();

  str = str.toLowerCase().replace(/[^0-9]+/g, "").substr(0, 4);
  $(this).val(str);

  if (str.length >= 4) {
    passcode = str;
    if ( $('.state[data-state=setup]').hasClass('error') ) {
    	$('.state[data-state=setup]').removeClass('show fadeIn error');
    } else {
    	$('.state[data-state=setup]').removeClass('show fadeIn');
    }
    $('.state[data-state=verify]').addClass('show fadeIn');
    $('.state[data-state=verify]').find('input').focus();
    $(this).val('');
    $(this).blur();
  }

}).trigger('change');;

$('#num-verify').on('change keyup paste input', function() {

  var str = $(this).val();

  str = str.toLowerCase().replace(/[^0-9]+/g, "").substr(0, 4);
  $(this).val(str);

  if (str.length >= 4) {
    if (str === passcode) {
      $('.state[data-state=verify]').removeClass('show fadeIn');
      $('.state[data-state=touchID]').addClass('show fadeIn');
      $(this).val('');
    	$('.state[data-state=touchID]').find('input').focus();
    } else {
			$('.state[data-state=verify]').removeClass('show fadeIn');
      $('.state[data-state=setup]').addClass('show fadeIn error')
      $('.state[data-state=setup]').find('input').focus();
    }
    $(this).val('');
    $(this).blur();
  }

}).trigger('change');;

$('#num-unlock').on('change keyup paste input', function() {

  var str = $(this).val();

  str = str.toLowerCase().replace(/[^0-9]+/g, "").substr(0, 4);
  $(this).val(str);

  if (str.length >= 4) {
    if (str === passcode) {
      alert('Correct passcode entered.\n\nTher user will then be taken to start using the app.');
      $('.state[data-state=unlock]').removeClass('show fadeIn');
      $(this).val('');
      $('.state[data-state=setup]').addClass('show fadeIn');
    	$('.state[data-state=setup]').find('input').focus();
    } else {
     ...