├── src
    ├── index.css
    ├── api
    │   ├── _db
    │   │   ├── mock-sqlite3.ts
    │   │   ├── index.ts
    │   │   ├── store.d.ts
    │   │   ├── datastore.ts
    │   │   └── sqlite3.ts
    │   ├── subscriber
    │   │   ├── index.patch.ts
    │   │   ├── index.patch.spec.ts
    │   │   ├── index.delete.ts
    │   │   ├── index.post.spec.ts
    │   │   ├── index.post.ts
    │   │   └── upload.post.ts
    │   ├── _utils
    │   │   ├── index.ts
    │   │   ├── string.ts
    │   │   ├── test_utils.ts
    │   │   └── http.ts
    │   ├── subscribers.get.ts
    │   ├── session.post.ts
    │   ├── template.delete.ts
    │   ├── _mailer
    │   │   └── smtp.ts
    │   ├── login.post.ts
    │   ├── templates.get.ts
    │   ├── template.post.ts
    │   ├── subscribers.get.spec.ts
    │   ├── template.patch.ts
    │   ├── mail.post.ts
    │   └── _assets
    │   │   └── default_template.ts
    ├── vite-env.d.ts
    ├── components
    │   ├── Async
    │   │   ├── index.ts
    │   │   └── Async.tsx
    │   ├── Layout
    │   │   ├── index.ts
    │   │   └── Layout.tsx
    │   ├── Prompt
    │   │   ├── index.ts
    │   │   └── Prompt.tsx
    │   ├── CrudMenu
    │   │   ├── index.ts
    │   │   └── CrudMenu.tsx
    │   ├── UserDialog
    │   │   ├── index.ts
    │   │   └── UserDialog.tsx
    │   ├── UploadDialog
    │   │   ├── index.ts
    │   │   └── UploadDialog.tsx
    │   ├── TemplateDialog
    │   │   ├── index.ts
    │   │   └── TemplateDialog.tsx
    │   ├── TemplatePreview
    │   │   ├── index.ts
    │   │   └── TemplatePreview.tsx
    │   └── TemplatePreviewDrawer
    │   │   ├── index.ts
    │   │   └── TemplatePreviewDrawer.tsx
    ├── utils
    │   ├── index.ts
    │   └── fetcher.ts
    ├── types
    │   ├── fetch-data.d.ts
    │   ├── user.d.ts
    │   ├── mui.d.ts
    │   ├── template.d.ts
    │   └── seo.d.ts
    ├── context.ts
    ├── prerender.ts
    ├── entry-client.tsx
    ├── pages
    │   ├── templates.actions.ts
    │   ├── subscribers.actions.ts
    │   ├── index.actions.ts
    │   ├── login.tsx
    │   ├── templates.tsx
    │   ├── subscribers.tsx
    │   └── index.tsx
    ├── routes.tsx
    ├── App.tsx
    ├── mui-theme.tsx
    ├── entry-server.tsx
    ├── assets
    │   └── react.svg
    └── vite-server.ts
├── babel.config.cjs
├── redirects.json
├── jest.config.cjs
├── tsconfig.node.json
├── Dockerfile
├── index.html
├── .gitignore
├── .github
    └── dependabot.yml
├── tsconfig.json
├── vite.config.ts
├── LICENSE
├── public
    ├── logo.svg
    └── stormkit-logo.svg
├── vite.config.ssr.ts
├── package.json
├── vite.config.api.ts
└── README.md


/src/index.css:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/src/api/_db/mock-sqlite3.ts:
--------------------------------------------------------------------------------
1 | export default () => {};
2 | 


--------------------------------------------------------------------------------
/src/vite-env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="vite/client" />
2 | 


--------------------------------------------------------------------------------
/src/components/Async/index.ts:
--------------------------------------------------------------------------------
1 | export { default } from "./Async";
2 | 


--------------------------------------------------------------------------------
/babel.config.cjs:
--------------------------------------------------------------------------------
1 | module.exports = { presets: ["@babel/preset-env"] };
2 | 


--------------------------------------------------------------------------------
/src/components/Layout/index.ts:
--------------------------------------------------------------------------------
1 | export { default } from "./Layout";
2 | 


--------------------------------------------------------------------------------
/src/components/Prompt/index.ts:
--------------------------------------------------------------------------------
1 | export { default } from "./Prompt";
2 | 


--------------------------------------------------------------------------------
/src/utils/index.ts:
--------------------------------------------------------------------------------
1 | export { default as fetcher } from "./fetcher";
2 | 


--------------------------------------------------------------------------------
/src/api/subscriber/index.patch.ts:
--------------------------------------------------------------------------------
1 | export { default } from "./index.post";
2 | 


--------------------------------------------------------------------------------
/src/components/CrudMenu/index.ts:
--------------------------------------------------------------------------------
1 | export { default } from "./CrudMenu";
2 | 


--------------------------------------------------------------------------------
/src/components/UserDialog/index.ts:
--------------------------------------------------------------------------------
1 | export { default } from "./UserDialog";
2 | 


--------------------------------------------------------------------------------
/src/components/UploadDialog/index.ts:
--------------------------------------------------------------------------------
1 | export { default } from "./UploadDialog";
2 | 


--------------------------------------------------------------------------------
/src/components/TemplateDialog/index.ts:
--------------------------------------------------------------------------------
1 | export { default } from "./TemplateDialog";
2 | 


--------------------------------------------------------------------------------
/src/components/TemplatePreview/index.ts:
--------------------------------------------------------------------------------
1 | export { default } from "./TemplatePreview";
2 | 


--------------------------------------------------------------------------------
/src/components/TemplatePreviewDrawer/index.ts:
--------------------------------------------------------------------------------
1 | export { default } from "./TemplatePreviewDrawer";
2 | 


--------------------------------------------------------------------------------
/redirects.json:
--------------------------------------------------------------------------------
1 | [
2 |   {
3 |     "from": "/*",
4 |     "to": "/index.html",
5 |     "assets": false
6 |   }
7 | ]
8 | 


--------------------------------------------------------------------------------
/src/api/_utils/index.ts:
--------------------------------------------------------------------------------
1 | export { default as httpUtils } from "./http";
2 | export * as stringUtils from "./string";
3 | 


--------------------------------------------------------------------------------
/src/types/fetch-data.d.ts:
--------------------------------------------------------------------------------
1 | declare type FetchDataFunc = (
2 |   match: Record<string, string>
3 | ) => Promise<{ head: SEO; context: any }>;
4 | 


--------------------------------------------------------------------------------
/jest.config.cjs:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   preset: "ts-jest",
3 |   transform: {
4 |     "^.+\\.(ts|tsx)?$": "ts-jest",
5 |     "^.+\\.(js|jsx)$": "babel-jest",
6 |   },
7 | };
8 | 


--------------------------------------------------------------------------------
/src/api/_utils/string.ts:
--------------------------------------------------------------------------------
1 | export function isValidEmail(email?: string): boolean {
2 |   if (!email) {
3 |     return false;
4 |   }
5 | 
6 |   return email.includes("@") && email.includes(".");
7 | }
8 | 


--------------------------------------------------------------------------------
/tsconfig.node.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "composite": true,
 4 |     "module": "ESNext",
 5 |     "moduleResolution": "Node",
 6 |     "allowSyntheticDefaultImports": true
 7 |   },
 8 |   "include": ["vite.config.ts"]
 9 | }
10 | 


--------------------------------------------------------------------------------
/src/types/user.d.ts:
--------------------------------------------------------------------------------
 1 | declare interface User {
 2 |   recordId?: string;
 3 |   email: string;
 4 |   firstName?: string;
 5 |   lastName?: string;
 6 |   isUnsubscribed: boolean;
 7 |   attributes?: Record<string, unknown>;
 8 |   createdAt: number;
 9 | }
10 | 


--------------------------------------------------------------------------------
/src/types/mui.d.ts:
--------------------------------------------------------------------------------
 1 | import "@mui/material/styles";
 2 | 
 3 | declare module "@mui/material/styles" {
 4 |   interface Palette {
 5 |     container: Palette["primary"];
 6 |   }
 7 | 
 8 |   interface PaletteOptions {
 9 |     container: PaletteOptions["primary"];
10 |   }
11 | }
12 | 


--------------------------------------------------------------------------------
/src/types/template.d.ts:
--------------------------------------------------------------------------------
 1 | declare interface Template {
 2 |   recordId?: string;
 3 |   name: string;
 4 |   html: string;
 5 |   description?: string;
 6 |   defaultSubject?: string;
 7 |   isDefault?: boolean;
 8 |   variables?: string[]; // list of variables available for this template
 9 | }
10 | 


--------------------------------------------------------------------------------
/src/context.ts:
--------------------------------------------------------------------------------
 1 | import { createContext } from "react";
 2 | 
 3 | interface Context {
 4 |   setIsLoggedIn?: (v: boolean) => void;
 5 |   accessToken: string | null;
 6 |   isLoggedIn: boolean;
 7 | }
 8 | 
 9 | export default createContext<Context>({
10 |   accessToken: null,
11 |   isLoggedIn: false,
12 | });
13 | 


--------------------------------------------------------------------------------
/Dockerfile:
--------------------------------------------------------------------------------
 1 | FROM node:18-alpine AS builder
 2 | WORKDIR /app
 3 | COPY . .
 4 | RUN npm install
 5 | 
 6 | FROM gcr.io/distroless/nodejs18-debian11 AS mailer
 7 | COPY --from=builder /app /app
 8 | WORKDIR /app
 9 | 
10 | ENV NODE_NO_WARNINGS=1
11 | 
12 | EXPOSE 5173
13 | 
14 | CMD [ "--loader", "ts-node/esm", "/app/src/vite-server.ts" ]


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <link href="/src/index.css" rel="stylesheet" />
 5 |   </head>
 6 |   <body>
 7 |     <div id="root"></div>
 8 |     <script type="module" src="/src/entry-client.tsx"></script>
 9 |     <script src="https://cdn.jsdelivr.net/npm/squirrelly"></script>
10 |   </body>
11 | </html>
12 | 


--------------------------------------------------------------------------------
/src/prerender.ts:
--------------------------------------------------------------------------------
1 | // This file contains the routes to be prerendered.
2 | // The exported array is a static one, but could be easily
3 | // transformed into a dynamic list.
4 | // Check import.meta.glob provided by Vite to scan folders dynamically
5 | // and build the routes to be prerendered.
6 | 
7 | export default ["/", "/my-page", "/my-other-page"];
8 | 


