feat: user activation and emails

components/pages/confirmation.tsx

@@ -0,0 +1,58 @@
+'use client';
+import { useRouter, useSearchParams } from 'next/navigation';
+import { useEffect, useState } from 'react';
+import { z } from 'zod';
+import { ResponseSchema } from '../../utils/types';
+import { HomeLink } from '../elements/homeLink';
+
+export const ConfirmationPage = () => {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const [loading, setLoading] = useState(true);
+  const [message, setMessage] = useState('');
+
+  const code = searchParams.get('code');
+
+  useEffect(() => {
+    if (!code) {
+      router.push('/');
+    }
+
+    fetch('/api/confirmation', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        code: code,
+      }),
+    })
+      .then(async (res) => {
+        if (!res.ok) {
+          router.push('/');
+        }
+        const response: z.infer<typeof ResponseSchema> = await res.json();
+        return response;
+      })
+      .then((response) => {
+        setMessage(response.message);
+        setLoading(false);
+      });
+  }, [code, router]);
+
+  if (!loading) {
+    return (
+      <div>
+        <h1>{message}</h1>
+        <HomeLink />
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      <h1>Verifying...</h1>
+      <HomeLink />
+    </div>
+  );
+};

components/pages/subscribe.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 SubscribeForm = () => {
+  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/subscribe', {
+        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('Subscribe error', error);
+      setError(true);
+    }
+  }
+
+  if (error) {
+    return ErrorComponent();
+  }
+
+  if (completed) {
+    return SuccessComponent(message);
+  }
+
+  return (
+    <div>
+      <form className="container" onSubmit={handleSubmit}>
+        <h1>Subscribe to 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">Subscribe</button>
+        </div>
+      </form>
+      <HomeLink />
+      <CustomLink path={`/unsubscribe`} text="Unsubscribe" />
+    </div>
+  );
+};

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>
+  );
+};