fix(messaging): update SMTP provider fields based on design review

- Use checkbox for autoTLS - Add popover for mailer field - Update description for autoTLS - Update placeholder for host field
appwrite · Feb 24, 2024 · 7955f6e · 7955f6e
1 parent d1f53bd
commit 7955f6e
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 5 deletions.
diff --git a/src/routes/console/project-[project]/messaging/providers/settingsFormList.svelte b/src/routes/console/project-[project]/messaging/providers/settingsFormList.svelte
@@ -10,6 +10,7 @@
         InputText,
         InputPassword
     } from '$lib/elements/forms';
+    import InputCheckbox from '$lib/elements/forms/inputCheckbox.svelte';
     import PopoverContent from './popoverContent.svelte';
     import type {
         ProviderInput,
@@ -122,6 +123,12 @@
                     {input.description}
                 </svelte:fragment>
             </InputSwitch>
+        {:else if input.type === 'checkbox'}
+            <InputCheckbox label={input.label} id={input.name} bind:checked={params[input.name]}>
+                <svelte:fragment slot="description">
+                    {input.description}
+                </svelte:fragment>
+            </InputCheckbox>
         {:else if input.type === 'select'}
             <InputSelect
                 label={input.label}

diff --git a/src/routes/console/project-[project]/messaging/providers/store.ts b/src/routes/console/project-[project]/messaging/providers/store.ts
@@ -14,7 +14,16 @@ export const columns = writable<Column[]>([
 export type ProviderInput = {
     label: string;
     name: string;
-    type: 'text' | 'password' | 'phone' | 'email' | 'domain' | 'file' | 'switch' | 'select';
+    type:
+        | 'text'
+        | 'password'
+        | 'phone'
+        | 'email'
+        | 'domain'
+        | 'file'
+        | 'switch'
+        | 'select'
+        | 'checkbox';
     placeholder?: string;
     description?: string;
     popover?: string[];
@@ -311,7 +320,7 @@ export const providers: ProvidersMap = {
                         label: 'Server host',
                         name: 'host',
                         type: 'text',
-                        placeholder: 'Enter host'
+                        placeholder: 'smtp.server.com'
                     },
                     {
                         label: 'Server port',
@@ -347,16 +356,20 @@ export const providers: ProvidersMap = {
                     {
                         label: 'Auto TLS',
                         name: 'autoTLS',
-                        description: 'Automatically uses TLS encryption',
-                        type: 'switch',
+                        description: 'Automatically uses TLS encryption if available.',
+                        type: 'checkbox',
                         optional: true
                     },
                     {
                         label: 'Mailer',
                         name: 'mailer',
                         type: 'text',
                         optional: true,
-                        placeholder: 'Enter mailer'
+                        placeholder: 'Enter mailer',
+                        popover: [
+                            '<b>What is the Mailer?</b>',
+                            'The value to use for the X-Mailer header.'
+                        ]
                     }
                 ]
             }