UI fixes/refactors (hestiacp#3162)

* UI fixes/refactors

* Bump jQuery to 3.6.3

Author: AlecRust

docs/docs/contributing/development.md

@@ -15,7 +15,7 @@ These are example instructions for creating a virtual machine running Hestia for
 These instructions use [Multipass](https://multipass.run/) to create the VM. Feel free to adapt the commands for any virtualization software you prefer.
 
 ::: warning
-Sometimes during this process, the mapping between the source code directory on your local machine to the directory in the VM can be lost. If this happens simply unmount and remount e.g.
+Sometimes the mapping between the source code directory on your local machine to the directory in the VM can be lost. If this happens simply unmount and remount e.g.
 
 ```bash
 multipass unmount hestia-dev

package.json

@@ -23,8 +23,8 @@
 	},
 	"devDependencies": {
 		"@prettier/plugin-php": "^0.19.2",
-		"@typescript-eslint/eslint-plugin": "^5.46.1",
-		"@typescript-eslint/parser": "^5.46.1",
+		"@typescript-eslint/eslint-plugin": "^5.47.0",
+		"@typescript-eslint/parser": "^5.47.0",
 		"cssnano": "^5.1.14",
 		"eslint": "^8.30.0",
 		"eslint-config-prettier": "^8.5.0",
@@ -45,7 +45,7 @@
 		"stylelint-config-prettier": "^9.0.4",
 		"stylelint-config-standard": "^29.0.0",
 		"typescript": "^4.9.4",
-		"vitepress": "1.0.0-alpha.32",
+		"vitepress": "1.0.0-alpha.33",
 		"vue": "^3.2.45"
 	}
 }

web/inc/main.php

@@ -235,14 +235,20 @@ function show_alert_message($data) {
 
 	if (!empty($msgText)) {
 		printf(
-			'<p class="inline-alert %s u-mb20"><i class="fas %s"></i> %s</p>',
+			'<div class="inline-alert %s u-mb20" role="alert"><i class="fas %s"></i><p>%s</p></div>',
 			$msgClass,
 			$msgIcon,
 			$msgText,
 		);
 	}
 }
 
+function show_error_message($error) {
+	if (isset($error)) {
+		echo $error;
+	}
+}
+
 function top_panel($user, $TAB) {
 	$command = HESTIA_CMD . "v-list-user " . $user . " 'json'";
 	exec($command, $output, $return_var);

web/js/vendor/jquery-3.6.2.min.js

@@ -1,7 +1,7 @@
 <script defer src="/js/main.js?<?= JS_LATEST_UPDATE ?>"></script>
 <script defer src="/js/shortcuts.js?<?= JS_LATEST_UPDATE ?>"></script>
 <script defer src="/js/vendor/alpine-3.10.5.min.js?<?= JS_LATEST_UPDATE ?>"></script>
-<script defer src="/js/vendor/jquery-3.6.2.min.js?<?= JS_LATEST_UPDATE ?>"></script>
+<script defer src="/js/vendor/jquery-3.6.3.min.js?<?= JS_LATEST_UPDATE ?>"></script>
 <script defer src="/js/vendor/jquery-ui.min.js?<?= JS_LATEST_UPDATE ?>"></script>
 <script defer src="/js/vendor/chart.min.js?<?= JS_LATEST_UPDATE ?>"></script>
 <script defer src="/js/events.js?<?= JS_LATEST_UPDATE ?>"></script>

web/js/vendor/jquery-3.6.3.min.js

@@ -7,7 +7,7 @@
 			</a>
 		</div>
 		<div class="toolbar-buttons">
-			<button class="button" type="submit" form="vstobjects">
+			<button type="submit" class="button" form="vstobjects">
 				<i class="fas fa-floppy-disk icon-purple"></i><?= _("Save") ?>
 			</button>
 		</div>

web/templates/includes/js.php

@@ -7,7 +7,7 @@
 			</a>
 		</div>
 		<div class="toolbar-buttons">
-			<button class="button" type="submit" form="vstobjects">
+			<button type="submit" class="button" form="vstobjects">
 				<i class="fas fa-floppy-disk icon-purple"></i><?= _("Save") ?>
 			</button>
 		</div>
@@ -344,7 +344,7 @@
 		<input type="hidden" name="token" value="<?= $_SESSION["token"] ?>">
 		<input type="hidden" name="ok" value="Add">
 
-		<div class="form-container">
+		<div class="form-container form-container-wide">
 			<h1 class="form-title"><?= _("Adding Cron Job") ?></h1>
 			<?php show_alert_message($_SESSION); ?>
 			<div class="u-mb20">

web/templates/pages/add_access_key.php

@@ -7,7 +7,7 @@
 			</a>
 		</div>
 		<div class="toolbar-buttons">
-			<button class="button" type="submit" form="vstobjects">
+			<button type="submit" class="button" form="vstobjects">
 				<i class="fas fa-floppy-disk icon-purple"></i><?= _("Save") ?>
 			</button>
 		</div>

web/templates/pages/add_cron.php

@@ -7,7 +7,7 @@
 			</a>
 		</div>
 		<div class="toolbar-buttons">
-			<button class="button" type="submit" form="vstobjects">
+			<button type="submit" class="button" form="vstobjects">
 				<i class="fas fa-floppy-disk icon-purple"></i><?= _("Save") ?>
 			</button>
 		</div>