Merge pull request #551 from thelounge/astorije/set-nick-ui

Changing nick in the UI

client/css/style.css

@@ -160,7 +160,8 @@ button {
 #chat .whois .from:before,
 #chat .nick .from:before,
 #chat .action .from:before,
-.context-menu-item:before {
+.context-menu-item:before,
+#nick button:before {
 	font: normal normal normal 14px/1 FontAwesome;
 	font-size: inherit; /* Can't have font-size inherit on line above, so need to override */
 	-webkit-font-smoothing: antialiased;
@@ -260,6 +261,18 @@ button {
 	margin-right: 9px;
 }
 
+#set-nick:before {
+	content: "\f040"; /* http://fontawesome.io/icon/pencil/ */
+}
+
+#submit-nick:before {
+	content: "\f00c"; /* http://fontawesome.io/icon/check/ */
+}
+
+#cancel-nick:before {
+	content: "\f00d"; /* http://fontawesome.io/icon/times/ */
+}
+
 /* End icons */
 
 #wrap {
@@ -1284,32 +1297,64 @@ button {
 	align-items: flex-end;
 }
 
+[contenteditable]:focus {
+	outline: none;
+}
+
+/* Nick editor */
+
 #form #nick {
 	background: #f6f6f6;
 	color: #666;
 	font: inherit;
 	font-size: 11px;
 	margin: 4px;
-	line-height: 26px;
+	line-height: 22px;
 	height: 24px;
-	padding: 0 9px;
+	padding-left: 9px;
-	border-radius: 1px;
+	padding-right: 5px;
+	border-radius: 2px;
 	-webkit-user-select: none;
 	-moz-user-select: none;
 	-ms-user-select: none;
 	user-select: none;
 	-webkit-flex: 0 0 auto;
 	flex: 0 0 auto;
+	border: 1px solid transparent;
+	transition: border-color .2s;
 }
 
-#form #nick:empty {
+#form #nick-value {
-	visibility: hidden;
+	padding-right: 5px;
 }
 
-#form #nick:after {
+#form #nick.editable {
-	content: ":";
+	border-color: black;
 }
 
+#nick button#set-nick,
+#nick button#submit-nick,
+#nick button#cancel-nick {
+	color: #aaa;
+	width: 18px;
+}
+
+#nick.editable button#set-nick,
+#nick.editable #set-nick-tooltip,
+#nick button#submit-nick,
+#nick:not(.editable) #save-nick-tooltip,
+#nick button#cancel-nick,
+#nick:not(.editable) #cancel-nick-tooltip {
+	display: none;
+}
+
+#nick.editable button#submit-nick,
+#nick.editable button#cancel-nick {
+	display: inline-block;
+}
+
+/* End nick editor */
+
 #form #input {
 	background: transparent;
 	border: none;

client/index.html

@@ -59,7 +59,12 @@
 					<div id="chat"></div>
 					<form id="form" method="post" action="">
 						<div class="input">
-							<label for="input" id="nick"></label>
+							<span id="nick">
+								<span id="nick-value" spellcheck="false"></span><!-- Comments here remove spaces between elements
+								--><span id="set-nick-tooltip" class="tooltipped tooltipped-e" aria-label="Change nick"><button id="set-nick" type="button" aria-label="Change nick"></button></span><!--
+								--><span id="cancel-nick-tooltip" class="tooltipped tooltipped-e" aria-label="Cancel"><button id="cancel-nick" type="button" aria-label="Cancel"></button></span><!--
+								--><span id="save-nick-tooltip" class="tooltipped tooltipped-e" aria-label="Save"><button id="submit-nick" type="button" aria-label="Save"></button></span>
+							</span>
 							<textarea id="input" class="mousetrap"></textarea>
 							<span class="tooltipped tooltipped-w" aria-label="Send message">
 								<button id="submit" type="submit" aria-label="Send message"></button>

client/js/lounge.js