--------------------------------------------------------------------------------
/src/api/subscribers.get.ts:
--------------------------------------------------------------------------------
 1 | import http from "node:http";
 2 | import { httpUtils as hu } from "./_utils";
 3 | import db from "./_db";
 4 | 
 5 | export default hu.app(
 6 |   async (_: http.IncomingMessage, res: http.ServerResponse) => {
 7 |     const store = await db();
 8 | 
 9 |     hu.send(res, {
10 |       users: await store.users.subscribers(),
11 |     });
12 |   }
13 | );
14 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | pnpm-debug.log*
 8 | lerna-debug.log*
 9 | 
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 | .stormkit
15 | 
16 | # Editor directories and files
17 | .vscode/*
18 | !.vscode/extensions.json
19 | .idea
20 | .DS_Store
21 | *.suo
22 | *.ntvs*
23 | *.njsproj
24 | *.sln
25 | *.sw?
26 | 
27 | .env
28 | 


--------------------------------------------------------------------------------
/src/api/_db/index.ts:
--------------------------------------------------------------------------------
 1 | import type { Store } from "./store.d";
 2 | 
 3 | export default async function (): Promise<Store> {
 4 |   // If it's Stormkit, return the datastore
 5 |   if (process.env.STORMKIT === "true") {
 6 |     const { default: datastore } = await import("./datastore");
 7 |     return datastore;
 8 |   }
 9 | 
10 |   // Otherwise fallback to sqlite3
11 |   const { default: sqlite } = await import("./sqlite3");
12 |   return sqlite.setup();
13 | }
14 | 


--------------------------------------------------------------------------------
/.github/dependabot.yml:
--------------------------------------------------------------------------------
 1 | # To get started with Dependabot version updates, you'll need to specify which
 2 | # package ecosystems to update and where the package manifests are located.
 3 | # Please see the documentation for all configuration options:
 4 | # https://docs.github.com/github/administering-a-repository/configuration-options-for-dependency-updates
 5 | 
 6 | version: 2
 7 | updates:
 8 |   - package-ecosystem: "npm" # See documentation for possible values
 9 |     directory: "/" # Location of package manifests
10 |     schedule:
11 |       interval: "weekly"
12 | 


--------------------------------------------------------------------------------
/src/api/_db/store.d.ts:
--------------------------------------------------------------------------------
 1 | export interface Store {
 2 |   templates: {
 3 |     list(): Promise<Template[]>;
 4 |     byId(id: string): Promise<Template | void>;
 5 |     store(template: Template): Promise<Template>;
 6 |     removeById(id: string): Promise<{ ok: boolean }>;
 7 |   };
 8 | 
 9 |   users: {
10 |     subscribers(afterId?: string): Promise<User[]>;
11 |     list(afterId?: string): Promise<User[]>;
12 |     listByEmail(emails?: string[]): Promise<User[]>;
13 |     store(user: User | User[]): Promise<User | User[]>;
14 |     delete(recordId: string | string[]): Promise<{ ok: boolean }>;
15 |   };
16 | }
17 | 


--------------------------------------------------------------------------------
/src/api/session.post.ts:
--------------------------------------------------------------------------------
 1 | import http from "node:http";
 2 | import { StatusCodes } from "http-status-codes";
 3 | import { httpUtils as hu } from "./_utils";
 4 | 
 5 | interface Body {
 6 |   token?: string;
 7 | }
 8 | 
 9 | export default hu.app(
10 |   async (req: http.IncomingMessage, res: http.ServerResponse) => {
11 |     const body = await hu.readBody<Body>(req);
12 | 
13 |     if (body.token && (await hu.isAuthorized(body.token))) {
14 |       return hu.send(res, { ok: true });
15 |     }
16 | 
17 |     hu.send(res, { ok: false }, { status: StatusCodes.UNAUTHORIZED });
18 |   },
19 |   { withSession: false }
20 | );
21 | 


--------------------------------------------------------------------------------
/src/types/seo.d.ts:
--------------------------------------------------------------------------------
 1 | declare interface SEO {
 2 |   // The title tag.
 3 |   title?: string;
 4 | 
 5 |   // The description tag. Used in `description` and `og:description` tags.
 6 |   description?: string;
 7 | 
 8 |   domain?: {
 9 |     // The domain name. This is used to prefix the title tag.
10 |     name?: string;
11 | 
12 |     // The application URL. Used in `og:url` tag.
13 |     url?: string;
14 |   };
15 | 
16 |   twitter?: {
17 |     // Used in twitter:card meta tag. One of `summary` or `summary_large_image`.
18 |     card?: string;
19 | 
20 |     // Used in twitter:author
21 |     creator?: string;
22 |   };
23 | }
24 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "ESNext",
 4 |     "useDefineForClassFields": true,
 5 |     "lib": ["DOM", "DOM.Iterable", "ESNext"],
 6 |     "allowJs": false,
 7 |     "skipLibCheck": true,
 8 |     "esModuleInterop": false,
 9 |     "allowSyntheticDefaultImports": true,
10 |     "strict": true,
11 |     "forceConsistentCasingInFileNames": true,
12 |     "module": "ESNext",
13 |     "moduleResolution": "Node",
14 |     "resolveJsonModule": true,
15 |     "isolatedModules": true,
16 |     "noEmit": true,
17 |     "jsx": "react-jsx",
18 |     "paths": {
19 |       "~/*": ["./src/*"]
20 |     }
21 |   },
22 |   "include": ["src"],
23 |   "references": [{ "path": "./tsconfig.node.json" }]
24 | }
25 | 


--------------------------------------------------------------------------------
/src/api/template.delete.ts:
--------------------------------------------------------------------------------
 1 | import http from "node:http";
 2 | import { StatusCodes } from "http-status-codes";
 3 | import { httpUtils as hu } from "./_utils";
 4 | import db from "./_db";
 5 | 
 6 | interface Body {
 7 |   recordId?: string;
 8 | }
 9 | 
10 | export default hu.app(
11 |   async (req: http.IncomingMessage, res: http.ServerResponse) => {
12 |     const store = await db();
13 |     const body = await hu.readBody<Body>(req);
14 | 
15 |     if (!body.recordId) {
16 |       return hu.send(
17 |         res,
18 |         { error: "Missing recordId." },
19 |         { status: StatusCodes.BAD_REQUEST }
20 |       );
21 |     }
22 | 
23 |     return hu.send(res, await store.templates.removeById(body.recordId));
24 |   }
25 | );
26 | 


--------------------------------------------------------------------------------
/src/api/subscriber/index.patch.spec.ts:
--------------------------------------------------------------------------------
 1 | import { StatusCodes } from "http-status-codes";
 2 | import { makeRequest } from "../_utils/test_utils";
 3 | import db from "../_db";
 4 | import app from "./index.post";
 5 | 
 6 | describe("PATCH /api/subscriber", () => {
 7 |   it("updates a user entity", async () => {
 8 |     const store = await db();
 9 |     const user: User = {
10 |       email: "test@stormkit.io",
11 |       isUnsubscribed: false,
12 |       createdAt: Date.now(),
13 |     };
14 | 
15 |     await store.users.store(user);
16 | 
17 |     const response = await makeRequest(app, { method: "PATCH", data: user });
18 | 
19 |     expect(response).toMatchObject({
20 |       statusCode: StatusCodes.CREATED,
21 |       body: { user },
22 |     });
23 |   });
24 | });
25 | 


--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
 1 | import { defineConfig } from "vite";
 2 | import path from "node:path";
 3 | import react from "@vitejs/plugin-react";
 4 | import dotenv from "dotenv";
 5 | 
 6 | dotenv.config();
 7 | 
 8 | // https://vitejs.dev/config/
 9 | export default defineConfig({
10 |   resolve: {
11 |     alias: [
12 |       {
13 |         find: /^~/,
14 |         replacement: path.resolve(__dirname, "src"),
15 |       },
16 |     ],
17 |     extensions: [".mjs", ".js", ".ts", ".jsx", ".tsx", ".json"],
18 |   },
19 |   build: {
20 |     manifest: true,
21 |     rollupOptions: {
22 |       input: "index.html",
23 |     },
24 |     outDir: ".stormkit/public",
25 |   },
26 |   define: {
27 |     "process.env.DEMO": JSON.stringify(process.env.DEMO),
28 |     "process.env.MAILER_FROM_ADDR": JSON.stringify(
29 |       process.env.MAILER_FROM_ADDR
30 |     ),
31 |   },
32 |   plugins: [react()],
33 | });
34 | 


--------------------------------------------------------------------------------
/src/components/Async/Async.tsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import LinearProgress from "@mui/material/LinearProgress";
 3 | import { matchPath } from "react-router";
 4 | 
 5 | const Async = (
 6 |   path: string,
 7 |   dynamicImport: () => Promise<{ default: React.FC }>
 8 | ): React.ReactNode => {
 9 |   const Component = React.lazy(dynamicImport);
10 |   const isMatch = matchPath(path, window.location.pathname);
11 | 
12 |   // This is required to prevent React complaining from
13 |   // client/server hydration mismatch. It should render
14 |   // sync until the app is mounted completely. isMatch
15 |   // is also required to render only matching routes - others
16 |   // should be suspended.
17 |   if (isMatch) {
18 |     return <Component />;
19 |   }
20 | 
21 |   return (
22 |     <React.Suspense fallback={<LinearProgress />}>
23 |       <Component />
24 |     </React.Suspense>
25 |   );
26 | };
27 | 
28 | export default Async;
29 | 


--------------------------------------------------------------------------------
/src/utils/fetcher.ts:
--------------------------------------------------------------------------------
 1 | interface Options {
 2 |   body?: any;
 3 |   method?: string;
 4 |   contentType?: "application/json" | "multipart/form-data";
 5 |   withAuth?: boolean;
 6 | }
 7 | 
 8 | export default function fetcher(
 9 |   url: RequestInfo | URL,
10 |   options?: Options
11 | ): Promise<Response> {
12 |   const headers = new Headers();
13 | 
14 |   if (!(options?.body instanceof FormData)) {
15 |     headers.set("content-type", options?.contentType || "application/json");
16 |   }
17 | 
18 |   if (options?.withAuth !== false) {
19 |     headers.set("authorization", `Bearer ${localStorage.login}`);
20 |   }
21 | 
22 |   let body: BodyInit;
23 | 
24 |   if (options?.body && headers.get("content-type") === "application/json") {
25 |     body = JSON.stringify(options.body);
26 |   } else {
27 |     body = options?.body || undefined;
28 |   }
29 | 
30 |   return fetch(url, {
31 |     body,
32 |     method: options?.method || "GET",
33 |     headers: headers,
34 |   });
35 | }
36 | 


--------------------------------------------------------------------------------
/src/api/subscriber/index.delete.ts:
--------------------------------------------------------------------------------
 1 | import http from "node:http";
 2 | import { StatusCodes } from "http-status-codes";
 3 | import { httpUtils as hu, stringUtils as su } from "../_utils";
 4 | import db from "../_db";
 5 | 
 6 | interface Body {
 7 |   recordIds?: string[];
 8 | }
 9 | 
10 | export default hu.app(
11 |   async (req: http.IncomingMessage, res: http.ServerResponse) => {
12 |     const { recordIds } = await hu.readBody<Body>(req);
13 |     const store = await db();
14 |     const errors: Record<string, string> = {};
15 | 
16 |     if (!recordIds || !Array.isArray(recordIds) || recordIds?.length === 0) {
17 |       errors["recordIds"] = "Record ids need to be an array of strings.";
18 |     }
19 | 
20 |     if (Object.keys(errors).length > 0) {
21 |       return hu.send(res, { errors }, { status: StatusCodes.BAD_REQUEST });
22 |     }
23 | 
24 |     return hu.send(res, await store.users.delete(recordIds!), {
25 |       status: StatusCodes.CREATED,
26 |     });
27 |   }
28 | );
29 | 


--------------------------------------------------------------------------------
/src/api/_mailer/smtp.ts:
--------------------------------------------------------------------------------
 1 | import nodemailer from "nodemailer";
 2 | import defaultTemplate from "../_assets/default_template";
 3 | 
 4 | export interface SendProps {
 5 |   emails: string[];
 6 |   html: string;
 7 |   subject: string;
 8 | }
 9 | 
10 | export default {
11 |   send: async function ({ emails, subject, html }: SendProps) {
12 |     const transporter = nodemailer.createTransport({
13 |       host: process.env.SMTP_HOST || "smtp.gmail.com",
14 |       port: Number(process.env.SMTP_PORT) || 587,
15 |       auth: {
16 |         user: process.env.SMTP_USERNAME,
17 |         pass: process.env.SMTP_PASSWORD,
18 |       },
19 |     });
20 | 
21 |     let messageIds = [];
22 | 
23 |     for (let email of emails) {
24 |       messageIds.push(
25 |         await transporter.sendMail({
26 |           from: process.env.MAILER_FROM_ADDR,
27 |           to: email,
28 |           html,
29 |           subject,
30 |         })
31 |       );
32 |     }
33 | 
34 |     return {
35 |       messageIds,
36 |     };
37 |   },
38 | };
39 | 


--------------------------------------------------------------------------------
/src/api/login.post.ts:
--------------------------------------------------------------------------------
 1 | import http from "node:http";
 2 | import * as jwt from "jose";
 3 | import { StatusCodes } from "http-status-codes";
 4 | import { httpUtils as hu } from "./_utils";
 5 | 
 6 | interface Body {
 7 |   username?: string;
 8 |   password?: string;
 9 | }
10 | 
11 | export default hu.app(
12 |   async (req: http.IncomingMessage, res: http.ServerResponse) => {
13 |     const body = await hu.readBody<Body>(req);
14 | 
15 |     if (
16 |       body.password === process.env.ADMIN_PASSWORD &&
17 |       body.username === process.env.ADMIN_USERNAME
18 |     ) {
19 |       const jwtToken = await new jwt.SignJWT({
20 |         session: true,
21 |       })
22 |         .setIssuedAt()
23 |         .setExpirationTime("24h")
24 |         .setProtectedHeader({ alg: "HS256" })
25 |         .sign(new TextEncoder().encode(process.env.JWT_SECRET));
26 | 
27 |       return hu.send(res, { token: jwtToken });
28 |     }
29 | 
30 |     hu.send(res, { ok: false }, { status: StatusCodes.UNAUTHORIZED });
31 |   },
32 |   { withSession: false }
33 | );
34 | 


--------------------------------------------------------------------------------
/src/entry-client.tsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import ReactDOM from "react-dom/client";
 3 | import { BrowserRouter } from "react-router-dom";
 4 | import createRoutes from "./routes";
 5 | import App from "./App";
 6 | import Context from "./context";
 7 | import "./index.css";
 8 | 
 9 | declare global {
10 |   interface Window {
11 |     CONTEXT: any;
12 |   }
13 | }
14 | 
15 | const mount = (children: React.ReactNode) => {
16 |   const root = document.getElementById("root") as HTMLElement;
17 | 
18 |   if (window.CONTEXT) {
19 |     ReactDOM.hydrateRoot(root, children);
20 |   } else {
21 |     ReactDOM.createRoot(root).render(children);
22 |   }
23 | };
24 | 
25 | (async () => {
26 |   const { routes } = await createRoutes(window.location.pathname);
27 |   const context = window.CONTEXT;
28 | 
29 |   mount(
30 |     <React.StrictMode>
31 |       <Context.Provider value={context}>
32 |         <BrowserRouter>
33 |           <App routes={routes} />
34 |         </BrowserRouter>
35 |       </Context.Provider>
36 |     </React.StrictMode>
37 |   );
38 | })();
39 | 


--------------------------------------------------------------------------------
/src/api/subscriber/index.post.spec.ts:
--------------------------------------------------------------------------------
 1 | import { StatusCodes } from "http-status-codes";
 2 | import { makeRequest } from "../_utils/test_utils";
 3 | import app from "./index.post";
 4 | 
 5 | describe("POST /api/subscriber", () => {
 6 |   it("returns a bad request when fields are missing", async () => {
 7 |     const retVal = await makeRequest(app, { method: "POST", data: {} });
 8 | 
 9 |     expect(retVal).toMatchObject({
10 |       statusCode: StatusCodes.BAD_REQUEST,
11 |       statusMessage: "Bad Request",
12 |       body: { errors: { email: "Email is invalid." } },
13 |     });
14 |   });
15 | 
16 |   it("creates a new user entity", async () => {
17 |     const user: User = {
18 |       email: "test@stormkit.io",
19 |       isUnsubscribed: false,
20 |       createdAt: Date.now(),
21 |     };
22 | 
23 |     const retVal = await makeRequest(app, { method: "POST", data: user });
24 | 
25 |     expect(retVal).toMatchObject({
26 |       statusCode: StatusCodes.CREATED,
27 |       statusMessage: "Created",
28 |       body: { user: { recordId: "1", email: "test@stormkit.io" } },
29 |     });
30 |   });
31 | });
32 | 


--------------------------------------------------------------------------------
/src/api/templates.get.ts:
--------------------------------------------------------------------------------
 1 | import http from "node:http";
 2 | import { httpUtils as hu } from "./_utils";
 3 | import db from "./_db";
 4 | import defaultTemplate from "./_assets/default_template";
 5 | 
 6 | export default hu.app(
 7 |   async (_: http.IncomingMessage, res: http.ServerResponse) => {
 8 |     const store = await db();
 9 |     let templates = await store.templates.list();
10 | 
11 |     // Store the default template
12 |     if (!templates?.length) {
13 |       templates = [await store.templates.store(defaultTemplate)];
14 |     }
15 | 
16 |     hu.send(res, {
17 |       templates: templates.map((template) => ({
18 |         ...template,
19 |         variables: template.html
20 |           .match(/\{\{\s?it\.([^\}\}]+)\}\}/g)
21 |           ?.map((variable) =>
22 |             variable
23 |               // Remove {{ it. }}
24 |               .replace(/\{\{\s?it\.|\}\}/g, "")
25 |               // Remove filters
26 |               .split("|")[0]
27 |               .trim()
28 |           )
29 |           // This one is a special variable, it's defined by us.
30 |           .filter((variable) => variable !== "unsubscribeUrl"),
31 |       })),
32 |     });
33 |   }
34 | );
35 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) Savas Vedova <savas@stormkit.io>, Twitter: @savasvedova
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.


--------------------------------------------------------------------------------
/src/pages/templates.actions.ts:
--------------------------------------------------------------------------------
 1 | import { useEffect, useState } from "react";
 2 | import { fetcher } from "~/utils";
 3 | 
 4 | interface FetchTemplatesProps {
 5 |   refreshToken?: number;
 6 | }
 7 | 
 8 | export function useFetchTemplates({ refreshToken }: FetchTemplatesProps = {}) {
 9 |   const [templates, setTemplates] = useState<Template[]>([]);
10 |   const [isLoading, setIsLoading] = useState(true);
11 |   const [error, setError] = useState<string>();
12 | 
13 |   useEffect(() => {
14 |     fetcher("/api/templates")
15 |       .then(async (res) => {
16 |         const data = (await res.json()) as { templates: Template[] };
17 |         setTemplates(data.templates);
18 |       })
19 |       .catch((e) => {
20 |         console.log(e);
21 |       })
22 |       .finally(() => {
23 |         setIsLoading(false);
24 |       });
25 |   }, [refreshToken]);
26 | 
27 |   return { templates, isLoading, error };
28 | }
29 | 
30 | interface DeleteTemplateProps {
31 |   recordId: string;
32 | }
33 | 
34 | export function deleteTemplate({ recordId }: DeleteTemplateProps) {
35 |   return fetcher("/api/template", {
36 |     method: "DELETE",
37 |     body: { recordId },
38 |   }).then(async (res) => {
39 |     return await res.json();
40 |   });
41 | }
42 | 


--------------------------------------------------------------------------------
/src/components/CrudMenu/CrudMenu.tsx:
--------------------------------------------------------------------------------
 1 | import Menu from "@mui/material/Menu";
 2 | import MenuItem from "@mui/material/MenuItem";
 3 | import Typography from "@mui/material/Typography";
 4 | import ListItemIcon from "@mui/material/ListItemIcon";
 5 | import EditIcon from "@mui/icons-material/Edit";
 6 | import TrashIcon from "@mui/icons-material/Delete";
 7 | 
 8 | interface Props {
 9 |   open: boolean;
10 |   anchorEl: null | HTMLElement;
11 |   onClose: () => void;
12 |   onEditClick: () => void;
13 |   onDeleteClick: () => void;
14 | }
15 | 
16 | export default function CrudMenu({
17 |   open,
18 |   anchorEl,
19 |   onClose,
20 |   onEditClick,
21 |   onDeleteClick,
22 | }: Props) {
23 |   return (
24 |     <Menu
25 |       MenuListProps={{
26 |         "aria-labelledby": "long-button",
27 |       }}
28 |       open={open}
29 |       anchorEl={anchorEl}
30 |       anchorOrigin={{
31 |         vertical: "bottom",
32 |         horizontal: "left",
33 |       }}
34 |       onClose={onClose}
35 |     >
36 |       <MenuItem onClick={onEditClick}>
37 |         <ListItemIcon>
38 |           <EditIcon />
39 |         </ListItemIcon>
40 |         <Typography>Edit</Typography>
41 |       </MenuItem>
42 |       <MenuItem onClick={onDeleteClick}>
43 |         <ListItemIcon>
44 |           <TrashIcon />
45 |         </ListItemIcon>
46 |         <Typography>Delete</Typography>
47 |       </MenuItem>
48 |     </Menu>
49 |   );
50 | }
51 | 


--------------------------------------------------------------------------------
/src/api/template.post.ts:
--------------------------------------------------------------------------------
 1 | import http from "node:http";
 2 | import { httpUtils as hu } from "./_utils";
 3 | import db from "./_db";
 4 | import { StatusCodes } from "http-status-codes";
 5 | 
 6 | interface Body {
 7 |   templateName?: string;
 8 |   templateDesc?: string;
 9 |   templateSubject?: string;
10 |   templateHtml?: string;
11 |   isDefault?: boolean;
12 | }
13 | 
14 | export default hu.app(
15 |   async (req: http.IncomingMessage, res: http.ServerResponse) => {
16 |     const body = await hu.readBody<Body>(req);
17 |     const store = await db();
18 |     const errors: Record<string, string> = {};
19 | 
20 |     if (!body.templateName?.trim()) {
21 |       errors["templateName"] = "Template name is a required field.";
22 |     }
23 | 
24 |     if (!body.templateHtml?.trim()) {
25 |       errors["templateHtml"] = "Template content is a required field.";
26 |     }
27 | 
28 |     if (Object.keys(errors).length > 0) {
29 |       return hu.send(res, { errors }, { status: StatusCodes.BAD_REQUEST });
30 |     }
31 | 
32 |     hu.send(
33 |       res,
34 |       {
35 |         template: await store.templates.store({
36 |           name: body.templateName!,
37 |           html: body.templateHtml!,
38 |           description: body.templateDesc,
39 |           defaultSubject: body.templateSubject,
40 |           isDefault: body.isDefault || false,
41 |         }),
42 |       },
43 |       { status: StatusCodes.CREATED }
44 |     );
45 |   }
46 | );
47 | 


--------------------------------------------------------------------------------
/src/api/subscribers.get.spec.ts:
--------------------------------------------------------------------------------
 1 | import { StatusCodes } from "http-status-codes";
 2 | import { makeRequest } from "./_utils/test_utils";
 3 | import app from "./subscribers.get";
 4 | import db from "./_db";
 5 | 
 6 | describe("GET /api/subscribers", () => {
 7 |   afterEach(() => {
 8 |     jest.resetAllMocks();
 9 |   });
10 | 
11 |   describe("using sqlite", () => {
12 |     it("returns a list of users", async () => {
13 |       const users: User[] = [
14 |         {
15 |           recordId: "1",
16 |           email: "joe@doe.com",
17 |           firstName: "joe",
18 |           lastName: "doe",
19 |           attributes: {
20 |             package: "free-tier",
21 |           },
22 |           isUnsubscribed: false,
23 |           createdAt: Date.now(),
24 |         },
25 |         {
26 |           recordId: "2",
27 |           email: "jane@doe.com",
28 |           firstName: "jane",
29 |           lastName: "doe",
30 |           attributes: {
31 |             package: "enterprise",
32 |           },
33 |           isUnsubscribed: true,
34 |           createdAt: Date.now(),
35 |         },
36 |       ];
37 | 
38 |       const store = await db();
39 | 
40 |       await store.users.store(users);
41 | 
42 |       const retVal = await makeRequest(app);
43 | 
44 |       expect(retVal).toMatchObject({
45 |         statusCode: StatusCodes.OK,
46 |         statusMessage: "Success",
47 |         body: { users: [users[0]] },
48 |       });
49 |     });
50 |   });
51 | });
52 | 


--------------------------------------------------------------------------------
/public/logo.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>


--------------------------------------------------------------------------------
/src/pages/subscribers.actions.ts:
--------------------------------------------------------------------------------
 1 | import { useEffect, useState } from "react";
 2 | import { fetcher } from "~/utils";
 3 | 
 4 | interface FetchUsersProps {
 5 |   refreshToken?: number;
 6 | }
 7 | 
 8 | export function useFetchUsers({ refreshToken }: FetchUsersProps = {}) {
 9 |   const [users, setUsers] = useState<User[]>([]);
10 |   const [isLoading, setIsLoading] = useState(true);
11 |   const [error, setError] = useState<string>();
12 | 
13 |   useEffect(() => {
14 |     fetcher("/api/subscribers")
15 |       .then(async (res) => {
16 |         const data = (await res.json()) as { users: User[] };
17 |         setUsers(data.users);
18 |       })
19 |       .catch(async (e) => {
20 |         if (e instanceof Error) {
21 |           setError(e.message);
22 |         } else if (e instanceof Response) {
23 |           const data = (await e.json()) || {};
24 |           setError(data.error || data.errors || data);
25 |         } else {
26 |           console.error(e);
27 |         }
28 |       })
29 |       .finally(() => {
30 |         setIsLoading(false);
31 |       });
32 |   }, [refreshToken]);
33 | 
34 |   return { users, isLoading, error };
35 | }
36 | 
37 | interface DeleteUserProps {
38 |   recordId: string;
39 | }
40 | 
41 | export function deleteUser({ recordId }: DeleteUserProps) {
42 |   return fetcher("/api/subscriber", {
43 |     method: "DELETE",
44 |     body: { recordIds: [recordId] },
45 |   }).then(async (res) => {
46 |     return await res.json();
47 |   });
48 | }
49 | 


--------------------------------------------------------------------------------
/src/pages/index.actions.ts:
--------------------------------------------------------------------------------
 1 | import { fetcher } from "~/utils";
 2 | 
 3 | export const validateEmails = (emails: string[]): boolean => {
 4 |   if (!emails || !emails.length) {
 5 |     return false;
 6 |   }
 7 | 
 8 |   return emails.filter((e) => e.indexOf("@") === -1).length === 0;
 9 | };
10 | 
11 | export const errors: Record<string, string> = {
12 |   to: "Invalid address. Make sure to provide valid email addresses.",
13 | };
14 | 
15 | interface SendEmailProps {
16 |   setIsLoading: (v: boolean) => void;
17 |   onSuccess: (d: Record<string, unknown>) => void;
18 |   template: Template;
19 |   subject: string;
20 |   emails: string[];
21 | }
22 | 
23 | export const sendEmail = ({
24 |   setIsLoading,
25 |   onSuccess,
26 |   emails,
27 |   template,
28 |   subject,
29 | }: SendEmailProps) => {
30 |   setIsLoading(true);
31 | 
32 |   const data: Record<string, string> = {};
33 |   const form = document.querySelector("#manual-email-form") as HTMLFormElement;
34 | 
35 |   template.variables?.forEach((variable) => {
36 |     const { value } = form[`data[${variable}]`] || {};
37 | 
38 |     if (value) {
39 |       data[variable] = value.replace(/\n/g, "<br/>");
40 |     }
41 |   });
42 | 
43 |   return fetcher("/api/mail", {
44 |     method: "POST",
45 |     body: {
46 |       email: emails,
47 |       templateId: template?.recordId,
48 |       data,
49 |       subject,
50 |     },
51 |   })
52 |     .then(async (res) => {
53 |       const data = await res.json();
54 |       onSuccess(data);
55 |     })
56 |     .finally(() => {
57 |       setIsLoading(false);
58 |     });
59 | };
60 | 


--------------------------------------------------------------------------------
/src/components/Prompt/Prompt.tsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import Button from "@mui/lab/LoadingButton";
 3 | import Dialog from "@mui/material/Dialog";
 4 | import DialogActions from "@mui/material/DialogActions";
 5 | import DialogContent from "@mui/material/DialogContent";
 6 | import DialogContentText from "@mui/material/DialogContentText";
 7 | import DialogTitle from "@mui/material/DialogTitle";
 8 | 
 9 | interface Props {
10 |   open: boolean;
11 |   title?: React.ReactNode;
12 |   message: React.ReactNode;
13 |   isLoading: boolean;
14 |   onCancel: () => void;
15 |   onConfirm: () => void;
16 | }
17 | 
18 | export default function Prompt({
19 |   open,
20 |   title = "Confirm action",
21 |   message,
22 |   onConfirm,
23 |   onCancel,
24 |   isLoading,
25 | }: Props) {
26 |   return (
27 |     <Dialog open={open} onClose={onCancel}>
28 |       <DialogTitle>{title}</DialogTitle>
29 |       <DialogContent>
30 |         <DialogContentText>{message}</DialogContentText>
31 |       </DialogContent>
32 |       <DialogActions
33 |         sx={{
34 |           mb: 2,
35 |           display: "flex",
36 |           alignItems: "center",
37 |           justifyContent: "center",
38 |         }}
39 |       >
40 |         <Button variant="outlined" onClick={onCancel}>
41 |           Cancel
42 |         </Button>
43 |         <Button
44 |           color="secondary"
45 |           variant="outlined"
46 |           onClick={onConfirm}
47 |           loading={isLoading}
48 |         >
49 |           Confirm
50 |         </Button>
51 |       </DialogActions>
52 |     </Dialog>
53 |   );
54 | }
55 | 


--------------------------------------------------------------------------------
/src/api/template.patch.ts:
--------------------------------------------------------------------------------
 1 | import http from "node:http";
 2 | import { StatusCodes } from "http-status-codes";
 3 | import { httpUtils as hu } from "./_utils";
 4 | import db from "./_db";
 5 | 
 6 | interface Body {
 7 |   recordId?: string;
 8 |   templateName?: string;
 9 |   templateDesc?: string;
10 |   templateSubject?: string;
11 |   templateHtml?: string;
12 |   isDefault?: boolean;
13 | }
14 | 
15 | export default hu.app(
16 |   async (req: http.IncomingMessage, res: http.ServerResponse) => {
17 |     const body = await hu.readBody<Body>(req);
18 |     const store = await db();
19 |     const errors: Record<string, string> = {};
20 | 
21 |     if (!body.templateName?.trim()) {
22 |       errors["templateName"] = "Template name is a required field.";
23 |     }
24 | 
25 |     if (!body.templateHtml?.trim()) {
26 |       errors["templateHtml"] = "Template content is a required field.";
27 |     }
28 | 
29 |     if (!body.recordId) {
30 |       errors["recordId"] = "Template is missing record ID.";
31 |     }
32 | 
33 |     if (Object.keys(errors).length > 0) {
34 |       return hu.send(res, { errors }, { status: StatusCodes.BAD_REQUEST });
35 |     }
36 | 
37 |     hu.send(
38 |       res,
39 |       {
40 |         template: await store.templates.store({
41 |           recordId: body.recordId,
42 |           name: body.templateName!,
43 |           html: body.templateHtml!,
44 |           description: body.templateDesc,
45 |           defaultSubject: body.templateSubject,
46 |           isDefault: body.isDefault || false,
47 |         }),
48 |       },
49 |       { status: StatusCodes.CREATED }
50 |     );
51 |   }
52 | );
53 | 


--------------------------------------------------------------------------------
/src/api/subscriber/index.post.ts:
--------------------------------------------------------------------------------
 1 | import http from "node:http";
 2 | import { StatusCodes } from "http-status-codes";
 3 | import { httpUtils as hu, stringUtils as su } from "../_utils";
 4 | import db from "../_db";
 5 | 
 6 | export default hu.app(
 7 |   async (req: http.IncomingMessage, res: http.ServerResponse) => {
 8 |     const user = await hu.readBody<User>(req);
 9 |     const store = await db();
10 |     const errors: Record<string, string> = {};
11 | 
12 |     if (!user.email?.trim()) {
13 |       errors["email"] = "Email is a required field.";
14 |     }
15 | 
16 |     if (!su.isValidEmail(user.email)) {
17 |       errors["email"] = "Email is invalid.";
18 |     }
19 | 
20 |     const fields: Array<keyof User> = ["firstName", "lastName"];
21 | 
22 |     fields.forEach((key) => {
23 |       if (user[key] && typeof user[key] !== "string") {
24 |         errors[key] = `${key} has to be a string.`;
25 |       }
26 |     });
27 | 
28 |     if (user.attributes && typeof user.attributes !== "object") {
29 |       errors["attributes"] = "Attributes has to be a Record<string, any>.";
30 |     }
31 | 
32 |     if (Object.keys(errors).length > 0) {
33 |       return hu.send(res, { errors }, { status: StatusCodes.BAD_REQUEST });
34 |     }
35 | 
36 |     return hu.send(
37 |       res,
38 |       {
39 |         user: await store.users.store({
40 |           recordId: user.recordId,
41 |           email: user.email.trim(),
42 |           firstName: user.firstName?.trim(),
43 |           lastName: user.lastName?.trim(),
44 |           isUnsubscribed: user.isUnsubscribed,
45 |           attributes: user.attributes,
46 |           createdAt: user.recordId ? user.createdAt : Date.now(),
47 |         }),
48 |       },
49 |       { status: StatusCodes.CREATED }
50 |     );
51 |   }
52 | );
53 | 


--------------------------------------------------------------------------------
/src/routes.tsx:
--------------------------------------------------------------------------------
 1 | import type { RouteProps } from "react-router";
 2 | import { matchPath } from "react-router";
 3 | import Async from "~/components/Async";
 4 | 
 5 | interface Route {
 6 |   path: string;
 7 |   import: () => Promise<{ default: React.FC; fetchData?: FetchDataFunc }>;
 8 | }
 9 | 
10 | type RouteExtended = RouteProps & {
11 |   data?: { head: SEO };
12 | };
13 | 
14 | const routes: Route[] = [
15 |   { path: "/", import: () => import("~/pages") },
16 |   { path: "/login", import: () => import("~/pages/login") },
17 |   { path: "/templates", import: () => import("~/pages/templates") },
18 |   { path: "/subscribers", import: () => import("~/pages/subscribers") },
19 | ];
20 | 
21 | const isServerSide = typeof window === "undefined";
22 | 
23 | export default async (
24 |   url: string
25 | ): Promise<{ routes: RouteExtended[]; head?: SEO; context: any }> => {
26 |   const allRoutes: RouteExtended[] = [];
27 |   let head: SEO | undefined;
28 |   let context: any;
29 | 
30 |   for (const route of routes) {
31 |     let element: React.ReactNode;
32 |     const match = matchPath(route.path, url);
33 | 
34 |     // For the server-side application, we do not need code-splitting.
35 |     // Also, this will ensure the server-side build is compatible with
36 |     // serverless environments.
37 |     if (isServerSide) {
38 |       const mod = await route.import();
39 |       element = <mod.default />;
40 | 
41 |       if (match) {
42 |         const data = await mod?.fetchData?.(
43 |           match.params as Record<string, string>
44 |         );
45 | 
46 |         if (data?.head) {
47 |           head = data.head;
48 |         }
49 | 
50 |         if (data?.context) {
51 |           context = data.context;
52 |         }
53 |       }
54 |     } else if (!isServerSide) {
55 |       element = Async(route.path, route.import);
56 |     }
57 | 
58 |     allRoutes.push({ path: route.path, element });
59 |   }
60 | 
61 |   return { routes: allRoutes, head, context };
62 | };
63 | 


--------------------------------------------------------------------------------
/vite.config.ssr.ts:
--------------------------------------------------------------------------------
 1 | import path from "node:path";
 2 | import fs from "node:fs";
 3 | import { fileURLToPath } from "node:url";
 4 | import { defineConfig } from "vite";
 5 | import { viteStaticCopy } from "vite-plugin-static-copy";
 6 | import react from "@vitejs/plugin-react";
 7 | import dotenv from "dotenv";
 8 | 
 9 | dotenv.config();
10 | process.env.NODE_ENV = "production";
11 | const __dirname = path.dirname(fileURLToPath(import.meta.url));
12 | 
13 | // https://vitejs.dev/config/
14 | export default defineConfig({
15 |   ssr: {
16 |     noExternal: fs
17 |       .readdirSync(path.join(__dirname, "node_modules"), {
18 |         withFileTypes: true,
19 |       })
20 |       .filter((dirent) => dirent.isDirectory() && !dirent.name.startsWith("."))
21 |       .map((dirent) => new RegExp(dirent.name)),
22 |   },
23 |   resolve: {
24 |     alias: [
25 |       {
26 |         find: /^~/,
27 |         replacement: path.resolve(__dirname, "src"),
28 |       },
29 |     ],
30 |     extensions: [".mjs", ".js", ".ts", ".jsx", ".tsx", ".json"],
31 |   },
32 |   build: {
33 |     ssr: true,
34 |     minify: false,
35 |     rollupOptions: {
36 |       preserveEntrySignatures: "strict",
37 |       input: { server: "src/entry-server.tsx" },
38 |       output: {
39 |         dir: ".stormkit/server",
40 |         format: "esm",
41 |         entryFileNames: "[name].mjs",
42 |         preserveModules: true,
43 |         preserveModulesRoot: "src",
44 |         exports: "named",
45 |       },
46 |     },
47 |   },
48 |   define: {
49 |     ...Object.keys(process.env).reduce(
50 |       (obj: Record<string, string>, key: string) => {
51 |         obj[`process.env.${key}`] = JSON.stringify(process.env[key]);
52 |         return obj;
53 |       },
54 |       {}
55 |     ),
56 |   },
57 |   plugins: [
58 |     react(),
59 |     viteStaticCopy({
60 |       targets: [
61 |         {
62 |           src: ".stormkit/public/index.html",
63 |           dest: "../.stormkit/server",
64 |         },
65 |       ],
66 |     }),
67 |   ],
68 | });
69 | 


--------------------------------------------------------------------------------
/src/api/subscriber/upload.post.ts:
--------------------------------------------------------------------------------
 1 | import http from "node:http";
 2 | import fs from "node:fs";
 3 | import { StatusCodes } from "http-status-codes";
 4 | import { httpUtils as hu, stringUtils as su } from "../_utils";
 5 | import db from "../_db";
 6 | import formidable from "formidable";
 7 | 
 8 | interface Body {
 9 |   file: formidable.File;
10 | }
11 | 
12 | export default hu.app(
13 |   async (req: http.IncomingMessage, res: http.ServerResponse) => {
14 |     const { file } = await hu.readBody<Body>(req);
15 |     const store = await db();
16 |     const errors: Record<string, string> = {};
17 | 
18 |     if (!file) {
19 |       errors["file"] = "File is a required field.";
20 |     }
21 | 
22 |     if (Object.keys(errors).length > 0) {
23 |       return hu.send(res, { errors }, { status: StatusCodes.BAD_REQUEST });
24 |     }
25 | 
26 |     const content = fs.readFileSync(file.filepath).toString("utf-8");
27 |     const users: User[] = [];
28 | 
29 |     content
30 |       .split("\n")
31 |       .slice(1)
32 |       .forEach((row) => {
33 |         const [email, firstName, lastName, attrs] = row.split(",");
34 | 
35 |         if (!email) {
36 |           return;
37 |         }
38 | 
39 |         try {
40 |           users.push({
41 |             email: email.replaceAll('"', ""),
42 |             firstName,
43 |             lastName,
44 |             isUnsubscribed: false,
45 |             attributes: attrs ? JSON.parse(attrs) : undefined,
46 |             createdAt: Date.now(),
47 |           });
48 |         } catch {}
49 |       });
50 | 
51 |     try {
52 |       await store.users.store(users);
53 |     } catch {
54 |       return hu.send(
55 |         res,
56 |         { error: "Error while inserting records" },
57 |         { status: StatusCodes.INTERNAL_SERVER_ERROR }
58 |       );
59 |     }
60 | 
61 |     return hu.send(
62 |       res,
63 |       {
64 |         created: users.filter((u) => Boolean(u.recordId)),
65 |         duplicate: users.filter((u) => !u.recordId),
66 |         total: users.length,
67 |       },
68 |       { status: StatusCodes.CREATED }
69 |     );
70 |   }
71 | );
72 | 


--------------------------------------------------------------------------------
/src/api/_db/datastore.ts:
--------------------------------------------------------------------------------
 1 | import type { Store } from "./store.d";
 2 | import ds from "@stormkit/ds";
 3 | 
 4 | const store: Store = {
 5 |   templates: {
 6 |     async list() {
 7 |       return ds.fetch<Template>("templates", {}, { limit: 25, sortDir: "ASC" });
 8 |     },
 9 | 
10 |     async byId(recordId: string) {
11 |       return ds.fetchOne<Template>("templates", { recordId });
12 |     },
13 | 
14 |     async store(template: Template) {
15 |       const result = await ds.store("templates", template, {
16 |         unique: ["name"],
17 |       });
18 | 
19 |       template.recordId = result.recordIds?.[0];
20 |       return template;
21 |     },
22 | 
23 |     async removeById(recordId: string) {
24 |       return await ds.removeByRecordId("templates", recordId);
25 |     },
26 |   },
27 | 
28 |   users: {
29 |     async subscribers(afterId = "0") {
30 |       return await ds.fetch<User>(
31 |         "users",
32 |         { recordId: { ">": afterId }, isUnsubscribed: { "!=": true } },
33 |         { sortDir: "DESC", limit: 25 }
34 |       );
35 |     },
36 | 
37 |     async list(afterId = "0") {
38 |       return await ds.fetch<User>(
39 |         "users",
40 |         { recordId: { ">": afterId } },
41 |         { sortDir: "DESC", limit: 25 }
42 |       );
43 |     },
44 | 
45 |     async listByEmail(emails) {
46 |       return await ds.fetch<User>(
47 |         "users",
48 |         { email: { in: emails } },
49 |         { sortDir: "DESC", limit: 25 }
50 |       );
51 |     },
52 | 
53 |     async store(user) {
54 |       try {
55 |         const result = await ds.store("users", user, {
56 |           unique: ["email"],
57 |           whereNotExists: ["email"],
58 |         });
59 | 
60 |         if (Array.isArray(user)) {
61 |           user.forEach((u, i) => {
62 |             u.recordId = result.recordIds?.[i];
63 |           });
64 |         } else {
65 |           user.recordId = result.recordIds?.[0];
66 |         }
67 |       } catch {}
68 | 
69 |       return user;
70 |     },
71 | 
72 |     async delete(recordIds) {
73 |       return await ds.removeByRecordId("users", recordIds);
74 |     },
75 |   },
76 | };
77 | 
78 | export default store;
79 | 


--------------------------------------------------------------------------------
/src/components/TemplatePreviewDrawer/TemplatePreviewDrawer.tsx:
--------------------------------------------------------------------------------
 1 | import Box from "@mui/material/Box";
 2 | import Drawer from "@mui/material/Drawer";
 3 | import DialogTitle from "@mui/material/DialogTitle";
 4 | import IconButton from "@mui/material/IconButton";
 5 | import CloseIcon from "@mui/icons-material/Close";
 6 | import { useTheme } from "@mui/material/styles";
 7 | import Typography from "@mui/material/Typography";
 8 | import TemplatePreview from "../TemplatePreview";
 9 | 
10 | interface Props {
11 |   onSend: (emails?: string[]) => void;
12 |   onClose: () => void;
13 |   success?: string;
14 |   error?: string;
15 |   isLoading?: boolean;
16 |   isOpen: boolean;
17 |   html: string;
18 | }
19 | 
20 | export default function TemplatePreviewDrawer({
21 |   html,
22 |   isOpen,
23 |   onSend,
24 |   onClose,
25 |   error,
26 |   success,
27 | }: Props) {
28 |   const theme = useTheme();
29 | 
30 |   return (
31 |     <Drawer
32 |       open={isOpen}
33 |       PaperProps={{ sx: { bgcolor: "transparent" } }}
34 |       onClose={onClose}
35 |       anchor="right"
36 |     >
37 |       <DialogTitle
38 |         sx={{
39 |           bgcolor: theme.palette.primary.dark,
40 |           color: "white",
41 |           width: "600px",
42 |         }}
43 |       >
44 |         <Typography>Preview</Typography>
45 |         <IconButton
46 |           aria-label="close"
47 |           onClick={onClose}
48 |           sx={{
49 |             position: "absolute",
50 |             right: 8,
51 |             top: 8,
52 |             color: (theme) => theme.palette.grey[500],
53 |           }}
54 |         >
55 |           <CloseIcon />
56 |         </IconButton>
57 |       </DialogTitle>
58 |       <Box
59 |         sx={{
60 |           flex: 1,
61 |           fontFamily: "monospace",
62 |         }}
63 |       >
64 |         <TemplatePreview
65 |           isOpen={isOpen}
66 |           error={error}
67 |           success={success}
68 |           onSend={onSend}
69 |           onClose={onClose}
70 |         >
71 |           <div
72 |             dangerouslySetInnerHTML={{
73 |               __html: html,
74 |             }}
75 |           ></div>
76 |         </TemplatePreview>
77 |       </Box>
78 |     </Drawer>
79 |   );
80 | }
81 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "monorepo-template",
 3 |   "private": true,
 4 |   "version": "0.0.0",
 5 |   "type": "module",
 6 |   "author": {
 7 |     "email": "hello@stormkit.io",
 8 |     "name": "Stormkit",
 9 |     "url": "https://www.stormkit.io"
10 |   },
11 |   "scripts": {
12 |     "dev": "NODE_NO_WARNINGS=1 nodemon --watch './src/vite-server.ts' --exec 'node --loader ts-node/esm' src/vite-server.ts",
13 |     "build": "npm run build:spa && npm run build:ssr && npm run build:ssg && npm run build:api && rm -rf .stormkit/server",
14 |     "build:spa": "tsc && vite build",
15 |     "build:ssg": "tsc && SSG=true node --loader ts-node/esm ./src/vite-server.ts",
16 |     "build:ssr": "tsc && vite build -c vite.config.ssr.ts",
17 |     "build:api": "rm -rf .stormkit/api && node --loader ts-node/esm vite.config.api.ts",
18 |     "test": "jest"
19 |   },
20 |   "dependencies": {
21 |     "@emotion/react": "^11.11.1",
22 |     "@emotion/styled": "^11.11.0",
23 |     "@mui/icons-material": "^5.11.16",
24 |     "@mui/lab": "^5.0.0-alpha.133",
25 |     "@mui/material": "^5.13.5",
26 |     "@stormkit/ds": "^1.4.2",
27 |     "formidable": "^3.5.0",
28 |     "http-status-codes": "^2.2.0",
29 |     "jose": "^4.14.4",
30 |     "nodemailer": "^6.9.3",
31 |     "react": "^18.2.0",
32 |     "react-dom": "^18.2.0",
33 |     "squirrelly": "^9.0.0"
34 |   },
35 |   "devDependencies": {
36 |     "@babel/preset-env": "^7.22.5",
37 |     "@stormkit/serverless": "^1.1.4",
38 |     "@types/express": "^4.17.17",
39 |     "@types/formidable": "^2.0.6",
40 |     "@types/glob": "^8.1.0",
41 |     "@types/jest": "^29.5.2",
42 |     "@types/node": "^20.3.1",
43 |     "@types/nodemailer": "^6.4.8",
44 |     "@types/react": "^18.2.13",
45 |     "@types/react-dom": "^18.2.6",
46 |     "@vitejs/plugin-react": "^4.0.1",
47 |     "babel-jest": "^29.5.0",
48 |     "dotenv": "^16.3.1",
49 |     "express": "^4.18.2",
50 |     "glob": "^10.2.7",
51 |     "jest": "^29.5.0",
52 |     "nodemon": "^2.0.22",
53 |     "react-router": "^6.6.2",
54 |     "react-router-dom": "^6.13.0",
55 |     "sqlite3": "^5.1.6",
56 |     "ts-jest": "^29.1.0",
57 |     "ts-node": "^10.9.1",
58 |     "typescript": "^5.1.3",
59 |     "vite": "^4.3.9",
60 |     "vite-plugin-static-copy": "^0.16.0"
61 |   }
62 | }
63 | 


--------------------------------------------------------------------------------
/src/api/_utils/test_utils.ts:
--------------------------------------------------------------------------------
 1 | import * as http from "node:http";
 2 | import { Socket } from "node:net";
 3 | import { Readable } from "node:stream";
 4 | 
 5 | interface Opts {
 6 |   method: "POST" | "GET" | "PATCH" | "DELETE" | "PUT" | "HEAD";
 7 |   data?: unknown;
 8 | }
 9 | 
10 | /**
11 |  * This is a helper function to prepare the request for tests.
12 |  *
13 |  * Usage:
14 |  *
15 |  * ```
16 |  * import app from "./index.post.ts";
17 |  *
18 |  * // ...
19 |  *
20 |  * it("", async () => {
21 |  *   const options = {};
22 |  *   await makeRequest(app, options);
23 |  * })
24 |  * ```
25 |  */
26 | export const makeRequest = async (
27 |   app: (req: http.IncomingMessage, res: http.ServerResponse) => void,
28 |   options?: Opts
29 | ) => {
30 |   const request = new http.IncomingMessage(new Socket());
31 |   const response = new http.ServerResponse(request);
32 | 
33 |   if (options?.method) {
34 |     request.method = options.method;
35 |   }
36 | 
37 |   request.headers = {
38 |     "content-type": "application/json",
39 |     "content-length": `${JSON.stringify(options?.data || {}).length}`,
40 |   };
41 | 
42 |   const writeSpy = jest.spyOn(response, "write");
43 | 
44 |   const retVal: {
45 |     statusCode?: number;
46 |     statusMessage?: string;
47 |     body?: string;
48 |   } = {};
49 | 
50 |   app(request, response);
51 | 
52 |   if (options?.data) {
53 |     const originalListener = request.on;
54 | 
55 |     request.on = (...args: any) => {
56 |       const event: string = args.shift();
57 |       const listener: (args?: any) => void = args.shift();
58 | 
59 |       if (event === "data") {
60 |         listener(JSON.stringify(options.data));
61 |       } else if (event === "end") {
62 |         listener();
63 |       } else if (event && listener) {
64 |         originalListener.bind(request, event, listener, ...args);
65 |       }
66 | 
67 |       return request;
68 |     };
69 |   }
70 | 
71 |   return new Promise((resolve) => {
72 |     writeSpy.mockImplementation((chunk, _, __) => {
73 |       retVal.statusCode = response.statusCode;
74 |       retVal.statusMessage = response.statusMessage;
75 | 
76 |       try {
77 |         retVal.body = JSON.parse(chunk);
78 |       } catch {
79 |         retVal.body = chunk;
80 |       }
81 | 
82 |       resolve(retVal);
83 | 
84 |       return true;
85 |     });
86 |   });
87 | };
88 | 


