Refactor "unlimited" inputs (#3464)

To reduce duplication.

web/css/src/themes/dark.css

@@ -553,6 +553,12 @@ strong {
 	}
 }
 
+.unlimited-toggle {
+	& .fas {
+		color: #d4d4d4;
+	}
+}
+
 .hint {
 	color: #a2a2a2;
 }

web/css/src/themes/default.css

@@ -1683,13 +1683,29 @@
 	}
 }
 
-.unlim-trigger {
-	cursor: pointer;
+.unlimited-toggle {
 	position: absolute;
-	top: 13px;
-	right: 12px;
+	top: 0;
+	right: 1px;
 	z-index: 1;
-	font-size: 0.8rem;
+	border: 0;
+	padding: 0 13px;
+	opacity: 0.5;
+	height: 100%;
+	background-color: transparent;
+
+	&:hover {
+		opacity: 0.8;
+	}
+
+	&.is-active {
+		opacity: 1;
+	}
+
+	& .fas {
+		font-size: 0.8rem;
+		color: #4e4e4e;
+	}
 }
 
 .optional {

web/js/events.js

@@ -260,6 +260,30 @@ const VE = {
 				meter.value = strength;
 			}
 		},
+		enableInputUnlimited: (input, toggleButton) => {
+			toggleButton.classList.add('is-active');
+			input.dataset.prevValue = input.value;
+			input.value = Alpine.store('globals').UNLIM_TRANSLATED_VALUE;
+			input.disabled = true;
+		},
+		disableInputUnlimited: (input, toggleButton) => {
+			toggleButton.classList.remove('is-active');
+			const prevValue = input.dataset.prevValue?.trim();
+			if (prevValue) {
+				input.value = prevValue;
+			}
+			if (Alpine.store('globals').isUnlimitedValue(input.value)) {
+				input.value = '0';
+			}
+			input.disabled = false;
+		},
+		toggleInputUnlimited: (input, toggleButton) => {
+			if (toggleButton.classList.contains('is-active')) {
+				VE.helpers.disableInputUnlimited(input, toggleButton);
+			} else {
+				VE.helpers.enableInputUnlimited(input, toggleButton);
+			}
+		},
 		warn: (msg) => {
 			alert('WARNING: ' + msg);
 		},

web/js/main.js

@@ -136,6 +136,21 @@ document.addEventListener('alpine:init', () => {
 		});
 	}
 
