Merge pull request #334 from appwrite/feat-smart-forms

feat: smart forms

.github/workflows/tests.yml

@@ -15,7 +15,7 @@ jobs:
         steps:
             - uses: actions/checkout@v3
             - name: Use Node.js
-              uses: actions/setup-node@v2
+              uses: actions/setup-node@v3
               with:
                   node-version: 18
             # - name: Audit dependencies

package-lock.json

@@ -4493,6 +4493,23 @@
             "integrity": "sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ==",
             "dev": true
         },
+        "node_modules/happy-dom": {
+            "version": "8.9.0",
+            "resolved": "https://registry.npmjs.org/happy-dom/-/happy-dom-8.9.0.tgz",
+            "integrity": "sha512-JZwJuGdR7ko8L61136YzmrLv7LgTh5b8XaEM3P709mLjyQuXJ3zHTDXvUtBBahRjGlcYW0zGjIiEWizoTUGKfA==",
+            "dev": true,
+            "optional": true,
+            "peer": true,
+            "dependencies": {
+                "css.escape": "^1.5.1",
+                "he": "^1.2.0",
+                "iconv-lite": "^0.6.3",
+                "node-fetch": "^2.x.x",
+                "webidl-conversions": "^7.0.0",
+                "whatwg-encoding": "^2.0.0",
+                "whatwg-mimetype": "^3.0.0"
+            }
+        },
         "node_modules/has": {
             "version": "1.0.3",
             "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
@@ -4562,6 +4579,17 @@
                 "url": "https://github.com/sponsors/ljharb"
             }
         },
+        "node_modules/he": {
+            "version": "1.2.0",
+            "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
+            "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==",
+            "dev": true,
+            "optional": true,
+            "peer": true,
+            "bin": {
+                "he": "bin/he"
+            }
+        },
         "node_modules/html-encoding-sniffer": {
             "version": "3.0.0",
             "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-3.0.0.tgz",

src/lib/components/eventModal.svelte

@@ -245,7 +245,7 @@
     }
 </script>
 
-<Modal bind:show on:submit={create} size="big">
+<Modal bind:show onSubmit={create} size="big">
     <svelte:fragment slot="header">Create Event</svelte:fragment>
     <slot />
     <div>

src/lib/components/feedbackGeneral.svelte

@@ -51,7 +51,7 @@
         Your feedback is important to us. Please be honest and tell us what you think.
     </div>
 
-    <Form on:submit={handleSubmit}>
+    <Form onSubmit={handleSubmit}>
         <FormList>
             <InputText
                 label="name"

src/lib/components/feedbackNPS.svelte

@@ -49,7 +49,7 @@
         think.
     </div>
 
-    <Form on:submit={handleSubmit}>
+    <Form onSubmit={handleSubmit}>
         <Evaluation bind:value>
             How likely are you to recommend Appwrite to a friend or colleague?
         </Evaluation>

src/lib/components/modal.svelte

@@ -2,12 +2,16 @@
     import { createEventDispatcher, onDestroy, onMount } from 'svelte';
     import { Alert } from '$lib/components';
     import { trackEvent } from '$lib/actions/analytics';
+    import { Form } from '$lib/elements/forms';
 
     export let show = false;
     export let size: 'small' | 'big' = null;
     export let warning = false;
     export let error: string = null;
     export let closable = true;
+    export let onSubmit: () => Promise<void> | void = function () {
+        return;
+    };
 
     let dialog: HTMLDialogElement;
     let alert: HTMLElement;
@@ -77,8 +81,7 @@
     class:is-big={size === 'big'}
     bind:this={dialog}>
     {#if show}
-        <!-- svelte-ignore a11y-no-redundant-roles -->
-        <form class="modal-form" role="form" on:submit|preventDefault>
+        <Form isModal {onSubmit}>
             <header class="modal-header">
                 {#if warning}
                     <div class="avatar is-warning is-medium">
@@ -127,6 +130,6 @@
                     </div>
                 </div>
             {/if}
-        </form>
+        </Form>
     {/if}
 </dialog>

src/lib/components/permissions/custom.svelte

@@ -25,7 +25,7 @@
     $: disabled = !value || $groups.has(value);
 </script>
 
-<Modal bind:show on:close={reset} on:submit={create}>
+<Modal bind:show on:close={reset} onSubmit={create}>
     <svelte:fragment slot="header">Custom permission</svelte:fragment>
     <p class="text">
         Custom permissions allow you to grant access to specific users or teams using their ID and

src/lib/components/permissions/team.svelte

@@ -58,7 +58,7 @@
     }
 </script>
 
-<Modal bind:show on:submit={create} on:close={reset} size="big">
+<Modal bind:show onSubmit={create} on:close={reset} size="big">
     <svelte:fragment slot="header">Select teams</svelte:fragment>
     <p class="text">
         Grant access to any member of a specific team. To grant access to team members with specific

src/lib/components/permissions/user.svelte

@@ -58,7 +58,7 @@
     }
 </script>
 
-<Modal bind:show on:submit={create} on:close={reset} size="big">
+<Modal bind:show onSubmit={create} on:close={reset} size="big">
     <svelte:fragment slot="header">Select users</svelte:fragment>
     <p class="text">Grant access to any authenticated or anonymous user.</p>
     <InputSearch

src/lib/elements/forms/button.svelte

@@ -1,5 +1,8 @@
 <script lang="ts">
     import { trackEvent } from '$lib/actions/analytics';
+    import { getContext, hasContext } from 'svelte';
+    import { readable } from 'svelte/store';
+    import type { FormContext } from './form.svelte';
 
     export let submit = false;
     export let secondary = false;
@@ -14,8 +17,14 @@
     export let noMargin = false;
     export let event: string = null;
 
+    const isSubmitting = hasContext('form')
+        ? getContext<FormContext>('form').isSubmitting
+        : readable(false);
+
+    $: internalDisabled = (submit && $isSubmitting) || disabled;
+
     //allows to add the disabled attribute to <a> tag without throwing an error