--------------------------------------------------------------------------------
/vite.config.api.ts:
--------------------------------------------------------------------------------
 1 | import { fileURLToPath } from "node:url";
 2 | import path from "node:path";
 3 | import fs from "node:fs";
 4 | import * as glob from "glob";
 5 | import dotenv from "dotenv";
 6 | import { build } from "vite";
 7 | 
 8 | dotenv.config();
 9 | const __dirname = path.dirname(fileURLToPath(import.meta.url));
10 | 
11 | const files = glob
12 |   .sync("src/api/**/*.ts")
13 |   // Filter out private files
14 |   .filter((file) => {
15 |     return file.indexOf("_") !== 0 && file.indexOf("/_") === -1;
16 |   })
17 |   .map((file: string) => ({
18 |     entry: `./${file}`,
19 |     distFileName: file.replace("src/api/", "").replace(".ts", ""),
20 |   }));
21 | 
22 | (async () => {
23 |   for (const file of files) {
24 |     await build({
25 |       ssr: {
26 |         noExternal: fs
27 |           .readdirSync(path.join(__dirname, "node_modules"), {
28 |             withFileTypes: true,
29 |           })
30 |           .filter(
31 |             (dirent) =>
32 |               // Filter out if the directory does not start with a dot
33 |               dirent.isDirectory() && !dirent.name.startsWith(".")
34 |           )
35 |           .map((dirent) => new RegExp(dirent.name)),
36 |       },
37 |       configFile: false,
38 |       resolve: {
39 |         alias: [
40 |           {
41 |             find: /^~/,
42 |             replacement: path.resolve(__dirname, "src"),
43 |           },
44 |           // See https://github.com/mapbox/node-pre-gyp/issues/661
45 |           // for more details.
46 |           {
47 |             find: /\.\/sqlite3/,
48 |             replacement: path.resolve(
49 |               __dirname,
50 |               "src",
51 |               "api",
52 |               "_db",
53 |               "mock-sqlite3.ts"
54 |             ),
55 |           },
56 |         ],
57 |         extensions: [".ts", ".tsx"],
58 |       },
59 |       define: {
60 |         ...Object.keys(process.env).reduce(
61 |           (obj: Record<string, string>, key: string) => {
62 |             obj[`process.env.${key}`] = JSON.stringify(process.env[key]);
63 |             return obj;
64 |           },
65 |           {}
66 |         ),
67 |       },
68 |       build: {
69 |         ssr: true,
70 |         emptyOutDir: false,
71 |         copyPublicDir: false,
72 |         rollupOptions: {
73 |           input: {
74 |             [file.distFileName]: file.entry,
75 |           },
76 |           output: {
77 |             dir: ".stormkit/api",
78 |             format: "cjs",
79 |             manualChunks: () => "",
80 |           },
81 |         },
82 |         minify: false,
83 |       },
84 |     });
85 |   }
86 | })();
87 | 


--------------------------------------------------------------------------------
/src/App.tsx:
--------------------------------------------------------------------------------
 1 | import type { RouteProps } from "react-router-dom";
 2 | import { useEffect, useState } from "react";
 3 | import { useLocation, Routes, Route, useNavigate } from "react-router-dom";
 4 | import { StyledEngineProvider, ThemeProvider } from "@mui/material/styles";
 5 | import Box from "@mui/material/Box";
 6 | import CssBaseline from "@mui/material/CssBaseline";
 7 | import LinearProgress from "@mui/material/LinearProgress";
 8 | import Layout from "~/components/Layout";
 9 | import { fetcher } from "./utils";
