feat: add self remove accounts

apps/dokploy/components/dashboard/settings/profile/profile-form.tsx

@@ -26,10 +26,12 @@ import { toast } from "sonner";
 import { z } from "zod";
 import { Disable2FA } from "./disable-2fa";
 import { Enable2FA } from "./enable-2fa";
+import { AlertBlock } from "@/components/shared/alert-block";
 
 const profileSchema = z.object({
 	email: z.string(),
 	password: z.string().nullable(),
+	currentPassword: z.string().nullable(),
 	image: z.string().optional(),
 });
 
@@ -52,7 +54,8 @@ const randomImages = [
 
 export const ProfileForm = () => {
 	const { data, refetch } = api.auth.get.useQuery();
-	const { mutateAsync, isLoading } = api.auth.update.useMutation();
+	const { mutateAsync, isLoading, isError, error } =
+		api.auth.update.useMutation();
 	const { t } = useTranslation("settings");
 	const [gravatarHash, setGravatarHash] = useState<string | null>(null);
 
@@ -68,6 +71,7 @@ export const ProfileForm = () => {
 			email: data?.email || "",
 			password: "",
 			image: data?.image || "",
+			currentPassword: "",
 		},
 		resolver: zodResolver(profileSchema),
 	});
@@ -78,6 +82,7 @@ export const ProfileForm = () => {
 				email: data?.email || "",
 				password: "",
 				image: data?.image || "",
+				currentPassword: "",
 			});
 
 			if (data.email) {
@@ -94,6 +99,7 @@ export const ProfileForm = () => {
 			email: values.email.toLowerCase(),
 			password: values.password,
 			image: values.image,
+			currentPassword: values.currentPassword,
 		})
 			.then(async () => {
 				await refetch();
@@ -116,6 +122,8 @@ export const ProfileForm = () => {
 				{!data?.is2FAEnabled ? <Enable2FA /> : <Disable2FA />}
 			</CardHeader>
 			<CardContent className="space-y-2">
+				{isError && <AlertBlock type="error">{error?.message}</AlertBlock>}
+
 				<Form {...form}>
 					<form onSubmit={form.handleSubmit(onSubmit)} className="grid gap-4">
 						<div className="space-y-4">
@@ -135,6 +143,24 @@ export const ProfileForm = () => {
 									</FormItem>
 								)}
 							/>
+							<FormField
+								control={form.control}
+								name="currentPassword"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel>Current Password</FormLabel>
+										<FormControl>
+											<Input
+												type="password"
+												placeholder={t("settings.profile.password")}
+												{...field}
+												value={field.value || ""}
+											/>
+										</FormControl>
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
 							<FormField
 								control={form.control}
 								name="password"

apps/dokploy/components/dashboard/settings/profile/remove-self-account.tsx

@@ -0,0 +1,130 @@
+import { Button } from "@/components/ui/button";
+import {
+	Card,
+	CardContent,
+	CardDescription,
+	CardHeader,
+	CardTitle,
+} from "@/components/ui/card";
+import {
+	Form,
+	FormControl,
+	FormField,
+	FormItem,
+	FormLabel,
+	FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { api } from "@/utils/api";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useTranslation } from "next-i18next";
+import { useEffect } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
+import { DialogAction } from "@/components/shared/dialog-action";
+import { AlertBlock } from "@/components/shared/alert-block";
+import { useRouter } from "next/router";
+
+const profileSchema = z.object({
+	password: z.string().min(1, {
+		message: "Password is required",
+	}),
+});
+
+type Profile = z.infer<typeof profileSchema>;
+
+export const RemoveSelfAccount = () => {
+	const { data } = api.auth.get.useQuery();
+	const { mutateAsync, isLoading, error, isError } =
+		api.auth.removeSelfAccount.useMutation();
+	const { t } = useTranslation("settings");
+	const router = useRouter();
+
+	const form = useForm<Profile>({
+		defaultValues: {
+			password: "",
+		},
+		resolver: zodResolver(profileSchema),
+	});
+
+	useEffect(() => {
+		if (data) {
+			form.reset({
+				password: "",
+			});
+		}
+		form.reset();
+	}, [form, form.reset, data]);
+
+	const onSubmit = async (values: Profile) => {
+		await mutateAsync({
+			password: values.password,
+		})
+			.then(async () => {
+				toast.success("Profile Deleted");
+				router.push("/");
+			})
+			.catch(() => {});
+	};
+
+	return (
+		<Card className="bg-transparent">
+			<CardHeader className="flex flex-row gap-2 flex-wrap justify-between items-center">
+				<div>
+					<CardTitle className="text-xl">Remove Self Account</CardTitle>
+					<CardDescription>
+						If you want to remove your account, you can do it here
+					</CardDescription>
+				</div>
+			</CardHeader>
+			<CardContent className="space-y-2">
+				{isError && <AlertBlock type="error">{error?.message}</AlertBlock>}
+
+				<Form {...form}>
+					<form
+						onSubmit={(e) => e.preventDefault()}
+						onKeyDown={(e) => {
+							if (e.key === "Enter") {
+								e.preventDefault();
+							}
+						}}
+						className="grid gap-4"
+					>
+						<div className="space-y-4">
+							<FormField
+								control={form.control}
+								name="password"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel>{t("settings.profile.password")}</FormLabel>
+										<FormControl>
+											<Input
+												type="password"
+												placeholder={t("settings.profile.password")}
+												{...field}
+												value={field.value || ""}
+											/>
+										</FormControl>
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+						</div>
+					</form>
+				</Form>
+				<div>
+					<DialogAction
+						title="Are you sure you want to remove your account?"
+						description="This action cannot be undone, all your projects/servers will be deleted."
+						onClick={() => form.handleSubmit(onSubmit)()}
+					>
+						<Button type="button" isLoading={isLoading} variant="destructive">
+							Remove
+						</Button>
+					</DialogAction>
+				</div>
+			</CardContent>
+		</Card>
+	);
+};