FEAT: Added frontend for unsubscribing from newsletter

frontend/src/components/Auth/UnsubscribeForm.tsx

@@ -0,0 +1,68 @@
+import React, { useState } from "react";
+import Input from "../Input/Input";
+import Button from "../Input/Button";
+
+interface UnsubscribeData {
+  email: string;
+}
+
+interface SubmitProps {
+  onSubmit: (success: boolean) => void;
+  token: string;
+}
+
+const UnsubscribeForm: React.FC<SubmitProps> = ({ onSubmit, token }) => {
+
+  const [subData, setSubData] = useState<UnsubscribeData>({
+    email: "",
+  });
+
+  const handleEmailChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const { name, value } = e.target;
+    setSubData((prev) => ({
+      ...prev,
+      [name]: value,
+    }));
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+
+    try {
+    const response = await fetch(
+        `/api/user/unsubscribe/${token}`,
+        {
+        method: "POST",
+        headers: {
+            "Content-Type": "application/json",
+        },
+        credentials: "include",
+        body: JSON.stringify(subData),
+        }
+    );
+
+    if (!response.ok) {
+        const data = await response.json();
+        onSubmit(false);
+        throw new Error(
+        data.error || "An error has occurred while resetting"
+        );
+    } else {
+        onSubmit(true);
+    }
+    } catch (error: any) {
+    console.error("Password reset error:", error.message);
+    }
+  };
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <p>Are you sure you want to unsubscribe?</p>
+      <p>Think of all the great news you could still receive..</p>
+
+      <Button type="submit">Unsubscribe</Button>
+    </form>
+  );
+};
+
+export default UnsubscribeForm;

frontend/src/pages/UnsubscribePage.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+import PasswordResetForm from "../components/Auth/UnsubscribeForm";
+import { useParams } from "react-router-dom";
+
+const UnsubscribePage: React.FC = () => {
+  const { token } = useParams<{ token: string }>();
+
+  const handleUnsubscribe = (success: boolean) => {
+    if (success) {
+      alert("Succesfully Unsubscribed from Newsletter!");
+      window.location.href = "/";
+    } else {
+      alert("Unsubscribe failed, lol.");
+    }
+  };
+
+  if (!token) {
+    return (
+      <p className="text-red-500 text-center mt-4">Invalid or missing token.</p>
+    );
+  }
+
+  return (
+    <div className="flex flex-col items-center justify-center h-screen">
+      <h1 className="text-2xl font-bold mb-4">Unsubscribe from Newsletter</h1>
+      <PasswordResetForm onSubmit={handleUnsubscribe} token={token} />
+    </div>
+  );
+};
+
+export default UnsubscribePage;