Add connect form, add /join command

assets/client.js

@@ -1,19 +1,23 @@
 var server = {
 	name: "chat.freenode.net",
-	url: "ws://localhost:8080",
+	username: null,
-	username: "soju-test-user/chat.freenode.net",
+	realname: null,
-	realname: "soju-test-user",
+	nick: null,
-	nick: "soju-test-user",
+	pass: null,
-	pass: "soju-test-user",
 };
 
+var ws = null;
+
 var buffers = {};
 var activeBuffer = null;
+var serverBuffer = null;
 
 var bufferListElt = document.querySelector("#buffer-list");
 var bufferElt = document.querySelector("#buffer");
 var composerElt = document.querySelector("#composer");
 var composerInputElt = document.querySelector("#composer input");
+var connectElt = document.querySelector("#connect");
+var connectFormElt = document.querySelector("#connect form");
 
 function djb2(s) {
 	var hash = 5381;
@@ -160,15 +164,26 @@ function switchBuffer(buf) {
 	}
 }
 
-var serverBuffer = createBuffer(server.name);
+function showConnectForm() {
-serverBuffer.readOnly = true;
+	setConnectFormDisabled(false);
-switchBuffer(serverBuffer);
+	connectElt.style.display = "block";
+}
 
-var ws = new WebSocket(server.url);
+function connect() {
+	try {
+		ws = new WebSocket(server.url);
+	} catch (err) {
+		console.error(err);
+		showConnectForm();
+		return;
+	}
 
 	ws.onopen = function() {
 		console.log("Connection opened");
 
+		// TODO: wait for RPL_WELCOME
+		connectElt.style.display = "none";
+
 		if (server.pass) {
 			ws.send(formatMessage({ command: "PASS", params: [server.pass] }));
 		}
@@ -217,21 +232,88 @@ ws.onmessage = function(event) {
 
 	ws.onclose = function() {
 		console.log("Connection closed");
+		showConnectForm();
 	};
 
+	ws.onerror = function() {
+		console.error("Connection error");
+	};
+
+	serverBuffer = createBuffer(server.name);
+	serverBuffer.readOnly = true;
+	switchBuffer(serverBuffer);
+}
+
+function sendMessage(msg) {
+	ws.send(formatMessage(msg));
+}
+
+function executeCommand(s) {
+	var parts = s.split(" ");
+	var cmd = parts[0].toLowerCase().slice(1);
+	var args = parts.slice(1);
+	switch (cmd) {
+	case "join":
+		var channel = args[0];
+		var msg = { command: "JOIN", params: [channel] };
+		sendMessage(msg);
+		break;
+	default:
+		console.error("Unknwon command '" + cmd + "'");
+	}
+}
+
 composerElt.onsubmit = function(event) {
 	event.preventDefault();
+
+	var text = composerInputElt.value;
+	composerInputElt.value = "";
+	if (!text) {
+		return;
+	}
+
+	if (text.startsWith("//")) {
+		text = text.slice(1);
+	} else if (text.startsWith("/")) {
+		executeCommand(text);
+		return;
+	}
+
 	if (!activeBuffer || activeBuffer.readOnly) {
 		return;
 	}
 	var target = activeBuffer.name;
-	var text = composerInputElt.value;
+
-	if (!text) {
-		return;
-	}
 	var msg = { command: "PRIVMSG", params: [target, text] };
-	ws.send(formatMessage(msg));
+	sendMessage(msg);
 	msg.prefix = { name: server.nick };
 	activeBuffer.addMessage(msg);
-	composerInputElt.value = "";
+};
+
+function setConnectFormDisabled(disabled) {
+	connectElt.querySelectorAll("input, button").forEach(function(elt) {
+		elt.disabled = disabled;
+	});
+}
+
+connectFormElt.onsubmit = function(event) {
+	event.preventDefault();
+	setConnectFormDisabled(true);
+
+	server.url = connectFormElt.elements.url.value;
+	server.nick = connectFormElt.elements.nick.value;
+	server.pass = connectFormElt.elements.password.value;
+	server.username = connectFormElt.elements.username.value || server.nick;
+	server.realname = connectFormElt.elements.realname.value || server.nick;
+
+	connect();
+};
+
+window.onkeydown = function(event) {
+	if (activeBuffer && activeBuffer.readOnly && event.key == "/" && document.activeElement != composerInputElt) {
+		// Allow typing commands even in read-only buffers
+		composerElt.classList.remove("read-only");
+		composerInputElt.focus();
+		composerInputElt.value = "";
+	}
 };

assets/style.css

@@ -12,7 +12,8 @@ body {
 	font-family: monospace;
 }
 
-#sidebar, #buffer {
+#sidebar, #buffer, #connect {
+	width: 100%;
 	height: 100%;
 	overflow: auto;
 }
@@ -49,6 +50,22 @@ body {
 	display: none;
 }
 
+#connect {
+	position: absolute;
+	top: 0;
+	left: 0;
+	height: 100%;
+	background: white;
+}
+#connect form {
+	margin: 0 auto;
+	max-width: 300px;
+}
+#connect input {
+	box-sizing: border-box;
+	width: 100%;
+}
+
 a {
 	color: green;
 }

index.html

@@ -22,6 +22,42 @@
 			<input type="text" placeholder="Type a message">
 		</form>
 
+		<section id="connect">
+			<form>
+				<h2>Connect to IRC</h2>
+
+				<label for="connect-url">URL:</label><br/>
+				<input type="url" name="url" id="connect-url" value="ws://localhost:8080"/>
+				<br/><br/>
+
+				<label for="connect-nick">Nickname:</label><br/>
+				<input type="username" name="nick" id="connect-nick" autofocus required/>
+				<br/><br/>
+
+				<label for="connect-password">Password:</label><br/>
+				<input type="password" name="password" id="connect-password"/>
+				<br/><br/>
+
+				<details>
+					<summary>More options</summary>
+
+					<br/>
+
+					<label for="connect-username">Username:</label><br/>
+					<input type="username" name="username" id="connect-username" placeholder="Same as nickname"/>
+					<br/><br/>
+
+					<label for="connect-realname">Real name:</label><br/>
+					<input type="text" name="realname" id="connect-realname" placeholder="Same as nickname"/>
+					<br/>
+				</details>
+
+				<br/>
+
+				<button>Connect</button>
+			</form>
+		</section>
+
 		<script src="assets/irc.js"></script>
 		<script src="assets/client.js"></script>
 	</body>