Vault.js

Function to lock secret tokens with a key, so the only way to access them is using the key they were locked with.

by Greg Bowler

HTML

<h1>Vault.js</h1>

<div id="vault">
    <p class="count">
        There are 
        <span id="tokenCount">0</span>
        tokens locked in the vault.
    </p>
    <p class="description">
        Drag tokens here to lock them in the vault.
        <br>
        Drag keys here to obtain their locked token.
    </p>
    <p class="output">
    </p>
</div>

<div id="tokens">
    <h2>Unlocked Tokens</h2>
    <ul>
    </ul>
    
    <input type="text" id="tb_token"
        placeholder="Secret token data">
    <button id="btn_addToken">Add token</button>
</div>

<div id="keys">
    <h2>Keys</h2>
    <ul>
    </ul>
</div>

CSS

* {
    font-family: Verdana, sans-serif;
    font-size: 10px;
}
h1 {
    background-color: #3d668f;
    color: #fff;
    padding: 4px;
    font-size: 14px;
}
h2 {
    font-weight: bold;
    font-size: 14px;
}
div#vault {
    background-color: #efefef;
    padding: 4px;
    border: 2px solid #3d668f;
}
div#vault.over_tokens {
    border-color: #f00;
}
div#vault.over_keys {
    border-color: #0f0;
}

p.description {
    margin-top: 8px;
}

p.output {
    font-size: 14px;
    background: #ff0;
}

div#tokens, div#keys {
    margin-top: 16px;
    border: 2px solid #3d668f;
    padding: 4px;
}

ul li {
    display: inline-block;
    padding: 8px;
    border: 1px solid #3d668f;
    background-color: #efefef;
    cursor: pointer;
}

JavaScript

/*

Use the vault to store tokens - store any data in the
program that should be totally inaccessable from
anywhere else in the program. To obtain the token,
you must unlock with the corresponding key.

*/

var Vault = function() {
    var keys = [], tokens = [];
    return {
        lock: function(token) {
            var i = keys.length,
                key = {};
            keys[i] = key;
            tokens[i] = token;
            return key;
        },
        unlock: function(key) {
            // Todo: Slice the key out of the array,
            // return sliced object (I think that's what
            // array slicing returns).
            return tokens[keys.indexOf(key)];
        }
    };
};

// Initialise vault (so we can have multiple vaults if needed).
var thisVault = new Vault();
var keys = [];

$("div#vault").droppable({
    accept: "li",
    greedy: true,
    over: function(event, ui) {
        var id = ui.helper[0]
            .parentElement.parentElement.id;
        $(event.target).addClass("over_" + id);
    },
    out: function(event, ui) {
        var targetObj = $(event.target);
        targetObj.removeClass("over_tokens");
        targetObj.removeClass("over_keys");
    },
    drop: function(event, ui) {
        var targetObj = $(event.target);
        targetObj.removeClass("over_tokens");
        targetObj.removeClass("over_keys");
        
        var srcObj = $(ui.helper);
        var text = srcObj.text();
        
        var id = ui.helper[0]
            .parentElement.parentElement.id;
        if(id == "tokens") {
            var key = thisVault.lock(text);
            keys.push(key);
            $("p.output").text(
                "Token is locked with key "
                + keys.length);
            $("p.output").show().delay(2000)
                .slideUp(250);
            
            var newKeyEl = $("<li>", {
                id: "key-" + keys.length,
                text: "Key " + keys.length
            });
           ...