more templates implementation

This commit is contained in:
Damodar Lohani
2023-04-27 14:22:01 +05:45
parent f7044ce7cc
commit ceed9676f3
10 changed files with 200 additions and 55 deletions
@@ -13,24 +13,29 @@
import EmailMagicUrlTemplate from './emailMagicUrlTemplate.svelte';
import EmailRecoveryTemplate from './emailRecoveryTemplate.svelte';
import EmailInviteTemplate from './emailInviteTemplate.svelte';
import SmsVerificationTemplate from './smsVerificationTemplate.svelte';
import SmsLoginTemplate from './smsLoginTemplate.svelte';
import type { Models } from '@appwrite.io/console';
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;
verification: Models.EmailTemplate;
magicSession: Models.EmailTemplate;
recovery: Models.EmailTemplate;
invitation: Models.EmailTemplate;
}
| any = {};
let smsTemplates:
| {
verification: Models.SmsTemplate;
login: Models.SmsTemplate;
invitation: Models.SmsTemplate;
}
| any = {};
let emailVerificationOpen = true;
let emailMagicSessionOpen = false;
let emailOpen = 'verification';
@@ -42,6 +47,9 @@
loadEmailTemplate('magicSession', 'en-us');
loadEmailTemplate('recovery', 'en-us');
loadEmailTemplate('invitation', 'en-us');
loadSmsTemplate('verification', 'en-us');
loadSmsTemplate('login', 'en-us');
loadSmsTemplate('invitation', 'en-us');
});
async function loadEmailTemplate(type: string, locale: string) {
try {
@@ -57,6 +65,20 @@
});
}
}
async function loadSmsTemplate(type: string, locale: string) {
try {
smsTemplates[type] = await sdk.forConsole.projects.getSmsTemplate(
projectId,
type,
locale
);
} catch (e) {
addNotification({
type: 'error',
message: e.message
});
}
}
async function saveEmailTemplate(type: string, data: any) {
if (!data.locale) {
@@ -88,6 +110,33 @@
});
}
}
async function saveSmsTemplate(type: string, data: any) {
if (!data.locale) {
addNotification({
type: 'error',
message: 'Locale is required'
});
return;
}
try {
emailTemplates[type] = await sdk.forConsole.projects.updateSmsTemplate(
projectId,
type,
data.locale,
data.message
);
addNotification({
type: 'success',
message: `SMS ${type} template for ${data.locale} updated`
});
} catch (e) {
addNotification({
type: 'error',
message: e.message
});
}
}
</script>
<Container>
@@ -189,11 +238,27 @@
<p class="text">
Send a verification SMS to users that sign in with their phone
</p>
<!-- <SmsTemplate onSubmit={saveEmailTemplate} /> -->
<SmsVerificationTemplate
localeCodes={data.localeCodes}
{loadSmsTemplate}
{saveSmsTemplate}
template={smsTemplates?.verification} />
</CollapsibleItem>
<CollapsibleItem>
<svelte:fragment slot="title">Login</svelte:fragment>
<!-- <SmsTemplate onSubmit={saveEmailTemplate} /> -->
<SmsLoginTemplate
localeCodes={data.localeCodes}
{loadSmsTemplate}
{saveSmsTemplate}
template={smsTemplates?.login} />
</CollapsibleItem>
<CollapsibleItem>
<svelte:fragment slot="title">Invitation</svelte:fragment>
<SmsLoginTemplate
localeCodes={data.localeCodes}
{loadSmsTemplate}
{saveSmsTemplate}
template={smsTemplates?.invitation} />
</CollapsibleItem>
</Collapsible>
</svelte:fragment>
@@ -1,16 +1,7 @@
<script lang="ts">
import { Modal } from '$lib/components';
import Output from '$lib/components/output.svelte';
import { Button, FormList, InputTextarea } from '$lib/elements/forms';
import {
Table,
TableBody,
TableCell,
TableCellHead,
TableCellText,
TableHeader,
TableRow
} from '$lib/elements/table';
import { Table, TableCellHead, TableHeader } from '$lib/elements/table';
export let show = false;
export let message: string;
@@ -9,13 +9,7 @@
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;
};
export let template: Models.EmailTemplate;
afterUpdate(() => {
template = template;
@@ -9,13 +9,7 @@
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;
};
export let template: Models.EmailTemplate;
afterUpdate(() => {
template = template;
@@ -9,13 +9,7 @@
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;
};
export let template: Models.EmailTemplate;
afterUpdate(() => {
template = template;
@@ -22,6 +22,10 @@
onSubmit({ senderName, senderEmail, message, subject });
}
}
function reset() {
console.log('reset form');
}
</script>
<Form onSubmit={submit}>
@@ -45,8 +49,11 @@
placeholder="Enter your message"
readonly
on:click={() => (showEdit = true)} />
<Button submit>Update</Button>
</FormList>
<div class="u-flex">
<Button on:click={reset} text>Reset changes</Button>
<Button submit>Update</Button>
</div>
</Form>
<EditMessage {message} bind:show={showEdit} />
@@ -0,0 +1,29 @@
<script lang="ts">
import { afterUpdate } from 'svelte';
import SmsTemplate from './smsTemplate.svelte';
import LocaleOptions from './localeOptions.svelte';
import type { Models } from '@appwrite.io/console';
let locale = 'en-us';
export let localeCodes: Models.LocaleCode[];
export let loadSmsTemplate: (type: string, locale: string) => Promise<void> | void;
export let saveSmsTemplate: (type: string, data: any) => Promise<void> | void;
export let template: SmsTemplate;
afterUpdate(() => {
template = template;
});
function onLocaleChange() {
console.log('locale changed, loading template');
loadSmsTemplate('login', locale);
}
</script>
<div class="box">
<LocaleOptions {localeCodes} on:select={onLocaleChange} bind:value={locale} />
<SmsTemplate
message={template?.message}
onSubmit={(data) => saveSmsTemplate('login', { ...data, locale })} />
</div>
@@ -0,0 +1,29 @@
<script lang="ts">
import { afterUpdate } from 'svelte';
import SmsTemplate from './smsTemplate.svelte';
import LocaleOptions from './localeOptions.svelte';
import type { Models } from '@appwrite.io/console';
let locale = 'en-us';
export let localeCodes: Models.LocaleCode[];
export let loadSmsTemplate: (type: string, locale: string) => Promise<void> | void;
export let saveSmsTemplate: (type: string, data: any) => Promise<void> | void;
export let template: SmsTemplate;
afterUpdate(() => {
template = template;
});
function onLocaleChange() {
console.log('locale changed, loading template');
loadSmsTemplate('login', locale);
}
</script>
<div class="box">
<LocaleOptions {localeCodes} on:select={onLocaleChange} bind:value={locale} />
<SmsTemplate
message={template?.message}
onSubmit={(data) => saveSmsTemplate('login', { ...data, locale })} />
</div>
@@ -1,13 +1,26 @@
<script lang="ts">
import { Box } from '$lib/components';
import { Form, FormList, InputEmail, InputText, InputTextarea } from '$lib/elements/forms';
export let onSubmit: () => Promise<void> | void;
import { Button, Form, FormList, InputTextarea } from '$lib/elements/forms';
export let onSubmit: (data: any) => Promise<void> | void;
export let message: string;
function submit() {
if (onSubmit) {
onSubmit({ message });
}
}
function reset() {
console.log('reset form');
}
</script>
<Box>
<Form {onSubmit}>
<FormList>
<InputTextarea id="message" label="Message" />
</FormList>
</Form>
</Box>
<Form onSubmit={submit}>
<FormList>
<InputTextarea bind:value={message} id="message" label="Message" />
</FormList>
<div class="u-flex">
<Button on:click={reset} text>Reset changes</Button>
<Button submit>Update</Button>
</div>
</Form>
@@ -0,0 +1,29 @@
<script lang="ts">
import { afterUpdate } from 'svelte';
import SmsTemplate from './smsTemplate.svelte';
import LocaleOptions from './localeOptions.svelte';
import type { Models } from '@appwrite.io/console';
let locale = 'en-us';
export let localeCodes: Models.LocaleCode[];
export let loadSmsTemplate: (type: string, locale: string) => Promise<void> | void;
export let saveSmsTemplate: (type: string, data: any) => Promise<void> | void;
export let template: SmsTemplate;
afterUpdate(() => {
template = template;
});
function onLocaleChange() {
console.log('locale changed, loading template');
loadSmsTemplate('verification', locale);
}
</script>
<div class="box">
<LocaleOptions {localeCodes} on:select={onLocaleChange} bind:value={locale} />
<SmsTemplate
message={template?.message}
onSubmit={(data) => saveSmsTemplate('verification', { ...data, locale })} />
</div>