-    let attributes = { disabled } as Record<string, boolean>;
+    $: attributes = { internalDisabled } as Record<string, boolean>;
 
     function track() {
         if (!event) {
@@ -49,7 +58,7 @@
     <button
         on:click
         on:click={track}
-        {disabled}
+        disabled={internalDisabled}
         class="button"
         class:is-only-icon={round}
         class:is-secondary={secondary}

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>

src/lib/helpers/promises.ts

@@ -0,0 +1,3 @@
+export async function sleep(ms: number): Promise<void> {
+    return new Promise((r) => setTimeout(r, ms));
+}

src/lib/layout/wizard.svelte

@@ -122,7 +122,7 @@
         {/if}
     </div>
     <div class="wizard-main">
-        <Form noStyle on:submit={submit}>
+        <Form noStyle onSubmit={submit}>
             {#each sortedSteps as [step, { component }]}
                 {#if currentStep === step}
                     <svelte:component this={component} />

src/lib/layout/wizardExitModal.svelte

@@ -11,7 +11,7 @@
     }
 </script>
 
-<Modal bind:show on:submit={handleSubmit} warning>
+<Modal bind:show onSubmit={handleSubmit} warning>
     <svelte:fragment slot="header">Exit Process</svelte:fragment>
     <p>
         Are you sure you want to exit from <slot />? All data will be deleted. This action is

src/lib/mock/form.test.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+    import Form from '../elements/forms/form.svelte';
+    import Button from '../elements/forms/button.svelte';
+
+    export let onSubmit: () => Promise<void> | void;
+</script>
+
+<Form {onSubmit}>
+    <Button submit>Submit</Button>
+    <Button>Button</Button>
+</Form>

src/routes/console/account/+page.svelte

@@ -79,7 +79,7 @@
 </script>
 
 <Container>
-    <Form on:submit={updateName}>
+    <Form onSubmit={updateName}>
         <CardGrid>
             <Heading tag="h6" size="7">Update Name</Heading>
 
@@ -94,7 +94,7 @@
             </svelte:fragment>
         </CardGrid>
     </Form>
-    <Form on:submit={updateEmail}>
+    <Form onSubmit={updateEmail}>
         <CardGrid>
             <Heading tag="h6" size="7">Update Email</Heading>
 
@@ -122,7 +122,7 @@
             </svelte:fragment>
         </CardGrid>
     </Form>
-    <Form on:submit={updatePassword}>
+    <Form onSubmit={updatePassword}>
         <CardGrid>
             <Heading tag="h6" size="7">Update Password</Heading>
             <p class="text">

src/routes/console/account/delete.svelte

@@ -29,7 +29,7 @@
     };
 </script>
 
-<Modal bind:show={showDelete} on:submit={deleteAccount} warning>
+<Modal bind:show={showDelete} onSubmit={deleteAccount} warning>
     <svelte:fragment slot="header">Delete Account</svelte:fragment>
     <p>Are you sure you want to delete your account?</p>
     <svelte:fragment slot="footer">

src/routes/console/createOrganization.svelte

@@ -42,7 +42,7 @@
     };
 </script>
 
-<Modal {error} on:submit={create} size="big" bind:show>
+<Modal {error} onSubmit={create} size="big" bind:show>
     <svelte:fragment slot="header">Create New Organization</svelte:fragment>
     <FormList>
         <InputText

src/routes/console/onboarding/+page.svelte

@@ -15,11 +15,9 @@
     let name: string;
     let id: string;
     let showCustomId = false;
-    let loading = false;
 
     async function createProject() {
         try {
-            loading = true;
             const org = await createOrganization();
             const project = await sdk.forConsole.projects.create(
                 id ?? ID.unique(),
@@ -34,7 +32,6 @@
                 teamId: org.$id
             });
         } catch (error) {
-            loading = false;
             addNotification({
                 message: error.message,
                 type: 'error'
@@ -50,14 +47,13 @@
 
 <Container overlapCover size="large">
     <Card>
-        <Form on:submit={createProject}>
+        <Form onSubmit={createProject}>
             <FormList>
                 <InputText
                     id="name"
                     label="Project name"
                     placeholder="First Appwrite Project"
                     required
-                    disabled={loading}
                     bind:value={name} />
                 {#if !showCustomId}
                     <div>
@@ -70,7 +66,7 @@
                 {:else}
                     <CustomId bind:show={showCustomId} name="Project" bind:id />
                 {/if}
-                <Button fullWidth submit disabled={loading || name === ''} event="create_project">
+                <Button fullWidth submit disabled={name === ''} event="create_project">
                     Create project
                 </Button>
             </FormList>

src/routes/console/organization-[organization]/createMember.svelte

@@ -47,7 +47,7 @@
     }
 </script>
 
-<Modal {error} size="big" bind:show={showCreate} on:submit={create}>
+<Modal {error} size="big" bind:show={showCreate} onSubmit={create}>
     <svelte:fragment slot="header">Invite Member</svelte:fragment>
     <FormList>
         <InputEmail

src/routes/console/organization-[organization]/createProject.svelte

@@ -18,11 +18,9 @@
     let name: string;
     let showCustomId = false;
     let error: string;
-    let isCreating = false;
 
     async function create() {
         try {
-            isCreating = true;
             const project = await sdk.forConsole.projects.create(
                 id ?? ID.unique(),
                 name,
@@ -40,23 +38,16 @@
             });
             await goto(`/console/project-${project.$id}`);
         } catch (e) {
-            isCreating = false;
             error = e.message;
             trackError(e, Submit.ProjectCreate);
         }
     }
 </script>
 
-<Modal {error} on:submit={create} size="big" bind:show>
+<Modal {error} onSubmit={create} size="big" bind:show>
     <svelte:fragment slot="header">Create Project</svelte:fragment>
     <FormList>
-        <InputText
-            id="name"
-            label="Name"
-            bind:value={name}
-            required
-            autofocus={true}
-            disabled={isCreating} />
+        <InputText id="name" label="Name" bind:value={name} required autofocus={true} />
         {#if !showCustomId}
             <div>
                 <Pill button on:click={() => (showCustomId = !showCustomId)}>
@@ -71,6 +62,6 @@
     </FormList>
     <svelte:fragment slot="footer">
         <Button secondary on:click={() => (show = false)}>Cancel</Button>
-        <Button submit disabled={isCreating}>Create</Button>
+        <Button submit>Create</Button>
     </svelte:fragment>
 </Modal>

src/routes/console/organization-[organization]/deleteMember.svelte

@@ -43,7 +43,7 @@
     $: isUser = selectedMember?.userId === $user?.$id;
 </script>
 
-<Modal bind:show={showDelete} on:submit={deleteMembership} warning>
+<Modal bind:show={showDelete} onSubmit={deleteMembership} warning>
     <svelte:fragment slot="header">
         {isUser ? 'Leave Organization' : 'Delete Member'}
     </svelte:fragment>

src/routes/console/organization-[organization]/deleteOrganization.svelte

@@ -37,7 +37,7 @@
     };
 </script>
 
-<Modal on:submit={deleteOrg} bind:show={showDelete} warning>
+<Modal onSubmit={deleteOrg} bind:show={showDelete} warning>
     <svelte:fragment slot="header">Delete Organization</svelte:fragment>
     <p>
         Are you sure you want to delete <b>{$organization.name}</b>? All projects ({$organization.total})

src/routes/console/organization-[organization]/settings/+page.svelte

@@ -41,7 +41,7 @@
 
 <Container>
     {#if $organization}
-        <Form on:submit={updateName}>
+        <Form onSubmit={updateName}>
             <CardGrid>
                 <Heading tag="h6" size="7">Update Name</Heading>
 

src/routes/console/project-[project]/auth/appleOAuth.svelte

@@ -57,7 +57,7 @@
     $: secret = keyID && teamID && p8 ? JSON.stringify({ keyID, teamID, p8 }) : provider.secret;
 </script>
 
-<Modal {error} on:submit={update} size="big" show on:close>
+<Modal {error} onSubmit={update} size="big" show on:close>
     <svelte:fragment slot="header">{provider.name} OAuth2 Settings</svelte:fragment>
     <FormList>
         <p>

src/routes/console/project-[project]/auth/auth0OAuth.svelte

@@ -58,7 +58,7 @@
             : provider.secret;
 </script>
 
-<Modal {error} size="big" show on:submit={update} on:close>
+<Modal {error} size="big" show onSubmit={update} on:close>
     <svelte:fragment slot="header">{provider.name} OAuth2 Settings</svelte:fragment>
     <FormList>
         <p>

src/routes/console/project-[project]/auth/authentikOAuth.svelte

@@ -58,7 +58,7 @@
             : provider.secret;
 </script>
 
-<Modal {error} size="big" show on:submit={update} on:close>
+<Modal {error} size="big" show onSubmit={update} on:close>
     <svelte:fragment slot="header">{provider.name} OAuth2 Settings</svelte:fragment>
     <FormList>
         <p>

src/routes/console/project-[project]/auth/createTeam.svelte

@@ -41,7 +41,7 @@
     }
 </script>
 
-<Modal {error} size="big" bind:show={showCreate} on:submit={create}>
+<Modal {error} size="big" bind:show={showCreate} onSubmit={create}>
     <svelte:fragment slot="header">Create Team</svelte:fragment>
     <FormList>
         <InputText

src/routes/console/project-[project]/auth/createUser.svelte

@@ -58,7 +58,7 @@
     }
 </script>
 
-<Modal {error} size="big" bind:show={showCreate} on:submit={create}>
+<Modal {error} size="big" bind:show={showCreate} onSubmit={create}>
     <svelte:fragment slot="header">Create User</svelte:fragment>
     <FormList>
         <InputText

src/routes/console/project-[project]/auth/gitlabOAuth.svelte

@@ -56,7 +56,7 @@
         clientSecret && endpoint ? JSON.stringify({ clientSecret, endpoint }) : provider.secret;
 </script>
 
-<Modal {error} size="big" show on:submit={update} on:close>
+<Modal {error} size="big" show onSubmit={update} on:close>
     <svelte:fragment slot="header">{provider.name} OAuth2 Settings</svelte:fragment>
     <FormList>
         <p>

src/routes/console/project-[project]/auth/mainOAuth.svelte

@@ -54,7 +54,7 @@
     };
 </script>
 
-<Modal {error} size="big" show on:submit={update} on:close>
+<Modal {error} size="big" show onSubmit={update} on:close>
     <svelte:fragment slot="header">{provider.name} OAuth2 Settings</svelte:fragment>
     <FormList>
         <p>

src/routes/console/project-[project]/auth/microsoftOAuth.svelte

@@ -57,7 +57,7 @@
         clientSecret && tenantID ? JSON.stringify({ clientSecret, tenantID }) : provider.secret;
 </script>
 
-<Modal {error} on:submit={update} size="big" show on:close>
+<Modal {error} onSubmit={update} size="big" show on:close>
     <svelte:fragment slot="header">{provider.name} OAuth2 Settings</svelte:fragment>
     <FormList>
         <p>

src/routes/console/project-[project]/auth/oktaOAuth.svelte

@@ -62,7 +62,7 @@
             : provider.secret;
 </script>
 
-<Modal {error} on:submit={update} size="big" show on:close>
+<Modal {error} onSubmit={update} size="big" show on:close>
     <svelte:fragment slot="header">{provider.name} OAuth2 Settings</svelte:fragment>
     <FormList>
         <p>

src/routes/console/project-[project]/auth/security/updateSessionsLimit.svelte

@@ -29,7 +29,7 @@
     }
 </script>
 
