Merge 599cb06107 into 3cc7076513

Ticket/17517 Update eslint and lint all phpbb JS files

.github/check-js.sh

@@ -14,6 +14,6 @@ set +x
 sudo npm install -g > /dev/null
 npm ci > /dev/null
 set -x
-node_modules/eslint/bin/eslint.js "phpBB/**/*.js"
-node_modules/eslint/bin/eslint.js "phpBB/**/*.js.twig"
+node_modules/eslint/bin/eslint.js "phpBB/**/*.js" --ignore-pattern "phpBB/ext/"
+node_modules/eslint/bin/eslint.js "phpBB/**/*.js.twig" --ignore-pattern "phpBB/ext/"
 node_modules/eslint/bin/eslint.js "gulpfile.js"

eslint.config.mjs

@@ -0,0 +1,67 @@
+const { browser: browserGlobals, node: nodeGlobals, jquery: jqueryGlobals } = (await import('globals')).default;
+
+// File patterns to ignore
+const IGNORED_FILES = [
+	'phpBB/assets/javascript/cropper.js',
+	'phpBB/assets/javascript/hermite.js',
+	'phpBB/assets/javascript/jquery-cropper.js',
+	'phpBB/**/*.min.js',
+	'phpBB/vendor/**/*.js',
+	'phpBB/vendor-ext/**/*.js',
+	'phpBB/phpbb/**/*.js',
+	'phpBB/tests/**/*.js',
+];
+
+// ESLint rule configurations
+const FORMATTING_RULES = {
+	'quotes': ['error', 'single'],
+	'comma-dangle': ['error', 'always-multiline'],
+	'block-spacing': 'error',
+	'array-bracket-spacing': ['error', 'always'],
+	'object-curly-spacing': ['error', 'always'],
+	'space-before-function-paren': ['error', 'never'],
+	'space-in-parens': 'off',
+};
+
+const CODE_QUALITY_RULES = {
+	'semi': ['error', 'always'],
+	'eqeqeq': ['error', 'always'],
+	'curly': ['error', 'multi-line'],
+	'no-var': 'error',
+	'prefer-const': 'error',
+	'no-console': 'off',
+	'no-unused-vars': ['error', { argsIgnorePattern: '^_', varsIgnorePattern: '^_' }],
+};
+
+const DISABLED_STYLE_RULES = {
+	'multiline-comment-style': 'off',
+	'computed-property-spacing': 'off',
+	'capitalized-comments': 'off',
+	'no-lonely-if': 'off',
+};
+
+const mainConfig = {
+	files: ['**/*.js', '**/*.js.twig'],
+	linterOptions: {
+		reportUnusedDisableDirectives: false,
+	},
+	languageOptions: {
+		ecmaVersion: 'latest',
+		sourceType: 'module',
+		globals: {
+			...browserGlobals,
+			...nodeGlobals,
+			...jqueryGlobals,
+		},
+	},
+	rules: {
+		...FORMATTING_RULES,
+		...CODE_QUALITY_RULES,
+		...DISABLED_STYLE_RULES,
+	},
+};
+
+export default [
+	{ ignores: IGNORED_FILES },
+	mainConfig,
+];

package.json

@@ -6,65 +6,6 @@
 	"directories": {
 		"doc": "docs"
 	},
