support delete account

src/app/auth/delete-account/DeleteAccountClient.tsx

@@ -0,0 +1,74 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { useTranslations } from "next-intl";
+import { Button } from "@app/components/ui/button";
+import DeleteAccountConfirmDialog from "@app/components/DeleteAccountConfirmDialog";
+import UserProfileCard from "@app/components/UserProfileCard";
+import { ArrowLeft } from "lucide-react";
+import { createApiClient } from "@app/lib/api";
+import { useEnvContext } from "@app/hooks/useEnvContext";
+import { toast } from "@app/hooks/useToast";
+import { formatAxiosError } from "@app/lib/api";
+
+type DeleteAccountClientProps = {
+    displayName: string;
+};
+
+export default function DeleteAccountClient({
+    displayName
+}: DeleteAccountClientProps) {
+    const router = useRouter();
+    const t = useTranslations();
+    const { env } = useEnvContext();
+    const api = createApiClient({ env });
+    const [isDialogOpen, setIsDialogOpen] = useState(false);
+
+    function handleUseDifferentAccount() {
+        api.post("/auth/logout")
+            .catch((e) => {
+                console.error(t("logoutError"), e);
+                toast({
+                    title: t("logoutError"),
+                    description: formatAxiosError(e, t("logoutError"))
+                });
+            })
+            .then(() => {
+                router.push(
+                    "/auth/login?internal_redirect=/auth/delete-account"
+                );
+                router.refresh();
+            });
+    }
+
+    return (
+        <div className="space-y-6">
+            <UserProfileCard
+                identifier={displayName}
+                description={t("signingAs")}
+                onUseDifferentAccount={handleUseDifferentAccount}
+                useDifferentAccountText={t("deviceLoginUseDifferentAccount")}
+            />
+            <p className="text-sm text-muted-foreground">
+                {t("deleteAccountDescription")}
+            </p>
+            <div className="flex items-center gap-2">
+                <Button variant="outline" onClick={() => router.back()}>
+                    <ArrowLeft className="mr-2 h-4 w-4" />
+                    {t("back")}
+                </Button>
+                <Button
+                    variant="destructive"
+                    onClick={() => setIsDialogOpen(true)}
+                >
+                    {t("deleteAccountButton")}
+                </Button>
+            </div>
+            <DeleteAccountConfirmDialog
+                open={isDialogOpen}
+                setOpen={setIsDialogOpen}
+            />
+        </div>
+    );
+}

src/app/auth/delete-account/page.tsx

@@ -0,0 +1,28 @@
+import { verifySession } from "@app/lib/auth/verifySession";
+import { redirect } from "next/navigation";
+import { build } from "@server/build";
+import { cache } from "react";
+import DeleteAccountClient from "./DeleteAccountClient";
+import { getTranslations } from "next-intl/server";
+import { getUserDisplayName } from "@app/lib/getUserDisplayName";
+
+export const dynamic = "force-dynamic";
+
+export default async function DeleteAccountPage() {
+    const getUser = cache(verifySession);
+    const user = await getUser({ skipCheckVerifyEmail: true });
+
+    if (!user) {
+        redirect("/auth/login");
+    }
+
+    const t = await getTranslations();
+    const displayName = getUserDisplayName({ user });
+
+    return (
+        <div className="space-y-4">
+            <h1 className="text-xl font-semibold">{t("deleteAccount")}</h1>
+            <DeleteAccountClient displayName={displayName} />
+        </div>
+    );
+}