-<Form on:submit={updateSessionsLimit}>
+<Form onSubmit={updateSessionsLimit}>
     <CardGrid>
         <Heading tag="h2" size="6">Sessions Limit</Heading>
         <p>Maximum number of active sessions allowed per user.</p>

src/routes/console/project-[project]/auth/teams/team-[team]/+page.svelte

@@ -55,7 +55,7 @@
         </svelte:fragment>
     </CardGrid>
 
-    <Form on:submit={updateName}>
+    <Form onSubmit={updateName}>
         <CardGrid>
             <Heading tag="h6" size="7">Update Name</Heading>
 

src/routes/console/project-[project]/auth/teams/team-[team]/createMembership.svelte

@@ -42,7 +42,7 @@
     };
 </script>
 
-<Modal {error} on:submit={create} size="big" bind:show={showCreate}>
+<Modal {error} onSubmit={create} size="big" bind:show={showCreate}>
     <svelte:fragment slot="header">Create Membership</svelte:fragment>
     <FormList>
         <InputEmail

src/routes/console/project-[project]/auth/teams/team-[team]/deleteMembership.svelte

@@ -37,7 +37,7 @@
     };
 </script>
 
-<Modal bind:show={showDelete} on:submit={deleteMembership} warning>
+<Modal bind:show={showDelete} onSubmit={deleteMembership} warning>
     <svelte:fragment slot="header">Delete Member</svelte:fragment>
     <p data-private>
         Are you sure you want to delete <b>{selectedMembership.userName}</b> from '{selectedMembership.teamName}'?

