From a948cb05285e5fb994c3e40c571201919c476737 Mon Sep 17 00:00:00 2001 From: Damodar Lohani Date: Mon, 10 Apr 2023 07:21:37 +0545 Subject: [PATCH 01/36] smtp update --- src/lib/actions/analytics.ts | 1 + .../project-[project]/settings/header.svelte | 5 + .../settings/smtp/+page.svelte | 121 ++++++++++++++++++ 3 files changed, 127 insertions(+) create mode 100644 src/routes/console/project-[project]/settings/smtp/+page.svelte diff --git a/src/lib/actions/analytics.ts b/src/lib/actions/analytics.ts index 04d74c94aa..612a46096e 100644 --- a/src/lib/actions/analytics.ts +++ b/src/lib/actions/analytics.ts @@ -132,6 +132,7 @@ export enum Submit { ProjectDelete = 'submit_project_delete', ProjectUpdateName = 'submit_project_update_name', ProjectService = 'submit_project_service', + ProjectUpdateSMTP = 'submit_project_update_smtp', MemberCreate = 'submit_member_create', MemberDelete = 'submit_member_delete', MembershipUpdateStatus = 'submit_membership_update_status', diff --git a/src/routes/console/project-[project]/settings/header.svelte b/src/routes/console/project-[project]/settings/header.svelte index b6c51f014b..514b720208 100644 --- a/src/routes/console/project-[project]/settings/header.svelte +++ b/src/routes/console/project-[project]/settings/header.svelte @@ -21,6 +21,11 @@ href: `${path}/webhooks`, title: 'Webhooks', event: 'webhooks' + }, + { + href: `${path}/smtp`, + title: 'SMTP Settings', + event: 'smtp' } ]; diff --git a/src/routes/console/project-[project]/settings/smtp/+page.svelte b/src/routes/console/project-[project]/settings/smtp/+page.svelte new file mode 100644 index 0000000000..e95f7d0bc2 --- /dev/null +++ b/src/routes/console/project-[project]/settings/smtp/+page.svelte @@ -0,0 +1,121 @@ + + + +
+ + SMTP Server +

+ You can customize the email service by providing your own SMTP server. View your + email templates here +

+ + + +

+ Enabling this option allows customizing email templates and prevents emails + from being labeled as spam. +

