fix: #7953, allow icon only group badges

public/src/admin/manage/group.js

@@ -14,6 +14,7 @@ define('admin/manage/group', [
 		var changeGroupLabelColor = $('#change-group-label-color');
 		var changeGroupTextColor = $('#change-group-text-color');
 		var groupLabelPreview = $('#group-label-preview');
+		var groupLabelPreviewText = $('#group-label-preview-text');
 
 		var groupName = ajaxify.data.group.name;
 
@@ -24,7 +25,7 @@ define('admin/manage/group', [
 		memberList.init('admin/manage/group');
 
 		changeGroupUserTitle.keyup(function () {
-			groupLabelPreview.text(changeGroupUserTitle.val());
+			groupLabelPreviewText.text(changeGroupUserTitle.val());
 		});
 
 		changeGroupLabelColor.keyup(function () {
@@ -79,7 +80,11 @@ define('admin/manage/group', [
 
 		$('#group-icon, #group-icon-label').on('click', function () {
 			iconSelect.init(groupIcon, function () {
-				$('#group-icon-preview').attr('class', 'fa fa-fw ' + (groupIcon.attr('value') || 'hidden'));
+				var newIcon = groupIcon.attr('value');
+				if (newIcon === 'fa-nbb-none') {
+					newIcon = 'hidden';
+				}
+				$('#group-icon-preview').attr('class', 'fa fa-fw ' + (newIcon || 'hidden'));
 			});
 		});
 

src/controllers/accounts/edit.js

@@ -51,6 +51,7 @@ editController.get = async function (req, res, next) {
 		return i1 - i2;
 	});
 	userData.groups.forEach(function (group) {
+		group.userTitle = group.userTitle || group.displayName;
 		group.selected = userData.groupTitleArray.includes(group.name);
 	});
 	userData.groupSelectSize = Math.min(10, Math.max(5, userData.groups.length + 1));

src/groups/data.js

@@ -99,6 +99,6 @@ function escapeGroupData(group) {
 		group.nameEncoded = encodeURIComponent(group.name);
 		group.displayName = validator.escape(String(group.name));
 		group.description = validator.escape(String(group.description || ''));
-		group.userTitle = validator.escape(String(group.userTitle || '')) || group.displayName;
+		group.userTitle = validator.escape(String(group.userTitle || ''));
 	}
 }

src/views/admin/manage/group.tpl

@@ -16,7 +16,7 @@
 					<div class="col-md-4">
 						<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 fa-fw {group.icon} <!-- IF !group.icon -->hidden<!-- ENDIF -->"></i> {group.userTitle}</span>
+							<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}" /><br />
 						</fieldset>
 					</div>