feat: Settings: enable Save button only if changes has been made

Author: slawkens

system/templates/admin.settings.html.twig

@@ -80,7 +80,26 @@
 		}
 	});
 
-	$('#settings').submit(function(e) {
+	const noChangesText = "No changes has been made";
+
+	$('form')
+		.each(function(){
+			$(this).data('serialized', $(this).serialize())
+		})
+		.on('change input', function(){
+			const disable = $(this).serialize() === $(this).data('serialized');
+			$(this)
+				.find('input:submit, button:submit')
+				.prop('disabled', disable)
+				.prop('title', disable ? noChangesText : '')
+			;
+		})
+		.find('input:submit, button:submit')
+		.prop('disabled', true)
+		.prop('title', noChangesText)
+	;
+
+	$('#settings').on('submit', function(e) {
 		e.preventDefault();
 
 		$.ajax({
@@ -94,6 +113,13 @@
 					duration: 3000,
 					escapeMarkup: false,
 				}).showToast();
+
+				let $settings = $('#settings');
+				$settings.data('serialized', $settings.serialize());
+				$settings
+					.find('input:submit, button:submit')
+					.prop('disabled', true)
+					.prop('title', noChangesText);
 			},
 			error : function(response) {
 				Toastify({
@@ -109,6 +135,7 @@
 		});
 	});
 </script>
+
 <script>
 {% for key, value in settings %}
 	{% if value.type == 'password' %}