+ + {#if enabled} + + + + + + {/if} + + + + + + + +
+ From 2116a7f67eb12ddbd0b704011acaf276eb1d3219 Mon Sep 17 00:00:00 2001 From: Damodar Lohani Date: Mon, 10 Apr 2023 07:40:33 +0545 Subject: [PATCH 02/36] auth templates component --- .../project-[project]/auth/header.svelte | 6 ++++ .../auth/templates/+page.svelte | 29 +++++++++++++++++++ .../settings/smtp/+page.svelte | 5 +++- 3 files changed, 39 insertions(+), 1 deletion(-) create mode 100644 src/routes/console/project-[project]/auth/templates/+page.svelte diff --git a/src/routes/console/project-[project]/auth/header.svelte b/src/routes/console/project-[project]/auth/header.svelte index 1e43c859b4..8b2bd602d1 100644 --- a/src/routes/console/project-[project]/auth/header.svelte +++ b/src/routes/console/project-[project]/auth/header.svelte @@ -19,6 +19,12 @@ hasChildren: true, event: 'teams' }, + { + href: `${path}/templates`, + title: 'Templates', + hasChildren: false, + event: 'templates' + }, { href: `${path}/usage`, title: 'Usage', diff --git a/src/routes/console/project-[project]/auth/templates/+page.svelte b/src/routes/console/project-[project]/auth/templates/+page.svelte new file mode 100644 index 0000000000..d8cf08d0b7 --- /dev/null +++ b/src/routes/console/project-[project]/auth/templates/+page.svelte @@ -0,0 +1,29 @@ + + + + {#if !$project.smtpEnabled} + { + goto(base + '/console/project-' + $project.$id + '/settings/smtp'); + } + } + ]}> + + Custom SMTP server is required for customizing emails + + Configure a custom SMTP server to enable custom email templates and prevent emails from being + labeled as spam. + + {/if} + diff --git a/src/routes/console/project-[project]/settings/smtp/+page.svelte b/src/routes/console/project-[project]/settings/smtp/+page.svelte index e95f7d0bc2..b203b8c097 100644 --- a/src/routes/console/project-[project]/settings/smtp/+page.svelte +++ b/src/routes/console/project-[project]/settings/smtp/+page.svelte @@ -11,6 +11,7 @@ import { addNotification } from '$lib/stores/notifications'; import { Submit, trackError, trackEvent } from '$lib/actions/analytics'; import InputNumber from '$lib/elements/forms/inputNumber.svelte'; + import { base } from '$app/paths'; let enabled = false; let sender: string; @@ -68,7 +69,9 @@ SMTP Server

You can customize the email service by providing your own SMTP server. View your - email templates here + email templates here

From e24bd15ebb844fcef93a03067696405584609610 Mon Sep 17 00:00:00 2001 From: Damodar Lohani Date: Thu, 13 Apr 2023 11:01:53 +0545 Subject: [PATCH 03/36] basic flow setup --- .../auth/templates/+page.svelte | 126 +++++++++++++++++- .../auth/templates/emailTemplate.svelte | 56 ++++++++ .../auth/templates/localeOptions.svelte | 14 ++ .../auth/templates/smsTemplate.svelte | 13 ++ .../settings/smtp/+page.svelte | 3 +- 5 files changed, 208 insertions(+), 4 deletions(-) create mode 100644 src/routes/console/project-[project]/auth/templates/emailTemplate.svelte create mode 100644 src/routes/console/project-[project]/auth/templates/localeOptions.svelte create mode 100644 src/routes/console/project-[project]/auth/templates/smsTemplate.svelte diff --git a/src/routes/console/project-[project]/auth/templates/+page.svelte b/src/routes/console/project-[project]/auth/templates/+page.svelte index d8cf08d0b7..cc16b21e4b 100644 --- a/src/routes/console/project-[project]/auth/templates/+page.svelte +++ b/src/routes/console/project-[project]/auth/templates/+page.svelte @@ -1,16 +1,71 @@ {#if !$project.smtpEnabled} {/if} + + + Email Templates +

+ Use templates to send and process account management emails. + Learn more about Email templates + . +

+ + + + + Verification +

+ Send a verification email to users that sign in with their email and + password. +

+ saveEmailTemplate('verification', data)} /> + + + Magic URL + saveEmailTemplate('verification', data)} /> + + + Reset Password + + + + Invite User + + + + + + + + SMS Templates +

+ Use templates to send and process account management mobile messages. + Learn more about SMS templates + . +

+ + + + + Verification +

+ Send a verification SMS to users that sign in with their phone +

+ + + + Login + + + + + diff --git a/src/routes/console/project-[project]/auth/templates/emailTemplate.svelte b/src/routes/console/project-[project]/auth/templates/emailTemplate.svelte new file mode 100644 index 0000000000..f2e143e772 --- /dev/null +++ b/src/routes/console/project-[project]/auth/templates/emailTemplate.svelte @@ -0,0 +1,56 @@ + + + +
+ + + + + + + + + +
+ diff --git a/src/routes/console/project-[project]/auth/templates/localeOptions.svelte b/src/routes/console/project-[project]/auth/templates/localeOptions.svelte new file mode 100644 index 0000000000..66f1b7c90d --- /dev/null +++ b/src/routes/console/project-[project]/auth/templates/localeOptions.svelte @@ -0,0 +1,14 @@ + + + diff --git a/src/routes/console/project-[project]/auth/templates/smsTemplate.svelte b/src/routes/console/project-[project]/auth/templates/smsTemplate.svelte new file mode 100644 index 0000000000..688bbae44e --- /dev/null +++ b/src/routes/console/project-[project]/auth/templates/smsTemplate.svelte @@ -0,0 +1,13 @@ + + + +
+ + + +
+ diff --git a/src/routes/console/project-[project]/settings/smtp/+page.svelte b/src/routes/console/project-[project]/settings/smtp/+page.svelte index b203b8c097..c98f34a839 100644 --- a/src/routes/console/project-[project]/settings/smtp/+page.svelte +++ b/src/routes/console/project-[project]/settings/smtp/+page.svelte @@ -26,6 +26,7 @@ host = $project.smtpHost; port = $project.smtpPort; username = $project.smtpUsername; + password = $project.smtpPassword; }); async function updateSmtp() { @@ -37,7 +38,7 @@ host, port, username, - password: password ? password : $project.smtpPassword + password }; try { await sdk.forConsole.client.call( From ea4fee20d5ee03280d1ee89a6f9b05e159b2eb8b Mon Sep 17 00:00:00 2001 From: Damodar Lohani Date: Mon, 17 Apr 2023 14:02:11 +0545 Subject: [PATCH 04/36] basic working version of email templates --- .../auth/templates/+page.svelte | 64 +++++++++++++++---- .../project-[project]/auth/templates/+page.ts | 17 +++++ .../auth/templates/emailInviteTemplate.svelte | 38 +++++++++++ .../templates/emailMagicUrlTemplate.svelte | 37 +++++++++++ .../templates/emailRecoveryTemplate.svelte | 38 +++++++++++ .../auth/templates/emailTemplate.svelte | 57 ++++++----------- .../emailVerificationTemplate.svelte | 38 +++++++++++ .../auth/templates/localeOptions.svelte | 13 ++-- 8 files changed, 245 insertions(+), 57 deletions(-) create mode 100644 src/routes/console/project-[project]/auth/templates/+page.ts create mode 100644 src/routes/console/project-[project]/auth/templates/emailInviteTemplate.svelte create mode 100644 src/routes/console/project-[project]/auth/templates/emailMagicUrlTemplate.svelte create mode 100644 src/routes/console/project-[project]/auth/templates/emailRecoveryTemplate.svelte create mode 100644 src/routes/console/project-[project]/auth/templates/emailVerificationTemplate.svelte diff --git a/src/routes/console/project-[project]/auth/templates/+page.svelte b/src/routes/console/project-[project]/auth/templates/+page.svelte index cc16b21e4b..1beae6bcff 100644 --- a/src/routes/console/project-[project]/auth/templates/+page.svelte +++ b/src/routes/console/project-[project]/auth/templates/+page.svelte @@ -6,22 +6,43 @@ import { Container } from '$lib/layout'; import { sdk } from '$lib/stores/sdk'; import { project } from '../../store'; - import EmailTemplate from './emailTemplate.svelte'; - import SmsTemplate from './smsTemplate.svelte'; import { addNotification } from '$lib/stores/notifications'; import { onMount } from 'svelte'; + import type { PageData } from './$types'; + import EmailVerificationTemplate from './emailVerificationTemplate.svelte'; + import EmailMagicUrlTemplate from './emailMagicUrlTemplate.svelte'; + import EmailRecoveryTemplate from './emailRecoveryTemplate.svelte'; + import EmailInviteTemplate from './emailInviteTemplate.svelte'; + export let data: PageData; const projectId = $page.params.project; + interface EmailTemplate { + senderName: string; + senderEmail: string; + locale: string; + subject: string; + message: string; + } + let emailTemplates: + | { + verification: EmailTemplate; + magicSession: EmailTemplate; + recovery: EmailTemplate; + invitation: EmailTemplate; + } + | any = {}; - let template: any; onMount(() => { - loadEmailTemplate('verification', 'en_us'); + loadEmailTemplate('verification', 'en-us'); + loadEmailTemplate('magicSession', 'en-us'); + loadEmailTemplate('recovery', 'en-us'); + loadEmailTemplate('invitation', 'en-us'); }); async function loadEmailTemplate(type: string, locale: string) { const path = '/projects/' + projectId + '/templates/email/' + type + '/' + locale; try { - template = await sdk.forConsole.client.call( + emailTemplates[type] = await sdk.forConsole.client.call( 'GET', new URL(sdk.forConsole.client.config.endpoint + path) ); @@ -34,10 +55,11 @@ } async function saveEmailTemplate(type: string, data: any) { + console.log(data); const path = '/projects/' + projectId + '/templates/email/' + type + '/' + data.locale; try { - template = await sdk.forConsole.client.call( + emailTemplates[type] = await sdk.forConsole.client.call( 'PATCH', new URL(sdk.forConsole.client.config.endpoint + path), { 'content-type': 'application/json' }, @@ -100,21 +122,35 @@ Send a verification email to users that sign in with their email and password.

- saveEmailTemplate('verification', data)} /> + Magic URL - saveEmailTemplate('verification', data)} /> + Reset Password - + Invite User - + @@ -137,11 +173,11 @@

Send a verification SMS to users that sign in with their phone

- + Login - + diff --git a/src/routes/console/project-[project]/auth/templates/+page.ts b/src/routes/console/project-[project]/auth/templates/+page.ts new file mode 100644 index 0000000000..ba12ccdb9a --- /dev/null +++ b/src/routes/console/project-[project]/auth/templates/+page.ts @@ -0,0 +1,17 @@ +import { sdk } from '$lib/stores/sdk'; +import type { PageLoad } from './$types'; + +export const load: PageLoad = async () => { + let codes = { localeCodes: [] }; + try { + codes = await sdk.forProject.client.call( + 'GET', + new URL(sdk.forProject.client.config.endpoint + '/locale/codes') + ); + } catch (e) { + console.log(e); + } + return { + localeCodes: codes.localeCodes + }; +}; diff --git a/src/routes/console/project-[project]/auth/templates/emailInviteTemplate.svelte b/src/routes/console/project-[project]/auth/templates/emailInviteTemplate.svelte new file mode 100644 index 0000000000..29f6e45bd0 --- /dev/null +++ b/src/routes/console/project-[project]/auth/templates/emailInviteTemplate.svelte @@ -0,0 +1,38 @@ + + + + + saveEmailTemplate('invitation', { ...data, locale })} /> + diff --git a/src/routes/console/project-[project]/auth/templates/emailMagicUrlTemplate.svelte b/src/routes/console/project-[project]/auth/templates/emailMagicUrlTemplate.svelte new file mode 100644 index 0000000000..62fc237458 --- /dev/null +++ b/src/routes/console/project-[project]/auth/templates/emailMagicUrlTemplate.svelte @@ -0,0 +1,37 @@ + + + + + saveEmailTemplate('magicSession', { ...data, locale })} /> + diff --git a/src/routes/console/project-[project]/auth/templates/emailRecoveryTemplate.svelte b/src/routes/console/project-[project]/auth/templates/emailRecoveryTemplate.svelte new file mode 100644 index 0000000000..993a1a51c7 --- /dev/null +++ b/src/routes/console/project-[project]/auth/templates/emailRecoveryTemplate.svelte @@ -0,0 +1,38 @@ + + + + + saveEmailTemplate('recovery', { ...data, locale })} /> + diff --git a/src/routes/console/project-[project]/auth/templates/emailTemplate.svelte b/src/routes/console/project-[project]/auth/templates/emailTemplate.svelte index f2e143e772..9fd9b2f4f1 100644 --- a/src/routes/console/project-[project]/auth/templates/emailTemplate.svelte +++ b/src/routes/console/project-[project]/auth/templates/emailTemplate.svelte @@ -1,5 +1,4 @@ - -
- - - - - - - - - -
- +
+ + + + + + + + +
diff --git a/src/routes/console/project-[project]/auth/templates/emailVerificationTemplate.svelte b/src/routes/console/project-[project]/auth/templates/emailVerificationTemplate.svelte new file mode 100644 index 0000000000..b9384afc93 --- /dev/null +++ b/src/routes/console/project-[project]/auth/templates/emailVerificationTemplate.svelte @@ -0,0 +1,38 @@ + + + + + saveEmailTemplate('verification', { ...data, locale })} /> + diff --git a/src/routes/console/project-[project]/auth/templates/localeOptions.svelte b/src/routes/console/project-[project]/auth/templates/localeOptions.svelte index 66f1b7c90d..0a5395aa9e 100644 --- a/src/routes/console/project-[project]/auth/templates/localeOptions.svelte +++ b/src/routes/console/project-[project]/auth/templates/localeOptions.svelte @@ -1,14 +1,17 @@ ({ + label: code.name, + value: code.code + })) ]} /> From 8b52804241615b7ad4d6dc941d5fd6a1aeafd213 Mon Sep 17 00:00:00 2001 From: Arman Date: Mon, 17 Apr 2023 16:18:56 +0200 Subject: [PATCH 05/36] feat: add inputSearchSelect, add modal on textareaclick, small fixes --- .../elements/forms/inputSelectSearch.svelte | 7 +-- src/lib/elements/forms/inputTextarea.svelte | 3 +- .../auth/templates/+page.svelte | 5 +- .../auth/templates/editMessage.svelte | 60 +++++++++++++++++++ .../auth/templates/emailInviteTemplate.svelte | 4 +- .../templates/emailMagicUrlTemplate.svelte | 4 +- .../templates/emailRecoveryTemplate.svelte | 4 +- .../auth/templates/emailTemplate.svelte | 21 ++++++- .../emailVerificationTemplate.svelte | 9 ++- .../auth/templates/localeOptions.svelte | 43 +++++++++---- 10 files changed, 126 insertions(+), 34 deletions(-) create mode 100644 src/routes/console/project-[project]/auth/templates/editMessage.svelte diff --git a/src/lib/elements/forms/inputSelectSearch.svelte b/src/lib/elements/forms/inputSelectSearch.svelte index 50c435a29a..c7fa41ba8f 100644 --- a/src/lib/elements/forms/inputSelectSearch.svelte +++ b/src/lib/elements/forms/inputSelectSearch.svelte @@ -22,7 +22,7 @@ export let disabled = false; export let autofocus = false; export let interactiveOutput = false; - // Input value + export let stretch = true; export let search = ''; // The actual selected value export let value: Option['value']; @@ -82,9 +82,8 @@ value = option.value; search = option.label; // It's not working without this line. - !$$slots.output && (element.value = search); + $$slots.output ? (search = '') : (element.value = search); hasFocus = false; - search = ''; dispatch('select', option); } @@ -99,7 +98,7 @@ $: showClearBtn = (hasFocus && search) || value; -
  • +
  • -
    +