102 lines
3.2 KiB
TypeScript
102 lines
3.2 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useTransition } from "react";
|
|
import { AlertTriangle } from "lucide-react";
|
|
import { toast } from "sonner";
|
|
import { signOut } from "next-auth/react";
|
|
|
|
import { Button } from "@/components/ui/button";
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogDescription,
|
|
DialogFooter,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
DialogTrigger,
|
|
} from "@/components/ui/dialog";
|
|
import { Input } from "@/components/ui/input";
|
|
import { deleteMyAccount } from "../actions";
|
|
|
|
export function DeleteAccountDialog() {
|
|
const [open, setOpen] = useState(false);
|
|
const [confirmText, setConfirmText] = useState("");
|
|
const [isPending, startTransition] = useTransition();
|
|
|
|
const isConfirmed = confirmText === "DELETE";
|
|
|
|
const handleDelete = () => {
|
|
if (!isConfirmed) return;
|
|
|
|
startTransition(async () => {
|
|
const res = await deleteMyAccount();
|
|
if (res.error) {
|
|
toast.error(res.error);
|
|
} else {
|
|
toast.success("Account wurde gelöscht. Du wirst abgemeldet...");
|
|
// Sign out client-side and redirect to landing page
|
|
await signOut({ callbackUrl: "/" });
|
|
}
|
|
});
|
|
};
|
|
|
|
return (
|
|
<Dialog open={open} onOpenChange={setOpen}>
|
|
<DialogTrigger asChild>
|
|
<Button variant="destructive" className="w-full sm:w-auto">
|
|
<AlertTriangle className="h-4 w-4" />
|
|
Account & Daten endgültig löschen
|
|
</Button>
|
|
</DialogTrigger>
|
|
<DialogContent className="border-[var(--danger)]">
|
|
<DialogHeader>
|
|
<DialogTitle className="flex items-center gap-2 text-[var(--danger)]">
|
|
<AlertTriangle className="h-5 w-5" />
|
|
Gefahrenzone: Account löschen
|
|
</DialogTitle>
|
|
<DialogDescription className="pt-2 text-base">
|
|
Diese Aktion kann <strong className="text-[var(--ink)]">nicht</strong>{" "}
|
|
rückgängig gemacht werden.
|
|
Wenn du das letzte Elternteil im Haushalt bist, wird die gesamte
|
|
Familie inklusive Kinder gelöscht. Gibt es ein weiteres Elternteil,
|
|
bleibt der Haushalt für diese Person erhalten und nur dein Account
|
|
wird entfernt.
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
|
|
<div className="my-2 rounded-lg border border-[var(--danger)] bg-[var(--danger-soft)] p-3 text-sm text-[var(--danger)]">
|
|
Bitte tippe <strong>DELETE</strong> in das Feld unten ein, um den
|
|
Vorgang zu bestätigen.
|
|
</div>
|
|
|
|
<div className="grid gap-2 py-4">
|
|
<Input
|
|
value={confirmText}
|
|
onChange={(e) => setConfirmText(e.target.value)}
|
|
placeholder="DELETE"
|
|
className="border-[var(--danger)] focus-visible:ring-[var(--focus-ring)]"
|
|
/>
|
|
</div>
|
|
|
|
<DialogFooter>
|
|
<Button
|
|
type="button"
|
|
variant="ghost"
|
|
onClick={() => setOpen(false)}
|
|
disabled={isPending}
|
|
>
|
|
Abbrechen
|
|
</Button>
|
|
<Button
|
|
variant="destructive"
|
|
onClick={handleDelete}
|
|
disabled={!isConfirmed || isPending}
|
|
>
|
|
{isPending ? "Wird gelöscht..." : "Endgültig löschen"}
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
}
|