feat: add newsletter unsubscription page and API

app/(root)/unsubscribe/layout.tsx

@@ -0,0 +1,38 @@
+import React from "react";
+export async function generateMetadata({
+  searchParams
+}: {
+  searchParams: { id: string } | undefined;
+}) {
+  return {
+    title: "Unsubscribe - SVR.JS",
+    description: "Unsubscribe from our newsletter.",
+    openGraph: {
+      title: "Unsubscribe - SVR.JS",
+      description: "Unsubscribe from our newsletter.",
+      url: `https://svrjs.org/unsubscribe/?id=${encodeURIComponent(searchParams ? searchParams.id : "")}`,
+      type: "website",
+      images: [
+        {
+          url: "https://svrjs.vercel.app/metadata/svrjs-cover.png",
+          width: 800,
+          height: 600,
+          alt: "Unsubscribe - SVR.JS"
+        }
+      ]
+    },
+    twitter: {
+      card: "summary_large_image",
+      site: "@SVR_JS",
+      title: "Unsubscribe - SVR.JS",
+      description: "Unsubscribe from our newsletter.",
+      images: ["https://svrjs.vercel.app/metadata/svrjs-cover.png"],
+      creator: "@SVR_JS"
+    }
+  };
+}
+const UnsubscribeLayout = ({ children }: { children: React.ReactNode }) => {
+  return <main>{children}</main>;
+};
+
+export default UnsubscribeLayout;

app/(root)/unsubscribe/page.tsx

@@ -0,0 +1,103 @@
+"use client";
+import Newsletter from "@/components/shared/Newsletter";
+import React, { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { useToast } from "@/components/ui/use-toast";
+import HCaptcha from "@hcaptcha/react-hcaptcha";
+
+const UnsubscribePage = ({
+  searchParams
+}: {
+  searchParams: { id: string | undefined };
+}) => {
+  const { toast } = useToast();
+  const [loading, setLoading] = useState(false);
+  const [showCaptcha, setShowCaptcha] = useState(false);
+  const [captchaToken, setCaptchaToken] = useState<string | null>(null);
+
+  const onSubmit = async () => {
+    if (!captchaToken) {
+      setShowCaptcha(true);
+      return;
+    }
+
+    setLoading(true);
+    try {
+      const res = await fetch("/api/unsubscribe", {
+        method: "POST",
+        body: JSON.stringify({ unsubscribeId: searchParams.id, captchaToken }),
+        headers: {
+          "Content-Type": "application/json",
+          Accept: "application/json"
+        }
+      });
+
+      if (res.ok) {
+        setCaptchaToken(null); // Reset captcha token after successful submission
+        toast({
+          description: "Unsubscribed successfully."
+        });
+      } else {
+        toast({
+          title: "Uh oh! Something went wrong.",
+          variant: "destructive"
+        });
+      }
+    } catch (error) {
+      console.error(error);
+      toast({
+        title: "Uh oh! Something went wrong.",
+        variant: "destructive"
+      });
+    } finally {
+      setLoading(false);
+      setShowCaptcha(false); // Hide captcha after submission attempt
+    }
+  };
+
+  const handleCaptchaVerify = async (token: string) => {
+    setCaptchaToken(token);
+    await onSubmit(); // Trigger form submission after captcha is verified
+  };
+
+  return (
+    <section
+      id="vulnerabilities"
+      className="wrapper container py-24 md:py-28 gap-2 flex flex-col"
+    >
+      <h1 className="text-3xl md:text-5xl pb-1 md:pb-2 font-bold text-black dark:bg-clip-text dark:text-transparent dark:bg-gradient-to-b dark:from-white dark:to-neutral-400">
+        Unsubscribe from newsletter
+      </h1>
+      <p className="md:text-lg text-muted-foreground text-start mb-6">
+        Are you sure to unsubscribe from the newsletter? You will no longer
+        receive updates from the newsletter.
+      </p>
+      <form
+        className="mx-auto text-center"
+        onSubmit={(e: React.FormEvent) => {
+          e.preventDefault();
+          onSubmit();
+        }}
+      >
+        <Button
+          type="submit"
+          variant={"default"}
+          className="mt-2"
+          disabled={loading}
+        >
+          <div className="flex items-center justify-center">
+            <span className="tracking-tight font-semibold">Unsubscribe</span>
+          </div>
+        </Button>
+        {showCaptcha && (
+          <HCaptcha
+            sitekey={process.env.NEXT_PUBLIC_HCAPTCHA_SITE_KEY!}
+            onVerify={handleCaptchaVerify}
+          />
+        )}
+      </form>
+    </section>
+  );
+};
+
+export default UnsubscribePage;

app/api/unsubscribe/route.ts

@@ -0,0 +1,55 @@
+import { NextRequest, NextResponse } from "next/server";
+import clientPromise from "@/lib/db";
+import { Collection } from "mongodb";
+
+export async function POST(req: NextRequest) {
+  try {
+    const { unsubscribeId, captchaToken } = await req.json();
+
+    if (!unsubscribeId || !captchaToken) {
+      return NextResponse.json(
+        { message: "Unsubscription ID and captcha token are required." },
+        { status: 400 }
+      );
+    }
+
+    // Verify hCaptcha token
+    const hcaptchaResponse = await fetch(
+      `https://api.hcaptcha.com/siteverify`,
+      {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/x-www-form-urlencoded"
+        },
+        body: `secret=${process.env.HCAPTCHA_SECRET}&response=${captchaToken}`
+      }
+    );
+
+    const hcaptchaData = await hcaptchaResponse.json();
+
+    if (!hcaptchaData.success) {
+      return NextResponse.json(
+        { message: "Captcha verification failed." },
+        { status: 400 }
+      );
+    }
+
+    const client = await clientPromise;
+    const db = client.db(process.env.MONGODB_DB);
+    const collection = db.collection("subscribers");
+
+    const result = await collection.deleteOne({ unsubscribeId });
+
+    if (result.deletedCount === 1) {
+      return NextResponse.json({ message: "Unsubscribed successfully" });
+    } else {
+      return NextResponse.json({ message: "Not subscribed" }, { status: 404 });
+    }
+  } catch (error) {
+    console.error("Error subscribing:", error);
+    return NextResponse.json(
+      { message: "Internal Server Error" },
+      { status: 500 }
+    );
+  }
+}