diff --git a/apps/web/public/locales/en/app.json b/apps/web/public/locales/en/app.json index d31396ae4..db12e6cd1 100644 --- a/apps/web/public/locales/en/app.json +++ b/apps/web/public/locales/en/app.json @@ -97,7 +97,6 @@ "addComment": "Add Comment", "profile": "Profile", "polls": "Polls", - "showMore": "Show more…", "timeZoneSelect__noOption": "No option found", "timeZoneSelect__inputPlaceholder": "Search…", "poweredByRallly": "Powered by {name}", @@ -246,5 +245,10 @@ "timeShownIn": "Times shown in {timeZone}", "pollStatusPausedDescription": "Votes cannot be submitted or edited at this time", "eventHostTitle": "Manage Access", - "eventHostDescription": "You are the creator of this poll" + "eventHostDescription": "You are the creator of this poll", + "deleteAccount": "Delete Account", + "deleteAccountDialogTitle": "Delete Account", + "deleteAccountDialogDescription": "Are you sure you want to delete your account?", + "deleteAccountInstruction": "Please confirm your email address to delete your account", + "emailMismatch": "Email does not match the account email" } diff --git a/apps/web/src/app/[locale]/(admin)/settings/profile/delete-account-dialog.tsx b/apps/web/src/app/[locale]/(admin)/settings/profile/delete-account-dialog.tsx new file mode 100644 index 000000000..2943524cd --- /dev/null +++ b/apps/web/src/app/[locale]/(admin)/settings/profile/delete-account-dialog.tsx @@ -0,0 +1,125 @@ +"use client"; +import { Button } from "@rallly/ui/button"; +import { + Dialog, + DialogClose, + DialogContent, + DialogDescription, + DialogFooter, + DialogHeader, + DialogProps, + DialogTitle, +} from "@rallly/ui/dialog"; +import { Form, FormField, FormItem, FormMessage } from "@rallly/ui/form"; +import { Input } from "@rallly/ui/input"; +import { signOut } from "next-auth/react"; +import { useForm } from "react-hook-form"; + +import { useTranslation } from "@/app/i18n/client"; +import { Trans } from "@/components/trans"; +import { usePostHog } from "@/utils/posthog"; +import { trpc } from "@/utils/trpc/client"; + +export function DeleteAccountDialog({ + email, + children, + ...rest +}: DialogProps & { + email: string; +}) { + const form = useForm<{ email: string }>({ + defaultValues: { + email: "", + }, + }); + const { t } = useTranslation("app"); + const trpcUtils = trpc.useUtils(); + const posthog = usePostHog(); + const deleteAccount = trpc.user.delete.useMutation({ + onSuccess() { + posthog?.capture("delete account"); + trpcUtils.invalidate(); + signOut({ + callbackUrl: "/login", + }); + }, + }); + + return ( +
+ ); +} diff --git a/apps/web/src/app/[locale]/(admin)/settings/profile/profile-page.tsx b/apps/web/src/app/[locale]/(admin)/settings/profile/profile-page.tsx index 75fe08af8..7bc142299 100644 --- a/apps/web/src/app/[locale]/(admin)/settings/profile/profile-page.tsx +++ b/apps/web/src/app/[locale]/(admin)/settings/profile/profile-page.tsx @@ -1,12 +1,16 @@ "use client"; import { Alert, AlertDescription, AlertTitle } from "@rallly/ui/alert"; +import { Button } from "@rallly/ui/button"; +import { DialogTrigger } from "@rallly/ui/dialog"; +import { Icon } from "@rallly/ui/icon"; import { Input } from "@rallly/ui/input"; import { Label } from "@rallly/ui/label"; -import { InfoIcon, LogOutIcon, UserXIcon } from "lucide-react"; +import { InfoIcon, LogOutIcon, TrashIcon, UserXIcon } from "lucide-react"; import Head from "next/head"; import Link from "next/link"; import { useTranslation } from "next-i18next"; +import { DeleteAccountDialog } from "@/app/[locale]/(admin)/settings/profile/delete-account-dialog"; import { LogoutButton } from "@/app/components/logout-button"; import { ProfileSettings } from "@/components/settings/profile-settings"; import { @@ -91,6 +95,29 @@ export const ProfilePage = () => {