Merge pull request #2133 from appwrite/fix-templates

Fix: auth templates

Author: stnguyen90

package.json

@@ -26,7 +26,7 @@
         "@appwrite.io/pink-icons": "0.25.0",
         "@appwrite.io/pink-icons-svelte": "^2.0.0-RC.1",
         "@appwrite.io/pink-legacy": "^1.0.3",
-        "@appwrite.io/pink-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@fee5c53",
+        "@appwrite.io/pink-svelte": "https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@95bdb79",
         "@popperjs/core": "^2.11.8",
         "@sentry/sveltekit": "^8.38.0",
         "@stripe/stripe-js": "^3.5.0",
@@ -47,8 +47,8 @@
         "tippy.js": "^6.3.7"
     },
     "devDependencies": {
-        "@eslint/compat": "^1.2.7",
-        "@eslint/js": "^9.24.0",
+        "@eslint/compat": "^1.3.1",
+        "@eslint/js": "^9.31.0",
         "@melt-ui/pp": "^0.3.2",
         "@melt-ui/svelte": "^0.86.5",
         "@playwright/test": "^1.51.1",

pnpm-lock.yaml

@@ -44,6 +44,12 @@
             <Id value={'{{user}}'}>{'{{user}}'}</Id>
             <Id value={'{{project}}'}>{'{{project}}'}</Id>
             <Id value={'{{otp}}'}>{'{{otp}}'}</Id>
+
+            <!-- START: for client info -->
+            <Id value={'{{agentClient}}'}>{'{{agentClient}}'}</Id>
+            <Id value={'{{agentDevice}}'}>{'{{agentDevice}}'}</Id>
+            <Id value={'{{agentOs}}'}>{'{{agentOs}}'}</Id>
+            <!-- END: for client info -->
         </EmailTemplate>
     </Layout.Stack>
 </Card.Base>

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

@@ -45,6 +45,12 @@
             <Id value={'{{user}}'}>{'{{user}}'}</Id>
             <Id value={'{{project}}'}>{'{{project}}'}</Id>
             <Id value={'{{redirect}}'}>{'{{redirect}}'}</Id>
+
+            <!-- START: for client info -->
+            <Id value={'{{agentClient}}'}>{'{{agentClient}}'}</Id>
+            <Id value={'{{agentDevice}}'}>{'{{agentDevice}}'}</Id>
+            <Id value={'{{agentOs}}'}>{'{{agentOs}}'}</Id>
+            <!-- END: for client info -->
         </EmailTemplate>
     </Layout.Stack>
 </Card.Base>

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

@@ -0,0 +1,56 @@
+<script lang="ts">
+    import { loadEmailTemplate } from './+page.svelte';
+    import EmailTemplate from './emailTemplate.svelte';
+    import LocaleOptions from './localeOptions.svelte';
+    import { baseEmailTemplate, emailTemplate } from './store';
+    import { page } from '$app/state';
+    import { addNotification } from '$lib/stores/notifications';
+    import { Id } from '$lib/components';
+    import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
+    import { Layout, Card } from '@appwrite.io/pink-svelte';
+
+    export let loading = false;
+
+    let locale = 'en';
+    let isUpdating = false;
+    const projectId = page.params.project;
+
+    async function onLocaleChange() {
+        const timeout = setTimeout(() => {
+            isUpdating = true;
+        }, 1000);
+        try {
+            const template = await loadEmailTemplate(projectId, 'otpSession', locale);
+            emailTemplate.set(template);
+            $baseEmailTemplate = { ...$emailTemplate };
+            trackEvent(Submit.EmailChangeLocale, { locale, type: 'otpSession' });
+        } catch (error) {
+            trackError(error, Submit.EmailChangeLocale);
+            addNotification({
+                type: 'error',
+                message: error.message
+            });
+        } finally {
+            clearTimeout(timeout);
+
+            isUpdating = false;
+        }
+    }
+</script>
+
+<Card.Base variant="secondary" padding="s">
+    <Layout.Stack>
+        <LocaleOptions on:change={onLocaleChange} bind:value={locale} />
+        <EmailTemplate {loading} {isUpdating}>
+            <Id value={'{{user}}'}>{'{{user}}'}</Id>
+            <Id value={'{{project}}'}>{'{{project}}'}</Id>
+            <Id value={'{{otp}}'}>{'{{otp}}'}</Id>
+
+            <!-- START: for client info -->
+            <Id value={'{{agentClient}}'}>{'{{agentClient}}'}</Id>
+            <Id value={'{{agentDevice}}'}>{'{{agentDevice}}'}</Id>
+            <Id value={'{{agentOs}}'}>{'{{agentOs}}'}</Id>
+            <!-- END: for client info -->
+        </EmailTemplate>
+    </Layout.Stack>
+</Card.Base>

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

@@ -119,7 +119,7 @@
                             >here</a
                         >.
                     </p>
-                    <Layout.Stack direction="row">
+                    <Layout.Stack direction="row" wrap="wrap">
                         <slot />
                     </Layout.Stack>
                 {/if}

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

@@ -5,8 +5,9 @@ import type { Models } from '@appwrite.io/console';
 // component imports
 import Email2FaTemplate from './email2FATemplate.svelte';
 import EmailInviteTemplate from './emailInviteTemplate.svelte';
-import EmailRecoveryTemplate from './emailRecoveryTemplate.svelte';
 import EmailMagicUrlTemplate from './emailMagicUrlTemplate.svelte';
+import EmailRecoveryTemplate from './emailRecoveryTemplate.svelte';
+import EmailOtpSessionTemplate from './emailOtpSessionTemplate.svelte';
 import EmailVerificationTemplate from './emailVerificationTemplate.svelte';
 import EmailSessionAlertTemplate from './emailSessionAlertTemplate.svelte';
 
@@ -62,7 +63,7 @@ export const templates = [
         key: 'otpSession',
         title: 'OTP session',
         description: 'Send an email to users that sign in with a email OTP.',
-        component: EmailMagicUrlTemplate
+        component: EmailOtpSessionTemplate
     },
     {
         key: 'recovery',