Improve Quick Install App password input (#3530)

* Rename JS entry point

* Import helper in charts JS

* Stop setting window.Hestia

* Improve charts data fetching

* Fix spacing under form title

.eslintrc.cjs

@@ -19,7 +19,6 @@ module.exports = {
 		es2021: true,
 	},
 	globals: {
-		Hestia: 'readonly',
 		Alpine: 'readonly',
 	},
 	rules: {

build.js

@@ -13,7 +13,7 @@ const externalPackages = ['chart.js/auto', 'alpinejs/dist/cdn.min.js'];
 
 // Build main bundle
 async function buildJS() {
-	const inputPath = './web/js/src/main.js';
+	const inputPath = './web/js/src/index.js';
 	try {
 		await esbuild.build({
 			entryPoints: [inputPath],

web/js/src/helpers.js

@@ -43,6 +43,25 @@ export function parseAndSortIpLists(ipListsData) {
 	return ipLists.sort((a, b) => a.name.localeCompare(b.name));
 }
 
+// Posts data to the given URL and returns the response
+export async function post(url, data, headers = {}) {
+	const requestOptions = {
+		method: 'POST',
+		headers: {
+			'Content-Type': 'application/json',
+			...headers,
+		},
+		body: JSON.stringify(data),
+	};
+
+	const response = await fetch(url, requestOptions);
+	if (!response.ok) {
+		throw new Error(`HTTP error ${response.status}: ${response.statusText}`);
+	}
+
+	return response.json();
+}
+
 // Creates a confirmation <dialog> on the fly
 export function createConfirmationDialog({
 	title,

web/js/src/main.js → web/js/src/index.js

@@ -25,9 +25,6 @@ import handleTabPanels from './tabPanels';
 import handleToggleAdvanced from './toggleAdvanced';
 import handleUnlimitedInput from './unlimitedInput';
 import initRrdCharts from './rrdCharts';
-import * as helpers from './helpers';
-
-window.Hestia = { helpers };
 
 initListeners();
 focusFirstInput();

web/js/src/rrdCharts.js

@@ -1,3 +1,5 @@
+import { post, getCssVariable } from './helpers';
+
 // Create Chart.js charts from in-page data on Task Monitor page
 export default async function initRrdCharts() {
 	const chartCanvases = document.querySelectorAll('.js-rrd-chart');
@@ -11,7 +13,7 @@ export default async function initRrdCharts() {
 	for (const chartCanvas of chartCanvases) {
 		const service = chartCanvas.dataset.service;
 		const period = chartCanvas.dataset.period;
-		const rrdData = await fetchRrdData(service, period);
+		const rrdData = await post('/list/rrd/ajax.php', { service, period });
 		const chartData = prepareChartData(rrdData, period);
 		const chartOptions = getChartOptions(rrdData.unit);
 
@@ -31,16 +33,6 @@ async function loadChartJs() {
 	return chartJsModule.Chart;
 }
 
-async function fetchRrdData(service, period) {
-	const response = await fetch('/list/rrd/ajax.php', {
-		method: 'POST',
-		headers: { 'Content-Type': 'application/json' },
-		body: JSON.stringify({ service, period }),
-	});
-
-	return response.json();
-}
-
 function prepareChartData(rrdData, period) {
 	return {
 		labels: rrdData.data.map((_, index) => {
@@ -49,7 +41,7 @@ function prepareChartData(rrdData, period) {
 			return formatLabel(date, period);
 		}),
 		datasets: rrdData.meta.legend.map((legend, legendIndex) => {
-			const lineColor = Hestia.helpers.getCssVariable(`--chart-line-${legendIndex + 1}-color`);
+			const lineColor = getCssVariable(`--chart-line-${legendIndex + 1}-color`);
 
 			return {
 				label: legend,
@@ -75,8 +67,8 @@ function formatLabel(date, period) {
 }
 
 function getChartOptions(unit) {
-	const labelColor = Hestia.helpers.getCssVariable('--chart-label-color');
-	const gridColor = Hestia.helpers.getCssVariable('--chart-grid-color');
+	const labelColor = getCssVariable('--chart-label-color');
+	const gridColor = getCssVariable('--chart-grid-color');
 
 	return {
 		plugins: {

web/templates/pages/setup_webapp.php

@@ -36,94 +36,89 @@
 						</div>
 					</div>
 				<?php } ?>
-				<div class="u-mt20">
-					<?php
-					foreach ($WebappInstaller->getOptions() as $form_name => $form_control) {
-						$field_name = $WebappInstaller->formNs() . "_" . $form_name;
-						$field_type = $form_control;
-						$field_value = "";
-						$field_label =
-							isset($form_control["label"])
-								? htmlentities($form_control["label"])
-								: ucwords(str_replace([".","_"], " ", $form_name));
-						$field_placeholder = "";
-						if (is_array($form_control)) {
-							$field_type = !empty($form_control["type"]) ? $form_control["type"] : "text";
-							$field_value = !empty($form_control["value"]) ? $form_control["value"] : "";
-							$field_placeholder = !empty($form_control["placeholder"]) ? $form_control["placeholder"] : "";
-						}
-						$field_value = htmlentities($field_value);
-						$field_label = htmlentities($field_label);
-						$field_name = htmlentities($field_name);
-						$field_placeholder = htmlentities($field_placeholder);
-					?>
-						<div
-							x-data="{
-								value: '<?= !empty($field_value) ? $field_value : "" ?>'
-							}"
-							class="u-mb10"
-						>
-							<?php if ($field_type != "boolean"): ?>
-								<label for="<?= $field_name ?>" class="form-label">
-									<?= $field_label ?>
-									<?php if ($field_type == "password") { ?>
-										/
-										<button
-											x-on:click="value = Hestia.helpers.randomPassword()"
-											class="form-link"
-											type="button"
-										>
-											<?= _("Generate") ?>
+				<?php
+				foreach ($WebappInstaller->getOptions() as $form_name => $form_control) {
+					$field_name = $WebappInstaller->formNs() . "_" . $form_name;
+					$field_type = $form_control;
+					$field_value = "";
+					$field_label =
+						isset($form_control["label"])
+							? htmlentities($form_control["label"])
+							: ucwords(str_replace([".","_"], " ", $form_name));
+					$field_placeholder = "";
+					if (is_array($form_control)) {
+						$field_type = !empty($form_control["type"]) ? $form_control["type"] : "text";
+						$field_value = !empty($form_control["value"]) ? $form_control["value"] : "";
+						$field_placeholder = !empty($form_control["placeholder"]) ? $form_control["placeholder"] : "";
+					}
+					$field_value = htmlentities($field_value);
+					$field_label = htmlentities($field_label);
+					$field_name = htmlentities($field_name);
+					$field_placeholder = htmlentities($field_placeholder);
+				?>
+					<div class="u-mb10">
+						<?php if ($field_type != "boolean"): ?>
+							<label for="<?= $field_name ?>" class="form-label">
+								<?= $field_label ?>
+								<?php if ($field_type == "password"): ?>
+									<button type="button" title="<?= _("Generate") ?>" class="u-unstyled-button u-ml5 js-generate-password">
+										<i class="fas fa-arrows-rotate icon-green"></i>
 									</button>
-									<?php } ?>
-								</label>
-							<?php endif; ?>
+								<?php endif; ?>
+							</label>
+						<?php endif; ?>
 
-							<?php if ($field_type == 'select' && count($form_control['options'])) { ?>
-								<select class="form-select" name="<?= $field_name ?>" id="<?= $field_name ?>">
-									<?php
-									foreach ($form_control['options'] as $key => $option) {
-										$key = !is_numeric($key) ? $key : $option;
-										$selected = !empty($form_control['value'] && $key == $form_control['value']) ? 'selected' : '';
-									?>
-										<option
-											value="<?= $key ?>"
-											<?= $selected ?>
-										>
-											<?= htmlentities($option) ?>
-										</option>
-									<?php } ?>
-								</select>
-							<?php
-							} elseif ($field_type == "boolean") {
-								$checked = !empty($field_value) ? "checked" : "";
-							?>
-								<div class="form-check">
+						<?php if ($field_type == 'select' && count($form_control['options'])): ?>
+							<select class="form-select" name="<?= $field_name ?>" id="<?= $field_name ?>">
+								<?php foreach ($form_control['options'] as $key => $option):
+									$key = !is_numeric($key) ? $key : $option;
+									$selected = !empty($form_control['value'] && $key == $form_control['value']) ? 'selected' : ''; ?>
+									<option value="<?= $key ?>" <?= $selected ?>>
+										<?= htmlentities($option) ?>
+									</option>
+								<?php endforeach; ?>
+							</select>
+						<?php elseif ($field_type == "boolean"):
+							$checked = !empty($field_value) ? "checked" : ""; ?>
+							<div class="form-check">
+								<input
+									class="form-check-input"
+									type="checkbox"
+									name="<?= $field_name ?>"
+									id="<?= $field_name ?>"
+									value="true"
+									<?= $checked ?>
+								>
+								<label for="<?= $field_name ?>">
+									<?= $field_label ?>
+								</label>
+							</div>
+						<?php else: ?>
+							<?php if ($field_type == "password"): ?>
+								<div class="u-pos-relative">
 									<input
-										class="form-check-input"
-										type="checkbox"
+										type="text"
+										class="form-control js-password-input"
 										name="<?= $field_name ?>"
 										id="<?= $field_name ?>"
-										value="true"
-										<?= $checked ?>
+										placeholder="<?= $field_placeholder ?>"
 									>
-									<label for="<?= $field_name ?>">
-										<?= $field_label ?>
-									</label>
+									<div class="password-meter">
+										<meter max="4" class="password-meter-input js-password-meter"></meter>
+									</div>
 								</div>
-							<?php } else { ?>
+							<?php else: ?>
 								<input
-									x-model="value"
 									type="text"
 									class="form-control"
 									name="<?= $field_name ?>"
 									id="<?= $field_name ?>"
 									placeholder="<?= $field_placeholder ?>"
 								>
-							<?php } ?>
-						</div>
-					<?php } ?>
-				</div>
+							<?php endif; ?>
+						<?php endif; ?>
+					</div>
+				<?php } ?>
 			</div>
 		</form>
 	<?php } ?>