Start cleaning up templates (#3217)

* Remove list_ssl.js

* Remove setup_webapp.js

* Manually format edit_server.php and delete .js

* Maybe fix error due to certificate having newlines

* Fix textarea

* Add type button to generate button

---------

Co-authored-by: Jaap Marcus <9754650+jaapmarcus@users.noreply.github.com>

web/js/pages/edit_server.js

@@ -1,26 +0,0 @@
-$('#backup_type').change(function () {
-	if (this.value == 'b2') {
-		$('#backup_bucket').show();
-		$('#backup_sftp').hide();
-		$('#backup_rclone').hide();
-	} else if (this.value == 'rclone') {
-		$('#backup_bucket').hide();
-		$('#backup_sftp').hide();
-		$('#backup_rclone').show();
-	} else {
-		$('#backup_bucket').hide();
-		$('#backup_sftp').show();
-		$('#backup_rclone').hide();
-	}
-});
-
-$('#api, #api-system').change(function () {
-	var api = $('#api').val();
-	var apiSystem = $('#api-system').val();
-
-	if (api === 'yes' || apiSystem > 0) {
-		$('#security_ip').show();
-	} else {
-		$('#security_ip').hide();
-	}
-});

web/js/pages/list_ssl.js

@@ -1,14 +0,0 @@
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-function saveTextToBlob(file, element) {
-	const downloadLink = document.createElement('a');
-	downloadLink.style.display = 'none';
-	downloadLink.textContent = 'Download File';
-	downloadLink.download = file;
-	downloadLink.href = window.URL.createObjectURL(
-		new Blob([document.getElementById(element).value], { type: 'text/plain' })
-	);
-
-	const child = document.body.appendChild(downloadLink);
-	downloadLink.click();
-	document.body.removeChild(child);
-}

web/js/pages/setup_webapp.js

@@ -1,4 +0,0 @@
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-function applyRandomStringToTarget(target, min_length = 16) {
-	document.querySelector(`#${target}`).value = randomString(min_length);
-}

web/templates/pages/list_ssl.php

@@ -2,48 +2,94 @@
 <div class="toolbar">
 	<div class="toolbar-inner">
 		<div class="toolbar-right">
-
 		</div>
 	</div>
 </div>
 <!-- End toolbar -->
 
+<!-- Begin form -->
 <div class="container animate__animated animate__fadeIn">
-
 	<form id="vstobjects" name="v_generate_csr" method="post">
 		<input type="hidden" name="token" value="<?= $_SESSION["token"] ?>">
 
 		<div class="form-container">
 			<h1 class="form-title"><?= _("Generating CSR") ?></h1>
-			<?php show_alert_message($_SESSION); ?>
-			<div class="u-mb20">
+			<?php show_alert_message($_SESSION);?>
+			<div
+				x-data="{
+					text: '<?= base64_encode($v_crt) ?>',
+					blob() {
+						return window.URL.createObjectURL(new Blob([atob(this.text)], { type: 'text/plain' }))
+					}
+				}"
+				class="u-mb20"
+			>
 				<label for="v_crt" class="form-label">
 					<?= _("SSL Certificate") ?>
-					<a href="javascript:saveTextToBlob('<?php echo htmlentities($v_domain); ?>.crt', 'v_crt');"><i class="fas fa-download"></i></a>
+					<a
+						x-bind:href="blob()"
+						download="<?= htmlentities($v_domain) ?>.crt"
+					><i class="fas fa-download"></i></a>
 				</label>
-				<textarea class="form-control u-min-height100" name="v_crt" id="v_crt"><?= $v_crt ?></textarea>
+				<textarea
+					x-model="atob(text)"
+					class="form-control u-min-height100"
+					name="v_crt"
+					id="v_crt"
+				></textarea>
 			</div>
-			<div class="u-mb20">
+			<div
+				x-data="{
+					text: '<?= base64_encode($v_key) ?>',
+					blob() {
+						return window.URL.createObjectURL(new Blob([atob(this.text)], { type: 'text/plain' }))
+					}
+				}"
+				class="u-mb20"
+			>
 				<label for="v_key" class="form-label">
