add working send email

src/app/api/contact/route.ts

@@ -1,5 +1,9 @@
 import { NextRequest, NextResponse } from "next/server";
-import { rateLimited } from "@/lib/server-utils";
+
+import { rateLimited, sanitize, sendEmail } from "@/lib/server-utils";
+import { trimTooLong } from "@/lib/strings";
+
+import validator from "validator";
 
 const validateInput = (data: any) => {
   return (
@@ -15,7 +19,8 @@ const validateInput = (data: any) => {
     !data.anon &&
     (
       !data.name.trim() ||
-      !data.email.trim()
+      !data.email.trim() ||
+      !validator.isEmail(data.email)
     ) ||
     !data.message.trim()
   )
@@ -50,5 +55,20 @@ export async function POST(req: NextRequest) {
     );
   }
 
-  return NextResponse.json({ status: "ok" });
+  try {
+    const name = trimTooLong(data.name as string, 20);
+    const rawMessage = trimTooLong(data.message, 5000);
+    const message = sanitize(validator.escape(rawMessage));
+
+    await sendEmail(name, data.email, message);
+
+    return NextResponse.json({ status: "ok" });
+  }
+  catch (err) {
+    console.error(err);
+    return NextResponse.json({
+      status: "failed",
+      message: err instanceof Error ? err.message : ''
+    });
+  }
 }

src/components/form/contact-form.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import { useRef, useState } from "react";
-import axios from "axios";
+import axios, { AxiosError } from "axios";
 
 import { CheckboxInput, Input, Submit } from "./form";
 import { FloatingLabel } from "../floating-label";
@@ -54,9 +54,12 @@ export default function ContactForm() {
       setStatus('success');
     }
     catch (err) {
-      console.error(err);
       setStatus('failed');
       setErrorMsg("Something went wrong, Sorry...");
+
+      if (err instanceof AxiosError) {
+        if (err.status == 429) setErrorMsg("Limit reached, please try again later...");
+      }
     }
   }
 
@@ -98,7 +101,7 @@ export default function ContactForm() {
         />
       </label>
       <div className="text-primary">{errorMsg}</div>
-      <Submit className="w-full">{statusMsg[status]}</Submit>
+      <Submit disabled={status === "loading"} className="w-full">{statusMsg[status]}</Submit>
     </form>
   );
 }

src/lib/mailer.ts

@@ -0,0 +1,12 @@
+import nodemailer from "nodemailer";
+
+export const transporter = nodemailer.createTransport({
+  // @ts-ignore
+  host: process.env.SMTP_HOST,
+  port: Number(process.env.SMTP_PORT),
+  secure: process.env.SMTP_SECURE,
+  auth: {
+    user: process.env.SMTP_USER,
+    pass: process.env.SMTP_PASS
+  }
+});

src/lib/server-utils.ts

@@ -1,5 +1,9 @@
 import axios from "axios";
+import { JSDOM } from 'jsdom';
+import DOMPurify from "dompurify";
+
 import { redis } from "./redis";
+import { transporter } from "./mailer";
 
 export async function rateLimited(clientId: string) {
   const key = `contact:${clientId}`;
@@ -7,7 +11,7 @@ export async function rateLimited(clientId: string) {
   if (count === 1) {
     await redis.expire(key, 600);
   }
-  return count > 5;
+  return count > 3;
 }
 
 export async function validateTurnstile(token: string, remoteip: string) {
@@ -32,6 +36,17 @@ export async function validateTurnstile(token: string, remoteip: string) {
   }
 }
 
-export async function sendEmail(target: string) {
-  
+export async function sendEmail(name: string, email: string, message: string) {
+  await transporter.sendMail({
+    from: `Nonszy Contact Form <${process.env.SMTP_USER}>`,
+    replyTo: email,
+    to: process.env.SMTP_REPLY,
+    subject: `Message from ${name}`,
+    text: message
+  })
+}
+
+export function sanitize(dirty: string) {
+  const window = new JSDOM('').window;
+  return DOMPurify(window).sanitize(dirty);
 }

src/lib/strings.ts

@@ -0,0 +1,3 @@
+export const trimTooLong = (text: string, limit: number, endsWith?: string) => {
+  return text.length > limit ? text.slice(0, limit) + (endsWith ?? "...") : text;
+}