Add MFA Creation and deletion templates

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

@@ -60,6 +60,8 @@
         EmailTemplateLocale
     } from '@appwrite.io/console';
     import Email2FaTemplate from './email2FATemplate.svelte';
+    import EmailMfaAddedTemplate from './emailMfaAddedTemplate.svelte';
+    import EmailMfaRemovedTemplate from './emailMfaRemovedTemplate.svelte';
 
     const projectId = $page.params.project;
 
@@ -69,6 +71,8 @@
     $: emailResetPassword = emailOpen === 'recovery';
     $: emailInviteUser = emailOpen === 'invitation';
     $: email2FAVerificationOpen = emailOpen === 'mfaChallenge';
+    $: emailMFAAddedOpen = emailOpen === 'mfaAdded';
+    $: emailMFARemovedOpen = emailOpen === 'mfaRemoved';
 
     // let smsOpen = 'verification';
     // $: smsVerificationOpen = smsOpen === 'verification';
@@ -189,6 +193,26 @@
                     <p class="text">Send a two-factor authentication email to a user.</p>
                     <Email2FaTemplate />
                 </CollapsibleItem>
+                <CollapsibleItem
+                    bind:open={emailMFAAddedOpen}
+                    on:click={(e) => {
+                        e.preventDefault();
+                        openEmail('mfaAdded');
+                    }}>
+                    <svelte:fragment slot="title">MFA authenticator added</svelte:fragment>
+                    <p class="text">Send a email to a user when an MFA authenticator is added.</p>
+                    <EmailMfaAddedTemplate />
+                </CollapsibleItem>
+                <CollapsibleItem
+                    bind:open={emailMFARemovedOpen}
+                    on:click={(e) => {
+                        e.preventDefault();
+                        openEmail('mfaRemoved');
+                    }}>
+                    <svelte:fragment slot="title">MFA authenticator removed</svelte:fragment>
+                    <p class="text">Send a email to a user when an MFA authenticator is removed.</p>
+                    <EmailMfaRemovedTemplate />
+            </CollapsibleItem>
             </Collapsible>
         </svelte:fragment>
         <svelte:fragment slot="actions">

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

@@ -0,0 +1,43 @@
+<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, 'mfaAdded', locale);
+            emailTemplate.set(template);
+            $baseEmailTemplate = { ...$emailTemplate };
+            trackEvent(Submit.EmailChangeLocale, { locale, type: 'mfaAdded' });
+        } 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>
+    </EmailTemplate>
+</div>

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

@@ -0,0 +1,43 @@
+<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, 'mfaRemoved', locale);
+            emailTemplate.set(template);
+            $baseEmailTemplate = { ...$emailTemplate };
+            trackEvent(Submit.EmailChangeLocale, { locale, type: 'mfaRemoved' });
+        } 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>
+    </EmailTemplate>
+</div>