2.3.0 Dev Tools (#180)

* 2.3.0 - Added new Dev Tools app

apps/dev-tool/app/emails/[id]/page.tsx

@@ -0,0 +1,104 @@
+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,
+  };
+}