Merge pull request #498 from appwrite/refactor/modal-header

add title and description props and slots for Modal

src/lib/components/eventModal.svelte

@@ -245,8 +245,7 @@
     }
 </script>
 
-<Modal bind:show onSubmit={create} size="big">
-    <svelte:fragment slot="header">Create event</svelte:fragment>
+<Modal title="Create event" bind:show onSubmit={create} size="big">
     <slot />
     <div>
         <p class="u-text">Choose a service</p>

src/lib/components/modal.svelte

@@ -15,6 +15,8 @@
     export let onSubmit: (e: SubmitEvent) => Promise<void> | void = function () {
         return;
     };
+    export let title = '';
+    export let description = '';
 
     let dialog: HTMLDialogElement;
     let alert: HTMLElement;
@@ -102,8 +104,11 @@
                                 <span class={`icon-${icon}`} aria-hidden="true" />
                             </div>
                         {/if}
+
                         <h4 class="modal-title heading-level-5">
-                            <slot name="header" />
+                            <slot name="title">
+                                {title}
+                            </slot>
                         </h4>
                     </div>
                     {#if closable}
@@ -122,6 +127,11 @@
                         </button>
                     {/if}
                 </div>
+                <p>
+                    <slot name="description">
+                        {description}
+                    </slot>
+                </p>
             </header>
             <div class="modal-content">
                 {#if error}

src/lib/components/permissions/custom.svelte

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

src/lib/components/permissions/team.svelte

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

src/lib/components/permissions/user.svelte

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

src/lib/layout/wizardExitModal.svelte

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

src/lib/pages/domains/delete.svelte

@@ -33,12 +33,12 @@
 </script>
 
 <Modal
+    title="Delete domain"
     bind:show={showDelete}
     onSubmit={deleteDomain}
     icon="exclamation"
     state="warning"
     headerDivider={false}>
-    <svelte:fragment slot="header">Delete domain</svelte:fragment>
     {#if selectedDomain}
         <p data-private>
             Are you sure you want to delete <b>{selectedDomain.domain}</b>? You will no longer be

src/lib/pages/domains/index.svelte

@@ -187,7 +187,7 @@
 
 <Delete bind:showDelete bind:selectedDomain {dependency} />
 <Modal bind:show={showRetry} headerDivider={false} bind:error={retryError} size="big">
-    <svelte:fragment slot="header">
+    <svelte:fragment slot="title">
         Retry {$domain.status === 'unverfied' ? 'certificate generation' : 'verification'}
     </svelte:fragment>
     <Retry on:error={(e) => (retryError = e.detail)} />

src/routes/card/[uid]/+page.svelte

@@ -199,8 +199,7 @@
     </div>
 </div>
 
-<Modal bind:show={showEmbedCode}>
-    <svelte:fragment slot="header">Get Embed Code</svelte:fragment>
+<Modal title="Get Embed Code" bind:show={showEmbedCode}>
     <div class="u-overflow-hidden">
         <Code language="html" code={embedCode} noMargin />
     </div>

src/routes/console/account/delete.svelte

@@ -30,12 +30,12 @@
 </script>
 
 <Modal
+    title="Delete account"
     bind:show={showDelete}
     onSubmit={deleteAccount}
     icon="exclamation"
     state="warning"
     headerDivider={false}>
-    <svelte:fragment slot="header">Delete account</svelte:fragment>
     <p>Are you sure you want to delete your account?</p>
     <svelte:fragment slot="footer">
         <Button text on:click={() => (showDelete = false)}>Cancel</Button>

src/routes/console/createOrganization.svelte

@@ -42,8 +42,7 @@
     }
 </script>
 
-<Modal {error} onSubmit={create} size="big" bind:show>
-    <svelte:fragment slot="header">Create new organization</svelte:fragment>
+<Modal title="Create new organization" {error} onSubmit={create} size="big" bind:show>
     <FormList>
         <InputText
             id="organization-name"

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

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

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

@@ -44,8 +44,7 @@
     }
 </script>
 
-<Modal {error} onSubmit={create} size="big" bind:show>
-    <svelte:fragment slot="header">Create project</svelte:fragment>
+<Modal title="Create project" {error} onSubmit={create} size="big" bind:show>
     <FormList>
         <InputText id="name" label="Name" bind:value={name} required autofocus={true} />
         {#if !showCustomId}

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

@@ -49,7 +49,7 @@
     icon="exclamation"
     state="warning"
     headerDivider={false}>
-    <svelte:fragment slot="header">
+    <svelte:fragment slot="title">
         {isUser ? 'Leave organization' : 'Delete member'}
     </svelte:fragment>
     <p data-private>

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

@@ -37,12 +37,12 @@
 </script>
 
 <Modal
+    title="Delete organization"
     onSubmit={deleteOrg}
     bind:show={showDelete}
     icon="exclamation"
     state="warning"
     headerDivider={false}>
-    <svelte:fragment slot="header">Delete organization</svelte:fragment>
     <p>
         Are you sure you want to delete <b>{$organization.name}</b>? All projects ({$organization.total})
         and data associated with this organization will be deleted. This action is irreversible.

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

@@ -38,7 +38,7 @@
 </script>
 
 <Modal {error} onSubmit={update} size="big" show on:close>
-    <svelte:fragment slot="header">{provider.name} OAuth2 Settings</svelte:fragment>
+    <svelte:fragment slot="title">{provider.name} OAuth2 Settings</svelte:fragment>
     <FormList>
         <p>
             To use {provider.name} authentication in your application, first fill in this form. For more

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

@@ -39,7 +39,7 @@
 </script>
 
 <Modal {error} size="big" show onSubmit={update} on:close>
-    <svelte:fragment slot="header">{provider.name} OAuth2 Settings</svelte:fragment>
+    <svelte:fragment slot="title">{provider.name} OAuth2 Settings</svelte:fragment>
     <FormList>
         <p>
             To use {provider.name} authentication in your application, first fill in this form. For more

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

@@ -39,7 +39,7 @@
 </script>
 
 <Modal {error} size="big" show onSubmit={update} on:close>
-    <svelte:fragment slot="header">{provider.name} OAuth2 Settings</svelte:fragment>
+    <svelte:fragment slot="title">{provider.name} OAuth2 Settings</svelte:fragment>
     <FormList>
         <p>
             To use {provider.name} authentication in your application, first fill in this form. For more

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

@@ -41,8 +41,7 @@
     }
 </script>
 
-<Modal {error} size="big" bind:show={showCreate} onSubmit={create}>
-    <svelte:fragment slot="header">Create team</svelte:fragment>
+<Modal title="Create team" {error} size="big" bind:show={showCreate} onSubmit={create}>
     <FormList>
         <InputText
             id="name"

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

@@ -58,8 +58,7 @@
     }
 </script>
 