-	"eslintConfig": {
-		"extends": "xo",
-		"ignorePatterns": [
-			"phpBB/adm/style/admin.js",
-			"phpBB/adm/style/ajax.js",
-			"phpBB/adm/style/permissions.js",
-			"phpBB/adm/style/tooltip.js",
-			"phpBB/assets/javascript/core.js",
-			"phpBB/assets/javascript/cropper.js",
-			"phpBB/assets/javascript/editor.js",
-			"phpBB/assets/javascript/hermite.js",
-			"phpBB/assets/javascript/installer.js",
-			"phpBB/assets/javascript/jquery-cropper.js",
-			"phpBB/assets/javascript/plupload.js",
-			"phpBB/ext/**/*.js",
-			"phpBB/styles/prosilver/template/ajax.js",
-			"phpBB/styles/prosilver/template/forum_fn.js",
-			"phpBB/**/*.min.js",
-			"phpBB/vendor/**/*.js",
-			"phpBB/vendor-ext/**/*.js",
-			"phpBB/phpbb/**/*.js",
-			"phpBB/tests/**/*.js"
-		],
-		"rules": {
-			"quotes": [
-				"error",
-				"single"
-			],
-			"comma-dangle": [
-				"error",
-				"always-multiline"
-			],
-			"block-spacing": "error",
-			"array-bracket-spacing": [
-				"error",
-				"always"
-			],
-			"multiline-comment-style": "off",
-			"computed-property-spacing": "off",
-			"space-before-function-paren": [
-				"error",
-				"never"
-			],
-			"space-in-parens": "off",
-			"capitalized-comments": "off",
-			"object-curly-spacing": [
-				"error",
-				"always"
-			],
-			"no-lonely-if": "off",
-			"unicorn/prefer-module": "off"
-		},
-		"env": {
-			"es6": true,
-			"browser": true,
-			"node": true,
-			"jquery": true
-		}
-	},
 	"browserslist": [
 		"> 1%",
 		"not ie 11",
@@ -101,8 +42,8 @@
 	"devDependencies": {
 		"autoprefixer": "^10.4.4",
 		"cssnano": "^5.1.7",
-		"eslint": "^8.13.0",
-		"eslint-config-xo": "^0.40.0",
+		"eslint": "^9.28.0",
+		"globals": "^16.2.0",
 		"gulp": "^5.0.0",
 		"gulp-concat": "^2.6.1",
 		"gulp-postcss": "^9.0.1",

phpBB/adm/style/acp_profile.html

@@ -91,6 +91,12 @@
 			<dd><input type="checkbox" class="radio" id="field_is_contact" name="field_is_contact" value="1"<!-- IF S_FIELD_CONTACT --> checked="checked"<!-- ENDIF --> /></dd>
 			<dd><input class="text medium" type="text" name="field_contact_desc" id="field_contact_desc" value="{FIELD_CONTACT_DESC}" /> <label for="field_contact_desc">{L_FIELD_CONTACT_DESC}</label></dd>
 			<dd><input class="text medium" type="text" name="field_contact_url" id="field_contact_url" value="{FIELD_CONTACT_URL}" /> <label for="field_contact_url">{L_FIELD_CONTACT_URL}</label></dd>
+			<dt><label for="field_icon">{{ lang('FIELD_ICON') ~ lang('COLON') }}</label><br /><span>{{ lang('FIELD_ICON_EXPLAIN') }}</span></dt>
+			<dd><input name="field_icon" id="field_icon" type="text" size="15" maxlength="255" value="{{ FIELD_ICON }}" placeholder="{{ lang('FIELD_ICON') }}" />{{ Icon('font', FIELD_ICON, '', true, 'acp-icon', {'style': 'margin:0 6px;' ~ (FIELD_ICON_COLOR ? (' color: #' ~ FIELD_ICON_COLOR ~ ';') : '')}) }}</dd>
+			<dd>
+				<input name="field_icon_color" type="text" id="contact_field_icon_bgcolor" value="{{ FIELD_ICON_COLOR }}" size="7" maxlength="6" placeholder="{{ lang('FIELD_ICON_COLOR') }}" />
+				<input type="color" id="field_icon_color_picker" aria-label="{{ lang('FIELD_ICON_COLOR') }}">
+			</dd>
 			<!-- EVENT acp_profile_contact_last -->
 		</dl>
 		{% EVENT acp_profile_contact_after %}

phpBB/adm/style/admin.css

@@ -3152,3 +3152,29 @@ span + .o-icon {
 .acp-icon-disabled {
 	color: #d0d0d0;
 }
+
+
+input[type="color"] {
+	background-color: transparent;
+	border: solid 1px #d3d3d3;
+	border-radius: 50%;
+	width: 24px;
+	height: 24px;
+	padding: 2px;
+	cursor: pointer;
+	-webkit-appearance: none;
+}
+
+input[type="color"]::-webkit-color-swatch-wrapper {
+	padding: 0;
+}
+
+input[type="color"]::-webkit-color-swatch {
+	border: 0;
+	border-radius: 50%;
+}
+
+input[type="color"]::-moz-color-swatch {
+	border: 0;
+	border-radius: 50%;
+}

phpBB/adm/style/admin.js

@@ -1,4 +1,6 @@
 /* global phpbb */
+/* eslint no-var: 0 */
+/* eslint no-unused-vars: 0 */
 
 /**
 * phpBB ACP functions
@@ -10,7 +12,7 @@
 function parse_document(container)
 {
 	var test = document.createElement('div'),
-		oldBrowser = (typeof test.style.borderRadius == 'undefined');
+		oldBrowser = (typeof test.style.borderRadius === 'undefined');
 
 	test.remove();
 
@@ -79,7 +81,7 @@ function parse_document(container)
 					dfn = cell.attr('data-dfn'),
 					text = dfn ? dfn : $.trim(cell.text());
 
-				if (text == ' ') text = '';
+				if (text === ' ') text = '';
 				colspan = isNaN(colspan) || colspan < 1 ? 1 : colspan;
 
 				for (i=0; i<colspan; i++) {
@@ -108,7 +110,7 @@ function parse_document(container)
 				cells = row.children('td'),
 				column = 0;
 
-			if (cells.length == 1) {
+			if (cells.length === 1) {
 				row.addClass('big-column');
 				return;
 			}
@@ -124,7 +126,7 @@ function parse_document(container)
 
 				if ((text.length && text !== '-') || cell.children().length) {
 					if (headers[column].length) {
-						cell.prepend($("<dfn>").css('display', 'none').text(headers[column]));
+						cell.prepend($('<dfn>').css('display', 'none').text(headers[column]));
 					}
 				}
 				else {
@@ -156,7 +158,7 @@ function parse_document(container)
 	*/
 	container.find('fieldset dt > span:last-child').each(function() {
 		var $this = $(this);
-		if ($this.html() == '&nbsp;') {
+		if ($this.html() === '&nbsp;') {
 			$this.addClass('responsive-hide');
 		}
 	});
@@ -194,7 +196,7 @@ function parse_document(container)
 		links.each(function() {
 			var link = $(this);
 			maxHeight = Math.max(maxHeight, Math.max(link.outerHeight(true), link.parent().outerHeight(true)));
-		})
+		});
 
 		function check() {
 			var width = $body.width(),
@@ -244,6 +246,67 @@ function parse_document(container)
 	});
 }
 
+/**
+* Automatically display custom profile fields FontAwesome icon
+*/
+const DEFAULT_COLOR = '#000000';
+const HEX_REGEX = /^#[A-Fa-f0-9]{6}$/;
+const colorPicker = document.getElementById('field_icon_color_picker');
+const colorText = colorPicker.previousElementSibling;
+
+const syncColors = (source, target) => {
+	const value = '#' + source.value.trim();
+	target.value = HEX_REGEX.test(value) ? value : DEFAULT_COLOR;
+};
+
+const handleInput = ({ target }) => {
+	if (target === colorPicker) {
+		colorText.value = target.value.substring(1);
+	} else {
+		syncColors(colorText, colorPicker);
+	}
+	const icon = field_icon?.nextElementSibling;
+	if (icon && icon.tagName.toLowerCase() === 'i') {
+		icon.style.color = colorPicker.value;
+	}
+};
+
+colorPicker.addEventListener('input', handleInput);
+colorText.addEventListener('input', handleInput);
+colorText.addEventListener('blur', () => {
+	if (!colorText.value.trim()) {
+		colorPicker.value = DEFAULT_COLOR;
+	}
+});
+syncColors(colorText, colorPicker);
+
+var field_icon = document.getElementById('field_icon');
+if (!field_icon.nextElementSibling) {
+	icon_demo = document.createElement('i');
+	icon_demo.setAttribute('style', `margin:0 6px; color: ${colorPicker.value}`);
+	icon_demo.setAttribute('class', `o-icon o-icon-font fa-fw fas acp-icon`);
+	field_icon.after(icon_demo);
+}
+
+const updateIconClass = (element, newClass) => {
+
+	element.classList.forEach(className => {
+		if (className.startsWith('fa-') && className !== 'fa-fw') {
+			element.classList.remove(className);
+		}
+	});
+
+	element.classList.add(`fa-${newClass}`);
+};
+
+field_icon.addEventListener('keyup', function() {
+	updateIconClass(this.nextElementSibling, this.value);
+});
+
+field_icon.addEventListener('blur', function() {
+	updateIconClass(this.nextElementSibling, this.value);
+});
+
 /**
 * Run onload functions
 */
