Merge pull request #91 from AshishBarvaliya/dev

fix: sendmail debug

.github/workflows/pr-check.yml

@@ -36,6 +36,11 @@ jobs:
           echo "EMAIL_LINK_EXPIRY=${{ secrets.EMAIL_LINK_EXPIRY }}" >> .env
           echo "THEMES_PER_PAGE=${{ secrets.THEMES_PER_PAGE }}" >> .env
           echo "NEXT_PUBLIC_TRACKING_ID=${{ secrets.TRACKING_ID }}" >> .env
+          echo "THEMEAI_ACCOUNT_ID=${{ secrets.THEMEAI_ACCOUNT_ID }}" >> .env
+          echo "MAIL_SMTP_HOST=${{ secrets.MAIL_SMTP_HOST }}" >> .env
+          echo "MAIL_SMTP_PORT=${{ secrets.MAIL_SMTP_PORT }}" >> .env
+          echo "MAIL_SMTP_USER=${{ secrets.MAIL_SMTP_USER }}" >> .env
+          echo "MAIL_SMTP_PASS=${{ secrets.MAIL_SMTP_PASS }}" >> .env
 
       - name: Build
         run: npm run build

__tests__/api/reset-password.test.ts

@@ -1,4 +1,4 @@
-import { sendEmail } from "@/config/mailgun";
+import { sendEmail } from "@/config/mail";
 import db from "@/db";
 import handler from "@/pages/api/reset-password";
 import { NextApiRequest, NextApiResponse } from "next";
@@ -13,7 +13,7 @@ jest.mock("@/db", () => ({
   values: jest.fn().mockReturnThis(),
 }));
 
