feat: input cron & validation (WIP)

src/lib/elements/forms/form.svelte

@@ -1,4 +1,8 @@
+<script lang="ts">
+    export let commonSection = false;
+</script>
+
 <!-- svelte-ignore a11y-no-redundant-roles -->
-<form role="form" class="form" on:submit|preventDefault>
+<form role="form" class="form" class:common-section={commonSection} on:submit|preventDefault>
     <slot />
 </form>

src/lib/elements/forms/index.ts

@@ -16,4 +16,5 @@ export { default as InputSelect } from './inputSelect.svelte';
 export { default as InputCheckbox } from './inputCheckbox.svelte';
 export { default as InputChoice } from './inputChoice.svelte';
 export { default as InputPhone } from './inputPhone.svelte';
+export { default as InputCron } from './inputCron.svelte';
 export { default as Helper } from './helper.svelte';

src/lib/elements/forms/inputCron.svelte

@@ -0,0 +1,74 @@
+<script lang="ts">
+    import { onMount } from 'svelte';
+    import { FormItem, Helper } from '.';
+
+    export let label: string;
+    export let showLabel = true;
+    export let id: string;
+    export let value: string = null;
+    export let placeholder = '';
+    export let required = false;
+    export let disabled = false;
+    export let readonly = false;
+    export let autofocus = false;
+    export let maxlength: number = null;
+    export let minlength: number = null;
+    export let step: number | 'any' = 1;
+
+    let element: HTMLInputElement;
+    let error: string;
+
+    let pattern = new RegExp(
+        /^(\*|([0-9]|1[0-9]|2[0-9]|3[0-9]|4[0-9]|5[0-9])|\*\/([0-9]|1[0-9]|2[0-9]|3[0-9]|4[0-9]|5[0-9])) (\*|([0-9]|1[0-9]|2[0-3])|\*\/([0-9]|1[0-9]|2[0-3])) (\*|([1-9]|1[0-9]|2[0-9]|3[0-1])|\*\/([1-9]|1[0-9]|2[0-9]|3[0-1])) (\*|([1-9]|1[0-2])|\*\/([1-9]|1[0-2])) (\*|([0-6])|\*\/([0-6]))$/
+    );
+
+    onMount(() => {
+        if (element && autofocus) {
+            element.focus();
+        }
+    });
+
+    const handleInvalid = (event: Event) => {
+        event.preventDefault();
+
+        if (element.validity.valueMissing) {
+            error = 'This field is required';
+            return;
+        }
+
+        if (element.validity.patternMismatch) {
+            error = 'Please enter a valid CRON expression';
+            return;
+        }
+
+        error = element.validationMessage;
+    };
+
+    $: if (value) {
+        error = null;
+    }
+</script>
+
+<FormItem>
+    <label class:u-hide={!showLabel} class="label" for={id}>{label}</label>
+    <div class="input-text-wrapper">
+        <input
+            {id}
+            {placeholder}
+            {disabled}
+            {required}
+            {minlength}
+            {maxlength}
+            {readonly}
+            {step}
+            type="text"
+            class="input-text"
+            {pattern}
+            bind:value
+            bind:this={element}
+            on:invalid={handleInvalid} />
+    </div>
+    {#if error}
+        <Helper type="warning">{error}</Helper>
+    {/if}
+</FormItem>

src/routes/console/project-[project]/functions/function/[function]/settings/+page.svelte

@@ -1,7 +1,14 @@
 <script lang="ts">
     import { CardGrid, Box } from '$lib/components';
     import { Container } from '$lib/layout';
-    import { Button, InputNumber, InputSelect } from '$lib/elements/forms';
+    import {
+        Button,
+        InputNumber,
+        InputSelect,
+        InputCron,
+        Form,
+        FormList
+    } from '$lib/elements/forms';
     import { base } from '$app/paths';
     import { app } from '$lib/stores/app';
     import { toLocaleDateTime } from '$lib/helpers/date';
@@ -28,8 +35,7 @@
 
     let options = [
         { label: 'seconds', value: 'seconds' },
-        { label: 'minutes', value: 'minutes' },
-        { label: 'hours', value: 'hours' }
+        { label: 'minutes', value: 'minutes' }
     ];
 
     const updateTimeout = async () => {
@@ -93,26 +99,57 @@
         </svelte:fragment>
     </CardGrid>
 
-    <CardGrid>
-        <h2 class="heading-level-6">Update Timeout</h2>
-        <p>Limit the execution time of your function. Maximum value is 900 seconds (15 minutes).</p>
-        <svelte:fragment slot="aside">
-            <form class="form u-grid u-gap-16">
-                <ul class="form-list is-multiple">
-                    <InputNumber id="length" label="Time" value={timeout} />
-                    <InputSelect
-                        id="Increment"
-                        {options}
-                        label="Time Period"
-                        value={options[0].value} />
-                </ul>
-            </form>
-        </svelte:fragment>
+    <Form commonSection on:submit={() => console.log($func.schedule)}>
+        <CardGrid>
+            <h2 class="heading-level-6">Update CRON Schedule</h2>
+            <p>
+                Set a CRON schedule to trigger your function. Leave blank for no schedule. <a
+                    href="#/"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    class="link">
+                    More details on CRON syntax here.</a>
+            </p>
+            <svelte:fragment slot="aside">
+                <FormList>
+                    <InputCron
+                        bind:value={$func.schedule}
+                        label="Schedule (CRON Syntax)"
+                        id="schedule" />
+                </FormList>
+            </svelte:fragment>
 
-        <svelte:fragment slot="actions">
-            <Button disabled={true} on:click={updateTimeout}>Update</Button>
-        </svelte:fragment>
-    </CardGrid>
+            <svelte:fragment slot="actions">
+                <Button disabled={false} submit>Update</Button>
+            </svelte:fragment>
+        </CardGrid>
+    </Form>
+
+    <Form commonSection on:submit={updateTimeout}>
+        <CardGrid>
+            <h2 class="heading-level-6">Update Timeout</h2>
+            <p>
+                Limit the execution time of your function. Maximum value is 900 seconds (15
+                minutes).
+            </p>
+            <svelte:fragment slot="aside">
+                <div class="form u-grid u-gap-16">
+                    <ul class="form-list is-multiple">
+                        <InputNumber id="length" label="Time" value={timeout} />
+                        <InputSelect
+                            id="Increment"
+                            {options}
+                            label="Time Period"
+                            value={options[0].value} />
+                    </ul>
+                </div>
+            </svelte:fragment>
+
+            <svelte:fragment slot="actions">
+                <Button disabled={true} submit>Update</Button>
+            </svelte:fragment>
+        </CardGrid>
+    </Form>
 
     <CardGrid>
         <h6 class="heading-level-7">Delete Function</h6>

src/routes/console/project-[project]/functions/wizard/step4.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
     import { WizardStep } from '$lib/layout';
-    // import { createFunction } from './store';
+    import { FormList, InputCron } from '$lib/elements/forms';
+    import { createFunction } from './store';
 </script>
 
 <WizardStep>
@@ -12,7 +13,11 @@
             rel="noopener noreferrer"
             class="link">More details on CRON syntax here</a
         >.
+        <FormList>
+            <InputCron
+                bind:value={$createFunction.schedule}
+                label="Schedule (CRON Syntax)"
+                id="schedule" />
+        </FormList>
     </svelte:fragment>
-
-    EVENT
 </WizardStep>