basic working version of email templates

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.
                     </p>
-                    <EmailTemplate
-                        bind:template
-                        onSubmit={(data) => saveEmailTemplate('verification', data)} />
+                    <EmailVerificationTemplate
+                        {loadEmailTemplate}
+                        {saveEmailTemplate}
+                        localeCodes={data.localeCodes}
+                        template={emailTemplates?.verification} />
                 </CollapsibleItem>
                 <CollapsibleItem>
                     <svelte:fragment slot="title">Magic URL</svelte:fragment>
-                    <EmailTemplate onSubmit={(data) => saveEmailTemplate('verification', data)} />
+                    <EmailMagicUrlTemplate
+                        {loadEmailTemplate}
+                        {saveEmailTemplate}
+                        localeCodes={data.localeCodes}
+                        template={emailTemplates?.magicSession} />
                 </CollapsibleItem>
                 <CollapsibleItem>
                     <svelte:fragment slot="title">Reset Password</svelte:fragment>
-                    <EmailTemplate onSubmit={saveEmailTemplate} />
+                    <EmailRecoveryTemplate
+                        {loadEmailTemplate}
+                        {saveEmailTemplate}
+                        localeCodes={data.localeCodes}
+                        template={emailTemplates?.recovery} />
                 </CollapsibleItem>
                 <CollapsibleItem>
                     <svelte:fragment slot="title">Invite User</svelte:fragment>
-                    <EmailTemplate onSubmit={saveEmailTemplate} />
+                    <EmailInviteTemplate
+                        {loadEmailTemplate}
+                        {saveEmailTemplate}
+                        localeCodes={data.localeCodes}
+                        template={emailTemplates?.invitation} />
                 </CollapsibleItem>
             </Collapsible>
         </svelte:fragment>
@@ -137,11 +173,11 @@
                     <p class="text">
                         Send a verification SMS to users that sign in with their phone
                     </p>
-                    <SmsTemplate onSubmit={saveEmailTemplate} />
+                    <!-- <SmsTemplate onSubmit={saveEmailTemplate} /> -->
                 </CollapsibleItem>
                 <CollapsibleItem>
                     <svelte:fragment slot="title">Login</svelte:fragment>
-                    <SmsTemplate onSubmit={saveEmailTemplate} />
+                    <!-- <SmsTemplate onSubmit={saveEmailTemplate} /> -->
                 </CollapsibleItem>
             </Collapsible>
         </svelte:fragment>

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
+    };
+};

src/routes/console/project-[project]/auth/templates/emailInviteTemplate.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+    import { afterUpdate } from 'svelte';
+    import EmailTemplate from './emailTemplate.svelte';
+    import LocaleOptions from './localeOptions.svelte';
+    import Box from '$lib/components/box.svelte';
+
+    let locale = 'en-us';
+    export let localeCodes: any[];
+    export let loadEmailTemplate: (type: string, locale: string) => Promise<void> | void;
+    export let saveEmailTemplate: (type: string, data: any) => Promise<void> | void;
+
+    export let template: {
+        senderName: string;
+        senderEmail: string;
+        locale: string;
+        subject: string;
+        message: string;
+    };
+
+    afterUpdate(() => {
+        template = template;
+    });
+
+    function onLocaleChange() {
+        console.log('locale changed, loading template');
+        loadEmailTemplate('invitation', locale);
+    }
+</script>
+
+<Box>
+    <LocaleOptions {localeCodes} on:change={onLocaleChange} bind:value={locale} />
+    <EmailTemplate
+        senderName={template?.senderName}
+        senderEmail={template?.senderEmail}
+        subject={template?.subject}
+        message={template?.message}
+        onSubmit={(data) => saveEmailTemplate('invitation', { ...data, locale })} />
+</Box>

src/routes/console/project-[project]/auth/templates/emailMagicUrlTemplate.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+    import { afterUpdate } from 'svelte';
+    import EmailTemplate from './emailTemplate.svelte';
+    import LocaleOptions from './localeOptions.svelte';
+    import Box from '$lib/components/box.svelte';
+
+    let locale = 'en-us';
+    export let localeCodes: any[];
+    export let loadEmailTemplate: (type: string, locale: string) => Promise<void> | void;
+    export let saveEmailTemplate: (type: string, data: any) => Promise<void> | void;
+
+    export let template: {
+        senderName: string;
+        senderEmail: string;
+        locale: string;
+        subject: string;
+        message: string;
+    };
+
+    afterUpdate(() => {
+        template = template;
+    });
+
+    function onLocaleChange() {
+        loadEmailTemplate('magicSession', locale);
+    }
+</script>
+
+<Box>
+    <LocaleOptions {localeCodes} on:change={onLocaleChange} bind:value={locale} />
+    <EmailTemplate
+        senderName={template?.senderName}
+        senderEmail={template?.senderEmail}
+        subject={template?.subject}
+        message={template?.message}
+        onSubmit={(data) => saveEmailTemplate('magicSession', { ...data, locale })} />
+</Box>

