From ce42d060ff51d5caf2d0bf2f7da078a260080088 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Maxi=20Quo=C3=9F?= <maxi@quoss.org>
Date: Sun, 16 Mar 2025 14:42:55 +0100
Subject: [PATCH] feat: add <pre> tags for cron explaination

---
 frontend/src/lib/components/DeviceForm.svelte | 34 +++++++-
 frontend/src/routes/account/+page.svelte      | 81 ++++++++++---------
 frontend/src/routes/settings/+page.svelte     | 19 ++---
 3 files changed, 83 insertions(+), 51 deletions(-)

diff --git a/frontend/src/lib/components/DeviceForm.svelte b/frontend/src/lib/components/DeviceForm.svelte
index 7ee153e1..af0120aa 100644
--- a/frontend/src/lib/components/DeviceForm.svelte
+++ b/frontend/src/lib/components/DeviceForm.svelte
@@ -365,7 +365,9 @@
 				</fieldset>
 			</div>
 			<div class="flex flex-row flex-wrap gap-4">
-				<fieldset class="fieldset bg-base-100 border-base-300 rounded-box w-64 border p-4">
+				<fieldset
+					class="fieldset bg-base-100 border-base-300 rounded-box w-fit min-w-64 border p-4"
+				>
 					<legend class="fieldset-legend">{m.device_wake_cron_enable()}</legend>
 					<label class="fieldset-label">
 						<input
@@ -400,6 +402,18 @@
 							</p>
 						{/if}
 					</label>