-<Modal {error} size="big" bind:show={showCreate} onSubmit={create}>
-    <svelte:fragment slot="header">Create user</svelte:fragment>
+<Modal title="Create user" {error} size="big" bind:show={showCreate} onSubmit={create}>
     <FormList>
         <InputText
             id="name"

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

@@ -37,7 +37,7 @@
 </script>
 
 <Modal {error} size="big" show onSubmit={update} on:close>
-    <svelte:fragment slot="header">{provider.name} OAuth2 Settings</svelte:fragment>
+    <svelte:fragment slot="title">{provider.name} OAuth2 Settings</svelte:fragment>
     <FormList>
         <p>
             To use {provider.name} authentication in your application, first fill in this form. For more

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

@@ -35,7 +35,7 @@
 </script>
 
 <Modal {error} size="big" show onSubmit={update} on:close>
-    <svelte:fragment slot="header">{provider.name} OAuth2 Settings</svelte:fragment>
+    <svelte:fragment slot="title">{provider.name} OAuth2 Settings</svelte:fragment>
     <FormList>
         <p>
             To use {provider.name} authentication in your application, first fill in this form. For more

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

@@ -35,7 +35,7 @@
 </script>
 
 <Modal {error} size="big" show onSubmit={update} on:close>
-    <svelte:fragment slot="header">{provider.name} OAuth2 Settings</svelte:fragment>
+    <svelte:fragment slot="title">{provider.name} OAuth2 Settings</svelte:fragment>
     <FormList>
         <p>
             To use {provider.name} authentication in your application, first fill in this form. For more

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

@@ -38,7 +38,7 @@
 </script>
 
 <Modal {error} onSubmit={update} size="big" show on:close>
-    <svelte:fragment slot="header">{provider.name} OAuth2 Settings</svelte:fragment>
+    <svelte:fragment slot="title">{provider.name} OAuth2 Settings</svelte:fragment>
     <FormList>
         <p>
             To use {provider.name} authentication in your application, first fill in this form. For more

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