@@ -713,6 +713,65 @@ $(function() {
 			.first();
 	}
 
+	$("button#set-nick").on("click", function() {
+		toggleNickEditor(true);
+
+		// Selects existing nick in the editable text field
+		var element = document.querySelector("#nick-value");
+		element.focus();
+		var range = document.createRange();
+		range.selectNodeContents(element);
+		var selection = window.getSelection();
+		selection.removeAllRanges();
+		selection.addRange(range);
+	});
+
+	$("button#cancel-nick").on("click", cancelNick);
+	$("button#submit-nick").on("click", submitNick);
+
+	function toggleNickEditor(toggle) {
+		$("#nick").toggleClass("editable", toggle);
+		$("#nick-value").attr("contenteditable", toggle);
+	}
+
+	function submitNick() {
+		var newNick = $("#nick-value").text().trim();
+
+		if (newNick.length === 0) {
+			cancelNick();
+			return;
+		}
+
+		toggleNickEditor(false);
+
+		socket.emit("input", {
+			target: chat.data("id"),
+			text: "/nick " + newNick
+		});
+	}
+
+	function cancelNick() {
+		setNick(sidebar.find(".chan.active").closest(".network").data("nick"));
+	}
+
+	$("#nick-value").keypress(function(e) {
+		switch (e.keyCode ? e.keyCode : e.which) {
+		case 13: // Enter
+			// Ensures a new line is not added when pressing Enter
+			e.preventDefault();
+			break;
+		}
+	}).keyup(function(e) {
+		switch (e.keyCode ? e.keyCode : e.which) {
+		case 13: // Enter
+			submitNick();
+			break;
+		case 27: // Escape
+			cancelNick();
+			break;
+		}
+	});
+
 	chat.on("click", ".inline-channel", function() {
 		var name = $(this).data("chan");
 		var chan = findCurrentNetworkChan(name);
@@ -1198,7 +1257,11 @@ $(function() {
 	}
 
 	function setNick(nick) {
-		$("#nick").text(nick);
+		// Closes the nick editor when canceling, changing channel, or when a nick
+		// is set in a different tab / browser / device.
+		toggleNickEditor(false);
+
+		$("#nick-value").text(nick);
 	}
 
 	function move(array, old_index, new_index) {

src/client.js

@@ -42,6 +42,7 @@ var inputs = [
 	"invite",
 	"kick",
 	"mode",
+	"nick",
 	"notice",
 	"query",
 	"quit",

src/plugins/inputs/nick.js

@@ -0,0 +1,37 @@
+var Msg = require("../../models/msg");
+
+exports.commands = ["nick"];
+exports.allowDisconnected = true;
+
+exports.input = function(network, chan, cmd, args) {
+	if (args.length === 0) {
+		chan.pushMessage(this, new Msg({
+			type: Msg.Type.ERROR,
+			text: "Usage: /nick <your new nick>"
+		}));
+		return;
+	}
+
+	if (args.length !== 1) {
+		chan.pushMessage(this, new Msg({
+			type: Msg.Type.ERROR,
+			text: "Nicknames may not contain spaces."
+		}));
+		return;
+	}
+
+	var newNick = args[0];
+
+	// If connected to IRC, send to server and wait for ACK
+	// otherwise update the nick and UI straight away
+	if (network.irc && network.irc.connection) {
+		network.irc.raw("NICK", newNick);
+	} else {
+		network.setNick(newNick);
+
+		this.emit("nick", {
+			network: network.id,
+			nick: newNick
+		});
+	}
+};

src/plugins/irc-events/error.js

@@ -28,6 +28,11 @@ module.exports = function(irc, network) {
 			var random = (data.nick || irc.user.nick) + Math.floor(10 + (Math.random() * 89));
 			irc.changeNick(random);
 		}
+
+		client.emit("nick", {
+			network: network.id,
+			nick: irc.user.nick
+		});
 	});
 
 	irc.on("nick invalid", function(data) {
@@ -42,5 +47,10 @@ module.exports = function(irc, network) {
 			var random = "i" + Math.random().toString(36).substr(2, 10); // 'i' so it never begins with a number
 			irc.changeNick(random);
 		}
+
+		client.emit("nick", {
+			network: network.id,
+			nick: irc.user.nick
+		});
 	});
 };