@@ -273,7 +336,7 @@ function parse_document(container)
 
 		// Do not underline actions icons on hover (could not be done via CSS)
 		$('.actions a:has(i.acp-icon)').mouseover(function() {
-			$(this).css("text-decoration", "none");
+			$(this).css('text-decoration', 'none');
 		});
 
 		// Live update BBCode font icon preview

phpBB/adm/style/ajax.js

@@ -1,4 +1,5 @@
 /* global phpbb, statsData */
+/* eslint no-var: 0 */
 
 (function($) {  // Avoid conflicts with other libraries
 
@@ -74,7 +75,7 @@ phpbb.prepareSendStats = function () {
 			var $sendStatisticsSuccess = $('<input />', {
 				type: 'hidden',
 				name: 'send_statistics_response',
-				value: JSON.stringify(res)
+				value: JSON.stringify(res),
 			});
 			$sendStatisticsSuccess.appendTo('p.submit-buttons');
 
@@ -90,7 +91,7 @@ phpbb.prepareSendStats = function () {
 			data: statsData,
 			success: returnHandler,
 			error: errorHandler,
-			cache: false
+			cache: false,
 		}).always(function() {
 			if ($loadingIndicator && $loadingIndicator.is(':visible')) {
 				$loadingIndicator.fadeOut(phpbb.alertTime);
@@ -176,7 +177,7 @@ phpbb.addAjaxCallback('generate_vapid_keys', () => {
 					namedCurve: 'P-256',
 				},
 				true,
-				['deriveKey', 'deriveBits']
+				[ 'deriveKey', 'deriveBits' ],
 			);
 
 			const privateKeyJwk = await crypto.subtle.exportKey('jwk', keyPair.privateKey);
@@ -187,7 +188,7 @@ phpbb.addAjaxCallback('generate_vapid_keys', () => {
 
 			return {
 				privateKey: privateKeyString,
-				publicKey: publicKeyString
+				publicKey: publicKeyString,
 			};
 		} catch (error) {
 			console.error('Error generating keys with SubtleCrypto:', error);
@@ -203,8 +204,8 @@ phpbb.addAjaxCallback('generate_vapid_keys', () => {
 		const privateKeyInput = document.querySelector('#webpush_vapid_private');
 		publicKeyInput.value = keyPair.publicKey;
 		privateKeyInput.value = keyPair.privateKey;
-	})
-})
+	});
+});
 
 /**
  * Handler for submitting permissions form in chunks
@@ -286,14 +287,14 @@ function submitPermissions() {
 					$alertBoxLink.attr('href', $alertBoxLink.attr('href').replace(/(&forum_id\[\]=[0-9]+)/g, ''));
 					const $previousPageForm = $('<form>').attr({
 						action: $alertBoxLink.attr('href'),
-						method: 'post'
+						method: 'post',
 					});
 
 					$.each(forumIds, function(key, value) {
 						$previousPageForm.append($('<input>').attr({
 							type: 'text',
 							name: 'forum_id[]',
-							value: value
+							value: value,
 						}));
 					});
 
@@ -314,14 +315,14 @@ function submitPermissions() {
 						// exceeding the maximum length of URLs
 						const $form = $('<form>').attr({
 							action: res.REFRESH_DATA.url.replace(/(&forum_id\[\]=[0-9]+)/g, ''),
-							method: 'post'
+							method: 'post',
 						});
 
 						$.each(forumIds, function(key, value) {
 							$form.append($('<input>').attr({
 								type: 'text',
 								name: 'forum_id[]',
-								value: value
+								value: value,
 							}));
 						});
 
@@ -365,7 +366,7 @@ function submitPermissions() {
 				'&' + $form.children('input[type=hidden]').serialize() +
 				'&' + $form.find('input[type=checkbox][name^=inherit]').serialize(),
 			success: handlePermissionReturn,
-			error: handlePermissionReturn
+			error: handlePermissionReturn,
 		});
 	});
 }
@@ -379,7 +380,7 @@ $('[data-ajax]').each(function() {
 		phpbb.ajaxify({
 			selector: this,
 			refresh: $this.attr('data-refresh') !== undefined,
-			callback: fn
+			callback: fn,
 		});
 	}
 });
@@ -412,7 +413,7 @@ $(function() {
 			} else {
 				dateoptionInput.value = this.value;
 			}
-		})
+		});
 	}
 
 	if ($('#acp_help_phpbb')) {

phpBB/adm/style/permissions.js

@@ -1,4 +1,8 @@
 /* global phpbb */
+/* eslint camelcase: 0 */
+/* eslint no-undef: 0 */
+/* eslint no-unused-vars: 0 */
+/* eslint no-var: 0 */
 
 /**
 * Hide and show all checkboxes

phpBB/adm/style/tooltip.js

@@ -1,4 +1,5 @@
 /* global phpbb */
+/* eslint no-var: 0 */
 
 /*
 javascript for Bubble Tooltips by Alessandro Fulciniti
@@ -30,8 +31,8 @@ phpbb.enableTooltipsSelect = function (id, headline, subId) {
 	hold = $('<span />', {
 		id:		'_tooltip_container',
 		css: {
-			position: 'absolute'
-		}
+			position: 'absolute',
+		},
 	});
 
 	$('body').append(hold);
@@ -73,8 +74,8 @@ phpbb.prepareTooltips = function ($element, headText) {
 	$title = $('<span />', {
 		class: 'top',
 		css: {
-			display:	'block'
-		}
+			display:	'block',
+		},
 	})
 		.append(document.createTextNode(headText));
 
@@ -82,15 +83,15 @@ phpbb.prepareTooltips = function ($element, headText) {
 		class: 'bottom',
 		html: text,
 		css: {
-			display: 'block'
-		}
+			display: 'block',
+		},
 	});
 
 	$tooltip = $('<span />', {
 		class: 'tooltip',
 		css: {
-			display: 'block'
-		}
+			display: 'block',
+		},
 	})
 		.append($title)
 		.append($desc);
@@ -135,12 +136,12 @@ phpbb.positionTooltip = function ($element) {
 	if ($('body').hasClass('rtl')) {
 		$('#_tooltip_container').css({
 			top: offset.top + 30,
-			left: offset.left + 255
+			left: offset.left + 255,
 		});
 	} else {
 		$('#_tooltip_container').css({
 			top: offset.top + 30,
-			left: offset.left - 205
+			left: offset.left - 205,
 		});
 	}
 };

phpBB/assets/javascript/core.js

@@ -1,4 +1,6 @@
 /* global bbfontstyle */
+/* eslint no-var: 0 */
+/* eslint no-unused-vars: 0 */
 
 var phpbb = {};
 phpbb.alertTime = 100;
@@ -13,7 +15,7 @@ var keymap = {
 	ENTER: 13,
 	ESC: 27,
 	ARROW_UP: 38,
-	ARROW_DOWN: 40
+	ARROW_DOWN: 40,
 };
 
 var $dark = $('#darkenwrapper');
@@ -363,7 +365,7 @@ phpbb.ajaxify = function(options) {
 						type: 'POST',
 						data: data + '&confirm=' + res.YES_VALUE + '&' + $('form', '#phpbb_confirm').serialize(),
 						success: returnHandler,
-						error: errorHandler
+						error: errorHandler,
 					});
 				}, false);
 			}
