From 7955f6e68573a590ce33982a51f8efbac50a7717 Mon Sep 17 00:00:00 2001
From: Steven Nguyen <stnguyen90@users.noreply.github.com>
Date: Fri, 23 Feb 2024 17:14:13 -0800
Subject: [PATCH] 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
---
 .../providers/settingsFormList.svelte         |  7 ++++++
 .../messaging/providers/store.ts              | 23 +++++++++++++++----
 2 files changed, 25 insertions(+), 5 deletions(-)

diff --git a/src/routes/console/project-[project]/messaging/providers/settingsFormList.svelte b/src/routes/console/project-[project]/messaging/providers/settingsFormList.svelte
index 470a3beb1..582ce00c0 100644
--- 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
index 6e2299e1c..6e12e1f01 100644
--- 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,8 +356,8 @@ 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
                     },
                     {
@@ -356,7 +365,11 @@ export const providers: ProvidersMap = {
                         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.'
+                        ]
                     }
                 ]
             }