Work on ACP improvements

user.js

@@ -17,6 +17,7 @@ var Server = require("./server.js");
 var Database = require("./database.js");
 var Logger = require("./logger.js");
 var Config = require("./config.js");
+var ACP = require("./acp");
 
 // Represents a client connected via socket.io
 var User = function(socket, ip) {
@@ -24,6 +25,7 @@ var User = function(socket, ip) {
     this.socket = socket;
     this.loggedIn = false;
     this.rank = Rank.Anonymous;
+    this.global_rank = Rank.Anonymous;
     this.channel = null;
     this.name = "";
     this.meta = {
@@ -514,6 +516,11 @@ User.prototype.initCallbacks = function() {
             pllist: list,
         });
     }.bind(this));
+
+    this.socket.on("acp-init", function() {
+        if(this.global_rank >= Rank.Siteadmin)
+            ACP.init(this);
+    }.bind(this));
 }
 
 var lastguestlogin = {};
@@ -603,6 +610,7 @@ User.prototype.login = function(name, pw, session) {
                 var rank = (chanrank > row.global_rank) ? chanrank
                                                          : row.global_rank;
                 this.rank = (this.rank > rank) ? this.rank : rank;
+                this.global_rank = row.global_rank;
                 this.socket.emit("rank", this.rank);
                 this.name = name;
                 if(this.channel != null) {

www/acp.html

@@ -13,13 +13,6 @@
     body {
         padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
     }
-    .loginform {
-        margin: 100px auto 20px;
-        padding: 19px 29px 29px;
-        border-radius: 5px 5px 5px 5px;
-        border: 1px solid #dedede;
-        max-width: 300px;
-    }
 
     #log {
         max-height: 500px;
@@ -39,9 +32,14 @@
           <div class="">
             <ul class="nav">
               <li class="active"><a href="index.html">Home</a></li>
-              <li><a href="help.html">Help</a></li>
-              <li><a href="javascript:void(0)" id="optlink">Options</a></li>
             </ul>
+            <div class="navbar-form pull-right" id="loginform">
+              <button class="btn" id="login">Login</button>
+            </div>
+            <div class="navbar-form pull-right" id="logoutform" style="display: none;">
+              <span id="welcome"></span>
+              <button class="btn" id="logout">Logout</button>
+            </div>
           </div>
         </div>
       </div>
@@ -49,21 +47,24 @@
 
     <div class="container">
         <div class="row">
-            <div id="loggedin" class="span6" style="display: none;">
-                <h3 id="welcome"></h3>
+            <div class="span12">
+                <div class="btn-group">
+                    <a class="btn dropdown-toggle" data-toggle="dropdown" href="javascript:void(0)">
+                        <span id="menudd_title">Menu</span>
+                        <span class="caret"></span>
+                    </a>
+                    <ul class="dropdown-menu" id="menudd">
+                        <li id="li_logview"><a href="javascript:void(0)" id="show_logview">Log Viewer</a></li>
+                        <li id="li_announce"><a href="javascript:void(0)" id="show_announce">Announcement Manager</a></li>
+                        <li id="li_gbans"><a href="javascript:void(0)" id="show_gbans">Global Bans</a></li>
+                        <li id="li_userlookup"><a href="javascript:void(0)" id="show_userlookup">Users</a></li>
+                    </ul>
                 </div>
-            <form class="form-horizontal loginform" action="javascript:void(0);">
-                <div class="control-group">
-                    <input id="name" type="text" placeholder="Username" class="input-block-level">
             </div>
-                <div class="control-group">
-                    <input id="pw" type="password" placeholder="Password" class="input-block-level">
         </div>
-                <button id="login" class="btn btn-block">Authenticate</button>
-            </form>
-        </div>
-        <div class="row">
-            <div class="span8">
+
+        <div class="row" id="panels">
+            <div class="span12" id="logview">
                 <h3>Log Viewer</h3>
                 <form class="form-inline" action="javascript:void(0);">
                     <button id="syslog" class="btn">Syslog</button>
@@ -75,25 +76,83 @@
                 </form>
                 <pre id="log"></pre>
             </div>
-            <div class="span4">
-                <h3>Password Reset</h3>
-                <form class="form-inline" action="javascript:void(0)">
-                    <div class="input-append">
-                        <input type="text" id="reset_uname" placeholder="Username">
-                        <button class="btn" id="reset_pw">Reset</button>
+            <div class="span12" id="announcepanel">
+                <h3 id="announce_current_h3">Current Announcement</h3>
+                <h3>New Announcement</h3>
+                <form class="form-horizontal" action="javascript:void(0)">
+                    <div class="control-group">
+                        <label class="control-label" for="announce_title">
+                            Title
+                        </label>
+                        <div class="controls">
+                            <input type="text" class="input-block-level" id="announce_title">
+                        </div>
+                    </div>
+                    <div class="control-group">
+                        <label class="control-label" for="announce_text">
+                            Body (HTML)
+                        </label>
+                        <div class="controls">
+                            <textarea class="input-block-level" rows="15" id="announce_text"></textarea>
+                        </div>
+                    </div>
+                    <div class="control-group">
+                        <div class="controls">
+                            <button class="btn btn-primary" id="announce_submit">Announce</button>
+                        </div>
                     </div>
                 </form>
             </div>
-        </div>
-        <div class="row">
-            <div class="span8">
+            <div class="span12" id="gbanpanel">
                 <h3>Global Bans</h3>
-                <table id="banlist" class="table table-striped table-bordered">
+                <table class="table table-striped table-bordered">
                     <thead>
                         <tr>
-                            <th></th>
-                            <th>IP</th>
-                            <th>Reason</th>
+                            <th style="width: 80px;">Remove</th>
+                            <th style="width: 160px;">IP Address</th>
+                            <th>Note</th>
+                        </tr>
+                    </thead>
+                </table>
+                <h3>Add global ban</h3>
+                <form class="form-horizontal" action="javascript:void(0)">
+                    <div class="control-group">
+                        <label class="control-label" for="gban_ip">
+                            IP address
+                        </label>
+                        <div class="controls">
+                            <input type="text" id="gban_ip">
+                        </div>
+                    </div>
+                    <div class="control-group">
+                        <label class="control-label" for="gban_note">
+                            Note
+                        </label>
+                        <div class="controls">
+                            <input type="text" id="gban_note">
+                        </div>
+                    </div>
+                    <div class="control-group">
+                        <div class="controls">
+                            <button class="btn btn-primary" id="gban_submit">Add Ban</button>
+                        </div>
+                    </div>
+                </form>
+            </div>
+            <div class="span12" id="userlookup">
+            <h3>Users</h3>
+                <form class="form-inline" action="javascript:void(0)">
+                    <input type="text" id="userlookup_name" placeholder="Name">
+                    <button class="btn" id="userlookup_submit">Search</button>
+                </form>
+                <table class="table table-striped table-bordered">
+                    <thead>
+                        <tr>
+                            <th>UID</th>
+                            <th>Name</th>
+                            <th>Global Rank</th>
+                            <th>Email</th>
+                            <th>Password Reset</th>
                         </tr>
                     </thead>
                 </table>
@@ -120,160 +179,8 @@
 
     <!-- Mine -->
     <script src="./assets/js/iourl.js"></script>
-    <script type="text/javascript">
-        var host = document.location+"";
-        host = host.replace("http://", "");
-        if(host.indexOf("/") != -1)
-            host = host.substring(0, host.indexOf("/"));
-        host = "http://" + host;
-        var session = readCookie("sync_session") || "";
-        var uname = readCookie("sync_uname") || "";
-        var p = "";
-        if(uname && session) {
-            $.getJSON(WEB_URL+"/api/json/login?name="+uname+"&session="+session+"&callback=?", function(data) {
-                if(data.success) {
-                    $(".loginform").remove();
-                    createCookie("sync_uname", uname, 7);
-                    createCookie("sync_session", session, 7);
-                    p = "name=" + uname + "&session=" + session;
-                    loadBanlist();
-                }
-            });
-        }
-        var q = "";
-        $("#login").click(function() {
-            uname =  $("#name").val();
-            q = "name=" + $("#name").val() + "&pw=" + $("#pw").val();
-            $.getJSON(WEB_URL+"/api/json/login?"+q+"&callback=?", function(data) {
-                console.log(data);
-                if(data.success) {
-                    $(".loginform").remove();
-                    session = data.session;
-                    createCookie("sync_uname", uname, 7);
-                    createCookie("sync_session", session, 7);
-                    p = "name=" + uname + "&session=" + session;
-                    loadBanlist();
-                }
-            });
-        });
-        function getSyslog() {
-            $.ajax(WEB_URL+"/api/plain/readlog?type=sys&"+p).done(function(data) {
-                $("#log").text(data);
-            });
-        }
-        $("#syslog").click(getSyslog);
-        function getErrlog() {
-            $.ajax(WEB_URL+"/api/plain/readlog?type=err&"+p).done(function(data) {
-                $("#log").text(data);
-            });
-        }
-        $("#errlog").click(getErrlog);
-        function getChanlog() {
-            var chan = $("#channame").val();
-            $.ajax(WEB_URL+"/api/plain/readlog?type=channel&channel="+chan+"&"+p).done(function(data) {
-                $("#log").text(data);
-            });
-        }
-        $("#chanlog").click(getChanlog);
-        $("#channame").keydown(function(ev) {
-            if(ev.keyCode == 13) {
-                getChanlog();
-            }
-        });
-
-        $("#reset_pw").click(function() {
-            $.getJSON(WEB_URL+"/api/json/pwreset?action=reset&reset_name="+$("#reset_uname").val()+"&"+p+"&callback=?", function(data) {
-                if(data.success) {
-                    alert("Success.  New password: " + data.pw);
-                }
-                else {
-                    alert("Failure.");
-                }
-
-            });
-        });
-
-        function loadBanlist() {
-            $.getJSON(WEB_URL+"/api/json/globalbans?action=list&"+p+"&callback=?", function(data) {
-                handleBanlist(data);
-            });
-        }
-        function handleBanlist(data) {
-            var tbl = $("#banlist");
-            if(tbl.children().length > 1) {
-                $(tbl.children()[1]).remove();
-            }
-            for(var ip in data) {
-                var tr = $("<tr/>").appendTo($("#banlist"));
-                var btntd = $("<td/>").appendTo(tr);
-                var remove = $("<button/>").addClass("btn btn-danger")
-                    .appendTo(btntd);
-                $("<i/>").addClass("icon-minus").appendTo(remove);
-                remove.click(function(ip) { return function() {
-                    var b = "ip=" + ip;
-                    $.getJSON(WEB_URL+"/api/json/globalbans?action=remove&"+b+"&"+p+"&callback=?", function(data) {
-                        if(data.error) {
-                            alert(data.error);
-                        }
-                        else if(!data.success) {
-                            alert("Remove ban failed");
-                        }
-                        loadBanlist();
-                    });
-                } }(ip));
-                var iptd = $("<td/>").appendTo(tr);
-                $("<code/>").text(ip).appendTo(iptd);
-                var reason  = $("<td/>").appendTo(tr);
-                $("<code/>").text(data[ip]).appendTo(reason);
-            }
-            // Add new
-            var tr = $("<tr/>").appendTo($("#banlist"));
-            var add = $("<button/>").addClass("btn btn-success")
-                .appendTo($("<td/>").appendTo(tr));
-            $("<i/>").addClass("icon-plus").appendTo(add);
-            var ip = $("<input/>").attr("type", "text")
-                .appendTo($("<td/>").appendTo(tr));
-            var reason = $("<input/>").attr("type", "text")
-                .appendTo($("<td/>").appendTo(tr));
-
-            add.click(function() {
-                var b = "ip=" + ip.val() + "&reason=" + reason.val();
-                $.getJSON(WEB_URL+"/api/json/globalbans?action=add&"+b+"&"+p+"&callback=?", function(data) {
-                    if(data.error) {
-                        alert(data.error);
-                    }
-                    else if(!data.success) {
-                        alert("Add ban failed");
-                    }
-                    loadBanlist();
-                });
-            });
-        }
-
-        function createCookie(name,value,days) {
-            if (days) {
-                var date = new Date();
-                date.setTime(date.getTime()+(days*24*60*60*1000));
-                var expires = "; expires="+date.toGMTString();
-            }
-            else var expires = "";
-            document.cookie = name+"="+value+expires+"; path=/";
-        }
-
-        function readCookie(name) {
-            var nameEQ = name + "=";
-            var ca = document.cookie.split(";");
-            for(var i=0;i < ca.length;i++) {
-                var c = ca[i];
-                while (c.charAt(0)==" ") c = c.substring(1,c.length);
-                if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
-            }
-            return null;
-        }
-
-        function eraseCookie(name) {
-            createCookie(name,"",-1);
-        }
-    </script>
+    <script src="./assets/js/data.js"></script>
+    <script src="./assets/js/util.js"></script>
+    <script src="./assets/js/acp.js"></script>
   </body>
 </html>

www/assets/js/acp.js

@@ -0,0 +1,220 @@
+var BASE = WEB_URL + "/api/json/";
+var AUTH = "";
+
+/* init socket connection */
+$.getScript(IO_URL+"/socket.io/socket.io.js", function() {
+    try {
+        if(NO_WEBSOCKETS) {
+            var i = io.transports.indexOf("websocket");
+            if(i >= 0)
+                io.transports.splice(i, 1);
+        }
+        socket = io.connect(IO_URL);
+        setupCallbacks();
+    }
+    catch(e) {
+        Callbacks.disconnect();
+    }
+});
+$("#login").click(showLoginMenu);
+$("#logout").click(function() {
+    eraseCookie("cytube_uname");
+    eraseCookie("cytube_session");
+    document.location.reload(true);
+});
+
+$("#panels .span12").each(function() {
+    $(this).hide();
+});
+
+function menuHandler(liselect, panelselect) {
+    $(liselect).click(function() {
+        $("#panels .span12").each(function() {
+            $(this).hide();
+        });
+        $(panelselect).show();
+        $("#menudd_title").text($(liselect).text());
+    });
+}
+
+menuHandler("#show_logview", "#logview");
+menuHandler("#show_announce", "#announcepanel");
+menuHandler("#show_gbans", "#gbanpanel");
+menuHandler("#show_userlookup", "#userlookup");
+
+function getSyslog() {
+    $.ajax(WEB_URL+"/api/plain/readlog?type=sys&"+AUTH).done(function(data) {
+        $("#log").text(data);
+    });
+}
+$("#syslog").click(getSyslog);
+function getErrlog() {
+    $.ajax(WEB_URL+"/api/plain/readlog?type=err&"+AUTH).done(function(data) {
+        $("#log").text(data);
+    });
+}
+$("#errlog").click(getErrlog);
+function getChanlog() {
+    var chan = $("#channame").val();
+    $.ajax(WEB_URL+"/api/plain/readlog?type=channel&channel="+chan+"&"+AUTH).done(function(data) {
+        $("#log").text(data);
+    });
+}
+$("#chanlog").click(getChanlog);
+$("#channame").keydown(function(ev) {
+    if(ev.keyCode == 13) {
+        getChanlog();
+    }
+});
+
+$("#announce_submit").click(function() {
+    socket.emit("acp-announce", {
+        title: $("#announce_title").val(),
+        text: $("#announce_text").val()
+    });
+    $("#announce_title").val(""),
+    $("#announce_text").val("")
+});
+
+$("#gban_submit").click(function() {
+    socket.emit("acp-global-ban", {
+        ip: $("#gban_ip").val(),
+        note: $("#gban_note").val()
+    });
+
+    $("#gban_ip").val("");
+    $("#gban_note").val("");
+});
+
+$("#userlookup_submit").click(function() {
+    socket.emit("acp-lookup-user", $("#userlookup_name").val());
+});
+
+function setupCallbacks() {
+    socket.on("connect", function() {
+        if(NAME && SESSION) {
+            socket.emit("login", {
+                name: NAME,
+                session: SESSION
+            });
+        }
+    });
+    socket.on("login", function(data) {
+        if(!data.success) {
+            if(data.error != "Invalid session") {
+                alert(data.error);
+            }
+        }
+        else {
+            $("#welcome").text("Logged in as " + data.name);
+            $("#loginform").css("display", "none");
+            $("#logoutform").css("display", "");
+            $("#loggedin").css("display", "");
+            SESSION = data.session || "";
+            CLIENT.name = data.name;
+            CLIENT.logged_in = true;
+            socket.emit("acp-init");
+            if(SESSION) {
+                AUTH = "name=" + CLIENT.name + "&session=" + SESSION;
+                createCookie("cytube_uname", CLIENT.name, 7);
+                createCookie("cytube_session", SESSION, 7);
+            }
+        }
+    });
+
+    socket.on("rank", function(data) {
+        CLIENT.rank = data;
+    });
+
+    socket.on("announcement", function(data) {
+        var al = makeAlert(data.title, data.text)
+            .insertAfter($("#announce_current_h3"));
+        al.find(".close").click(function() {
+            socket.emit("acp-announce-clear");
+        });
+    });
+
+    socket.on("acp-global-banlist", function(data) {
+        $("#gbanpanel tbody").remove();
+        for(var ip in data) {
+            var tr = $("<tr/>").appendTo($("#gbanpanel table"));
+            (function(ip, note) {
+            $("<button/>").addClass("btn btn-mini btn-danger")
+                .html("<i class='icon-trash'></i>")
+                .appendTo($("<td/>").appendTo(tr))
+                .click(function() {
+                    socket.emit("acp-global-unban", ip);
+                });
+            $("<td/>").html("<code>"+ip+"</code>").appendTo(tr);
+            $("<td/>").text(note).appendTo(tr);
+            })(ip, data[ip]);
+        }
+    });
+
+    socket.on("acp-userdata", function(data) {
+        data = data.sort(function(a, b) {
+            var x = a.uname.toLowerCase();
+            var y = b.uname.toLowerCase();
+            return x == y ? 0 : (x < y ? -1 : 1);
+        });
+
+        $("#userlookup tbody").remove();
+        for(var i = 0; i < data.length; i++) {
+            var u = data[i];
+            var tr = $("<tr/>").appendTo($("#userlookup table"));
+            $("<td/>").text(u.id).appendTo(tr);
+            $("<td/>").text(u.uname).appendTo(tr);
+            $("<td/>").text(u.global_rank).appendTo(tr);
+            $("<td/>").text(u.email).appendTo(tr);
+            (function(name, email) {
+            $("<button/>").addClass("btn btn-mini")
+                .text("Reset password")
+                .appendTo($("<td/>").appendTo(tr))
+                .click(function() {
+                    var reset = confirm("Really reset password?");
+                    if(reset) {
+                        socket.emit("acp-reset-password", {
+                            name: name,
+                            email: email
+                        });
+                    }
+                });
+            })(u.uname, u.email);
+        }
+    });
+
+    socket.on("acp-reset-password", function(data) {
+        if(!data.success)
+            alert(data.error);
+        else
+            alert("Password reset successful.  Reset hash: " + data.hash);
+    });
+
+}
+
+/* cookie util */
+
+function createCookie(name,value,days) {
+    if (days) {
+        var date = new Date();
+        date.setTime(date.getTime()+(days*24*60*60*1000));
+        var expires = "; expires="+date.toGMTString();
+    }
+    else var expires = "";
+    document.cookie = name+"="+value+expires+"; path=/";
+}
+
+function readCookie(name) {
+    var nameEQ = name + "=";
+    var ca = document.cookie.split(";");
+    for(var i=0;i < ca.length;i++) {
+        var c = ca[i];
+        while (c.charAt(0)==" ") c = c.substring(1,c.length);
+        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
+    }
+    return null;
+}
+
+function eraseCookie(name) {
+    createCookie(name,"",-1);
+}