-					<?= _("SSL Key") ?>
-					<a href="javascript:saveTextToBlob('<?php echo htmlentities($v_domain); ?>.key', 'v_key');"><i class="fas fa-download"></i></a>
+					<?=_("SSL Key");?>
+					<a
+						x-bind:href="blob()"
+						download="<?= htmlentities($v_domain) ?>.key"
+					><i class="fas fa-download"></i></a>
 				</label>
-				<textarea class="form-control u-min-height100" name="v_key" id="v_key"><?= $v_key ?></textarea>
+				<textarea
+					x-model="atob(text)"
+					class="form-control u-min-height100"
+					name="v_key"
+					id="v_key"
+				></textarea>
 			</div>
-			<div class="u-mb20">
+			<div
+				x-data="{
+					text: '<?= base64_encode($v_csr) ?>',
+					blob() {
+						return window.URL.createObjectURL(new Blob([atob(this.text)], { type: 'text/plain' }))
+					}
+				}"
+				class="u-mb20"
+			>
 				<label for="v_csr" class="form-label">
-					<?= _("SSL CSR") ?>
-					<a href="javascript:saveTextToBlob('<?php echo htmlentities($v_domain); ?>.csr', 'v_crt');"><i class="fas fa-download"></i></a>
+					<?=_("SSL CSR");?>
+					<a
+						x-bind:href="blob()"
+						download="<?= htmlentities($v_domain) ?>.csr"
+					><i class="fas fa-download"></i></a>
 				</label>
-				<textarea class="form-control u-min-height100" name="v_csr" id="v_csr"><?= $v_csr ?></textarea>
+				<textarea
+					x-model="atob(text)"
+					class="form-control u-min-height100"
+					name="v_csr"
+					id="v_csr"
+				></textarea>
 			</div>
 			<div>
 				<button type="button" class="button button-secondary" onclick="<?= $back ?>">
-					<?= _("Back") ?>
+					<?=_("Back");?>
 				</button>
 			</div>
 		</div>
-
 	</form>
-
 </div>
+<!-- End form -->

web/templates/pages/setup_webapp.php

@@ -2,22 +2,29 @@
 <div class="toolbar">
 	<div class="toolbar-inner">
 		<div class="toolbar-buttons">
-			<a class="button button-secondary" id="btn-back" href="/add/webapp/?domain=<?= htmlentities($v_domain) ?>">
-				<i class="fas fa-arrow-left icon-blue"></i><?= _("Back") ?>
+			<a
+				class="button button-secondary"
+				id="btn-back"
+				href="/add/webapp/?domain=<?= htmlentities($v_domain) ?>"
+			>
+				<i class="fas fa-arrow-left icon-blue"></i>
+				<?= _("Back") ?>
 			</a>
 		</div>
 		<div class="toolbar-buttons">
-			<button type="submit" class="button" form="vstobjects">
-				<i class="fas fa-floppy-disk icon-purple"></i><?= _("Save") ?>
+			<button class="button" type="submit" form="vstobjects">
+				<i class="fas fa-floppy-disk icon-purple"></i>
+				<?= _("Save") ?>
 			</button>
 		</div>
 	</div>
 </div>
 <!-- End toolbar -->
 
+<!-- Begin form -->
 <div class="container animate__animated animate__fadeIn">
 
