jsx

.gitignore

@@ -35,3 +35,4 @@ package-lock.json
 .nyc_output
 
 .env
+.react-email

package.json

@@ -24,6 +24,7 @@
   },
   "dependencies": {
     "@react-email/components": "^0.0.7",
+    "@react-email/render": "^0.0.7",
     "@twurple/api": "^6.0.6",
     "@twurple/auth": "^6.0.6",
     "ajv": "^8.0.5",
@@ -39,6 +40,7 @@
     "express": "^4.17.1",
     "has": "^1.0.3",
     "helmet": "^7.0.0",
+    "htm": "^3.1.1",
     "htmlescape": "^1.1.1",
     "http-errors": "^2.0.0",
     "i18next": "^22.0.2",

src/emails/password-reset.jsx

@@ -0,0 +1,48 @@
+import { html } from 'htm/react';
+import {
+  Html,
+  Head,
+  Body,
+  Container,
+  Button,
+  Img,
+  Text,
+} from '@react-email/components';
+
+/**
+ * @param {{ token?: string }} props
+ */
+export default function PasswordResetEmail({
+  token = '12c6c577-593a-45d5-861b-4432e4269847',
+  publicUrl = 'https://wlk.yt',
+}) {
+  const bodyStyle = {
+    background: '#151515',
+    color: '#ffffff',
+    fontFamily: 'Open Sans, sans-serif',
+    fontSize: 16,
+  };
+
+  return html`
+    <${Html} lang="en" dir="ltr">
+      <${Head}>
+        <title>Password Reset Request</title>
+      <//>
+      <${Body} style=${bodyStyle}>
+        <${Container}>
+          <${Img} src="https://wlk.yt/static/logo-white-ff06e202.png" alt="" width="400" />
+          <${Text}>Hello,<//>
+          <${Text}>Please press this button to reset your password:<//>
+          <${Button} href="${publicUrl}/reset/${token}">
+            Reset Password
+          <//>
+
+          <${Text}>Or, if that does not work, copy and paste this link:<//>
+          <${Text}>${publicUrl}/reset/${token}<//>
+
+          <${Text}>Regards,<//>
+        <//>
+      <//>
+    <//>
+  `;
+}