2.3.0 Dev Tools (#180)

* 2.3.0 - Added new Dev Tools app

apps/dev-tool/app/emails/[id]/components/email-tester-form.tsx

@@ -0,0 +1,199 @@
+'use client';
+
+import Link from 'next/link';
+
+import { EmailTesterFormSchema } from '@/app/emails/lib/email-tester-form-schema';
+import { sendEmailAction } from '@/app/emails/lib/server-actions';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+
+import { Button } from '@kit/ui/button';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+} from '@kit/ui/form';
+import { Input } from '@kit/ui/input';
+import { toast } from '@kit/ui/sonner';
+import { Switch } from '@kit/ui/switch';
+
+export function EmailTesterForm(props: {
+  template: string;
+  settings: {
+    username: string;
+    password: string;
+    sender: string;
+    host: string;
+    port: number;
+    tls: boolean;
+  };
+}) {
+  const form = useForm({
+    resolver: zodResolver(EmailTesterFormSchema),
+    defaultValues: {
+      username: props.settings.username,
+      password: props.settings.password,
+      sender: props.settings.sender,
+      host: props.settings.host,
+      port: props.settings.port,
+      tls: props.settings.tls,
+      to: '',
+    },
+  });
+
+  return (
+    <div className={'flex flex-col space-y-8'}>
+      <p className="text-muted-foreground text-sm">
+        The settings below were filled from your environment variables. You can
+        change them to test different scenarios.{' '}
+        <Link className={'underline'} href={'https://www.nodemailer.com'}>
+          Learn more about Nodemailer if you're not sure how to configure it.
+        </Link>
+      </p>
+
+      <Form {...form}>
+        <form
+          className="flex flex-col space-y-6"
+          onSubmit={form.handleSubmit(async (data) => {
+            const promise = sendEmailAction({
+              template: props.template,
+              settings: {
+                username: data.username,
+                password: data.password,
+                sender: data.sender,
+                host: data.host,
+                port: data.port,
+                tls: data.tls,
+                to: data.to,
+              },
+            });
+
+            toast.promise(promise, {
+              loading: 'Sending email...',
+              success: 'Email sent successfully',
+              error: 'Failed to send email',
+            });
+          })}
+        >
+          <div className={'flex items-center space-x-2'}>
+            <FormField
+              name={'sender'}
+              render={({ field }) => {
+                return (
+                  <FormItem className={'w-full'}>
+                    <FormLabel>Sender</FormLabel>
+                    <FormControl>
+                      <Input {...field} placeholder={'Sender'} />
+                    </FormControl>
+                  </FormItem>
+                );
+              }}
+            />
+
+            <FormField
+              name={'to'}
+              render={({ field }) => {
+                return (
+                  <FormItem className={'w-full'}>
+                    <FormLabel>Recipient</FormLabel>
+                    <FormControl>
+                      <Input {...field} type={'email'} placeholder={'to'} />
+                    </FormControl>
+                  </FormItem>
+                );
+              }}
+            />
+          </div>
+
+          <div className={'flex items-center space-x-2'}>
+            <FormField
+              name={'username'}
+              render={({ field }) => {
+                return (
+                  <FormItem className={'w-full'}>
+                    <FormLabel>Username</FormLabel>
+                    <FormControl>
+                      <Input {...field} placeholder={'Username'} />
+                    </FormControl>
+                  </FormItem>
+                );
+              }}
+            />
+
+            <FormField
+              name={'password'}
+              render={({ field }) => {
+                return (
+                  <FormItem className={'w-full'}>
+                    <FormLabel>Password</FormLabel>
+                    <FormControl>
+                      <Input
+                        {...field}
+                        className={'w-full'}
+                        placeholder={'Password'}
+                        type={'password'}
+                      />
+                    </FormControl>
+                  </FormItem>
+                );
+              }}
+            />
+          </div>
+
+          <div className={'flex items-center space-x-2'}>
+            <FormField
+              name={'host'}
+              render={({ field }) => {
+                return (
+                  <FormItem className={'w-full'}>
+                    <FormLabel>Host</FormLabel>
+                    <FormControl>
+                      <Input {...field} placeholder={'Host'} />
+                    </FormControl>
+                  </FormItem>
+                );
+              }}
+            />
+
+            <FormField
+              name={'port'}
+              render={({ field }) => {
+                return (
+                  <FormItem className={'w-full'}>
+                    <FormLabel>Port</FormLabel>
+                    <FormControl>
+                      <Input {...field} placeholder={'Port'} />
+                    </FormControl>
+                  </FormItem>
+                );
+              }}
+            />
+
+            <FormField
+              name={'tls'}
+              render={({ field }) => {
+                return (
+                  <FormItem className={'w-full'}>
+                    <FormLabel>Secure (TLS)</FormLabel>
+                    <FormControl>
+                      <Switch
+                        {...field}
+                        onCheckedChange={(value) => {
+                          form.setValue('tls', value);
+                        }}
+                      />
+                    </FormControl>
+                  </FormItem>
+                );
+              }}
+            />
+          </div>
+
+          <Button type={'submit'}>Send Test Email</Button>
+        </form>
+      </Form>
+    </div>
+  );
+}

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,
+  };
+}

apps/dev-tool/app/emails/lib/email-loader.tsx