-	<?php if (!empty($WebappInstaller->getOptions())): ?>
+	<?php if (!empty($WebappInstaller->getOptions())) { ?>
 		<form id="vstobjects" method="POST" name="v_setup_webapp">
 			<input type="hidden" name="token" value="<?= $_SESSION["token"] ?>">
 			<input type="hidden" name="ok" value="true">
@@ -25,7 +32,7 @@
 			<div class="form-container">
 				<h1 class="form-title"><?= sprintf(_("Install %s"), $WebappInstaller->info()["name"]) ?></h1>
 				<?php show_alert_message($_SESSION); ?>
-				<?php if (!$WebappInstaller->isDomainRootClean()): ?>
+				<?php if (!$WebappInstaller->isDomainRootClean()) { ?>
 					<div class="alert alert-info" role="alert">
 						<i class="fas fa-info"></i>
 						<div>
@@ -34,61 +41,97 @@
 							<p><?php echo sprintf(_("Please make sure ~/web/%s/public_html is empty!"), $v_domain); ?></p>
 						</div>
 					</div>
-				<?php endif; ?>
+				<?php } ?>
 				<div class="u-mt20">
-					<?php foreach ($WebappInstaller->getOptions() as $form_name => $form_control): ?>
-						<?php
-							$f_name = $WebappInstaller->formNs() . '_' . $form_name;
-							$f_type = $form_control;
-							$f_value = '';
-							if (isset($form_control['label'])) {
-								$f_label = htmlentities($form_control['label']);
-							} else {
-								$f_label = ucwords(str_replace(['.','_'], ' ', $form_name));
-							}
-							$f_placeholder = '';
-							if (is_array($form_control)) {
-								$f_type = (!empty($form_control['type']))?$form_control['type']:'text';
-								$f_value = (!empty($form_control['value']))?$form_control['value']:'';
-								$f_placeholder = (!empty($form_control['placeholder']))?$form_control['placeholder']:'';
-							}
-
-							$f_value = htmlentities($f_value);
-							$f_label = htmlentities($f_label);
-							$f_name = htmlentities($f_name);
-							$f_placeholder = htmlentities($f_placeholder);
-						?>
-						<div class="u-mb10">
-							<?php if ($f_type != "boolean"): ?>
-								<label for="<?= $f_name ?>" class="form-label">
-									<?= $f_label ?>
-									<?php if ($f_type === "password"): ?> / <a href="javascript:applyRandomStringToTarget('<?= $f_name ?>');" class="form-link"><?= _("generate") ?></a> <?php endif; ?>
+					<?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 = randomString()"
+											class="form-link"
+											type="button"
+										>
+											<?= _("generate") ?>
+									</button>
+									<?php } ?>
 								</label>
 							<?php endif; ?>
-							<?php if (in_array($f_type, ['select']) && count($form_control['options']) ):?>
-								<select class="form-select" name="<?=$f_name?>" id="<?=$f_name?>">
-									<?php foreach ($form_control['options'] as $key => $option){
-										if(is_numeric($key)){
-											$key = $option;
-										}
+
+							<?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' : '';
 									?>
-										<?php $selected = (!empty($form_control['value']) && $key == $form_control['value'])?'selected':''?>
-										<option value="<?=$key?>" <?=$selected?>><?=htmlentities($option)?></option>
-									<?php }; ?>
+										<option
+											value="<?= $key ?>"
+											<?= $selected ?>
+										>
+											<?= htmlentities($option) ?>
+										</option>
+									<?php } ?>
 								</select>
-							<?php elseif (in_array($f_type, ["boolean"])): ?>
+							<?php
+							} elseif ($field_type == "boolean") {
+								$checked = !empty($field_value) ? "checked" : "";
+							?>
 								<div class="form-check">
-									<?php $checked = !empty($f_value) ? "checked" : ""; ?>
-									<input class="form-check-input" type="checkbox" name="<?= $f_name ?>" id="<?= $f_name ?>" <?= $checked ?> value="true">
-									<label for="<?= $f_name ?>"><?= $f_label ?></label>
+									<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: ?>
-								<input type="text" class="form-control" name="<?= $f_name ?>" id="<?= $f_name ?>" placeholder="<?= $f_placeholder ?>" value="<?= $f_value ?>">
-							<?php endif; ?>
+							<?php } else { ?>
+								<input
+									x-model="value"
+									type="text"
+									class="form-control"
+									name="<?= $field_name ?>"
+									id="<?= $field_name ?>"
+									placeholder="<?= $field_placeholder ?>"
+								>
+							<?php } ?>
 						</div>
-					<?php endforeach; ?>
+					<?php } ?>
 				</div>
 			</div>
 		</form>
-	<?php endif; ?>
+	<?php } ?>
 </div>
+<!-- End form -->