10 | import theme from "./mui-theme";
11 | import Context from "./context";
12 | 
13 | interface Props {
14 |   routes: RouteProps[];
15 | }
16 | 
17 | export default function App({ routes }: Props) {
18 |   const token =
19 |     typeof localStorage !== "undefined" ? localStorage.getItem("login") : null;
20 | 
21 |   const [isLoggedIn, setIsLoggedIn] = useState(false);
22 |   const [isLoading, setIsLoading] = useState(true);
23 |   const navigate = useNavigate();
24 |   const location = useLocation();
25 | 
26 |   useEffect(() => {
27 |     if (!token) {
28 |       setIsLoading(false);
29 |       return;
30 |     }
31 | 
32 |     fetcher("/api/session", {
33 |       method: "POST",
34 |       body: { token },
35 |       withAuth: false,
36 |     })
37 |       .then(async (res) => {
38 |         const data: { ok: boolean } = await res.json();
39 | 
40 |         if (data.ok) {
41 |           setIsLoggedIn(true);
42 | 
43 |           if (location.pathname === "/login") {
44 |             navigate("/");
45 |           }
46 |         }
47 |       })
48 |       .finally(() => {
49 |         setIsLoading(false);
50 |       });
51 |   }, [location.pathname, token]);
52 | 
53 |   useEffect(() => {
54 |     if (!isLoading && !isLoggedIn) {
55 |       navigate("/login");
56 |     }
57 |   }, [isLoading, isLoggedIn]);
58 | 
59 |   return (
60 |     <StyledEngineProvider injectFirst>
61 |       <CssBaseline />
62 |       <ThemeProvider theme={theme}>
63 |         <Context.Provider
64 |           value={{ setIsLoggedIn, isLoggedIn, accessToken: token }}
65 |         >
66 |           <Box
67 |             sx={{
68 |               margin: "auto",
69 |               minHeight: "100vh",
70 |               display: "flex",
71 |               alignItems: "center",
72 |               justifyContent: "center",
73 |               bgcolor: theme.palette.primary.main,
74 |             }}
75 |           >
76 |             {isLoading && <LinearProgress sx={{ width: 600 }} />}
77 |             {!isLoading && (
78 |               <Layout>
79 |                 <Routes>
80 |                   {routes.map((route) => (
81 |                     <Route key={route.path} {...route}></Route>
82 |                   ))}
83 |                 </Routes>
84 |               </Layout>
85 |             )}
86 |           </Box>
87 |         </Context.Provider>
88 |       </ThemeProvider>
89 |     </StyledEngineProvider>
90 |   );
91 | }
92 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Stormkit Mailer (under active development)
 2 | 
 3 | Send automated emails, or launch campaigns through a simple API or an intuitive UI.
 4 | 
 5 | ## Live Demo
 6 | 
 7 | Visit [https://mailer-demo.stormkit.dev](https://mailer-demo.stormkit.dev). 
 8 | 
 9 | - Username: `root`
10 | - Password: `123456`
11 | 
12 | It's a limited, read-only version.
13 | 
14 | ## Features
15 | 
16 | ☑️ &nbsp;**SES Mailer:** Send emails through your own Amazon SES account.
17 | 
18 | ✅ &nbsp;**SMTP:** Send emails through SMTP, such as your own Gmail account.
19 | 
20 | ☑️ &nbsp;**Gmail API** Send emails through Gmail API.
21 | 
22 | ✅ &nbsp;**Minimal UI:** Simple, intuitive UI to configure your templates
23 | 
24 | ☑️ &nbsp;**Subscribers:** Upload your subscribers either through API or manually
25 | 
26 | ☑️ &nbsp;**Unsubscribe:** Users can unsubscribe
27 | 
28 | ☑️ &nbsp;**API:** Send emails to your users through a simple API
29 | 
30 | ✅ &nbsp;**Free Forever:** Using Stormkit Mailer is free of charge
31 | 
32 | **Legend**
33 | 
34 | ✅ Ready to use
35 | 
36 | ☑️ Incomplete or not yet started
37 | 
38 | ## Configuration
39 | 
40 | The Mailer is configured through environment variables. You can configure these
41 | variables either by providing an `.env` file or by making these variables available
42 | to your process.
43 | 
44 | | Variable | Description | 
45 | | -------- | ----------- |
46 | | ADMIN_USERNAME   | The user name that is used to login the Mailer app. |
47 | | ADMIN_PASSWORD   | The password that is used to login the Mailer app. |
48 | | SMTP_USERNAME    | The user name that is used to login your SMTP provider. | 
49 | | SMTP_PASSWORD    | The password that is used to login your SMTP provider. |
50 | | JWT_SECRET       | A random string that is used to encrypt your JWT tokens. |
51 | | MAILER_FROM_ADDR | The address that will be used to send emails. | 
52 | 
53 | Note that some of these variables will be moved to the configuration page once the page is implemented. See https://github.com/stormkit-io/mailer/issues/2 for more details.
54 | 
55 | ## Local development
56 | 
57 | See [Docker](/#Docker) for containarized environments.
58 | 
59 | ```bash
60 | $ git clone git@github.com:stormkit-io/mailer.git
61 | $ cd mailer
62 | $ npm install
63 | $ npm run dev
64 | ```
65 | 
66 | Create an `.env` file on the root level of the repository and configure the environment variables mentioned in the [Configuration](#configuration) section.
67 | 
68 | ✅ HMR enabled
69 | 
70 | ✅ To force restarting the server, type `rs` and hit Enter on the terminal
71 | 
72 | ## Docker
73 | 
74 | ```bash
75 | $ docker build -t mailer .
76 | $ docker run -t mailer
77 | ```
78 | 
79 | Currently, the container does not stop when a Stop Signal is sent. See https://github.com/stormkit-io/mailer/issues/12 for more context.
80 | 
81 | To stop the container, you can execute: 
82 | 
83 | ```bash
84 | $ docker stop $(docker ps -q --filter ancestor=mailer)
85 | ```
86 | 
87 | ## License
88 | 
89 | MIT
90 | 


--------------------------------------------------------------------------------
/src/components/Layout/Layout.tsx:
--------------------------------------------------------------------------------
 1 | import { useContext } from "react";
 2 | import { useLocation } from "react-router";
 3 | import { useTheme } from "@mui/material/styles";
 4 | import Box from "@mui/material/Box";
 5 | import Link from "@mui/material/Link";
 6 | import FileCopyIcon from "@mui/icons-material/FileCopy";
 7 | import Alert from "@mui/material/Alert";
 8 | import Typography from "@mui/material/Typography";
 9 | import HomeIcon from "@mui/icons-material/Home";
10 | import UserIcon from "@mui/icons-material/Group";
11 | import Context from "~/context";
12 | 
13 | interface Props {
14 |   children: React.ReactNode;
15 | }
16 | 
17 | const isDemo = process.env.DEMO;
18 | 
19 | const menu = [
20 |   { text: "Home", path: "/", Icon: HomeIcon },
21 |   { text: "Templates", path: "/templates", Icon: FileCopyIcon },
22 |   { text: "Subscribers", path: "/subscribers", Icon: UserIcon },
23 | ];
24 | 
25 | export default function Layout({ children }: Props) {
26 |   const { isLoggedIn } = useContext(Context);
27 |   const location = useLocation();
28 |   const theme = useTheme();
29 | 
30 |   if (!isLoggedIn) {
31 |     return <>{children}</>;
32 |   }
33 | 
34 |   return (
35 |     <Box
36 |       sx={{
37 |         display: "flex",
38 |         width: "100%",
39 |         minHeight: "100vh",
40 |       }}
41 |     >
42 |       <Box
43 |         component="nav"
44 |         sx={{ bgcolor: theme.palette.primary.light, color: "white" }}
45 |       >
46 |         <Box
47 |           component="ul"
48 |           sx={{ p: 0, borderTop: "1px solid rgba(200,200,255,0.1)" }}
49 |         >
50 |           {menu.map((item) => (
51 |             <Box
52 |               component="li"
53 |               key={item.text}
54 |               sx={{
55 |                 listStyle: "none",
56 |               }}
57 |             >
58 |               <Link
59 |                 sx={{
60 |                   color: "white",
61 |                   display: "flex",
62 |                   alignItems: "center",
63 |                   py: 2,
64 |                   pl: 2,
65 |                   pr: 12,
66 |                   opacity: 0.5,
67 |                   bgcolor:
68 |                     item.path === location.pathname ? "rgba(0,0,0,0.25)" : "",
69 |                   borderBottom: `1px solid rgba(200,200,255,0.1)`,
70 |                   ":hover": {
71 |                     bgcolor: "rgba(200,200,255,0.01)",
72 |                     textDecoration: "none",
73 |                     opacity: 1,
74 |                   },
75 |                 }}
76 |                 href={item.path}
77 |               >
78 |                 <item.Icon sx={{ mr: 2 }} />
79 |                 {item.text}
80 |               </Link>
81 |             </Box>
82 |           ))}
83 |         </Box>
84 |       </Box>
85 |       <Box sx={{ flex: 1, minHeight: "100vh" }}>
86 |         {isDemo && (
87 |           <Alert sx={{ m: 2 }} variant="filled" color="warning">
88 |             <Typography>
89 |               You're using the Demo version. This is a <b>read-only</b> mode.
90 |               Your action will not be saved.
91 |             </Typography>
92 |           </Alert>
93 |         )}
94 |         {children}
95 |       </Box>
96 |     </Box>
97 |   );
98 | }
99 | 


--------------------------------------------------------------------------------
/src/mui-theme.tsx:
--------------------------------------------------------------------------------
  1 | import React from "react";
  2 | import { createTheme } from "@mui/material/styles";
  3 | import {
  4 |   Link as RouterLink,
  5 |   LinkProps as RouterLinkProps,
  6 | } from "react-router-dom";
  7 | import { LinkProps } from "@mui/material/Link";
  8 | 
  9 | const LinkBehavior = React.forwardRef<
 10 |   HTMLAnchorElement,
 11 |   Omit<RouterLinkProps, "to"> & { href: RouterLinkProps["to"] }
 12 | >((props, ref) => {
 13 |   const { href, ...other } = props;
 14 |   // Map href (MUI) -> to (react-router)
 15 |   return <RouterLink ref={ref} to={href} {...other} />;
 16 | });
 17 | 
 18 | export default createTheme({
 19 |   typography: {
 20 |     h6: {
 21 |       fontSize: "1.1rem",
 22 |     },
 23 |   },
 24 |   components: {
 25 |     MuiLink: {
 26 |       defaultProps: {
 27 |         component: LinkBehavior,
 28 |       } as LinkProps,
 29 |     },
 30 |     MuiTooltip: {
 31 |       styleOverrides: {
 32 |         arrow: {
 33 |           color: "#070415",
 34 |         },
 35 |         popper: {
 36 |           padding: 4,
 37 |         },
 38 |         tooltip: {
 39 |           color: "white",
 40 |           backgroundColor: "#070415",
 41 |           fontSize: 14,
 42 |         },
 43 |       },
 44 |     },
 45 |     MuiInputLabel: {
 46 |       styleOverrides: {
 47 |         root: {
 48 |           fontSize: 14,
 49 |           color: "white",
 50 |           opacity: 0.4,
 51 |           "&.Mui-focused": {
 52 |             color: "white",
 53 |           },
 54 |         },
 55 |       },
 56 |     },
 57 |     MuiSelect: {
 58 |       styleOverrides: {
 59 |         select: {
 60 |           backgroundColor: "#14141b",
 61 |         },
 62 |       },
 63 |     },
 64 |     MuiTextField: {
 65 |       styleOverrides: {
 66 |         root: {
 67 |           backgroundColor: "#14141b", // Customize the background color for TextFields
 68 |         },
 69 |       },
 70 |     },
 71 |     MuiInputBase: {
 72 |       styleOverrides: {
 73 |         input: {
 74 |           color: "white",
 75 |           fontSize: 14,
 76 |         },
 77 |       },
 78 |     },
 79 |     MuiAlert: {
 80 |       styleOverrides: {
 81 |         standardWarning: {
 82 |           backgroundColor: "#b75c22",
 83 |           color: "white",
 84 |         },
 85 |       },
 86 |     },
 87 |     MuiChip: {
 88 |       styleOverrides: {
 89 |         colorWarning: {
 90 |           backgroundColor: "#b75c22",
 91 |           color: "white",
 92 |         },
 93 |       },
 94 |     },
 95 |   },
 96 |   palette: {
 97 |     primary: {
 98 |       main: "#000000",
 99 |       light: "#14141b",
100 |       dark: "#0f0f0f",
101 |     },
102 |     secondary: {
103 |       main: "#d135ef",
104 |       light: "#c895cd",
105 |       dark: "#491f72",
106 |     },
107 |     error: {
108 |       main: "#c5394f",
109 |       light: "#d8657d",
110 |       dark: "#8c2b44",
111 |     },
112 |     warning: {
113 |       main: "#ffd54f", // Pastel yellow
114 |       light: "#ffee58",
115 |       dark: "#fbc02d",
116 |     },
117 |     info: {
118 |       main: "#f0f0f0",
119 |       light: "#c9c9c9",
120 |       dark: "#4f4f4f",
121 |     },
122 |     success: {
123 |       main: "#81c784", // Pastel green
124 |       light: "#a5d6a7",
125 |       dark: "#4caf50",
126 |     },
127 |     container: {},
128 |   },
129 |   breakpoints: {
130 |     values: {
131 |       xs: 320,
132 |       sm: 384,
133 |       md: 670,
134 |       lg: 1024,
135 |       xl: 1368,
136 |     },
137 |   },
138 | });
139 | 


--------------------------------------------------------------------------------
/src/entry-server.tsx:
--------------------------------------------------------------------------------
 1 | import { StaticRouter } from "react-router-dom/server";
 2 | import { renderToString } from "react-dom/server";
 3 | import fs from "node:fs";
 4 | import path from "node:path";
 5 | import { fileURLToPath } from "node:url";
 6 | import serverless from "@stormkit/serverless";
 7 | import createRoutes from "./routes";
 8 | import Context from "./context";
 9 | import App from "./App";
10 | 
11 | interface RenderReturn {
12 |   status: number;
13 |   content: string;
14 |   head: string;
15 | }
16 | 
17 | export type RenderFunction = (url: string) => Promise<RenderReturn>;
18 | 
19 | const defaultSEO: SEO = {
20 |   title: "Stormkit Mailer",
21 |   description:
22 |     "Deploy your own free, open-source email service with a single click. Connect seamlessly with Gmail or Amazon SES for secure and customizable email management. Take control of your communication with ease.",
23 |   domain: {
24 |     name: "",
25 |     url: "",
26 |   },
27 |   twitter: {
28 |     card: "summary_large_image",
29 |     creator: "@savasvedova",
30 |   },
31 | };
32 | 
33 | export const render: RenderFunction = async (url) => {
34 |   const { routes, head, context } = await createRoutes(url);
35 |   const tags = {
36 |     ...defaultSEO,
37 |     ...head,
38 |   };
39 | 
40 |   // Prefix the title with the domain.name property.
41 |   tags.title =
42 |     `${tags.domain?.name ? tags.domain.name + " | " : ""}` + tags.title;
43 | 
44 |   return {
45 |     status: 200,
46 |     content:
47 |       renderToString(
48 |         <Context.Provider value={context}>
49 |           <StaticRouter location={url}>
50 |             <App routes={routes} />
51 |           </StaticRouter>
52 |         </Context.Provider>
53 |       ) +
54 |       (context
55 |         ? `<script>window.CONTEXT = ${JSON.stringify(context)}</script>`
56 |         : ""),
57 |     head: [
58 |       `<title>${tags.title}</title>`,
59 |       `<meta charset="utf-8" />`,
60 |       `<meta name="viewport" content="width=device-width, initial-scale=1.0" />`,
61 |       `<meta name="description" content="${tags.description}" />`,
62 |       `<meta property="og:title" content="${tags.title}" />`,
63 |       `<meta property="og:url" content="${tags.domain?.url}" />`,
64 |       `<meta property="og:description" content="${tags.description}" />`,
65 |       `<meta property="og:image" content="${tags.domain?.url}/logo.svg" />`,
66 |       `<meta name="twitter:card" content="${tags.twitter!.card}" />`,
67 |       `<meta name="twitter:creator" content="${tags.twitter!.creator}" />`,
68 |       `<meta name="twitter:title" content="${tags.title}" />`,
69 |       `<meta name="twitter:description" content="${tags.description}" />`,
70 |       `<link rel="icon" type="image/svg+xml" href="/logo.svg" />`,
71 |     ]
72 |       .join("\n")
73 |       .trim(),
74 |   };
75 | };
76 | 
77 | // This handler add support for Stormkit environment. This is
78 | // the entry point of the serverless application.
79 | export const handler = serverless(async (req: any, res: any) => {
80 |   // We are in assets folder
81 |   const dir = path.dirname(fileURLToPath(import.meta.url));
82 |   const html = fs.readFileSync(path.join(dir, "./index.html"), "utf-8");
83 | 
84 |   const { status, content, head } = await render(
85 |     req.url?.split(/\?#/)[0] || "/"
86 |   );
87 | 
88 |   res.writeHead(status, "OK", { "Content-Type": "text/html; charset=utf-8" });
89 |   res.write(
90 |     html
91 |       .replace("</head>", `${head}</head>`)
92 |       .replace(`<div id="root"></div>`, `<div id="root">${content}</div>`)
93 |   );
94 |   res.end();
95 | });
96 | 


--------------------------------------------------------------------------------
/src/pages/login.tsx:
--------------------------------------------------------------------------------
  1 | import { FormEventHandler, useState, useContext, useEffect } from "react";
  2 | import { useTheme } from "@mui/material/styles";
  3 | import { useNavigate } from "react-router";
  4 | import Box from "@mui/material/Box";
  5 | import Typography from "@mui/material/Typography";
  6 | import TextField from "@mui/material/TextField";
  7 | import Button from "@mui/material/Button";
  8 | import { fetcher } from "~/utils";
  9 | import Context from "../context";
 10 | 
 11 | const Home: React.FC = () => {
 12 |   const { setIsLoggedIn, isLoggedIn } = useContext(Context);
 13 | 
 14 |   const [username, setUsername] = useState("");
 15 |   const [password, setPassword] = useState("");
 16 |   const theme = useTheme();
 17 |   const navigate = useNavigate();
 18 | 
 19 |   const handleSubmit: FormEventHandler = (e) => {
 20 |     e.preventDefault();
 21 | 
 22 |     return fetcher("/api/login", {
 23 |       method: "POST",
 24 |       body: { username, password },
 25 |     }).then(async (res) => {
 26 |       const data: { token?: string } = await res.json();
 27 | 
 28 |       if (data.token) {
 29 |         localStorage.setItem("login", data.token);
 30 |         setIsLoggedIn?.(true);
 31 |         navigate("/");
 32 |       }
 33 |     });
 34 |   };
 35 | 
 36 |   useEffect(() => {
 37 |     if (isLoggedIn) {
 38 |       navigate("/");
 39 |     }
 40 |   }, [isLoggedIn]);
 41 | 
 42 |   return (
 43 |     <Box
 44 |       sx={{
 45 |         m: "auto",
 46 |         maxWidth: "520px",
 47 |         width: "100%",
 48 |         p: 4,
 49 |         bgcolor: theme.palette.primary.dark,
 50 |         boxShadow: 1,
 51 |       }}
 52 |     >
 53 |       <Typography variant="h5" sx={{ mb: 3 }} color="info.main">
 54 |         Welcome to Mailer
 55 |       </Typography>
 56 |       <form onSubmit={handleSubmit}>
 57 |         <Box sx={{ mb: 2 }}>
 58 |           <TextField
 59 |             value={username}
 60 |             color="primary"
 61 |             label="Username"
 62 |             variant="filled"
 63 |             name="username"
 64 |             autoComplete="off"
 65 |             InputProps={{
 66 |               sx: { color: theme.palette.info.light },
 67 |             }}
 68 |             InputLabelProps={{
 69 |               color: "info",
 70 |               sx: {
 71 |                 color: theme.palette.info.main,
 72 |               },
 73 |             }}
 74 |             onChange={(e) => setUsername(e.currentTarget.value)}
 75 |             fullWidth
 76 |           />
 77 |         </Box>
 78 |         <Box sx={{ mb: 3 }}>
 79 |           <TextField
 80 |             value={password}
 81 |             label="Password"
 82 |             variant="filled"
 83 |             color="primary"
 84 |             name="password"
 85 |             type="password"
 86 |             autoComplete="off"
 87 |             InputProps={{
 88 |               sx: { color: theme.palette.info.light },
 89 |             }}
 90 |             InputLabelProps={{
 91 |               color: "info",
 92 |               sx: {
 93 |                 color: theme.palette.info.main,
 94 |               },
 95 |             }}
 96 |             onChange={(e) => setPassword(e.currentTarget.value)}
 97 |             fullWidth
 98 |           />
 99 |         </Box>
100 |         <Box sx={{ textAlign: "right" }}>
101 |           <Button
102 |             variant="contained"
103 |             color="secondary"
104 |             size="large"
105 |             type="submit"
106 |           >
107 |             Login
108 |           </Button>
109 |         </Box>
110 |       </form>
111 |     </Box>
112 |   );
113 | };
114 | 
115 | export default Home;
116 | 


--------------------------------------------------------------------------------
/src/assets/react.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>


--------------------------------------------------------------------------------
/src/api/mail.post.ts:
--------------------------------------------------------------------------------
  1 | import http from "node:http";
  2 | import * as Sqry from "squirrelly";
  3 | import { StatusCodes } from "http-status-codes";
  4 | import db from "./_db";
  5 | import defaultTemplate from "./_assets/default_template";
  6 | import { httpUtils as hu } from "./_utils";
  7 | import SMTP from "./_mailer/smtp";
  8 | 
  9 | interface Body {
 10 |   templateId?: string;
 11 |   subject?: string;
 12 |   email: string | string[];
 13 |   data?: Record<string, string>;
 14 | }
 15 | 
 16 | function validEmails(email: string | string[]): string[] {
 17 |   const emails = Array.isArray(email) ? email : [email];
 18 | 
 19 |   return emails.filter((e) => {
 20 |     if (typeof e !== "string") {
 21 |       return false;
 22 |     }
 23 | 
 24 |     const atIndex = e.indexOf("@");
 25 | 
 26 |     return atIndex > 0 && e.indexOf(".", atIndex) > -1;
 27 |   });
 28 | }
 29 | 
 30 | interface MailerProps {
 31 |   emails: string[];
 32 |   subject?: string;
 33 |   templateId: string;
 34 |   data?: Record<string, string>;
 35 | }
 36 | 
 37 | async function mailer(props: MailerProps) {
 38 |   const store = await db();
 39 | 
 40 |   const template =
 41 |     (await store.templates.byId(props.templateId)) || defaultTemplate;
 42 | 
 43 |   const html = props.data
 44 |     ? Sqry.render(template.html, props.data)
 45 |     : template.html;
 46 | 
 47 |   const subject =
 48 |     props.subject ||
 49 |     template.defaultSubject ||
 50 |     "Test email from Stormkit Mailer";
 51 | 
 52 |   if (process.env.SMTP_USERNAME && process.env.SMTP_PASSWORD) {
 53 |     return SMTP.send({ emails: props.emails, html, subject });
 54 |   }
 55 | }
 56 | 
 57 | export default hu.app(
 58 |   async (req: http.IncomingMessage, res: http.ServerResponse) => {
 59 |     const body = await hu.readBody<Body>(req);
 60 |     const errors: Record<string, string> = {};
 61 | 
 62 |     if (typeof body.templateId !== "string" || !body.templateId) {
 63 |       errors["templateId"] = "The template ID should be a non-empty string.";
 64 |     }
 65 | 
 66 |     const emails = validEmails(body.email);
 67 | 
 68 |     if (!emails.length) {
 69 |       errors["email"] =
 70 |         "Email should be either a valid email string or an array of valid emails.";
 71 |     }
 72 | 
 73 |     if (emails.length > 20) {
 74 |       errors["email"] =
 75 |         "You can send maximum to 20 emails using this endpoint. Try using lists for a larger request.";
 76 |     }
 77 | 
 78 |     if (Object.keys(errors).length > 0) {
 79 |       return hu.send(res, { errors }, { status: StatusCodes.BAD_REQUEST });
 80 |     }
 81 | 
 82 |     const store = await db();
 83 |     const users = await store.users.listByEmail(emails);
 84 |     const unsubscribed = users.reduce((obj: Record<string, boolean>, u) => {
 85 |       obj[u.email.toLowerCase()] = u.isUnsubscribed || false;
 86 |       return obj;
 87 |     }, {});
 88 | 
 89 |     const newUsers: User[] = [];
 90 | 
 91 |     // Filter unsubscribed users to prevent SPAM.
 92 |     const filteredEmails = emails.filter((email) => {
 93 |       const lowerCaseEmail = email.toLowerCase();
 94 |       const isUnsubscribed = unsubscribed[lowerCaseEmail];
 95 | 
 96 |       if (isUnsubscribed) {
 97 |         return false;
 98 |       }
 99 | 
100 |       // New user, insert into DB
101 |       if (typeof isUnsubscribed === "undefined") {
102 |         newUsers.push({
103 |           email: lowerCaseEmail,
104 |           isUnsubscribed: false,
105 |           createdAt: Date.now(),
106 |         });
107 |       }
108 | 
109 |       return true;
110 |     });
111 | 
112 |     if (newUsers.length > 0) {
113 |       await store.users.store(newUsers);
114 |     }
115 | 
116 |     try {
117 |       hu.send(res, {
118 |         ...(await mailer({
119 |           emails: filteredEmails,
120 |           templateId: body.templateId!,
121 |           data: body.data,
122 |           subject: body.subject,
123 |         })),
124 |         newUsers,
125 |         emails: filteredEmails,
126 |       });
127 |     } catch (e) {
128 |       hu.send(
129 |         res,
130 |         { error: (e as Error).message },
131 |         { status: StatusCodes.INTERNAL_SERVER_ERROR }
132 |       );
133 |     }
134 |   }
135 | );
136 | 


--------------------------------------------------------------------------------
/src/components/UploadDialog/UploadDialog.tsx:
--------------------------------------------------------------------------------
  1 | import { useEffect, useState } from "react";
  2 | import Box from "@mui/material/Box";
  3 | import Button from "@mui/material/Button";
  4 | import Alert from "@mui/material/Alert";
  5 | import AlertTitle from "@mui/material/AlertTitle";
  6 | import Chip from "@mui/material/Chip";
  7 | import Divider from "@mui/material/Divider";
  8 | import Dialog from "@mui/material/Dialog";
  9 | import DialogTitle from "@mui/material/DialogTitle";
 10 | import Typography from "@mui/material/Typography";
 11 | import LinearProgress from "@mui/material/LinearProgress";
 12 | import { fetcher } from "~/utils";
 13 | 
 14 | interface Props {
 15 |   open: boolean;
 16 |   file?: File;
 17 |   onClose: (numberOfCreatedUsers: number) => void;
 18 | }
 19 | 
 20 | interface UploadResponse {
 21 |   created: User[];
 22 |   duplicate: User[];
 23 |   total: number;
 24 | }
 25 | 
 26 | export default function UploadDialog({ open, file, onClose }: Props) {
 27 |   const [isLoading, setIsLoading] = useState(true);
 28 |   const [error, setError] = useState<string>();
 29 |   const [importedUsers, setImportedUsers] = useState<User[]>([]);
 30 |   const [duplicateUsers, setDuplicateUsers] = useState<User[]>([]);
 31 |   const [totalCount, setTotalCount] = useState(0);
 32 | 
 33 |   useEffect(() => {
 34 |     if (!open || !file) {
 35 |       return;
 36 |     }
 37 | 
 38 |     const formData = new FormData();
 39 |     formData.append("file", file);
 40 | 
 41 |     fetcher("/api/subscriber/upload", {
 42 |       method: "POST",
 43 |       body: formData,
 44 |       contentType: "multipart/form-data",
 45 |     })
 46 |       .then(async (response) => {
 47 |         if (response.ok) {
 48 |           const data = (await response.json()) as UploadResponse;
 49 |           setImportedUsers(data.created);
 50 |           setDuplicateUsers(data.duplicate);
 51 |           setTotalCount(data.total);
 52 |         } else {
 53 |           setError("Something went wrong while importing subscribers.");
 54 |         }
 55 |       })
 56 |       .catch(() => {
 57 |         setError("Something went wrong while importing subscribers.");
 58 |       })
 59 |       .finally(() => {
 60 |         setIsLoading(false);
 61 |       });
 62 |   }, [file, open]);
 63 | 
 64 |   return (
 65 |     <Dialog open={open} onClose={onClose} maxWidth="md">
 66 |       <DialogTitle>Upload subscribers</DialogTitle>
 67 |       <Box sx={{ p: 3, pt: 0, minWidth: "500px" }}>
 68 |         {isLoading && <LinearProgress />}
 69 |         {!isLoading && !error && (
 70 |           <Box>
 71 |             <Divider sx={{ mb: 2 }} />
 72 |             <Typography
 73 |               fontSize={14}
 74 |               sx={{
 75 |                 display: "flex",
 76 |                 justifyContent: "space-between",
 77 |                 alignContent: "center",
 78 |                 mb: 2,
 79 |               }}
 80 |             >
 81 |               Imported:{" "}
 82 |               <Chip
 83 |                 component="span"
 84 |                 label={`${importedUsers.length}/${totalCount}`}
 85 |               />
 86 |             </Typography>
 87 |             <Typography
 88 |               fontSize={14}
 89 |               sx={{
 90 |                 display: "flex",
 91 |                 justifyContent: "space-between",
 92 |                 alignContent: "center",
 93 |               }}
 94 |             >
 95 |               Duplicate:{" "}
 96 |               <Chip
 97 |                 component="span"
 98 |                 label={`${duplicateUsers.length}/${totalCount}`}
 99 |               />
100 |             </Typography>
101 |             <Divider sx={{ my: 2 }} />
102 |             <Box sx={{ textAlign: "center" }}>
103 |               <Button
104 |                 type="button"
105 |                 variant="outlined"
106 |                 color="secondary"
107 |                 onClick={() => {
108 |                   onClose(importedUsers.length);
109 |                 }}
110 |               >
111 |                 Close
112 |               </Button>
113 |             </Box>
114 |           </Box>
115 |         )}
116 |         {!isLoading && error && (
117 |           <Alert>
118 |             <AlertTitle>Importing failed</AlertTitle>
119 |             <Typography>{error}</Typography>
120 |           </Alert>
121 |         )}
122 |       </Box>
123 |     </Dialog>
124 |   );
125 | }
126 | 


--------------------------------------------------------------------------------
/src/components/TemplatePreview/TemplatePreview.tsx:
--------------------------------------------------------------------------------
  1 | import { useEffect, useState } from "react";
  2 | import { createPortal } from "react-dom";
  3 | import Box from "@mui/material/Box";
  4 | import Switch from "@mui/material/Switch";
  5 | import Button from "@mui/lab/LoadingButton";
  6 | import { useTheme } from "@mui/material/styles";
  7 | import Alert from "@mui/material/Alert";
  8 | import AlertTitle from "@mui/material/AlertTitle";
  9 | import TextField from "@mui/material/TextField";
 10 | import Typography from "@mui/material/Typography";
 11 | 
 12 | interface Props {
 13 |   children: React.ReactNode;
 14 |   onSend: (emails?: string[]) => void;
 15 |   onClose: () => void;
 16 |   success?: string;
 17 |   error?: string;
 18 |   isLoading?: boolean;
 19 |   isOpen: boolean;
 20 | }
 21 | 
 22 | export default function TemplatePreview({
 23 |   children,
 24 |   isLoading,
 25 |   isOpen,
 26 |   onSend,
 27 |   onClose,
 28 |   error: errorMessage,
 29 |   success: successMessage,
 30 | }: Props) {
 31 |   const theme = useTheme();
 32 |   const [error, setError] = useState<string>();
 33 |   const [testEmail, setTestEmail] = useState("");
 34 |   const [sendTestEmail, setSendTestEmail] = useState(true);
 35 |   const [contentRef, setContentRef] = useState<HTMLIFrameElement>();
 36 |   const mountNode = contentRef?.contentWindow?.document?.body;
 37 | 
 38 |   const focusInput = () => {
 39 |     const input = document.querySelector(
 40 |       "#send-test-email"
 41 |     ) as HTMLInputElement;
 42 | 
 43 |     input?.focus();
 44 |   };
 45 | 
 46 |   useEffect(() => {
 47 |     if (isOpen) {
 48 |       focusInput();
 49 |     }
 50 |   }, [isOpen]);
 51 | 
 52 |   return (
 53 |     <Box
 54 |       sx={{
 55 |         height: "100%",
 56 |         display: "flex",
 57 |         flexDirection: "column",
 58 |         bgcolor: theme.palette.primary.light,
 59 |       }}
 60 |     >
 61 |       <Box
 62 |         component="iframe"
 63 |         maxWidth="md"
 64 |         sx={{
 65 |           mt: 2,
 66 |           mx: 2,
 67 |           flex: 1,
 68 |           bgcolor: theme.palette.primary.light,
 69 |           border: "1px solid rgba(0,0,0,0.25)",
 70 |         }}
 71 |         ref={setContentRef}
 72 |       >
 73 |         {mountNode && (
 74 |           <Box>
 75 |             {
 76 |               <div>
 77 |                 {createPortal(
 78 |                   <Box style={{ padding: 15 }}>{children}</Box>,
 79 |                   mountNode
 80 |                 )}
 81 |               </div>
 82 |             }
 83 |           </Box>
 84 |         )}
 85 |       </Box>
 86 |       <Box
 87 |         sx={{
 88 |           m: 2,
 89 |           borderTop: "1px solid rgba(0,0,0,0.5)",
 90 |           bgcolor: "rgba(255,255,255,0.05)",
 91 |           pb: 2,
 92 |           pt: 1,
 93 |           display: "flex",
 94 |           flexDirection: "column",
 95 |         }}
 96 |       >
 97 |         <Typography sx={{ color: "white" }}>
 98 |           <Switch
 99 |             color="secondary"
100 |             checked={sendTestEmail}
101 |             onChange={(e) => {
102 |               setSendTestEmail(!sendTestEmail);
103 |             }}
104 |           />{" "}
105 |           Send a test email
106 |         </Typography>
107 |         <TextField
108 |           id="send-test-email"
109 |           variant="filled"
110 |           sx={{ mx: 1, flex: 1 }}
111 |           error={!!error}
112 |           value={testEmail}
113 |           disabled={!sendTestEmail}
114 |           autoComplete="off"
115 |           placeholder="test-1@example.org; test-2@example.org"
116 |           label="Test email address"
117 |           onChange={(e) => {
118 |             setTestEmail(e.target.value);
119 |           }}
120 |         />
121 |       </Box>
122 |       {(error || errorMessage) && (
123 |         <Alert sx={{ mx: 2, mb: 2 }} color="error">
124 |           <AlertTitle>Error</AlertTitle>
125 |           {error || errorMessage}
126 |         </Alert>
127 |       )}
128 |       {successMessage && (
129 |         <Alert sx={{ mx: 2, mb: 2 }} color="success">
130 |           <AlertTitle>Success</AlertTitle>
131 |           {successMessage}
132 |         </Alert>
133 |       )}
134 |       <Box
135 |         sx={{
136 |           flex: 1,
137 |           bgcolor: theme.palette.primary.light,
138 |           color: "white",
139 |           textAlign: "center",
140 |         }}
141 |       >
142 |         <Button
143 |           variant="outlined"
144 |           color="info"
145 |           sx={{ mr: 2 }}
146 |           onClick={(e) => {
147 |             e.preventDefault();
148 |             onClose();
149 |           }}
150 |         >
151 |           Cancel
152 |         </Button>
153 |         <Button
154 |           variant="outlined"
155 |           color="secondary"
156 |           loading={isLoading}
157 |           onClick={(e) => {
158 |             e.preventDefault();
159 | 
160 |             if (sendTestEmail && !testEmail) {
161 |               setError(
162 |                 "Specify the emails to send a test email or turn off the Switch."
163 |               );
164 | 
165 |               focusInput();
166 |             } else {
167 |               setError(undefined);
168 |               onSend(
169 |                 testEmail && sendTestEmail
170 |                   ? testEmail.split(";").map((e) => e.trim())
171 |                   : undefined
172 |               );
173 |             }
174 |           }}
175 |         >
176 |           Send
177 |         </Button>
178 |       </Box>
179 |     </Box>
180 |   );
181 | }
182 | 


--------------------------------------------------------------------------------
/src/vite-server.ts:
--------------------------------------------------------------------------------
  1 | import type { RenderFunction } from "./entry-server";
  2 | import fs from "fs";
  3 | import path from "path";
  4 | import express from "express";
  5 | import { fileURLToPath } from "node:url";
  6 | import { createServer as createViteServer } from "vite";
  7 | import { matchPath } from "@stormkit/serverless/router";
  8 | import dotenv from "dotenv";
  9 | 
 10 | dotenv.config();
 11 | 
 12 | const __dirname = path.dirname(fileURLToPath(import.meta.url));
 13 | 
 14 | function injectContent(head: string, content: string, template: string) {
 15 |   return template
 16 |     .replace(`</head>`, `${head}</head>`)
 17 |     .replace(`<div id="root"></div>`, `<div id="root">${content}</div>`);
 18 | }
 19 | 
 20 | async function createServer() {
 21 |   const app = express();
 22 | 
 23 |   // Create Vite server in middleware mode and configure the app type as
 24 |   // 'custom', disabling Vite's own HTML serving logic so parent server
 25 |   // can take control
 26 |   const vite = await createViteServer({
 27 |     server: { middlewareMode: true },
 28 |     appType: "custom",
 29 |   });
 30 | 
 31 |   // use vite's connect instance as middleware
 32 |   // if you use your own express router (express.Router()), you should use router.use
 33 |   app.use(vite.middlewares);
 34 | 
 35 |   // Add support for a local environment API.
 36 |   app.all(/\/api(\/.*|$)/, async (req, res) => {
 37 |     const route = matchPath(
 38 |       path.join(__dirname, "api"),
 39 |       req.originalUrl.split(/\?|#/)[0].replace("/api", ""),
 40 |       req.method
 41 |     );
 42 | 
 43 |     if (!route) {
 44 |       res.status(404);
 45 |       res.send();
 46 |       return;
 47 |     }
 48 | 
 49 |     const handler = (await vite.ssrLoadModule(`/src/api/${route}`)) as {
 50 |       default: express.Handler;
 51 |     };
 52 | 
 53 |     handler.default(req, res, () => {});
 54 |   });
 55 | 
 56 |   app.get("*", async (req, res, next) => {
 57 |     try {
 58 |       const url: string = req.originalUrl.split(/\?#/)[0] || "/";
 59 | 
 60 |       // // 1. Read and apply Vite HTML transforms. This injects the Vite HMR client, and
 61 |       // //    also applies HTML transforms from Vite plugins, e.g. global preambles
 62 |       // //    from @vitejs/plugin-react
 63 |       const template: string = await vite.transformIndexHtml(
 64 |         req.originalUrl,
 65 |         fs.readFileSync(path.resolve(__dirname, "..", "index.html"), "utf-8")
 66 |       );
 67 | 
 68 |       // 2. Load the server entry. vite.ssrLoadModule automatically transforms
 69 |       //    your ESM source code to be usable in Node.js! There is no bundling
 70 |       //    required, and provides efficient invalidation similar to HMR.
 71 |       const { render } = (await vite.ssrLoadModule("./src/entry-server")) as {
 72 |         render: RenderFunction;
 73 |       };
 74 | 
 75 |       const rendered = await render(url);
 76 | 
 77 |       return res
 78 |         .status(rendered.status)
 79 |         .set({ "Content-Type": "text/html" })
 80 |         .send(injectContent(rendered.head, rendered.content, template));
 81 |     } catch (e) {
 82 |       // If an error is caught, let Vite fix the stack trace so it maps back to
 83 |       // your actual source code.
 84 |       if (e instanceof Error) {
 85 |         vite.ssrFixStacktrace(e);
 86 |       }
 87 | 
 88 |       next(e);
 89 |     }
 90 |   });
 91 | 
 92 |   app.listen(5173, () => {
 93 |     console.log(`Server listening on http://localhost:5173`);
 94 |   });
 95 | }
 96 | 
 97 | async function generateStaticPages() {
 98 |   // Create Vite server to load the routes files
 99 |   const vite = await createViteServer({
100 |     server: { middlewareMode: true },
101 |     appType: "custom",
102 |   });
103 | 
104 |   const { default: routesToPrerender } = (await vite.ssrLoadModule(
105 |     "./src/prerender"
106 |   )) as { default: string[] };
107 | 
108 |   const { render } = await vite.ssrLoadModule("./src/entry-server");
109 | 
110 |   const dist = path.join(path.dirname(__dirname), ".stormkit/public");
111 | 
112 |   if (!fs.existsSync(dist)) {
113 |     throw new Error(
114 |       ".stormkit/public is not available. Did you run `npm run build:spa`?"
115 |     );
116 |   }
117 | 
118 |   const template = fs.readFileSync(path.join(dist, "index.html"), "utf-8");
119 |   const manifest = JSON.parse(
120 |     fs.readFileSync(path.join(dist, "manifest.json"), "utf-8")
121 |   );
122 | 
123 |   // Push `/` to the end if any.
124 |   routesToPrerender.sort((a: string, b: string) => {
125 |     return a === "/" || b === "/" ? -1 : 0;
126 |   });
127 | 
128 |   for (const r of routesToPrerender) {
129 |     const data = await render(r);
130 |     const fileName = r.endsWith("/") ? `${r}index.html` : `${r}.html`;
131 |     const absPath = path.join(dist, fileName);
132 |     let content = injectContent(data.head, data.content, template);
133 | 
134 |     // Fix the path to the static assets.
135 |     Object.keys(manifest).forEach((fileName) => {
136 |       if (fileName.startsWith("src/assets")) {
137 |         content = content.replace(fileName, manifest[fileName].file);
138 |       }
139 |     });
140 | 
141 |     fs.mkdirSync(path.dirname(absPath), { recursive: true });
142 |     fs.writeFileSync(absPath, content, "utf-8");
143 | 
144 |     console.log(`Prerendered: ${fileName}`);
145 |   }
146 | 
147 |   fs.unlinkSync(path.join(dist, "manifest.json"));
148 | 
149 |   await vite.close();
150 | }
151 | 
152 | (async () => {
153 |   if (process.env.SSG === "true") {
154 |     console.info("Detected SSG=true - generating static routes...");
155 |     await generateStaticPages();
156 |   } else {
157 |     createServer();
158 |   }
159 | })();
160 | 


--------------------------------------------------------------------------------
/src/api/_utils/http.ts:
--------------------------------------------------------------------------------
  1 | import * as http from "node:http";
  2 | import * as jwt from "jose";
  3 | import formidable from "formidable";
  4 | import { StatusCodes } from "http-status-codes";
  5 | 
  6 | interface CustomIncomingMessage<T> extends http.IncomingMessage {
  7 |   __body?: T;
  8 | }
  9 | 
 10 | async function readBody<T>(req: CustomIncomingMessage<T>): Promise<T> {
 11 |   const form = formidable({});
 12 | 
 13 |   if (req.method === "GET") {
 14 |     return Promise.resolve({} as T);
 15 |   }
 16 | 
 17 |   if (req.__body) {
 18 |     return Promise.resolve(req.__body);
 19 |   }
 20 | 
 21 |   return new Promise((resolve, reject) => {
 22 |     form.parse(req, (err, fields, files) => {
 23 |       if (err) {
 24 |         return reject(err.message);
 25 |       }
 26 | 
 27 |       req.__body = {
 28 |         ...fields,
 29 |         file: Array.isArray(files.file) ? files.file[0] : files.file,
 30 |       } as T;
 31 | 
 32 |       return resolve(req.__body!);
 33 |     });
 34 |   });
 35 | }
 36 | 
 37 | interface SendArgs {
 38 |   headers?: http.IncomingHttpHeaders;
 39 |   status?: number;
 40 |   statusMessage?: string;
 41 | }
 42 | 
 43 | const statusMessages: Record<string, string> = {
 44 |   [StatusCodes.OK]: "Success",
 45 |   [StatusCodes.BAD_REQUEST]: "Bad Request",
 46 |   [StatusCodes.UNAUTHORIZED]: "Unauthorized",
 47 |   [StatusCodes.FORBIDDEN]: "Forbidden",
 48 |   [StatusCodes.CREATED]: "Created",
 49 | };
 50 | 
 51 | function send(
 52 |   res: http.ServerResponse,
 53 |   content?: Object | string,
 54 |   args?: SendArgs
 55 | ) {
 56 |   args = args || {};
 57 |   args.status = args.status || 200;
 58 |   args.headers = args.headers || { "content-type": "application/json" };
 59 |   args.statusMessage =
 60 |     args.statusMessage || statusMessages[args.status] || "Success";
 61 | 
 62 |   content = typeof content === "object" ? JSON.stringify(content) : content;
 63 | 
 64 |   Object.keys(args.headers || {}).forEach((key) => {
 65 |     res.setHeader(key, args?.headers![key]!);
 66 |   });
 67 | 
 68 |   res.statusMessage = args.statusMessage;
 69 |   res.statusCode = args.status;
 70 |   res.writeHead(args.status, args.statusMessage);
 71 |   res.write(content);
 72 |   res.end();
 73 | }
 74 | 
 75 | /**
 76 |  * Checks whether the user is authorized or not. Pass either a
 77 |  * token or a http headers as an argument.
 78 |  */
 79 | async function isAuthorized(
 80 |   tokenOrHeaders: string | http.IncomingHttpHeaders
 81 | ): Promise<boolean> {
 82 |   let token: string | void;
 83 | 
 84 |   if (typeof tokenOrHeaders !== "string") {
 85 |     token = extractBearerToken(tokenOrHeaders);
 86 |   } else {
 87 |     token = tokenOrHeaders;
 88 |   }
 89 | 
 90 |   if (!token) {
 91 |     return false;
 92 |   }
 93 | 
 94 |   try {
 95 |     await jwt.jwtVerify(
 96 |       token,
 97 |       new TextEncoder().encode(process.env.JWT_SECRET)
 98 |     );
 99 | 
100 |     return true;
101 |   } catch {
102 |     return false;
103 |   }
104 | }
105 | 
106 | /**
107 |  * Helper function to extract the bearer token from the request headers.
108 |  */
109 | function extractBearerToken(headers: http.IncomingHttpHeaders): string | void {
110 |   const auth = headers["authorization"];
111 | 
112 |   if (!auth) {
113 |     return;
114 |   }
115 | 
116 |   const [authType, token] = auth.split(" ");
117 | 
118 |   switch (authType.toLowerCase()) {
119 |     case "bearer":
120 |       return token;
121 |     default:
122 |       return;
123 |   }
124 | }
125 | 
126 | interface AppOptions {
127 |   withSession?: boolean;
128 | }
129 | 
130 | function app(
131 |   handler: (req: http.IncomingMessage, res: http.ServerResponse) => void,
132 |   options: AppOptions = { withSession: true }
133 | ) {
134 |   return async (req: http.IncomingMessage, res: http.ServerResponse) => {
135 |     const method = req.method?.toUpperCase() || "GET";
136 |     const whiteList = ["/session", "/login"];
137 |     const pathname = (req.url?.split(/\?|#/)?.[0] || "").replace("/api", "");
138 | 
139 |     // If DEMO mode is turned on, only allow requests to /session and /login
140 |     if (
141 |       process.env.DEMO &&
142 |       method !== "GET" &&
143 |       whiteList.indexOf(pathname) === -1
144 |     ) {
145 |       return send(res, { demo: true });
146 |     }
147 | 
148 |     if (options.withSession && process.env.NODE_ENV !== "test") {
149 |       let { token } = await readBody<{ token?: string }>(req);
150 | 
151 |       if (req.headers["authorization"]) {
152 |         token = req.headers["authorization"].split("Bearer ").pop();
153 |       }
154 | 
155 |       if (!token || !(await isAuthorized(token))) {
156 |         return send(res, { ok: false }, { status: StatusCodes.UNAUTHORIZED });
157 |       }
158 |     }
159 | 
160 |     try {
161 |       await handler(req, res);
162 |     } catch (e) {
163 |       const internalServerErr = { status: StatusCodes.INTERNAL_SERVER_ERROR };
164 | 
165 |       if (e instanceof Error) {
166 |         return send(res, { error: e.message }, internalServerErr);
167 |       }
168 | 
169 |       if (e instanceof http.IncomingMessage) {
170 |         const body = await readBody(e);
171 | 
172 |         return send(
173 |           res,
174 |           {
175 |             statusCode: e.statusCode,
176 |             statusMessage: e.statusMessage,
177 |             error: body,
178 |           },
179 |           internalServerErr
180 |         );
181 |       }
182 | 
183 |       console.log(e);
184 | 
185 |       return send(
186 |         res,
187 |         { error: "Something unexpected happened." },
188 |         internalServerErr
189 |       );
190 |     }
191 |   };
192 | }
193 | 
194 | export default {
195 |   app,
196 |   isAuthorized,
197 |   readBody,
198 |   send,
199 | };
200 | 


--------------------------------------------------------------------------------
/src/components/TemplateDialog/TemplateDialog.tsx:
--------------------------------------------------------------------------------
  1 | import { FormEventHandler, useEffect, useState } from "react";
  2 | import Box from "@mui/material/Box";
  3 | import Link from "@mui/material/Link";
  4 | import TextField from "@mui/material/TextField";
  5 | import Drawer from "@mui/material/Drawer";
  6 | import DialogTitle from "@mui/material/DialogTitle";
  7 | import Button from "@mui/lab/LoadingButton";
  8 | import { useTheme } from "@mui/material/styles";
  9 | import { fetcher } from "~/utils";
 10 | 
 11 | interface Props {
 12 |   open: boolean;
 13 |   template?: Template;
 14 |   onClose: () => void;
 15 |   onSuccess: () => void;
 16 | }
 17 | 
 18 | const defaultHtml = `<!doctype html>
 19 | <html>
 20 |   <head>
 21 |     <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
 22 |     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 23 |   </head>
 24 |   <body>
 25 |     This is a {{ it.variable }}, and this is {{ it.anotherVariable }}.
 26 |   </body>
 27 | </html>`;
 28 | 
 29 | const errors: Record<string, string> = {
 30 |   name: "Template name is a required field.",
 31 |   html: "Template content is a required field.",
 32 |   generic: "Something went wrong while submitting the form.",
 33 | };
 34 | 
 35 | export default function TemplateDialog({
 36 |   open,
 37 |   template,
 38 |   onClose,
 39 |   onSuccess,
 40 | }: Props) {
 41 |   const theme = useTheme();
 42 |   const [formErrors, setFormErrors] = useState<Record<string, string>>({});
 43 |   const [isLoading, setIsLoading] = useState(false);
 44 |   const [templateName, setTemplateName] = useState(template?.name);
 45 |   const [templateDesc, setTemplateDesc] = useState(template?.description);
 46 |   const [templateSubj, setTemplateSubj] = useState(template?.defaultSubject);
 47 |   const [templateHtml, setTemplateHtml] = useState(
 48 |     template?.html || defaultHtml
 49 |   );
 50 | 
 51 |   useEffect(() => {
 52 |     setTemplateName(template?.name);
 53 |     setTemplateDesc(template?.description);
 54 |     setTemplateSubj(template?.defaultSubject);
 55 |     setTemplateHtml(template?.html || defaultHtml);
 56 |   }, [template]);
 57 | 
 58 |   const fields = [
 59 |     {
 60 |       label: "Template name",
 61 |       name: "name",
 62 |       value: templateName,
 63 |       onChange: setTemplateName,
 64 |     },
 65 |     {
 66 |       label: "Template description",
 67 |       name: "desc",
 68 |       value: templateDesc,
 69 |       onChange: setTemplateDesc,
 70 |     },
 71 |     {
 72 |       label: "Template default subject",
 73 |       name: "defaultSubject",
 74 |       value: templateSubj,
 75 |       onChange: setTemplateSubj,
 76 |     },
 77 |     {
 78 |       label: "Template content",
 79 |       name: "html",
 80 |       value: templateHtml,
 81 |       onChange: setTemplateHtml,
 82 |       multiline: true,
 83 |       description: (
 84 |         <Box sx={{ mt: 1, color: "white", opacity: 0.75, fontSize: 14 }}>
 85 |           Consult the{" "}
 86 |           <Link
 87 |             sx={{ color: "white", textDecoration: "underline" }}
 88 |             href="https://squirrelly.js.org/"
 89 |             target="_blank"
 90 |             rel="noreferrer noopener"
 91 |           >
 92 |             documentation
 93 |           </Link>{" "}
 94 |           to understand better the templating engine.
 95 |         </Box>
 96 |       ),
 97 |     },
 98 |   ];
 99 | 
100 |   const handleFormSubmit: FormEventHandler = (e) => {
101 |     e.preventDefault();
102 |     const errs: Record<string, string> = {};
103 | 
104 |     if (!templateName?.trim()) {
105 |       errs.name = errors.name;
106 |     }
107 | 
108 |     if (!templateHtml?.trim()) {
109 |       errs.html = errors.html;
110 |     }
111 | 
112 |     setFormErrors(errs);
113 | 
114 |     if (Object.keys(errs).length > 0) {
115 |       return;
116 |     }
117 | 
118 |     setIsLoading(true);
119 | 
120 |     fetcher("/api/template", {
121 |       method: template ? "PATCH" : "POST",
122 |       body: {
123 |         recordId: template?.recordId,
124 |         templateName: templateName?.trim(),
125 |         templateHtml: templateHtml?.trim(),
126 |         templateDesc: templateDesc?.trim(),
127 |         templateSubject: templateSubj?.trim(),
128 |       },
129 |     })
130 |       .then(() => {
131 |         onSuccess();
132 |       })
133 |       .catch(() => {
134 |         setFormErrors({ generic: errors.generic });
135 |       })
136 |       .finally(() => {
137 |         setIsLoading(false);
138 |       });
139 |   };
140 | 
141 |   const hasErrors = Object.keys(formErrors).length > 0;
142 | 
143 |   return (
144 |     <Drawer
145 |       open={open}
146 |       onClose={() => onClose()}
147 |       anchor="right"
148 |       PaperProps={{ sx: { bgcolor: theme.palette.primary.dark } }}
149 |       sx={{ bgcolor: "rgba(0,0,0,0.9)" }}
150 |     >
151 |       <Box
152 |         sx={{
153 |           width: "600px",
154 |           bgcolor: theme.palette.primary.dark,
155 |           maxHeight: "100%",
156 |           position: "relative",
157 |         }}
158 |       >
159 |         <DialogTitle
160 |           sx={{
161 |             color: "white",
162 |             bgcolor: theme.palette.primary.dark,
163 |             p: 2,
164 |             mb: 2,
165 |             zIndex: 2,
166 |             position: "sticky",
167 |             top: 0,
168 |             boxShadow: 1,
169 |           }}
170 |         >
171 |           {template ? "Update" : "Create"} template
172 |         </DialogTitle>
173 |         <Box component="form" onSubmit={handleFormSubmit}>
174 |           <Box sx={{ p: 2, pt: 0 }}>
175 |             {fields.map((field) => (
176 |               <Box key={field.name} sx={{ mb: 2 }}>
177 |                 <TextField
178 |                   inputProps={{
179 |                     sx: field.multiline
180 |                       ? { fontFamily: "monospace" }
181 |                       : undefined,
182 |                   }}
183 |                   name={field.name}
184 |                   label={field.label}
185 |                   color="primary"
186 |                   variant="filled"
187 |                   autoComplete="off"
188 |                   value={field.value || ""}
189 |                   fullWidth
190 |                   rows={field.multiline ? 20 : 1}
191 |                   multiline={field.multiline}
192 |                   onChange={(e) => {
193 |                     field.onChange(e.target.value);
194 |                   }}
195 |                 />
196 |                 {field.description}
197 |               </Box>
198 |             ))}
199 |           </Box>
200 |           <Box
201 |             sx={{
202 |               textAlign: "right",
203 |               position: "sticky",
204 |               bottom: 0,
205 |               bgcolor: theme.palette.primary.dark,
206 |               borderTop: "1px solid rgba(0,0,0,0.5)",
207 |               p: 2,
208 |             }}
209 |           >
210 |             <Button
211 |               variant="outlined"
212 |               color="secondary"
213 |               loading={isLoading}
214 |               type="submit"
215 |             >
216 |               Submit
217 |             </Button>
218 |           </Box>
219 |         </Box>
220 |       </Box>
221 |     </Drawer>
222 |   );
223 | }
224 | 


--------------------------------------------------------------------------------
/public/stormkit-logo.svg:
--------------------------------------------------------------------------------
1 | <svg width="246" height="69" viewBox="0 0 246 69" fill="none" xmlns="http://www.w3.org/2000/svg">
2 | <circle cx="34.5" cy="34.5" r="34.5" fill="#1F1C3B"/>
3 | <path d="M44.0974 39.5537C45.0152 37.9638 44.4705 35.9309 42.8807 35.013C41.2908 34.0951 39.2579 34.6398 38.34 36.2297L29.2 52.0606C28.2821 53.6505 28.8268 55.6834 30.4167 56.6013C32.0065 57.5192 34.0395 56.9745 34.9574 55.3846L44.0974 39.5537Z" fill="#F6005B"/>
4 | <path d="M36.7123 35.8407C37.6302 34.2508 37.0855 32.2179 35.4957 31.3C33.9058 30.3821 31.8729 30.9268 30.955 32.5167L30.1245 33.9551C29.2066 35.545 29.7513 37.5779 31.3412 38.4958C32.931 39.4137 34.9639 38.869 35.8818 37.2791L36.7123 35.8407Z" fill="#F6005B"/>
5 | <path d="M38.5593 16.2027C39.4772 14.6128 38.9325 12.5799 37.3427 11.662C35.7528 10.7441 33.7199 11.2888 32.802 12.8787L23.662 28.7096C22.7441 30.2995 23.2888 32.3324 24.8787 33.2503C26.4685 34.1682 28.5014 33.6235 29.4193 32.0336L38.5593 16.2027Z" fill="#F6005B"/>
6 | <path d="M92.44 48.288C91.168 48.288 89.95 48.192 88.786 48C87.634 47.82 86.632 47.604 85.78 47.352C84.928 47.088 84.328 46.848 83.98 46.632L84.808 41.412C85.252 41.664 85.852 41.922 86.608 42.186C87.364 42.45 88.198 42.678 89.11 42.87C90.034 43.05 90.964 43.14 91.9 43.14C93.16 43.14 94.072 42.96 94.636 42.6C95.212 42.24 95.5 41.664 95.5 40.872C95.5 40.296 95.326 39.81 94.978 39.414C94.63 39.006 94.054 38.592 93.25 38.172C92.458 37.752 91.396 37.224 90.064 36.588C88.936 36.048 87.898 35.412 86.95 34.68C86.002 33.936 85.24 33.048 84.664 32.016C84.088 30.972 83.8 29.736 83.8 28.308C83.8 27.084 84.028 26.016 84.484 25.104C84.952 24.18 85.606 23.412 86.446 22.8C87.298 22.188 88.306 21.732 89.47 21.432C90.634 21.12 91.924 20.964 93.34 20.964C95.356 20.964 97 21.15 98.272 21.522C99.544 21.894 100.42 22.224 100.9 22.512L99.856 27.516C99.316 27.096 98.482 26.712 97.354 26.364C96.238 26.004 95.092 25.824 93.916 25.824C93.076 25.824 92.386 25.92 91.846 26.112C91.306 26.292 90.904 26.55 90.64 26.886C90.376 27.222 90.244 27.612 90.244 28.056C90.244 28.596 90.4 29.076 90.712 29.496C91.036 29.904 91.534 30.312 92.206 30.72C92.89 31.116 93.772 31.56 94.852 32.052C96.004 32.568 97.03 33.096 97.93 33.636C98.842 34.176 99.616 34.764 100.252 35.4C100.888 36.036 101.368 36.762 101.692 37.578C102.028 38.382 102.196 39.312 102.196 40.368C102.196 41.964 101.818 43.356 101.062 44.544C100.318 45.732 99.22 46.656 97.768 47.316C96.316 47.964 94.54 48.288 92.44 48.288ZM112.587 48.288C111.147 48.288 109.995 48.048 109.131 47.568C108.279 47.088 107.661 46.368 107.277 45.408C106.905 44.436 106.719 43.224 106.719 41.772V32.232H104.415V28.776C105.303 28.524 106.035 28.266 106.611 28.002C107.187 27.726 107.607 27.312 107.871 26.76C108.003 26.484 108.147 26.154 108.303 25.77C108.459 25.386 108.621 24.984 108.789 24.564C108.957 24.144 109.119 23.748 109.275 23.376H113.235V27.948H118.419V32.232H113.235V39.36C113.235 40.608 113.301 41.52 113.433 42.096C113.577 42.672 113.817 43.038 114.153 43.194C114.489 43.35 114.951 43.428 115.539 43.428C115.839 43.428 116.181 43.392 116.565 43.32C116.949 43.236 117.315 43.134 117.663 43.014C118.011 42.894 118.287 42.768 118.491 42.636L119.247 46.236C118.935 46.548 118.437 46.866 117.753 47.19C117.081 47.502 116.295 47.766 115.395 47.982C114.495 48.186 113.559 48.288 112.587 48.288ZM131.197 48.288C129.349 48.288 127.777 48.006 126.481 47.442C125.197 46.866 124.165 46.08 123.385 45.084C122.605 44.088 122.041 42.948 121.693 41.664C121.345 40.368 121.177 39 121.189 37.56C121.225 35.424 121.687 33.624 122.575 32.16C123.463 30.696 124.681 29.586 126.229 28.83C127.777 28.074 129.553 27.696 131.557 27.696C134.029 27.696 135.997 28.188 137.461 29.172C138.937 30.156 139.993 31.458 140.629 33.078C141.265 34.698 141.565 36.468 141.529 38.388C141.505 40.536 141.049 42.348 140.161 43.824C139.285 45.288 138.073 46.398 136.525 47.154C134.977 47.91 133.201 48.288 131.197 48.288ZM131.341 43.788C132.625 43.788 133.513 43.32 134.005 42.384C134.509 41.436 134.761 40.008 134.761 38.1C134.761 37.02 134.659 36.036 134.455 35.148C134.251 34.248 133.909 33.534 133.429 33.006C132.949 32.466 132.289 32.196 131.449 32.196C130.141 32.196 129.229 32.67 128.713 33.618C128.209 34.566 127.957 35.952 127.957 37.776C127.957 38.88 128.059 39.888 128.263 40.8C128.479 41.712 128.833 42.438 129.325 42.978C129.817 43.518 130.489 43.788 131.341 43.788ZM151.177 36.192L150.925 31.476C151.165 30.744 151.567 30.09 152.131 29.514C152.707 28.938 153.391 28.488 154.183 28.164C154.987 27.828 155.857 27.66 156.793 27.66C157.081 27.66 157.369 27.678 157.657 27.714C157.945 27.75 158.149 27.804 158.269 27.876V34.32C158.113 34.212 157.867 34.104 157.531 33.996C157.195 33.876 156.721 33.816 156.109 33.816C155.149 33.816 154.339 33.96 153.679 34.248C153.031 34.524 152.503 34.848 152.095 35.22C151.699 35.592 151.393 35.916 151.177 36.192ZM145.057 48V27.948H150.745L151.069 31.512L151.573 32.052V48H145.057ZM161.936 48V27.948H167.876L168.02 30.108C168.476 29.736 169.046 29.364 169.73 28.992C170.426 28.62 171.188 28.308 172.016 28.056C172.844 27.804 173.696 27.672 174.572 27.66C175.904 27.624 177.02 27.846 177.92 28.326C178.82 28.806 179.492 29.616 179.936 30.756C180.392 31.884 180.62 33.408 180.62 35.328V48H174.14V36.552C174.14 35.58 174.062 34.818 173.906 34.266C173.75 33.714 173.492 33.324 173.132 33.096C172.772 32.868 172.28 32.76 171.656 32.772C171.188 32.772 170.642 32.88 170.018 33.096C169.406 33.312 168.872 33.636 168.416 34.068V48H161.936ZM180.368 34.212L179.288 30.216C179.6 29.928 180.092 29.58 180.764 29.172C181.436 28.764 182.24 28.41 183.176 28.11C184.124 27.798 185.156 27.648 186.272 27.66C187.616 27.648 188.768 27.876 189.728 28.344C190.688 28.812 191.426 29.61 191.942 30.738C192.458 31.866 192.716 33.408 192.716 35.364V48H186.2V36.516C186.2 35.544 186.122 34.788 185.966 34.248C185.81 33.696 185.546 33.312 185.174 33.096C184.814 32.868 184.316 32.76 183.68 32.772C182.996 32.772 182.354 32.934 181.754 33.258C181.154 33.582 180.692 33.9 180.368 34.212ZM217.239 27.948L203.703 42.528L203.883 41.196L203.955 44.688V48H197.547V36.084V18.804H203.955V29.856L203.667 37.236L202.911 36.336L209.823 27.948H217.239ZM205.503 39.612L209.751 35.112L217.707 48H210.471L205.503 39.612ZM220.016 48V27.948H226.532V48H220.016ZM222.968 25.536C221.924 25.536 221.06 25.224 220.376 24.6C219.704 23.964 219.368 23.16 219.368 22.188C219.368 21.528 219.548 20.922 219.908 20.37C220.268 19.818 220.742 19.38 221.33 19.056C221.93 18.72 222.584 18.552 223.292 18.552C224.36 18.552 225.218 18.864 225.866 19.488C226.526 20.1 226.856 20.904 226.856 21.9C226.856 22.884 226.478 23.736 225.722 24.456C224.966 25.176 224.048 25.536 222.968 25.536ZM238.235 48.288C236.795 48.288 235.643 48.048 234.779 47.568C233.927 47.088 233.309 46.368 232.925 45.408C232.553 44.436 232.367 43.224 232.367 41.772V32.232H230.063V28.776C230.951 28.524 231.683 28.266 232.259 28.002C232.835 27.726 233.255 27.312 233.519 26.76C233.651 26.484 233.795 26.154 233.951 25.77C234.107 25.386 234.269 24.984 234.437 24.564C234.605 24.144 234.767 23.748 234.923 23.376H238.883V27.948H244.067V32.232H238.883V39.36C238.883 40.608 238.949 41.52 239.081 42.096C239.225 42.672 239.465 43.038 239.801 43.194C240.137 43.35 240.599 43.428 241.187 43.428C241.487 43.428 241.829 43.392 242.213 43.32C242.597 43.236 242.963 43.134 243.311 43.014C243.659 42.894 243.935 42.768 244.139 42.636L244.895 46.236C244.583 46.548 244.085 46.866 243.401 47.19C242.729 47.502 241.943 47.766 241.043 47.982C240.143 48.186 239.207 48.288 238.235 48.288Z" fill="white"/>
7 | </svg>
8 | 


--------------------------------------------------------------------------------
/src/components/UserDialog/UserDialog.tsx:
--------------------------------------------------------------------------------
  1 | import { FormEventHandler, useEffect, useState } from "react";
  2 | import { StatusCodes } from "http-status-codes";
  3 | import Box from "@mui/material/Box";
  4 | import TextField from "@mui/material/TextField";
  5 | import Drawer from "@mui/material/Drawer";
  6 | import DialogTitle from "@mui/material/DialogTitle";
  7 | import Alert from "@mui/material/Alert";
  8 | import AlertTitle from "@mui/material/AlertTitle";
  9 | import Typography from "@mui/material/Typography";
 10 | import Button from "@mui/lab/LoadingButton";
 11 | import { useTheme } from "@mui/material/styles";
 12 | import { fetcher } from "~/utils";
 13 | 
 14 | interface Props {
 15 |   open: boolean;
 16 |   user?: User;
 17 |   onClose: () => void;
 18 |   onSuccess: () => void;
 19 | }
 20 | 
 21 | const errors: Record<string, string> = {
 22 |   email: "Email is a required field.",
 23 |   attributes: "Cannot parse JSON. Make sure attributes is a valid JSON.",
 24 |   generic: "Something went wrong while submitting the form.",
 25 | };
 26 | 
 27 | export default function UserDialog({ open, user, onClose, onSuccess }: Props) {
 28 |   const theme = useTheme();
 29 |   const [formErrors, setFormErrors] = useState<Record<string, string>>({});
 30 |   const [isLoading, setIsLoading] = useState(false);
 31 |   const [userEmail, setUserEmail] = useState(user?.email);
 32 |   const [userFirstName, setUserFirstName] = useState(user?.firstName);
 33 |   const [userLastName, setUserLastName] = useState(user?.lastName);
 34 |   const [userAttributes, setUserAttributes] = useState(
 35 |     user?.attributes ? JSON.stringify(user.attributes) : undefined
 36 |   );
 37 | 
 38 |   useEffect(() => {
 39 |     setUserEmail(user?.email);
 40 |     setUserFirstName(user?.firstName);
 41 |     setUserLastName(user?.lastName);
 42 |     setUserAttributes(
 43 |       user?.attributes ? JSON.stringify(user.attributes) : undefined
 44 |     );
 45 |   }, [user]);
 46 | 
 47 |   const fields = [
 48 |     {
 49 |       label: "Email",
 50 |       name: "email",
 51 |       value: userEmail,
 52 |       autoFocus: true,
 53 |       onChange: setUserEmail,
 54 |     },
 55 |     {
 56 |       label: "First name",
 57 |       name: "firstName",
 58 |       value: userFirstName,
 59 |       onChange: setUserFirstName,
 60 |     },
 61 |     {
 62 |       label: "Last name",
 63 |       name: "lastName",
 64 |       value: userLastName,
 65 |       onChange: setUserLastName,
 66 |     },
 67 |     {
 68 |       label: "Attributes",
 69 |       name: "attributes",
 70 |       value: userAttributes,
 71 |       onChange: setUserAttributes,
 72 |       multiline: true,
 73 |       description: (
 74 |         <Box sx={{ mt: 1, color: "white", opacity: 0.75, fontSize: 14 }}>
 75 |           Use this field to store additional data on the user.
 76 |         </Box>
 77 |       ),
 78 |     },
 79 |   ];
 80 | 
 81 |   const handleFormSubmit: FormEventHandler = (e) => {
 82 |     e.preventDefault();
 83 |     const errs: Record<string, string> = {};
 84 |     let parsedAttributes = {};
 85 | 
 86 |     if (!userEmail?.trim()) {
 87 |       errs.email = errors.email;
 88 |     }
 89 | 
 90 |     if (userAttributes?.trim()) {
 91 |       try {
 92 |         parsedAttributes = JSON.parse(userAttributes.trim());
 93 |       } catch {
 94 |         errs.attributes = errors.attributes;
 95 |       }
 96 |     }
 97 | 
 98 |     setFormErrors(errs);
 99 | 
100 |     if (Object.keys(errs).length > 0) {
101 |       return;
102 |     }
103 | 
104 |     setIsLoading(true);
105 | 
106 |     fetcher("/api/subscriber", {
107 |       method: user ? "PATCH" : "POST",
108 |       body: {
109 |         recordId: user?.recordId,
110 |         email: userEmail?.trim(),
111 |         firstName: userFirstName?.trim(),
112 |         lastName: userLastName?.trim(),
113 |         attributes: parsedAttributes,
114 |       },
115 |     })
116 |       .then(async (res) => {
117 |         if (res.status === StatusCodes.CREATED) {
118 |           setUserAttributes(undefined);
119 |           setUserEmail(undefined);
120 |           setUserFirstName(undefined);
121 |           setUserLastName(undefined);
122 |           onSuccess();
123 |         } else if (res.status === StatusCodes.BAD_REQUEST) {
124 |           const { errors } = (await res.json()) as {
125 |             errors: Record<string, string>;
126 |           };
127 | 
128 |           setFormErrors(errors);
129 |         } else {
130 |           setFormErrors({ generic: errors.generic });
131 |         }
132 |       })
133 |       .catch(() => {
134 |         setFormErrors({ generic: errors.generic });
135 |       })
136 |       .finally(() => {
137 |         setIsLoading(false);
138 |       });
139 |   };
140 | 
141 |   const hasFormError = formErrors && Object.keys(formErrors).length > 0;
142 | 
143 |   return (
144 |     <Drawer
145 |       open={open}
146 |       onClose={() => onClose()}
147 |       anchor="right"
148 |       PaperProps={{ sx: { bgcolor: theme.palette.primary.dark } }}
149 |       sx={{ bgcolor: "rgba(0,0,0,0.9)" }}
150 |     >
151 |       <Box
152 |         sx={{
153 |           width: "600px",
154 |           bgcolor: theme.palette.primary.dark,
155 |           maxHeight: "100%",
156 |           position: "relative",
157 |         }}
158 |       >
159 |         <DialogTitle
160 |           sx={{
161 |             color: "white",
162 |             bgcolor: theme.palette.primary.dark,
163 |             p: 2,
164 |             mb: 2,
165 |             zIndex: 2,
166 |             position: "sticky",
167 |             top: 0,
168 |             boxShadow: 1,
169 |           }}
170 |         >
171 |           {user ? "Update" : "Create"} subscriber
172 |         </DialogTitle>
173 |         <Box component="form" onSubmit={handleFormSubmit}>
174 |           <Box sx={{ p: 2, pt: 0 }}>
175 |             {fields.map((field) => (
176 |               <Box key={field.name} sx={{ mb: 2 }}>
177 |                 <TextField
178 |                   inputProps={{
179 |                     sx: field.multiline
180 |                       ? { fontFamily: "monospace" }
181 |                       : undefined,
182 |                   }}
183 |                   name={field.name}
184 |                   label={field.label}
185 |                   error={Boolean(formErrors[field.name])}
186 |                   color="primary"
187 |                   variant="filled"
188 |                   autoComplete="off"
189 |                   autoFocus={field.autoFocus}
190 |                   value={field.value || ""}
191 |                   fullWidth
192 |                   rows={field.multiline ? 10 : 1}
193 |                   multiline={field.multiline}
194 |                   onChange={(e) => {
195 |                     field.onChange(e.target.value);
196 |                   }}
197 |                 />
198 |                 {field.description}
199 |               </Box>
200 |             ))}
201 |           </Box>
202 |           {hasFormError && (
203 |             <Alert color="error" sx={{ mx: 2, mb: 2 }}>
204 |               <AlertTitle>Error</AlertTitle>
205 |               <Typography>
206 |                 {Object.keys(formErrors).map((key) => (
207 |                   <span key={key}>{formErrors[key]}</span>
208 |                 ))}
209 |               </Typography>
210 |             </Alert>
211 |           )}
212 |           <Box
213 |             sx={{
214 |               textAlign: "right",
215 |               position: "sticky",
216 |               bottom: 0,
217 |               bgcolor: theme.palette.primary.dark,
218 |               borderTop: "1px solid rgba(0,0,0,0.5)",
219 |               p: 2,
220 |             }}
221 |           >
222 |             <Button
223 |               variant="outlined"
224 |               color="secondary"
225 |               loading={isLoading}
226 |               type="submit"
227 |             >
228 |               Submit
229 |             </Button>
230 |           </Box>
231 |         </Box>
232 |       </Box>
233 |     </Drawer>
234 |   );
235 | }
236 | 


--------------------------------------------------------------------------------
/src/pages/templates.tsx:
--------------------------------------------------------------------------------
  1 | import { useState } from "react";
  2 | import Box from "@mui/material/Box";
  3 | import Button from "@mui/material/Button";
  4 | import Typography from "@mui/material/Typography";
  5 | import Table from "@mui/material/Table";
  6 | import TableBody from "@mui/material/TableBody";
  7 | import TableCell from "@mui/material/TableCell";
  8 | import TableContainer from "@mui/material/TableContainer";
  9 | import TableHead from "@mui/material/TableHead";
 10 | import TableRow from "@mui/material/TableRow";
 11 | import Switch from "@mui/material/Switch";
 12 | import Paper from "@mui/material/Paper";
 13 | import Alert from "@mui/material/Alert";
 14 | import AlertTitle from "@mui/material/AlertTitle";
 15 | import LinearProgress from "@mui/material/LinearProgress";
 16 | import IconButton from "@mui/material/IconButton";
 17 | import Menu from "@mui/material/Menu";
 18 | import MenuItem from "@mui/material/MenuItem";
 19 | import ListItemIcon from "@mui/material/ListItemIcon";
 20 | import MoreHorizIcon from "@mui/icons-material/MoreHoriz";
 21 | import EditIcon from "@mui/icons-material/Edit";
 22 | import TrashIcon from "@mui/icons-material/Delete";
 23 | import TemplateDialog from "~/components/TemplateDialog";
 24 | import Prompt from "~/components/Prompt";
 25 | import { useFetchTemplates, deleteTemplate } from "./templates.actions";
 26 | 
 27 | export default function Templates() {
 28 |   const [refreshToken, setRefreshToken] = useState(0);
 29 |   const { templates, isLoading } = useFetchTemplates({ refreshToken });
 30 |   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
 31 |   const [isDeletingTemplate, setIsDeletingTemplate] = useState(false);
 32 |   const [isTemplateDialogOpen, setIsTemplateDialogOpen] = useState(false);
 33 |   const [isDeletePromptOpen, setIsDeletePromptOpen] = useState(false);
 34 |   const [selectedTemplate, setSelectedTemplate] = useState<Template>(); // Gets set after Menu Icon is clicked
 35 | 
 36 |   const isMenuOpen = Boolean(anchorEl);
 37 | 
 38 |   return (
 39 |     <Box
 40 |       maxWidth="lg"
 41 |       sx={{
 42 |         m: "auto",
 43 |         width: "100%",
 44 |         p: 4,
 45 |         boxShadow: 1,
 46 |       }}
 47 |     >
 48 |       <Box
 49 |         sx={{
 50 |           mb: 3,
 51 |           display: "flex",
 52 |           justifyContent: "space-between",
 53 |           alignItems: "center",
 54 |         }}
 55 |       >
 56 |         <Typography variant="h5" color="info.main">
 57 |           Templates
 58 |         </Typography>
 59 |         <Button
 60 |           variant="outlined"
 61 |           color="secondary"
 62 |           onClick={() => {
 63 |             setIsTemplateDialogOpen(true);
 64 |             setSelectedTemplate(undefined);
 65 |           }}
 66 |         >
 67 |           New Template
 68 |         </Button>
 69 |       </Box>
 70 |       {templates.length ? (
 71 |         <TableContainer component={Paper}>
 72 |           <Table sx={{ minWidth: 650 }} aria-label="Templates">
 73 |             <TableHead>
 74 |               <TableRow>
 75 |                 <TableCell sx={{ maxWidth: "120px", fontWeight: "bold" }}>
 76 |                   Template ID
 77 |                 </TableCell>
 78 |                 <TableCell sx={{ fontWeight: "bold" }}>Name</TableCell>
 79 |                 <TableCell sx={{ fontWeight: "bold" }}>Description</TableCell>
 80 |                 <TableCell sx={{ fontWeight: "bold" }} align="right">
 81 |                   Default
 82 |                 </TableCell>
 83 |                 <TableCell />
 84 |               </TableRow>
 85 |             </TableHead>
 86 |             <TableBody>
 87 |               {templates.map((template) => (
 88 |                 <TableRow
 89 |                   key={template.recordId}
 90 |                   sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
 91 |                 >
 92 |                   <TableCell sx={{ fontWeight: "bold" }}>
 93 |                     #{template.recordId}
 94 |                   </TableCell>
 95 |                   <TableCell>{template.name}</TableCell>
 96 |                   <TableCell>{template.description}</TableCell>
 97 |                   <TableCell align="right">
 98 |                     <Switch checked={Boolean(template.isDefault)} />
 99 |                   </TableCell>
100 |                   <TableCell align="right">
101 |                     <IconButton
102 |                       aria-label="more"
103 |                       id={`menu-icon-${template.recordId}`}
104 |                       aria-controls={isMenuOpen ? "long-menu" : undefined}
105 |                       aria-expanded={isMenuOpen ? "true" : undefined}
106 |                       aria-haspopup="true"
107 |                       onClick={(e) => {
108 |                         setAnchorEl(e.currentTarget);
109 |                         setSelectedTemplate(template);
110 |                       }}
111 |                     >
112 |                       <MoreHorizIcon />
113 |                     </IconButton>
114 |                   </TableCell>
115 |                 </TableRow>
116 |               ))}
117 |             </TableBody>
118 |           </Table>
119 |         </TableContainer>
120 |       ) : isLoading ? (
121 |         <LinearProgress />
122 |       ) : (
123 |         <Alert color="warning">
124 |           <AlertTitle>You do not have any templates</AlertTitle>
125 |           <Typography>Click New Template to create a new one.</Typography>
126 |         </Alert>
127 |       )}
128 | 
129 |       <TemplateDialog
130 |         open={isTemplateDialogOpen}
131 |         template={selectedTemplate}
132 |         onSuccess={() => {
133 |           setRefreshToken(Date.now());
134 |           setIsTemplateDialogOpen(false);
135 |           setSelectedTemplate(undefined);
136 |         }}
137 |         onClose={() => {
138 |           setIsTemplateDialogOpen(false);
139 |           setSelectedTemplate(undefined);
140 |         }}
141 |       />
142 | 
143 |       <Menu
144 |         MenuListProps={{
145 |           "aria-labelledby": "long-button",
146 |         }}
147 |         open={isMenuOpen}
148 |         anchorEl={anchorEl}
149 |         anchorOrigin={{
150 |           vertical: "bottom",
151 |           horizontal: "left",
152 |         }}
153 |         onClose={() => {
154 |           setAnchorEl(null);
155 |           setSelectedTemplate(undefined);
156 |         }}
157 |       >
158 |         <MenuItem
159 |           onClick={() => {
160 |             setIsTemplateDialogOpen(true);
161 |             setAnchorEl(null);
162 |           }}
163 |         >
164 |           <ListItemIcon>
165 |             <EditIcon />
166 |           </ListItemIcon>
167 |           <Typography>Edit</Typography>
168 |         </MenuItem>
169 |         <MenuItem
170 |           onClick={() => {
171 |             setIsDeletePromptOpen(true);
172 |             setAnchorEl(null);
173 |           }}
174 |         >
175 |           <ListItemIcon>
176 |             <TrashIcon />
177 |           </ListItemIcon>
178 |           <Typography>Delete</Typography>
179 |         </MenuItem>
180 |       </Menu>
181 |       <Prompt
182 |         open={isDeletePromptOpen}
183 |         isLoading={isDeletingTemplate}
184 |         onCancel={() => {
185 |           setIsDeletePromptOpen(false);
186 |           setSelectedTemplate(undefined);
187 |         }}
188 |         onConfirm={() => {
189 |           setIsDeletingTemplate(true);
190 |           deleteTemplate({ recordId: selectedTemplate?.recordId! })
191 |             .then((data) => {
192 |               if (data.ok) {
193 |                 setIsDeletePromptOpen(false);
194 |                 setRefreshToken(Date.now());
195 |               }
196 |             })
197 |             .finally(() => {
198 |               setIsDeletingTemplate(false);
199 |             });
200 |         }}
201 |         message={
202 |           <Box component="span" sx={{ display: "block" }}>
203 |             This will delete the <b>{selectedTemplate?.name}</b> template. Do
204 |             you want to proceed?
205 |           </Box>
206 |         }
207 |       />
208 |     </Box>
209 |   );
210 | }
211 | 


--------------------------------------------------------------------------------
/src/pages/subscribers.tsx:
--------------------------------------------------------------------------------
  1 | import { useState } from "react";
  2 | import Box from "@mui/material/Box";
  3 | import Button from "@mui/material/Button";
  4 | import Typography from "@mui/material/Typography";
  5 | import Table from "@mui/material/Table";
  6 | import TableBody from "@mui/material/TableBody";
  7 | import TableCell from "@mui/material/TableCell";
  8 | import TableContainer from "@mui/material/TableContainer";
  9 | import TableHead from "@mui/material/TableHead";
 10 | import TableRow from "@mui/material/TableRow";
 11 | import Paper from "@mui/material/Paper";
 12 | import Alert from "@mui/material/Alert";
 13 | import AlertTitle from "@mui/material/AlertTitle";
 14 | import LinearProgress from "@mui/material/LinearProgress";
 15 | import IconButton from "@mui/material/IconButton";
 16 | import MoreHorizIcon from "@mui/icons-material/MoreHoriz";
 17 | import UserDialog from "~/components/UserDialog";
 18 | import UploadDialog from "~/components/UploadDialog";
 19 | import Prompt from "~/components/Prompt";
 20 | import CrudMenu from "~/components/CrudMenu";
 21 | import { useFetchUsers, deleteUser } from "./subscribers.actions";
 22 | 
 23 | export default function Users() {
 24 |   const [refreshToken, setRefreshToken] = useState(0);
 25 |   const { users, isLoading } = useFetchUsers({ refreshToken });
 26 |   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
 27 |   const [csvFile, setCsvFile] = useState<File>();
 28 |   const [isDeletingTemplate, setIsDeletingTemplate] = useState(false);
 29 |   const [isUserDialogOpen, setIsUserDialogOpen] = useState(false);
 30 |   const [isDeletePromptOpen, setIsDeletePromptOpen] = useState(false);
 31 |   const [selectedUser, setSelectedUser] = useState<User>(); // Gets set after Menu Icon is clicked
 32 | 
 33 |   const isMenuOpen = Boolean(anchorEl);
 34 | 
 35 |   return (
 36 |     <Box
 37 |       maxWidth="lg"
 38 |       sx={{
 39 |         m: "auto",
 40 |         width: "100%",
 41 |         p: 4,
 42 |         boxShadow: 1,
 43 |       }}
 44 |     >
 45 |       <Box
 46 |         sx={{
 47 |           mb: 3,
 48 |           display: "flex",
 49 |           justifyContent: "space-between",
 50 |           alignItems: "center",
 51 |         }}
 52 |       >
 53 |         <Typography variant="h5" color="info.main">
 54 |           Subscribers
 55 |         </Typography>
 56 |         <Box>
 57 |           <Button
 58 |             variant="outlined"
 59 |             color="secondary"
 60 |             sx={{ mr: 2 }}
 61 |             component="label"
 62 |           >
 63 |             Import
 64 |             <input
 65 |               accept=".csv"
 66 |               style={{ display: "none" }}
 67 |               type="file"
 68 |               onChange={(e) => {
 69 |                 setCsvFile(e.target?.files?.[0]);
 70 |                 e.target.value = "";
 71 |               }}
 72 |             />
 73 |           </Button>
 74 |           <Button
 75 |             variant="outlined"
 76 |             color="secondary"
 77 |             onClick={() => {
 78 |               setIsUserDialogOpen(true);
 79 |               setSelectedUser(undefined);
 80 |             }}
 81 |           >
 82 |             New Subscriber
 83 |           </Button>
 84 |         </Box>
 85 |       </Box>
 86 |       {users.length ? (
 87 |         <TableContainer component={Paper}>
 88 |           <Table sx={{ minWidth: 650 }} aria-label="users">
 89 |             <TableHead>
 90 |               <TableRow>
 91 |                 <TableCell sx={{ maxWidth: "120px", fontWeight: "bold" }}>
 92 |                   User ID
 93 |                 </TableCell>
 94 |                 <TableCell sx={{ fontWeight: "bold" }}>Email</TableCell>
 95 |                 <TableCell sx={{ fontWeight: "bold" }}>Full name</TableCell>
 96 |                 <TableCell sx={{ fontWeight: "bold" }}>Attributes</TableCell>
 97 |                 <TableCell />
 98 |               </TableRow>
 99 |             </TableHead>
100 |             <TableBody>
101 |               {users.map((user) => {
102 |                 const fullName = [user.firstName, user.lastName]
103 |                   .filter((i) => i)
104 |                   .join(" ");
105 | 
106 |                 return (
107 |                   <TableRow
108 |                     key={user.recordId}
109 |                     sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
110 |                   >
111 |                     <TableCell sx={{ fontWeight: "bold" }}>
112 |                       #{user.recordId}
113 |                     </TableCell>
114 |                     <TableCell>{user.email}</TableCell>
115 |                     <TableCell>{fullName || "-"}</TableCell>
116 |                     <TableCell sx={{ fontFamily: "monospace" }}>
117 |                       {JSON.stringify(user.attributes) || "{}"}
118 |                     </TableCell>
119 |                     <TableCell align="right">
120 |                       <IconButton
121 |                         aria-label="more"
122 |                         id={`menu-icon-${user.recordId}`}
123 |                         aria-controls={isMenuOpen ? "long-menu" : undefined}
124 |                         aria-expanded={isMenuOpen ? "true" : undefined}
125 |                         aria-haspopup="true"
126 |                         onClick={(e) => {
127 |                           setAnchorEl(e.currentTarget);
128 |                           setSelectedUser(user);
129 |                         }}
130 |                       >
131 |                         <MoreHorizIcon />
132 |                       </IconButton>
133 |                     </TableCell>
134 |                   </TableRow>
135 |                 );
136 |               })}
137 |             </TableBody>
138 |           </Table>
139 |         </TableContainer>
140 |       ) : isLoading ? (
141 |         <LinearProgress />
142 |       ) : (
143 |         <Alert color="warning">
144 |           <AlertTitle>You do not have any subscribers</AlertTitle>
145 |           <Typography>Click New Subscriber to create a new one.</Typography>
146 |         </Alert>
147 |       )}
148 | 
149 |       <UploadDialog
150 |         open={Boolean(csvFile)}
151 |         file={csvFile}
152 |         onClose={(numberOfCreatedUsers) => {
153 |           setCsvFile(undefined);
154 | 
155 |           if (numberOfCreatedUsers > 0) {
156 |             setRefreshToken(Date.now());
157 |           }
158 |         }}
159 |       />
160 | 
161 |       <UserDialog
162 |         open={isUserDialogOpen}
163 |         user={selectedUser}
164 |         onSuccess={() => {
165 |           setRefreshToken(Date.now());
166 |           setIsUserDialogOpen(false);
167 |           setSelectedUser(undefined);
168 |         }}
169 |         onClose={() => {
170 |           setIsUserDialogOpen(false);
171 |           setSelectedUser(undefined);
172 |         }}
173 |       />
174 | 
175 |       <CrudMenu
176 |         open={isMenuOpen}
177 |         anchorEl={anchorEl}
178 |         onClose={() => {
179 |           setSelectedUser(undefined);
180 |           setAnchorEl(null);
181 |         }}
182 |         onEditClick={() => {
183 |           setIsUserDialogOpen(true);
184 |           setAnchorEl(null);
185 |         }}
186 |         onDeleteClick={() => {
187 |           setIsDeletePromptOpen(true);
188 |           setAnchorEl(null);
189 |         }}
190 |       />
191 | 
192 |       <Prompt
193 |         open={isDeletePromptOpen}
194 |         isLoading={isDeletingTemplate}
195 |         onCancel={() => {
196 |           setIsDeletePromptOpen(false);
197 |           setSelectedUser(undefined);
198 |         }}
199 |         onConfirm={() => {
200 |           setIsDeletingTemplate(true);
201 |           deleteUser({ recordId: selectedUser?.recordId! })
202 |             .then((data) => {
203 |               console.log(data);
204 |               if (data.ok) {
205 |                 setIsDeletePromptOpen(false);
206 |                 setRefreshToken(Date.now());
207 |               }
208 |             })
209 |             .finally(() => {
210 |               setIsDeletingTemplate(false);
211 |             });
212 |         }}
213 |         message={
214 |           <Box component="span" sx={{ display: "block" }}>
215 |             This will delete the user with email <b>{selectedUser?.email}</b>.
216 |             Do you want to proceed?
217 |           </Box>
218 |         }
219 |       />
220 |     </Box>
221 |   );
222 | }
223 | 


--------------------------------------------------------------------------------
/src/pages/index.tsx:
--------------------------------------------------------------------------------
  1 | import type * as SqrlType from "squirrelly";
  2 | import { useEffect, useMemo, useState } from "react";
  3 | import Box from "@mui/material/Box";
  4 | import Button from "@mui/lab/LoadingButton";
  5 | import Typography from "@mui/material/Typography";
  6 | import TextField from "@mui/material/TextField";
  7 | import Alert from "@mui/material/Alert";
  8 | import AlertTitle from "@mui/material/AlertTitle";
  9 | import Select from "@mui/material/Select";
 10 | import MenuItem from "@mui/material/MenuItem";
 11 | import InputLabel from "@mui/material/InputLabel";
 12 | import FormControl from "@mui/material/FormControl";
 13 | import { useTheme } from "@mui/material/styles";
 14 | import Prompt from "~/components/Prompt";
 15 | import TemplatePreviewDrawer from "~/components/TemplatePreviewDrawer";
 16 | import { useFetchTemplates } from "./templates.actions";
 17 | import { errors, validateEmails, sendEmail } from "./index.actions";
 18 | 
 19 | declare var Sqrl: typeof SqrlType;
 20 | 
 21 | const Home: React.FC = () => {
 22 |   const [isLoading, setIsLoading] = useState(false);
 23 |   const [toAddr, setToAddr] = useState("");
 24 |   const [error, setError] = useState<string>();
 25 |   const [subject, setSubject] = useState<string>("");
 26 |   const [showPrompt, setShowPrompt] = useState(false);
 27 |   const [testEmails, setTestEmails] = useState<string[]>();
 28 |   const [success, setSuccess] = useState<string>();
 29 |   const { templates } = useFetchTemplates();
 30 |   const [selectedTemplate, setSelectedTemplate] = useState<Template>();
 31 |   const [showPreview, setShowPreview] = useState(false);
 32 |   const [templateVars, setTemplateVars] = useState<Record<string, string>>({});
 33 |   const theme = useTheme();
 34 | 
 35 |   const targetEmails = useMemo(() => {
 36 |     return toAddr.split(";").map((e) => e.trim());
 37 |   }, [toAddr]);
 38 | 
 39 |   const templateHtml = useMemo(() => {
 40 |     const vars = { ...templateVars };
 41 | 
 42 |     Object.keys(vars).forEach((key) => {
 43 |       vars[key] = vars[key].replace(/\n/g, "<br/>");
 44 |     });
 45 | 
 46 |     return Sqrl.render(selectedTemplate?.html || "", vars);
 47 |   }, [templateVars]);
 48 | 
 49 |   useEffect(() => {
 50 |     if (templates?.length > 0) {
 51 |       setSelectedTemplate(templates[0]);
 52 |     }
 53 |   }, [templates]);
 54 | 
 55 |   useEffect(() => {
 56 |     setTemplateVars(
 57 |       selectedTemplate?.variables?.reduce((obj, key) => {
 58 |         obj[key] = key;
 59 |         return obj;
 60 |       }, {} as Record<string, string>) || {}
 61 |     );
 62 |   }, [selectedTemplate]);
 63 | 
 64 |   return (
 65 |     <Box sx={{ m: 2, display: "flex", justifyContent: "center" }}>
 66 |       <Box
 67 |         color="info.main"
 68 |         maxWidth="560px"
 69 |         sx={{
 70 |           flex: 1,
 71 |           py: 2,
 72 |           pt: 0,
 73 |         }}
 74 |       >
 75 |         <Typography variant="h6" sx={{ mt: 0, mb: 3, opacity: 0.5 }}>
 76 |           Send Email Manually
 77 |         </Typography>
 78 |         <form
 79 |           id="manual-email-form"
 80 |           onSubmit={(e) => {
 81 |             e.preventDefault();
 82 |           }}
 83 |         >
 84 |           <Typography
 85 |             sx={{
 86 |               bgcolor: theme.palette.primary.light,
 87 |               borderBottom: "1px solid rgba(0,0,0,0.3)",
 88 |               py: 1,
 89 |               px: 1.5,
 90 |               cursor: "not-allowed",
 91 |               fontSize: 14,
 92 |             }}
 93 |           >
 94 |             <Typography
 95 |               sx={{ fontSize: 12, mb: 0.25, display: "block", opacity: 0.4 }}
 96 |               component="span"
 97 |             >
 98 |               From
 99 |             </Typography>{" "}
100 |             {process.env.MAILER_FROM_ADDR}
101 |           </Typography>
102 |           <Box
103 |             sx={{
104 |               pt: 2,
105 |               mb: 2,
106 |             }}
107 |           >
108 |             <TextField
109 |               color="primary"
110 |               variant="filled"
111 |               label="To"
112 |               value={toAddr}
113 |               error={errors.to === error}
114 |               autoComplete="off"
115 |               autoFocus
116 |               placeholder="janny@doe.com; joe@doe.com"
117 |               InputProps={{ id: "to-field" }}
118 |               onChange={(e) => setToAddr(e.currentTarget.value)}
119 |               fullWidth
120 |             />
121 |           </Box>
122 |           <Box
123 |             sx={{
124 |               mb: 2,
125 |             }}
126 |           >
127 |             <TextField
128 |               color="primary"
129 |               variant="filled"
130 |               label="Subject"
131 |               value={subject}
132 |               autoComplete="off"
133 |               placeholder={
134 |                 selectedTemplate?.defaultSubject || "Subject of the email"
135 |               }
136 |               onChange={(e) => setSubject(e.currentTarget.value)}
137 |               fullWidth
138 |             />
139 |           </Box>
140 |           <FormControl
141 |             variant="filled"
142 |             fullWidth
143 |             sx={{ mb: selectedTemplate?.variables ? 0 : 2 }}
144 |           >
145 |             <InputLabel
146 |               id="template-select"
147 |               sx={{ color: "white", opacity: 0.4 }}
148 |               color="info"
149 |             >
150 |               Template
151 |             </InputLabel>
152 |             <Select
153 |               labelId="template-select"
154 |               sx={{ color: "white" }}
155 |               value={selectedTemplate?.recordId || ""}
156 |               onChange={(e) => {
157 |                 setSelectedTemplate(
158 |                   templates.find((t) => t.recordId === e.target.value)
159 |                 );
160 |               }}
161 |             >
162 |               {templates?.map((template) => (
163 |                 <MenuItem key={template.recordId} value={template.recordId}>
164 |                   {template.name} (<b>#{template.recordId}</b>)
165 |                 </MenuItem>
166 |               ))}
167 |             </Select>
168 |           </FormControl>
169 |           {selectedTemplate?.variables ? (
170 |             <Box>
171 |               <Typography variant="h6" sx={{ mb: 2, mt: 3, opacity: 0.5 }}>
172 |                 Template Variables
173 |               </Typography>
174 |               {selectedTemplate.variables.map((variable) => (
175 |                 <TextField
176 |                   key={variable}
177 |                   multiline
178 |                   fullWidth
179 |                   value={templateVars[variable] || ""}
180 |                   variant="filled"
181 |                   sx={{ mb: 2 }}
182 |                   label={`it.${variable}`}
183 |                   color="primary"
184 |                   name={`data[${variable}]`}
185 |                   onChange={(e) => {
186 |                     setTemplateVars({
187 |                       ...templateVars,
188 |                       [variable]: e.target.value,
189 |                     });
190 |                   }}
191 |                 />
192 |               ))}
193 |             </Box>
194 |           ) : (
195 |             ""
196 |           )}
197 |           {!testEmails && error && (
198 |             <Alert color="error" sx={{ mb: 2 }}>
199 |               <AlertTitle>Error</AlertTitle>
200 |               <Typography>{error}</Typography>
201 |             </Alert>
202 |           )}
203 |           {!testEmails && success && (
204 |             <Alert color="success" sx={{ mb: 2 }}>
205 |               <AlertTitle>Success</AlertTitle>
206 |               <Typography>{success}</Typography>
207 |             </Alert>
208 |           )}
209 |           <Box sx={{ textAlign: "center" }}>
210 |             <Button
211 |               variant="outlined"
212 |               color="secondary"
213 |               loading={isLoading}
214 |               onClick={(e) => {
215 |                 e.preventDefault();
216 | 
217 |                 if (validateEmails(targetEmails)) {
218 |                   setSuccess(undefined);
219 |                   setError(undefined);
220 |                   setShowPreview(true);
221 |                 } else {
222 |                   setError(errors.to);
223 |                 }
224 |               }}
225 |             >
226 |               Preview & Send
227 |             </Button>
228 |           </Box>
229 |         </form>
230 |       </Box>
231 |       <Prompt
232 |         open={Boolean(showPrompt)}
233 |         isLoading={isLoading}
234 |         message={
235 |           <>
236 |             The email will be sent to the following address(es):{" "}
237 |             {testEmails?.join("; ") || targetEmails.join("; ")}
238 |           </>
239 |         }
240 |         onConfirm={() => {
241 |           sendEmail({
242 |             subject,
243 |             emails: testEmails || targetEmails,
244 |             template: selectedTemplate!,
245 |             setIsLoading,
246 |             onSuccess: (data) => {
247 |               setShowPrompt(false);
248 | 
249 |               if (!testEmails?.length) {
250 |                 setShowPreview(false);
251 |               }
252 | 
253 |               if (data.demo) {
254 |                 setSuccess("This is a Demo version. Your email was not sent.");
255 |               } else if (testEmails) {
256 |                 setSuccess("Your test email has been sent successfully.");
257 |               } else {
258 |                 setSuccess("Your email has been sent successfully.");
259 |               }
260 |             },
261 |           });
262 |         }}
263 |         onCancel={() => {
264 |           setShowPrompt(false);
265 |         }}
266 |       />
267 |       <TemplatePreviewDrawer
268 |         isOpen={showPreview}
269 |         html={templateHtml}
270 |         error={testEmails ? error : undefined}
271 |         success={testEmails ? success : undefined}
272 |         onSend={(emails) => {
273 |           setTestEmails(emails);
274 |           setShowPrompt(true);
275 |           setSuccess(undefined);
276 |           setError(undefined);
277 |         }}
278 |         onClose={() => {
279 |           setShowPreview(false);
280 |         }}
281 |       />
282 |     </Box>
283 |   );
284 | };
285 | 
286 | export default Home;
287 | 


--------------------------------------------------------------------------------
/src/api/_db/sqlite3.ts:
--------------------------------------------------------------------------------
  1 | import type { Store } from "./store.d";
  2 | import * as sqlite3 from "sqlite3";
  3 | 
  4 | interface SqliteStore extends Store {
  5 |   setup(): Promise<Store>;
  6 | }
  7 | 
  8 | const db = new sqlite3.Database(":memory:");
  9 | 
 10 | function insert(template: Template): Promise<Template> {
 11 |   return new Promise((resolve, reject) => {
 12 |     db.run(
 13 |       `INSERT INTO templates
 14 |           (template_name, template_html, template_desc, default_subject, is_default)
 15 |        VALUES
 16 |           ($name, $html, $desc, $defaultSubject, $isDefault)`,
 17 |       {
 18 |         $name: template.name,
 19 |         $html: template.html,
 20 |         $desc: template.description,
 21 |         $defaultSubject: template.defaultSubject || null,
 22 |         $isDefault: template.isDefault || false,
 23 |       },
 24 |       function (this: sqlite3.RunResult, err: Error | null) {
 25 |         if (err) {
 26 |           return reject(err);
 27 |         }
 28 | 
 29 |         return resolve({
 30 |           ...template,
 31 |           recordId: this.lastID.toString(),
 32 |         });
 33 |       }
 34 |     );
 35 |   });
 36 | }
 37 | 
 38 | function update(template: Template): Promise<Template> {
 39 |   return new Promise((resolve, reject) => {
 40 |     db.run(
 41 |       `UPDATE templates SET
 42 |         template_name = $name,
 43 |         template_html = $html,
 44 |         template_desc = $desc,
 45 |         default_subject = $defaultSubject,
 46 |         is_default = $isDefault
 47 |       WHERE 
 48 |         rowid = $recordId;`,
 49 |       {
 50 |         $recordId: Number(template.recordId),
 51 |         $name: template.name,
 52 |         $html: template.html,
 53 |         $desc: template.description,
 54 |         $defaultSubject: template.defaultSubject || null,
 55 |         $isDefault: template.isDefault || false,
 56 |       },
 57 |       function (this: sqlite3.RunResult, err: Error | null) {
 58 |         if (err) {
 59 |           return reject(err);
 60 |         }
 61 | 
 62 |         return resolve({
 63 |           ...template,
 64 |           recordId: this.lastID.toString(),
 65 |         });
 66 |       }
 67 |     );
 68 |   });
 69 | }
 70 | 
 71 | const queries = {
 72 |   selectUsers: `
 73 |     SELECT
 74 |       email, rowid as recordId, first_name as firstName,
 75 |       last_name as lastName, is_unsubscribed as isUnsubscribed,
 76 |       attributes, created_at as createdAt
 77 |     FROM users`,
 78 | 
 79 |   selectTemplates: `
 80 |     SELECT
 81 |       rowid as recordId,
 82 |       template_name as name,
 83 |       template_html as html,
 84 |       template_desc as description,
 85 |       default_subject as defaultSubject,
 86 |       is_default as isDefault
 87 |     FROM
 88 |       templates`,
 89 | };
 90 | 
 91 | const store: SqliteStore = {
 92 |   setup() {
 93 |     return new Promise((resolve, reject) => {
 94 |       db.serialize(() => {
 95 |         db.run(
 96 |           `CREATE TABLE IF NOT EXISTS migrations (
 97 |               migration_version INT NOT NULL DEFAULT 1,
 98 |               is_dirty BOOLEAN DEFAULT FALSE
 99 |            );`
100 |         );
101 | 
102 |         db.run(
103 |           `CREATE TABLE IF NOT EXISTS templates (
104 |               template_name TEXT NOT NULL,
105 |               template_html TEXT NOT NULL,
106 |               template_desc TEXT NULL,
107 |               default_subject TEXT NULL,
108 |               is_default BOOLEAN DEFAULT FALSE
109 |            );`
110 |         );
111 | 
112 |         db.run(
113 |           `CREATE TABLE IF NOT EXISTS users (
114 |             email TEXT UNIQUE NOT NULL,
115 |             first_name TEXT NULL,
116 |             last_name TEXT NULL,
117 |             is_unsubscribed BOOLEAN DEFAULT FALSE,
118 |             attributes JSONB NULL,
119 |             created_at NUMERIC
120 |           );`
121 |         );
122 | 
123 |         resolve(store);
124 |       });
125 |     });
126 |   },
127 | 
128 |   templates: {
129 |     list() {
130 |       return new Promise((resolve, reject) => {
131 |         db.serialize(() => {
132 |           db.all<Template>(
133 |             `${queries.selectTemplates} LIMIT 50`,
134 |             [],
135 |             (error, rows) => {
136 |               if (error) {
137 |                 return reject(error);
138 |               }
139 | 
140 |               resolve(
141 |                 rows.map((row) => ({
142 |                   ...row,
143 |                   recordId: row.recordId?.toString(),
144 |                 }))
145 |               );
146 |             }
147 |           );
148 |         });
149 |       });
150 |     },
151 | 
152 |     byId(id: string) {
153 |       return new Promise((resolve, reject) => {
154 |         db.serialize(() => {
155 |           db.all<Template>(
156 |             `${queries.selectTemplates} WHERE rowid = $recordId LIMIT 1;`,
157 |             {
158 |               $recordId: Number(id),
159 |             },
160 |             (error, rows) => {
161 |               if (error) {
162 |                 return reject(error);
163 |               }
164 | 
165 |               rows[0].recordId = rows[0].recordId?.toString();
166 |               resolve(rows[0] as Template);
167 |             }
168 |           );
169 |         });
170 |       });
171 |     },
172 | 
173 |     /**
174 |      * Insert or update the given template. If the template contains a recordId,
175 |      * UPDATE statement will be executed, otherwise INSERT.
176 |      */
177 |     store(template) {
178 |       return new Promise((resolve, reject) => {
179 |         db.serialize(async () => {
180 |           if (template.isDefault) {
181 |             db.run(
182 |               `UPDATE templates SET is_default = FALSE WHERE is_default = TRUE;`
183 |             );
184 |           }
185 | 
186 |           if (!template.recordId) {
187 |             return resolve(await insert(template));
188 |           }
189 | 
190 |           return resolve(await update(template));
191 |         });
192 |       });
193 |     },
194 | 
195 |     removeById(id: string) {
196 |       return new Promise((resolve, reject) => {
197 |         db.serialize(() => {
198 |           return db.run(
199 |             `DELETE FROM templates WHERE rowid = $recordId`,
200 |             { $recordId: Number(id) },
201 |             function (this: sqlite3.RunResult, err: Error | null) {
202 |               if (err) {
203 |                 return reject(err);
204 |               }
205 | 
206 |               return resolve({ ok: true });
207 |             }
208 |           );
209 |         });
210 |       });
211 |     },
212 |   },
213 | 
214 |   users: {
215 |     subscribers(afterId = "0") {
216 |       return new Promise((resolve, reject) => {
217 |         db.serialize(() => {
218 |           db.all<User>(
219 |             `${queries.selectUsers}
220 |              WHERE rowid > $recordId AND is_unsubscribed IS NOT TRUE
221 |              ORDER BY rowid DESC LIMIT 25;`,
222 |             { $recordId: Number(afterId) },
223 |             (error, rows) => {
224 |               if (error) {
225 |                 return reject(error);
226 |               }
227 | 
228 |               resolve(
229 |                 rows.map((row) => ({
230 |                   ...row,
231 |                   attributes: row.attributes
232 |                     ? JSON.parse(row.attributes as unknown as string)
233 |                     : {},
234 |                   recordId: row.recordId?.toString(),
235 |                   isUnsubscribed: Boolean(row.isUnsubscribed),
236 |                 }))
237 |               );
238 |             }
239 |           );
240 |         });
241 |       });
242 |     },
243 | 
244 |     list(afterId = "0") {
245 |       return new Promise((resolve, reject) => {
246 |         db.serialize(() => {
247 |           db.all<User>(
248 |             `${queries.selectUsers}
249 |              WHERE rowid > $recordId
250 |              ORDER BY rowid DESC LIMIT 25;`,
251 |             { $recordId: Number(afterId) },
252 |             (error, rows) => {
253 |               if (error) {
254 |                 return reject(error);
255 |               }
256 | 
257 |               resolve(
258 |                 rows.map((row) => ({
259 |                   ...row,
260 |                   attributes: row.attributes
261 |                     ? JSON.parse(row.attributes as unknown as string)
262 |                     : {},
263 |                   recordId: row.recordId?.toString(),
264 |                   isUnsubscribed: Boolean(row.isUnsubscribed),
265 |                 }))
266 |               );
267 |             }
268 |           );
269 |         });
270 |       });
271 |     },
272 | 
273 |     listByEmail(emails) {
274 |       return new Promise((resolve, reject) => {
275 |         db.serialize(() => {
276 |           db.all<User>(
277 |             `${queries.selectUsers}
278 |              WHERE 
279 |               email IN (${emails?.map(() => "?").join(", ")})
280 |              ORDER BY rowid DESC LIMIT 25;`,
281 |             emails,
282 |             (error, rows) => {
283 |               if (error) {
284 |                 return reject(error);
285 |               }
286 | 
287 |               resolve(
288 |                 rows.map((row) => ({
289 |                   ...row,
290 |                   attributes: row.attributes
291 |                     ? JSON.parse(row.attributes as unknown as string)
292 |                     : {},
293 |                   recordId: row.recordId?.toString(),
294 |                   isUnsubscribed: Boolean(row.isUnsubscribed),
295 |                 }))
296 |               );
297 |             }
298 |           );
299 |         });
300 |       });
301 |     },
302 | 
303 |     store(user: User | User[]) {
304 |       return new Promise((resolve, reject) => {
305 |         let values: string;
306 |         let params: any;
307 |         let query: string;
308 | 
309 |         if (Array.isArray(user)) {
310 |           values = user.map(() => "(?, ?, ?, ?, ?, ?)").join(", ");
311 |           params = user.flatMap((u) => [
312 |             u.email,
313 |             u.firstName,
314 |             u.lastName,
315 |             u.isUnsubscribed,
316 |             JSON.stringify(u.attributes || {}),
317 |             u.createdAt,
318 |           ]);
319 |         } else {
320 |           values = `($email, $firstName, $lastName, $isUnsubscribed, $attributes, $createdAt)`;
321 |           params = {
322 |             $email: user.email,
323 |             $firstName: user.firstName,
324 |             $lastName: user.lastName,
325 |             $isUnsubscribed: user.isUnsubscribed || false,
326 |             $attributes: JSON.stringify(user.attributes || {}),
327 |             $createdAt: user.createdAt || Date.now(),
328 |           };
329 |         }
330 | 
331 |         if (!Array.isArray(user) && user.recordId) {
332 |           params.$recordId = user.recordId;
333 |           delete params.$isUnsubscribed;
334 |           delete params.$createdAt;
335 | 
336 |           query = `
337 |             UPDATE users SET
338 |               email = $email,
339 |               first_name = $firstName,
340 |               last_name = $lastName,
341 |               attributes = $attributes
342 |             WHERE rowid = $recordId;`;
343 |         } else {
344 |           query = `
345 |             INSERT INTO users
346 |               (email, first_name, last_name, is_unsubscribed, attributes, created_at)
347 |             VALUES
348 |               ${values}`;
349 |         }
350 | 
351 |         db.serialize(() => {
352 |           db.run(
353 |             query,
354 |             params,
355 |             function (this: sqlite3.RunResult, err: Error | null) {
356 |               if (err) {
357 |                 return reject(err);
358 |               }
359 | 
360 |               if (Array.isArray(user)) {
361 |                 return resolve(user);
362 |               }
363 | 
364 |               if (!user.recordId) {
365 |                 user.recordId = this.lastID.toString();
366 |               }
367 | 
368 |               return resolve(user);
369 |             }
370 |           );
371 |         });
372 |       });
373 |     },
374 | 
375 |     async delete(recordIds) {
376 |       return new Promise((resolve, reject) => {
377 |         db.serialize(() => {
378 |           const rowIds = Array.isArray(recordIds) ? recordIds : [recordIds];
379 |           const values = rowIds.map(() => "?").join(", ");
380 |           const params = rowIds.flatMap((id) => [id]);
381 | 
382 |           db.run(
383 |             `DELETE FROM users WHERE rowid IN (${values})`,
384 |             params,
385 |             function (this: sqlite3.RunResult, err: Error | null) {
386 |               if (err) {
387 |                 return reject(err);
388 |               }
389 | 
390 |               resolve({ ok: true });
391 |             }
392 |           );
393 |         });
394 |       });
395 |     },
396 |   },
397 | };
398 | 
399 | export default store;
400 | 


--------------------------------------------------------------------------------
/src/api/_assets/default_template.ts:
--------------------------------------------------------------------------------
  1 | // Template from: https://github.com/leemunroe/responsive-html-email-template/blob/master/email.html
  2 | const template: Template = {
  3 |   name: "Standard Template",
  4 |   description: "Default template that will be used to send emails.",
  5 |   isDefault: true,
  6 |   html: `<!DOCTYPE html>
  7 | <html>
  8 |   <head>
  9 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 10 |     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 11 |     <title>Simple Transactional Email</title>
 12 |     <style>
 13 |       /* -------------------------------------
 14 |             GLOBAL RESETS
 15 |         ------------------------------------- */
 16 | 
 17 |       /* All the styling goes here */
 18 | 
 19 |       img {
 20 |         border: none;
 21 |         -ms-interpolation-mode: bicubic;
 22 |         max-width: 100%;
 23 |       }
 24 | 
 25 |       body {
 26 |         background-color: #14141b;
 27 |         font-family: sans-serif;
 28 |         -webkit-font-smoothing: antialiased;
 29 |         font-size: 14px;
 30 |         line-height: 1.4;
 31 |         margin: 0;
 32 |         padding: 0;
 33 |         -ms-text-size-adjust: 100%;
 34 |         -webkit-text-size-adjust: 100%;
 35 |         color: #f9f9f9;
 36 |       }
 37 | 
 38 |       table {
 39 |         border-collapse: separate;
 40 |         mso-table-lspace: 0pt;
 41 |         mso-table-rspace: 0pt;
 42 |         width: 100%;
 43 |       }
 44 | 
 45 |       table td {
 46 |         font-family: sans-serif;
 47 |         font-size: 14px;
 48 |         vertical-align: top;
 49 |       }
 50 | 
 51 |       /* -------------------------------------
 52 |             BODY & CONTAINER
 53 |         ------------------------------------- */
 54 | 
 55 |       .body {
 56 |         background-color: #14141b;
 57 |         width: 100%;
 58 |       }
 59 | 
 60 |       /* Set a max-width, and make it display as block so it will automatically stretch to that width, but will also shrink down on a phone or something */
 61 |       .container {
 62 |         display: block;
 63 |         margin: 0 auto !important;
 64 |         /* makes it centered */
 65 |         max-width: 580px;
 66 |         padding: 10px;
 67 |         width: 580px;
 68 |       }
 69 | 
 70 |       /* This should also be a block element, so that it will fill 100% of the .container */
 71 |       .content {
 72 |         box-sizing: border-box;
 73 |         display: block;
 74 |         margin: 0 auto;
 75 |         max-width: 580px;
 76 |         padding: 10px;
 77 |       }
 78 | 
 79 |       /* -------------------------------------
 80 |             HEADER, FOOTER, MAIN
 81 |         ------------------------------------- */
 82 |       .main {
 83 |         background: #000000;
 84 |         border-radius: 3px;
 85 |         margin-top: 5px;
 86 |         width: 100%;
 87 |       }
 88 | 
 89 |       .wrapper {
 90 |         box-sizing: border-box;
 91 |         padding: 20px;
 92 |       }
 93 | 
 94 |       .content-block {
 95 |         padding-bottom: 10px;
 96 |         padding-top: 10px;
 97 |       }
 98 | 
 99 |       .footer {
100 |         clear: both;
101 |         margin-top: 10px;
102 |         text-align: center;
103 |         width: 100%;
104 |       }
105 |       .footer td,
106 |       .footer p,
107 |       .footer span,
108 |       .footer a {
109 |         color: #999999;
110 |         font-size: 12px;
111 |         text-align: center;
112 |       }
113 | 
114 |       /* -------------------------------------
115 |             TYPOGRAPHY
116 |         ------------------------------------- */
117 |       h1,
118 |       h2,
119 |       h3,
120 |       h4 {
121 |         color: #000000;
122 |         font-family: sans-serif;
123 |         font-weight: 400;
124 |         line-height: 1.4;
125 |         margin: 0;
126 |         margin-bottom: 30px;
127 |       }
128 | 
129 |       h1 {
130 |         font-size: 35px;
131 |         font-weight: 300;
132 |         text-align: center;
133 |         text-transform: capitalize;
134 |       }
135 | 
136 |       p,
137 |       ul,
138 |       ol {
139 |         font-family: sans-serif;
140 |         font-size: 14px;
141 |         font-weight: normal;
142 |         margin: 0;
143 |         margin-bottom: 15px;
144 |       }
145 |       p li,
146 |       ul li,
147 |       ol li {
148 |         list-style-position: inside;
149 |         margin-left: 5px;
150 |       }
151 | 
152 |       a {
153 |         color: #3498db;
154 |         text-decoration: underline;
155 |       }
156 | 
157 |       /* -------------------------------------
158 |             BUTTONS
159 |         ------------------------------------- */
160 |       .btn {
161 |         box-sizing: border-box;
162 |         width: 100%;
163 |       }
164 |       .btn > tbody > tr > td {
165 |         padding-bottom: 15px;
166 |       }
167 |       .btn table {
168 |         width: auto;
169 |       }
170 |       .btn table td {
171 |         background-color: #ffffff;
172 |         border-radius: 5px;
173 |         text-align: center;
174 |       }
175 |       .btn a {
176 |         background-color: #ffffff;
177 |         border: solid 1px #3498db;
178 |         border-radius: 5px;
179 |         box-sizing: border-box;
180 |         color: #3498db;
181 |         cursor: pointer;
182 |         display: inline-block;
183 |         font-size: 14px;
184 |         font-weight: bold;
185 |         margin: 0;
186 |         padding: 12px 25px;
187 |         text-decoration: none;
188 |         text-transform: capitalize;
189 |       }
190 | 
191 |       .btn-primary table td {
192 |         background-color: #3498db;
193 |       }
194 | 
195 |       .btn-primary a {
196 |         background-color: #3498db;
197 |         border-color: #3498db;
198 |         color: #ffffff;
199 |       }
200 | 
201 |       /* -------------------------------------
202 |             OTHER STYLES THAT MIGHT BE USEFUL
203 |         ------------------------------------- */
204 |       .last {
205 |         margin-bottom: 0;
206 |       }
207 | 
208 |       .first {
209 |         margin-top: 0;
210 |       }
211 | 
212 |       .align-center {
213 |         text-align: center;
214 |       }
215 | 
216 |       .align-right {
217 |         text-align: right;
218 |       }
219 | 
220 |       .align-left {
221 |         text-align: left;
222 |       }
223 | 
224 |       .clear {
225 |         clear: both;
226 |       }
227 | 
228 |       .mt0 {
229 |         margin-top: 0;
230 |       }
231 | 
232 |       .mb0 {
233 |         margin-bottom: 0;
234 |       }
235 | 
236 |       .preheader {
237 |         color: transparent;
238 |         display: none;
239 |         height: 0;
240 |         max-height: 0;
241 |         max-width: 0;
242 |         opacity: 0;
243 |         overflow: hidden;
244 |         mso-hide: all;
245 |         visibility: hidden;
246 |         width: 0;
247 |       }
248 | 
249 |       hr {
250 |         border: 0;
251 |         border-bottom: 1px solid #f6f6f6;
252 |         margin: 20px 0;
253 |       }
254 | 
255 |       /* -------------------------------------
256 |           RESPONSIVE AND MOBILE FRIENDLY STYLES
257 |         ------------------------------------- */
258 | 
259 |       @media only screen and (max-width: 620px) {
260 |         table.body h1 {
261 |           font-size: 28px !important;
262 |           margin-bottom: 10px !important;
263 |         }
264 |         table.body p,
265 |         table.body ul,
266 |         table.body ol,
267 |         table.body td,
268 |         table.body span,
269 |         table.body a {
270 |           font-size: 16px !important;
271 |         }
272 |         table.body .wrapper,
273 |         table.body .article {
274 |           padding: 10px !important;
275 |         }
276 |         table.body .content {
277 |           padding: 0 !important;
278 |         }
279 |         table.body .container {
280 |           padding: 0 !important;
281 |           width: 100% !important;
282 |         }
283 |         table.body .main {
284 |           border-left-width: 0 !important;
285 |           border-radius: 0 !important;
286 |           border-right-width: 0 !important;
287 |         }
288 |         table.body .btn table {
289 |           width: 100% !important;
290 |         }
291 |         table.body .btn a {
292 |           width: 100% !important;
293 |         }
294 |         table.body .img-responsive {
295 |           height: auto !important;
296 |           max-width: 100% !important;
297 |           width: auto !important;
298 |         }
299 |       }
300 | 
301 |       /* -------------------------------------
302 |             PRESERVE THESE STYLES IN THE HEAD
303 |         ------------------------------------- */
304 | 
305 |       @media all {
306 |         .ExternalClass {
307 |           width: 100%;
308 |         }
309 |         .ExternalClass,
310 |         .ExternalClass p,
311 |         .ExternalClass span,
312 |         .ExternalClass font,
313 |         .ExternalClass td,
314 |         .ExternalClass div {
315 |           line-height: 100%;
316 |         }
317 |         .apple-link a {
318 |           color: inherit !important;
319 |           font-family: inherit !important;
320 |           font-size: inherit !important;
321 |           font-weight: inherit !important;
322 |           line-height: inherit !important;
323 |           text-decoration: none !important;
324 |         }
325 |         #MessageViewBody a {
326 |           color: inherit;
327 |           text-decoration: none;
328 |           font-size: inherit;
329 |           font-family: inherit;
330 |           font-weight: inherit;
331 |           line-height: inherit;
332 |         }
333 |         .btn-primary table td:hover {
334 |           background-color: #34495e !important;
335 |         }
336 |         .btn-primary a:hover {
337 |           background-color: #34495e !important;
338 |           border-color: #34495e !important;
339 |         }
340 |       }
341 |     </style>
342 |   </head>
343 |   <body>
344 |     {{ @if (it.preheader) }}
345 |     <span class="preheader">{{ it.preheader }}</span>
346 |     {{ /if }}
347 |     <table
348 |       role="presentation"
349 |       border="0"
350 |       cellpadding="0"
351 |       cellspacing="0"
352 |       class="body"
353 |     >
354 |       <tr>
355 |         <td>&nbsp;</td>
356 |         <td class="container">
357 |           <div class="content">
358 |             <table role="presentation" class="main">
359 |               <tr>
360 |                 <td class="wrapper">
361 |                   <table
362 |                     role="presentation"
363 |                     border="0"
364 |                     cellpadding="0"
365 |                     cellspacing="0"
366 |                   >
367 |                     <tr>
368 |                       <td>
369 |                         {{ it.content | safe }} {{ @if (it.callToActionText &&
370 |                         it.callToActionHref) }}
371 |                         <table
372 |                           role="presentation"
373 |                           border="0"
374 |                           cellpadding="0"
375 |                           cellspacing="0"
376 |                           class="btn btn-primary"
377 |                         >
378 |                           <tbody>
379 |                             <tr>
380 |                               <td align="left">
381 |                                 <table
382 |                                   role="presentation"
383 |                                   border="0"
384 |                                   cellpadding="0"
385 |                                   cellspacing="0"
386 |                                 >
387 |                                   <tbody>
388 |                                     <tr>
389 |                                       <td>
390 |                                         <a
391 |                                           href="{{ it.callToActionHref }}"
392 |                                           target="_blank"
393 |                                           >{{ it.callToActionText }}</a
394 |                                         >
395 |                                       </td>
396 |                                     </tr>
397 |                                   </tbody>
398 |                                 </table>
399 |                               </td>
400 |                             </tr>
401 |                           </tbody>
402 |                         </table>
403 |                         {{ /if }}
404 |                       </td>
405 |                     </tr>
406 |                   </table>
407 |                 </td>
408 |               </tr>
409 |             </table>
410 | 
411 |             <div class="footer">
412 |               <table
413 |                 role="presentation"
414 |                 border="0"
415 |                 cellpadding="0"
416 |                 cellspacing="0"
417 |               >
418 |                 <tr>
419 |                   <td class="content-block">
420 |                     Don't like these emails?
421 |                     <a href="{{ it.unsubscribeUrl }}">Unsubscribe</a>.
422 |                   </td>
423 |                 </tr>
424 |               </table>
425 |             </div>
426 |           </div>
427 |         </td>
428 |         <td>&nbsp;</td>
429 |       </tr>
430 |     </table>
431 |   </body>
432 | </html>`,
433 | };
434 | 
435 | export default template;
436 | 


--------------------------------------------------------------------------------