-jest.mock("@/config/mailgun", () => ({
+jest.mock("@/config/mail", () => ({
   sendEmail: jest.fn(),
 }));
 
@@ -53,13 +53,15 @@ describe("Reset Password API Endpoint", () => {
     (db.query.users.findFirst as jest.Mock).mockResolvedValue(null);
     (sendEmail as jest.Mock).mockResolvedValue({
       id: "message-id",
-      message: "Verification mail has been sent",
+      message:
+        "Reset password mail has been sent. The reset password link is valid for 60 minutes.",
     });
     await handler(req, res);
 
     expect(res.status).toHaveBeenCalledWith(201);
     expect(res.json).toHaveBeenCalledWith({
-      messsage: "Reset password mail has been sent",
+      messsage:
+        "Reset password mail has been sent. The reset password link is valid for 60 minutes.",
     });
   });
 
@@ -112,7 +114,8 @@ describe("Reset Password API Endpoint", () => {
     expect((db.insert as jest.Mock)().values).toHaveBeenCalled();
     expect(res.status).toHaveBeenCalledWith(201);
     expect(res.json).toHaveBeenCalledWith({
-      messsage: "Reset password mail has been sent",
+      messsage:
+        "Reset password mail has been sent. The reset password link is valid for 60 minutes.",
     });
   });
 

__tests__/api/send-verification-email.test.ts

@@ -1,4 +1,4 @@
-import { sendEmail } from "@/config/mailgun";
+import { sendEmail } from "@/config/mail";
 import db from "@/db";
 import handler from "@/pages/api/send-verification-email";
 import { NextApiRequest, NextApiResponse } from "next";
@@ -28,7 +28,7 @@ jest.mock("@/db", () => ({
   values: jest.fn().mockReturnThis(),
 }));
 
-jest.mock("@/config/mailgun", () => ({
+jest.mock("@/config/mail", () => ({
   sendEmail: jest.fn(),
 }));
 
@@ -111,7 +111,8 @@ describe("Send Verification Email API Endpoint", () => {
     });
     (sendEmail as jest.Mock).mockResolvedValue({
       id: "message-id",
-      message: "Verification mail has been sent",
+      message:
+        "Verification mail has been sent. The verification link is valid for 60 minutes.",
     });
 
     await handler(req, res);
@@ -120,7 +121,8 @@ describe("Send Verification Email API Endpoint", () => {
     expect((db.insert as jest.Mock)().values).toHaveBeenCalled();
     expect(res.status).toHaveBeenCalledWith(201);
     expect(res.json).toHaveBeenCalledWith({
-      messsage: "Verification mail has been sent",
+      messsage:
+        "Verification mail has been sent. The verification link is valid for 60 minutes.",
     });
   });
 

package.json

@@ -43,11 +43,11 @@
     "eslint-config-next": "13.4.13",
     "lorem-ipsum": "^2.0.8",
     "lucide-react": "0.263.1",
-    "mailgun.js": "^9.4.0",
     "moment": "^2.29.4",
     "next": "13.4.13",
     "next-auth": "^4.23.1",
     "nextjs-progressbar": "^0.0.16",
+    "nodemailer": "^6.9.7",
     "openai": "^4.16.1",
     "pg": "^8.11.3",
     "postcss": "8.4.27",
@@ -68,6 +68,7 @@
     "@testing-library/react": "^14.1.0",
     "@types/bcrypt": "^5.0.0",
     "@types/jest": "^29.5.8",
+    "@types/nodemailer": "^6.4.14",
     "@types/react-color": "^3.0.6",
     "@types/react-transition-group": "^4.4.6",
     "dotenv": "^16.3.1",
@@ -77,4 +78,4 @@
     "ts-node": "^10.9.1",
     "typescript": "^5.2.2"
   }
-}
+}

src/components/export-theme-dialog.tsx

@@ -353,7 +353,7 @@ export const ExportThemeDialog: React.FC<ExportThemeDialogProps> = ({
                             : "Secondary Font"}
                         </Typography>
                         <div className="flex gap-2 items-center">
-                          <Button
+                          {/* <Button
                             onClick={() =>
                               window.open(
                                 `http://fonts.google.com/download?family=${
@@ -365,7 +365,7 @@ export const ExportThemeDialog: React.FC<ExportThemeDialogProps> = ({
                             size={"md"}
                           >
                             <Download className="mr-1.5 h-3 w-3" /> Download
-                          </Button>
+                          </Button> */}
                           <Button
                             onClick={() =>
                               window.open(

src/components/ui/carousel.tsx

@@ -1,3 +1,4 @@
+import { cn, getLuminance } from "@/lib/utils";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import React, { useState, useEffect, Children, cloneElement } from "react";
 
@@ -37,14 +38,19 @@ const Carousel: React.FC<CarouselProps> = ({
     }
   }, [currentIndex, autoSlide, interval]);
 
+  const { color, shade } = getLuminance(bgColor || "#FFFFFF");
+
   return (
     <div
       className="flex relative items-center justify-center overflow-hidden shadow-md"
       style={{ backgroundColor: bgColor || "transparent" }}
     >
       <div
         onClick={prevItem}
-        className="px-3 flex items-center h-full absolute left-0 cursor-pointer bg-black/5 hover:bg-black/10 z-10"
+        className="px-3 flex items-center h-full absolute left-0 cursor-pointer z-10"
+        style={{
+          backgroundColor: shade,
+        }}
       >
         <ChevronLeft className="h-5 w-5" />
       </div>
@@ -66,7 +72,10 @@ const Carousel: React.FC<CarouselProps> = ({
 
       <div
         onClick={nextItem}
-        className="flex px-3 h-full items-center absolute right-0 cursor-pointer bg-black/5 hover:bg-black/10 z-10"
+        className="flex px-3 h-full items-center absolute right-0 cursor-pointer z-10"
+        style={{
+          backgroundColor: shade,
+        }}
       >
         <ChevronRight className="h-5 w-5" />
       </div>

src/config/mail.ts

@@ -0,0 +1,43 @@
+import { getEmailHtml } from "@/constants/email";
+import path from "path";
+import nodemailer from "nodemailer";
+
+const host = process.env.MAIL_SMTP_HOST;
+const port = Number(process.env.MAIL_SMTP_PORT || "587");
+const user = process.env.MAIL_SMTP_USER;
+const pass = process.env.MAIL_SMTP_PASS;
+
+if (!host || !port || !user || !pass) {
+  throw new Error("Missing SMTP credentials");
+}
+
+let transporter = nodemailer.createTransport({
+  host,
+  port,
+  auth: {
+    user,
+    pass,
+  },
+});
+
+export const sendEmail = (
+  type: "reset-password" | "activation" | "welcome",
+  { email, token, name }: { email: string; token: string; name: string }
+) => {
+  const inlineImage = {
+    filename: "logo.png",
+    path: path.join(process.cwd(), "public", "logo.png"),
+    cid: "logo.png",
+  };
+
+  return transporter.sendMail({
+    from: `ThemeAI.io ${user}`,
+    to: email,
+    subject:
+      type === "reset-password"
+        ? "Reset your password"
+        : "Verify your ThemeAI account",
+    html: getEmailHtml(type, { token, name }),
+    attachments: [inlineImage],
+  });
+};