Secure Messaging

Send encrypted messages with PubNub

HTML

<script src="http://cdn.pubnub.com/pubnub.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://rawgit.com/lw7360/babel/gh-pages/js/libs/cryptico.js"></script>
<div class="jumbotron">
     <h1>Encrypted Messaging with PubNub</h1> 
    <br>
    <div class="input-group"> <span class="input-group-addon">Username</span>

        <input id="username" type="text" class="form-control" placeholder="'doge'"> <span class="input-group-btn">
            <button id="login" type="button" class="btn btn-primary">Login</button>
            </span>

    </div>
</div>
<div class="container">
    <div class="row">
        <div class="col-sm-4">
             <h3>Send a Message</h3>

             <h5>Select a user to encrypt with their public key.</h5>

            <select id="users" class="form-control">
                <option select>Don't encrypt messages.</option>
            </select>
            <hr>
            <div class="input-group">
                <input id="input" type="text" class="form-control" placeholder="Type your message here."> <span class="input-group-btn">
        <button id="send" class="btn btn-default" type="button">Send</button>
      </span>

            </div>
        </div>
        <div class="col-sm-4">
             <h3>Messages</h3>

            <div class="table-responsive">
                <table class="table table-hover">
                    <thead>
                        <tr>
                            <th>Sender</th>
                            <th>Recipient</th>
                            <th>Message</th>
                        </tr>
                    </thead>
                    <tbody id="encrypted-messages"></tbody>
                </table>
            </div>
        </div>
        <div class="col-sm-4">
             <h3>Decrypted Messages</h3>

            <div class="table-responsive">
                <table class="table table-hover">
                  ...

CSS

.table-responsive {
    max-height: 500px;
    overflow: auto;
}

JavaScript

$("#login").click(function () {
    var selected = $("#users").val();
    if ($("#username").val().length > 0) {
        $("#login").attr("disabled", "disabled");
        $("#username").attr("disabled", "disabled");

        var username = $("#username").val();

        var users = {};

        var presenceChange = function () {
            selected = $("#users").val();
            $("#users").empty();
            var options = "<option>Don't encrypt messages.</option>";
            for (var user in users) {
                if (user === username) {
                    options += '<option disabled>' + user + '</option>';
                } else {
                    options += '<option>' + user + '</option>';
                }
            }
            $("#users").append(options);
            $("#users").val(selected);
        };

        var presenceHandler = function (msg) {
            if (msg.action === "join" || msg.action === "state-change") {
                if ("data" in msg) {
                    users[msg.data.username] = msg.data.publicKey;
                } else {
                    pubnub.here_now({
                        channel: 'encrypted_messaging',
                        state: true,
                        callback: herenowUpdate
                    });
                }
                presenceChange();
            } else if (msg.action === "timeout" || msg.action === "leave") {
                delete users[msg.uuid];
                presenceChange();
            } else {

                pubnub.here_now({
                    channel: 'encrypted_messaging',
                    state: true,
                    callback: herenowUpdate
                });
            }
        };

        var pubnub = PUBNUB.init({
            publish_key: 'demo',
            subscribe_key: 'demo',
            uuid: username,
            ssl: username
        });

        var RSAkey = cryptico.generateRSAKey(1024);
        var publicKey =...