chore: Add emailed confirmation code to account deletion (#3873)

* wip * tests
2022-07-31 18:59:40 +01:00
parent f9d9a82e47
commit cb9773ad85
8 changed files with 238 additions and 69 deletions
--- a/server/emails/templates/ConfirmUserDeleteEmail.tsx
+++ b/server/emails/templates/ConfirmUserDeleteEmail.tsx
@@ -0,0 +1,57 @@
+import * as React from "react";
+import BaseEmail from "./BaseEmail";
+import Body from "./components/Body";
+import CopyableCode from "./components/CopyableCode";
+import EmailTemplate from "./components/EmailLayout";
+import EmptySpace from "./components/EmptySpace";
+import Footer from "./components/Footer";
+import Header from "./components/Header";
+import Heading from "./components/Heading";
+
+type Props = {
+  to: string;
+  deleteConfirmationCode: string;
+};
+
+/**
+ * Email sent to a user when they request to delete their account.
+ */
+export default class ConfirmUserDeleteEmail extends BaseEmail<Props> {
+  protected subject() {
+    return `Your account deletion request`;
+  }
+
+  protected preview() {
+    return `Your requested account deletion code`;
+  }
+
+  protected renderAsText({ deleteConfirmationCode }: Props): string {
+    return `
+You requested to permanantly delete your Outline account. Please enter the code below to confirm your account deletion.
+
+Code: ${deleteConfirmationCode}
+`;
+  }
+
+  protected render({ deleteConfirmationCode }: Props) {
+    return (
+      <EmailTemplate>
+        <Header />
+
+        <Body>
+          <Heading>Your account deletion request</Heading>
+          <p>
+            You requested to permanantly delete your Outline account. Please
+            enter the code below to confirm your account deletion.
+          </p>
+          <EmptySpace height={5} />
+          <p>
+            <CopyableCode>{deleteConfirmationCode}</CopyableCode>
+          </p>
+        </Body>
+
+        <Footer />
+      </EmailTemplate>
+    );
+  }
+}
--- a/server/emails/templates/components/CopyableCode.tsx
+++ b/server/emails/templates/components/CopyableCode.tsx
@@ -0,0 +1,21 @@
+import * as React from "react";
+
+const style: React.CSSProperties = {
+  fontFamily: "monospace",
+  fontSize: "20px",
+  display: "inline-block",
+  padding: "10px 20px",
+  color: "#111319",
+  background: "#F9FBFC",
+  fontWeight: "500",
+  borderRadius: "2px",
+  letterSpacing: "0.1em",
+};
+
+const CopyableCode: React.FC = (props) => (
+  <pre {...props} style={style}>
+    {props.children}
+  </pre>
+);
+
+export default CopyableCode;