JSFiddle - React, Tailwind, and code Playground

Email verification prototype

by tonytlwu

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css">
  <div class="well well-lg text-center text-muted hidden">
    User content (optional)
  </div>
  <div class="well" id="myForm" data-state="login">
    <div class="text-center">
      <p><img src="https://placehold.it/400x150?text=Logo" class="img-rounded" /></p>
      <p>&nbsp;</p>
      <h2>Company News<br><small>Please log in with your <strong>fliplet.com</strong> email to access the <em>Company News</em> app.</small></h2>
      <p>&nbsp;</p>
    </div>
    <form id="loginForm" class="form-horizontal">
      <div class="form-group form-group-lg">
        <label for="inputText3" class="col-sm-6 control-label">Name</label>
        <div class="col-sm-6">
          <input type="text" class="form-control" id="inputText3">
        </div>
      </div>
      <div class="form-group form-group-lg" id="regexSuccess">
        <label for="inputEmail3" class="col-sm-6 control-label">Email address</label>
        <div class="col-sm-6">
          <input type="email" class="form-control" id="inputEmail3">
        </div>
      </div>
      <div class="form-group form-group-lg has-error" id="regexError">
        <label for="inputEmail4" class="col-sm-6 control-label">Email address</label>
        <div class="col-sm-6">
          <input type="email" class="form-control" id="inputEmail4">
          <p class="error text-danger">The email address you provided is invalid. Please make sure you enter a <strong>*@fliplet.com</strong> email address.</p>
        </div>
      </div>
      <div class="form-group">
        <div class="hidden-xs col-sm-offset-6 col-sm-6">
          <button type="submit" class="btn btn-lg btn-primary">Log in</button>
        </div>
        <div class="visible-xs-block col-xs-12">
          <button type="submit" class="btn btn-lg btn-block btn-primary">Log in</button>
        </div>
      </div>
    </form>

    <form id="verifyForm"...

CSS

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

img {
  max-width: 100%;
  height: auto;
}

#loginForm,
#verifyForm,
#successContent,
#errorContent,
#regexError,
#myForm[data-state="regexError"] #regexSuccess {
  display: none;
}

#myForm[data-state="login"] #loginForm,
#myForm[data-state="verify"] #verifyForm,
#myForm[data-state="success"] #successContent,
#myForm[data-state="error"] #errorContent,
#myForm[data-state="regexError"] #loginForm,
#myForm[data-state="regexError"] #regexError{
  display: block;
}

JavaScript

var verifySuccess = true;

$.fn.changeState = function(newState){
	$(this).attr('data-state',newState);
  return this;
};

$('#loginForm').on('submit',function(){
	var $loginForm = $(this);
	var $myForm = $('#myForm');
	var $verifyForm = $('#verifyForm');
  
  var email = ($('#myForm').attr('data-state') === 'login') ? $('#inputEmail3').val() : $('#inputEmail4').val() ;
  var regexSuccess = /@fliplet.com\s*$/.test(email);
  
  if ( regexSuccess ) {
    $verifyForm.trigger('reset');
    $myForm.changeState('verify');
    $('.user-email').html(email);
  } else {
    $('#inputEmail4').val( $('#inputEmail3').val() );
    $myForm.changeState('regexError');
  }
  return false;
});

$('#verifyForm').on('submit',function(){
	var $verifyForm = $(this);
	var $myForm = $('#myForm');
	var $loginForm = $('#loginForm');
  
  var code = $('#textinput06').val();
  
  if ( code === '123456' ) $myForm.changeState('success'); else $myForm.changeState('error');
  return false;
});

$('#new-code').on('click',function(){
	var $myForm = $('#myForm');
  $('#loginForm').trigger('reset');
  $myForm.changeState('login');
  return false;
});

$('.try-again').on('click',function(){
	var $myForm = $('#myForm');
  $('#verifyForm').trigger('reset');
  $myForm.changeState('verify');
  return false;
});