Untitled

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vert.X</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <link rel="stylesheet" type="text/css" href="css/component.css" />

    <!--[if IE]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
</head>
<body>
    <div class="container">
        <header class="clearfix">

            <a href="" class="navbar-brand"><img alt="Brand" width="162" src="img/logo-sm.png"></a>

        </header>
        <div id="tabs" class="tabs">
            <nav>
                <ul>
                    <li><a href="#section-1" class="login"><span>Login</span></a></li>
                    <li><a id="register-btn" href="#section-2" class="Register"><span>Register</span></a></li>
                    <li><a href="#section-3" class="Chat"><span>Chat</span></a></li>

                </ul>
            </nav>

            <div class="content">
                <section id="section-1">

                    <div class="mediabox">
                        <h4>Login</h4>
                        <input class="form-control" type="text" name="loginUserName" placeholder="User Name">
                        <input class="form-control" type="password" name="loginPassword" placeholder="Password">
                        <input class="btn" type="button" id="signIn" value="Submit">
                        <p><a href="#section-2" id="register-link" role="tab" data-toggle="tab" style=" color: #782b90;"> click here to register</a></p>
                        <div class="power">
                            <span>Powered by Vert.x</span><img width="162" src="img/logo-sm.png ">
                        </div>
                    </div>

                </section>
                <section id="section-2">
                    <div class="mediabox">
                        <h4>Register</h4>
                        <form class="form">
                            <input class="form-control" type="text" name="registerUserName" placeholder="User Name">
                            <input class="form-control" type="text" name="registerEmail" placeholder="Email">

                            <input class="form-control" type="password" name="registerPassword" placeholder="Password">
                            <input class="form-control" type="password" placeholder="Confirm Password">

                            <input class="btn" type="button" id="send-register" value="Submit">
                        </form>
                        <div class="power">
                            <span>Powered by Vert.x</span><img width="162" src="img/logo-sm.png ">
                        </div>
                    </div>

                </section>
                <section id="section-3" class="hidden" style="padding-left:0em;">
                    <div class="chatbox" style=" ">
                        <div class="container-fluid">
                            <div class="row">
                                <div class="col-md-2 col-xs-4 col-sm-2" id="usersOnlineContainer" style="border-right:1px solid #782b90; height:550px; padding-left:0px; padding-right:0px;overflow:auto;">
                                    Online users<br/>
                                </div>
                                <div class="col-md-10 col-xs-8 col-sm-10" style="padding-left:0em;">

                                    <div class="container-fluid">
                                        <div class="row">
                                            <div class="col-md-12 col-sm-12 col-xs-12" style="margin-left:8px; margin-top:10px; padding-left:0px; padding-right:0px;overflow:scroll;display:block;height:550px;width:855px;  ">
                                                <table class="table table-bordered" id="chatHistoryTable"></table>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="container-fluid">
                                        <div class="row">
                                            <div class="col-md-12">
                                                <form class="form" style="margin-bottom:20px;">
                                                    <div class="input-group">
                                                        <input type="text" id="msg" class="form-control input-lg" aria-describedby="send-addon" required autofocus>
                                                        <span style="color:#fff;background-color: #782b90; border-color: #782b90;" class="btn input-group-addon input-lg" id="send-addon">Send</span>
                                                    </div>
                                                </form>

                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="chatpower" id="poweredBy1">
                                    <span>Powered by Vert.x</span><img width="162" src="img/logo-sm.png ">
                                </div>
                            </div>

                        </div>


                    </div>

                </section>


            </div><!-- /content -->
        </div><!-- /tabs -->

    </div>
    <script src="js/vertx.js"></script>

    <script>
        new CBPFWTabs(document.getElementById('tabs'));
    </script>
    <script src="js/jquery-1.10.2.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="http://cdn.sockjs.org/sockjs-0.3.4.min.js"></script>
    <script src="vertxbus.min.js"></script>
    <script src="vertxhandler.js"></script>
</body>
</html>


vertxhandler.js

window.onload = function () {
    var eventBus = new vertx.EventBus("http://localhost:8080/chat");
    var loginUserName = document.querySelector("input[name=loginUserName]");
    var loginPassword = document.querySelector("input[name=loginPassword]");
    var registerUserName = document.querySelector("input[name=registerUserName]");
    var registerEmail = document.querySelector("input[name=registerEmail]");
    var registerPassword = document.querySelector("input[name=registerPassword]");
    var chatContainer = document.getElementById("section-3");
    var messageInput = document.getElementById("msg");

    var userListContainer = document.getElementById("usersOnlineContainer");

    eventBus.onopen = function () {
        eventBus.registerHandler("users/signedIn", function (message) {
            userListContainer.innerHTML += message.userName + " signed in<br/>";
        });

        document.getElementById("signIn").addEventListener("click", function (event) {
            eventBus.send("users/signIn", {
                userName: loginUserName.value,
                password: loginPassword.value
            }, function (reply) {
                if (reply.status === 200) {
                    loginUserName.disabled = true;
                    loginPassword.disable = true;
                    event.target.disable = true;
                    chatContainer.classList.remove("hidden");

                    document.getElementById("send-addon").addEventListener("click", function () {
                        var text = messageInput.value;

                        if (text.substring(0, 1) === ".") {
                            var args = text.split(' ');
                            eventBus.send("commands/perform", {
                                userName: loginUserName.value,
                                command: args[0],
                                arg1: args[1]
                            });
                        } else {
                            eventBus.send("messages/post", {
                                userName: loginUserName.value,
                                text: text
                            });
                        }
                        messageInput.value = "";
                    }, false);

                    eventBus.registerHandler("messages/posted", function (message) {
                        var table = document.getElementById("chatHistoryTable");

                        var tr = document.createElement("tr");
                        var td = document.createElement("td");
                        var td2 = document.createElement("td");
                        var txt = document.createTextNode("TIMESTAMP");
                        var txt2 = document.createTextNode(message.userName + ": " + message.text);

                        td.appendChild(txt);
                        td.className = "col-md-3 col-sm-3 col-xs-4";
                        td2.appendChild(txt2);
                        td2.className = "col-md-9 col-sm-9 col-xs-8";
                        tr.appendChild(td);
                        tr.appendChild(td2);
                        table.appendChild(tr);
                    });

                }
            });
        });


        document.getElementById("send-register").addEventListener("click", function (event) {
            eventBus.send("users/register"), {
                userName: registerUserName.value,
                email: registerEmail.value,
                password: registerPassword.value
            }, function (reply) {
                if (reply.status === 200) {

                } else if (reply.status === 120) {

                }
            }
        }, false);


    };
};