From 34112a945cfa24d6bafd659ae41aca1386a1c7bb Mon Sep 17 00:00:00 2001 From: Steven Nguyen Date: Wed, 14 Feb 2024 17:27:59 -0800 Subject: [PATCH 1/4] Rename provider configure step to settings --- .../project-[project]/messaging/providers/create.svelte | 6 +++--- .../project-[project]/messaging/providers/update.svelte | 6 +++--- .../providers/wizard/{configure.svelte => settings.svelte} | 2 +- 3 files changed, 7 insertions(+), 7 deletions(-) rename src/routes/console/project-[project]/messaging/providers/wizard/{configure.svelte => settings.svelte} (99%) diff --git a/src/routes/console/project-[project]/messaging/providers/create.svelte b/src/routes/console/project-[project]/messaging/providers/create.svelte index 138f6210be..faad87a3ba 100644 --- a/src/routes/console/project-[project]/messaging/providers/create.svelte +++ b/src/routes/console/project-[project]/messaging/providers/create.svelte @@ -3,7 +3,7 @@ import { Wizard } from '$lib/layout'; import type { WizardStepsType } from '$lib/layout/wizard.svelte'; import Provider from './wizard/provider.svelte'; - import Configure from './wizard/configure.svelte'; + import Settings from './wizard/settings.svelte'; import { sdk } from '$lib/stores/sdk'; import { Submit, trackError, trackEvent } from '$lib/actions/analytics'; import { addNotification } from '$lib/stores/notifications'; @@ -164,8 +164,8 @@ component: Provider }); stepsComponents.set(2, { - label: 'Configure', - component: Configure + label: 'Settings', + component: Settings }); diff --git a/src/routes/console/project-[project]/messaging/providers/update.svelte b/src/routes/console/project-[project]/messaging/providers/update.svelte index 2f6dfb5174..5fda66c95e 100644 --- a/src/routes/console/project-[project]/messaging/providers/update.svelte +++ b/src/routes/console/project-[project]/messaging/providers/update.svelte @@ -1,7 +1,7 @@ diff --git a/src/routes/console/project-[project]/messaging/providers/wizard/configure.svelte b/src/routes/console/project-[project]/messaging/providers/wizard/settings.svelte similarity index 99% rename from src/routes/console/project-[project]/messaging/providers/wizard/configure.svelte rename to src/routes/console/project-[project]/messaging/providers/wizard/settings.svelte index e6c7d08b89..f3f345843f 100644 --- a/src/routes/console/project-[project]/messaging/providers/wizard/configure.svelte +++ b/src/routes/console/project-[project]/messaging/providers/wizard/settings.svelte @@ -47,7 +47,7 @@ - Configure + Settings Set up the credentials below to enable {providers[$providerType].providers[$provider].title} for sending From f05404ec5b910cb47598d6ed56a37fd02951bbfa Mon Sep 17 00:00:00 2001 From: Steven Nguyen Date: Wed, 14 Feb 2024 18:27:01 -0800 Subject: [PATCH 2/4] Refactor provider settings form list into a component --- .../messaging/providers/create.svelte | 2 +- .../providers/createProviderDropdown.svelte | 2 +- .../{wizard => }/popoverContent.svelte | 0 .../provider-[provider]/updateStatus.svelte | 208 +++++++++--------- .../providers/settingsFormList.svelte | 114 ++++++++++ .../messaging/providers/store.ts | 123 ++++++++++- .../messaging/providers/update.svelte | 2 +- .../providers/wizard/provider.svelte | 2 +- .../providers/wizard/settings.svelte | 112 +--------- .../messaging/providers/wizard/store.ts | 124 ----------- 10 files changed, 348 insertions(+), 341 deletions(-) rename src/routes/console/project-[project]/messaging/providers/{wizard => }/popoverContent.svelte (100%) create mode 100644 src/routes/console/project-[project]/messaging/providers/settingsFormList.svelte delete mode 100644 src/routes/console/project-[project]/messaging/providers/wizard/store.ts diff --git a/src/routes/console/project-[project]/messaging/providers/create.svelte b/src/routes/console/project-[project]/messaging/providers/create.svelte index faad87a3ba..26a7583ea6 100644 --- a/src/routes/console/project-[project]/messaging/providers/create.svelte +++ b/src/routes/console/project-[project]/messaging/providers/create.svelte @@ -11,7 +11,7 @@ import { base } from '$app/paths'; import { project } from '../../store'; import { wizard } from '$lib/stores/wizard'; - import { provider, providerParams } from './wizard/store'; + import { provider, providerParams } from './store'; import { ID, type Models } from '@appwrite.io/console'; import { Providers } from '../provider.svelte'; diff --git a/src/routes/console/project-[project]/messaging/providers/createProviderDropdown.svelte b/src/routes/console/project-[project]/messaging/providers/createProviderDropdown.svelte index 6c8ad722da..c8294b2848 100644 --- a/src/routes/console/project-[project]/messaging/providers/createProviderDropdown.svelte +++ b/src/routes/console/project-[project]/messaging/providers/createProviderDropdown.svelte @@ -4,7 +4,7 @@ import { wizard } from '$lib/stores/wizard'; import { providers } from './store'; import Create from './create.svelte'; - import { providerType, provider } from './wizard/store'; + import { providerType, provider } from './store'; import { Providers } from '../provider.svelte'; import { isValueOfStringEnum } from '$lib/helpers/types'; import { MessagingProviderType } from '@appwrite.io/console'; diff --git a/src/routes/console/project-[project]/messaging/providers/wizard/popoverContent.svelte b/src/routes/console/project-[project]/messaging/providers/popoverContent.svelte similarity index 100% rename from src/routes/console/project-[project]/messaging/providers/wizard/popoverContent.svelte rename to src/routes/console/project-[project]/messaging/providers/popoverContent.svelte diff --git a/src/routes/console/project-[project]/messaging/providers/provider-[provider]/updateStatus.svelte b/src/routes/console/project-[project]/messaging/providers/provider-[provider]/updateStatus.svelte index 1bd4c4536a..78d81d5d93 100644 --- a/src/routes/console/project-[project]/messaging/providers/provider-[provider]/updateStatus.svelte +++ b/src/routes/console/project-[project]/messaging/providers/provider-[provider]/updateStatus.svelte @@ -14,146 +14,146 @@ import Provider, { Providers } from '../../provider.svelte'; import ProviderType from '../../providerType.svelte'; import Update from '../update.svelte'; - import { providerParams, providerType, provider as wizardProvider } from '../wizard/store'; - import { provider } from './store'; + import { providerParams, providerType, provider } from '../store'; + import { provider as providerData } from './store'; let enabled: boolean = null; onMount(() => { - enabled ??= $provider.enabled; + enabled ??= $providerData.enabled; }); function configure() { - if (!isValueOfStringEnum(MessagingProviderType, $provider.type)) { - throw new Error(`Invalid provider type: ${$provider.type}`); + if (!isValueOfStringEnum(MessagingProviderType, $providerData.type)) { + throw new Error(`Invalid provider type: ${$providerData.type}`); } - if (!isValueOfStringEnum(Providers, $provider.provider)) { - throw new Error(`Invalid provider: ${$provider.provider}`); + if (!isValueOfStringEnum(Providers, $providerData.provider)) { + throw new Error(`Invalid provider: ${$providerData.provider}`); } - $providerType = $provider.type; - $wizardProvider = $provider.provider; + $providerType = $providerData.type; + $provider = $providerData.provider; - switch ($wizardProvider) { + switch ($provider) { case Providers.Twilio: - $providerParams[$wizardProvider] = { - providerId: $provider.$id, - name: $provider.name, - enabled: $provider.enabled, - accountSid: $provider.credentials['accountSid'], - authToken: $provider.credentials['authToken'], - from: $provider.options['from'] + $providerParams[$provider] = { + providerId: $providerData.$id, + name: $providerData.name, + enabled: $providerData.enabled, + accountSid: $providerData.credentials['accountSid'], + authToken: $providerData.credentials['authToken'], + from: $providerData.options['from'] }; break; case Providers.Msg91: - $providerParams[$wizardProvider] = { - providerId: $provider.$id, - name: $provider.name, - enabled: $provider.enabled, - from: $provider.options['from'], - senderId: $provider.credentials['senderId'], - authKey: $provider.credentials['authKey'] + $providerParams[$provider] = { + providerId: $providerData.$id, + name: $providerData.name, + enabled: $providerData.enabled, + from: $providerData.options['from'], + senderId: $providerData.credentials['senderId'], + authKey: $providerData.credentials['authKey'] }; break; case Providers.Telesign: - $providerParams[$wizardProvider] = { - providerId: $provider.$id, - name: $provider.name, - enabled: $provider.enabled, - username: $provider.credentials['username'], - password: $provider.credentials['password'], - from: $provider.options['from'] + $providerParams[$provider] = { + providerId: $providerData.$id, + name: $providerData.name, + enabled: $providerData.enabled, + username: $providerData.credentials['username'], + password: $providerData.credentials['password'], + from: $providerData.options['from'] }; break; case Providers.Textmagic: - $providerParams[$wizardProvider] = { - providerId: $provider.$id, - name: $provider.name, - enabled: $provider.enabled, - username: $provider.credentials['username'], - apiKey: $provider.credentials['apiKey'], - from: $provider.options['from'] + $providerParams[$provider] = { + providerId: $providerData.$id, + name: $providerData.name, + enabled: $providerData.enabled, + username: $providerData.credentials['username'], + apiKey: $providerData.credentials['apiKey'], + from: $providerData.options['from'] }; break; case Providers.Vonage: - $providerParams[$wizardProvider] = { - providerId: $provider.$id, - name: $provider.name, - enabled: $provider.enabled, - apiKey: $provider.credentials['apiKey'], - apiSecret: $provider.credentials['apiSecret'], - from: $provider.options['from'] + $providerParams[$provider] = { + providerId: $providerData.$id, + name: $providerData.name, + enabled: $providerData.enabled, + apiKey: $providerData.credentials['apiKey'], + apiSecret: $providerData.credentials['apiSecret'], + from: $providerData.options['from'] }; break; case Providers.Mailgun: - $providerParams[$wizardProvider] = { - providerId: $provider.$id, - name: $provider.name, - enabled: $provider.enabled, + $providerParams[$provider] = { + providerId: $providerData.$id, + name: $providerData.name, + enabled: $providerData.enabled, isEuRegion: false, - fromEmail: $provider.options['fromEmail'], - fromName: $provider.options['fromName'], - replyToEmail: $provider.options['replyToEmail'], - replyToName: $provider.options['replyToName'], - apiKey: $provider.credentials['apiKey'], - domain: $provider.credentials['domain'] + fromEmail: $providerData.options['fromEmail'], + fromName: $providerData.options['fromName'], + replyToEmail: $providerData.options['replyToEmail'], + replyToName: $providerData.options['replyToName'], + apiKey: $providerData.credentials['apiKey'], + domain: $providerData.credentials['domain'] }; break; case Providers.Sendgrid: - $providerParams[$wizardProvider] = { - providerId: $provider.$id, - name: $provider.name, - enabled: $provider.enabled, - apiKey: $provider.credentials['apiKey'], - fromEmail: $provider.options['fromEmail'], - fromName: $provider.options['fromName'], - replyToEmail: $provider.options['replyToEmail'], - replyToName: $provider.options['replyToName'] + $providerParams[$provider] = { + providerId: $providerData.$id, + name: $providerData.name, + enabled: $providerData.enabled, + apiKey: $providerData.credentials['apiKey'], + fromEmail: $providerData.options['fromEmail'], + fromName: $providerData.options['fromName'], + replyToEmail: $providerData.options['replyToEmail'], + replyToName: $providerData.options['replyToName'] }; break; case Providers.SMTP: - $providerParams[$wizardProvider] = { - providerId: $provider.$id, - name: $provider.name, - enabled: $provider.enabled, - host: $provider.credentials['host'], - port: $provider.credentials['port'], - username: $provider.credentials['username'], - password: $provider.credentials['password'], - fromName: $provider.options['fromName'], - fromEmail: $provider.options['fromEmail'], - replyToName: $provider.options['replyToName'], - replyToEmail: $provider.options['replyToEmail'], - encryption: $provider.options['encryption'], - autoTLS: $provider.options['autoTLS'], - mailer: $provider.options['mailer'] + $providerParams[$provider] = { + providerId: $providerData.$id, + name: $providerData.name, + enabled: $providerData.enabled, + host: $providerData.credentials['host'], + port: $providerData.credentials['port'], + username: $providerData.credentials['username'], + password: $providerData.credentials['password'], + fromName: $providerData.options['fromName'], + fromEmail: $providerData.options['fromEmail'], + replyToName: $providerData.options['replyToName'], + replyToEmail: $providerData.options['replyToEmail'], + encryption: $providerData.options['encryption'], + autoTLS: $providerData.options['autoTLS'], + mailer: $providerData.options['mailer'] }; break; case Providers.FCM: - $providerParams[$wizardProvider] = { - providerId: $provider.$id, - name: $provider.name, - enabled: $provider.enabled + $providerParams[$provider] = { + providerId: $providerData.$id, + name: $providerData.name, + enabled: $providerData.enabled }; - if ('serviceAccountJSON' in $provider.credentials) { - const serviceAccountJSON = $provider.credentials['serviceAccountJSON']; + if ('serviceAccountJSON' in $providerData.credentials) { + const serviceAccountJSON = $providerData.credentials['serviceAccountJSON']; if (typeof serviceAccountJSON === 'string') { - $providerParams[$wizardProvider].serviceAccountJSON = serviceAccountJSON; + $providerParams[$provider].serviceAccountJSON = serviceAccountJSON; } else if (serviceAccountJSON instanceof Object) { - $providerParams[$wizardProvider].serviceAccountJSON = + $providerParams[$provider].serviceAccountJSON = JSON.stringify(serviceAccountJSON); } } break; case Providers.APNS: - $providerParams[$wizardProvider] = { - providerId: $provider.$id, - name: $provider.name, - enabled: $provider.enabled, - authKey: $provider.credentials['authKey'], - authKeyId: $provider.credentials['authKeyId'], - teamId: $provider.credentials['teamId'], - bundleId: $provider.credentials['bundleId'] + $providerParams[$provider] = { + providerId: $providerData.$id, + name: $providerData.name, + enabled: $providerData.enabled, + authKey: $providerData.credentials['authKey'], + authKeyId: $providerData.credentials['authKeyId'], + teamId: $providerData.credentials['teamId'], + bundleId: $providerData.credentials['bundleId'] }; break; } @@ -164,8 +164,8 @@ async function updateStatus() { try { let response = { $id: '', name: '' }; - const providerId = $provider.$id; - switch ($provider.provider) { + const providerId = $providerData.$id; + switch ($providerData.provider) { case Providers.Twilio: response = await sdk.forProject.messaging.updateTwilioProvider( providerId, @@ -256,7 +256,7 @@ message: `${response.name} has been ${enabled ? 'enabled' : 'disabled'}` }); trackEvent(Submit.MessagingProviderUpdate, { - provider: $provider + provider: $providerData }); } catch (error) { addNotification({ @@ -270,8 +270,8 @@
- - {$provider.name} + + {$providerData.name}
@@ -283,9 +283,9 @@ label={enabled ? 'Enabled' : 'Disabled'} bind:value={enabled} /> -

Provider:

-

Channel:

-

Created: {toLocaleDateTime($provider.$createdAt)}

+

Provider:

+

Channel:

+

Created: {toLocaleDateTime($providerData.$createdAt)}

 @@ -293,7 +293,7 @@
-
diff --git a/src/routes/console/project-[project]/messaging/providers/settingsFormList.svelte b/src/routes/console/project-[project]/messaging/providers/settingsFormList.svelte new file mode 100644 index 0000000000..35e2086030 --- /dev/null +++ b/src/routes/console/project-[project]/messaging/providers/settingsFormList.svelte @@ -0,0 +1,114 @@ + + + + {#each inputs as input} + {@const popoverImage = input.popoverImage} + {#if input.type === 'text'} + + + + + + {:else if input.type === 'password'} + + + + + + {:else if input.type === 'email'} + + + + + + {:else if input.type === 'domain'} + + + + + + {:else if input.type === 'phone'} + + + + + + {:else if input.type === 'file'} + + + + + + {:else if input.type === 'switch'} + + + {input.description} + + + {:else if input.type === 'select'} + + {/if} + {/each} + diff --git a/src/routes/console/project-[project]/messaging/providers/store.ts b/src/routes/console/project-[project]/messaging/providers/store.ts index 8f4ff9622a..e3a62e9152 100644 --- a/src/routes/console/project-[project]/messaging/providers/store.ts +++ b/src/routes/console/project-[project]/messaging/providers/store.ts @@ -67,7 +67,7 @@ export const providers: ProvidersMap = { popover: [ 'How to get the FCM service account JSON?', 'Head to Project settings -> Service accounts -> Generate new private key.', - 'Generating the new key will result in the download of a JSON file.', + 'Generating the new key will result in the download of a JSON file.' ], popoverImage: { src: { @@ -533,3 +533,124 @@ export const providers: ProvidersMap = { } } }; + +type ProviderParams = { + providerId: string; + name: string; + enabled: boolean; +}; + +/** + * SMS providers + */ + +export type TwilioProviderParams = ProviderParams & { + accountSid: string; + authToken: string; + from: string; +}; + +export type Msg91ProviderParams = ProviderParams & { + from: string; + senderId: string; + authKey: string; +}; + +export type TelesignProviderParams = ProviderParams & { + from: string; + username: string; + password: string; +}; + +export type TextmagicProviderParams = ProviderParams & { + from: string; + username: string; + apiKey: string; +}; + +export type VonageProviderParams = ProviderParams & { + from: string; + apiKey: string; + apiSecret: string; +}; + +/** + * Email providers + */ + +export type MailgunProviderParams = ProviderParams & { + fromEmail: string; + fromName: string; + replyToEmail: string; + replyToName: string; + isEuRegion: boolean; + apiKey: string; + domain: string; +}; + +export type SendgridProviderParams = ProviderParams & { + fromEmail: string; + fromName: string; + replyToEmail: string; + replyToName: string; + apiKey: string; +}; + +export type SMTPProviderParams = ProviderParams & { + fromEmail: string; + fromName: string; + replyToEmail: string; + replyToName: string; + host: string; + port: number; + username: string; + password: string; + encryption: SMTPEncryption; + autoTLS: boolean; + mailer: string; +}; + +/** + * Push providers + */ + +export type FCMProviderParams = ProviderParams & { + serviceAccountJSON: string; +}; + +export type APNSProviderParams = ProviderParams & { + authKey: string; + authKeyId: string; + teamId: string; + bundleId: string; +}; + +export type MQTTProviderParams = ProviderParams & { + serverKey: string; +}; + +export const providerType = writable(null); +export const provider = writable(null); +export const providerParams = writable<{ + twilio: Partial; + msg91: Partial; + telesign: Partial; + textmagic: Partial; + vonage: Partial; + mailgun: Partial; + sendgrid: Partial; + smtp: Partial; + fcm: Partial; + apns: Partial; +}>({ + twilio: null, + msg91: null, + telesign: null, + textmagic: null, + vonage: null, + mailgun: null, + sendgrid: null, + smtp: null, + fcm: null, + apns: null +}); diff --git a/src/routes/console/project-[project]/messaging/providers/update.svelte b/src/routes/console/project-[project]/messaging/providers/update.svelte index 5fda66c95e..f206062144 100644 --- a/src/routes/console/project-[project]/messaging/providers/update.svelte +++ b/src/routes/console/project-[project]/messaging/providers/update.svelte @@ -9,7 +9,7 @@ import { base } from '$app/paths'; import { project } from '../../store'; import { wizard } from '$lib/stores/wizard'; - import { provider, providerParams } from './wizard/store'; + import { provider, providerParams } from './store'; import { Providers } from '../provider.svelte'; import { Dependencies } from '$lib/constants'; import type { Models } from '@appwrite.io/console'; diff --git a/src/routes/console/project-[project]/messaging/providers/wizard/provider.svelte b/src/routes/console/project-[project]/messaging/providers/wizard/provider.svelte index cb243b4362..61f1e3ad50 100644 --- a/src/routes/console/project-[project]/messaging/providers/wizard/provider.svelte +++ b/src/routes/console/project-[project]/messaging/providers/wizard/provider.svelte @@ -1,6 +1,6 @@ @@ -28,7 +51,7 @@ placeholder={input.placeholder} required={!input.optional} isPopoverDefined={input.popover !== undefined} - bind:value={$providerParams[$provider][input.name]}> + bind:value={params[input.name]}> @@ -41,7 +64,7 @@ required={!input.optional} showPasswordButton isPopoverDefined={input.popover !== undefined} - bind:value={$providerParams[$provider][input.name]}> + bind:value={params[input.name]}> @@ -53,7 +76,7 @@ placeholder={input.placeholder} required={!input.optional} isPopoverDefined={input.popover !== undefined} - bind:value={$providerParams[$provider][input.name]}> + bind:value={params[input.name]}> @@ -65,7 +88,7 @@ placeholder={input.placeholder} required={!input.optional} isPopoverDefined={input.popover !== undefined} - bind:value={$providerParams[$provider][input.name]}> + bind:value={params[input.name]}> @@ -77,7 +100,7 @@ placeholder={input.placeholder} required={!input.optional} isPopoverDefined={input.popover !== undefined} - bind:value={$providerParams[$provider][input.name]}> + bind:value={params[input.name]}> @@ -94,10 +117,7 @@ {:else if input.type === 'switch'} - + {input.description} @@ -108,7 +128,7 @@ id={input.name} options={input.options} required={!input.optional} - bind:value={$providerParams[$provider][input.name]} /> + bind:value={params[input.name]} /> {/if} {/each} diff --git a/src/routes/console/project-[project]/messaging/providers/store.ts b/src/routes/console/project-[project]/messaging/providers/store.ts index e3a62e9152..b0cdc05fc6 100644 --- a/src/routes/console/project-[project]/messaging/providers/store.ts +++ b/src/routes/console/project-[project]/messaging/providers/store.ts @@ -11,6 +11,19 @@ export const columns = writable([ { id: 'enabled', title: 'Status', type: 'boolean', show: true } ]); +export type ProviderInput = { + label: string; + name: string; + type: 'text' | 'password' | 'phone' | 'email' | 'domain' | 'file' | 'switch' | 'select'; + placeholder?: string; + description?: string; + popover?: string[]; + popoverImage?: { src: { light: string; dark: string }; alt: string }; + allowedFileExtensions?: string[]; + optional?: boolean; + options?: { label: string; value: string | number | boolean }[]; +}; + type ProvidersMap = { [key in MessagingProviderType]: { name: string; @@ -22,26 +35,7 @@ type ProvidersMap = { classIcon?: string; title: string; description: string; - configure: { - label: string; - name: string; - type: - | 'text' - | 'password' - | 'phone' - | 'email' - | 'domain' - | 'file' - | 'switch' - | 'select'; - placeholder?: string; - description?: string; - popover?: string[]; - popoverImage?: { src: { light: string; dark: string }; alt: string }; - allowedFileExtensions?: string[]; - optional?: boolean; - options?: { label: string; value: string | number | boolean }[]; - }[]; + configure: ProviderInput[]; }; }; }; @@ -628,29 +622,3 @@ export type APNSProviderParams = ProviderParams & { export type MQTTProviderParams = ProviderParams & { serverKey: string; }; - -export const providerType = writable(null); -export const provider = writable(null); -export const providerParams = writable<{ - twilio: Partial; - msg91: Partial; - telesign: Partial; - textmagic: Partial; - vonage: Partial; - mailgun: Partial; - sendgrid: Partial; - smtp: Partial; - fcm: Partial; - apns: Partial; -}>({ - twilio: null, - msg91: null, - telesign: null, - textmagic: null, - vonage: null, - mailgun: null, - sendgrid: null, - smtp: null, - fcm: null, - apns: null -}); diff --git a/src/routes/console/project-[project]/messaging/providers/wizard/provider.svelte b/src/routes/console/project-[project]/messaging/providers/wizard/provider.svelte index 61f1e3ad50..e2ac9c4dcf 100644 --- a/src/routes/console/project-[project]/messaging/providers/wizard/provider.svelte +++ b/src/routes/console/project-[project]/messaging/providers/wizard/provider.svelte @@ -1,6 +1,6 @@ {#if icon === ''} @@ -89,12 +94,12 @@ {displayName} + alt={name || displayName} /> {/if} {/if} - {displayName} + {name || displayName} {/if} diff --git a/src/routes/console/project-[project]/messaging/providers/provider-[provider]/+page.svelte b/src/routes/console/project-[project]/messaging/providers/provider-[provider]/+page.svelte index 2262f62ac1..e6e4f4a559 100644 --- a/src/routes/console/project-[project]/messaging/providers/provider-[provider]/+page.svelte +++ b/src/routes/console/project-[project]/messaging/providers/provider-[provider]/+page.svelte @@ -2,11 +2,158 @@ import { Container } from '$lib/layout'; import DangerZone from './dangerZone.svelte'; import UpdateName from './updateName.svelte'; + import UpdateSettings from './updateSettings.svelte'; import UpdateStatus from './updateStatus.svelte'; + import { isValueOfStringEnum } from '$lib/helpers/types'; + import { MessagingProviderType } from '@appwrite.io/console'; + import { Providers } from '../../provider.svelte'; + import { providers } from '../store'; + import { provider as providerData } from './store'; + + let providerType: MessagingProviderType; + if (isValueOfStringEnum(MessagingProviderType, $providerData.type)) { + providerType = $providerData.type; + } + + let provider: Providers; + if (isValueOfStringEnum(Providers, $providerData.provider)) { + provider = $providerData.provider; + } + + let params: object = {}; + + $: switch (provider) { + case Providers.Twilio: + params = { + providerId: $providerData.$id, + name: $providerData.name, + enabled: $providerData.enabled, + accountSid: $providerData.credentials['accountSid'], + authToken: $providerData.credentials['authToken'], + from: $providerData.options['from'] + }; + break; + case Providers.Msg91: + params = { + providerId: $providerData.$id, + name: $providerData.name, + enabled: $providerData.enabled, + from: $providerData.options['from'], + senderId: $providerData.credentials['senderId'], + authKey: $providerData.credentials['authKey'] + }; + break; + case Providers.Telesign: + params = { + providerId: $providerData.$id, + name: $providerData.name, + enabled: $providerData.enabled, + username: $providerData.credentials['username'], + password: $providerData.credentials['password'], + from: $providerData.options['from'] + }; + break; + case Providers.Textmagic: + params = { + providerId: $providerData.$id, + name: $providerData.name, + enabled: $providerData.enabled, + username: $providerData.credentials['username'], + apiKey: $providerData.credentials['apiKey'], + from: $providerData.options['from'] + }; + break; + case Providers.Vonage: + params = { + providerId: $providerData.$id, + name: $providerData.name, + enabled: $providerData.enabled, + apiKey: $providerData.credentials['apiKey'], + apiSecret: $providerData.credentials['apiSecret'], + from: $providerData.options['from'] + }; + break; + case Providers.Mailgun: + params = { + providerId: $providerData.$id, + name: $providerData.name, + enabled: $providerData.enabled, + isEuRegion: false, + fromEmail: $providerData.options['fromEmail'], + fromName: $providerData.options['fromName'], + replyToEmail: $providerData.options['replyToEmail'], + replyToName: $providerData.options['replyToName'], + apiKey: $providerData.credentials['apiKey'], + domain: $providerData.credentials['domain'] + }; + break; + case Providers.Sendgrid: + params = { + providerId: $providerData.$id, + name: $providerData.name, + enabled: $providerData.enabled, + apiKey: $providerData.credentials['apiKey'], + fromEmail: $providerData.options['fromEmail'], + fromName: $providerData.options['fromName'], + replyToEmail: $providerData.options['replyToEmail'], + replyToName: $providerData.options['replyToName'] + }; + break; + case Providers.SMTP: + params = { + providerId: $providerData.$id, + name: $providerData.name, + enabled: $providerData.enabled, + host: $providerData.credentials['host'], + port: $providerData.credentials['port'], + username: $providerData.credentials['username'], + password: $providerData.credentials['password'], + fromName: $providerData.options['fromName'], + fromEmail: $providerData.options['fromEmail'], + replyToName: $providerData.options['replyToName'], + replyToEmail: $providerData.options['replyToEmail'], + encryption: $providerData.options['encryption'], + autoTLS: $providerData.options['autoTLS'], + mailer: $providerData.options['mailer'] + }; + break; + case Providers.FCM: + params = { + providerId: $providerData.$id, + name: $providerData.name, + enabled: $providerData.enabled + }; + if ('serviceAccountJSON' in $providerData.credentials) { + const serviceAccountJSON = $providerData.credentials['serviceAccountJSON']; + if (typeof serviceAccountJSON === 'string') { + params['serviceAccountJSON'] = serviceAccountJSON; + } else if (serviceAccountJSON instanceof Object) { + params['serviceAccountJSON'] = JSON.stringify(serviceAccountJSON); + } + } + break; + case Providers.APNS: + params = { + providerId: $providerData.$id, + name: $providerData.name, + enabled: $providerData.enabled, + authKey: $providerData.credentials['authKey'], + authKeyId: $providerData.credentials['authKeyId'], + teamId: $providerData.credentials['teamId'], + bundleId: $providerData.credentials['bundleId'] + }; + break; + } + diff --git a/src/routes/console/project-[project]/messaging/providers/provider-[provider]/store.ts b/src/routes/console/project-[project]/messaging/providers/provider-[provider]/store.ts index 441524d170..d4211320e9 100644 --- a/src/routes/console/project-[project]/messaging/providers/provider-[provider]/store.ts +++ b/src/routes/console/project-[project]/messaging/providers/provider-[provider]/store.ts @@ -2,8 +2,4 @@ import { derived } from 'svelte/store'; import { page } from '$app/stores'; import type { Models } from '@appwrite.io/console'; -export const provider = derived( - page, - // TODO: Set actual type - ($page) => $page.data.provider as Models.Provider -); +export const provider = derived(page, ($page) => $page.data.provider as Models.Provider); diff --git a/src/routes/console/project-[project]/messaging/providers/provider-[provider]/updateSettings.svelte b/src/routes/console/project-[project]/messaging/providers/provider-[provider]/updateSettings.svelte new file mode 100644 index 0000000000..66a39bcbb3 --- /dev/null +++ b/src/routes/console/project-[project]/messaging/providers/provider-[provider]/updateSettings.svelte @@ -0,0 +1,233 @@ + + +
+ +
+ Settings +
+

+ Configure the settings to to send {message}, or to complete the + provider settings. +

+ + + + + +
+ +
+ + +
+ + diff --git a/src/routes/console/project-[project]/messaging/providers/provider-[provider]/updateStatus.svelte b/src/routes/console/project-[project]/messaging/providers/provider-[provider]/updateStatus.svelte index 78d81d5d93..27d1791543 100644 --- a/src/routes/console/project-[project]/messaging/providers/provider-[provider]/updateStatus.svelte +++ b/src/routes/console/project-[project]/messaging/providers/provider-[provider]/updateStatus.svelte @@ -5,16 +5,11 @@ import { Dependencies } from '$lib/constants'; import { Button, InputSwitch } from '$lib/elements/forms'; import { toLocaleDateTime } from '$lib/helpers/date'; - import { isValueOfStringEnum } from '$lib/helpers/types'; import { addNotification } from '$lib/stores/notifications'; import { sdk } from '$lib/stores/sdk'; - import { wizard } from '$lib/stores/wizard'; import { onMount } from 'svelte'; - import { MessagingProviderType } from '@appwrite.io/console'; import Provider, { Providers } from '../../provider.svelte'; import ProviderType from '../../providerType.svelte'; - import Update from '../update.svelte'; - import { providerParams, providerType, provider } from '../store'; import { provider as providerData } from './store'; let enabled: boolean = null; @@ -23,144 +18,6 @@ enabled ??= $providerData.enabled; }); - function configure() { - if (!isValueOfStringEnum(MessagingProviderType, $providerData.type)) { - throw new Error(`Invalid provider type: ${$providerData.type}`); - } - - if (!isValueOfStringEnum(Providers, $providerData.provider)) { - throw new Error(`Invalid provider: ${$providerData.provider}`); - } - $providerType = $providerData.type; - $provider = $providerData.provider; - - switch ($provider) { - case Providers.Twilio: - $providerParams[$provider] = { - providerId: $providerData.$id, - name: $providerData.name, - enabled: $providerData.enabled, - accountSid: $providerData.credentials['accountSid'], - authToken: $providerData.credentials['authToken'], - from: $providerData.options['from'] - }; - break; - case Providers.Msg91: - $providerParams[$provider] = { - providerId: $providerData.$id, - name: $providerData.name, - enabled: $providerData.enabled, - from: $providerData.options['from'], - senderId: $providerData.credentials['senderId'], - authKey: $providerData.credentials['authKey'] - }; - break; - case Providers.Telesign: - $providerParams[$provider] = { - providerId: $providerData.$id, - name: $providerData.name, - enabled: $providerData.enabled, - username: $providerData.credentials['username'], - password: $providerData.credentials['password'], - from: $providerData.options['from'] - }; - break; - case Providers.Textmagic: - $providerParams[$provider] = { - providerId: $providerData.$id, - name: $providerData.name, - enabled: $providerData.enabled, - username: $providerData.credentials['username'], - apiKey: $providerData.credentials['apiKey'], - from: $providerData.options['from'] - }; - break; - case Providers.Vonage: - $providerParams[$provider] = { - providerId: $providerData.$id, - name: $providerData.name, - enabled: $providerData.enabled, - apiKey: $providerData.credentials['apiKey'], - apiSecret: $providerData.credentials['apiSecret'], - from: $providerData.options['from'] - }; - break; - case Providers.Mailgun: - $providerParams[$provider] = { - providerId: $providerData.$id, - name: $providerData.name, - enabled: $providerData.enabled, - isEuRegion: false, - fromEmail: $providerData.options['fromEmail'], - fromName: $providerData.options['fromName'], - replyToEmail: $providerData.options['replyToEmail'], - replyToName: $providerData.options['replyToName'], - apiKey: $providerData.credentials['apiKey'], - domain: $providerData.credentials['domain'] - }; - break; - case Providers.Sendgrid: - $providerParams[$provider] = { - providerId: $providerData.$id, - name: $providerData.name, - enabled: $providerData.enabled, - apiKey: $providerData.credentials['apiKey'], - fromEmail: $providerData.options['fromEmail'], - fromName: $providerData.options['fromName'], - replyToEmail: $providerData.options['replyToEmail'], - replyToName: $providerData.options['replyToName'] - }; - break; - case Providers.SMTP: - $providerParams[$provider] = { - providerId: $providerData.$id, - name: $providerData.name, - enabled: $providerData.enabled, - host: $providerData.credentials['host'], - port: $providerData.credentials['port'], - username: $providerData.credentials['username'], - password: $providerData.credentials['password'], - fromName: $providerData.options['fromName'], - fromEmail: $providerData.options['fromEmail'], - replyToName: $providerData.options['replyToName'], - replyToEmail: $providerData.options['replyToEmail'], - encryption: $providerData.options['encryption'], - autoTLS: $providerData.options['autoTLS'], - mailer: $providerData.options['mailer'] - }; - break; - case Providers.FCM: - $providerParams[$provider] = { - providerId: $providerData.$id, - name: $providerData.name, - enabled: $providerData.enabled - }; - if ('serviceAccountJSON' in $providerData.credentials) { - const serviceAccountJSON = $providerData.credentials['serviceAccountJSON']; - if (typeof serviceAccountJSON === 'string') { - $providerParams[$provider].serviceAccountJSON = serviceAccountJSON; - } else if (serviceAccountJSON instanceof Object) { - $providerParams[$provider].serviceAccountJSON = - JSON.stringify(serviceAccountJSON); - } - } - break; - case Providers.APNS: - $providerParams[$provider] = { - providerId: $providerData.$id, - name: $providerData.name, - enabled: $providerData.enabled, - authKey: $providerData.credentials['authKey'], - authKeyId: $providerData.credentials['authKeyId'], - teamId: $providerData.credentials['teamId'], - bundleId: $providerData.credentials['bundleId'] - }; - break; - } - - wizard.start(Update); - } - async function updateStatus() { try { let response = { $id: '', name: '' }; @@ -292,7 +149,6 @@
-
diff --git a/src/routes/console/project-[project]/messaging/providers/update.svelte b/src/routes/console/project-[project]/messaging/providers/update.svelte deleted file mode 100644 index f206062144..0000000000 --- a/src/routes/console/project-[project]/messaging/providers/update.svelte +++ /dev/null @@ -1,163 +0,0 @@ - - -