<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <form class="form-inline">
        <div class="form-group">
          <label for="inp-email">Email</label>
          <input type="email" class="form-control" id="inp-email" placeholder="jane.doe@example.com">
        </div>
        <button type="submit" class="btn btn-default" id="btn-check">Check Email</button>
      </form>
    </div>
  </div>
  <div class="row">
    <div class="col-xs-12">
      <div class="alert" id="result" role="alert"></div>
    </div>    
  </div>
  <div class="row">
    <div class="col-xs-12">
      <ul class="list-group" id="history">
      </ul>      
    </div>
  </div>
</div>

body {
  padding-top:20px;
}

var checker = new EmailChecker();

function showLeak(text) {
  var $res = $('#result');
  $res.removeClass('alert-success').addClass('alert-danger').html('Your Email has leaked to: ' + text);  
}

function showSafe() {
  var $res = $('#result');
  $res.removeClass('alert-danger').addClass('alert-success').html('Your Email is safe');    
}

function addToHistory(email, status) {
  var cls = "list-group-item ";
  
  if ( status === "safe" ) {
    cls += "list-group-item-success";
  } else {
    cls += "list-group-item-danger";
  }
  $('#history').append('<li class="' + cls + '">' + email + '</li>');
}

$('#btn-check').on('click', function() {
  var email = $('#inp-email').val();
  checker.checkEmail(email).then(function(res) {
    showLeak(res);
    addToHistory(email);
  }, function() {
    showSafe();
    addToHistory(email, "safe");
  });
  
  return false;
});

$('#history').on('click', '.list-group-item', function() {
  var $el = $(this);
  var email = $el.html();
  $('#inp-email').val(email);
});


function EmailChecker() {
  this.history = [];
}

EmailChecker.prototype.checkEmail = function(email) {
  var url = 'https://haveibeenpwned.com/api/v2/pasteaccount/' + email;
  this.history.push(email);
  
  return new Promise(function(resolve, reject) {
    $.get(url, function(res) {
      if ( res ) {
        resolve(res[0].Source + ": " + res[0].Id);
      } else {
        resolve();
      }
    }).fail(reject);
  })
}