index.html

<!doctype html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>scrypt-async-js demo</title>
  <style>
    html,
    body {
      font-family: sans-serif;
    }

    #out {
      margin-top: 10px;
      padding: 10px 5px;
      color: #444;
      line-height: 1.5;
    }

    #out small {
      padding: 5px;
      background-color: #eee;
    }

    #N {
      margin-left: 10px;
      color: #aaa;
    }
  </style>
</head>

<body>
  <h1><a href="https://github.com/dchest/scrypt-async-js">scrypt-async-js</a> demo</h1>
  <form onsubmit="calculate(); return false">
    <p>
      <label for="password">Password:</label>
      <input id="password" name="password" type="text" value="password" size="32">
    </p>
    <p>
      <label for="salt">Salt:</label>
      <input id="salt" name="salt" type="text" value="salt" size="32">
    </p>
    <p>
      <label for="interruptStep">interruptStep:</label>
      <input id="interruptStep" name="interruptStep" type="text" value="0" size="8">
    </p>
    <p>
      <label for="logN">logN:</label>
      <input id="logN" name="logN" type="text" value="11" size="4"
         onkeypress="updateN()" onkeyup="updateN()"
         onblur="updateN()" onchange="updateN()" >
      <span id="N">
    </p>
    <p>
      <label for="r">r:</label>
      <input id="r" name="r" type="text" value="8" size="4">
    </p>
    <p>
      <label for="p">p:</label>
      <input id="p" name="p" type="text" value="1" size="4">
    </p>
    <p>
      <label for="encoding">Encoding:</label>
      <select id="encoding" name="encoding">
        <option value="hex" selected>hex</option>
        <option value="base64">base64</option>
        <option value="binary">binary</option>
      </select>
    </p>
    <input type="submit" name="btn" value="Calculate" />
</form>
<div id="out"></div>

<script src="scrypt-async.js"></script>
<script>
var f = document.forms[0];

function updateN() {
  var fN = document.querySelector('#N');
  var logN = f.logN.value;
  fN.innerHTML = 'N = ' + Math.pow(2, logN);
}

var getTime = (function () {
    if (typeof performance !== "undefined") {
        return performance.now.bind(performance);
    }
    return Date.now.bind(Date);
})();

function calculate() {

  var btn = f.btn;
  var out = document.querySelector('#out');

  var password = f.password.value;
  var salt = f.salt.value;
  var interruptStep = f.interruptStep.value;
  var logN = f.logN.value;
  var r = f.r.value;
  var p = f.p.value;
  var encoding = f.encoding.value;

  btn.disabled = true;
  btn.value = 'Wait...';

  window.setTimeout(function() {
    try {
      var t1 = getTime();
      scrypt(password, salt, {
          logN: logN,
          r: r,
          p: p,
          dkLen: 32,
          interruptStep: interruptStep,
          encoding: encoding
      },
      function(res) {
        var t2 = getTime() - t1;
        out.innerHTML = 'Time: <b>'+t2+' ms</b><br>Result: <small>' + res + '</small>';
        btn.disabled = false;
        btn.value = 'Calculate';
      });
    } catch(ex) {
        out.innerHTML = '<span style="color:red">error: ' + ex.message + '</span>'; btn.disabled = false; btn.value = 'Calculate';
      } }); } updateN();
      </script>
</body>

</html>