feat: account deletion

src/app/api/auth/delete/route.ts

@@ -0,0 +1,20 @@
+import { NextResponse } from "next/server";
+
+import { auth } from "@/lib/auth";
+import { prisma } from "@/lib/prisma";
+
+export async function DELETE() {
+	const session = await auth();
+	if (!session) return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+
+	try {
+		await prisma.user.delete({
+			where: { id: Number(session.user?.id!) },
+		});
+	} catch (error) {
+		console.error("Failed to delete user:", error);
+		return NextResponse.json({ error: "Failed to delete account" }, { status: 500 });
+	}
+
+	return NextResponse.json({ success: true });
+}

src/app/components/profile-settings/delete-account.tsx

@@ -0,0 +1,91 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { createPortal } from "react-dom";
+import { Icon } from "@iconify/react";
+import { redirect } from "next/navigation";
+
+export default function DeleteAccount() {
+	const [isOpen, setIsOpen] = useState(false);
+	const [isVisible, setIsVisible] = useState(false);
+
+	const [error, setError] = useState<string | undefined>(undefined);
+
+	const submit = async () => {
+		const response = await fetch("/api/auth/delete", { method: "DELETE" });
+		if (!response.ok) {
+			const { error } = await response.json();
+			setError(error);
+			return;
+		}
+
+		redirect("/404");
+	};
+
+	const close = () => {
+		setIsVisible(false);
+		setTimeout(() => {
+			setIsOpen(false);
+		}, 300);
+	};
+
+	useEffect(() => {
+		if (isOpen) {
+			// slight delay to trigger animation
+			setTimeout(() => setIsVisible(true), 10);
+		}
+	}, [isOpen]);
+
+	return (
+		<>
+			<button
+				name="deletion"
+				onClick={() => setIsOpen(true)}
+				className="pill button w-fit h-min ml-auto !bg-red-400 !border-red-500 hover:!bg-red-500"
+			>
+				Delete Account
+			</button>
+
+			{isOpen &&
+				createPortal(
+					<div className="fixed inset-0 flex items-center justify-center z-40">
+						<div
+							onClick={close}
+							className={`z-40 absolute inset-0 backdrop-brightness-75 backdrop-blur-xs transition-opacity duration-300 ${
+								isVisible ? "opacity-100" : "opacity-0"
+							}`}
+						/>
+
+						<div
+							className={`z-50 bg-orange-50 border-2 border-amber-500 rounded-2xl shadow-lg p-6 w-full max-w-md transition-discrete duration-300 flex flex-col ${
+								isVisible ? "scale-100 opacity-100" : "scale-75 opacity-0"
+							}`}
+						>
+							<div className="flex justify-between items-center mb-2">
+								<h2 className="text-xl font-bold">Delete Account</h2>
+								<button onClick={close} className="text-red-400 hover:text-red-500 text-2xl cursor-pointer">
+									<Icon icon="material-symbols:close-rounded" />
+								</button>
+							</div>
+
+							<p className="text-sm text-zinc-500">
+								Are you sure? This is permanent and will remove all uploaded Miis. This action cannot be undone.
+							</p>
+
+							{error && <span className="text-red-400 font-bold mt-2">Error: {error}</span>}
+
+							<div className="flex justify-end gap-2 mt-4">
+								<button onClick={close} className="pill button">
+									Cancel
+								</button>
+								<button onClick={submit} className="pill button !bg-red-400 !border-red-500 hover:!bg-red-500">
+									Delete
+								</button>
+							</div>
+						</div>
+					</div>,
+					document.body
+				)}
+		</>
+	);
+}

src/app/profile/settings/page.tsx

@@ -1,10 +1,13 @@
 import { redirect } from "next/navigation";
 import Image from "next/image";
+import Link from "next/link";
+
+import { Icon } from "@iconify/react";
 
 import { auth } from "@/lib/auth";
 import { prisma } from "@/lib/prisma";
-import { Icon } from "@iconify/react";
-import Link from "next/link";
+
+import DeleteAccount from "@/app/components/profile-settings/delete-account";
 
 export default async function ProfileSettingsPage() {
 	const session = await auth();
@@ -106,9 +109,7 @@ export default async function ProfileSettingsPage() {
 						<p className="text-sm text-zinc-500">This will permanently remove your account and all uploaded Miis. This action cannot be undone</p>
 					</div>
 
-					<button name="deletion" className="pill button w-fit h-min ml-auto !bg-red-400 !border-red-500 hover:!bg-red-500">
-						Delete Account
-					</button>
+					<DeleteAccount />
 				</div>
 			</div>
 		</div>