src/routes/console/project-[project]/auth/teams/team-[team]/deleteTeam.svelte

@@ -28,7 +28,7 @@
     };
 </script>
 
-<Modal bind:show={showDelete} on:submit={deleteTeam} warning>
+<Modal bind:show={showDelete} onSubmit={deleteTeam} warning>
     <svelte:fragment slot="header">Delete Team</svelte:fragment>
     <p data-private>
         Are you sure you want to delete <b>{team.name}</b>?

src/routes/console/project-[project]/auth/user-[user]/deleteAllSessions.svelte

@@ -31,7 +31,7 @@
     };
 </script>
 
-<Modal bind:show={showDeleteAll} on:submit={deleteAllSessions} warning>
+<Modal bind:show={showDeleteAll} onSubmit={deleteAllSessions} warning>
     <svelte:fragment slot="header">Delete All Sessions</svelte:fragment>
     <p data-private>
         Are you sure you want to delete <b>all of {$user.name}'s sessions?</b>

src/routes/console/project-[project]/auth/user-[user]/deleteMembership.svelte

@@ -40,7 +40,7 @@
     };
 </script>
 
-<Modal bind:show={showDelete} on:submit={deleteMembership} warning>
+<Modal bind:show={showDelete} onSubmit={deleteMembership} warning>
     <svelte:fragment slot="header">Delete Member</svelte:fragment>
     {#if selectedMembership}
         <p data-private>

src/routes/console/project-[project]/auth/user-[user]/deleteSession.svelte

@@ -30,7 +30,7 @@
     };
 </script>
 
-<Modal bind:show={showDelete} on:submit={deleteSession} warning>
+<Modal bind:show={showDelete} onSubmit={deleteSession} warning>
     <svelte:fragment slot="header">Delete Sessions</svelte:fragment>
 
     <p>Are you sure you want to delete this session?</p>

src/routes/console/project-[project]/auth/user-[user]/deleteUser.svelte

@@ -32,7 +32,7 @@
     };
 </script>
 
-<Modal bind:show={showDelete} on:submit={deleteUser} warning>
+<Modal bind:show={showDelete} onSubmit={deleteUser} warning>
     <svelte:fragment slot="header">Delete User</svelte:fragment>
     <p data-private>Are you sure you want to delete <b>{$user.name}</b> from '{$project.name}'?</p>
     <svelte:fragment slot="footer">

src/routes/console/project-[project]/auth/user-[user]/updateEmail.svelte

@@ -33,7 +33,7 @@
     }
 </script>
 
-<Form on:submit={updateEmail}>
+<Form onSubmit={updateEmail}>
     <CardGrid>
         <Heading tag="h6" size="7">Update Email</Heading>
         <svelte:fragment slot="aside">

src/routes/console/project-[project]/auth/user-[user]/updateName.svelte

@@ -33,7 +33,7 @@
     }
 </script>
 
-<Form on:submit={updateName}>
+<Form onSubmit={updateName}>
     <CardGrid>
         <Heading tag="h6" size="7">Update Name</Heading>
 

src/routes/console/project-[project]/auth/user-[user]/updatePassword.svelte

@@ -27,7 +27,7 @@
     }
 </script>
 
-<Form on:submit={updatePassword}>
+<Form onSubmit={updatePassword}>
     <CardGrid>
         <div>
             <Heading tag="h6" size="7">Update Password</Heading>

src/routes/console/project-[project]/auth/user-[user]/updatePhone.svelte

@@ -33,7 +33,7 @@
     }
 </script>
 
-<Form on:submit={updatePhone}>
+<Form onSubmit={updatePhone}>
     <CardGrid>
         <Heading tag="h6" size="7">Update Phone</Heading>
         <svelte:fragment slot="aside">

src/routes/console/project-[project]/auth/user-[user]/updatePrefs.svelte

@@ -54,7 +54,7 @@
     }
 </script>
 
-<Form on:submit={updatePrefs}>
+<Form onSubmit={updatePrefs}>
     <CardGrid>
         <Heading tag="h6" size="7">User Preferences</Heading>
         <p>

src/routes/console/project-[project]/databases/create.svelte

@@ -39,7 +39,7 @@
     };
 </script>
 
-<Modal size="big" on:submit={create} bind:show={showCreate}>
+<Modal size="big" onSubmit={create} bind:show={showCreate}>
     <svelte:fragment slot="header">Create Database</svelte:fragment>
     <FormList>
         <InputText

src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/deleteAttribute.svelte

@@ -42,7 +42,7 @@
     };
 </script>
 
-<Modal warning={true} bind:show={showDelete} on:submit={handleDelete}>
+<Modal warning={true} bind:show={showDelete} onSubmit={handleDelete}>
     <svelte:fragment slot="header">Delete Attribute</svelte:fragment>
     <p data-private>
         Are you sure you want to delete <b>'{selectedAttribute?.key}' from {$collection?.name}</b>?

src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/createAttribute.svelte

@@ -62,7 +62,7 @@
     }
 </script>
 
-<Modal size="big" bind:show={showCreate} on:submit={submit}>
+<Modal size="big" bind:show={showCreate} onSubmit={submit}>
     <svelte:fragment slot="header">Create Attribute</svelte:fragment>
     <FormList>
         <div>

