105 lines
3.1 KiB
TypeScript
105 lines
3.1 KiB
TypeScript
import { EmailTesterForm } from '@/app/emails/[id]/components/email-tester-form';
|
|
import { loadEmailTemplate } from '@/app/emails/lib/email-loader';
|
|
import { getVariable } from '@/app/variables/lib/env-scanner';
|
|
import { EnvMode } from '@/app/variables/lib/types';
|
|
import { EnvModeSelector } from '@/components/env-mode-selector';
|
|
import { IFrame } from '@/components/iframe';
|
|
|
|
import { AppBreadcrumbs } from '@kit/ui/app-breadcrumbs';
|
|
import { Button } from '@kit/ui/button';
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogTitle,
|
|
DialogTrigger,
|
|
} from '@kit/ui/dialog';
|
|
import { Page, PageBody, PageHeader } from '@kit/ui/page';
|
|
|
|
type EmailPageProps = React.PropsWithChildren<{
|
|
params: Promise<{
|
|
id: string;
|
|
}>;
|
|
|
|
searchParams: Promise<{ mode?: EnvMode }>;
|
|
}>;
|
|
|
|
export const metadata = {
|
|
title: 'Email Template',
|
|
};
|
|
|
|
export default async function EmailPage(props: EmailPageProps) {
|
|
const { id } = await props.params;
|
|
const mode = (await props.searchParams).mode ?? 'development';
|
|
|
|
const template = await loadEmailTemplate(id);
|
|
const emailSettings = await getEmailSettings(mode);
|
|
|
|
return (
|
|
<Page style={'custom'}>
|
|
<PageHeader
|
|
displaySidebarTrigger={false}
|
|
description={
|
|
<AppBreadcrumbs
|
|
values={{
|
|
emails: 'Emails',
|
|
'invite-email': 'Invite Email',
|
|
'account-delete-email': 'Account Delete Email',
|
|
'confirm-email': 'Confirm Email',
|
|
'change-email-address-email': 'Change Email Address Email',
|
|
'reset-password-email': 'Reset Password Email',
|
|
'magic-link-email': 'Magic Link Email',
|
|
}}
|
|
/>
|
|
}
|
|
>
|
|
<EnvModeSelector mode={mode} />
|
|
</PageHeader>
|
|
|
|
<PageBody className={'flex flex-1 flex-col gap-y-4'}>
|
|
<p className={'text-muted-foreground py-1 text-xs'}>
|
|
Remember that the below is an approximation of the email. Always test
|
|
it in your inbox.{' '}
|
|
<Dialog>
|
|
<DialogTrigger asChild>
|
|
<Button variant={'link'} className="p-0 underline">
|
|
Test Email
|
|
</Button>
|
|
</DialogTrigger>
|
|
|
|
<DialogContent>
|
|
<DialogTitle>Send Test Email</DialogTitle>
|
|
|
|
<EmailTesterForm settings={emailSettings} template={id} />
|
|
</DialogContent>
|
|
</Dialog>
|
|
</p>
|
|
|
|
<IFrame className={'flex flex-1 flex-col'}>
|
|
<div
|
|
className={'flex flex-1 flex-col'}
|
|
dangerouslySetInnerHTML={{ __html: template.html }}
|
|
/>
|
|
</IFrame>
|
|
</PageBody>
|
|
</Page>
|
|
);
|
|
}
|
|
|
|
async function getEmailSettings(mode: EnvMode) {
|
|
const sender = await getVariable('EMAIL_SENDER', mode);
|
|
const host = await getVariable('EMAIL_HOST', mode);
|
|
const port = await getVariable('EMAIL_PORT', mode);
|
|
const tls = await getVariable('EMAIL_TLS', mode);
|
|
const username = await getVariable('EMAIL_USER', mode);
|
|
const password = await getVariable('EMAIL_PASSWORD', mode);
|
|
|
|
return {
|
|
sender,
|
|
host,
|
|
port: Number.isNaN(Number(port)) ? 487 : Number(port),
|
|
tls: tls === 'true',
|
|
username,
|
|
password,
|
|
};
|
|
}
|