better frontend multiple connection support

public/css/main.css

@@ -41,6 +41,9 @@ body {
   width: 100%;
   height: 100%;
 }
+.ircclient .coverwindow#authdialog {
+  z-index: 100;
+}
 .ircclient .coverwindow .wrapper {
   width: 320px;
   margin: auto;
@@ -411,12 +414,18 @@ body {
 .message.m_action .actionee {
   color: #3f51b5;
 }
+.message.m_action .asterisk {
+  color: #e4c000;
+}
 .message.m_mode .content {
   font-style: italic;
 }
 .message.m_mode .mode {
   color: #008000;
 }
+.message.m_mode .asterisk {
+  color: #05abe0;
+}
 .message.m_error .content {
   color: #f00;
   font-weight: bold;

public/index.html

@@ -52,7 +52,7 @@
 					<div class="input">
 						<div class="my_nickname">Test</div>
 						<div class="inputwrapper">
-							<input type="text" class="userinput">
+							<input type="text" class="userinput" placeholder="Enter message here..">
 						</div>
 						<span class="sendbutton"></span>
 					</div>

public/js/main.js

@@ -253,8 +253,11 @@ let composer = {
 
 			switch(type) {
 				case "mode":
+					element.innerHTML += "<span class='asterisk'>&#8505;</span>&nbsp;<span class='actionee nick'>"+sender+"</span>&nbsp;";
+					element.innerHTML += "<span class='content'>"+message+"</span>";
+					break;
 				case "action":
-					element.innerHTML += "<span class='asterisk'>*</span>&nbsp;<span class='actionee nick'>"+sender+"</span>&nbsp;";
+					element.innerHTML += "<span class='asterisk'>&#9889;</span>&nbsp;<span class='actionee nick'>"+sender+"</span>&nbsp;";
 					element.innerHTML += "<span class='content'>"+message+"</span>";
 					break;
 				case "part":
@@ -484,12 +487,10 @@ class Tab {
 		clientdom.tabby.appendChild(ttt);
 		this.element = ttt;
 
-		if(this.buffer.type != "server") {
 		ttt.innerHTML += "<span id='close'>x</span>"
 		ttt.querySelector('#close').addEventListener('click', () => {
 			this.close();
 		}, false);
-		}
 
 		ttt.addEventListener('click', () => {
 			if(this.closeRequested) return;
@@ -664,6 +665,7 @@ class Buffer {
 class IRCConnector {
 	constructor() {
 		this.formLocked = false;
+		this.canClose = false;
 
 		clientdom.connector.form.onsubmit = (e) => {
 			if(this.formLocked) {
@@ -675,6 +677,12 @@ class IRCConnector {
 
 			this.validateForm(e);
 		}
+
+		clientdom.connector.onkeyup = (e) => {
+			let key = evt.keyCode || evt.which || evt.charCode || 0;
+			if(key === 27 && this.canClose)
+				this.authComplete();
+		}
 	}
 
 	validateForm(event) {
@@ -809,6 +817,9 @@ class InputHandler {
 						}
 					}
 					break;
+				case "quit":
+					irc.socket.emit("userinput", {command: "quit", server: buf.server, message: listargs.slice(1).join(" "), arguments: []});
+					break;
 				case "msg":
 				case "privmsg":
 				case "say":
@@ -843,6 +854,11 @@ class InputHandler {
 
 					irc.socket.emit("userinput", {command: "whois", server: buf.server, message: "", arguments: [listargs[1]]});
 					break;
+				case "connect":
+					clientdom.connector.frame.style.display = "block";
+					irc.auther.authMessage("Create a new connection", false);
+					irc.auther.canClose = true;
+					break;
 				default:
 					this.commandError(buf, listargs[0].toUpperCase()+': Unknown command!');
 			}
@@ -872,6 +888,17 @@ class IRCChatWindow {
 		}
 	}
 
+	destroyAllBuffers() {
+		for(let b in this.buffers) {
+			this.buffers[b].tab.element.remove();
+			this.buffers.splice(b, 1);
+		}
+		irc.serverData = {};
+		irc.auther.authMessage("Disconnected", true);
+		clientdom.frame.style.display = "none";
+		this.firstServer = true;
+	}
+
 	getBufferByName(buffername) {
 		let result = null;
 		for (let t in this.buffers) {
@@ -935,6 +962,9 @@ class IRCChatWindow {
 	newServerBuffer(serverinfo) {
 		if(this.firstServer) {
 			clientdom.frame.style.display = "block";
+			window.onbeforeunload = function(e) {
+				return 'IRC will disconnect.';
+			}
 		}
 
 		let prefixes = "";
@@ -984,8 +1014,9 @@ class IRCChatWindow {
 	}
 
 	closeBuffer(buffer) {
-		if(buffer.type == "server") return; // Don't close server buffers, lol
+		if(buffer.type == "server")
-		if(buffer.type == "channel" && buffer.alive)
+			irc.socket.emit("userinput", {command: "quit", server: buffer.server, message: "Server tab closed", arguments: []});
+		else if(buffer.type == "channel" && buffer.alive)
 			irc.socket.emit("userinput", {command: "part", server: buffer.server, message: "Tab closed", arguments: [buffer.name]});
 		
 		let bufIndex = this.buffers.indexOf(buffer);
@@ -1002,6 +1033,13 @@ class IRCChatWindow {
 
 		buffer.tab.element.remove();
 		this.buffers.splice(bufIndex, 1);
+
+		if(this.buffers.length == 0) {
+			irc.chat.destroyAllBuffers();
+			irc.auther.authMessage("Create a new connection", false);
+			irc.auther.canClose = false;
+			clientdom.connector.frame.style.display = "block";
+		}
 	}
 
 	messageBuffer(name, server, message) {
@@ -1226,7 +1264,8 @@ window.onload = function() {
 
 	irc.socket.on('disconnect', function (data) {
 		irc.socketUp = false;
-		alert("Server died. Please try again later.");
+		irc.chat.destroyAllBuffers();
+		clientdom.connector.frame.style.display = "block";
 	});
 
 	// Does everything
@@ -1250,6 +1289,14 @@ window.onload = function() {
 			case "event_quit":
 				irc.chat.handleQuit(data.server, data.user, data.reason);
 				break;
+			case "event_server_quit":
+				let serverz = irc.chat.getBuffersByServer(data.server);
+				for(let a in serverz) {
+					let serv = serverz[a];
+					serv.addMessage("You are no longer talking on this server.", null, "error");
+					serv.setAliveStatus(false);
+				}
+				break;
 			case "message":
 				if(data.to == irc.serverData[data.server].my_nick) {
 					irc.chat.messageBuffer(data.user.nickname, data.server, {message: data.message, type: data.messageType, from: data.user.nickname});

public/main.styl

@@ -41,6 +41,8 @@ body
         position: absolute
         width: 100%
         height: 100%
+        &#authdialog
+            z-index: 100
         .wrapper
             width: 320px
             margin: auto
@@ -347,13 +349,18 @@ body
     &.m_nick .content, &.m_notice .content
         color: #FF9800;
         font-weight: bold;
-    &.m_action .actionee
+    &.m_action 
+        .actionee
             color: #3f51b5;
+        .asterisk
+            color: #e4c000;
     &.m_mode 
         .content
             font-style: italic;
         .mode
             color: #008000;
+        .asterisk
+            color: #05abe0
     &.m_error .content
         color: red;
         font-weight: bold;

server/irc.js

@@ -31,7 +31,7 @@ class IRCConnectionHandler {
 				this.conn.write('{0} {1}'.format(data.command.toUpperCase(), data.arguments[0]));
 				break;
 			case "quit":
-				this.conn.write('{0} :{1}'.format(data.command.toUpperCase(), data.message));
+				this.conn.write('{0} :{1}'.format(data.command.toUpperCase(), (data.message == '' ? configuration.client.default_quit_msg : data.message)));
 				break;
 			case "privmsg":
 				this.conn.write('PRIVMSG {0} :{1}'.format(data.arguments[0], data.message));

teemant.js

@@ -12,7 +12,7 @@ let ircclient = require(__dirname+'/server/irc');
 
 let port = config.server.port || 8080;
 
-let connections = {}
+let connections = {};
 
 app.get("/", function(req, res){
 	res.sendFile(pubdir+"/index.html");
@@ -79,12 +79,15 @@ io.sockets.on('connection', function (socket) {
 			let message = "An error occured";
 			let inconnect = true;
 		
+			if(data['message'])
+				message = data.message;
+
 			if(newConnection.authenticated == false) {
 				message = "Failed to connect to the server!";
 				inconnect = false;
 			}
 
-			socket.emit('act_client', {type: (inconnect == true ? 'server_message' : 'connect_message'), message: message, error: true});
+			socket.emit('act_client', {type: (inconnect == true ? 'server_message' : 'connect_message'), server: connectiondata.server, message: message, error: true});
 		});
 
 		newConnection.on('pass_to_client', (data) => {
@@ -100,7 +103,10 @@ io.sockets.on('connection', function (socket) {
 				inconnect = false;
 			}
 
-			socket.emit('act_client', {type: (inconnect == true ? 'server_message' : 'connect_message'), message: message, error: true});
+			socket.emit('act_client', {type: (inconnect == true ? 'server_message' : 'connect_message'), server: connectiondata.server, message: message, error: true});
+			
+			if(inconnect)
+				socket.emit('act_client', {type: 'event_server_quit', server: connectiondata.server});
 		});
 	});
 });