Merge pull request #1202 from appwrite/feat-session-alert-template

feat: session alert template

src/routes/(console)/project-[project]/auth/templates/+page.svelte

@@ -44,6 +44,9 @@
     import EmailMagicUrlTemplate from './emailMagicUrlTemplate.svelte';
     import EmailRecoveryTemplate from './emailRecoveryTemplate.svelte';
     import EmailInviteTemplate from './emailInviteTemplate.svelte';
+    import Email2FaTemplate from './email2FATemplate.svelte';
+    import EmailSessionAlertTemplate from './emailSessionAlertTemplate.svelte';
+
     // import SmsVerificationTemplate from './smsVerificationTemplate.svelte';
     // import SmsLoginTemplate from './smsLoginTemplate.svelte';
     // import { baseEmailTemplate, baseSmsTemplate, emailTemplate, smsTemplate } from './store';
@@ -59,7 +62,6 @@
         EmailTemplateType,
         EmailTemplateLocale
     } from '@appwrite.io/console';
-    import Email2FaTemplate from './email2FATemplate.svelte';
 
     const projectId = $page.params.project;
 
@@ -69,6 +71,7 @@
     $: emailResetPassword = emailOpen === 'recovery';
     $: emailInviteUser = emailOpen === 'invitation';
     $: email2FAVerificationOpen = emailOpen === 'mfaChallenge';
+    $: emailSessionAlertOpen = emailOpen === 'sessionAlert';
 
     // let smsOpen = 'verification';
     // $: smsVerificationOpen = smsOpen === 'verification';
@@ -189,6 +192,16 @@
                     <p class="text">Send a two-factor authentication email to a user.</p>
                     <Email2FaTemplate />
                 </CollapsibleItem>
+                <CollapsibleItem
+                    bind:open={emailSessionAlertOpen}
+                    on:click={(e) => {
+                        e.preventDefault();
+                        openEmail('sessionAlert');
+                    }}>
+                    <svelte:fragment slot="title">Session alert</svelte:fragment>
+                    <p class="text">Send an email to users when a new session is created.</p>
+                    <EmailSessionAlertTemplate />
+                </CollapsibleItem>
             </Collapsible>
         </svelte:fragment>
         <svelte:fragment slot="actions">

src/routes/(console)/project-[project]/auth/templates/emailSessionAlertTemplate.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+    import EmailTemplate from './emailTemplate.svelte';
+    import LocaleOptions from './localeOptions.svelte';
+    import { loadEmailTemplate } from './+page.svelte';
+    import { page } from '$app/stores';
+    import { baseEmailTemplate, emailTemplate } from './store';
+    import { addNotification } from '$lib/stores/notifications';
+    import { Id } from '$lib/components';
+    import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
+
+    const projectId = $page.params.project;
+    let locale = 'en';
+    let loading = false;
+
+    async function onLocaleChange() {
+        const timeout = setTimeout(() => {
+            loading = true;
+        }, 1000);
+        try {
+            const template = await loadEmailTemplate(projectId, 'sessionalert', locale);
+            emailTemplate.set(template);
+            $baseEmailTemplate = { ...$emailTemplate };
+            trackEvent(Submit.EmailChangeLocale, { locale, type: 'sessionalert' });
+        } catch (error) {
+            trackError(error, Submit.EmailChangeLocale);
+            addNotification({
+                type: 'error',
+                message: error.message
+            });
+        } finally {
+            clearTimeout(timeout);
+            loading = false;
+        }
+    }
+</script>
+
+<div class="boxes-wrapper u-margin-block-start-16">
+    <LocaleOptions on:select={onLocaleChange} bind:value={locale} />
+    <EmailTemplate bind:loading>
+        <Id value={'{{user}}'}>{'{{user}}'}</Id>
+        <Id value={'{{project}}'}>{'{{project}}'}</Id>
+        <Id value={'{{device}}'}>{'{{device}}'}</Id>
+        <Id value={'{{ipAddress'}>{'{{ipAddress}}'}</Id>
+        <Id value={'{{country'}>{'{{country}}'}</Id>
+    </EmailTemplate>
+</div>