Add JSON validation during input in ACP field

Author: iMattPro

adm/style/consentmanager_acp.html

@@ -77,7 +77,12 @@ <h3>{{ lang('WARNING') }}</h3>
 				<span><strong>{{ lang('EXAMPLE') ~ lang('COLON') }}</strong></span><br>
 				<pre><samp class="error">{{ CONSENTMANAGER_INTEGRATIONS_EXAMPLE }}</samp></pre>
 			</dt>
-			<dd><textarea id="consentmanager_integrations" name="consentmanager_integrations" rows="14" cols="90">{{ CONSENTMANAGER_INTEGRATIONS|e('html') }}</textarea></dd>
+			<dd>
+				<div style="position: relative; display: inline-block;">
+					<textarea id="consentmanager_integrations" name="consentmanager_integrations" rows="14" cols="90" style="padding-right: 7.5em; padding-bottom: 1.8em;">{{ CONSENTMANAGER_INTEGRATIONS|e('html') }}</textarea>
+					<span id="consentmanager_integrations_warning" style="position: absolute; right: 0.8em; bottom: 0.8em; color: #bc2a4d; font-size: 0.85em; font-weight: bold; pointer-events: none; display: none;">{{ lang('ACP_CONSENTMANAGER_INVALID_JSON') }}</span>
+				</div>
+			</dd>
 		</dl>
 	</fieldset>
 
@@ -96,4 +101,41 @@ <h3>{{ lang('WARNING') }}</h3>
 	</fieldset>
 </form>
 
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+	var textarea = document.getElementById('consentmanager_integrations');
+	var warning = document.getElementById('consentmanager_integrations_warning');
+
+	if (!textarea || !warning)
+	{
+		return;
+	}
+
+	var updateWarning = function() {
+		var value = textarea.value.trim();
+		var isValidArray = false;
+
+		if (value === '')
+		{
+			warning.style.display = 'none';
+			return;
+		}
+
+		try
+		{
+			isValidArray = Array.isArray(JSON.parse(value));
+		}
+		catch (error)
+		{
+			isValidArray = false;
+		}
+
+		warning.style.display = isValidArray ? 'none' : 'block';
+	};
+
+	textarea.addEventListener('input', updateWarning);
+	updateWarning();
+});
+</script>
+
 {% include 'overall_footer.html' %}

language/en/acp_consentmanager.php

@@ -40,6 +40,7 @@
 	'ACP_CONSENTMANAGER_REPROMPT_SUCCESS'			=> 'Consent version increased. Visitors will be asked to review their settings again.',
 	'ACP_CONSENTMANAGER_INVALID_INTEGRATIONS'		=> 'The integrations field must contain a valid JSON array.',
 	'ACP_CONSENTMANAGER_INVALID_INTEGRATION_ENTRY'	=> 'Integration entry %1$s is invalid. Each entry must include a safe id, supported category, and valid script source URL.',
+	'ACP_CONSENTMANAGER_INVALID_JSON'				=> 'Invalid JSON',
 	'CONSENTMANAGER_CATEGORY_NECESSARY'				=> 'Necessary',
 	'CONSENTMANAGER_CATEGORY_ANALYTICS'				=> 'Analytics',
 	'CONSENTMANAGER_CATEGORY_MARKETING'				=> 'Marketing',