feat: user activation and emails

components/pages/unsubscribe.tsx

@@ -0,0 +1,87 @@
+'use client';
+import React, { useEffect, useRef, useState } from 'react';
+import { z } from 'zod';
+import { ResponseSchema } from '../../utils/types';
+import { CustomLink } from '../elements/customLink';
+import ErrorComponent from '../elements/error';
+import { HomeLink } from '../elements/homeLink';
+import { SuccessComponent } from '../elements/success';
+
+export const UnsubscribeForm = () => {
+  const [completed, setCompleted] = useState(false);
+  const [message, setMessage] = useState('');
+  const [error, setError] = useState(false);
+  const honeypotRef = useRef<HTMLInputElement | null>(null);
+
+  useEffect(() => {
+    if (honeypotRef.current) {
+      honeypotRef.current.style.display = 'none';
+    }
+  }, []);
+
+  async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
+    e.preventDefault();
+    const data = new FormData(e.currentTarget);
+
+    if (data.get('name')) {
+      return;
+    }
+
+    try {
+      const response = await fetch('/api/unsubscribe', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          email: data.get('email'),
+        }),
+      });
+
+      if (!response?.ok) {
+        throw new Error(`Invalid response: ${response.status}`);
+      }
+
+      const formResponse: z.infer<typeof ResponseSchema> =
+        await response.json();
+
+      setMessage(formResponse.message);
+      setCompleted(true);
+    } catch (error) {
+      console.log('Unsubscribe error', error);
+      setError(true);
+    }
+  }
+
+  if (error) {
+    return ErrorComponent();
+  }
+
+  if (completed) {
+    return SuccessComponent(message);
+  }
+
+  return (
+    <div>
+      <form className="container" onSubmit={handleSubmit}>
+        <h1>Unsubscribe from newsletter</h1>
+        <div className="email block">
+          <label htmlFor="frm-email">Email</label>
+          <input
+            placeholder="example@email.com"
+            id="email"
+            type="email"
+            name="email"
+            required
+          />
+        </div>
+        <input type="text" name="name" ref={honeypotRef} />
+        <div className="button block">
+          <button type="submit">Unsubscribe</button>
+        </div>
+      </form>
+      <HomeLink />
+      <CustomLink path={`/subscribe`} text="Subscribe" />
+    </div>
+  );
+};