@@ -383,7 +385,7 @@ phpbb.ajaxify = function(options) {
 				submit = $this.find('input[type="submit"][data-clicked]');
 				data.push({
 					name: submit.attr('name'),
-					value: submit.val()
+					value: submit.val(),
 				});
 			}
 		} else if (isText) {
@@ -409,7 +411,7 @@ phpbb.ajaxify = function(options) {
 				data: data,
 				success: returnHandler,
 				error: errorHandler,
-				cache: false
+				cache: false,
 			});
 
 			request.always(function() {
@@ -445,10 +447,10 @@ phpbb.ajaxify = function(options) {
 
 phpbb.search = {
 	cache: {
-		data: []
+		data: [],
 	},
 	tpl: [],
-	container: []
+	container: [],
 };
 
 /**
@@ -609,7 +611,7 @@ phpbb.search.filter = function(data, event, sendRequest) {
 				if (cache.results[keyword]) {
 					var response = {
 						keyword: keyword,
-						results: cache.results[keyword]
+						results: cache.results[keyword],
 					};
 					phpbb.search.handleResponse(response, $this, true);
 					proceed = false;
@@ -1079,7 +1081,7 @@ phpbb.addAjaxCallback('toggle_link', function() {
 		$this.attr('href', toggleUrl);
 
 		// Toggle Icon
-		$this.children().first().toggleClass('is-active').next().toggleClass('is-active')
+		$this.children().first().toggleClass('is-active').next().toggleClass('is-active');
 	});
 });
 
@@ -1113,7 +1115,7 @@ phpbb.resizeTextArea = function($items, options) {
 		maxHeight: 500,
 		heightDiff: 200,
 		resizeCallback: function() {},
-		resetCallback: function() {}
+		resetCallback: function() {},
 	};
 
 	if (phpbb.isTouch) {
@@ -1152,7 +1154,7 @@ phpbb.resizeTextArea = function($items, options) {
 
 		var maxHeight = Math.min(
 				Math.max(windowHeight - configuration.heightDiff, configuration.minHeight),
-				configuration.maxHeight
+				configuration.maxHeight,
 			),
 			$item = $(item),
 			height = parseInt($item.innerHeight(), 10),
@@ -1434,7 +1436,7 @@ phpbb.toggleDropdown = function(event_) {
 				marginLeft: 0,
 				left: 0,
 				marginRight: 0,
-				maxWidth: (windowWidth - 4) + 'px'
+				maxWidth: (windowWidth - 4) + 'px',
 			});
 
 			var offset = $this.offset().left,
@@ -1468,7 +1470,7 @@ phpbb.toggleDropdown = function(event_) {
 				var maxOffset = Math.min(contentWidth, fullFreeSpace) + 'px';
 				options.dropdown.css({
 					width: maxOffset,
-					marginLeft: -maxOffset
+					marginLeft: -maxOffset,
 				});
 			}
 		} else {
@@ -1512,7 +1514,7 @@ phpbb.registerDropdown = function(toggle, dropdown, options) {
 			leftClass: 'dropdown-left', // Class to add to parent item when dropdown opens to left side
 			rightClass: 'dropdown-right', // Class to add to parent item when dropdown opens to right side
 			upClass: 'dropdown-up', // Class to add to parent item when dropdown opens above menu item
-			downClass: 'dropdown-down' // Class to add to parent item when dropdown opens below menu item
+			downClass: 'dropdown-down', // Class to add to parent item when dropdown opens below menu item
 		};
 	if (options) {
 		ops = $.extend(ops, options);
@@ -1716,7 +1718,7 @@ phpbb.registerPageDropdowns = function() {
 			$contents = $this.find('.dropdown'),
 			options = {
 				direction: 'auto',
-				verticalDirection: 'auto'
+				verticalDirection: 'auto',
 			},
 			data;
 
@@ -1795,7 +1797,7 @@ phpbb.getEditorTextArea = function(formName, textareaName) {
 	}
 
 	return doc.forms[formName].elements[textareaName];
-}
+};
 
 phpbb.recaptcha = {
 	button: null,
@@ -1826,7 +1828,7 @@ phpbb.recaptcha = {
 				if (phpbb.recaptcha.v3.length) {
 					grecaptcha.execute(
 						phpbb.recaptcha.v3.data('recaptcha-v3'),
-						{action: phpbb.recaptcha.v3.val()}
+						{ action: phpbb.recaptcha.v3.val() },
 					).then(function(token) {
 						// Place the token inside the form
 						phpbb.recaptcha.token.val(token);
@@ -1860,7 +1862,7 @@ phpbb.recaptcha = {
 
 			phpbb.recaptcha.form.submit();
 		}
-	}
+	},
 };
 
 // reCAPTCHA v2 doesn't accept callback functions nested inside objects

phpBB/assets/javascript/editor.js

@@ -1,4 +1,8 @@
 /* global phpbb */
+/* eslint camelcase: 0 */
+/* eslint no-undef: 0 */
+/* eslint no-unused-vars: 0 */
+/* eslint no-var: 0 */
 
 /**
 * bbCode control by subBlue design [ www.subBlue.com ]
@@ -100,7 +104,7 @@ function bbfontstyle(bbopen, bbclose) {
 	// IE
 	else if (document.selection) {
 		var range = textarea.createTextRange();
-		range.move("character", new_pos);
+		range.move('character', new_pos);
 		range.select();
 		storeCaret(textarea);
 	}
@@ -271,7 +275,7 @@ function formatAttributeValue(str) {
 		// Return as-is if it contains none of: space, ' " \ or ]
 		return str;
 	}
-	var singleQuoted = "'" + str.replace(/[\\']/g, '\\$&') + "'",
+	var singleQuoted = '\'' + str.replace(/[\\']/g, '\\$&') + '\'',
 		doubleQuoted = '"' + str.replace(/[\\"]/g, '\\$&') + '"';
 
 	return (singleQuoted.length < doubleQuoted.length) ? singleQuoted : doubleQuoted;

phpBB/assets/javascript/installer.js

@@ -2,6 +2,9 @@
  * Installer's AJAX frontend handler
  */
 
+/* eslint no-prototype-builtins: 0 */
+/* eslint no-var: 0 */
+
 (function($) { // Avoid conflicts with other libraries
 	'use strict';
 
@@ -361,8 +364,8 @@
 			addMessage('error',
 				[ {
 					title: installLang.title,
-					description: installLang.msg
-				}]
+					description: installLang.msg,
+				} ],
 			);
 		}
 	}

phpBB/assets/javascript/plupload.js

@@ -1,4 +1,7 @@
 /* global phpbb, plupload, attachInline */
+/* eslint camelcase: 0 */
+/* eslint no-var: 0 */
+/* eslint no-unused-vars: 0 */
 
 plupload.addI18n(phpbb.plupload.i18n);
 phpbb.plupload.ids = [];
@@ -21,7 +24,7 @@ phpbb.plupload.initialize = function() {
 	// Only execute if Plupload initialized successfully.
 	phpbb.plupload.uploader.bind('Init', function() {
 		phpbb.plupload.form = $(phpbb.plupload.config.form_hook)[0];
-		let $attachRowTemplate = $('#attach-row-tpl');
+		const $attachRowTemplate = $('#attach-row-tpl');
 		$attachRowTemplate.removeClass('attach-row-tpl');
 		phpbb.plupload.rowTpl = $attachRowTemplate[0].outerHTML;
 
@@ -300,7 +303,7 @@ phpbb.plupload.deleteFile = function(row, attachId) {
 	$.ajax(phpbb.plupload.config.url, {
 		type: 'POST',
 		data: $.extend(fields, phpbb.plupload.getSerializedData()),
-		headers: phpbb.plupload.config.headers
+		headers: phpbb.plupload.config.headers,
 	})
 	.always(always)
 	.done(done);
@@ -452,7 +455,7 @@ phpbb.plupload.fileError = function(file, error) {
 		.addClass('file-error')
 		.attr({
 			'data-error-title': phpbb.plupload.lang.ERROR,
-			'data-error-message': error
+			'data-error-message': error,
 		});
 };
 
@@ -469,14 +472,14 @@ phpbb.plupload.initialize();
 plupload.addFileFilter('mime_types_max_file_size', function(types, file, callback) {
 	if (file.size !== 'undefined') {
 		$(types).each(function(i, type) {
-			let extensions = [],
+			const extensions = [],
 				extsArray = type.extensions.split(',');
 
 			$(extsArray).each(function(i, extension) {
-				/^\s*\*\s*$/.test(extension) ? extensions.push("\\.*") : extensions.push("\\." + extension.replace(new RegExp("[" + "/^$.*+?|()[]{}\\".replace(/./g, "\\$&") + "]", "g"), "\\$&"));
+				/^\s*\*\s*$/.test(extension) ? extensions.push('\\.*') : extensions.push('\\.' + extension.replace(new RegExp('[' + '/^$.*+?|()[]{}\\'.replace(/./g, '\\$&') + ']', 'g'), '\\$&'));
 			});
 
-			let regex = new RegExp("(" + extensions.join("|") + ")$", "i");
+			const regex = new RegExp('(' + extensions.join('|') + ')$', 'i');
 
 			if (regex.test(file.name)) {
 				if (type.max_file_size !== 'undefined' && type.max_file_size) {
@@ -484,7 +487,7 @@ plupload.addFileFilter('mime_types_max_file_size', function(types, file, callbac
 						phpbb.plupload.uploader.trigger('Error', {
 							code: plupload.FILE_SIZE_ERROR,
 							message: plupload.translate('File size error.'),
-							file: file
+							file: file,
 						});
 
 						callback(false);
@@ -587,9 +590,9 @@ phpbb.plupload.uploader.bind('ChunkUploaded', function(up, file, response) {
 		up.trigger('FileUploaded', file, {
 			response: JSON.stringify({
 				error: {
-					message: 'Error parsing server response.'
-				}
-			})
+					message: 'Error parsing server response.',
+				},
+			}),
 		});
 	}
 
@@ -603,9 +606,9 @@ phpbb.plupload.uploader.bind('ChunkUploaded', function(up, file, response) {
 		up.trigger('FileUploaded', file, {
 			response: JSON.stringify({
 				error: {
-					message: json.error.message
-				}
-			})
+					message: json.error.message,
+				},
+			}),
 		});
 	}
 });

phpBB/includes/acp/acp_profile.php

@@ -360,6 +360,7 @@ class acp_profile
 					$field_row = array_merge($profile_field->get_default_option_values(), array(
 						'field_ident'		=> str_replace(' ', '_', utf8_clean_string($request->variable('field_ident', '', true))),
 						'field_required'	=> 0,
+						'field_icon'		=> json_encode(['name' => '', 'color' => '']),
 						'field_show_novalue'=> 0,
 						'field_hide'		=> 0,
 						'field_show_profile'=> 0,
@@ -381,7 +382,7 @@ class acp_profile
 
 				// $exclude contains the data we gather in each step
 				$exclude = array(
-					1	=> array('field_ident', 'lang_name', 'lang_explain', 'field_option_none', 'field_show_on_reg', 'field_show_on_pm', 'field_show_on_vt', 'field_show_on_ml', 'field_required', 'field_show_novalue', 'field_hide', 'field_show_profile', 'field_no_view', 'field_is_contact', 'field_contact_desc', 'field_contact_url'),
+					1	=> array('field_ident', 'field_icon', 'field_icon_color', 'lang_name', 'lang_explain', 'field_option_none', 'field_show_on_reg', 'field_show_on_pm', 'field_show_on_vt', 'field_show_on_ml', 'field_required', 'field_show_novalue', 'field_hide', 'field_show_profile', 'field_no_view', 'field_is_contact', 'field_contact_desc', 'field_contact_url'),
 					2	=> array('field_length', 'field_maxlen', 'field_minlen', 'field_validation', 'field_novalue', 'field_default_value'),
 					3	=> array('l_lang_name', 'l_lang_explain', 'l_lang_default_value', 'l_lang_options')
 				);
@@ -427,6 +428,13 @@ class acp_profile
 
 				$options = $profile_field->prepare_options_form($exclude, $visibility_ary);
 
+				$field_icon_data = json_decode($field_row['field_icon'], true);
+				$field_icon_name = $request->variable('field_icon', $field_icon_data['name'] ?: '');
+				$field_icon_color = $field_icon_name ? $request->variable('field_icon_color', $field_icon_data['color'] ?: '') : '';
+				$cp->vars['field_icon']			= json_encode([
+					'name'	=> $field_icon_name,
+					'color'	=> $field_icon_color,
+				]);
 				$cp->vars['field_ident']		= ($action == 'create' && $step == 1) ? utf8_clean_string($request->variable('field_ident', $field_row['field_ident'], true)) : $request->variable('field_ident', $field_row['field_ident']);
 				$cp->vars['lang_name']			= $request->variable('lang_name', $field_row['lang_name'], true);
 				$cp->vars['lang_explain']		= $request->variable('lang_explain', $field_row['lang_explain'], true);
@@ -630,6 +638,7 @@ class acp_profile
 				{
 					// Create basic options - only small differences between field types
 					case 1:
+						$field_icon_data = json_decode($cp->vars['field_icon'], true);
 						$template_vars = array(
 							'S_STEP_ONE'		=> true,
 							'S_FIELD_REQUIRED'	=> ($cp->vars['field_required']) ? true : false,
@@ -648,6 +657,8 @@ class acp_profile
 							'L_LANG_SPECIFIC'	=> sprintf($user->lang['LANG_SPECIFIC_OPTIONS'], $config['default_lang']),
 							'FIELD_TYPE'		=> $profile_field->get_name(),
 							'FIELD_IDENT'		=> $cp->vars['field_ident'],
+							'FIELD_ICON'		=> $field_icon_data['name'],
+							'FIELD_ICON_COLOR'	=> $field_icon_data['color'],
 							'LANG_NAME'			=> $cp->vars['lang_name'],
 							'LANG_EXPLAIN'		=> $cp->vars['lang_explain'],
 						);
@@ -984,6 +995,7 @@ class acp_profile
 			'field_is_contact'		=> $cp->vars['field_is_contact'],
 			'field_contact_desc'	=> $cp->vars['field_contact_desc'],
 			'field_contact_url'		=> $cp->vars['field_contact_url'],
+			'field_icon'			=> $cp->vars['field_icon'],
 		);
 
 		$field_data = $cp->vars;

phpBB/includes/ucp/ucp_pm_viewmessage.php

@@ -373,8 +373,11 @@ function view_message($id, $mode, $folder_id, $msg_id, $folder, $message_row)
 
 			if ($cp_block_row['S_PROFILE_CONTACT'])
 			{
+				$icon_data = json_decode($cp_block_row['PROFILE_FIELD_ICON'], true);
 				$template->assign_block_vars('contact', array(
 					'ID'		=> $cp_block_row['PROFILE_FIELD_IDENT'],
+					'ICON'		=> $icon_data['name'],
+					'ICON_COLOR'=> $icon_data['color'],
 					'NAME'		=> $cp_block_row['PROFILE_FIELD_NAME'],
 					'U_CONTACT'	=> $cp_block_row['PROFILE_FIELD_CONTACT'],
 				));

phpBB/language/en/acp/profile.php

@@ -93,6 +93,9 @@ $lang = array_merge($lang, array(
 	'FIELD_DESCRIPTION'			=> 'Field description',
 	'FIELD_DESCRIPTION_EXPLAIN'	=> 'The explanation for this field presented to the user.',
 	'FIELD_DROPDOWN'			=> 'Dropdown box',
+	'FIELD_ICON'				=> 'Field icon',
+	'FIELD_ICON_COLOR'			=> 'Icon colour',
+	'FIELD_ICON_EXPLAIN'		=> 'Enter a Font Awesome icon name to display with this contact field. Optionally, set its colour using a 6-digit hex code or the colour picker. Leave blank to use phpBB’s default icon and clear the colour.',
 	'FIELD_IDENT'				=> 'Field identification',
 	'FIELD_IDENT_ALREADY_EXIST'	=> 'The chosen field identification already exist. Please choose another name.',
 	'FIELD_IDENT_EXPLAIN'		=> 'The field identification is a name to identify the profile field within the database and the templates.',

phpBB/phpbb/db/migration/data/v400/custom_profile_field_contact_icon.php

@@ -0,0 +1,51 @@
+<?php
+/**
+ *
+ * This file is part of the phpBB Forum Software package.
+ *
+ * @copyright (c) phpBB Limited <https://www.phpbb.com>
+ * @license GNU General Public License, version 2 (GPL-2.0)
+ *
+ * For full copyright and license information, please see
+ * the docs/CREDITS.txt file.
+ *
+ */
+
+namespace phpbb\db\migration\data\v400;
+
+class custom_profile_field_contact_icon extends \phpbb\db\migration\migration
+{
+	public function effectively_installed()
+	{
+		return $this->db_tools->sql_column_exists($this->table_prefix . 'profile_fields', 'field_icon');
+	}
+
+	public static function depends_on()
+	{
+		return [
+			'\phpbb\db\migration\data\v400\dev',
+		];
+	}
+
+	public function update_schema()
+	{
+		return array(
+			'add_columns'	=> [
+				$this->table_prefix . 'profile_fields'	=> [
+					'field_icon'	=> array('VCHAR:255', json_encode(['name' => '', 'color' => ''])),
+				],
+			],
+		);
+	}
+
+	public function revert_schema()
+	{
+		return array(
+			'drop_columns'	=> array(
+				$this->table_prefix . 'profile_fields'	=> array(
+					'field_icon',
+				),
+			),
+		);
+	}
+}

phpBB/phpbb/profilefields/manager.php

@@ -332,6 +332,7 @@ class manager
 
 			$tpl_fields[] = [
 				'PROFILE_FIELD_IDENT'	=> $field_ident,
+				'PROFILE_FIELD_ICON'	=> $field_data['field_icon'],
 				'PROFILE_FIELD_TYPE'	=> $field_data['field_type'],
 				'PROFILE_FIELD_NAME'	=> $profile_field->get_field_name($field_data['lang_name']),
 				'PROFILE_FIELD_EXPLAIN'	=> $this->language->lang($field_data['lang_explain']),
@@ -484,6 +485,7 @@ class manager
 
 			$tpl_fields['row'] += [
 				"PROFILE_{$ident_upper}_IDENT"		=> $ident,
+				"PROFILE_{$ident_upper}_ICON"		=> $ident_ary['data']['field_icon'],
 				"PROFILE_{$ident_upper}_VALUE"		=> $value,
 				"PROFILE_{$ident_upper}_VALUE_RAW"	=> $value_raw,
 				"PROFILE_{$ident_upper}_CONTACT"	=> $contact_url,
@@ -498,6 +500,7 @@ class manager
 
 			$tpl_fields['blockrow'][] = [
 				'PROFILE_FIELD_IDENT'		=> $ident,
+				'PROFILE_FIELD_ICON'		=> $ident_ary['data']['field_icon'],
 				'PROFILE_FIELD_VALUE'		=> $value,
 				'PROFILE_FIELD_VALUE_RAW'	=> $value_raw,
 				'PROFILE_FIELD_CONTACT'		=> $contact_url,

phpBB/styles/prosilver/template/ajax.js

@@ -1,4 +1,6 @@
 /* global phpbb */
+/* eslint camelcase: 0 */
+/* eslint no-var: 0 */
 
 (function($) {  // Avoid conflicts with other libraries
 
@@ -11,7 +13,7 @@ phpbb.addAjaxCallback('mark_forums_read', function(res) {
 	var iconsArray = {
 		forum_unread: 'forum_read',
 		forum_unread_subforum: 'forum_read_subforum',
-		forum_unread_locked: 'forum_read_locked'
+		forum_unread_locked: 'forum_read_locked',
 	};
 
 	$('li.row').find('dl[class*="forum_unread"]').each(function() {
@@ -52,7 +54,7 @@ phpbb.addAjaxCallback('mark_topics_read', function(res, updateTopicLinks) {
 		global_unread: 'global_read',
 		announce_unread: 'announce_read',
 		sticky_unread: 'sticky_read',
-		topic_unread: 'topic_read'
+		topic_unread: 'topic_read',
 	};
 	var iconsState = [ '', '_hot', '_hot_mine', '_locked', '_locked_mine', '_mine' ];
 	var unreadClassSelectors;
@@ -332,7 +334,7 @@ $('[data-ajax]').each(function() {
 			selector: this,
 			refresh: $this.attr('data-refresh') !== undefined,
 			filter: filter,
-			callback: fn
+			callback: fn,
 		});
 	}
 });
@@ -367,7 +369,7 @@ $('.display_post').click(function(e) {
 $('.display_post_review').on('click', function(e) {
 	e.preventDefault();
 
-	let $displayPostLink = $(this);
+	const $displayPostLink = $(this);
 	$displayPostLink.closest('.post-ignore').removeClass('post-ignore');
 	$displayPostLink.hide();
 });

phpBB/styles/prosilver/template/forum_fn.js

@@ -1,4 +1,7 @@
 /* global phpbb */
+/* eslint camelcase: 0 */
+/* eslint no-unused-vars: 0 */
+/* eslint no-var:0 */
 
 /**
 * phpBB forum functions
@@ -496,7 +499,7 @@ function parseDocument($container) {
 
 		// Find all headers, get contents
 		$list.prev('.topiclist').find('li.header dd').not('.mark').each(function() {
-			headers.push($("<div>").text($(this).text()).html());
+			headers.push($('<div>').text($(this).text()).html());
 			headersLength++;
 		});
 
@@ -600,7 +603,7 @@ function parseDocument($container) {
 
 				if ((text.length && text !== '-') || cell.children().length) {
 					if (headers[column].length) {
-						cell.prepend($("<dfn>").css('display', 'none').text(headers[column]));
+						cell.prepend($('<dfn>').css('display', 'none').text(headers[column]));
 					}
 				} else {
 					cell.addClass('empty');
@@ -687,7 +690,7 @@ function parseDocument($container) {
 
 		var $tabLink = $item.find('a.responsive-tab-link');
 		phpbb.registerDropdown($tabLink, $item.find('.dropdown'), {
-			visibleClass: 'activetab'
+			visibleClass: 'activetab',
 		});
 
 		check(true);

phpBB/styles/prosilver/template/ucp_pm_viewmessage.html

@@ -71,7 +71,10 @@
 										<div>
 									<!-- ENDIF -->
 										<a href="<!-- IF contact.U_CONTACT -->{contact.U_CONTACT}<!-- ELSE -->{contact.U_PROFILE_AUTHOR}<!-- ENDIF -->" title="{contact.NAME}"<!-- IF $S_LAST_CELL --> class="last-cell"<!-- ENDIF -->>
-											{% if contact.ID == 'pm' %}
+											{% if contact.ICON %}
+												{% set color = contact.ICON_COLOR ? ({style: 'color: #' ~ contact.ICON_COLOR}) : [] %}
+												{{ Icon('font', contact.ICON, '', true, '', color) }}
+											{% elseif contact.ID == 'pm' %}
 												{{ Icon('font', 'message', '', true, 'far contact-icon') }}
 											{% elseif contact.ID == 'email' %}
 												{{ Icon('font', 'at', '', true, 'fas contact-icon') }}

phpBB/styles/prosilver/template/viewtopic_body.html

@@ -193,7 +193,10 @@
 								<!-- ENDIF -->
 									<a href="<!-- IF postrow.contact.U_CONTACT -->{postrow.contact.U_CONTACT}<!-- ELSE -->{postrow.U_POST_AUTHOR}<!-- ENDIF -->" title="{postrow.contact.NAME}"<!-- IF $S_LAST_CELL --> class="last-cell"<!-- ENDIF -->>
 										{% EVENT viewtopic_body_contact_icon_prepend %}
-										{% if postrow.contact.ID == 'pm' %}
+										{% if postrow.contact.ICON %}
+											{% set color = postrow.contact.ICON_COLOR ? ({style: 'color: #' ~ contact.ICON_COLOR}) : [] %}
+											{{ Icon('font', contact.ICON, '', true, '', color) }}
+										{% elseif postrow.contact.ID == 'pm' %}
 											{{ Icon('font', 'message', '', true, 'far contact-icon') }}
 										{% elseif postrow.contact.ID == 'email' %}
 											{{ Icon('font', 'at', '', true, 'fas contact-icon') }}

phpBB/viewtopic.php

@@ -2193,8 +2193,11 @@ for ($i = 0, $end = count($post_list); $i < $end; ++$i)
 
 			if ($field_data['S_PROFILE_CONTACT'])
 			{
+				$icon_data = json_decode($field_data['PROFILE_FIELD_ICON'], true);
 				$template->assign_block_vars('postrow.contact', array(
 					'ID'		=> $field_data['PROFILE_FIELD_IDENT'],
+					'ICON'		=> $icon_data['name'],
+					'ICON_COLOR'=> $icon_data['color'],
 					'NAME'		=> $field_data['PROFILE_FIELD_NAME'],
 					'U_CONTACT'	=> $field_data['PROFILE_FIELD_CONTACT'],
 				));

tests/functional/profile_field_contact_icon_test.php

@@ -0,0 +1,95 @@
+<?php
+/**
+*
+* This file is part of the phpBB Forum Software package.
+*
+* @copyright (c) phpBB Limited <https://www.phpbb.com>
+* @license GNU General Public License, version 2 (GPL-2.0)
+*
+* For full copyright and license information, please see
+* the docs/CREDITS.txt file.
+*
+*/
+
+/**
+* @group functional
+*/
+class phpbb_functional_profile_field_contact_icon_test extends phpbb_functional_test_case
+{
+	protected function setUp(): void
+	{
+		parent::setUp();
+
+		$this->login();
+		$this->admin_login();
+		$this->add_lang('acp/profile');
+	}
+
+	public function test_add_contact_field_icon()
+	{
+		// Custom profile fields page
+		$crawler = self::request('GET', 'adm/index.php?i=acp_profile&mode=profile&sid=' . $this->sid);
+
+		// Get any contact profile field, f.e. phpbb_twitter
+		$twitter_field = $crawler->filter('tbody tr')
+			->reduce(
+				function ($node, $i) {
+					$text = $node->text();
+					return (strpos($text, 'phpbb_twitter') !== false);
+			});
+
+		$twitter_edit_url = $twitter_field->filter('.actions a')->eq(2)->attr('href');
+
+		$crawler = self::request('GET', 'adm/' . $twitter_edit_url . '&sid=' . $this->sid);
+
+		$this->assertStringContainsString('phpbb_twitter', $crawler->text());
+
+		$form = $crawler->selectButton('Profile type specific options')->form([
+			'field_icon'		=> 'twitter',
+			'field_icon_color'	=> '1da1f2',
+		]);
+		$crawler= self::submit($form);
+
+		$this->assertStringContainsString('Profile type specific options', $crawler->text());
+
+		$form = $crawler->selectButton('Save')->form();
+		$crawler= self::submit($form);
+		$this->assertContainsLang('CHANGED_PROFILE_FIELD', $crawler->text());
+
+		// Ensure contact filed icon was saved correctly
+		$crawler = self::request('GET', 'adm/' . $twitter_edit_url . '&sid=' . $this->sid);
+		$this->assertEquals('twitter', $crawler->filter('#field_icon')->attr('value'));
+		$this->assertEquals('1da1f2', $crawler->filter('#contact_field_icon_bgcolor')->attr('value'));
+		$this->assertEquals(1, $crawler->filter('i.fa-twitter')->count());
+		$this->assertStringContainsString('#1da1f2;', $crawler->filter('i.fa-twitter')->attr('style'));
+	}
+
+	/**
+	 * @depends test_add_contact_field_icon
+	 */
+	public function test_display_field_icon()
+	{
+		$this->add_lang('ucp');
+
+		// Set Twitter profile field
+		$crawler = self::request('GET', 'ucp.php?i=ucp_profile&mode=profile_info');
+		$this->assertContainsLang('UCP_PROFILE_PROFILE_INFO', $crawler->filter('#cp-main h2')->text());
+
+		$form = $crawler->selectButton('Submit')->form([
+			'pf_phpbb_twitter'	=> 'phpbb_twitter',
+		]);
+		$crawler = self::submit($form);
+		$this->assertContainsLang('PROFILE_UPDATED', $crawler->filter('#message')->text());
+
+		// Ensure Twitter icon displays in topic
+		$crawler = self::request('GET', 'viewtopic.php?t=1');
+		$this->assertEquals('Twitter', $crawler->filter('#profile1 a[title="Twitter"]')->attr('title'));
+		$this->assertStringContainsString('#1da1f2', $crawler->filter('#profile1 a[title="Twitter"] > i.fa-twitter')->attr('style'));
+
+		// Ensure Twitter icon displays on view private message screen
+		$message_id = $this->create_private_message('Self PM', 'Self PM', [2]);
+		$crawler = self::request('GET', 'ucp.php?i=pm&mode=view&p=' . $message_id . '&sid=' . $this->sid);
+		$this->assertEquals('Twitter', $crawler->filter('.profile-contact a[title="Twitter"]')->attr('title'));
+		$this->assertStringContainsString('#1da1f2', $crawler->filter('.profile-contact a[title="Twitter"] > i.fa-twitter')->attr('style'));
+	}
+}