mirror of
https://github.com/appwrite/console.git
synced 2026-06-06 19:27:48 +00:00
more templates implementation
This commit is contained in:
@@ -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>
|
||||
Reference in New Issue
Block a user