feat: reset modal, fix loading, design fixes, update sdk

CONTRIBUTING.md

@@ -40,12 +40,15 @@ git clone https://github.com/appwrite/console.git appwrite-console
 ```
 
 ### 2. Install dependencies with npm
+
 Navigate to the Appwrite Console repository and install dependencies.
+
 ```bash
 cd appwrite-console && npm install
 ```
 
 ### 3. Install and run Appwrite locally
+
 When you run the Appwrite Console locally, it needs to point to a backend as well. The easiest way to do this is to run an Appwrite instance locally.
 
 Follow the [install instructions](https://appwrite.io/docs/installation) in the Appwrite docs.

package-lock.json

@@ -7,7 +7,7 @@
             "name": "@appwrite/console",
             "dependencies": {
                 "@analytics/google-analytics": "^1.0.5",
-                "@appwrite.io/console": "npm:@aw-labs/sdk-console-smtp@^0.1.0",
+                "@appwrite.io/console": "npm:@aw-labs/sdk-console-smtp@^0.1.1",
                 "@appwrite.io/pink": "0.0.6-rc.12",
                 "@popperjs/core": "^2.11.6",
                 "@sentry/svelte": "^7.44.2",
@@ -138,9 +138,9 @@
         },
         "node_modules/@appwrite.io/console": {
             "name": "@aw-labs/sdk-console-smtp",
-            "version": "0.1.0",
-            "resolved": "https://registry.npmjs.org/@aw-labs/sdk-console-smtp/-/sdk-console-smtp-0.1.0.tgz",
-            "integrity": "sha512-Nu59EdPqPDp9uImWFFwam3+sFgK3yunQfo/g1ORwHTGq23brxwSsa815O7TRZL8YUBvSA3sjjn55G2Ev1X5gTg==",
+            "version": "0.1.1",
+            "resolved": "https://registry.npmjs.org/@aw-labs/sdk-console-smtp/-/sdk-console-smtp-0.1.1.tgz",
+            "integrity": "sha512-Sf6PQTDQwD3iJN6dE85DvgLNdvl+3Iqdz6d2gLCPsWsGwJR+mM/betgYvfQcDwVfy7vI+VspnhTPXleQCsgbOQ==",
             "dependencies": {
                 "cross-fetch": "3.1.5",
                 "isomorphic-form-data": "2.0.0"

package.json

@@ -19,7 +19,7 @@
     },
     "dependencies": {
         "@analytics/google-analytics": "^1.0.5",
-        "@appwrite.io/console": "npm:@aw-labs/sdk-console-smtp@^0.1.0",
+        "@appwrite.io/console": "npm:@aw-labs/sdk-console-smtp@^0.1.1",
         "@appwrite.io/pink": "0.0.6-rc.12",
         "@popperjs/core": "^2.11.6",
         "@sentry/svelte": "^7.44.2",

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

@@ -62,13 +62,13 @@
 
     async function openEmail(type: string) {
         type === emailOpen ? (emailOpen = null) : (emailOpen = type);
-        $emailTemplate = await loadEmailTemplate(projectId, type, 'en-us');
+        $emailTemplate = await loadEmailTemplate(projectId, type, 'en');
         $baseEmailTemplate = { ...$emailTemplate };
     }
 
     async function openSms(type: string) {
         type === smsOpen ? (smsOpen = null) : (smsOpen = type);
-        $smsTemplate = await loadSmsTemplate(projectId, type, 'en-us');
+        $smsTemplate = await loadSmsTemplate(projectId, type, 'en');
         $baseSmsTemplate = { ...$smsTemplate };
     }
 </script>
@@ -82,24 +82,26 @@
     </div>
 
     {#if !$project.smtpEnabled}
-        <Alert
-            isStandalone
-            dismissible
-            type="info"
-            buttons={[
-                {
-                    name: 'Add SMTP server',
-                    method: () => {
-                        goto(base + '/console/project-' + $project.$id + '/settings/smtp');
+        <div class="u-margin-block-start-24">
+            <Alert
+                isStandalone
+                dismissible
+                type="info"
+                buttons={[
+                    {
+                        name: 'Add SMTP server',
+                        method: () => {
+                            goto(base + '/console/project-' + $project.$id + '/settings/smtp');
+                        }
                     }
-                }
-            ]}>
-            <svelte:fragment slot="title">
-                Custom SMTP server is required for customizing emails
-            </svelte:fragment>
-            Configure a custom SMTP server to enable custom email templates and prevent emails from being
-            labeled as spam.
-        </Alert>
+                ]}>
+                <svelte:fragment slot="title">
+                    Custom SMTP server is required for customizing emails
+                </svelte:fragment>
+                Configure a custom SMTP server to enable custom email templates and prevent emails from
+                being labeled as spam.
+            </Alert>
+        </div>
     {/if}
 
     <CardGrid>

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

@@ -1,22 +1,19 @@
-<script context="module" lang="ts">
-    // your script goes here
-</script>
-
 <script lang="ts">
     import EmailTemplate from './emailTemplate.svelte';
     import LocaleOptions from './localeOptions.svelte';
     import type { Models } from '@appwrite.io/console';
     import { loadEmailTemplate } from './+page.svelte';
     import { page } from '$app/stores';
-    import { emailTemplate } from './strote';
+    import { baseEmailTemplate, emailTemplate } from './strote';
     import { addNotification } from '$lib/stores/notifications';
+    import { Id } from '$lib/components';
 
     export let localeCodes: Models.LocaleCode[];
 
     const projectId = $page.params.project;
-    let locale = 'en-us';
+    let locale = 'en';
     let loading = false;
-    let timeout: NodeJS.Timeout;
+    let timeout: ReturnType<typeof setTimeout>;
 
     async function onLocaleChange() {
         timeout = setTimeout(() => {
@@ -26,6 +23,7 @@
             const template = await loadEmailTemplate(projectId, 'invitation', locale);
             clearTimeout(timeout);
             emailTemplate.set(template);
+            $baseEmailTemplate = { ...$emailTemplate };
         } catch (error) {
             clearTimeout(timeout);
             addNotification({
@@ -40,5 +38,10 @@
 
 <div class="boxes-wrapper u-margin-block-start-16">
     <LocaleOptions {localeCodes} on:select={onLocaleChange} bind:value={locale} />
-    <EmailTemplate />
+    <EmailTemplate bind:loading>
+        <Id value={'{{team}}'}>{'{{team}}'}</Id>
+        <Id value={'{{user}}'}>{'{{user}}'}</Id>
+        <Id value={'{{project}}'}>{'{{project}}'}</Id>
+        <Id value={'{{redirect}}'}>{'{{redirect}}'}</Id>
+    </EmailTemplate>
 </div>

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

@@ -3,16 +3,17 @@
     import EmailTemplate from './emailTemplate.svelte';
     import LocaleOptions from './localeOptions.svelte';
     import type { Models } from '@appwrite.io/console';
-    import { emailTemplate } from './strote';
+    import { baseEmailTemplate, emailTemplate } from './strote';
     import { page } from '$app/stores';
     import { addNotification } from '$lib/stores/notifications';
+    import { Id } from '$lib/components';
 
     export let localeCodes: Models.LocaleCode[];
     const projectId = $page.params.project;
 
-    let locale = 'en-us';
+    let locale = 'en';
     let loading = false;
-    let timeout: NodeJS.Timeout;
+    let timeout: ReturnType<typeof setTimeout>;
 
     async function onLocaleChange() {
         timeout = setTimeout(() => {
@@ -22,6 +23,7 @@
             const template = await loadEmailTemplate(projectId, 'magicSession', locale);
             clearTimeout(timeout);
             emailTemplate.set(template);
+            $baseEmailTemplate = { ...$emailTemplate };
         } catch (error) {
             clearTimeout(timeout);
             addNotification({
@@ -36,5 +38,10 @@
 
 <div class="boxes-wrapper u-margin-block-start-16">
     <LocaleOptions {localeCodes} on:select={onLocaleChange} bind:value={locale} />
-    <EmailTemplate />
+    <EmailTemplate bind:loading>
+        <Id value={'{{team}}'}>{'{{team}}'}</Id>
+        <Id value={'{{user}}'}>{'{{user}}'}</Id>
+        <Id value={'{{project}}'}>{'{{project}}'}</Id>
+        <Id value={'{{redirect}}'}>{'{{redirect}}'}</Id>
+    </EmailTemplate>
 </div>

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

@@ -2,17 +2,18 @@
     import EmailTemplate from './emailTemplate.svelte';
     import LocaleOptions from './localeOptions.svelte';
     import type { Models } from '@appwrite.io/console';
-    import { emailTemplate } from './strote';
+    import { baseEmailTemplate, emailTemplate } from './strote';
     import { loadEmailTemplate } from './+page.svelte';
     import { page } from '$app/stores';
     import { addNotification } from '$lib/stores/notifications';
+    import { Id } from '$lib/components';
 
     export let localeCodes: Models.LocaleCode[];
     const projectId = $page.params.project;
 
-    let locale = 'en-us';
+    let locale = 'en';
     let loading = false;
-    let timeout: NodeJS.Timeout;
+    let timeout: ReturnType<typeof setTimeout>;
 
     async function onLocaleChange() {
         timeout = setTimeout(() => {
@@ -22,6 +23,7 @@
             const template = await loadEmailTemplate(projectId, 'recovery', locale);
             clearTimeout(timeout);
             emailTemplate.set(template);
+            $baseEmailTemplate = { ...$emailTemplate };
         } catch (error) {
             clearTimeout(timeout);
             addNotification({
@@ -36,5 +38,10 @@
 
 <div class="boxes-wrapper u-margin-block-start-16">
     <LocaleOptions {localeCodes} on:select={onLocaleChange} bind:value={locale} />
-    <EmailTemplate />
+    <EmailTemplate bind:loading>
+        <Id value={'{{team}}'}>{'{{team}}'}</Id>
+        <Id value={'{{user}}'}>{'{{user}}'}</Id>
+        <Id value={'{{project}}'}>{'{{project}}'}</Id>
+        <Id value={'{{redirect}}'}>{'{{redirect}}'}</Id>
+    </EmailTemplate>
 </div>

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

@@ -34,8 +34,12 @@
                 $emailTemplate.senderEmail,
                 $emailTemplate.subject,
                 $emailTemplate.message,
-                $emailTemplate.replyTo
+                $emailTemplate.replyTo ? $emailTemplate.replyTo : undefined
             );
+
+            $baseEmailTemplate = {
+                ...$emailTemplate
+            };
             addNotification({
                 type: 'success',
                 message: `Email ${$emailTemplate.type} template for ${$emailTemplate.locale} updated`
@@ -51,10 +55,11 @@
     $: isButtonDisabled = deepEqual($emailTemplate, $baseEmailTemplate);
 </script>
 
-<div class="box">
+<div class="box u-position-relative">
     {#if loading}
         <div
-            class="u-width-full-100 u-flex u-flex-vertical u-main-center u-cross-center u-gap-16 u-margin-block-start-32">
+            class="u-position-absolute u-width-full-line u-flex u-flex-vertical u-main-center u-cross-center u-gap-16 u-margin-block-start-32"
+            style="inset-inline-start: 0;">
             <div class="loader" />
             <p class="text">Loading template...</p>
         </div>
@@ -78,8 +83,9 @@
                         <p class="text">
                             Click to copy variables for the fields below. Learn more <a
                                 class="link"
-                                href="#">here</a
+                                href="/#">here</a
                             >.
+                            <!-- TODO: add link to docs -->
                         </p>
                         <div class="u-margin-block-start-16 u-flex u-gap-8">
                             <slot />

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

@@ -3,7 +3,7 @@
     import LocaleOptions from './localeOptions.svelte';
     import type { Models } from '@appwrite.io/console';
     import { loadEmailTemplate } from './+page.svelte';
-    import { emailTemplate } from './strote';
+    import { baseEmailTemplate, emailTemplate } from './strote';
     import { page } from '$app/stores';
     import { Id } from '$lib/components';
     import { addNotification } from '$lib/stores/notifications';
@@ -11,9 +11,9 @@
     export let localeCodes: Models.LocaleCode[];
     const projectId = $page.params.project;
 
-    let locale = 'en-us';
+    let locale = 'en';
     let loading = false;
-    let timeout: NodeJS.Timeout;
+    let timeout: ReturnType<typeof setTimeout>;
 
     async function onLocaleChange() {
         timeout = setTimeout(() => {
@@ -23,6 +23,7 @@
             const template = await loadEmailTemplate(projectId, 'verification', locale);
             clearTimeout(timeout);
             emailTemplate.set(template);
+            $baseEmailTemplate = { ...$emailTemplate };
         } catch (error) {
             clearTimeout(timeout);
             addNotification({
@@ -39,7 +40,9 @@
     <LocaleOptions {localeCodes} on:select={onLocaleChange} bind:value={locale} />
 
     <EmailTemplate bind:loading>
-        <Id value={'{{name}}'}>{'{{name}}'}</Id>
+        <Id value={'{{team}}'}>{'{{team}}'}</Id>
+        <Id value={'{{user}}'}>{'{{user}}'}</Id>
         <Id value={'{{project}}'}>{'{{project}}'}</Id>
+        <Id value={'{{redirect}}'}>{'{{redirect}}'}</Id>
     </EmailTemplate>
 </div>

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

@@ -3,9 +3,9 @@
     import type { Models } from '@appwrite.io/console';
 
     export let localeCodes: Models.LocaleCode[];
-    export let value: string = 'en-us';
+    export let value = 'en';
 
-    let search: string = 'English';
+    let search = 'English';
 
     $: options =
         localeCodes

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

@@ -2,6 +2,9 @@
     import { Modal } from '$lib/components';
     import { Button } from '$lib/elements/forms';
     import { sdk } from '$lib/stores/sdk';
+    import { project } from '../../store';
+    import { loadEmailTemplate } from './+page.svelte';
+    import { baseEmailTemplate, emailTemplate } from './strote';
 
     export let show = false;
 
@@ -9,7 +12,17 @@
 
     async function reset() {
         try {
-            // await sdk.forConsole.projects.resetEmailTemplate()
+            await sdk.forConsole.projects.deleteEmailTemplate(
+                $project.$id,
+                $emailTemplate.type,
+                $emailTemplate.locale
+            );
+            $emailTemplate = await loadEmailTemplate(
+                $project.$id,
+                $emailTemplate.type,
+                $emailTemplate.locale
+            );
+            $baseEmailTemplate = { ...$emailTemplate };
             show = false;
         } catch (e) {
             error = e.message;
@@ -21,7 +34,7 @@
     icon="exclamation"
     state="warning"
     onSubmit={reset}
-    size="small"
+    size="big"
     {error}
     bind:show
     headerDivider={false}>

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

@@ -2,6 +2,9 @@
     import { Modal } from '$lib/components';
     import { Button } from '$lib/elements/forms';
     import { sdk } from '$lib/stores/sdk';
+    import { project } from '../../store';
+    import { loadSmsTemplate } from './+page.svelte';
+    import { baseSmsTemplate, smsTemplate } from './strote';
 
     export let show = false;
 
@@ -9,7 +12,18 @@
 
     async function reset() {
         try {
-            // await sdk.forConsole.projects.resetSmsTemplate()
+            await sdk.forConsole.projects.deleteSmsTemplate(
+                $project.$id,
+                $smsTemplate.type,
+                $smsTemplate.locale
+            );
+
+            $smsTemplate = await loadSmsTemplate(
+                $project.$id,
+                $smsTemplate.type,
+                $smsTemplate.locale
+            );
+            $baseSmsTemplate = { ...$smsTemplate };
             show = false;
         } catch (e) {
             error = e.message;
@@ -21,7 +35,7 @@
     icon="exclamation"
     state="warning"
     onSubmit={reset}
-    size="small"
+    size="big"
     {error}
     bind:show
     headerDivider={false}>

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

@@ -2,17 +2,18 @@
     import SmsTemplate from './smsTemplate.svelte';
     import LocaleOptions from './localeOptions.svelte';
     import type { Models } from '@appwrite.io/console';
-    import { smsTemplate } from './strote';
+    import { baseSmsTemplate, smsTemplate } from './strote';
     import { page } from '$app/stores';
     import { loadSmsTemplate } from './+page.svelte';
     import { addNotification } from '$lib/stores/notifications';
+    import { Id } from '$lib/components';
 
     export let localeCodes: Models.LocaleCode[];
 
     const projectId = $page.params.project;
     let locale = 'en-us';
     let loading = false;
-    let timeout: NodeJS.Timeout;
+    let timeout: ReturnType<typeof setTimeout>;
 
     async function onLocaleChange() {
         timeout = setTimeout(() => {
@@ -22,6 +23,7 @@
             const template = await loadSmsTemplate(projectId, 'invitation', locale);
             clearTimeout(timeout);
             smsTemplate.set(template);
+            $baseSmsTemplate = { ...$smsTemplate };
         } catch (error) {
             clearTimeout(timeout);
             addNotification({
@@ -36,5 +38,10 @@
 
 <div class="boxes-wrapper u-margin-block-start-16">
     <LocaleOptions {localeCodes} on:select={onLocaleChange} bind:value={locale} />
-    <SmsTemplate />
+    <SmsTemplate bind:loading>
+        <Id value={'{{team}}'}>{'{{team}}'}</Id>
+        <Id value={'{{user}}'}>{'{{user}}'}</Id>
+        <Id value={'{{project}}'}>{'{{project}}'}</Id>
+        <Id value={'{{redirect}}'}>{'{{redirect}}'}</Id>
+    </SmsTemplate>
 </div>

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

@@ -4,15 +4,16 @@
     import type { Models } from '@appwrite.io/console';
     import { page } from '$app/stores';
     import { loadSmsTemplate } from './+page.svelte';
-    import { smsTemplate } from './strote';
+    import { baseSmsTemplate, smsTemplate } from './strote';
     import { addNotification } from '$lib/stores/notifications';
+    import { Id } from '$lib/components';
 
     export let localeCodes: Models.LocaleCode[];
 
     const projectId = $page.params.project;
-    let locale = 'en-us';
+    let locale = 'en';
     let loading = false;
-    let timeout: NodeJS.Timeout;
+    let timeout: ReturnType<typeof setTimeout>;
 
     async function onLocaleChange() {
         timeout = setTimeout(() => {
@@ -22,6 +23,7 @@
             const template = await loadSmsTemplate(projectId, 'login', locale);
             clearTimeout(timeout);
             smsTemplate.set(template);
+            $baseSmsTemplate = { ...$smsTemplate };
         } catch (error) {
             clearTimeout(timeout);
             addNotification({
@@ -36,5 +38,10 @@
 
 <div class="boxes-wrapper u-margin-block-start-16">
     <LocaleOptions {localeCodes} on:select={onLocaleChange} bind:value={locale} />
-    <SmsTemplate />
+    <SmsTemplate bind:loading>
+        <Id value={'{{team}}'}>{'{{team}}'}</Id>
+        <Id value={'{{user}}'}>{'{{user}}'}</Id>
+        <Id value={'{{project}}'}>{'{{project}}'}</Id>
+        <Id value={'{{redirect}}'}>{'{{redirect}}'}</Id>
+    </SmsTemplate>
 </div>

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

@@ -7,6 +7,7 @@
     import { sdk } from '$lib/stores/sdk';
     import { deepEqual } from '$lib/helpers/object';
 
+    export let loading = false;
     const projectId = $page.params.project;
     let openResetModal = false;
 
@@ -25,6 +26,10 @@
                 $smsTemplate.locale,
                 $smsTemplate.message
             );
+
+            $baseSmsTemplate = {
+                ...$smsTemplate
+            };
             addNotification({
                 type: 'success',
                 message: `SMS ${$smsTemplate.type} template for ${$smsTemplate.locale} updated`
@@ -40,22 +45,32 @@
     $: isButtonDisabled = deepEqual($smsTemplate, $baseSmsTemplate);
 </script>
 
-<div class="box">
-    <Form onSubmit={saveSmsTemplate}>
-        <FormList gap={8}>
-            <InputTextarea
-                bind:value={$smsTemplate.message}
-                id="message"
-                label="Message"
-                placeholder="Enter your message" />
-        </FormList>
-
-        <div class="u-sep-block-start u-margin-block-start-24" />
-
-        <div class="u-flex u-gap-16 u-main-end u-margin-block-start-24">
-            <Button on:click={() => (openResetModal = true)} text>Reset changes</Button>
-            <Button submit disabled={isButtonDisabled}>Update</Button>
+<div class="box u-position-relative">
+    {#if loading}
+        <div
+            class="u-position-absolute u-width-full-line u-flex u-flex-vertical u-main-center u-cross-center u-gap-16 u-margin-block-start-32"
+            style="inset-inline-start: 0;">
+            <div class="loader" />
+            <p class="text">Loading template...</p>
         </div>
-    </Form>
+    {/if}
+    <div class:u-opacity-0={loading} style={loading ? 'pointer-events: none' : ''}>
+        <Form onSubmit={saveSmsTemplate}>
+            <FormList gap={8}>
+                <InputTextarea
+                    bind:value={$smsTemplate.message}
+                    id="message"
+                    label="Message"
+                    placeholder="Enter your message" />
+            </FormList>
+
+            <div class="u-sep-block-start u-margin-block-start-24" />
+
+            <div class="u-flex u-gap-16 u-main-end u-margin-block-start-24">
+                <Button on:click={() => (openResetModal = true)} text>Reset changes</Button>
+                <Button submit disabled={isButtonDisabled}>Update</Button>
+            </div>
+        </Form>
+    </div>
 </div>
 <ResetSms bind:show={openResetModal} />

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

@@ -4,14 +4,16 @@
     import type { Models } from '@appwrite.io/console';
     import { page } from '$app/stores';
     import { loadSmsTemplate } from './+page.svelte';
-    import { smsTemplate } from './strote';
+    import { baseSmsTemplate, smsTemplate } from './strote';
+    import { Id } from '$lib/components';
+    import { addNotification } from '$lib/stores/notifications';
 
     export let localeCodes: Models.LocaleCode[];
 
     const projectId = $page.params.project;
-    let locale = 'en-us';
+    let locale = 'en';
     let loading = false;
-    let timeout: NodeJS.Timeout;
+    let timeout: ReturnType<typeof setTimeout>;
 
     async function onLocaleChange() {
         timeout = setTimeout(() => {
@@ -21,9 +23,13 @@
             const template = await loadSmsTemplate(projectId, 'verification', locale);
             clearTimeout(timeout);
             smsTemplate.set(template);
+            $baseSmsTemplate = { ...$smsTemplate };
         } catch (error) {
             clearTimeout(timeout);
-            console.log(error);
+            addNotification({
+                type: 'error',
+                message: error.message
+            });
         } finally {
             loading = false;
         }
@@ -32,5 +38,10 @@
 
 <div class="boxes-wrapper u-margin-block-start-16">
     <LocaleOptions {localeCodes} on:select={onLocaleChange} bind:value={locale} />
-    <SmsTemplate />
+    <SmsTemplate bind:loading>
+        <Id value={'{{team}}'}>{'{{team}}'}</Id>
+        <Id value={'{{user}}'}>{'{{user}}'}</Id>
+        <Id value={'{{project}}'}>{'{{project}}'}</Id>
+        <Id value={'{{redirect}}'}>{'{{redirect}}'}</Id>
+    </SmsTemplate>
 </div>

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

@@ -1,13 +1,6 @@
 <script lang="ts">
     import { CardGrid, Heading } from '$lib/components';
-    import {
-        Button,
-        Form,
-        FormList,
-        InputText,
-        InputSwitch,
-        InputChoice
-    } from '$lib/elements/forms';
+    import { Button, Form, FormList, InputText, InputChoice } from '$lib/elements/forms';
     import { Container } from '$lib/layout';
     import { project } from '../../store';
     import { onMount } from 'svelte/internal';
@@ -19,6 +12,7 @@
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
     import InputNumber from '$lib/elements/forms/inputNumber.svelte';
     import { base } from '$app/paths';
+    import { deepEqual } from '$lib/helpers/object';
 
     let enabled = false;
     let sender: string;
@@ -60,15 +54,35 @@
                 type: 'success',
                 message: 'SMTP server has been ' + (enabled ? 'enabled.' : 'disabled.')
             });
-            trackEvent(Submit.projectUpdateSMTP);
+            trackEvent(Submit.ProjectUpdateSMTP);
         } catch (error) {
             addNotification({
                 type: 'error',
                 message: error.message
             });
-            trackError(error, Submit.projectUpdateSMTP);
+            trackError(error, Submit.ProjectUpdateSMTP);
         }
     }
+
+    $: isButtonDisabled = deepEqual(
+        { enabled, sender, host, port, username, password },
+        {
+            enabled: $project.smtpEnabled,
+            sender: $project.smtpSender,
+            host: $project.smtpHost,
+            port: $project.smtpPort,
+            username: $project.smtpUsername,
+            password: $project.smtpPassword
+        }
+    );
+
+    $: if (!enabled) {
+        sender = undefined;
+        host = undefined;
+        port = undefined;
+        username = undefined;
+        password = undefined;
+    }
 </script>
 
 <Container>
@@ -133,7 +147,7 @@
             </svelte:fragment>
             <svelte:fragment slot="actions">
                 <!-- <Button text disabled={!enabled}>Send test email</Button> -->
-                <Button submit>Update</Button>
+                <Button submit disabled={isButtonDisabled}>Update</Button>
             </svelte:fragment>
         </CardGrid>
     </Form>