+	// Unlimited input toggle
+	document.querySelectorAll('.js-unlimited-toggle').forEach((toggleButton) => {
+		const input = toggleButton.parentElement.querySelector('input');
+
+		if (Alpine.store('globals').isUnlimitedValue(input.value)) {
+			VE.helpers.enableInputUnlimited(input, toggleButton);
+		} else {
+			VE.helpers.disableInputUnlimited(input, toggleButton);
+		}
+
+		toggleButton.addEventListener('click', () => {
+			VE.helpers.toggleInputUnlimited(input, toggleButton);
+		});
+	});
+
 	// Bulk edit forms
 	Alpine.bind('BulkEdit', () => ({
 		/** @param {SubmitEvent} evt */

web/js/pages/add_mail_acc.js

@@ -1,59 +1,3 @@
-App.Actions.MAIL_ACC.enable_unlimited = function (elm, source_elm) {
-	$(elm).data('checked', true);
-	$(elm).data('prev_value', $(elm).val()); // save prev value in order to restore if needed
-	$(elm).val(Alpine.store('globals').UNLIM_TRANSLATED_VALUE);
-	$(elm).attr('disabled', true);
-	$(source_elm).css('opacity', '1');
-};
-
-App.Actions.MAIL_ACC.disable_unlimited = function (elm, source_elm) {
-	$(elm).data('checked', false);
-	if ($(elm).data('prev_value') && $(elm).data('prev_value').trim() != '') {
-		var prev_value = $(elm).data('prev_value').trim();
-		$(elm).val(prev_value);
-		if (Alpine.store('globals').isUnlimitedValue(prev_value)) {
-			$(elm).val('0');
-		}
-	} else {
-		if (Alpine.store('globals').isUnlimitedValue($(elm).val())) {
-			$(elm).val('0');
-		}
-	}
-	$(elm).attr('disabled', false);
-	$(source_elm).css('opacity', '0.5');
-};
-
-App.Actions.MAIL_ACC.toggle_unlimited_feature = function (evt) {
-	var elm = $(evt.target);
-	var ref = elm.prev('.form-control');
-	if (!$(ref).data('checked')) {
-		App.Actions.MAIL_ACC.enable_unlimited(ref, elm);
-	} else {
-		App.Actions.MAIL_ACC.disable_unlimited(ref, elm);
-	}
-};
-
-App.Listeners.MAIL_ACC.checkbox_unlimited_feature = function () {
-	$('.unlim-trigger').on('click', App.Actions.MAIL_ACC.toggle_unlimited_feature);
-};
-
-App.Listeners.MAIL_ACC.init = function () {
-	$('.unlim-trigger').each(function (i, elm) {
-		var ref = $(elm).prev('.form-control');
-		if (Alpine.store('globals').isUnlimitedValue($(ref).val())) {
-			App.Actions.MAIL_ACC.enable_unlimited(ref, elm);
-		} else {
-			$(ref).data('prev_value', $(ref).val());
-			App.Actions.MAIL_ACC.disable_unlimited(ref, elm);
-		}
-	});
-};
-
-//
-// Page entry point
-// Trigger listeners
-App.Listeners.MAIL_ACC.init();
-App.Listeners.MAIL_ACC.checkbox_unlimited_feature();
 $('#v_blackhole').on('click', function () {
 	if ($('#v_blackhole').is(':checked')) {
 		$('#v_fwd').prop('disabled', true);

web/js/pages/add_package.js

@@ -1,60 +1,3 @@
-App.Actions.PACKAGE.enable_unlimited = function (elm, source_elm) {
-	$(elm).data('checked', true);
-	$(elm).data('prev_value', $(elm).val()); // save prev value in order to restore if needed
-	$(elm).val(Alpine.store('globals').UNLIM_TRANSLATED_VALUE);
-	$(elm).attr('disabled', true);
-	$(source_elm).css('opacity', '1');
-};
-
-App.Actions.PACKAGE.disable_unlimited = function (elm, source_elm) {
-	$(elm).data('checked', false);
-	if ($(elm).data('prev_value') && $(elm).data('prev_value').trim() != '') {
-		var prev_value = $(elm).data('prev_value').trim();
-		$(elm).val(prev_value);
-		if (Alpine.store('globals').isUnlimitedValue(prev_value)) {
-			$(elm).val('0');
-		}
-	} else {
-		if (Alpine.store('globals').isUnlimitedValue($(elm).val())) {
-			$(elm).val('0');
-		}
-	}
-	$(elm).attr('disabled', false);
-	$(source_elm).css('opacity', '0.5');
-};
-
-//
-App.Actions.PACKAGE.toggle_unlimited_feature = function (evt) {
-	var elm = $(evt.target);
-	var ref = elm.prev('.form-control');
-	if (!$(ref).data('checked')) {
-		App.Actions.PACKAGE.enable_unlimited(ref, elm);
-	} else {
-		App.Actions.PACKAGE.disable_unlimited(ref, elm);
-	}
-};
-
-App.Listeners.PACKAGE.checkbox_unlimited_feature = function () {
-	$('.unlim-trigger').on('click', App.Actions.PACKAGE.toggle_unlimited_feature);
-};
-
-App.Listeners.PACKAGE.init = function () {
-	$('.unlim-trigger').each(function (i, elm) {
-		var ref = $(elm).prev('.form-control');
-		if (Alpine.store('globals').isUnlimitedValue($(ref).val())) {
-			App.Actions.PACKAGE.enable_unlimited(ref, elm);
-		} else {
-			$(ref).data('prev_value', $(ref).val());
-			App.Actions.PACKAGE.disable_unlimited(ref, elm);
-		}
-	});
-};
-
-//
-// Page entry point
-// Trigger listeners
-App.Listeners.PACKAGE.init();
-App.Listeners.PACKAGE.checkbox_unlimited_feature();
 $('form[name="v_add_package"]').on('submit', function () {
 	$('input:disabled').each(function (i, elm) {
 		$(elm).attr('disabled', false);

web/js/pages/edit_mail_acc.js

@@ -1,58 +1,3 @@
-App.Actions.MAIL_ACC.enable_unlimited = function (elm, source_elm) {
-	$(elm).data('checked', true);
-	$(elm).data('prev_value', $(elm).val()); // save prev value in order to restore if needed
-	$(elm).val(Alpine.store('globals').UNLIM_TRANSLATED_VALUE);
-	$(elm).attr('disabled', true);
-	$(source_elm).css('opacity', '1');
-};
-
-App.Actions.MAIL_ACC.disable_unlimited = function (elm, source_elm) {
-	$(elm).data('checked', false);
-	if ($(elm).data('prev_value') && $(elm).data('prev_value').trim() != '') {
-		var prev_value = $(elm).data('prev_value').trim();
-		$(elm).val(prev_value);
-		if (Alpine.store('globals').isUnlimitedValue(prev_value)) {
-			$(elm).val('0');
-		}
-	} else {
-		if (Alpine.store('globals').isUnlimitedValue($(elm).val())) {
-			$(elm).val('0');
-		}
-	}
-	$(elm).attr('disabled', false);
-	$(source_elm).css('opacity', '0.5');
-};
-
-//
-App.Actions.MAIL_ACC.toggle_unlimited_feature = function (evt) {
-	var elm = $(evt.target);
-	var ref = elm.prev('.form-control');
-	if (!$(ref).data('checked')) {
-		App.Actions.MAIL_ACC.enable_unlimited(ref, elm);
-	} else {
-		App.Actions.MAIL_ACC.disable_unlimited(ref, elm);
-	}
-};
-
-App.Listeners.MAIL_ACC.checkbox_unlimited_feature = function () {
-	$('.unlim-trigger').on('click', App.Actions.MAIL_ACC.toggle_unlimited_feature);
-};
-
-App.Listeners.MAIL_ACC.init = function () {
-	$('.unlim-trigger').each(function (i, elm) {
-		var ref = $(elm).prev('.form-control');
-		if (Alpine.store('globals').isUnlimitedValue($(ref).val())) {
-			App.Actions.MAIL_ACC.enable_unlimited(ref, elm);
-		} else {
-			$(ref).data('prev_value', $(ref).val());
-			App.Actions.MAIL_ACC.disable_unlimited(ref, elm);
-		}
-	});
-};
-
-App.Listeners.MAIL_ACC.init();
-App.Listeners.MAIL_ACC.checkbox_unlimited_feature();
-
 App.Listeners.MAIL_ACC.keypress_v_password = function () {
 	var ref = $('input[name="v_password"]');
 	ref.bind('keypress input', function (evt) {

web/js/pages/edit_package.js

@@ -1,60 +1,3 @@
-App.Actions.PACKAGE.enable_unlimited = function (elm, source_elm) {
-	$(elm).data('checked', true);
-	$(elm).data('prev_value', $(elm).val()); // save prev value in order to restore if needed
-	$(elm).val(Alpine.store('globals').UNLIM_TRANSLATED_VALUE);
-	$(elm).attr('disabled', true);
-	$(source_elm).css('opacity', '1');
-};
-
-App.Actions.PACKAGE.disable_unlimited = function (elm, source_elm) {
-	$(elm).data('checked', false);
-	if ($(elm).data('prev_value') && $(elm).data('prev_value').trim() != '') {
-		var prev_value = $(elm).data('prev_value').trim();
-		$(elm).val(prev_value);
-		if (Alpine.store('globals').isUnlimitedValue(prev_value)) {
-			$(elm).val('0');
-		}
-	} else {
-		if (Alpine.store('globals').isUnlimitedValue($(elm).val())) {
-			$(elm).val('0');
-		}
-	}
-	$(elm).attr('disabled', false);
-	$(source_elm).css('opacity', '0.5');
-};
-
-//
-App.Actions.PACKAGE.toggle_unlimited_feature = function (evt) {
-	var elm = $(evt.target);
-	var ref = elm.prev('.form-control');
-	if (!$(ref).data('checked')) {
-		App.Actions.PACKAGE.enable_unlimited(ref, elm);
-	} else {
-		App.Actions.PACKAGE.disable_unlimited(ref, elm);
-	}
-};
-
-App.Listeners.PACKAGE.checkbox_unlimited_feature = function () {
-	$('.unlim-trigger').on('click', App.Actions.PACKAGE.toggle_unlimited_feature);
-};
-
-App.Listeners.PACKAGE.init = function () {
-	$('.unlim-trigger').each(function (i, elm) {
-		var ref = $(elm).prev('.form-control');
-		if (Alpine.store('globals').isUnlimitedValue($(ref).val())) {
-			App.Actions.PACKAGE.enable_unlimited(ref, elm);
-		} else {
-			$(ref).data('prev_value', $(ref).val());
-			App.Actions.PACKAGE.disable_unlimited(ref, elm);
-		}
-	});
-};
-
-//
-// Page entry point
-// Trigger listeners
-App.Listeners.PACKAGE.init();
-App.Listeners.PACKAGE.checkbox_unlimited_feature();
 App.Listeners.PACKAGE.submit = function () {
 	$('input:disabled').each(function (i, elm) {
 		$(elm).attr('disabled', false);

web/templates/pages/add_mail_acc.php

@@ -72,7 +72,9 @@
 							</label>
 							<div class="u-pos-relative">
 								<input type="text" class="form-control" name="v_quota" id="v_quota" value="<?= htmlentities(trim($v_quota, "'")) ?>">
-								<i class="unlim-trigger fas fa-infinity" title="<?= _("Unlimited") ?>"></i>
+								<button type="button" class="unlimited-toggle js-unlimited-toggle" title="<?= _("Unlimited") ?>">
+									<i class="fas fa-infinity"></i>
+								</button>
 							</div>
 						</div>
 						<div class="u-mb10">

web/templates/pages/add_package.php

@@ -45,7 +45,9 @@
 				</label>
 				<div class="u-pos-relative">
 					<input type="text" class="form-control" name="v_disk_quota" id="v_disk_quota" value="<?= htmlentities(trim($v_disk_quota, "'")) ?>">
-					<i class="unlim-trigger fas fa-infinity" title="<?= _("Unlimited") ?>"></i>
+					<button type="button" class="unlimited-toggle js-unlimited-toggle" title="<?= _("Unlimited") ?>">
+						<i class="fas fa-infinity"></i>
+					</button>
 				</div>
 			</div>
 			<div class="u-mb10">
@@ -54,7 +56,9 @@
 				</label>
 				<div class="u-pos-relative">
 					<input type="text" class="form-control" name="v_bandwidth" id="v_bandwidth" value="<?= htmlentities(trim($v_bandwidth, "'")) ?>">
-					<i class="unlim-trigger fas fa-infinity" title="<?= _("Unlimited") ?>"></i>
+					<button type="button" class="unlimited-toggle js-unlimited-toggle" title="<?= _("Unlimited") ?>">
+						<i class="fas fa-infinity"></i>
+					</button>
 				</div>
 			</div>
 			<div class="u-mb10">
@@ -73,7 +77,9 @@
 					<label for="v_web_domains" class="form-label"><?= _("Web Domains") ?></label>
 					<div class="u-pos-relative">
 						<input type="text" class="form-control" name="v_web_domains" id="v_web_domains" value="<?= htmlentities(trim($v_web_domains, "'")) ?>">
-						<i class="unlim-trigger fas fa-infinity" title="<?= _("Unlimited") ?>"></i>
+						<button type="button" class="unlimited-toggle js-unlimited-toggle" title="<?= _("Unlimited") ?>">
+							<i class="fas fa-infinity"></i>
+						</button>
 					</div>
 				</div>
 				<div class="u-mb10">
@@ -82,7 +88,9 @@
 					</label>
 					<div class="u-pos-relative">
 						<input type="text" class="form-control" name="v_web_aliases" id="v_web_aliases" value="<?= htmlentities(trim($v_web_aliases, "'")) ?>">
-						<i class="unlim-trigger fas fa-infinity" title="<?= _("Unlimited") ?>"></i>
+						<button type="button" class="unlimited-toggle js-unlimited-toggle" title="<?= _("Unlimited") ?>">
+							<i class="fas fa-infinity"></i>
+						</button>
 					</div>
 				</div>
 				<div class="u-mb10">
@@ -167,7 +175,9 @@
 					<label for="v_dns_domains" class="form-label"><?= _("DNS domains") ?></label>
 					<div class="u-pos-relative">
 						<input type="text" class="form-control" name="v_dns_domains" id="v_dns_domains" value="<?= htmlentities(trim($v_dns_domains, "'")) ?>">
-						<i class="unlim-trigger fas fa-infinity" title="<?= _("Unlimited") ?>"></i>
+						<button type="button" class="unlimited-toggle js-unlimited-toggle" title="<?= _("Unlimited") ?>">
+							<i class="fas fa-infinity"></i>
+						</button>
 					</div>
 				</div>
 				<div class="u-mb10">
@@ -176,7 +186,9 @@
 					</label>
 					<div class="u-pos-relative">
 						<input type="text" class="form-control" name="v_dns_records" id="v_dns_records" value="<?= htmlentities(trim($v_dns_records, "'")) ?>">
-						<i class="unlim-trigger fas fa-infinity" title="<?= _("Unlimited") ?>"></i>
+						<button type="button" class="unlimited-toggle js-unlimited-toggle" title="<?= _("Unlimited") ?>">
+							<i class="fas fa-infinity"></i>
+						</button>
 					</div>
 				</div>
 				<?php if (isset($_SESSION["DNS_SYSTEM"]) && !empty($_SESSION["DNS_SYSTEM"])) { ?>
@@ -242,7 +254,9 @@
 					<label for="v_mail_domains" class="form-label"><?= _("Mail Domains") ?></label>
 					<div class="u-pos-relative">
 						<input type="text" class="form-control" name="v_mail_domains" id="v_mail_domains" value="<?= htmlentities(trim($v_mail_domains, "'")) ?>">
-						<i class="unlim-trigger fas fa-infinity" title="<?= _("Unlimited") ?>"></i>
+						<button type="button" class="unlimited-toggle js-unlimited-toggle" title="<?= _("Unlimited") ?>">
+							<i class="fas fa-infinity"></i>
+						</button>
 					</div>
 				</div>
 				<div class="u-mb10">
@@ -251,7 +265,9 @@
 					</label>
 					<div class="u-pos-relative">
 						<input type="text" class="form-control" name="v_mail_accounts" id="v_mail_accounts" value="<?= htmlentities(trim($v_mail_accounts, "'")) ?>">
-						<i class="unlim-trigger fas fa-infinity" title="<?= _("Unlimited") ?>"></i>
+						<button type="button" class="unlimited-toggle js-unlimited-toggle" title="<?= _("Unlimited") ?>">
+							<i class="fas fa-infinity"></i>
+						</button>
 					</div>
 				</div>
 				<div class="u-mb10">
@@ -273,7 +289,9 @@
 					<label for="v_databases" class="form-label"><?= _("Databases") ?></label>
 					<div class="u-pos-relative">
 						<input type="text" class="form-control" name="v_databases" id="v_databases" value="<?= htmlentities(trim($v_databases, "'")) ?>">
-						<i class="unlim-trigger fas fa-infinity" title="<?= _("Unlimited") ?>"></i>
+						<button type="button" class="unlimited-toggle js-unlimited-toggle" title="<?= _("Unlimited") ?>">
+							<i class="fas fa-infinity"></i>
+						</button>
 					</div>
 				</div>
 			</div>
@@ -289,7 +307,9 @@
 					<label for="v_cron_jobs" class="form-label"><?= _("Cron Jobs") ?></label>
 					<div class="u-pos-relative">
 						<input type="text" class="form-control" name="v_cron_jobs" id="v_cron_jobs" value="<?= htmlentities(trim($v_cron_jobs, "'")) ?>">
-						<i class="unlim-trigger fas fa-infinity" title="<?= _("Unlimited") ?>"></i>
+						<button type="button" class="unlimited-toggle js-unlimited-toggle" title="<?= _("Unlimited") ?>">
+							<i class="fas fa-infinity"></i>
+						</button>
 					</div>
 				</div>
 				<div class="u-mb10">

web/templates/pages/edit_mail_acc.php

@@ -71,7 +71,9 @@
 						</label>
 						<div class="u-pos-relative">
 							<input type="text" class="form-control" name="v_quota" id="v_quota" value="<?php if (!empty($v_quota)) {echo htmlentities(trim($v_quota, "'"));} else { echo "0"; } ?>">
-							<i class="unlim-trigger fas fa-infinity" title="<?= _("Unlimited") ?>"></i>
+							<button type="button" class="unlimited-toggle js-unlimited-toggle" title="<?= _("Unlimited") ?>">
+								<i class="fas fa-infinity"></i>
+							</button>
 						</div>
 					</div>
 					<div class="u-mb10">

web/templates/pages/edit_package.php

@@ -48,7 +48,9 @@
 				</label>
 				<div class="u-pos-relative">
 					<input type="text" class="form-control" name="v_disk_quota" id="v_disk_quota" value="<?= htmlentities(trim($v_disk_quota, "'")) ?>">
-					<i class="unlim-trigger fas fa-infinity" title="<?= _("Unlimited") ?>"></i>
+					<button type="button" class="unlimited-toggle js-unlimited-toggle" title="<?= _("Unlimited") ?>">
+						<i class="fas fa-infinity"></i>
+					</button>
 				</div>
 			</div>
 			<div class="u-mb10">
@@ -57,7 +59,9 @@
 				</label>
 				<div class="u-pos-relative">
 					<input type="text" class="form-control" name="v_bandwidth" id="v_bandwidth" value="<?= htmlentities(trim($v_bandwidth, "'")) ?>">
-					<i class="unlim-trigger fas fa-infinity" title="<?= _("Unlimited") ?>"></i>
+					<button type="button" class="unlimited-toggle js-unlimited-toggle" title="<?= _("Unlimited") ?>">
+						<i class="fas fa-infinity"></i>
+					</button>
 				</div>
 			</div>
 			<div class="u-mb10">
@@ -76,7 +80,9 @@
 					<label for="v_web_domains" class="form-label"><?= _("Web Domains") ?></label>
 					<div class="u-pos-relative">
 						<input type="text" class="form-control" name="v_web_domains" id="v_web_domains" value="<?= htmlentities(trim($v_web_domains, "'")) ?>">
-						<i class="unlim-trigger fas fa-infinity" title="<?= _("Unlimited") ?>"></i>
+						<button type="button" class="unlimited-toggle js-unlimited-toggle" title="<?= _("Unlimited") ?>">
+							<i class="fas fa-infinity"></i>
+						</button>
 					</div>
 				</div>
 				<div class="u-mb10">
@@ -85,7 +91,9 @@
 					</label>
 					<div class="u-pos-relative">
 						<input type="text" class="form-control" name="v_web_aliases" id="v_web_aliases" value="<?= htmlentities(trim($v_web_aliases, "'")) ?>">
-						<i class="unlim-trigger fas fa-infinity" title="<?= _("Unlimited") ?>"></i>
+						<button type="button" class="unlimited-toggle js-unlimited-toggle" title="<?= _("Unlimited") ?>">
+							<i class="fas fa-infinity"></i>
+						</button>
 					</div>
 				</div>
 				<div class="u-mb10">
@@ -172,7 +180,9 @@
 					<label for="v_dns_domains" class="form-label"><?= _("DNS domains") ?></label>
 					<div class="u-pos-relative">
 						<input type="text" class="form-control" name="v_dns_domains" id="v_dns_domains" value="<?= htmlentities(trim($v_dns_domains, "'")) ?>">
-						<i class="unlim-trigger fas fa-infinity" title="<?= _("Unlimited") ?>"></i>
+						<button type="button" class="unlimited-toggle js-unlimited-toggle" title="<?= _("Unlimited") ?>">
+							<i class="fas fa-infinity"></i>
+						</button>
 					</div>
 				</div>
 				<div class="u-mb10">
@@ -181,7 +191,9 @@
 					</label>
 					<div class="u-pos-relative">
 						<input type="text" class="form-control" name="v_dns_records" id="v_dns_records" value="<?= htmlentities(trim($v_dns_records, "'")) ?>">
-						<i class="unlim-trigger fas fa-infinity" title="<?= _("Unlimited") ?>"></i>
+						<button type="button" class="unlimited-toggle js-unlimited-toggle" title="<?= _("Unlimited") ?>">
+							<i class="fas fa-infinity"></i>
+						</button>
 					</div>
 				</div>
 				<?php if (isset($_SESSION["DNS_SYSTEM"]) && !empty($_SESSION["DNS_SYSTEM"])) { ?>
@@ -247,7 +259,9 @@
 					<label for="v_mail_domains" class="form-label"><?= _("Mail Domains") ?></label>
 					<div class="u-pos-relative">
 						<input type="text" class="form-control" name="v_mail_domains" id="v_mail_domains" value="<?= htmlentities(trim($v_mail_domains, "'")) ?>">
-						<i class="unlim-trigger fas fa-infinity" title="<?= _("Unlimited") ?>"></i>
+						<button type="button" class="unlimited-toggle js-unlimited-toggle" title="<?= _("Unlimited") ?>">
+							<i class="fas fa-infinity"></i>
+						</button>
 					</div>
 				</div>
 				<div class="u-mb10">
@@ -256,7 +270,9 @@
 					</label>
 					<div class="u-pos-relative">
 						<input type="text" class="form-control" name="v_mail_accounts" id="v_mail_accounts" value="<?= htmlentities(trim($v_mail_accounts, "'")) ?>">
-						<i class="unlim-trigger fas fa-infinity" title="<?= _("Unlimited") ?>"></i>
+						<button type="button" class="unlimited-toggle js-unlimited-toggle" title="<?= _("Unlimited") ?>">
+							<i class="fas fa-infinity"></i>
+						</button>
 					</div>
 				</div>
 				<div class="u-mb10">
@@ -278,7 +294,9 @@
 					<label for="v_databases" class="form-label"><?= _("Databases") ?></label>
 					<div class="u-pos-relative">
 						<input type="text" class="form-control" name="v_databases" id="v_databases" value="<?= htmlentities(trim($v_databases, "'")) ?>">
-						<i class="unlim-trigger fas fa-infinity" title="<?= _("Unlimited") ?>"></i>
+						<button type="button" class="unlimited-toggle js-unlimited-toggle" title="<?= _("Unlimited") ?>">
+							<i class="fas fa-infinity"></i>
+						</button>
 					</div>
 				</div>
 			</div>
@@ -294,7 +312,9 @@
 					<label for="v_cron_jobs" class="form-label"><?= _("Cron Jobs") ?></label>
 					<div class="u-pos-relative">
 						<input type="text" class="form-control" name="v_cron_jobs" id="v_cron_jobs" value="<?= htmlentities(trim($v_cron_jobs, "'")) ?>">
-						<i class="unlim-trigger fas fa-infinity" title="<?= _("Unlimited") ?>"></i>
+						<button type="button" class="unlimited-toggle js-unlimited-toggle" title="<?= _("Unlimited") ?>">
+							<i class="fas fa-infinity"></i>
+						</button>
 					</div>
 				</div>
 				<div class="u-mb10">