feat: validate cron syntax

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

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>

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});
+    try {
-    const nextDate = interval.next();
+        const interval = CronExpressionParser.parse(task.value.reset_cron, {currentDate: task.value.check_date});
-    return nextDate.getTime() > (new Date()).getTime();
+        const nextDate = interval.next();
+        return nextDate.getTime() > (new Date()).getTime();
+    } catch {
+        return false;
+    }
 });
 
 function save() {