From e5c7fa03862206c0719a331ef11baa1e8a5c565d Mon Sep 17 00:00:00 2001
From: white <122345776@umail.ucc.ie>
Date: Mon, 3 Mar 2025 15:31:17 +0000
Subject: [PATCH] FEAT: Added frontend for unsubscribing from newsletter

---
 .../src/components/Auth/UnsubscribeForm.tsx   | 68 +++++++++++++++++++
 frontend/src/pages/UnsubscribePage.tsx        | 31 +++++++++
 2 files changed, 99 insertions(+)
 create mode 100644 frontend/src/components/Auth/UnsubscribeForm.tsx
 create mode 100644 frontend/src/pages/UnsubscribePage.tsx

diff --git a/frontend/src/components/Auth/UnsubscribeForm.tsx b/frontend/src/components/Auth/UnsubscribeForm.tsx
new file mode 100644
index 0000000..66f6b8c
--- /dev/null
+++ b/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;
diff --git a/frontend/src/pages/UnsubscribePage.tsx b/frontend/src/pages/UnsubscribePage.tsx
new file mode 100644
index 0000000..00129ca
--- /dev/null
+++ b/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;