email-tester

quadratichq · Jan 29, 2024 · 4650f33 · 4650f33
1 parent c290095
commit 4650f33
Show file tree

Hide file tree

Showing 3 changed files with 127 additions and 52 deletions.
diff --git a/quadratic-api/src/routes/v0/internal.emails.$id.GET.ts b/quadratic-api/src/routes/v0/internal.emails.$id.GET.ts
@@ -21,59 +21,19 @@ async function handler(req: RequestWithUser, res: Response) {
   } = req;
 
   if (id === 'inviteToFile') {
-    return res
-      .status(200)
-      .type('html')
-      .send(
-        htmlDoc(
-          templates.inviteToFile({
-            fileName: '{{fileName}}',
-            // @ts-expect-error
-            fileRole: '{{fileRole}}',
-            fileUuid: '{{fileUuid}}',
-            origin: '{{origin}}',
-            senderName: '{{senderName}}',
-            senderEmail: '{{senderEmail}}',
-          })
-        )
-      );
+    return res.status(200).json(
+      templates.inviteToFile({
+        fileName: '{{fileName}}',
+        // @ts-expect-error
+        fileRole: '{{fileRole}}',
+        fileUuid: '{{fileUuid}}',
+        origin: '{{origin}}',
+        senderName: '{{senderName}}',
+        senderEmail: '{{senderEmail}}',
+      })
+    );
   }
 
   const keys = Object.keys(templates);
-  return res
-    .status(400)
-    .type('html')
-    .json({ error: 'Invalid email template ID. Valid IDs are: ' + keys.join(', ') + '.' });
-}
-
-function htmlDoc({ subject, html }: { subject: string; html: string }) {
-  return /*html*/ `<!doctype html><html>
-  <head>
-    <meta charset="utf-8">
-    <title>Invite to File</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';">
-    <style>
-      body {
-        font-family: sans-serif;
-        margin: 0;
-        padding: 0;
-        max-width: 800px;
-        margin: 0 auto;
-        background: #f7f7f7;
-      }
-      iframe {
-        background: #fff;
-        padding: 64px;
-        width: 100%;
-        height: 60vh;
-        border: none;
-      }
-    </style>
-  </head>
-  <body>
-    <p><strong>Subject:</strong> ${subject}</p>
-    <iframe srcDoc='${html.replace(/'/g, '')}'></iframe>
-  </body>
-  </html>`;
+  return res.status(400).json({ error: 'Invalid email template ID. Valid IDs are: ' + keys.join(', ') + '.' });
 }
diff --git a/quadratic-api/src/routes/v0/internal.emails.GET.ts b/quadratic-api/src/routes/v0/internal.emails.GET.ts
@@ -0,0 +1,8 @@
+import { Request, Response } from 'express';
+import { templates } from '../../email/templates';
+
+export default [handler];
+
+async function handler(req: Request, res: Response) {
+  return res.status(200).json(Object.keys(templates));
+}
diff --git a/quadratic-client/public/email-tester.html b/quadratic-client/public/email-tester.html
@@ -0,0 +1,107 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>Invite to File</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <style>
+      *,
+      *::before,
+      *::after {
+        box-sizing: border-box;
+      }
+      body {
+        font-family: sans-serif;
+        margin: 0;
+        padding: 0;
+        max-width: 560px;
+        margin: 0 auto;
+        background: #f7f7f7;
+      }
+      iframe {
+        width: 100%;
+        border: none;
+      }
+      .container {
+        background: #fff;
+
+        min-height: calc(100vh - 6rem);
+        display: flex;
+      }
+      .toolbar {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        gap: 0.25rem;
+        height: 4rem;
+
+        > * {
+          margin: 0;
+        }
+      }
+      .error {
+        color: red;
+      }
+      .muted {
+        color: #999;
+      }
+    </style>
+  </head>
+  <body>
+    <script type="module" crossorigin="anonymous">
+      import { h, render } from 'https://esm.sh/preact';
+      import { useState, useEffect } from 'https://esm.sh/preact/hooks';
+      import htm from 'https://esm.sh/htm';
+
+      // TODO: update env var somehow...
+      const API_URL = `http://localhost:8000`;
+
+      // Initialize app
+      const html = htm.bind(h);
+      render(html`<${App} />`, document.body);
+
+      function App(props) {
+        const [emailIds, setEmailIds] = useState([]);
+        const [email, setEmail] = useState({ html: '', subject: '' });
+
+        useEffect(() => {
+          fetch(`${API_URL}/v0/internal/emails`)
+            .then((res) => res.json())
+            .then((emailIds) => {
+              setEmailIds(emailIds);
+            })
+            .catch((err) => {
+              console.error(err);
+            });
+        }, []);
+
+        return html`
+          <div class="toolbar">
+            <div>
+              <select
+                onChange=${(e) => {
+                  const id = e.target.value;
+                  fetch(`${API_URL}/v0/internal/emails/${id}`)
+                    .then((res) => res.json())
+                    .then((email) => {
+                      setEmail(email);
+                    })
+                    .catch((err) => {
+                      console.error(err);
+                    });
+                }}
+              >
+                <option disabled selected>Select a template...</option>
+                ${emailIds.map((emailId) => html`<option value="${emailId}">${emailId}</option>`)}
+              </select>
+            </div>
+            <p class="subject"><strong>Subject:</strong> ${email.subject}</p>
+          </div>
+          <div class="container">
+            <iframe srcdoc="${email.html}"></iframe>
+          </div>
+        `;
+      }
+    </script>
+  </body>
+</html>