@@ -61,7 +61,7 @@
 </script>
 
 <Modal {error} onSubmit={update} size="big" show on:close>
-    <svelte:fragment slot="header">{provider.name} OAuth2 Settings</svelte:fragment>
+    <svelte:fragment slot="title">{provider.name} OAuth2 Settings</svelte:fragment>
     <FormList>
         <p>
             To use {provider.name} authentication in your application, first fill in this form. For more

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

@@ -43,7 +43,7 @@
 </script>
 
 <Modal {error} onSubmit={update} size="big" show on:close>
-    <svelte:fragment slot="header">{provider.name} OAuth2 Settings</svelte:fragment>
+    <svelte:fragment slot="title">{provider.name} OAuth2 Settings</svelte:fragment>
     <FormList>
         <p>
             To use {provider.name} authentication in your application, first fill in this form. For more

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

@@ -44,8 +44,7 @@
     }
 </script>
 
-<Modal {error} onSubmit={create} size="big" bind:show={showCreate}>
-    <svelte:fragment slot="header">Create membership</svelte:fragment>
+<Modal title="Create membership" {error} onSubmit={create} size="big" bind:show={showCreate}>
     <FormList>
         <InputEmail
             id="email"

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

@@ -38,12 +38,12 @@
 </script>
 
 <Modal
+    title="Delete Member"
     bind:show={showDelete}
     onSubmit={deleteMembership}
     icon="exclamation"
     state="warning"
     headerDivider={false}>
-    <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}'?
     </p>

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

@@ -29,12 +29,12 @@
 </script>
 
 <Modal
+    title="Delete team"
     bind:show={showDelete}
     onSubmit={deleteTeam}
     icon="exclamation"
     state="warning"
     headerDivider={false}>
-    <svelte:fragment slot="header">Delete team</svelte:fragment>
     <p data-private>
         Are you sure you want to delete <b>{team.name}</b>?
     </p>

src/routes/console/project-[project]/auth/templates/resetEmail.svelte

@@ -45,7 +45,7 @@
     {error}
     bind:show
     headerDivider={false}>
-    <svelte:fragment slot="header">Reset Email Template?</svelte:fragment>
+    <svelte:fragment slot="title">Reset Email Template?</svelte:fragment>
     <p class="text">
         Are you sure you want to reset the email template?
         <b>Default values will be set in all inputs.</b>

src/routes/console/project-[project]/auth/templates/resetSms.svelte

@@ -45,7 +45,7 @@
     {error}
     bind:show
     headerDivider={false}>
-    <svelte:fragment slot="header">Reset SMS Template?</svelte:fragment>
+    <svelte:fragment slot="title">Reset SMS Template?</svelte:fragment>
     <p class="text">
         Are you sure you want to reset the SMS template?
         <b>Default values will be set in all inputs.</b>

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

@@ -32,12 +32,12 @@
 </script>
 
 <Modal
+    title="Delete all sessions"
     bind:show={showDeleteAll}
     onSubmit={deleteAllSessions}
     icon="exclamation"
     state="warning"
     headerDivider={false}>
-    <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>
     </p>

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

@@ -40,12 +40,12 @@
 </script>
 
 <Modal
+    title="Delete member"
     bind:show={showDelete}
     onSubmit={deleteMembership}
     icon="exclamation"
     state="warning"
     headerDivider={false}>
-    <svelte:fragment slot="header">Delete member</svelte:fragment>
     {#if selectedMembership}
         <p data-private>
             Are you sure you want to delete <b>{selectedMembership.userName}</b> from '{selectedMembership.teamName}'?

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

@@ -32,13 +32,12 @@
 </script>
 
 <Modal
+    title="Delete sessions"
     bind:show={showDelete}
     onSubmit={deleteSession}
     icon="exclamation"
     state="warning"
     headerDivider={false}>
-    <svelte:fragment slot="header">Delete sessions</svelte:fragment>
-
     <p>Are you sure you want to delete this session?</p>
     <svelte:fragment slot="footer">
         <Button text on:click={() => (showDelete = false)}>Cancel</Button>

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

@@ -33,12 +33,12 @@
 </script>
 
 <Modal
+    title="Delete user"
     bind:show={showDelete}
     onSubmit={deleteUser}
     icon="exclamation"
     state="warning"
     headerDivider={false}>
-    <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">
         <Button text on:click={() => (showDelete = false)}>Cancel</Button>