Implement new session system

I replaced the old login system with a more secure one.
Instead of storing cookies containing the username and plaintext password, the password
is submitted once to obtain a session hash, which is valid for a given length of time.
Registering and logging in is now done via an iframe, which prevents custom javascript from having access to the password field.
Site admins need to run the following SQL before updating, or else all of your logins/registrations will fail:

ALTER TABLE `registrations` ADD `session_hash` VARCHAR( 64 ) NOT NULL ,
ADD `expire` BIGINT NOT NULL

www/assets/js/callbacks.js

@@ -143,10 +143,9 @@ function initCallbacks() {
             $("#loginform").css("display", "none");
             $("#logoutform").css("display", "");
             $("#loggedin").css("display", "");
-            if(pw != "") {
-                createCookie("sync_uname", uname, 1);
-                createCookie("sync_pw", pw, 1);
-            }
+            session = data.session;
+            createCookie("sync_uname", uname, 7);
+            createCookie("sync_session", session, 7);
         }
     });
 

www/assets/js/client.js

@@ -30,7 +30,7 @@ var VHEIGHT = "377";
 var IGNORED = [];
 var KICKED = false;
 var uname = readCookie("sync_uname");
-var pw = readCookie("sync_pw");
+var session = readCookie("sync_session");
 
 var Rank = {
     Guest: 0,
@@ -116,10 +116,10 @@ socket.on("connect", function() {
     socket.emit("joinChannel", {
         name: params["channel"]
     });
-    if(uname != null && pw != null && pw != "false") {
+    if(uname && session) {
         socket.emit("login", {
             name: uname,
-            pw: pw
+            session: session
         });
     }
     $("<div/>").addClass("server-msg-reconnect")
@@ -194,40 +194,14 @@ $("#qlockbtn").click(function() {
     });
 });
 
-function loginClick() {
-    uname = $("#username").val();
-    pw = $("#password").val();
-    socket.emit("login", {
-        name: uname,
-        pw: pw
-    });
-};
-
-$("#login").click(loginClick);
-$("#username").keydown(function(ev) {
-    if(ev.keyCode == 13)
-        loginClick();
-});
-$("#password").keydown(function(ev) {
-    if(ev.keyCode == 13)
-        loginClick();
-});
+$("#login").click(showLoginFrame);
 
 $("#logout").click(function() {
     eraseCookie("sync_uname");
-    eraseCookie("sync_pw");
+    eraseCookie("sync_session");
     document.location.reload(true);
 });
 
-$("#register").click(function() {
-    uname = $("#username").val();
-    pw = $("#password").val();
-    socket.emit("register", {
-        name: uname,
-        pw: pw
-    });
-});
-
 $("#chatline").keydown(function(ev) {
     if(ev.keyCode == 13 && $("#chatline").val() != "") {
         if($("#chatline").val().trim() == "/poll") {

www/assets/js/functions.js

@@ -843,3 +843,69 @@ function newPollMenu() {
     });
     modal.modal();
 }
+
+function showLoginFrame() {
+    var modal = $("<div/>").addClass("modal hide fade")
+        .appendTo($("body"));
+    var head = $("<div/>").addClass("modal-header")
+        .appendTo(modal);
+    $("<button/>").addClass("close")
+        .attr("data-dismiss", "modal")
+        .attr("aria-hidden", "true")
+        .appendTo(head)[0].innerHTML = "&times;";
+    $("<h3/>").text("Login").appendTo(head);
+    var body = $("<div/>").addClass("modal-body").appendTo(modal);
+    var frame = $("<iframe/>")
+        .attr("id", "loginframe")
+        .attr("src", "login.html")
+        .css("border", "none")
+        .css("width", "100%")
+        .css("height", "300px")
+        .css("margin", "0")
+        .appendTo(body);
+    var respond = function(e) {
+        if(e.data.indexOf(":") == -1) {
+            return;
+        }
+        if(e.data.substring(0, e.data.indexOf(":")) == "cytube-login") {
+            var data = e.data.substring(e.data.indexOf(":")+1);
+            data = JSON.parse(data);
+            if(data.error) {
+                alert(data.error);
+            }
+            else if(data.success) {
+                session = data.session;
+                uname = data.uname;
+                socket.emit("login", {
+                    name: uname,
+                    session: session
+                });
+                if(window.removeEventListener) {
+                    window.removeEventListener("message", respond, false);
+                }
+                else if(window.detachEvent) {
+                    // If an IE dev ever reads this, please tell your company 
+                    // to get their shit together
+                    window.detachEvent("onmessage", respond);
+                }
+                modal.modal("hide");
+            }
+        }
+    }
+    if(window.addEventListener) {
+        window.addEventListener("message", respond, false);
+    }
+    else if(window.attachEvent) {
+        // If an IE dev ever reads this, please tell your company to get
+        // their shit together
+        window.attachEvent("onmessage", respond);
+    }
+    setTimeout(function() {
+        frame[0].contentWindow.postMessage("cytube-syn", document.location);
+    }, 1000);
+    var footer = $("<div/>").addClass("modal-footer").appendTo(modal);
+    modal.on("hidden", function() {
+        modal.remove();
+    });
+    modal.modal();
+}