Feat implement mfa creation deletion templates

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

@@ -46,6 +46,8 @@
     import EmailInviteTemplate from './emailInviteTemplate.svelte';
     import Email2FaTemplate from './email2FATemplate.svelte';
     import EmailSessionAlertTemplate from './emailSessionAlertTemplate.svelte';
+    import EmailMfaEnabledTemplate from './emailMfaEnabledTemplate.svelte';
+    import EmailMfaDisabledTemplate from './emailMfaDisabledTemplate.svelte';
 
     // import SmsVerificationTemplate from './smsVerificationTemplate.svelte';
     // import SmsLoginTemplate from './smsLoginTemplate.svelte';
@@ -72,6 +74,8 @@
     $: emailResetPassword = emailOpen === 'recovery';
     $: emailInviteUser = emailOpen === 'invitation';
     $: email2FAVerificationOpen = emailOpen === 'mfaChallenge';
+    $: emailMfaEnabledOpen = emailOpen === 'mfaEnabled';
+    $: emailMfaDisabledOpen = emailOpen === 'mfaDisabled';
     $: emailSessionAlertOpen = emailOpen === 'sessionAlert';
 
     // let smsOpen = 'verification';
@@ -203,6 +207,27 @@
                     <p class="text">Send a two-factor authentication email to a user.</p>
                     <Email2FaTemplate />
                 </CollapsibleItem>
+                <CollapsibleItem
+                    bind:open={emailMfaEnabledOpen}
+                    on:click={(e) => {
+                        e.preventDefault();
+                        openEmail('mfaEnabled');
+                    }}>
+                    <svelte:fragment slot="title">MFA enabled</svelte:fragment>
+                    <p class="text">Send an email to a user when MFA is enabled.</p>
+                    <EmailMfaEnabledTemplate />
+                </CollapsibleItem>
+                <CollapsibleItem
+                    bind:open={emailMfaDisabledOpen}
+                    on:click={(e) => {
+                        e.preventDefault();
+                        openEmail('mfaDisabled');
+                    }}>
+                    <svelte:fragment slot="title">MFA disabled</svelte:fragment>
+                    <p class="text">Send an email to a user when MFA is disabled.</p>
+                    <EmailMfaDisabledTemplate />
+                </CollapsibleItem>
+
                 <CollapsibleItem
                     bind:open={emailSessionAlertOpen}
                     on:click={(e) => {

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

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

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

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