base done

src/components/DeletionForm.tsx

@@ -0,0 +1,169 @@
+import { createSignal, createEffect, onCleanup, Show } from "solid-js";
+import CountdownCircleTimer from "~/components/CountdownCircleTimer";
+import LoadingSpinner from "~/components/LoadingSpinner";
+import { getClientCookie } from "~/lib/cookies.client";
+
+export default function DeletionForm() {
+  // State management
+  const [countDown, setCountDown] = createSignal(0);
+  const [emailSent, setEmailSent] = createSignal(false);
+  const [error, setError] = createSignal("");
+  const [loading, setLoading] = createSignal(false);
+
+  // Form ref
+  let emailRef: HTMLInputElement | undefined;
+  let timerInterval: number | undefined;
+
+  // Calculate remaining time from cookie
+  const calcRemainder = (timer: string) => {
+    const expires = new Date(timer);
+    const remaining = expires.getTime() - Date.now();
+    const remainingInSeconds = remaining / 1000;
+
+    if (remainingInSeconds <= 0) {
+      setCountDown(0);
+      if (timerInterval) {
+        clearInterval(timerInterval);
+      }
+    } else {
+      setCountDown(remainingInSeconds);
+    }
+  };
+
+  // Check for existing timer on mount
+  createEffect(() => {
+    const timer = getClientCookie("deletionRequestSent");
+    if (timer) {
+      timerInterval = setInterval(() => calcRemainder(timer), 1000) as unknown as number;
+      onCleanup(() => {
+        if (timerInterval) {
+          clearInterval(timerInterval);
+        }
+      });
+    }
+  });
+
+  // Form submission handler
+  const sendEmailTrigger = async (e: Event) => {
+    e.preventDefault();
+    setLoading(true);
+    setError("");
+    setEmailSent(false);
+
+    if (!emailRef) {
+      setError("Please enter your email");
+      setLoading(false);
+      return;
+    }
+
+    const email = emailRef.value;
+
+    try {
+      const response = await fetch("/api/trpc/misc.sendDeletionRequestEmail", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ email }),
+      });
+
+      const result = await response.json();
+
+      if (response.ok && result.result?.data?.message === "request sent") {
+        setEmailSent(true);
+        const timer = getClientCookie("deletionRequestSent");
+        if (timer) {
+          if (timerInterval) {
+            clearInterval(timerInterval);
+          }
+          timerInterval = setInterval(() => calcRemainder(timer), 1000) as unknown as number;
+        }
+      } else {
+        const errorMsg = result.error?.message || "Failed to send deletion request";
+        setError(errorMsg);
+      }
+    } catch (err: any) {
+      console.error("Deletion request error:", err);
+      setError(err.message || "An error occurred");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // Countdown timer render function
+  const renderTime = () => {
+    return (
+      <div class="timer">
+        <div class="value">{countDown().toFixed(0)}</div>
+      </div>
+    );
+  };
+
+  return (
+    <div class="flex min-h-screen w-full justify-center">
+      <div class="pt-[5vh]">
+        <div class="text-center text-3xl tracking-widest dark:text-white">
+          Deletion Form
+        </div>
+        <form onSubmit={sendEmailTrigger} class="min-w-[85vw]">
+          <div class="flex w-full flex-col justify-evenly pt-6 md:mt-24">
+            <div class="mx-auto w-full justify-evenly md:flex md:w-3/4 md:flex-row lg:w-1/2">
+              <div class="input-group md:mx-4">
+                <input
+                  type="email"
+                  required
+                  ref={emailRef}
+                  placeholder=" "
+                  class="underlinedInput w-full bg-transparent"
+                />
+                <span class="bar"></span>
+                <label class="underlinedInputLabel">Email</label>
+              </div>
+            </div>
+            <div class="mx-auto pt-4">
+              <Show
+                when={countDown() > 0}
+                fallback={
+                  <button
+                    type="submit"
+                    disabled={loading()}
+                    class={`${
+                      loading()
+                        ? "bg-zinc-400"
+                        : "bg-red-400 hover:bg-red-500 active:scale-90 dark:bg-red-600 dark:hover:bg-red-700"
+                    } flex w-36 justify-center rounded py-3 font-light text-white shadow-lg shadow-red-300 transition-all duration-300 ease-out dark:shadow-red-700`}
+                  >
+                    <Show when={loading()} fallback="Send Deletion Request">
+                      <LoadingSpinner height={24} width={24} />
+                    </Show>
+                  </button>
+                }
+              >
+                <CountdownCircleTimer
+                  duration={60}
+                  initialRemainingTime={countDown()}
+                  size={48}
+                  strokeWidth={6}
+                  colors="#60a5fa"
+                >
+                  {renderTime}
+                </CountdownCircleTimer>
+              </Show>
+            </div>
+          </div>
+        </form>
+        <div
+          class={`${
+            emailSent()
+              ? "text-green-400"
+              : error() !== ""
+              ? "text-red-400"
+              : "select-none opacity-0"
+          } mt-4 flex justify-center text-center italic transition-opacity duration-300 ease-in-out`}
+        >
+          <Show when={emailSent()} fallback={error()}>
+            Request Sent!
+          </Show>
+        </div>
+      </div>
+    </div>
+  );
+}