src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/delete.svelte

@@ -39,7 +39,7 @@
     };
 </script>
 
-<Modal warning={true} on:submit={handleDelete} bind:show={showDelete}>
+<Modal warning={true} onSubmit={handleDelete} bind:show={showDelete}>
     <svelte:fragment slot="header">Delete Document</svelte:fragment>
 
     <p data-private>

src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/indexes/createIndex.svelte

@@ -31,8 +31,8 @@
         value: attribute.key,
         label: attribute.key
     }));
+
     let attributeList = [{ value: '', order: '' }];
-    let creating = false;
 
     function initialize() {
         attributeList = externalAttribute
@@ -47,8 +47,7 @@
         initialize();
     }
 
-    $: addAttributeDisabled =
-        !attributeList.at(-1)?.value || !attributeList.at(-1)?.order || creating;
+    $: addAttributeDisabled = !attributeList.at(-1)?.value || !attributeList.at(-1)?.order;
 
     async function create() {
         if (!(key && selectedType && !addAttributeDisabled)) {
@@ -56,8 +55,6 @@
             return;
         }
 
-        creating = true;
-
         try {
             await sdk.forProject.databases.createIndex(
                 databaseId,
@@ -81,15 +78,13 @@
                 type: 'success'
             });
             trackEvent(Submit.IndexCreate);
+            showCreateIndex = false;
         } catch (error) {
             addNotification({
                 message: error.message,
                 type: 'error'
             });
             trackError(error, Submit.IndexCreate);
-        } finally {
-            showCreateIndex = false;
-            creating = false;
         }
     }
 
@@ -101,7 +96,7 @@
     }
 </script>
 
-<Modal bind:error size="big" on:submit={create} bind:show={showCreateIndex}>
+<Modal bind:error size="big" onSubmit={create} bind:show={showCreateIndex}>
     <svelte:fragment slot="header">Create Index</svelte:fragment>
     <FormList>
         <InputText id="key" label="Index Key" placeholder="Enter Key" bind:value={key} autofocus />
@@ -156,6 +151,6 @@
     </FormList>
     <svelte:fragment slot="footer">
         <Button secondary on:click={() => (showCreateIndex = false)}>Cancel</Button>
-        <Button submit disabled={creating}>Create</Button>
+        <Button submit>Create</Button>
     </svelte:fragment>
 </Modal>

src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/indexes/deleteIndex.svelte

@@ -39,7 +39,7 @@
     };
 </script>
 
-<Modal warning={true} on:submit={handleDelete} bind:show={showDelete}>
+<Modal warning={true} onSubmit={handleDelete} bind:show={showDelete}>
     <svelte:fragment slot="header">Delete Index</svelte:fragment>
 
     <p data-private>

src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/settings/deleteCollection.svelte

@@ -35,7 +35,7 @@
     };
 </script>
 
-<Modal warning={true} bind:show={showDelete} on:submit={handleDelete}>
+<Modal warning={true} bind:show={showDelete} onSubmit={handleDelete}>
     <svelte:fragment slot="header">Delete Collection</svelte:fragment>
 
     <p data-private>

src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/settings/updateName.svelte

@@ -44,7 +44,7 @@
     }
 </script>
 
-<Form on:submit={updateName}>
+<Form onSubmit={updateName}>
     <CardGrid>
         <Heading tag="h6" size="7">Update Name</Heading>
 

src/routes/console/project-[project]/databases/database-[database]/create.svelte

@@ -46,7 +46,7 @@
     };
 </script>
 
-<Modal size="big" bind:show={showCreate} on:submit={create}>
+<Modal size="big" bind:show={showCreate} onSubmit={create}>
     <svelte:fragment slot="header">Create Collection</svelte:fragment>
     <FormList>
         <InputText

src/routes/console/project-[project]/databases/database-[database]/delete.svelte

@@ -32,7 +32,7 @@
     };
 </script>
 
-<Modal warning={true} bind:show={showDelete} on:submit={handleDelete}>
+<Modal warning={true} bind:show={showDelete} onSubmit={handleDelete}>
     <svelte:fragment slot="header">Delete Database</svelte:fragment>
     <p class="text" data-private>
         Are you sure you want to delete <b>{$database.name}</b>?

src/routes/console/project-[project]/functions/createVariable.svelte

@@ -31,7 +31,7 @@
     }
 </script>
 
-<Modal bind:show={showCreate} on:submit={handleVariable} size="big">
+<Modal bind:show={showCreate} onSubmit={handleVariable} size="big">
     <svelte:fragment slot="header">
         {selectedVar ? 'Update' : 'Create'} Variable
     </svelte:fragment>

src/routes/console/project-[project]/functions/function-[function]/activate.svelte

@@ -35,7 +35,7 @@
     };
 </script>
 
-<Modal bind:show={showActivate} on:submit={handleSubmit}>
+<Modal bind:show={showActivate} onSubmit={handleSubmit}>
     <svelte:fragment slot="header">Activate Deployment</svelte:fragment>
     <p>Are you sure you want to activate this deployment?</p>
     <svelte:fragment slot="footer">

src/routes/console/project-[project]/functions/function-[function]/create.svelte

@@ -133,7 +133,7 @@
     }
 </script>
 
-<Modal {error} size="big" bind:show={showCreate} on:submit={create}>
+<Modal {error} size="big" bind:show={showCreate} onSubmit={create}>
     <svelte:fragment slot="header">Create Deployment</svelte:fragment>
     <Tabs>
         <Tab on:click={() => (mode = Mode.CLI)} selected={mode === Mode.CLI} event="deploy_cli">

src/routes/console/project-[project]/functions/function-[function]/delete.svelte

@@ -34,7 +34,7 @@
     };
 </script>
 
-<Modal bind:show={showDelete} on:submit={handleSubmit} warning>
+<Modal bind:show={showDelete} onSubmit={handleSubmit} warning>
     <svelte:fragment slot="header">Delete Deployment</svelte:fragment>
     <p data-private>Are you sure you want to delete this deployment?</p>
     <svelte:fragment slot="footer">

