adding the Account Deletion stuff for the play store

2026-05-10 15:10:10 +01:00
parent ccd08dac4e
commit b8bb2ede70
5 changed files with 247 additions and 4 deletions
@@ -3,23 +3,33 @@ import Index from "./pages/Index";
 import Privacy from "./pages/Privacy";
 import NotFound from "./pages/NotFound";
 import Waitlist from "./pages/Waitlist";
+import RequestAccountDeletion from "./pages/RequestAccountDeletion";
+import FinalizeAccountDeletion from "./pages/FinalizeAccountDeletion";
 import BlogList from "./pages/BlogList";
 import BlogPost from "./pages/BlogPost";
 import CookieConsent from "./components/ui/CookieConsent";
+import { ToastProvider, ToastViewport } from "./components/ui/toast";
+import Toaster from "./components/ui/Toaster";

 const App = () => (
  <>
+    <ToastProvider>
      <BrowserRouter>
        <Routes>
        <Route path="/" element={<Index />} />
        <Route path="/privacy" element={<Privacy />} />
        <Route path="/waitlist" element={<Waitlist />} />
+        <Route path="/forget-me" element={<RequestAccountDeletion />} />
+        <Route path="/finalize-forget-me" element={<FinalizeAccountDeletion />} />
        <Route path="/blog" element={<BlogList />} />
        <Route path="/blog/:slug" element={<BlogPost />} />
        {/* ADD ALL CUSTOM ROUTES ABOVE THE CATCH-ALL "*" ROUTE */}
        <Route path="*" element={<NotFound />} />
        </Routes>
      </BrowserRouter>
+      <Toaster />
+      <ToastViewport />
+    </ToastProvider>
    <CookieConsent />
  </>
 );
@@ -0,0 +1,31 @@
+import * as React from "react";
+import { useToast } from "@/components/ui/use-toast";
+import { Toast, ToastTitle, ToastDescription, ToastClose } from "@/components/ui/toast";
+
+const Toaster: React.FC = () => {
+  const { toasts } = useToast();
+
+  return (
+    <>
+      {toasts.map((t) => (
+        <Toast
+          key={t.id}
+          open={t.open}
+          onOpenChange={(open) => t.onOpenChange?.(open)}
+          variant={(t as any).variant}
+        >
+          <div className="flex-1">
+            {t.title && <ToastTitle>{t.title}</ToastTitle>}
+            {t.description && <ToastDescription>{t.description}</ToastDescription>}
+          </div>
+
+          {t.action}
+
+          <ToastClose />
+        </Toast>
+      ))}
+    </>
+  );
+};
+
+export default Toaster;
@@ -22,6 +22,11 @@
  --color-brand: var(--color-accent-secondary);
  --color-brand-light: var(--color-accent-primary);
  --color-brand-dark: #86efac; /* Fallback or specific shade */
+
+  /* destructive / danger color used by some components */
+  --color-destructive: #dc2626; /* red-600 */
+  --color-destructive-foreground: #ffffff;
+  --color-red-300: #fca5a5;
 }

