From 900d2ea7145feebd344aa2f77363b5a05a57f4a4 Mon Sep 17 00:00:00 2001
From: Klemek <klemek.dev@proton.me>
Date: Fri, 10 Jul 2026 10:43:47 +0200
Subject: [PATCH] feat: validate cron syntax

---
 README.md                             |  2 +-
 resources/ts/components/CronInput.vue | 23 ++++++++++++++++++++---
 resources/ts/components/TaskItem.vue  | 10 +++++++---
 3 files changed, 28 insertions(+), 7 deletions(-)

diff --git a/README.md b/README.md
index 5200769..5bb855d 100644
--- a/README.md
+++ b/README.md
@@ -3,7 +3,7 @@
 ## TODO
 
 - [ ] auto refresh task completion
-- [ ] validate cron string
+- [x] validate cron string
 - [ ] clone task
 - [ ] delete task
 - [ ] list per URL
diff --git a/resources/ts/components/CronInput.vue b/resources/ts/components/CronInput.vue
index c3e156b..acac6be 100644
--- a/resources/ts/components/CronInput.vue
+++ b/resources/ts/components/CronInput.vue
@@ -1,7 +1,10 @@
 <script setup lang="ts">
 import { ref, onBeforeMount, watch } from "vue";
-const cron = defineModel<string|null>({ required: true });
+import { CronExpressionParser } from 'cron-parser'
 
+const cron = defineModel<string|null>({ required: true });
+const rawCron = ref<string>('0 0 * * *');
+const valid = ref<boolean>(true);
 const props = defineProps<{editMode: boolean}>();
 
 enum CRON_OPTION {
@@ -35,6 +38,7 @@ function updateFromValue() {
     } else {
         cronOption.value = CRON_OPTION.SPECIFIC;
     }
+    rawCron.value = cron.value ?? '0 0 * * *';
 }
 
 function updateCron() {
@@ -55,7 +59,7 @@ function updateCron() {
             cron.value = `0 0 1 ${cronValue.value.toFixed(0)} *`;
             break;
         case CRON_OPTION.SPECIFIC:
-            cron.value ??= '0 0 * * *';
+            rawCron.value = cron.value ?? '0 0 * * *';
             break;
     }
 }
@@ -70,6 +74,9 @@ function changecronOption() {
         case CRON_OPTION.EVERY_YEAR:
             cronValue.value = 1;
             break;
+        case CRON_OPTION.SPECIFIC:
+            cron.value ??= '0 0 * * *';
+            break;
     }
     updateCron();
 }
@@ -82,6 +89,16 @@ watch(cron, () => {
 });
 
 watch(cronValue, updateCron);
+
+watch(rawCron, () => {
+    try {
+        CronExpressionParser.parse(rawCron.value);
+        valid.value = true;
+        cron.value = rawCron.value;
+    } catch {
+        valid.value = false;
+    }
+});
 </script>
 
 <template>
@@ -123,6 +140,6 @@ watch(cronValue, updateCron);
           <option :value="11">November</option>
           <option :value="12">December</option>
         </select>
-        <input v-if="cronOption === CRON_OPTION.SPECIFIC" v-model="cron" type="text" class="input font-mono" />
+        <input v-if="cronOption === CRON_OPTION.SPECIFIC" v-model="rawCron" type="text" class="input font-mono" :class="valid ? '' : 'input-error'" />
     </div>
 </template>
diff --git a/resources/ts/components/TaskItem.vue b/resources/ts/components/TaskItem.vue
index e0e66c5..ea70b9d 100644
--- a/resources/ts/components/TaskItem.vue
+++ b/resources/ts/components/TaskItem.vue
@@ -18,9 +18,13 @@ const checked = computed<boolean>(() => {
     if (task.value.reset_cron === null) {
         return true;
     }
-    const interval = CronExpressionParser.parse(task.value.reset_cron, {currentDate: task.value.check_date});
-    const nextDate = interval.next();
-    return nextDate.getTime() > (new Date()).getTime();
+    try {
+        const interval = CronExpressionParser.parse(task.value.reset_cron, {currentDate: task.value.check_date});
+        const nextDate = interval.next();
+        return nextDate.getTime() > (new Date()).getTime();
+    } catch {
+        return false;
+    }
 });
 
 function save() {