src/routes/console/project-[project]/functions/function-[function]/execute.svelte

@@ -63,7 +63,7 @@
     afterNavigate(close);
 </script>
 
-<Modal bind:show size="big" on:submit={handleSubmit} on:close={close}>
+<Modal bind:show size="big" onSubmit={handleSubmit} on:close={close}>
     <svelte:fragment slot="header">Execute Function</svelte:fragment>
     <FormList>
         <InputTextarea bind:value={data} id="data" label="Custom data (optional)" />

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

@@ -282,7 +282,7 @@
         </svelte:fragment>
     </CardGrid>
 
-    <Form on:submit={updateName}>
+    <Form onSubmit={updateName}>
         <CardGrid>
             <Heading tag="h6" size="7">Update Name</Heading>
 
@@ -305,7 +305,7 @@
         </CardGrid>
     </Form>
 
-    <Form on:submit={updatePermissions}>
+    <Form onSubmit={updatePermissions}>
         <CardGrid>
             <Heading tag="h6" size="7">Execute Access</Heading>
             <p>
@@ -330,7 +330,7 @@
 
     <UpdateEvents />
 
-    <Form on:submit={updateSchedule}>
+    <Form onSubmit={updateSchedule}>
         <CardGrid>
             <Heading tag="h6" size="7">Update Schedule</Heading>
             <p>
@@ -452,7 +452,7 @@
         </svelte:fragment>
     </CardGrid>
 
-    <Form on:submit={updateTimeout}>
+    <Form onSubmit={updateTimeout}>
         <CardGrid>
             <Heading tag="h6" size="7">Update Timeout</Heading>
             <p>

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

@@ -31,7 +31,7 @@
     };
 </script>
 
-<Modal bind:show={showDelete} on:submit={handleSubmit} warning>
+<Modal bind:show={showDelete} onSubmit={handleSubmit} warning>
     <svelte:fragment slot="header">Delete Function</svelte:fragment>
     <p data-private>
         Are you sure you want to delete this function and all associated deployments from your

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

@@ -76,7 +76,7 @@
     }
 </script>
 
-<Form on:submit={updateEvents}>
+<Form onSubmit={updateEvents}>
     <CardGrid>
         <Heading tag="h6" size="7">Update Events</Heading>
         <p>Set the events that will trigger your function. Maximum 100 events allowed.</p>

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

@@ -59,7 +59,7 @@
     }
 </script>
 
-<Modal bind:show on:submit={handleSubmit}>
+<Modal bind:show onSubmit={handleSubmit}>
     <svelte:fragment slot="header">Upload Variables</svelte:fragment>
     <p>
         Upload multiple variables via a .env file that will be passed to your function at runtime.

src/routes/console/project-[project]/overview/keys/[key]/+page@project-[project].svelte

@@ -103,7 +103,7 @@
         </svelte:fragment>
     </CardGrid>
 
-    <Form on:submit={updateName}>
+    <Form onSubmit={updateName}>
         <CardGrid>
             <Heading tag="h6" size="7">Update Name</Heading>
             <p class="text">Choose any name that will help you distinguish between API keys.</p>
@@ -123,7 +123,7 @@
             </svelte:fragment>
         </CardGrid>
     </Form>
-    <Form on:submit={updateScopes}>
+    <Form onSubmit={updateScopes}>
         <CardGrid>
             <Heading tag="h6" size="7">Update Scopes</Heading>
             <p class="text">

src/routes/console/project-[project]/overview/keys/[key]/delete.svelte

@@ -33,7 +33,7 @@
     }
 </script>
 
-<Modal bind:show={showDelete} on:submit={handleDelete} warning>
+<Modal bind:show={showDelete} onSubmit={handleDelete} warning>
     <svelte:fragment slot="header">Delete API Key</svelte:fragment>
     <p>The API Key will be permanently deleted. This action is irreversible.</p>
 

src/routes/console/project-[project]/overview/keys/[key]/updateExpirationDate.svelte

@@ -43,7 +43,7 @@
     $: isExpired = !alertsDismissed && $key.expire !== null && new Date($key.expire) < new Date();
 </script>
 
-<Form on:submit={updateExpire}>
+<Form onSubmit={updateExpire}>
     <CardGrid>
         <Heading tag="h6" size="7">Update Expiration Date</Heading>
         <p class="text">Set a date after which your API Key will expire.</p>

src/routes/console/project-[project]/overview/platforms/[platform]/+page@project-[project].svelte

@@ -76,7 +76,7 @@
 </script>
 
 <Container>
-    <Form on:submit={updateName}>
+    <Form onSubmit={updateName}>
         <CardGrid>
             <Heading tag="h6" size="7">Update Name</Heading>
             <p class="text">Choose any name that will help you distinguish between platforms.</p>

src/routes/console/project-[project]/overview/platforms/[platform]/android.svelte

@@ -44,7 +44,7 @@
     };
 </script>
 
-<Form on:submit={updateHostname}>
+<Form onSubmit={updateHostname}>
     <CardGrid>
         <Heading tag="h6" size="7">Update Package Name</Heading>
         <p class="text">

src/routes/console/project-[project]/overview/platforms/[platform]/appleIOS.svelte

@@ -44,7 +44,7 @@
     };
 </script>
 
-<Form on:submit={updateHostname}>
+<Form onSubmit={updateHostname}>
     <CardGrid>
         <Heading tag="h6" size="7">Update Bundle ID</Heading>
         <p class="text">

src/routes/console/project-[project]/overview/platforms/[platform]/appleMacOS.svelte

@@ -44,7 +44,7 @@
     };
 </script>
 
-<Form on:submit={updateHostname}>
+<Form onSubmit={updateHostname}>
     <CardGrid>
         <Heading tag="h6" size="7">Update Bundle ID</Heading>
         <p class="text">

src/routes/console/project-[project]/overview/platforms/[platform]/appleTvOS.svelte

@@ -44,7 +44,7 @@
     };
 </script>
 
-<Form on:submit={updateHostname}>
+<Form onSubmit={updateHostname}>
     <CardGrid>
         <Heading tag="h6" size="7">Update Bundle ID</Heading>
         <p class="text">

