Add prettier emails (Fix #5)

AntonioVdlC · Feb 13, 2022 · c1ff422 · c1ff422
1 parent 7154a6c
commit c1ff422
Show file tree

Hide file tree

Showing 5 changed files with 401 additions and 4 deletions.
diff --git a/app/routes/admin/dashboard.tsx b/app/routes/admin/dashboard.tsx
@@ -9,7 +9,7 @@ import {
 import type { User } from "@prisma/client";
 
 import { db } from "~/utils/db.server";
-import { send } from "~/utils/email.server";
+import { send, templates } from "~/utils/email.server";
 import {
   generateRandomString,
   requireAdminSession,
@@ -71,6 +71,14 @@ export const action: ActionFunction = async ({ request }) => {
         await send({
           to: user.email,
           subject: "Welcome to Fantomely",
+          html: templates.welcomeBeta({
+            firstName: user.firstName || "",
+            link: `${
+              process.env.BASE_URL
+            }/auth/waitlist/callback?email=${encodeURIComponent(
+              user.email
+            )}&token=${waitlistToken}`,
+          }),
           text: `Welcome to Fantomely!
           You can now finish your registration using the following link: ${
             process.env.BASE_URL

diff --git a/app/routes/admin/login.tsx b/app/routes/admin/login.tsx
@@ -38,6 +38,7 @@ export const action: ActionFunction = async ({ request }) => {
         await send({
           to: process.env.ADMIN_EMAIL,
           subject: "Login to Admin Dashboard",
+          html: token.value,
           text: token.value,
         });
       } catch (error: any) {

diff --git a/app/routes/auth/login.sent.tsx b/app/routes/auth/login.sent.tsx
@@ -38,13 +38,18 @@ export default function LoginSentRoute() {
         <p className="mt-3">
           Can't find the email? Try{" "}
           <Link
-            to={`/auht/login?redirectTo=${searchParams.get("redirectTo")}`}
+            to={`/auth/login?redirectTo=${searchParams.get("redirectTo")}`}
             className="font-medium text-slate-700 hover:text-slate-900"
           >
             signing in
           </Link>{" "}
           again!
         </p>
+        <div className="mt-6">
+          <Link to="/" className="text-base font-medium">
+            Go back home<span aria-hidden="true"> &rarr;</span>
+          </Link>
+        </div>
       </div>
     </>
   );

diff --git a/app/routes/auth/login.tsx b/app/routes/auth/login.tsx
@@ -11,7 +11,7 @@ import type { ActionFunction, LoaderFunction } from "remix";
 
 import { generateMagicLink, getUserId } from "~/utils/session.server";
 import { isValidEmail } from "~/utils/is-valid";
-import { send } from "~/utils/email.server";
+import { send, templates } from "~/utils/email.server";
 
 import Button from "~/components/Button";
 import Logo from "~/components/Logo";
@@ -79,7 +79,14 @@ export const action: ActionFunction = async ({ request }) => {
     await send({
       from: "fantomely <no-reply@fantomely.com>",
       to: email,
-      subject: "Log into fantomely",
+      subject: "Login to fantomely! 👻",
+      html: templates.login({
+        link: `${
+          process.env.BASE_URL
+        }/auth/login/callback?email=${encodeURIComponent(email)}&token=${
+          magicLink.token
+        }&redirectTo=${redirectTo}`,
+      }),
       text: `Log into fantomely!
           Here is your magic link to log into your fantomely account: ${
             process.env.BASE_URL