Mushpup Prototype

Version 3

by klenwell

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.2/rollups/sha1.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.2/components/enc-base64.js"></script>
<script src="https://0d75b36361da39600f71e85fc8acc95afbee0f64.googledrive.com/host/0BzCx3xYsDFuyYU5ZNG9Fb0lVVVU/mushpup/mushpup.js"></script>
<script src="//fonts.googleapis.com/css?family=Inconsolata:400,700"></script>
<form role="form">
  <fieldset id="locus-pocus">
    <div class="form-group">
      <input type="text" id="locus" class="form-control"
        placeholder="site (e.g. yahoo.com)" />
      <p class="hidden warn warn-site"></p>
    </div>
    <div class="form-group">
      <input type="password" id="pocus" class="form-control"
        placeholder="mushpup secret word" />
      <p class="hidden warn warn-site"></p>
    </div>
  </fieldset>
  <button type="submit" id="mush" class="btn btn-default">mush</button>
</form>

<panel id="hash">
  <div id="warnings"></div>
  <div id="payload">
    <div id="upper-ruler"></div>
    <div id="hash-row"></div>
    <div id="lower-ruler"></div>
  </div>
</panel>

CSS

panel#hash { 
  display: none; 
  margin-top: 8px;
  width: 100%;
}
panel#hash div#payload {
  margin: 0 auto;
  width: 100%;
  background-color: #eee;
  text-align: center;
}
panel#hash div#hash-row {
  margin: 0 auto;
  width: 100%;
  background-color: #eee;
  text-align: center;
}
panel#hash span.c {
  text-align: center;
  padding:0px 2px;
  font-family: Inconsolata,"Lucida Console",Monaco,monospace;
  font-size: 24px;
  background-color: #fff;
}
panel#hash div span.c.ruler {
  font-size: 13px;
  background-color: #ccc;
  padding: 5px;
}

JavaScript

function generateHash() {
  var locus = $('input#locus').val().trim();
  var pocus = $('input#pocus').val().trim();
  return Mushpup.mush(locus, pocus);
}

function updateHash(hashCode) {
  var $tHashRow = $('div#hash-row');
  $tHashRow.empty();
    
  jQuery.each(hashCode.split(''), function(n, letter) {
    var $letterSpan = $('<span />').addClass('c').text(letter); 
    $tHashRow.append($letterSpan);
  });
}

function validateInput() {
  var $warnings = $('#warnings');
  var site = $('input#locus').val().trim();
  var msw = $('input#pocus').val().trim();
    
  // Clear any warning
  $warnings.empty();
  
  // Add any new warnings
  var addWarning = function(message, style) {
    style = (! style) ? 'warning' : style;
    var alertClass = 'alert alert-dismissible alert-' + style;
    var $button = $([
      '<button type="button" class="close" data-dismiss="alert">',
      '<span aria-hidden="true">&times;</span>',
      '<span class="sr-only">Close</span>',
      '</button>'].join('\n'));
    var $messageSpan = $('<span />').text(message);
    var $alert = $('<div role="alert" />')
      .addClass(alertClass)
      .append($button)
      .append($messageSpan);
    $warnings.append($alert);
  }
  
  if ( ! site ) {
    addWarning('Site field was empty');
  }
  
  if ( ! msw ) {
    addWarning('Mushpup Secret Word field was empty')
  }
}

// Setup hash panel
(function() {
  var upperRuler = '>***5****0****5****0***>',
      lowerRuler = '<***0****5****0****5***<';
  
  jQuery.each(upperRuler.split(''), function(n, letter) {
    var $upperSpan = $('<span />').addClass('c ruler').html(upperRuler[n].replace('*', '&bull;'));
    var $lowerSpan = $('<span />').addClass('c ruler').html(lowerRuler[n].replace('*', '&bull;'));
    $('div#upper-ruler').append($upperSpan);
    $('div#lower-ruler').append($lowerSpan);
  });
})();

// Setup button handler
(function() {
  $('#mush').data('form-open', true);
  
  $('#mush').on('click', function() {
    // Toggle state
    var...