feat: 添加注销账号功能
- 在个人资料页面添加注销账号按钮 - 需要输入用户名确认才能删除 - 删除所有用户数据:牌组、卡片、笔记、关注等 - 添加 8 种语言翻译
This commit is contained in:
100
src/app/(auth)/users/[username]/DeleteAccountButton.tsx
Normal file
100
src/app/(auth)/users/[username]/DeleteAccountButton.tsx
Normal file
@@ -0,0 +1,100 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { useTranslations } from "next-intl";
|
||||
import { toast } from "sonner";
|
||||
import { Button } from "@/design-system/base/button";
|
||||
import { Modal } from "@/design-system/overlay/modal";
|
||||
import { actionDeleteAccount } from "@/modules/auth/auth-action";
|
||||
|
||||
interface DeleteAccountButtonProps {
|
||||
username: string;
|
||||
}
|
||||
|
||||
export function DeleteAccountButton({ username }: DeleteAccountButtonProps) {
|
||||
const t = useTranslations("user_profile");
|
||||
const router = useRouter();
|
||||
const [showModal, setShowModal] = useState(false);
|
||||
const [confirmUsername, setConfirmUsername] = useState("");
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const handleDelete = async () => {
|
||||
if (confirmUsername !== username) {
|
||||
toast.error(t("deleteAccount.usernameMismatch"));
|
||||
return;
|
||||
}
|
||||
|
||||
setLoading(true);
|
||||
try {
|
||||
const result = await actionDeleteAccount();
|
||||
if (result.success) {
|
||||
toast.success(t("deleteAccount.success"));
|
||||
router.push("/");
|
||||
} else {
|
||||
toast.error(result.message || t("deleteAccount.failed"));
|
||||
}
|
||||
} catch {
|
||||
toast.error(t("deleteAccount.failed"));
|
||||
} finally {
|
||||
setLoading(false);
|
||||
setShowModal(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Button variant="error" onClick={() => setShowModal(true)}>
|
||||
{t("deleteAccount.button")}
|
||||
</Button>
|
||||
|
||||
<Modal open={showModal} onClose={() => setShowModal(false)}>
|
||||
<div className="p-6">
|
||||
<h2 className="text-xl font-bold text-red-600 mb-4">
|
||||
{t("deleteAccount.title")}
|
||||
</h2>
|
||||
|
||||
<div className="space-y-4">
|
||||
<p className="text-gray-700">
|
||||
{t("deleteAccount.warning")}
|
||||
</p>
|
||||
|
||||
<ul className="list-disc list-inside text-gray-600 text-sm space-y-1">
|
||||
<li>{t("deleteAccount.warningDecks")}</li>
|
||||
<li>{t("deleteAccount.warningCards")}</li>
|
||||
<li>{t("deleteAccount.warningHistory")}</li>
|
||||
<li>{t("deleteAccount.warningPermanent")}</li>
|
||||
</ul>
|
||||
|
||||
<div className="mt-4">
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||
{t("deleteAccount.confirmLabel")} <span className="font-mono font-bold">{username}</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={confirmUsername}
|
||||
onChange={(e) => setConfirmUsername(e.target.value)}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-red-500"
|
||||
placeholder={username}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end gap-3 mt-6">
|
||||
<Button variant="secondary" onClick={() => setShowModal(false)}>
|
||||
{t("deleteAccount.cancel")}
|
||||
</Button>
|
||||
<Button
|
||||
variant="error"
|
||||
onClick={handleDelete}
|
||||
loading={loading}
|
||||
disabled={confirmUsername !== username}
|
||||
>
|
||||
{t("deleteAccount.confirm")}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -10,6 +10,7 @@ import { getTranslations } from "next-intl/server";
|
||||
import { auth } from "@/auth";
|
||||
import { headers } from "next/headers";
|
||||
import { FollowStats } from "@/components/follow/FollowStats";
|
||||
import { DeleteAccountButton } from "./DeleteAccountButton";
|
||||
|
||||
interface UserPageProps {
|
||||
params: Promise<{ username: string; }>;
|
||||
@@ -45,7 +46,14 @@ export default async function UserPage({ params }: UserPageProps) {
|
||||
<div className="bg-white rounded-lg shadow-md p-6 mb-6">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<div></div>
|
||||
{isOwnProfile && <LinkButton href="/logout">{t("logout")}</LinkButton>}
|
||||
<div className="flex items-center gap-3">
|
||||
{isOwnProfile && (
|
||||
<>
|
||||
<LinkButton href="/logout">{t("logout")}</LinkButton>
|
||||
<DeleteAccountButton username={username} />
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col sm:flex-row items-start sm:items-center space-y-4 sm:space-y-0 sm:space-x-6">
|
||||
{user.image ? (
|
||||
|
||||
@@ -61,3 +61,8 @@ export type ActionOutputUserProfile = {
|
||||
updatedAt: Date;
|
||||
};
|
||||
};
|
||||
|
||||
export type ActionOutputDeleteAccount = {
|
||||
success: boolean;
|
||||
message: string;
|
||||
};
|
||||
|
||||
@@ -5,11 +5,13 @@ import { headers } from "next/headers";
|
||||
import { redirect } from "next/navigation";
|
||||
import { ValidateError } from "@/lib/errors";
|
||||
import { createLogger } from "@/lib/logger";
|
||||
import { prisma } from "@/lib/db";
|
||||
import {
|
||||
ActionInputGetUserProfileByUsername,
|
||||
ActionInputSignIn,
|
||||
ActionInputSignUp,
|
||||
ActionOutputAuth,
|
||||
ActionOutputDeleteAccount,
|
||||
ActionOutputUserProfile,
|
||||
validateActionInputGetUserProfileByUsername,
|
||||
validateActionInputSignIn,
|
||||
@@ -180,3 +182,91 @@ export async function actionGetUserProfileByUsername(dto: ActionInputGetUserProf
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Delete account action
|
||||
* Permanently deletes the current user and all associated data
|
||||
*/
|
||||
export async function actionDeleteAccount(): Promise<ActionOutputDeleteAccount> {
|
||||
try {
|
||||
const session = await auth.api.getSession({ headers: await headers() });
|
||||
if (!session?.user?.id) {
|
||||
return { success: false, message: "Unauthorized" };
|
||||
}
|
||||
|
||||
const userId = session.user.id;
|
||||
|
||||
await prisma.$transaction(async (tx) => {
|
||||
// Delete in correct order to avoid foreign key constraints
|
||||
// 1. Revlogs (depend on cards)
|
||||
await tx.revlog.deleteMany({
|
||||
where: { card: { note: { userId } } }
|
||||
});
|
||||
|
||||
// 2. Cards (depend on notes and decks)
|
||||
await tx.card.deleteMany({
|
||||
where: { note: { userId } }
|
||||
});
|
||||
|
||||
// 3. Notes (depend on note types)
|
||||
await tx.note.deleteMany({
|
||||
where: { userId }
|
||||
});
|
||||
|
||||
// 4. Note types
|
||||
await tx.noteType.deleteMany({
|
||||
where: { userId }
|
||||
});
|
||||
|
||||
// 5. Deck favorites
|
||||
await tx.deckFavorite.deleteMany({
|
||||
where: { userId }
|
||||
});
|
||||
|
||||
// 6. Decks
|
||||
await tx.deck.deleteMany({
|
||||
where: { userId }
|
||||
});
|
||||
|
||||
// 7. Follows (both as follower and following)
|
||||
await tx.follow.deleteMany({
|
||||
where: {
|
||||
OR: [
|
||||
{ followerId: userId },
|
||||
{ followingId: userId }
|
||||
]
|
||||
}
|
||||
});
|
||||
|
||||
// 8. Dictionary lookups
|
||||
await tx.dictionaryLookUp.deleteMany({
|
||||
where: { userId }
|
||||
});
|
||||
|
||||
// 9. Translation history
|
||||
await tx.translationHistory.deleteMany({
|
||||
where: { userId }
|
||||
});
|
||||
|
||||
// 10. Sessions
|
||||
await tx.session.deleteMany({
|
||||
where: { userId }
|
||||
});
|
||||
|
||||
// 11. Accounts
|
||||
await tx.account.deleteMany({
|
||||
where: { userId }
|
||||
});
|
||||
|
||||
// 12. Finally, delete the user
|
||||
await tx.user.delete({
|
||||
where: { id: userId }
|
||||
});
|
||||
});
|
||||
|
||||
return { success: true, message: "Account deleted successfully" };
|
||||
} catch (e) {
|
||||
log.error("Delete account failed", { error: e });
|
||||
return { success: false, message: "Failed to delete account" };
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user