Merge pull request #773 from appwrite/feat-messaging-smtp-provider

Add SMTP Provider
This commit is contained in:
Torsten Dittmann
2024-02-08 09:35:53 +01:00
committed by GitHub
9 changed files with 241 additions and 17 deletions
+8 -7
View File
@@ -60,13 +60,14 @@
{#if icon}
<span class={`icon-${icon} u-margin-inline-start-auto`} aria-hidden="true" />
{/if}
{/if}
{#if imageIcon}
<img
class="u-margin-inline-start-auto"
style:--p-text-size="1.25rem"
src={`${base}/icons/${$app.themeInUse}/color/${imageIcon}.svg`}
alt={imageIcon} />
{#if imageIcon}
<img
class="u-margin-inline-start-auto"
style:max-inline-size="1.25rem"
style:max-block-size="1.25rem"
src={`${base}/icons/${$app.themeInUse}/color/${imageIcon}.svg`}
alt={imageIcon} />
{/if}
{/if}
</div>
</label>
@@ -7,6 +7,7 @@
Vonage = 'vonage',
Mailgun = 'mailgun',
Sendgrid = 'sendgrid',
SMTP = 'smtp',
FCM = 'fcm',
APNS = 'apns'
}
@@ -49,6 +50,10 @@
case Providers.Mailgun:
icon = 'mailgun';
break;
case Providers.SMTP:
icon = 'smtp';
displayName = name || 'SMTP';
break;
case Providers.Twilio:
icon = 'twilio';
break;
@@ -78,10 +83,14 @@
class="avatar"
class:is-size-large={size === 'l'}
class:is-size-small={size === 's'}>
<img
style:--p-text-size={textSize}
src={`${base}/icons/${$app.themeInUse}/color/${icon}.svg`}
alt={displayName} />
{#if provider === Providers.SMTP}
<span style:--p-text-size={textSize} class="icon-mail" />
{:else}
<img
style:--p-text-size={textSize}
src={`${base}/icons/${$app.themeInUse}/color/${icon}.svg`}
alt={displayName} />
{/if}
</div>
{/if}
<slot>
@@ -96,6 +96,24 @@
$providerParams[$provider].enabled
);
break;
case Providers.SMTP:
response = await sdk.forProject.messaging.createSMTPProvider(
providerId,
$providerParams[$provider].name,
$providerParams[$provider].host,
$providerParams[$provider].port || undefined,
$providerParams[$provider].username || undefined,
$providerParams[$provider].password || undefined,
$providerParams[$provider].encryption,
$providerParams[$provider].autoTLS,
$providerParams[$provider].mailer || undefined,
$providerParams[$provider].fromName || undefined,
$providerParams[$provider].fromEmail,
$providerParams[$provider].replyToName || undefined,
$providerParams[$provider].replyToEmail || undefined,
$providerParams[$provider].enabled
);
break;
case Providers.FCM:
response = await sdk.forProject.messaging.createFCMProvider(
providerId,
@@ -105,6 +105,24 @@
fromEmail: $provider.options['from']
};
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']
};
break;
case Providers.FCM:
$providerParams[$wizardProvider] = {
providerId: $provider.$id,
@@ -186,6 +204,23 @@
enabled
);
break;
case Providers.SMTP:
response = await sdk.forProject.messaging.updateSMTPProvider(
providerId,
undefined,
undefined,
undefined,
undefined,
undefined,
undefined,
undefined,
undefined,
undefined,
undefined,
undefined,
enabled
);
break;
case Providers.FCM:
response = await sdk.forProject.messaging.updateFCMProvider(
providerId,
@@ -1,7 +1,7 @@
import type { Column } from '$lib/helpers/types';
import { writable } from 'svelte/store';
import { Providers } from '../provider.svelte';
import { MessagingProviderType } from '@appwrite.io/console';
import { MessagingProviderType, SMTPEncryption } from '@appwrite.io/console';
export const columns = writable<Column[]>([
{ id: '$id', title: 'Provider ID', type: 'string', show: true },
@@ -18,17 +18,20 @@ type ProvidersMap = {
icon: string;
providers: {
[key in Providers]?: {
imageIcon: string;
imageIcon?: string;
classIcon?: string;
title: string;
description: string;
configure: {
label: string;
name: string;
type: 'text' | 'phone' | 'email' | 'domain' | 'file' | 'switch';
type: 'text' | 'phone' | 'email' | 'domain' | 'file' | 'switch' | 'select';
placeholder?: string;
description?: string;
popover?: string[];
allowedFileExtensions?: string[];
optional?: boolean;
options?: { label: string; value: string | number | boolean }[];
}[];
};
};
@@ -184,18 +187,21 @@ export const providers: ProvidersMap = {
label: 'Sender name',
name: 'fromName',
type: 'text',
optional: true,
placeholder: 'Enter name'
},
{
label: 'Reply-to email',
name: 'replyToEmail',
type: 'email',
optional: true,
placeholder: 'Enter email'
},
{
label: 'Reply-to name',
name: 'replyToName',
type: 'text',
optional: true,
placeholder: 'Enter name'
}
]
@@ -226,18 +232,106 @@ export const providers: ProvidersMap = {
label: 'Sender name',
name: 'fromName',
type: 'text',
optional: true,
placeholder: 'Enter name'
},
{
label: 'Reply-to email',
name: 'replyToEmail',
type: 'email',
optional: true,
placeholder: 'Enter email'
},
{
label: 'Reply-to name',
name: 'replyToName',
type: 'text',
optional: true,
placeholder: 'Enter name'
}
]
},
[Providers.SMTP]: {
classIcon: 'mail',
title: 'SMTP',
description: '',
configure: [
{
label: 'Host',
name: 'host',
type: 'text',
placeholder: 'Enter host'
},
{
label: 'Port',
name: 'port',
type: 'text',
optional: true,
placeholder: 'Enter port'
},
{
label: 'Username',
name: 'username',
type: 'text',
optional: true,
placeholder: 'Enter username'
},
{
label: 'Password',
name: 'password',
type: 'text',
optional: true,
placeholder: 'Enter password'
},
{
label: 'Encryption',
name: 'encryption',
type: 'select',
options: [
{ label: 'None', value: SMTPEncryption.None },
{ label: 'SSL', value: SMTPEncryption.Ssl },
{ label: 'TLS', value: SMTPEncryption.Tls }
]
},
{
label: 'Auto TLS',
name: 'autoTLS',
description: 'Automatically uses TLS encryption',
type: 'switch',
optional: true
},
{
label: 'Mailer',
name: 'mailer',
type: 'text',
optional: true,
placeholder: 'Enter mailer'
},
{
label: 'Sender email',
name: 'fromEmail',
type: 'email',
placeholder: 'Enter email'
},
{
label: 'Sender name',
name: 'fromName',
type: 'text',
optional: true,
placeholder: 'Enter name'
},
{
label: 'Reply-to email',
name: 'replyToEmail',
type: 'email',
optional: true,
placeholder: 'Enter email'
},
{
label: 'Reply-to name',
name: 'replyToName',
type: 'text',
optional: true,
placeholder: 'Enter name'
}
]
@@ -95,6 +95,23 @@
$providerParams[$provider].replyToEmail
);
break;
case Providers.SMTP:
response = await sdk.forProject.messaging.updateSMTPProvider(
providerId,
$providerParams[$provider].name,
$providerParams[$provider].host,
$providerParams[$provider].port || undefined,
$providerParams[$provider].username || undefined,
$providerParams[$provider].password || undefined,
$providerParams[$provider].encryption,
$providerParams[$provider].autoTLS,
$providerParams[$provider].fromName || undefined,
$providerParams[$provider].fromEmail,
$providerParams[$provider].replyToName || undefined,
$providerParams[$provider].replyToEmail || undefined,
$providerParams[$provider].enabled
);
break;
case Providers.FCM:
response = await sdk.forProject.messaging.updateFCMProvider(
providerId,
@@ -4,6 +4,7 @@
InputDomain,
InputEmail,
InputFile,
InputSelect,
InputSwitch,
InputText
} from '$lib/elements/forms';
@@ -56,6 +57,7 @@
id={input.name}
label={input.label}
placeholder={input.placeholder}
required={!input.optional}
bind:value={$providerParams[$provider][input.name]}>
<svelte:fragment slot="popover">
{@html input.popover?.join('<br/><br/>')}
@@ -66,6 +68,7 @@
id={input.name}
label={input.label}
placeholder={input.placeholder}
required={!input.optional}
bind:value={$providerParams[$provider][input.name]}>
<svelte:fragment slot="popover">
<p class="body-text-2 u-margin-block-end-16">
@@ -78,6 +81,7 @@
id={input.name}
label={input.label}
placeholder={input.placeholder}
required={!input.optional}
bind:value={$providerParams[$provider][input.name]}>
<svelte:fragment slot="popover">
<p class="body-text-2 u-margin-block-end-16">
@@ -90,6 +94,7 @@
id={input.name}
label={input.label}
placeholder={input.placeholder}
required={!input.optional}
bind:value={$providerParams[$provider][input.name]}>
<svelte:fragment slot="popover">
<p class="body-text-2 u-margin-block-end-16">
@@ -101,6 +106,7 @@
<InputFile
label={input.label}
allowedFileExtensions={input.allowedFileExtensions}
required={!input.optional}
bind:files={files[input.name]}>
<svelte:fragment slot="popover">
<p class="body-text-2 u-margin-block-end-16">
@@ -112,11 +118,19 @@
<InputSwitch
label={input.label}
id={input.name}
required={!input.optional}
bind:value={$providerParams[$provider][input.name]}>
<svelte:fragment slot="description">
{input.description}
</svelte:fragment>
</InputSwitch>
{:else if input.type === 'select'}
<InputSelect
label={input.label}
id={input.name}
options={input.options}
required={!input.optional}
bind:value={$providerParams[$provider][input.name]} />
{/if}
{/each}
</FormList>
@@ -6,6 +6,7 @@
import { FormList, InputText } from '$lib/elements/forms';
import { Pill } from '$lib/elements';
import { Providers } from '../../provider.svelte';
import { SMTPEncryption } from '@appwrite.io/console';
let name = '';
let showCustomId = false;
@@ -91,6 +92,24 @@
replyToName: ''
};
break;
case Providers.SMTP:
$providerParams[$provider] = {
providerId: id,
name: name,
enabled: true,
host: '',
port: 587,
username: '',
password: '',
autoTLS: true,
encryption: SMTPEncryption.Tls,
mailer: '',
fromEmail: '',
fromName: '',
replyToEmail: '',
replyToName: ''
};
break;
case Providers.FCM:
$providerParams[$provider] = {
providerId: id,
@@ -116,7 +135,7 @@
<WizardStep {beforeSubmit}>
<svelte:fragment slot="title">Provider</svelte:fragment>
<FormList>
<FormList gap={16}>
<InputText
id="name"
label="Name"
@@ -144,7 +163,8 @@
name="provider"
{value}
bind:group={$provider}
imageIcon={option.imageIcon}>
imageIcon={option.imageIcon}
icon={option.classIcon}>
<svelte:fragment slot="title">{option.title}</svelte:fragment>
{#if option.description}
{option.description}
@@ -1,6 +1,6 @@
import { writable } from 'svelte/store';
import type { Providers } from '../../provider.svelte';
import type { MessagingProviderType } from '@appwrite.io/console';
import type { MessagingProviderType, SMTPEncryption } from '@appwrite.io/console';
type ProviderParams = {
providerId: string;
@@ -64,6 +64,20 @@ export type SendgridProviderParams = ProviderParams & {
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
*/
@@ -93,6 +107,7 @@ export const providerParams = writable<{
vonage: Partial<VonageProviderParams>;
mailgun: Partial<MailgunProviderParams>;
sendgrid: Partial<SendgridProviderParams>;
smtp: Partial<SMTPProviderParams>;
fcm: Partial<FCMProviderParams>;
apns: Partial<APNSProviderParams>;
}>({
@@ -103,6 +118,7 @@ export const providerParams = writable<{
vonage: null,
mailgun: null,
sendgrid: null,
smtp: null,
fcm: null,
apns: null
});