fix: group userTitles translation escapes

public/src/admin/manage/group.js

@@ -27,7 +27,7 @@ define('admin/manage/group', [
 		memberList.init('admin/manage/group');
 
 		changeGroupUserTitle.on('keyup', function () {
-			groupLabelPreviewText.text(changeGroupUserTitle.val());
+			groupLabelPreviewText.translateText(changeGroupUserTitle.val());
 		});
 
 		changeGroupLabelColor.on('keyup input', function () {

public/src/client/groups/details.js

@@ -143,6 +143,7 @@ define('forum/groups/details', [
 		var textColorValueEl = settingsFormEl.find('[name="textColor"]');
 		var iconBtn = settingsFormEl.find('[data-action="icon-select"]');
 		var previewEl = settingsFormEl.find('.label');
+		var previewElText = settingsFormEl.find('.label-text');
 		var previewIcon = previewEl.find('i');
 		var userTitleEl = settingsFormEl.find('[name="userTitle"]');
 		var userTitleEnabledEl = settingsFormEl.find('[name="userTitleEnabled"]');
@@ -165,9 +166,7 @@ define('forum/groups/details', [
 
 		// If the user title changes, update that too
 		userTitleEl.on('keyup', function () {
-			var icon = previewIcon.detach();
+			previewElText.translateText((this.value || settingsFormEl.find('#name').val()));
-			previewEl.text(' ' + (this.value || settingsFormEl.find('#name').val()));
-			previewEl.prepend(icon);
 		});
 
 		// Disable user title customisation options if the the user title itself is disabled

src/controllers/admin/groups.js

@@ -10,6 +10,7 @@ const groups = require('../../groups');
 const meta = require('../../meta');
 const pagination = require('../../pagination');
 const events = require('../../events');
+const translator = require('../../translator');
 
 const groupsController = module.exports;
 
@@ -35,16 +36,17 @@ groupsController.list = async function (req, res) {
 
 groupsController.get = async function (req, res, next) {
 	const groupName = req.params.name;
-	const [groupNames, group] = await Promise.all([
+	const [groupNames, group, allCategories] = await Promise.all([
 		getGroupNames(),
 		groups.get(groupName, { uid: req.uid, truncateUserList: true, userListCount: 20 }),
+		categories.buildForSelectAll(),
 	]);
 
 	if (!group) {
 		return next();
 	}
 	group.isOwner = true;
-
+	group.userTitleEscaped = translator.escape(group.userTitle);
 	const groupNameData = groupNames.map(function (name) {
 		return {
 			encodedName: encodeURIComponent(name),
@@ -53,8 +55,6 @@ groupsController.get = async function (req, res, next) {
 		};
 	});
 
-	const allCategories = await categories.buildForSelectAll();
-
 	res.render('admin/manage/group', {
 		group: group,
 		groupNames: groupNameData,

src/controllers/groups.js

@@ -9,6 +9,7 @@ const user = require('../user');
 const helpers = require('./helpers');
 const pagination = require('../pagination');
 const privileges = require('../privileges');
+const translator = require('../translator');
 
 const groupsController = module.exports;
 
@@ -72,7 +73,7 @@ groupsController.details = async function (req, res, next) {
 		return next();
 	}
 	groupData.isOwner = groupData.isOwner || isAdmin || (isGlobalMod && !groupData.system);
-
+	groupData.userTitleEscaped = translator.escape(groupData.userTitle);
 	res.render('groups/details', {
 		title: '[[pages:group, ' + groupData.displayName + ']]',
 		group: groupData,

src/views/admin/manage/group.tpl

@@ -17,7 +17,7 @@
 						<fieldset>
 							<label for="change-group-user-title">[[admin/manage/groups:edit.user-title]]</label>
 							<span id="group-label-preview" class="label label-default" style="color:<!-- IF group.textColor -->{group.textColor}<!-- ELSE -->#ffffff<!-- ENDIF group.textColor -->; background:<!-- IF group.labelColor -->{group.labelColor}<!-- ELSE -->#000000<!-- ENDIF group.labelColor -->;"><i id="group-icon-preview" class="fa {group.icon} <!-- IF !group.icon -->hidden<!-- ENDIF -->"></i> <span id="group-label-preview-text">{group.userTitle}</span></span>
-							<input type="text" class="form-control" id="change-group-user-title" placeholder="The title of users if they are a member of this group" value="{group.userTitle}" maxlength="{maximumGroupTitleLength}" data-property /><br />
+							<input type="text" class="form-control" id="change-group-user-title" placeholder="The title of users if they are a member of this group" value="{group.userTitleEscaped}" maxlength="{maximumGroupTitleLength}" data-property /><br />
 						</fieldset>
 					</div>
 					<div class="col-md-2">