+					{#if device.wake_cron_enabled}
+						<pre class="bg-base-100 text-base-content/80 w-fit rounded p-2"><code
+								>* * * * * *
+| | | | | |
+| | | | | day of the week (0–6)
+| | | | month (1–12)
+| | | day of the month (1–31)
+| | hour (0–23)
+| minute (0–59)
+second (0–59, optional)
+</code></pre>
+					{/if}
 				</fieldset>
 				<fieldset class="fieldset bg-base-100 border-base-300 rounded-box w-64 border p-4">
 					<legend class="fieldset-legend">{m.device_require_confirmation()}</legend>
@@ -465,7 +479,9 @@
 				{m.device_shutdown_cron_desc()}
 			</p>
 			<div class="flex flex-row flex-wrap gap-4">
-				<fieldset class="fieldset bg-base-100 border-base-300 rounded-box w-64 border p-4">
+				<fieldset
+					class="fieldset bg-base-100 border-base-300 rounded-box w-fit min-w-64 border p-4"
+				>
 					<legend class="fieldset-legend">{m.device_shutdown_cron_enable()}</legend>
 					<label class="fieldset-label">
 						<input
@@ -492,7 +508,7 @@
 						/>
 						{#if device.shutdown_cron_enabled}
 							<p class="fieldset-label">
-								{#await validateCron(device.wake_cron)}
+								{#await validateCron(device.shutdown_cron)}
 									<span class="loading loading-spinner loading-xs"></span>
 								{:then valid}
 									{valid ? '✅ ' + nextCronDate(device.shutdown_cron) : m.settings_invalid_cron()}
@@ -500,6 +516,18 @@
 							</p>
 						{/if}
 					</label>
+					{#if device.shutdown_cron_enabled}
+						<pre class="bg-base-100 text-base-content/80 w-fit rounded p-2"><code
+								>* * * * * *
+| | | | | |
+| | | | | day of the week (0–6)
+| | | | month (1–12)
+| | | day of the month (1–31)
+| | hour (0–23)
+| minute (0–59)
+second (0–59, optional)
+</code></pre>
+					{/if}
 				</fieldset>
 				<fieldset class="fieldset bg-base-100 border-base-300 rounded-box w-64 border p-4">
 					<legend class="fieldset-legend">{m.device_require_confirmation()}</legend>
diff --git a/frontend/src/routes/account/+page.svelte b/frontend/src/routes/account/+page.svelte
index 22085d96..52491026 100644
--- a/frontend/src/routes/account/+page.svelte
+++ b/frontend/src/routes/account/+page.svelte
@@ -205,48 +205,51 @@
 		<form on:submit|preventDefault={changePassword}>
 			<div class="w-full max-w-xs">
 				{#if !$pocketbase.authStore.isSuperuser}
-					<label class="label" for="password-old">
-						<span>{m.account_change_password_label()}</span>
-					</label>
-					<input
-						id="password-old"
-						type="password"
-						placeholder={m.account_change_password_label()}
-						class="input w-full max-w-xs"
-						minlength="5"
-						maxlength="72"
-						bind:value={newPassword.old}
-						required
-					/>
+					<fieldset class="fieldset">
+						<label class="floating-label mt-2">
+							<span>{m.account_change_password_label()} <span class="text-error">*</span></span>
+							<input
+								type="password"
+								placeholder={m.account_change_password_label()}
+								class="input"
+								minlength="5"
+								maxlength="72"
+								bind:value={newPassword.old}
+								required
+							/>
+						</label>
+					</fieldset>
 				{/if}
-				<label class="label" for="password-new">
-					<span>{m.account_change_password_new()}</span>
-				</label>
-				<input
-					id="password-new"
-					type="password"
-					placeholder={m.account_change_password_new()}
-					class="input w-full max-w-xs"
-					minlength={$pocketbase.authStore.isSuperuser ? 10 : 5}
-					maxlength="72"
-					bind:value={newPassword.password}
-					required
-				/>
+				<fieldset class="fieldset">
+					<label class="floating-label mt-2">
+						<span>{m.account_change_password_new()} <span class="text-error">*</span></span>
+						<input
+							type="password"
+							placeholder={m.account_change_password_new()}
+							class="input"
+							minlength={$pocketbase.authStore.isSuperuser ? 10 : 5}
+							maxlength="72"
+							bind:value={newPassword.password}
+							required
+						/>
+					</label>
+				</fieldset>
 			</div>
 			<div class="w-full max-w-xs">
-				<label class="label" for="password-confirm">
-					<span>{m.account_change_password_confirm()}</span>
-				</label>
-				<input
-					id="password-confirm"
-					type="password"
-					placeholder={m.account_change_password_confirm()}
-					class="input w-full max-w-xs"
-					minlength={$pocketbase.authStore.isSuperuser ? 10 : 5}
-					maxlength="72"
-					bind:value={newPassword.confirm}
-					required
-				/>
+				<fieldset class="fieldset">
+					<label class="floating-label mt-2">
+						<span>{m.account_change_password_confirm()} <span class="text-error">*</span></span>
+						<input
+							type="password"
+							placeholder={m.account_change_password_confirm()}
+							class="input"
+							minlength={$pocketbase.authStore.isSuperuser ? 10 : 5}
+							maxlength="72"
+							bind:value={newPassword.confirm}
+							required
+						/>
+					</label>
+				</fieldset>
 			</div>
 			<div class="mt-2">
 				<button type="submit" class="btn btn-success mt-2"
diff --git a/frontend/src/routes/settings/+page.svelte b/frontend/src/routes/settings/+page.svelte
index 21d27bb5..889b6c0c 100644
--- a/frontend/src/routes/settings/+page.svelte
+++ b/frontend/src/routes/settings/+page.svelte
@@ -117,14 +117,6 @@
 					<!-- eslint-disable svelte/no-at-html-tags -->
 					{@html m.settings_ping_interval_desc2()}
 				</p>
-				<p>
-					<span class="badge">Second (Optional)</span>
-					<span class="badge">Minute</span>
-					<span class="badge">Hour</span>
-					<span class="badge">DoM</span>
-					<span class="badge">Month</span>
-					<span class="badge">DoW</span>
-				</p>
 				<div class="mt-2 w-full">
 					<input
 						type="text"
@@ -140,7 +132,16 @@
 						{valid ? '✅ ' + nextCronDate(settingsPrivClone.interval) : m.settings_invalid_cron()}
 					{/await}
 				</p>
-
+				<pre class="bg-base-100 text-base-content/80 w-fit rounded p-2"><code
+						>* * * * * *
+| | | | | |
+| | | | | day of the week (0–6)
+| | | | month (1–12)
+| | | day of the month (1–31)
+| | hour (0–23)
+| minute (0–59)
+second (0–59, optional)
+</code></pre>
 				<h2 class="card-title mt-2">{m.settings_lazy_ping_title()}</h2>
 				<p class="mt-2">
 					{m.settings_lazy_ping_desc()}