From f4542dfd6cb5f33a7108887f04a33c6bce26d228 Mon Sep 17 00:00:00 2001
From: Torsten Dittmann <torsten.dittmann@googlemail.com>
Date: Fri, 10 Mar 2023 03:09:48 +0530
Subject: [PATCH] feat: smart forms

---
 src/lib/elements/forms/button.svelte | 16 ++++++++++++-
 src/lib/elements/forms/form.svelte   | 36 ++++++++++++++++++++++++----
 2 files changed, 46 insertions(+), 6 deletions(-)

diff --git a/src/lib/elements/forms/button.svelte b/src/lib/elements/forms/button.svelte
index 27764b2a3..c6a07f40f 100644
--- a/src/lib/elements/forms/button.svelte
+++ b/src/lib/elements/forms/button.svelte
@@ -1,5 +1,7 @@
 <script lang="ts">
     import { trackEvent } from '$lib/actions/analytics';
+    import { getContext } from 'svelte';
+    import type { FormContext } from './form.svelte';
 
     export let submit = false;
     export let secondary = false;
@@ -17,6 +19,18 @@
     //allows to add the disabled attribute to <a> tag without throwing an error
     let attributes = { disabled } as Record<string, boolean>;
 
+    let formDisabled = false;
+
+    if (submit) {
+        const { isSubmitting } = getContext<FormContext>('form');
+
+        isSubmitting.subscribe((value) => {
+            formDisabled = value;
+        });
+    }
+
+    $: actualDisabled = formDisabled || disabled;
+
     function track() {
         if (!event) {
             return;
@@ -49,7 +63,7 @@
     <button
         on:click
         on:click={track}
-        {disabled}
+        disabled={actualDisabled}
         class="button"
         class:is-only-icon={round}
         class:is-secondary={secondary}
diff --git a/src/lib/elements/forms/form.svelte b/src/lib/elements/forms/form.svelte
index b1ca522eb..fcb58760a 100644
--- a/src/lib/elements/forms/form.svelte
+++ b/src/lib/elements/forms/form.svelte
@@ -1,9 +1,35 @@
-<script lang="ts">
-    export let noMargin = false;
-    export let noStyle = false;
+<script context="module" lang="ts">
+    import type { Writable } from 'svelte/store';
+
+    export type FormContext = {
+        isSubmitting: Writable<boolean>;
+    };
 </script>
 
-<!-- svelte-ignore a11y-no-redundant-roles -->
-<form role="form" class:form={!noStyle} class:common-section={!noMargin} on:submit|preventDefault>
+<script lang="ts">
+    import { setContext } from 'svelte';
+    import { writable } from 'svelte/store';
+
+    export let noMargin = false;
+    export let noStyle = false;
+    export let isModal = false;
+    export let onSubmit: () => Promise<void> | void;
+
+    const { isSubmitting } = setContext<FormContext>('form', {
+        isSubmitting: writable(false)
+    });
+
+    async function submit() {
+        isSubmitting.set(true);
+        await onSubmit();
+        isSubmitting.set(false);
+    }
+</script>
+
+<form
+    class:form={!noStyle}
+    class:common-section={!noMargin}
+    class:modal-form={isModal}
+    on:submit|preventDefault={submit}>
     <slot />
 </form>