@layer base {
@@ -65,3 +70,10 @@
 .text-secondary-foreground { color: var(--color-text-secondary); }

 .glass { background-color: rgba(255,255,255,0.05); }
+
+/* destructive / danger utilities (used by some components) */
+.bg-destructive { background-color: var(--color-destructive); }
+.border-destructive { border-color: var(--color-destructive); }
+.text-destructive-foreground { color: var(--color-destructive-foreground); }
+.group\.\[\.destructive\]\:text-red-300 { color: var(--color-red-300); }
+
@@ -0,0 +1,94 @@
+import * as React from "react";
+import { useLocation } from "react-router-dom";
+import { toast } from "@/components/ui/use-toast";
+
+const FinalizeAccountDeletion: React.FC = () => {
+  const location = useLocation();
+  const [userId, setUserId] = React.useState<string | null>(null);
+  const [loading, setLoading] = React.useState(false);
+
+  React.useEffect(() => {
+    const qp = new URLSearchParams(location.search);
+    const id = qp.get("user_id") || qp.get("userId");
+    if (id) setUserId(id);
+  }, [location.search]);
+
+  const onDelete = async () => {
+    if (!userId) {
+      toast({ title: "Missing user id in the URL." });
+      return;
+    }
+
+    setLoading(true);
+    try {
+      const envBase = (import.meta as any).env?.VITE_API_URL as string | undefined;
+      const base = envBase ? envBase.replace(/\/$/, "") : "http://localhost:8080";
+      const url = `${base}/account/me?user_id=${encodeURIComponent(userId)}`;
+
+      const res = await fetch(url, { method: "DELETE" });
+      if (!res.ok) {
+        const text = await res.text().catch(() => "");
+        throw new Error(text || `Status ${res.status}`);
+      }
+
+      toast({ title: "Account deleted", description: "Your account has been removed." });
+      setTimeout(() => {
+        window.location.href = "/";
+      }, 700);
+    } catch (err: any) {
+      toast({ title: "Error", description: err?.message ?? String(err) });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <main className="min-h-screen bg-bg-primary">
+      <section className="pt-20 pb-20">
+        <div className="container mx-auto max-w-4xl px-6 min-h-[60vh] flex items-center">
+          <div className="bento-card">
+            <h3 className="text-center text-2xl md:text-3xl font-semibold text-text-primary mb-6">Finalize account deletion</h3>
+
+            <div className="flex flex-col md:flex-row items-center gap-8">
+              <div className="flex-1 flex items-center justify-center md:justify-start">
+                <div className="flex items-center gap-6">
+                  <div className="w-40 h-40 bg-accent-primary rounded-full flex items-center justify-center border border-border-subtle/40">
+                    <img src="/tailtrails-logo.png" alt="TailTrails Logo" className="w-24 h-24" />
+                  </div>
+                  <div>
+                    <div className="text-3xl font-bold text-text-primary">TailTrails</div>
+                    <div className="text-sm text-text-muted">This action will permanently delete your account</div>
+                  </div>
+                </div>
+              </div>
+
+              <div className="w-full md:w-[350px]">
+                <div className="glass rounded-2xl p-6">
+                  {userId ? (
+                    <div className="space-y-4">
+                      <div>
+                        <button
+                          onClick={onDelete}
+                          className="w-full rounded-md bg-destructive hover:bg-destructive/90 text-bg-primary font-semibold py-6 hover:opacity-95 disabled:opacity-60"
+                          disabled={loading}
+                        >
+                          {loading ? "Deleting..." : "Delete my account"}
+                        </button>
+                      </div>
+                    </div>
+                  ) : (
+                    <div className="space-y-4">
+                      <p className="text-sm text-text-muted">Invalid or expired deletion link.</p>
+                    </div>
+                  )}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+    </main>
+  );
+};
+
+export default FinalizeAccountDeletion;
@@ -0,0 +1,96 @@
+import * as React from "react";
+import { toast } from "@/components/ui/use-toast";
+
+const RequestAccountDeletion: React.FC = () => {
+  const [email, setEmail] = React.useState("");
+  const [loading, setLoading] = React.useState(false);
+
+  const onSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!email.trim()) {
+      toast({ title: "Please provide your email." });
+      return;
+    }
+
+    setLoading(true);
+    try {
+      const envBase = (import.meta as any).env?.VITE_API_URL as string | undefined;
+      const base = envBase ? envBase.replace(/\/$/, "") : "http://localhost:8080";
+      const url = `${base}/account/request-deletion`;
+
+      const res = await fetch(url, {
+        method: "DELETE",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ email }),
+      });
+
+      if (!res.ok) {
+        const text = await res.text().catch(() => "");
+        throw new Error(text || `Status ${res.status}`);
+      }
+
+      toast({ title: "Success", description: "Check your email for deletion instructions. Check your inbox and spam folder." });
+      setEmail("");
+    } catch (err: any) {
+      toast({ title: "Error", description: err?.message ?? String(err) });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <main className="min-h-screen bg-bg-primary">
+      <section className="pt-20 pb-20">
+        <div className="container mx-auto max-w-4xl px-6 min-h-[60vh] flex items-center">
+          <div className="bento-card">
+            <h3 className="text-center text-2xl md:text-3xl font-semibold text-text-primary mb-6">Request account deletion</h3>
+
+            <div className="flex flex-col md:flex-row items-center gap-8">
+              <div className="flex-1 flex items-center justify-center md:justify-start">
+                <div className="flex items-center gap-6">
+                  <div className="w-40 h-40 bg-accent-primary rounded-full flex items-center justify-center border border-border-subtle/40">
+                    <img src="/tailtrails-logo.png" alt="TailTrails Logo" className="w-24 h-24" />
+                  </div>
+                  <div>
+                    <div className="text-3xl font-bold text-text-primary">TailTrails</div>
+                    <div className="text-sm text-text-muted">Request account deletion via email</div>
+                  </div>
+                </div>
+              </div>
+
+              <div className="w-full md:w-[350px]">
+                <div className="glass rounded-2xl p-6">
+                  <form onSubmit={onSubmit} className="space-y-4">
+                    <div>
+                      <label className="sr-only">Email</label>
+                      <input
+                        type="email"
+                        className="w-full rounded-md border border-border-subtle/20 px-3 py-2 placeholder:text-text-muted glass text-text-primary"
+                        value={email}
+                        onChange={(e) => setEmail(e.target.value)}
+                        placeholder="Email *"
+                        required
+                      />
+                    </div>
+
+                    <div>
+                      <button
+                        type="submit"
+                        className="w-full rounded-md bg-brand hover:bg-brand-light text-bg-primary font-semibold py-2 hover:opacity-95 disabled:opacity-60"
+                        disabled={loading}
+                      >
+                        {loading ? "Sending..." : "Request deletion"}
+                      </button>
+                    </div>
+                  </form>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+    </main>
+  );
+};
+
+export default RequestAccountDeletion;