JSFiddle - React, Tailwind, and code Playground

Passcode lock

by tonytlwu

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css">
<div class="container-fluid">
  <div class="row">
    <div class="col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2 col-lg-6 col-lg-offset-3">

      <div id="container" class="well well-lg text-center">
        <div class="state" data-state="start">
          <h3>Welcome</h3>
          <p>Please sign in to Salesforce to start using your app.</p>
          <input class="form-control input-lg" placeholder="Email (enter anything)" required type="text" />
          <br>
          <input class="form-control input-lg" placeholder="Password (enter anything)" required type="password" />
          <br>
          <p><a id="start-app" class="btn btn-primary btn-lg" href="#">Log in</a></p>
        </div>
        <div class="state" data-state="default">
          <h3>Set up a passcode</h3>
          <input type="tel" id="num" placeholder="Tap to enter passcode" />
          <p><small>This app requires a 4-digit passcode to protect your data and to unlock your app.</small></p>
        </div>
        <div class="state" data-state="default-error">
          <h3>Set up a passcode</h3>
          <input type="tel" id="num-error" placeholder="Tap to enter passcode" />
          <p><small class="text-muted">This app requires a 4-digit passcode to protect your data and to unlock your app.</small></p>
          <p class="text-danger"><small>Passcodes don't match. Please try again.</small></p>
        </div>
        <div class="state" data-state="login">
          <h3>Unlock your app</h3>
          <input type="tel" id="login" placeholder="Tap to enter passcode" />
          <p><small class="text-muted">Enter passcode to unlock your app.</small></p>
          <p><a href="#" class="btn btn-link btn-sm forgot-passcode">Forgot your passcode?</a></p>
        </div>
        <div class="state" data-state="login-error">
          <h3>Unlock your app</h3>
          <input...

CSS

body {
  margin: 10px;
  background: #333;
}

.state {
  display: none;
  padding: 60px 0 80px;
}

#num,
#num-error,
#verify,
#login,
#login-error {
  -webkit-appearance: none;
  border-radius: 0;
  width: 200px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  font-size: 14px;
  font-family: monospace;
  padding: 0;
  border: none;
  background: none;
  border-bottom: 1px solid #000;
  display: block;
  margin: 10px auto 10px;
}

#num:focus,
#num-error:focus,
#verify:focus,
#login:focus,
#login-error:focus {
  outline: none;
}

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

JavaScript

$.fn.state = function(newState) {
  $(this).attr('data-state', newState);
  $(this).find('.state').hide().filter('[data-state="' + newState + '"]').show();
  return this;
};

$('input').on('touchstart',function(){
	$(this).focus();
});

var $container = $('#container');
$container.state('default');
$('.state[data-state=default]').find('input').focus().trigger('touchstart');

var passcode = '';

$('#start-app').on('click', function() {
  $container.state('default');
  $('.state[data-state=default]').find('input').focus();
  return false;
});

$('#num,#num-error').on('keyup', function(e) {
alert(e.type);

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

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

  if (str.length >= 4) {
    passcode = str;
    $container.state('verify')
    $(this).val('');
    $('.state[data-state=verify]').find('input').trigger('touchstart');
  }

}).trigger('change');

$('#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) {
      $container.state('touch-id');
    } else {
      $container.state('default-error')
      $('.state[data-state=default-error]').find('input').trigger('touchstart');
    }
    $(this).val('');
    $(this).blur();
  }

}).trigger('change');

$('#continue').on('click', function() {
  alert("The user will then be taken to start using the app.");
  alert("You will now be shown how the interface would look when the user returns to the app later.");
  $container.state('login');
  $('.state[data-state=login]').find('input').trigger('touchstart');
  return false;
});

$('#login,#login-error').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...