smtp update

package.json

@@ -19,8 +19,8 @@
     },
     "dependencies": {
         "@analytics/google-analytics": "^1.0.5",
-        "@appwrite.io/console": "0.1.0",
-        "@appwrite.io/pink": "^0.0.6-rc.10",
+        "@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",
         "@sentry/tracing": "^7.44.2",

src/lib/actions/analytics.ts

@@ -134,6 +134,7 @@ export enum Submit {
     ProjectUpdateName = 'submit_project_update_name',
     ProjectUpdateTeam = 'submit_project_update_team',
     ProjectService = 'submit_project_service',
+    ProjectUpdateSMTP = 'submit_project_update_smtp',
     MemberCreate = 'submit_member_create',
     MemberDelete = 'submit_member_delete',
     MembershipUpdateStatus = 'submit_membership_update_status',

src/lib/components/alert.svelte

@@ -5,12 +5,16 @@
     export let dismissible = false;
     export let type: 'info' | 'success' | 'warning' | 'error' = 'info';
     export let buttons: Buttons[] = [];
+    export let isAction = false;
+    export let isStandalone = false;
 
     const dispatch = createEventDispatcher();
 </script>
 
 <section
     class="alert"
+    class:is-action={isAction}
+    class:is-standalone={isStandalone}
     class:is-success={type === 'success'}
     class:is-warning={type === 'warning'}
     class:is-danger={type === 'error'}
@@ -39,7 +43,7 @@
                 </h6>
             {/if}
             <p class="alert-message"><slot /></p>
-            {#if buttons?.length}
+            {#if buttons?.length && !isAction}
                 <div class="alert-buttons u-flex">
                     {#each buttons as button}
                         <button class="button is-text" on:click={button.method}>
@@ -49,5 +53,14 @@
                 </div>
             {/if}
         </div>
+        {#if buttons?.length && isAction}
+            <div class="alert-buttons u-flex u-gap-16 u-cross-child-center">
+                {#each buttons as button}
+                    <button class="button is-text" on:click={button.method}>
+                        <span class="text">{button.name}</span>
+                    </button>
+                {/each}
+            </div>
+        {/if}
     </div>
 </section>

src/lib/components/collapsibleItem.svelte

@@ -1,11 +1,13 @@
 <script lang="ts">
+    import { clickOnEnter } from '$lib/helpers/a11y';
+
     export let withIndentation = false;
     export let open = false;
 </script>
 
 <li class="collapsible-item">
     <details class="collapsible-wrapper" {open}>
-        <summary class="collapsible-button">
+        <summary class="collapsible-button" on:keyup={clickOnEnter} on:click>
             <slot name="beforetitle" />
             <div>
                 <span class="text"><slot name="title" /></span>

src/lib/components/id.svelte

@@ -3,6 +3,7 @@
 
     export let value: string;
     export let event: string = null;
+    export let centered = true;
 
     function truncateText(node: HTMLElement) {
         const MAX_TRIES = 100;
@@ -49,6 +50,7 @@
 <Copy {value} {event}>
     <div
         class="interactive-text-output is-buttons-on-top"
+        class:u-text-center={centered}
         style:min-inline-size="0"
         style:display="inline-flex">
         <span

src/lib/elements/forms/inputSelectSearch.svelte

@@ -20,9 +20,11 @@
     export let placeholder = '';
     export let required = false;
     export let disabled = false;
+    export let fullWidth = false;
     export let autofocus = false;
     export let interactiveOutput = false;
-    // Input value
+    // stretch is used inside of a flex container to give the element flex:1
+    export let stretch = true;
     export let search = '';
     // The actual selected value
     export let value: Option['value'];
@@ -82,9 +84,12 @@
         value = option.value;
         search = option.label;
         // It's not working without this line.
-        !$$slots.output && (element.value = search);
+        if ($$slots.output) {
+            search = '';
+        } else {
+            element.value = search;
+        }
         hasFocus = false;
-        search = '';
         dispatch('select', option);
     }
 
@@ -99,7 +104,10 @@
     $: showClearBtn = (hasFocus && search) || value;
 </script>
 
-<li class="u-position-relative form-item u-stretch">
+<li
+    class="u-position-relative form-item"
+    class:u-width-full-line={fullWidth}
+    class:u-stretch={stretch}>
     <DropList
         bind:show={hasFocus}
         noStyle

src/lib/elements/forms/inputTextarea.svelte

@@ -3,6 +3,7 @@
     import { FormItem, Helper, Label } from '.';
     import NullCheckbox from './nullCheckbox.svelte';
     import TextCounter from './textCounter.svelte';
+    import { clickOnEnter } from '$lib/helpers/a11y';
 
     export let label: string;
     export let showLabel = true;
@@ -60,7 +61,7 @@
         {label}
     </Label>
 
-    <div class="input-text-wrapper">
+    <div class="input-text-wrapper" on:click on:keyup={clickOnEnter}>
         <textarea
             {id}
             {placeholder}

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

@@ -19,17 +19,23 @@
             hasChildren: true,
             event: 'teams'
         },
+        {
+            href: `${path}/security`,
+            title: 'Security',
+            event: 'security'
+        },
+        {
+            href: `${path}/templates`,
+            title: 'Templates',
+            hasChildren: false,
+            event: 'templates'
+        },
         {
             href: `${path}/usage`,
             title: 'Usage',
             hasChildren: true,
             event: 'usage'
         },
-        {
-            href: `${path}/security`,
-            title: 'Security',
-            event: 'security'
-        },
         {
             href: `${path}/settings`,
             title: 'Settings',