closed #2766

public/language/en_GB/groups.json

@@ -29,6 +29,7 @@
 	"details.change_icon": "Change Icon",
 	"details.change_colour": "Change Colour",
 	"details.badge_text": "Badge Text",
+	"details.userTitleEnabled": "Show Badge",
 	"details.private_help": "If enabled, joining of groups requires approval from a group owner",
 	"details.hidden": "Hidden",
 	"details.hidden_help": "If enabled, this group will not be found in the groups listing, and users will have to be invited manually",

public/src/client/groups/details.js

@@ -88,7 +88,9 @@ define('forum/groups/details', ['iconSelect', 'vendor/colorpicker/colorpicker',
 			iconBtn = settingsFormEl.find('[data-action="icon-select"]'),
 			previewEl = settingsFormEl.find('.label'),
 			previewIcon = previewEl.find('i'),
-			previewValueEl = settingsFormEl.find('[name="icon"]');
+			userTitleEl = settingsFormEl.find('[name="userTitle"]'),
+			userTitleEnabledEl = settingsFormEl.find('[name="userTitleEnabled"]'),
+			iconValueEl = settingsFormEl.find('[name="icon"]');
 
 		// Add color picker to settings form
 		colorBtn.ColorPicker({
@@ -105,9 +107,29 @@ define('forum/groups/details', ['iconSelect', 'vendor/colorpicker/colorpicker',
 		// Add icon selection interface
 		iconBtn.on('click', function() {
 			iconSelect.init(previewIcon, function() {
-				previewValueEl.val(previewIcon.val());
+				iconValueEl.val(previewIcon.val());
 			});
 		});
+
+		// If the user title changes, update that too
+		userTitleEl.on('keyup', function() {
+			var icon = previewIcon.detach();
+			previewEl.text(' ' + (this.value || settingsFormEl.find('#name').val()));
+			previewEl.prepend(icon);
+		});
+
+		// Disable user title customisation options if the the user title itself is disabled
+		userTitleEnabledEl.on('change', function() {
+			var customOpts = $('.user-title-option input, .user-title-option button');
+
+			if (this.checked) {
+				customOpts.removeAttr('disabled');
+				previewEl.removeClass('hide');
+			} else {
+				customOpts.attr('disabled', 'disabled');
+				previewEl.addClass('hide');
+			}
+		});
 	};
 
 	Details.update = function() {

src/groups.js

@@ -228,6 +228,7 @@ var async = require('async'),
 				results.base.description = validator.escape(results.base.description);
 				results.base.descriptionParsed = descriptionParsed;
 				results.base.userTitle = validator.escape(results.base.userTitle);
+				results.base.userTitleEnabled = results.base.userTitleEnabled ? !!parseInt(results.base.userTitleEnabled, 10) : true;
 				results.base.createtimeISO = utils.toISOString(results.base.createtime);
 				results.base.members = results.users.filter(Boolean);
 				results.base.pending = results.pending.filter(Boolean);
@@ -537,6 +538,7 @@ var async = require('async'),
 
 			var payload = {
 					userTitle: values.userTitle || '',
+					userTitleEnabled: values.userTitleEnabled === true ? '1' : '0',
 					description: values.description || '',
 					icon: values.icon || '',
 					labelColor: values.labelColor || '#000000',
@@ -891,6 +893,8 @@ var async = require('async'),
 			}
 			groupData = groupData.map(function(group) {
 				if (group) {
+					group.userTitle = validator.escape(group.userTitle) || validator.escape(group.name);
+					group.userTitleEnabled = group.userTitleEnabled ? parseInt(group.userTitleEnabled, 10) === 1 : true;
 					group.labelColor = group.labelColor || '#000000';
 					group.createtimeISO = utils.toISOString(group.createtime);
 					group.hidden = parseInt(group.hidden, 10) === 1;
@@ -925,7 +929,7 @@ var async = require('async'),
 				}
 
 				groupData = groupData.filter(function(group) {
-					return group && parseInt(group.hidden, 10) !== 1 && !!group.userTitle;
+					return group && parseInt(group.hidden, 10) !== 1;
 				});
 
 				var groupSets = groupData.map(function(group) {