JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://crypto-js.googlecode.com/svn/tags/3.1.2/build/rollups/hmac-sha512.js"></script>
Hostname
<br/>
<input type="text" id="idhostname" />Login
<input type="text" id="idlogin" />Master Password
<input type="password" id="idkey" name="key" value="blah" />PIN
<input type="number" id="idpin" min="0" max="999999" value="1234" />
<input type="submit" id="submit" name="submit" value="go" />Derived password
<br/>
<span id="pwd"></span>

JavaScript

$('#idhostname').val(window.location.hostname);

function maybe_derive(hn, key) {
    var h = CryptoJS.HmacSHA512(hn, key);
    var s = "";

    for (var i = 0; i < 64; ++i) {
        x = 33 + ((h.words[i >> 2] >> (i & 3)) & 127);
        if (x <= 126) s += String.fromCharCode(x);

    }

    if (s.length < 12) return "";
    s = s.substring(0, 12);
    if (
    (s.search(/[a-z]/) < 0) || (s.search(/[A-Z]/) < 0) || (s.search(/[0-9]/) < 0) || (s.search(/[^a-zA-Z0-9]/) < 0)) return "";
    return s;
}

function derive_pwd(b, key) {
    for (i = 0; i < 1000000000; ++i) {
        var s = maybe_derive(b + i, key);
        if (s) return s;
    }
}

$('#submit').click(function () {
    var hn = $('#idhostname').val();
    var pin = $('#idpin').val();
    var login = $('#idlogin').val();
    var key = $("#idkey").val();
    var pp = derive_pwd(hn + login + pin, key);
    $('#pwd').text(pp);
});