Lots o' chat changes

- Added chat room management (instead of tagsinput)
- Chat leave button in chat options dropdown
- Refreshing participants when user is added
- Updated autocomplete module so that it can be shown above a modal
  (z-index 100005 > 20000)
- Using cant-chat-with-yourself source string, which wasn't defined
  before, but was still used

public/language/en-GB/modules.json

@@ -23,10 +23,14 @@
 	"chat.add-users-to-room": "Add users to room",
 	"chat.retrieving-users": "Retrieving users...",
 	"chat.manage-room": "Manage Chat Room",
+	"chat.add-user-help": "Search for users here. When selected, the user will be added to the chat. The new user will not be able to see chat messages written before they were added to the conversation.",
 	"chat.confirm-chat-with-dnd-user": "This user has set their status to DnD(Do not disturb). Do you still want to chat with them?",
 	"chat.rename-room": "Rename room",
 	"chat.rename-placeholder": "Enter your room name here",
 	"chat.rename-help": "The room name set here will be viewable by all participants in the room.",
+	"chat.leave": "Leave Chat",
+	"chat.leave-prompt": "Are you sure you wish to leave this chat?",
+	"chat.leave-help": "Leaving this chat will remove you from future correspondence in this chat. If you are re-added in the future, you will not see any chat history from prior to your re-joining.",
 	"chat.in-room": "In this room",
 
 	"composer.compose": "Compose",

public/src/client/chats.js

@@ -52,6 +52,7 @@ define('forum/chats', [
 		Chats.addActionHandlers(components.get('chat/messages'), ajaxify.data.roomId);
 		Chats.addMemberHandler(ajaxify.data.roomId, components.get('chat/controls').find('[data-action="members"]'));
 		Chats.addRenameHandler(ajaxify.data.roomId, components.get('chat/controls').find('[data-action="rename"]'));
+		Chats.addLeaveHandler(ajaxify.data.roomId, components.get('chat/controls').find('[data-action="leave"]'));
 		Chats.addScrollHandler(ajaxify.data.roomId, ajaxify.data.uid, $('.chat-content'));
 		Chats.addCharactersLeftHandler($('[component="chat/main-wrapper"]'));
 	};
@@ -186,19 +187,26 @@ define('forum/chats', [
 
 					modal.attr('component', 'chat/manage-modal');
 
-					socket.emit('modules.chats.getUsersInRoom', { roomId: roomId }, function (err, users) {
+					Chats.refreshParticipantsList(roomId, modal);
-						var listEl = modal.find('.list-group');
+
+					var searchInput = modal.find('input');
+					var errorEl = modal.find('.text-danger');
+					require(['autocomplete', 'translator'], function (autocomplete, translator) {
+						autocomplete.user(searchInput, function (event, selected) {
+							errorEl.text('');
+							socket.emit('modules.chats.addUserToRoom', {
+								roomId: roomId,
+								username: selected.item.user.name,
+							}, function (err) {
+								if (err) {
+									translator.translate(err.message, function (translated) {
+										errorEl.text(translated);
+									});
+								}
 
-						if (err) {
+								Chats.refreshParticipantsList(roomId, modal);
-							return translator.translate('[[error:invalid-data]]', function (translated) {
+								searchInput.val('');
-								listEl.find('li').text(translated);
 							});
-						}
-
-						Benchpress.parse('partials/modals/manage_room_users', {
-							users: users,
-						}, function (html) {
-							listEl.html(html);
 						});
 					});
 				});
@@ -206,6 +214,53 @@ define('forum/chats', [
 		});
 	};
 
+	Chats.addLeaveHandler = function (roomId, buttonEl) {
+		buttonEl.on('click', function () {
+			bootbox.confirm({
+				size: 'small',
+				title: '[[modules:chat.leave]]',
+				message: '<p>[[modules:chat.leave-prompt]]</p><p class="help-block">[[modules:chat.leave-help]]</p>',
+				callback: function (ok) {
+					if (ok) {
+						socket.emit('modules.chats.leave', roomId, function (err) {
+							if (err) {
+								app.alertError(err.message);
+							}
+
+							// Return user to chats page. If modal, close modal.
+							var modal = buttonEl.parents('.chat-modal');
+							if (modal.length) {
+								require(['chat'], function (chatLib) {
+									chatLib.close(modal);
+								});
+							} else {
+								ajaxify.go('chats');
+							}
+						});
+					}
+				},
+			});
+		});
+	};
+
+	Chats.refreshParticipantsList = function (roomId, modal) {
+		socket.emit('modules.chats.getUsersInRoom', { roomId: roomId }, function (err, users) {
+			var listEl = modal.find('.list-group');
+
+			if (err) {
+				return translator.translate('[[error:invalid-data]]', function (translated) {
+					listEl.find('li').text(translated);
+				});
+			}
+
+			Benchpress.parse('partials/modals/manage_room_users', {
+				users: users,
+			}, function (html) {
+				listEl.html(html);
+			});
+		});
+	};
+
 	Chats.addRenameHandler = function (roomId, buttonEl, roomName) {
 		var modal;
 

public/src/modules/autocomplete.js

@@ -10,7 +10,7 @@ define('autocomplete', function () {
 			input.autocomplete({
 				delay: 200,
 				open: function () {
-					$(this).autocomplete('widget').css('z-index', 20000);
+					$(this).autocomplete('widget').css('z-index', 100005);
 				},
 				select: onselect,
 				source: function (request, response) {

public/src/modules/chat.js

@@ -250,9 +250,8 @@ define('chat', [
 			});
 
 			Chats.addActionHandlers(chatModal.find('[component="chat/messages"]'), data.roomId);
-
 			Chats.addRenameHandler(chatModal.attr('data-roomid'), chatModal.find('[data-action="rename"]'), chatModal.attr('data-name'));
-
+			Chats.addLeaveHandler(chatModal.attr('data-roomid'), chatModal.find('[data-action="leave"]'));
 			Chats.addSendHandlers(chatModal.attr('data-roomid'), chatModal.find('.chat-input'), chatModal.find('[data-action="send"]'));
 
 			Chats.createTagsInput(chatModal.find('.users-tag-input'), data);

src/socket.io/modules.js

@@ -228,7 +228,7 @@ SocketModules.chats.addUserToRoom = function (socket, data, callback) {
 				return next(new Error('[[error:no-user]]'));
 			}
 			if (socket.uid === parseInt(uid, 10)) {
-				return next(new Error('[[error:cant-add-self-to-chat-room]]'));
+				return next(new Error('[[error:cant-chat-with-yourself]]'));
 			}
 			async.parallel({
 				settings: async.apply(user.getSettings, uid),