src/routes/console/project-[project]/overview/platforms/[platform]/appleWatchOS.svelte

@@ -44,7 +44,7 @@
     };
 </script>
 
-<Form on:submit={updateHostname}>
+<Form onSubmit={updateHostname}>
     <CardGrid>
         <Heading tag="h6" size="7">Update Bundle ID</Heading>
         <p class="text">

src/routes/console/project-[project]/overview/platforms/[platform]/delete.svelte

@@ -33,7 +33,7 @@
     };
 </script>
 
-<Modal bind:show={showDelete} on:submit={handleDelete} warning>
+<Modal bind:show={showDelete} onSubmit={handleDelete} warning>
     <svelte:fragment slot="header">Delete Platform</svelte:fragment>
     <p>The Platform will be permanently deleted. This action is irreversible.</p>
 

src/routes/console/project-[project]/overview/platforms/[platform]/flutterAndroid.svelte

@@ -44,7 +44,7 @@
     };
 </script>
 
-<Form on:submit={updateHostname}>
+<Form onSubmit={updateHostname}>
     <CardGrid>
         <Heading tag="h6" size="7">Update Package Name</Heading>
         <p class="text">

src/routes/console/project-[project]/overview/platforms/[platform]/flutterIOS.svelte

@@ -44,7 +44,7 @@
     };
 </script>
 
-<Form on:submit={updateHostname}>
+<Form onSubmit={updateHostname}>
     <CardGrid>
         <Heading tag="h6" size="7">Update Bundle ID</Heading>
         <p class="text">

src/routes/console/project-[project]/overview/platforms/[platform]/flutterLinux.svelte

@@ -44,7 +44,7 @@
     };
 </script>
 
-<Form on:submit={updateHostname}>
+<Form onSubmit={updateHostname}>
     <CardGrid>
         <Heading tag="h6" size="7">Update Package Name</Heading>
         <p class="text">Your application name.</p>

src/routes/console/project-[project]/overview/platforms/[platform]/flutterMacOS.svelte

@@ -44,7 +44,7 @@
     };
 </script>
 
-<Form on:submit={updateHostname}>
+<Form onSubmit={updateHostname}>
     <CardGrid>
         <Heading tag="h6" size="7">Update Bundle ID</Heading>
         <p class="text">

src/routes/console/project-[project]/overview/platforms/[platform]/flutterWindows.svelte

@@ -44,7 +44,7 @@
     };
 </script>
 
-<Form on:submit={updateHostname}>
+<Form onSubmit={updateHostname}>
     <CardGrid>
         <Heading tag="h6" size="7">Update Package Name</Heading>
         <p class="text">Your application name.</p>

src/routes/console/project-[project]/overview/platforms/[platform]/web.svelte

@@ -39,7 +39,7 @@
     };
 </script>
 
-<Form on:submit={updateHostname}>
+<Form onSubmit={updateHostname}>
     <CardGrid>
         <Heading tag="h6" size="7">Update Hostname</Heading>
         <p class="text">You can use * to allow wildcard hostnames or subdomains.</p>

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

@@ -82,7 +82,7 @@
 
 <Container>
     {#if $project}
-        <Form on:submit={updateName}>
+        <Form onSubmit={updateName}>
             <CardGrid>
                 <Heading tag="h6" size="7">API Credentials</Heading>
                 <p class="text">Access Appwrite services using your API Endpoint and Project ID.</p>

src/routes/console/project-[project]/settings/deleteProject.svelte

@@ -33,7 +33,7 @@
     };
 </script>
 
-<Modal bind:show={showDelete} on:submit={handleDelete} warning>
+<Modal bind:show={showDelete} onSubmit={handleDelete} warning>
     <svelte:fragment slot="header">Delete Project</svelte:fragment>
     <p>
         <b>This project will be deleted</b>, along with all of its metadata, stats, and other

src/routes/console/project-[project]/settings/domains/delete.svelte

@@ -32,7 +32,7 @@
     };
 </script>
 
-<Modal bind:show={showDelete} on:submit={deleteDomain} warning>
+<Modal bind:show={showDelete} onSubmit={deleteDomain} warning>
     <svelte:fragment slot="header">Delete Domain</svelte:fragment>
     {#if selectedDomain}
         <p data-private>

src/routes/console/project-[project]/settings/webhooks/[webhook]/delete.svelte

@@ -33,7 +33,7 @@
     }
 </script>
 
-<Modal bind:show={showDelete} on:submit={handleDelete} warning>
+<Modal bind:show={showDelete} onSubmit={handleDelete} warning>
     <svelte:fragment slot="header">Delete Webhook</svelte:fragment>
     <p data-private>
         Are you sure you want to delete <b>{$webhook.name}</b> from '{$project.name}'?

src/routes/console/project-[project]/settings/webhooks/[webhook]/regenerate.svelte

@@ -32,7 +32,7 @@
     }
 </script>
 
-<Modal bind:show on:submit={regenerate}>
+<Modal bind:show onSubmit={regenerate}>
     <svelte:fragment slot="header">Regenerate Key</svelte:fragment>
     <p class="u-text">
         Are you sure you want to generate a new Signature Key?

src/routes/console/project-[project]/settings/webhooks/[webhook]/updateEvents.svelte

@@ -64,7 +64,7 @@
     }
 </script>
 
-<Form on:submit={updateEvents}>
+<Form onSubmit={updateEvents}>
     <CardGrid>
         <Heading tag="h6" size="7">Update Events</Heading>
         <p class="text">

src/routes/console/project-[project]/settings/webhooks/[webhook]/updateName.svelte

@@ -45,7 +45,7 @@
     }
 </script>
 
-<Form on:submit={updateName}>
+<Form onSubmit={updateName}>
     <CardGrid>
         <Heading tag="h2" size="7">Update Name</Heading>
         <p>Choose any name that will help you distinguish between Webhooks.</p>

src/routes/console/project-[project]/settings/webhooks/[webhook]/updateSecurity.svelte

@@ -56,7 +56,7 @@
     }
 </script>
 