src/routes/console/project-[project]/auth/templates/emailRecoveryTemplate.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+    import { afterUpdate } from 'svelte';
+    import EmailTemplate from './emailTemplate.svelte';
+    import LocaleOptions from './localeOptions.svelte';
+    import Box from '$lib/components/box.svelte';
+
+    let locale = 'en-us';
+    export let localeCodes: any[];
+    export let loadEmailTemplate: (type: string, locale: string) => Promise<void> | void;
+    export let saveEmailTemplate: (type: string, data: any) => Promise<void> | void;
+
+    export let template: {
+        senderName: string;
+        senderEmail: string;
+        locale: string;
+        subject: string;
+        message: string;
+    };
+
+    afterUpdate(() => {
+        template = template;
+    });
+
+    function onLocaleChange() {
+        console.log('locale changed, loading template');
+        loadEmailTemplate('recovery', locale);
+    }
+</script>
+
+<Box>
+    <LocaleOptions {localeCodes} on:change={onLocaleChange} bind:value={locale} />
+    <EmailTemplate
+        senderName={template?.senderName}
+        senderEmail={template?.senderEmail}
+        subject={template?.subject}
+        message={template?.message}
+        onSubmit={(data) => saveEmailTemplate('recovery', { ...data, locale })} />
+</Box>

src/routes/console/project-[project]/auth/templates/emailTemplate.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-    import { Box } from '$lib/components';
     import {
         Button,
         Form,
@@ -8,49 +7,31 @@
         InputText,
         InputTextarea
     } from '$lib/elements/forms';
-    import { afterUpdate } from 'svelte';
-    import LocaleOptions from './localeOptions.svelte';
     export let onSubmit: (data: any) => Promise<void> | void;
 
-    export let template: any = undefined;
-    let senderName: string;
-    let senderEmail: string;
-    let message: string;
-    let subject: string;
-    let locale: string;
+    export let senderName: string;
+    export let senderEmail: string;
+    export let message: string;
+    export let subject: string;
 
-    afterUpdate(() => {
-        senderName = template?.senderName;
-        senderEmail = template?.senderEmail;
-        message = template?.message;
-        subject = template?.subject;
-        locale = template?.locale;
-    });
     function submit() {
         if (onSubmit) {
-            onSubmit({ senderName, senderEmail, message, subject, locale });
+            onSubmit({ senderName, senderEmail, message, subject });
         }
     }
 </script>
 
-<Box>
-    <Form onSubmit={submit}>
-        <FormList>
-            <LocaleOptions />
-            <InputText
-                id="senderName"
-                label="Sender Name"
-                bind:value={senderName}
-                placeholder={'{{project}}'} />
-            <InputEmail
-                bind:value={senderEmail}
-                id="senderEmail"
-                label="Sender Email"
-                placeholder="" />
-            <InputEmail id="replyTo" label="Reply to" placeholder="DoNotReply" />
-            <InputText bind:value={subject} id="subject" label="Subject" />
-            <InputTextarea bind:value={message} id="message" label="Message" />
-            <Button submit>Update</Button>
-        </FormList>
-    </Form>
-</Box>
+<Form onSubmit={submit}>
+    <FormList>
+        <InputText
+            id="senderName"
+            label="Sender Name"
+            bind:value={senderName}
+            placeholder={'{{project}}'} />
+        <InputEmail bind:value={senderEmail} id="senderEmail" label="Sender Email" placeholder="" />
+        <InputEmail id="replyTo" label="Reply to" placeholder="DoNotReply" />
+        <InputText bind:value={subject} id="subject" label="Subject" />
+        <InputTextarea bind:value={message} id="message" label="Message" />
+        <Button submit>Update</Button>
+    </FormList>
+</Form>

src/routes/console/project-[project]/auth/templates/emailVerificationTemplate.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+    import { afterUpdate } from 'svelte';
+    import EmailTemplate from './emailTemplate.svelte';
+    import LocaleOptions from './localeOptions.svelte';
+    import Box from '$lib/components/box.svelte';
+
+    let locale = 'en-us';
+    export let localeCodes: any[];
+    export let loadEmailTemplate: (type: string, locale: string) => Promise<void> | void;
+    export let saveEmailTemplate: (type: string, data: any) => Promise<void> | void;
+
+    export let template: {
+        senderName: string;
+        senderEmail: string;
+        locale: string;
+        subject: string;
+        message: string;
+    };
+
+    afterUpdate(() => {
+        template = template;
+    });
+
+    function onLocaleChange() {
+        console.log('locale changed, loading template');
+        loadEmailTemplate('verification', locale);
+    }
+</script>
+
+<Box>
+    <LocaleOptions {localeCodes} on:change={onLocaleChange} bind:value={locale} />
+    <EmailTemplate
+        senderName={template?.senderName}
+        senderEmail={template?.senderEmail}
+        subject={template?.subject}
+        message={template?.message}
+        onSubmit={(data) => saveEmailTemplate('verification', { ...data, locale })} />
+</Box>

src/routes/console/project-[project]/auth/templates/localeOptions.svelte

@@ -1,14 +1,17 @@
 <script lang="ts">
     import InputSelect from '$lib/elements/forms/inputSelect.svelte';
+    export let localeCodes: any[];
+    export let value: string;
 </script>
 
 <InputSelect
+    on:change
     label="Language"
     id="language"
-    value="en_us"
+    bind:value
     options={[
-        {
-            label: 'English',
-            value: 'en_us'
-        }
+        ...localeCodes.map((code) => ({
+            label: code.name,
+            value: code.code
+        }))
     ]} />