@@ -0,0 +1,57 @@
+import {
+  renderAccountDeleteEmail,
+  renderInviteEmail,
+} from '@kit/email-templates';
+
+export async function loadEmailTemplate(id: string) {
+  if (id === 'account-delete-email') {
+    return renderAccountDeleteEmail({
+      productName: 'Makerkit',
+      userDisplayName: 'Giancarlo',
+    });
+  }
+
+  if (id === 'invite-email') {
+    return renderInviteEmail({
+      teamName: 'Makerkit',
+      teamLogo:
+        '',
+      inviter: 'Giancarlo',
+      invitedUserEmail: 'test@makerkit.dev',
+      link: 'https://makerkit.dev',
+      productName: 'Makerkit',
+    });
+  }
+
+  if (id === 'magic-link-email') {
+    return loadFromFileSystem('magic-link');
+  }
+
+  if (id === 'reset-password-email') {
+    return loadFromFileSystem('reset-password');
+  }
+
+  if (id === 'change-email-address-email') {
+    return loadFromFileSystem('change-email-address');
+  }
+
+  if (id === 'confirm-email') {
+    return loadFromFileSystem('confirm-email');
+  }
+
+  throw new Error(`Email template not found: ${id}`);
+}
+
+async function loadFromFileSystem(fileName: string) {
+  const { readFileSync } = await import('node:fs');
+  const { join } = await import('node:path');
+
+  const filePath = join(
+    process.cwd(),
+    `../web/supabase/templates/${fileName}.html`,
+  );
+
+  return {
+    html: readFileSync(filePath, 'utf8'),
+  };
+}

apps/dev-tool/app/emails/lib/email-tester-form-schema.ts

@@ -0,0 +1,11 @@
+import { z } from 'zod';
+
+export const EmailTesterFormSchema = z.object({
+  username: z.string().min(1),
+  password: z.string().min(1),
+  sender: z.string().min(1),
+  to: z.string().email(),
+  host: z.string().min(1),
+  port: z.number().min(1),
+  tls: z.boolean(),
+});

apps/dev-tool/app/emails/lib/server-actions.ts

@@ -0,0 +1,38 @@
+'use server';
+
+import { loadEmailTemplate } from '@/app/emails/lib/email-loader';
+
+export async function sendEmailAction(params: {
+  template: string;
+  settings: {
+    username: string;
+    password: string;
+    sender: string;
+    host: string;
+    to: string;
+    port: number;
+    tls: boolean;
+  };
+}) {
+  const { settings } = params;
+  const { createTransport } = await import('nodemailer');
+
+  const transporter = createTransport({
+    host: settings.host,
+    port: settings.port,
+    secure: settings.tls,
+    auth: {
+      user: settings.username,
+      pass: settings.password,
+    },
+  });
+
+  const { html } = await loadEmailTemplate(params.template);
+
+  return transporter.sendMail({
+    html,
+    from: settings.sender,
+    to: settings.to,
+    subject: 'Test Email',
+  });
+}

apps/dev-tool/app/emails/page.tsx

@@ -0,0 +1,83 @@
+import Link from 'next/link';
+
+import {
+  CardButton,
+  CardButtonHeader,
+  CardButtonTitle,
+} from '@kit/ui/card-button';
+import { Heading } from '@kit/ui/heading';
+import { Page, PageBody, PageHeader } from '@kit/ui/page';
+
+export const metadata = {
+  title: 'Emails',
+};
+
+export default async function EmailsPage() {
+  return (
+    <Page style={'custom'}>
+      <PageHeader displaySidebarTrigger={false} description="Emails" />
+
+      <PageBody className={'gap-y-8'}>
+        <div className={'flex flex-col space-y-4'}>
+          <Heading level={5}>Supabase Auth Emails</Heading>
+
+          <div className={'grid grid-cols-1 gap-4 md:grid-cols-4'}>
+            <CardButton asChild>
+              <Link href={'/emails/confirm-email'}>
+                <CardButtonHeader>
+                  <CardButtonTitle>Confirm Email</CardButtonTitle>
+                </CardButtonHeader>
+              </Link>
+            </CardButton>
+
+            <CardButton asChild>
+              <Link href={'/emails/change-email-address-email'}>
+                <CardButtonHeader>
+                  <CardButtonTitle>Change Email Address Email</CardButtonTitle>
+                </CardButtonHeader>
+              </Link>
+            </CardButton>
+
+            <CardButton asChild>
+              <Link href={'/emails/reset-password-email'}>
+                <CardButtonHeader>
+                  <CardButtonTitle>Reset Password Email</CardButtonTitle>
+                </CardButtonHeader>
+              </Link>
+            </CardButton>
+
+            <CardButton asChild>
+              <Link href={'/emails/magic-link-email'}>
+                <CardButtonHeader>
+                  <CardButtonTitle>Magic Link Email</CardButtonTitle>
+                </CardButtonHeader>
+              </Link>
+            </CardButton>
+          </div>
+        </div>
+
+        <div className={'flex flex-col space-y-4'}>
+          <Heading level={5}>Transactional Emails</Heading>
+
+          <div className={'grid grid-cols-1 gap-4 md:grid-cols-4'}>
+            <CardButton asChild>
+              <Link href={'/emails/account-delete-email'}>
+                <CardButtonHeader>
+                  <CardButtonTitle>Account Delete Email</CardButtonTitle>
+                </CardButtonHeader>
+              </Link>
+            </CardButton>
+
+            <CardButton asChild>
+              <Link href={'/emails/invite-email'}>
+                <CardButtonHeader>
+                  <CardButtonTitle>Invite Email</CardButtonTitle>
+                </CardButtonHeader>
+              </Link>
+            </CardButton>
+          </div>
+        </div>
+      </PageBody>
+    </Page>
+  );
+}