-<Form on:submit={updateSecurity}>
+<Form onSubmit={updateSecurity}>
     <CardGrid>
         <Heading tag="h2" size="7">Security</Heading>
         <p class="text">

src/routes/console/project-[project]/settings/webhooks/[webhook]/updateURL.svelte

@@ -45,7 +45,7 @@
     }
 </script>
 
-<Form on:submit={updateUrl}>
+<Form onSubmit={updateUrl}>
     <CardGrid>
         <Heading tag="h2" size="7">Update Url</Heading>
 

src/routes/console/project-[project]/storage/bucket-[bucket]/create.svelte

@@ -48,7 +48,7 @@
     }
 </script>
 
-<Modal size="big" {error} bind:show={showCreate} on:submit={create}>
+<Modal size="big" {error} bind:show={showCreate} onSubmit={create}>
     <svelte:fragment slot="header">Create File</svelte:fragment>
     <FormList>
         <div>

src/routes/console/project-[project]/storage/bucket-[bucket]/deleteBucket.svelte

@@ -31,7 +31,7 @@
     };
 </script>
 
-<Modal bind:show={showDelete} on:submit={deleteUser} warning>
+<Modal bind:show={showDelete} onSubmit={deleteUser} warning>
     <svelte:fragment slot="header">Delete Bucket</svelte:fragment>
     <p data-private>Are you sure you want to delete <b>{$bucket.name}</b>?</p>
     <svelte:fragment slot="footer">

src/routes/console/project-[project]/storage/bucket-[bucket]/deleteFile.svelte

@@ -32,7 +32,7 @@
     };
 </script>
 
-<Modal bind:show={showDelete} on:submit={deleteFile} warning>
+<Modal bind:show={showDelete} onSubmit={deleteFile} warning>
     <svelte:fragment slot="header">Delete File</svelte:fragment>
     <p data-private>Are you sure you want to delete <b>{file.name}</b>?</p>
     <svelte:fragment slot="footer">

src/routes/console/project-[project]/storage/bucket-[bucket]/file-[file]/deleteFile.svelte

@@ -33,7 +33,7 @@
     };
 </script>
 
-<Modal bind:show={showDelete} on:submit={deleteFile} warning>
+<Modal bind:show={showDelete} onSubmit={deleteFile} warning>
     <svelte:fragment slot="header">Delete File</svelte:fragment>
     <p data-private>Are you sure you want to delete <b>{$file.name}</b>?</p>
     <svelte:fragment slot="footer">

src/routes/console/project-[project]/storage/bucket-[bucket]/settings/+page.svelte

@@ -211,7 +211,7 @@
 
 <Container>
     {#if $bucket}
-        <Form on:submit={toggleBucket}>
+        <Form onSubmit={toggleBucket}>
             <CardGrid>
                 <Heading tag="h2" size="7">{$bucket.name}</Heading>
 
@@ -234,7 +234,7 @@
             </CardGrid>
         </Form>
 
-        <Form on:submit={updateName}>
+        <Form onSubmit={updateName}>
             <CardGrid>
                 <Heading tag="h6" size="7">Update Name</Heading>
                 <svelte:fragment slot="aside">
@@ -256,7 +256,7 @@
             </CardGrid>
         </Form>
 
-        <Form on:submit={updatePermissions}>
+        <Form onSubmit={updatePermissions}>
             <CardGrid>
                 <Heading tag="h6" size="7">Update Permissions</Heading>
                 <p class="text">
@@ -280,7 +280,7 @@
             </CardGrid>
         </Form>
 
-        <Form on:submit={updateFileSecurity}>
+        <Form onSubmit={updateFileSecurity}>
             <CardGrid>
                 <Heading tag="h6" size="7">Update File Security</Heading>
                 <svelte:fragment slot="aside">
@@ -308,7 +308,7 @@
             </CardGrid>
         </Form>
 
-        <Form on:submit={updateSecurity}>
+        <Form onSubmit={updateSecurity}>
             <CardGrid>
                 <Heading tag="h2" size="7">Update Security Settings</Heading>
                 <p class="text">
@@ -379,7 +379,7 @@
             </CardGrid>
         </Form>
 
-        <Form on:submit={updateCompression}>
+        <Form onSubmit={updateCompression}>
             <CardGrid>
                 <Heading tag="h2" size="6">Update Compression Algorithm</Heading>
                 <p class="text">
@@ -404,7 +404,7 @@
 
         <UpdateMaxFileSize />
 
-        <Form on:submit={updateAllowedExtensions}>
+        <Form onSubmit={updateAllowedExtensions}>
             <CardGrid>
                 <Heading tag="h6" size="7">Update Allowed File Extensions</Heading>
                 <p class="text">

src/routes/console/project-[project]/storage/bucket-[bucket]/settings/updateMaxFileSize.svelte

@@ -22,7 +22,7 @@
     }
 </script>
 
-<Form on:submit={updateMaxSize}>
+<Form onSubmit={updateMaxSize}>
     <CardGrid>
         <Heading tag="h2" size="7">Update Maximum File Size</Heading>
         <p class="text">Set the maximum file size allowed in the bucket.</p>

src/routes/console/project-[project]/storage/create.svelte

@@ -45,7 +45,7 @@
     }
 </script>
 
-<Modal {error} on:submit={create} size="big" bind:show={showCreate}>
+<Modal {error} onSubmit={create} size="big" bind:show={showCreate}>
     <svelte:fragment slot="header">Create Bucket</svelte:fragment>
     <FormList>
         <InputText

src/routes/invite/+page.svelte

@@ -62,7 +62,7 @@
             </div>
         {:else}
             <p class="text">You have been invited to join a team project on Appwrite</p>
-            <Form on:submit={acceptInvite}>
+            <Form onSubmit={acceptInvite}>
                 <FormList>
                     <InputChoice
                         required

src/routes/login/+page.svelte

@@ -46,7 +46,7 @@
 <Unauthenticated>
     <svelte:fragment slot="title">Sign in</svelte:fragment>
     <svelte:fragment>
-        <Form on:submit={login}>
+        <Form onSubmit={login}>
             <FormList>
                 <InputEmail
                     id="email"