Merge branch 'canary' into fa-locale

apps/dokploy/components/dashboard/application/delete-application.tsx

@@ -1,63 +1,143 @@
-import {
-	AlertDialog,
-	AlertDialogAction,
-	AlertDialogCancel,
-	AlertDialogContent,
-	AlertDialogDescription,
-	AlertDialogFooter,
-	AlertDialogHeader,
-	AlertDialogTitle,
-	AlertDialogTrigger,
-} from "@/components/ui/alert-dialog";
 import { Button } from "@/components/ui/button";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger,
+} from "@/components/ui/dialog";
+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 { TrashIcon } from "lucide-react";
 import { useRouter } from "next/router";
+import { useState } from "react";
+import { useForm } from "react-hook-form";
 import { toast } from "sonner";
+import { z } from "zod";
+
+const deleteApplicationSchema = z.object({
+	projectName: z.string().min(1, {
+		message: "Application name is required",
+	}),
+});
+
+type DeleteApplication = z.infer<typeof deleteApplicationSchema>;
 
 interface Props {
 	applicationId: string;
 }
 
 export const DeleteApplication = ({ applicationId }: Props) => {
+	const [isOpen, setIsOpen] = useState(false);
 	const { mutateAsync, isLoading } = api.application.delete.useMutation();
+	const { data } = api.application.one.useQuery(
+		{ applicationId },
+		{ enabled: !!applicationId },
+	);
 	const { push } = useRouter();
+	const form = useForm<DeleteApplication>({
+		defaultValues: {
+			projectName: "",
+		},
+		resolver: zodResolver(deleteApplicationSchema),
+	});
+
+	const onSubmit = async (formData: DeleteApplication) => {
+		const expectedName = `${data?.name}/${data?.appName}`;
+		if (formData.projectName === expectedName) {
+			await mutateAsync({
+				applicationId,
+			})
+				.then((data) => {
+					push(`/dashboard/project/${data?.projectId}`);
+					toast.success("Application deleted successfully");
+					setIsOpen(false);
+				})
+				.catch(() => {
+					toast.error("Error deleting the application");
+				});
+		} else {
+			form.setError("projectName", {
+				message: "Project name does not match",
+			});
+		}
+	};
+
 	return (
-		<AlertDialog>
-			<AlertDialogTrigger asChild>
+		<Dialog open={isOpen} onOpenChange={setIsOpen}>
+			<DialogTrigger asChild>
 				<Button variant="ghost" isLoading={isLoading}>
 					<TrashIcon className="size-4 text-muted-foreground" />
 				</Button>
-			</AlertDialogTrigger>
-			<AlertDialogContent>
-				<AlertDialogHeader>
-					<AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
-					<AlertDialogDescription>
+			</DialogTrigger>
+			<DialogContent className="max-h-screen overflow-y-auto sm:max-w-lg">
+				<DialogHeader>
+					<DialogTitle>Are you absolutely sure?</DialogTitle>
+					<DialogDescription>
 						This action cannot be undone. This will permanently delete the
-						application
-					</AlertDialogDescription>
-				</AlertDialogHeader>
-				<AlertDialogFooter>
-					<AlertDialogCancel>Cancel</AlertDialogCancel>
-					<AlertDialogAction
-						onClick={async () => {
-							await mutateAsync({
-								applicationId,
-							})
-								.then((data) => {
-									push(`/dashboard/project/${data?.projectId}`);
-
-									toast.success("Application delete succesfully");
-								})
-								.catch(() => {
-									toast.error("Error to delete Application");
-								});
+						application. If you are sure please enter the application name to
+						delete this application.
+					</DialogDescription>
+				</DialogHeader>
+				<div className="grid gap-4">
+					<Form {...form}>
+						<form
+							onSubmit={form.handleSubmit(onSubmit)}
+							id="hook-form-delete-application"
+							className="grid w-full gap-4"
+						>
+							<FormField
+								control={form.control}
+								name="projectName"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel>
+											To confirm, type "{data?.name}/{data?.appName}" in the box
+											below
+										</FormLabel>
+										<FormControl>
+											<Input
+												placeholder="Enter application name to confirm"
+												{...field}
+											/>
+										</FormControl>
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+						</form>
+					</Form>
+				</div>
+				<DialogFooter>
+					<Button
+						variant="secondary"
+						onClick={() => {
+							setIsOpen(false);
 						}}
+					>
+						Cancel
+					</Button>
+					<Button
+						isLoading={isLoading}
+						form="hook-form-delete-application"
+						type="submit"
+						variant="destructive"
 					>
 						Confirm
-					</AlertDialogAction>
-				</AlertDialogFooter>
-			</AlertDialogContent>
-		</AlertDialog>
+					</Button>
+				</DialogFooter>
+			</DialogContent>
+		</Dialog>
 	);
 };

apps/dokploy/components/dashboard/compose/delete-compose.tsx

@@ -1,63 +1,141 @@
-import {
-	AlertDialog,
-	AlertDialogAction,
-	AlertDialogCancel,
-	AlertDialogContent,
-	AlertDialogDescription,
-	AlertDialogFooter,
-	AlertDialogHeader,
-	AlertDialogTitle,
-	AlertDialogTrigger,
-} from "@/components/ui/alert-dialog";
 import { Button } from "@/components/ui/button";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger,
+} from "@/components/ui/dialog";
+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 { TrashIcon } from "lucide-react";
 import { useRouter } from "next/router";
+import { useState } from "react";
+import { useForm } from "react-hook-form";
 import { toast } from "sonner";
+import { z } from "zod";
+
+const deleteComposeSchema = z.object({
+	projectName: z.string().min(1, {
+		message: "Compose name is required",
+	}),
+});
+
+type DeleteCompose = z.infer<typeof deleteComposeSchema>;
 
 interface Props {
 	composeId: string;
 }
 
 export const DeleteCompose = ({ composeId }: Props) => {
+	const [isOpen, setIsOpen] = useState(false);
 	const { mutateAsync, isLoading } = api.compose.delete.useMutation();
+	const { data } = api.compose.one.useQuery(
+		{ composeId },
+		{ enabled: !!composeId },
+	);
 	const { push } = useRouter();
+	const form = useForm<DeleteCompose>({
+		defaultValues: {
+			projectName: "",
+		},
+		resolver: zodResolver(deleteComposeSchema),
+	});
+
+	const onSubmit = async (formData: DeleteCompose) => {
+		const expectedName = `${data?.name}/${data?.appName}`;
+		if (formData.projectName === expectedName) {
+			await mutateAsync({ composeId })
+				.then((result) => {
+					push(`/dashboard/project/${result?.projectId}`);
+					toast.success("Compose deleted successfully");
+					setIsOpen(false);
+				})
+				.catch(() => {
+					toast.error("Error deleting the compose");
+				});
+		} else {
+			form.setError("projectName", {
+				message: `Project name must match "${expectedName}"`,
+			});
+		}
+	};
+
 	return (
-		<AlertDialog>
-			<AlertDialogTrigger asChild>
+		<Dialog open={isOpen} onOpenChange={setIsOpen}>
+			<DialogTrigger asChild>
 				<Button variant="ghost" isLoading={isLoading}>
 					<TrashIcon className="size-4 text-muted-foreground" />
 				</Button>
-			</AlertDialogTrigger>
-			<AlertDialogContent>
-				<AlertDialogHeader>
-					<AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
-					<AlertDialogDescription>
+			</DialogTrigger>
+			<DialogContent className="max-h-screen overflow-y-auto sm:max-w-lg">
+				<DialogHeader>
+					<DialogTitle>Are you absolutely sure?</DialogTitle>
+					<DialogDescription>
 						This action cannot be undone. This will permanently delete the
-						compose and all its services.
-					</AlertDialogDescription>
-				</AlertDialogHeader>
-				<AlertDialogFooter>
-					<AlertDialogCancel>Cancel</AlertDialogCancel>
-					<AlertDialogAction
-						onClick={async () => {
-							await mutateAsync({
-								composeId,
-							})
-								.then((data) => {
-									push(`/dashboard/project/${data?.projectId}`);
-
-									toast.success("Compose delete succesfully");
-								})
-								.catch(() => {
-									toast.error("Error to delete the compose");
-								});
+						compose. If you are sure please enter the compose name to delete
+						this compose.
+					</DialogDescription>
+				</DialogHeader>
+				<div className="grid gap-4">
+					<Form {...form}>
+						<form
+							onSubmit={form.handleSubmit(onSubmit)}
+							id="hook-form-delete-compose"
+							className="grid w-full gap-4"
+						>
+							<FormField
+								control={form.control}
+								name="projectName"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel>
+											To confirm, type "{data?.name}/{data?.appName}" in the box
+											below
+										</FormLabel>{" "}
+										<FormControl>
+											<Input
+												placeholder="Enter compose name to confirm"
+												{...field}
+											/>
+										</FormControl>
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+						</form>
+					</Form>
+				</div>
+				<DialogFooter>
+					<Button
+						variant="secondary"
+						onClick={() => {
+							setIsOpen(false);
 						}}
+					>
+						Cancel
+					</Button>
+					<Button
+						isLoading={isLoading}
+						form="hook-form-delete-compose"
+						type="submit"
+						variant="destructive"
 					>
 						Confirm
-					</AlertDialogAction>
-				</AlertDialogFooter>
-			</AlertDialogContent>
-		</AlertDialog>
+					</Button>
+				</DialogFooter>
+			</DialogContent>
+		</Dialog>
 	);
 };

apps/dokploy/components/dashboard/mariadb/delete-mariadb.tsx

@@ -1,62 +1,140 @@
-import {
-	AlertDialog,
-	AlertDialogAction,
-	AlertDialogCancel,
-	AlertDialogContent,
-	AlertDialogDescription,
-	AlertDialogFooter,
-	AlertDialogHeader,
-	AlertDialogTitle,
-	AlertDialogTrigger,
-} from "@/components/ui/alert-dialog";
 import { Button } from "@/components/ui/button";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger,
+} from "@/components/ui/dialog";
+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 { TrashIcon } from "lucide-react";
 import { useRouter } from "next/router";
+import { useState } from "react";
+import { useForm } from "react-hook-form";
 import { toast } from "sonner";
+import { z } from "zod";
+
+const deleteMariadbSchema = z.object({
+	projectName: z.string().min(1, {
+		message: "Database name is required",
+	}),
+});
+
+type DeleteMariadb = z.infer<typeof deleteMariadbSchema>;
 
 interface Props {
 	mariadbId: string;
 }
-
 export const DeleteMariadb = ({ mariadbId }: Props) => {
+	const [isOpen, setIsOpen] = useState(false);
 	const { mutateAsync, isLoading } = api.mariadb.remove.useMutation();
+	const { data } = api.mariadb.one.useQuery(
+		{ mariadbId },
+		{ enabled: !!mariadbId },
+	);
 	const { push } = useRouter();
+	const form = useForm<DeleteMariadb>({
+		defaultValues: {
+			projectName: "",
+		},
+		resolver: zodResolver(deleteMariadbSchema),
+	});
+
+	const onSubmit = async (formData: DeleteMariadb) => {
+		const expectedName = `${data?.name}/${data?.appName}`;
+		if (formData.projectName === expectedName) {
+			await mutateAsync({ mariadbId })
+				.then((data) => {
+					push(`/dashboard/project/${data?.projectId}`);
+					toast.success("Database deleted successfully");
+					setIsOpen(false);
+				})
+				.catch(() => {
+					toast.error("Error deleting the database");
+				});
+		} else {
+			form.setError("projectName", {
+				message: "Database name does not match",
+			});
+		}
+	};
+
 	return (
-		<AlertDialog>
-			<AlertDialogTrigger asChild>
+		<Dialog open={isOpen} onOpenChange={setIsOpen}>
+			<DialogTrigger asChild>
 				<Button variant="ghost" isLoading={isLoading}>
-					<TrashIcon className="size-4  text-muted-foreground " />
+					<TrashIcon className="size-4 text-muted-foreground" />
 				</Button>
-			</AlertDialogTrigger>
-			<AlertDialogContent>
-				<AlertDialogHeader>
-					<AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
-					<AlertDialogDescription>
+			</DialogTrigger>
+			<DialogContent className="max-h-screen overflow-y-auto sm:max-w-lg">
+				<DialogHeader>
+					<DialogTitle>Are you absolutely sure?</DialogTitle>
+					<DialogDescription>
 						This action cannot be undone. This will permanently delete the
-						database
-					</AlertDialogDescription>
-				</AlertDialogHeader>
-				<AlertDialogFooter>
-					<AlertDialogCancel>Cancel</AlertDialogCancel>
-					<AlertDialogAction
-						onClick={async () => {
-							await mutateAsync({
-								mariadbId,
-							})
-								.then((data) => {
-									push(`/dashboard/project/${data?.projectId}`);
-									toast.success("Database delete succesfully");
-								})
-								.catch(() => {
-									toast.error("Error to delete the database");
-								});
+						database. If you are sure please enter the database name to delete
+						this database.
+					</DialogDescription>
+				</DialogHeader>
+				<div className="grid gap-4">
+					<Form {...form}>
+						<form
+							onSubmit={form.handleSubmit(onSubmit)}
+							id="hook-form-delete-mariadb"
+							className="grid w-full gap-4"
+						>
+							<FormField
+								control={form.control}
+								name="projectName"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel>
+											To confirm, type "{data?.name}/{data?.appName}" in the box
+											below
+										</FormLabel>
+										<FormControl>
+											<Input
+												placeholder="Enter database name to confirm"
+												{...field}
+											/>
+										</FormControl>
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+						</form>
+					</Form>
+				</div>
+				<DialogFooter>
+					<Button
+						variant="secondary"
+						onClick={() => {
+							setIsOpen(false);
 						}}
+					>
+						Cancel
+					</Button>
+					<Button
+						isLoading={isLoading}
+						form="hook-form-delete-mariadb"
+						type="submit"
+						variant="destructive"
 					>
 						Confirm
-					</AlertDialogAction>
-				</AlertDialogFooter>
-			</AlertDialogContent>
-		</AlertDialog>
+					</Button>
+				</DialogFooter>
+			</DialogContent>
+		</Dialog>
 	);
 };

apps/dokploy/components/dashboard/mongo/delete-mongo.tsx

@@ -1,62 +1,139 @@
-import {
-	AlertDialog,
-	AlertDialogAction,
-	AlertDialogCancel,
-	AlertDialogContent,
-	AlertDialogDescription,
-	AlertDialogFooter,
-	AlertDialogHeader,
-	AlertDialogTitle,
-	AlertDialogTrigger,
-} from "@/components/ui/alert-dialog";
 import { Button } from "@/components/ui/button";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger,
+} from "@/components/ui/dialog";
+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 { TrashIcon } from "lucide-react";
 import { useRouter } from "next/router";
+import { useState } from "react";
+import { useForm } from "react-hook-form";
 import { toast } from "sonner";
+import { z } from "zod";
+
+const deleteMongoSchema = z.object({
+	projectName: z.string().min(1, {
+		message: "Database name is required",
+	}),
+});
+
+type DeleteMongo = z.infer<typeof deleteMongoSchema>;
 
 interface Props {
 	mongoId: string;
 }
 
+// commen
+
 export const DeleteMongo = ({ mongoId }: Props) => {
+	const [isOpen, setIsOpen] = useState(false);
 	const { mutateAsync, isLoading } = api.mongo.remove.useMutation();
+	const { data } = api.mongo.one.useQuery({ mongoId }, { enabled: !!mongoId });
 	const { push } = useRouter();
+	const form = useForm<DeleteMongo>({
+		defaultValues: {
+			projectName: "",
+		},
+		resolver: zodResolver(deleteMongoSchema),
+	});
+
+	const onSubmit = async (formData: DeleteMongo) => {
+		const expectedName = `${data?.name}/${data?.appName}`;
+		if (formData.projectName === expectedName) {
+			await mutateAsync({ mongoId })
+				.then((data) => {
+					push(`/dashboard/project/${data?.projectId}`);
+					toast.success("Database deleted successfully");
+					setIsOpen(false);
+				})
+				.catch(() => {
+					toast.error("Error deleting the database");
+				});
+		} else {
+			form.setError("projectName", {
+				message: "Database name does not match",
+			});
+		}
+	};
 	return (
-		<AlertDialog>
-			<AlertDialogTrigger asChild>
+		<Dialog open={isOpen} onOpenChange={setIsOpen}>
+			<DialogTrigger asChild>
 				<Button variant="ghost" isLoading={isLoading}>
-					<TrashIcon className="size-4  text-muted-foreground " />
+					<TrashIcon className="size-4 text-muted-foreground" />
 				</Button>
-			</AlertDialogTrigger>
-			<AlertDialogContent>
-				<AlertDialogHeader>
-					<AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
-					<AlertDialogDescription>
+			</DialogTrigger>
+			<DialogContent className="max-h-screen overflow-y-auto sm:max-w-lg">
+				<DialogHeader>
+					<DialogTitle>Are you absolutely sure?</DialogTitle>
+					<DialogDescription>
 						This action cannot be undone. This will permanently delete the
-						database
-					</AlertDialogDescription>
-				</AlertDialogHeader>
-				<AlertDialogFooter>
-					<AlertDialogCancel>Cancel</AlertDialogCancel>
-					<AlertDialogAction
-						onClick={async () => {
-							await mutateAsync({
-								mongoId,
-							})
-								.then((data) => {
-									push(`/dashboard/project/${data?.projectId}`);
-									toast.success("Database delete succesfully");
-								})
-								.catch(() => {
-									toast.error("Error to delete the database");
-								});
+						database. If you are sure please enter the database name to delete
+						this database.
+					</DialogDescription>
+				</DialogHeader>
+				<div className="grid gap-4">
+					<Form {...form}>
+						<form
+							onSubmit={form.handleSubmit(onSubmit)}
+							id="hook-form-delete-mongo"
+							className="grid w-full gap-4"
+						>
+							<FormField
+								control={form.control}
+								name="projectName"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel>
+											To confirm, type "{data?.name}/{data?.appName}" in the box
+											below
+										</FormLabel>
+										<FormControl>
+											<Input
+												placeholder="Enter database name to confirm"
+												{...field}
+											/>
+										</FormControl>
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+						</form>
+					</Form>
+				</div>
+				<DialogFooter>
+					<Button
+						variant="secondary"
+						onClick={() => {
+							setIsOpen(false);
 						}}
+					>
+						Cancel
+					</Button>
+					<Button
+						isLoading={isLoading}
+						form="hook-form-delete-mongo"
+						type="submit"
+						variant="destructive"
 					>
 						Confirm
-					</AlertDialogAction>
-				</AlertDialogFooter>
-			</AlertDialogContent>
-		</AlertDialog>
+					</Button>
+				</DialogFooter>
+			</DialogContent>
+		</Dialog>
 	);
 };

apps/dokploy/components/dashboard/mysql/delete-mysql.tsx

@@ -1,62 +1,138 @@
-import {
-	AlertDialog,
-	AlertDialogAction,
-	AlertDialogCancel,
-	AlertDialogContent,
-	AlertDialogDescription,
-	AlertDialogFooter,
-	AlertDialogHeader,
-	AlertDialogTitle,
-	AlertDialogTrigger,
-} from "@/components/ui/alert-dialog";
 import { Button } from "@/components/ui/button";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger,
+} from "@/components/ui/dialog";
+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 { TrashIcon } from "lucide-react";
 import { useRouter } from "next/router";
+import { useState } from "react";
+import { useForm } from "react-hook-form";
 import { toast } from "sonner";
+import { z } from "zod";
+
+const deleteMysqlSchema = z.object({
+	projectName: z.string().min(1, {
+		message: "Database name is required",
+	}),
+});
+
+type DeleteMysql = z.infer<typeof deleteMysqlSchema>;
 
 interface Props {
 	mysqlId: string;
 }
 
 export const DeleteMysql = ({ mysqlId }: Props) => {
+	const [isOpen, setIsOpen] = useState(false);
 	const { mutateAsync, isLoading } = api.mysql.remove.useMutation();
+	const { data } = api.mysql.one.useQuery({ mysqlId }, { enabled: !!mysqlId });
 	const { push } = useRouter();
+	const form = useForm<DeleteMysql>({
+		defaultValues: {
+			projectName: "",
+		},
+		resolver: zodResolver(deleteMysqlSchema),
+	});
+
+	const onSubmit = async (formData: DeleteMysql) => {
+		const expectedName = `${data?.name}/${data?.appName}`;
+		if (formData.projectName === expectedName) {
+			await mutateAsync({ mysqlId })
+				.then((data) => {
+					push(`/dashboard/project/${data?.projectId}`);
+					toast.success("Database deleted successfully");
+					setIsOpen(false);
+				})
+				.catch(() => {
+					toast.error("Error deleting the database");
+				});
+		} else {
+			form.setError("projectName", {
+				message: "Database name does not match",
+			});
+		}
+	};
+
 	return (
-		<AlertDialog>
-			<AlertDialogTrigger asChild>
+		<Dialog open={isOpen} onOpenChange={setIsOpen}>
+			<DialogTrigger asChild>
 				<Button variant="ghost" isLoading={isLoading}>
-					<TrashIcon className="size-4  text-muted-foreground " />
+					<TrashIcon className="size-4 text-muted-foreground" />
 				</Button>
-			</AlertDialogTrigger>
-			<AlertDialogContent>
-				<AlertDialogHeader>
-					<AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
-					<AlertDialogDescription>
+			</DialogTrigger>
+			<DialogContent className="max-h-screen overflow-y-auto sm:max-w-lg">
+				<DialogHeader>
+					<DialogTitle>Are you absolutely sure?</DialogTitle>
+					<DialogDescription>
 						This action cannot be undone. This will permanently delete the
-						database
-					</AlertDialogDescription>
-				</AlertDialogHeader>
-				<AlertDialogFooter>
-					<AlertDialogCancel>Cancel</AlertDialogCancel>
-					<AlertDialogAction
-						onClick={async () => {
-							await mutateAsync({
-								mysqlId,
-							})
-								.then((data) => {
-									push(`/dashboard/project/${data?.projectId}`);
-									toast.success("Database delete succesfully");
-								})
-								.catch(() => {
-									toast.error("Error to delete the database");
-								});
+						database. If you are sure please enter the database name to delete
+						this database.
+					</DialogDescription>
+				</DialogHeader>
+				<div className="grid gap-4">
+					<Form {...form}>
+						<form
+							onSubmit={form.handleSubmit(onSubmit)}
+							id="hook-form-delete-mysql"
+							className="grid w-full gap-4"
+						>
+							<FormField
+								control={form.control}
+								name="projectName"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel>
+											To confirm, type "{data?.name}/{data?.appName}" in the box
+											below
+										</FormLabel>
+										<FormControl>
+											<Input
+												placeholder="Enter database name to confirm"
+												{...field}
+											/>
+										</FormControl>
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+						</form>
+					</Form>
+				</div>
+				<DialogFooter>
+					<Button
+						variant="secondary"
+						onClick={() => {
+							setIsOpen(false);
 						}}
+					>
+						Cancel
+					</Button>
+					<Button
+						isLoading={isLoading}
+						form="hook-form-delete-mysql"
+						type="submit"
+						variant="destructive"
 					>
 						Confirm
-					</AlertDialogAction>
-				</AlertDialogFooter>
-			</AlertDialogContent>
-		</AlertDialog>
+					</Button>
+				</DialogFooter>
+			</DialogContent>
+		</Dialog>
 	);
 };

apps/dokploy/components/dashboard/postgres/delete-postgres.tsx

@@ -1,62 +1,141 @@
-import {
-	AlertDialog,
-	AlertDialogAction,
-	AlertDialogCancel,
-	AlertDialogContent,
-	AlertDialogDescription,
-	AlertDialogFooter,
-	AlertDialogHeader,
-	AlertDialogTitle,
-	AlertDialogTrigger,
-} from "@/components/ui/alert-dialog";
 import { Button } from "@/components/ui/button";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger,
+} from "@/components/ui/dialog";
+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 { TrashIcon } from "lucide-react";
 import { useRouter } from "next/router";
+import { useState } from "react";
+import { useForm } from "react-hook-form";
 import { toast } from "sonner";
+import { z } from "zod";
+
+const deletePostgresSchema = z.object({
+	projectName: z.string().min(1, {
+		message: "Database name is required",
+	}),
+});
+
+type DeletePostgres = z.infer<typeof deletePostgresSchema>;
 
 interface Props {
 	postgresId: string;
 }
 
 export const DeletePostgres = ({ postgresId }: Props) => {
+	const [isOpen, setIsOpen] = useState(false);
 	const { mutateAsync, isLoading } = api.postgres.remove.useMutation();
+	const { data } = api.postgres.one.useQuery(
+		{ postgresId },
+		{ enabled: !!postgresId },
+	);
 	const { push } = useRouter();
+	const form = useForm<DeletePostgres>({
+		defaultValues: {
+			projectName: "",
+		},
+		resolver: zodResolver(deletePostgresSchema),
+	});
+
+	const onSubmit = async (formData: DeletePostgres) => {
+		const expectedName = `${data?.name}/${data?.appName}`;
+		if (formData.projectName === expectedName) {
+			await mutateAsync({ postgresId })
+				.then((data) => {
+					push(`/dashboard/project/${data?.projectId}`);
+					toast.success("Database deleted successfully");
+					setIsOpen(false);
+				})
+				.catch(() => {
+					toast.error("Error deleting the database");
+				});
+		} else {
+			form.setError("projectName", {
+				message: "Database name does not match",
+			});
+		}
+	};
+
 	return (
-		<AlertDialog>
-			<AlertDialogTrigger asChild>
+		<Dialog open={isOpen} onOpenChange={setIsOpen}>
+			<DialogTrigger asChild>
 				<Button variant="ghost" isLoading={isLoading}>
-					<TrashIcon className="size-4  text-muted-foreground " />
+					<TrashIcon className="size-4 text-muted-foreground" />
 				</Button>
-			</AlertDialogTrigger>
-			<AlertDialogContent>
-				<AlertDialogHeader>
-					<AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
-					<AlertDialogDescription>
+			</DialogTrigger>
+			<DialogContent className="max-h-screen overflow-y-auto sm:max-w-lg">
+				<DialogHeader>
+					<DialogTitle>Are you absolutely sure?</DialogTitle>
+					<DialogDescription>
 						This action cannot be undone. This will permanently delete the
-						database
-					</AlertDialogDescription>
-				</AlertDialogHeader>
-				<AlertDialogFooter>
-					<AlertDialogCancel>Cancel</AlertDialogCancel>
-					<AlertDialogAction
-						onClick={async () => {
-							await mutateAsync({
-								postgresId,
-							})
-								.then((data) => {
-									push(`/dashboard/project/${data?.projectId}`);
-									toast.success("Database delete succesfully");
-								})
-								.catch(() => {
-									toast.error("Error to delete the database");
-								});
+						database. If you are sure please enter the database name to delete
+						this database.
+					</DialogDescription>
+				</DialogHeader>
+				<div className="grid gap-4">
+					<Form {...form}>
+						<form
+							onSubmit={form.handleSubmit(onSubmit)}
+							id="hook-form-delete-postgres"
+							className="grid w-full gap-4"
+						>
+							<FormField
+								control={form.control}
+								name="projectName"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel>
+											To confirm, type "{data?.name}/{data?.appName}" in the box
+											below
+										</FormLabel>
+										<FormControl>
+											<Input
+												placeholder="Enter database name to confirm"
+												{...field}
+											/>
+										</FormControl>
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+						</form>
+					</Form>
+				</div>
+				<DialogFooter>
+					<Button
+						variant="secondary"
+						onClick={() => {
+							setIsOpen(false);
 						}}
+					>
+						Cancel
+					</Button>
+					<Button
+						isLoading={isLoading}
+						form="hook-form-delete-postgres"
+						type="submit"
+						variant="destructive"
 					>
 						Confirm
-					</AlertDialogAction>
-				</AlertDialogFooter>
-			</AlertDialogContent>
-		</AlertDialog>
+					</Button>
+				</DialogFooter>
+			</DialogContent>
+		</Dialog>
 	);
 };

apps/dokploy/components/dashboard/redis/delete-redis.tsx

@@ -1,62 +1,138 @@
-import {
-	AlertDialog,
-	AlertDialogAction,
-	AlertDialogCancel,
-	AlertDialogContent,
-	AlertDialogDescription,
-	AlertDialogFooter,
-	AlertDialogHeader,
-	AlertDialogTitle,
-	AlertDialogTrigger,
-} from "@/components/ui/alert-dialog";
 import { Button } from "@/components/ui/button";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger,
+} from "@/components/ui/dialog";
+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 { TrashIcon } from "lucide-react";
 import { useRouter } from "next/router";
+import { useState } from "react";
+import { useForm } from "react-hook-form";
 import { toast } from "sonner";
+import { z } from "zod";
+
+const deleteRedisSchema = z.object({
+	projectName: z.string().min(1, {
+		message: "Database name is required",
+	}),
+});
+
+type DeleteRedis = z.infer<typeof deleteRedisSchema>;
 
 interface Props {
 	redisId: string;
 }
 
 export const DeleteRedis = ({ redisId }: Props) => {
+	const [isOpen, setIsOpen] = useState(false);
 	const { mutateAsync, isLoading } = api.redis.remove.useMutation();
+	const { data } = api.redis.one.useQuery({ redisId }, { enabled: !!redisId });
 	const { push } = useRouter();
+	const form = useForm<DeleteRedis>({
+		defaultValues: {
+			projectName: "",
+		},
+		resolver: zodResolver(deleteRedisSchema),
+	});
+
+	const onSubmit = async (formData: DeleteRedis) => {
+		const expectedName = `${data?.name}/${data?.appName}`;
+		if (formData.projectName === expectedName) {
+			await mutateAsync({ redisId })
+				.then((data) => {
+					push(`/dashboard/project/${data?.projectId}`);
+					toast.success("Database deleted successfully");
+					setIsOpen(false);
+				})
+				.catch(() => {
+					toast.error("Error deleting the database");
+				});
+		} else {
+			form.setError("projectName", {
+				message: "Database name does not match",
+			});
+		}
+	};
+
 	return (
-		<AlertDialog>
-			<AlertDialogTrigger asChild>
+		<Dialog open={isOpen} onOpenChange={setIsOpen}>
+			<DialogTrigger asChild>
 				<Button variant="ghost" isLoading={isLoading}>
-					<TrashIcon className="size-4  text-muted-foreground " />
+					<TrashIcon className="size-4 text-muted-foreground" />
 				</Button>
-			</AlertDialogTrigger>
-			<AlertDialogContent>
-				<AlertDialogHeader>
-					<AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
-					<AlertDialogDescription>
+			</DialogTrigger>
+			<DialogContent className="max-h-screen overflow-y-auto sm:max-w-lg">
+				<DialogHeader>
+					<DialogTitle>Are you absolutely sure?</DialogTitle>
+					<DialogDescription>
 						This action cannot be undone. This will permanently delete the
-						database
-					</AlertDialogDescription>
-				</AlertDialogHeader>
-				<AlertDialogFooter>
-					<AlertDialogCancel>Cancel</AlertDialogCancel>
-					<AlertDialogAction
-						onClick={async () => {
-							await mutateAsync({
-								redisId,
-							})
-								.then((data) => {
-									push(`/dashboard/project/${data?.projectId}`);
-									toast.success("Database delete succesfully");
-								})
-								.catch(() => {
-									toast.error("Error to delete the database");
-								});
+						database. If you are sure please enter the database name to delete
+						this database.
+					</DialogDescription>
+				</DialogHeader>
+				<div className="grid gap-4">
+					<Form {...form}>
+						<form
+							onSubmit={form.handleSubmit(onSubmit)}
+							id="hook-form-delete-redis"
+							className="grid w-full gap-4"
+						>
+							<FormField
+								control={form.control}
+								name="projectName"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel>
+											To confirm, type "{data?.name}/{data?.appName}" in the box
+											below
+										</FormLabel>
+										<FormControl>
+											<Input
+												placeholder="Enter database name to confirm"
+												{...field}
+											/>
+										</FormControl>
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+						</form>
+					</Form>
+				</div>
+				<DialogFooter>
+					<Button
+						variant="secondary"
+						onClick={() => {
+							setIsOpen(false);
 						}}
+					>
+						Cancel
+					</Button>
+					<Button
+						isLoading={isLoading}
+						form="hook-form-delete-redis"
+						type="submit"
+						variant="destructive"
 					>
 						Confirm
-					</AlertDialogAction>
-				</AlertDialogFooter>
-			</AlertDialogContent>
-		</AlertDialog>
+					</Button>
+				</DialogFooter>
+			</DialogContent>
+		</Dialog>
 	);
 };

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

@@ -4,28 +4,28 @@ import * as z from "zod";
 
 import { Button } from "@/components/ui/button";
 import {
-    Card,
-    CardContent,
-    CardDescription,
-    CardHeader,
-    CardTitle,
+	Card,
+	CardContent,
+	CardDescription,
+	CardHeader,
+	CardTitle,
 } from "@/components/ui/card";
 import {
-    Form,
-    FormControl,
-    FormDescription,
-    FormField,
-    FormItem,
-    FormLabel,
-    FormMessage,
+	Form,
+	FormControl,
+	FormDescription,
+	FormField,
+	FormItem,
+	FormLabel,
+	FormMessage,
 } from "@/components/ui/form";
 import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
 import {
-    Select,
-    SelectContent,
-    SelectItem,
-    SelectTrigger,
-    SelectValue,
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
 } from "@/components/ui/select";
 import useLocale from "@/utils/hooks/use-locale";
 import { useTranslation } from "next-i18next";
@@ -34,226 +34,176 @@ import { useEffect } from "react";
 import { toast } from "sonner";
 
 const appearanceFormSchema = z.object({
-    theme: z.enum(["light", "dark", "system"], {
-        required_error: "Please select a theme.",
-    }),
-    language: z.enum(["en", "pl", "ru", "de", "zh-Hant", "zh-Hans", "fa"], {
-        required_error: "Please select a language.",
-    }),
+	theme: z.enum(["light", "dark", "system"], {
+		required_error: "Please select a theme.",
+	}),
+	language: z.enum(
+		["en", "pl", "ru", "fr", "de", "tr", "zh-Hant", "zh-Hans", "fa"],
+		{
+			required_error: "Please select a language.",
+		},
+	),
 });
 
 type AppearanceFormValues = z.infer<typeof appearanceFormSchema>;
 
 // This can come from your database or API.
 const defaultValues: Partial<AppearanceFormValues> = {
-    theme: "system",
-    language: "en",
+	theme: "system",
+	language: "en",
 };
 
 export function AppearanceForm() {
-    const { setTheme, theme } = useTheme();
-    const { locale, setLocale } = useLocale();
-    const { t } = useTranslation("settings");
+	const { setTheme, theme } = useTheme();
+	const { locale, setLocale } = useLocale();
+	const { t } = useTranslation("settings");
 
-    const form = useForm<AppearanceFormValues>({
-        resolver: zodResolver(appearanceFormSchema),
-        defaultValues,
-    });
+	const form = useForm<AppearanceFormValues>({
+		resolver: zodResolver(appearanceFormSchema),
+		defaultValues,
+	});
 
-    useEffect(() => {
-        form.reset({
-            theme: (theme ?? "system") as AppearanceFormValues["theme"],
-            language: locale,
-        });
-    }, [form, theme, locale]);
-    function onSubmit(data: AppearanceFormValues) {
-        setTheme(data.theme);
-        setLocale(data.language);
-        toast.success("Preferences Updated");
-    }
+	useEffect(() => {
+		form.reset({
+			theme: (theme ?? "system") as AppearanceFormValues["theme"],
+			language: locale,
+		});
+	}, [form, theme, locale]);
+	function onSubmit(data: AppearanceFormValues) {
+		setTheme(data.theme);
+		setLocale(data.language);
+		toast.success("Preferences Updated");
+	}
 
-    return (
-        <Card className="bg-transparent">
-            <CardHeader>
-                <CardTitle className="text-xl">
-                    {t("settings.appearance.title")}
-                </CardTitle>
-                <CardDescription>
-                    {t("settings.appearance.description")}
-                </CardDescription>
-            </CardHeader>
-            <CardContent className="space-y-2">
-                <Form {...form}>
-                    <form
-                        onSubmit={form.handleSubmit(onSubmit)}
-                        className="space-y-8"
-                    >
-                        <FormField
-                            control={form.control}
-                            name="theme"
-                            defaultValue={form.control._defaultValues.theme}
-                            render={({ field }) => {
-                                return (
-                                    <FormItem className="space-y-1 ">
-                                        <FormLabel>
-                                            {t("settings.appearance.theme")}
-                                        </FormLabel>
-                                        <FormDescription>
-                                            {t(
-                                                "settings.appearance.themeDescription"
-                                            )}
-                                        </FormDescription>
-                                        <FormMessage />
-                                        <RadioGroup
-                                            onValueChange={field.onChange}
-                                            defaultValue={field.value}
-                                            value={field.value}
-                                            className="grid max-w-md md:max-w-lg grid-cols-1 sm:grid-cols-3 gap-8 pt-2"
-                                        >
-                                            <FormItem>
-                                                <FormLabel className="[&:has([data-state=checked])>div]:border-primary">
-                                                    <FormControl>
-                                                        <RadioGroupItem
-                                                            value="light"
-                                                            className="sr-only"
-                                                        />
-                                                    </FormControl>
-                                                    <div className="items-center rounded-md border-2 border-muted p-1 hover:bg-accent transition-colors cursor-pointer">
-                                                        <img
-                                                            src="/images/theme-light.svg"
-                                                            alt="light"
-                                                        />
-                                                    </div>
-                                                    <span className="block w-full p-2 text-center font-normal">
-                                                        {t(
-                                                            "settings.appearance.themes.light"
-                                                        )}
-                                                    </span>
-                                                </FormLabel>
-                                            </FormItem>
-                                            <FormItem>
-                                                <FormLabel className="[&:has([data-state=checked])>div]:border-primary">
-                                                    <FormControl>
-                                                        <RadioGroupItem
-                                                            value="dark"
-                                                            className="sr-only"
-                                                        />
-                                                    </FormControl>
-                                                    <div className="items-center rounded-md border-2 border-muted bg-popover p-1 transition-colors hover:bg-accent hover:text-accent-foreground cursor-pointer">
-                                                        <img
-                                                            src="/images/theme-dark.svg"
-                                                            alt="dark"
-                                                        />
-                                                    </div>
-                                                    <span className="block w-full p-2 text-center font-normal">
-                                                        {t(
-                                                            "settings.appearance.themes.dark"
-                                                        )}
-                                                    </span>
-                                                </FormLabel>
-                                            </FormItem>
-                                            <FormItem>
-                                                <FormLabel className="[&:has([data-state=checked])>div]:border-primary">
-                                                    <FormControl>
-                                                        <RadioGroupItem
-                                                            value="system"
-                                                            className="sr-only"
-                                                        />
-                                                    </FormControl>
-                                                    <div className="items-center rounded-md border-2 border-muted bg-popover p-1 transition-colors hover:bg-accent hover:text-accent-foreground cursor-pointer">
-                                                        <img
-                                                            src="/images/theme-system.svg"
-                                                            alt="system"
-                                                        />
-                                                    </div>
-                                                    <span className="block w-full p-2 text-center font-normal">
-                                                        {t(
-                                                            "settings.appearance.themes.system"
-                                                        )}
-                                                    </span>
-                                                </FormLabel>
-                                            </FormItem>
-                                        </RadioGroup>
-                                    </FormItem>
-                                );
-                            }}
-                        />
+	return (
+		<Card className="bg-transparent">
+			<CardHeader>
+				<CardTitle className="text-xl">
+					{t("settings.appearance.title")}
+				</CardTitle>
+				<CardDescription>
+					{t("settings.appearance.description")}
+				</CardDescription>
+			</CardHeader>
+			<CardContent className="space-y-2">
+				<Form {...form}>
+					<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
+						<FormField
+							control={form.control}
+							name="theme"
+							defaultValue={form.control._defaultValues.theme}
+							render={({ field }) => {
+								return (
+									<FormItem className="space-y-1 ">
+										<FormLabel>{t("settings.appearance.theme")}</FormLabel>
+										<FormDescription>
+											{t("settings.appearance.themeDescription")}
+										</FormDescription>
+										<FormMessage />
+										<RadioGroup
+											onValueChange={field.onChange}
+											defaultValue={field.value}
+											value={field.value}
+											className="grid max-w-md md:max-w-lg grid-cols-1 sm:grid-cols-3 gap-8 pt-2"
+										>
+											<FormItem>
+												<FormLabel className="[&:has([data-state=checked])>div]:border-primary">
+													<FormControl>
+														<RadioGroupItem value="light" className="sr-only" />
+													</FormControl>
+													<div className="items-center rounded-md border-2 border-muted p-1 hover:bg-accent transition-colors cursor-pointer">
+														<img src="/images/theme-light.svg" alt="light" />
+													</div>
+													<span className="block w-full p-2 text-center font-normal">
+														{t("settings.appearance.themes.light")}
+													</span>
+												</FormLabel>
+											</FormItem>
+											<FormItem>
+												<FormLabel className="[&:has([data-state=checked])>div]:border-primary">
+													<FormControl>
+														<RadioGroupItem value="dark" className="sr-only" />
+													</FormControl>
+													<div className="items-center rounded-md border-2 border-muted bg-popover p-1 transition-colors hover:bg-accent hover:text-accent-foreground cursor-pointer">
+														<img src="/images/theme-dark.svg" alt="dark" />
+													</div>
+													<span className="block w-full p-2 text-center font-normal">
+														{t("settings.appearance.themes.dark")}
+													</span>
+												</FormLabel>
+											</FormItem>
+											<FormItem>
+												<FormLabel className="[&:has([data-state=checked])>div]:border-primary">
+													<FormControl>
+														<RadioGroupItem
+															value="system"
+															className="sr-only"
+														/>
+													</FormControl>
+													<div className="items-center rounded-md border-2 border-muted bg-popover p-1 transition-colors hover:bg-accent hover:text-accent-foreground cursor-pointer">
+														<img src="/images/theme-system.svg" alt="system" />
+													</div>
+													<span className="block w-full p-2 text-center font-normal">
+														{t("settings.appearance.themes.system")}
+													</span>
+												</FormLabel>
+											</FormItem>
+										</RadioGroup>
+									</FormItem>
+								);
+							}}
+						/>
 
-                        <FormField
-                            control={form.control}
-                            name="language"
-                            defaultValue={form.control._defaultValues.language}
-                            render={({ field }) => {
-                                return (
-                                    <FormItem className="space-y-1">
-                                        <FormLabel>
-                                            {t("settings.appearance.language")}
-                                        </FormLabel>
-                                        <FormDescription>
-                                            {t(
-                                                "settings.appearance.languageDescription"
-                                            )}
-                                        </FormDescription>
-                                        <FormMessage />
-                                        <Select
-                                            onValueChange={field.onChange}
-                                            defaultValue={field.value}
-                                            value={field.value}
-                                        >
-                                            <SelectTrigger>
-                                                <SelectValue placeholder="No preset selected" />
-                                            </SelectTrigger>
-                                            <SelectContent>
-                                                {[
-                                                    {
-                                                        label: "English",
-                                                        value: "en",
-                                                    },
-                                                    {
-                                                        label: "Polski",
-                                                        value: "pl",
-                                                    },
-                                                    {
-                                                        label: "Русский",
-                                                        value: "ru",
-                                                    },
-                                                    {
-                                                        label: "Deutsch",
-                                                        value: "de",
-                                                    },
-                                                    {
-                                                        label: "繁體中文",
-                                                        value: "zh-Hant",
-                                                    },
-                                                    {
-                                                        label: "简体中文",
-                                                        value: "zh-Hans",
-                                                    },
-                                                    {
-                                                        label: "Persian",
-                                                        value: "fa",
-                                                    },
-                                                ].map((preset) => (
-                                                    <SelectItem
-                                                        key={preset.label}
-                                                        value={preset.value}
-                                                    >
-                                                        {preset.label}
-                                                    </SelectItem>
-                                                ))}
-                                            </SelectContent>
-                                        </Select>
-                                    </FormItem>
-                                );
-                            }}
-                        />
+						<FormField
+							control={form.control}
+							name="language"
+							defaultValue={form.control._defaultValues.language}
+							render={({ field }) => {
+								return (
+									<FormItem className="space-y-1">
+										<FormLabel>{t("settings.appearance.language")}</FormLabel>
+										<FormDescription>
+											{t("settings.appearance.languageDescription")}
+										</FormDescription>
+										<FormMessage />
+										<Select
+											onValueChange={field.onChange}
+											defaultValue={field.value}
+											value={field.value}
+										>
+											<SelectTrigger>
+												<SelectValue placeholder="No preset selected" />
+											</SelectTrigger>
+											<SelectContent>
+												{[
+													{ label: "English", value: "en" },
+													{ label: "Polski", value: "pl" },
+													{ label: "Русский", value: "ru" },
+													{ label: "Français", value: "fr" },
+													{ label: "Deutsch", value: "de" },
+													{ label: "繁體中文", value: "zh-Hant" },
+													{ label: "简体中文", value: "zh-Hans" },
+													{ label: "Türkçe", value: "tr" },
+													{
+														label: "Persian",
+														value: "fa",
+													},
+												].map((preset) => (
+													<SelectItem key={preset.label} value={preset.value}>
+														{preset.label}
+													</SelectItem>
+												))}
+											</SelectContent>
+										</Select>
+									</FormItem>
+								);
+							}}
+						/>
 
-                        <Button type="submit">
-                            {t("settings.common.save")}
-                        </Button>
-                    </form>
-                </Form>
-            </CardContent>
-        </Card>
-    );
+						<Button type="submit">{t("settings.common.save")}</Button>
+					</form>
+				</Form>
+			</CardContent>
+		</Card>
+	);
 }

apps/dokploy/components/dashboard/settings/destination/add-destination.tsx

@@ -34,9 +34,11 @@ import { useEffect } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";
+import { S3_PROVIDERS } from "./constants";
 
 const addDestination = z.object({
 	name: z.string().min(1, "Name is required"),
+	provider: z.string().optional(),
 	accessKeyId: z.string(),
 	secretAccessKey: z.string(),
 	bucket: z.string(),
@@ -58,6 +60,7 @@ export const AddDestination = () => {
 		api.destination.testConnection.useMutation();
 	const form = useForm<AddDestination>({
 		defaultValues: {
+			provider: "",
 			accessKeyId: "",
 			bucket: "",
 			name: "",
@@ -73,6 +76,7 @@ export const AddDestination = () => {
 
 	const onSubmit = async (data: AddDestination) => {
 		await mutateAsync({
+			provider: data.provider,
 			accessKey: data.accessKeyId,
 			bucket: data.bucket,
 			endpoint: data.endpoint,
@@ -123,6 +127,40 @@ export const AddDestination = () => {
 								);
 							}}
 						/>
+						<FormField
+							control={form.control}
+							name="provider"
+							render={({ field }) => {
+								return (
+									<FormItem>
+										<FormLabel>Provider</FormLabel>
+										<FormControl>
+											<Select
+												onValueChange={field.onChange}
+												defaultValue={field.value}
+											>
+												<FormControl>
+													<SelectTrigger>
+														<SelectValue placeholder="Select a S3 Provider" />
+													</SelectTrigger>
+												</FormControl>
+												<SelectContent>
+													{S3_PROVIDERS.map((s3Provider) => (
+														<SelectItem
+															key={s3Provider.key}
+															value={s3Provider.key}
+														>
+															{s3Provider.name}
+														</SelectItem>
+													))}
+												</SelectContent>
+											</Select>
+										</FormControl>
+										<FormMessage />
+									</FormItem>
+								);
+							}}
+						/>
 
 						<FormField
 							control={form.control}
@@ -255,6 +293,7 @@ export const AddDestination = () => {
 									isLoading={isLoading}
 									onClick={async () => {
 										await testConnection({
+											provider: form.getValues("provider"),
 											accessKey: form.getValues("accessKeyId"),
 											bucket: form.getValues("bucket"),
 											endpoint: form.getValues("endpoint"),
@@ -283,6 +322,7 @@ export const AddDestination = () => {
 								variant="secondary"
 								onClick={async () => {
 									await testConnection({
+										provider: form.getValues("provider"),
 										accessKey: form.getValues("accessKeyId"),
 										bucket: form.getValues("bucket"),
 										endpoint: form.getValues("endpoint"),

apps/dokploy/components/dashboard/settings/destination/constants.ts

@@ -0,0 +1,133 @@
+export const S3_PROVIDERS: Array<{
+	key: string;
+	name: string;
+}> = [
+	{
+		key: "AWS",
+		name: "Amazon Web Services (AWS) S3",
+	},
+	{
+		key: "Alibaba",
+		name: "Alibaba Cloud Object Storage System (OSS) formerly Aliyun",
+	},
+	{
+		key: "ArvanCloud",
+		name: "Arvan Cloud Object Storage (AOS)",
+	},
+	{
+		key: "Ceph",
+		name: "Ceph Object Storage",
+	},
+	{
+		key: "ChinaMobile",
+		name: "China Mobile Ecloud Elastic Object Storage (EOS)",
+	},
+	{
+		key: "Cloudflare",
+		name: "Cloudflare R2 Storage",
+	},
+	{
+		key: "DigitalOcean",
+		name: "DigitalOcean Spaces",
+	},
+	{
+		key: "Dreamhost",
+		name: "Dreamhost DreamObjects",
+	},
+	{
+		key: "GCS",
+		name: "Google Cloud Storage",
+	},
+	{
+		key: "HuaweiOBS",
+		name: "Huawei Object Storage Service",
+	},
+	{
+		key: "IBMCOS",
+		name: "IBM COS S3",
+	},
+	{
+		key: "IDrive",
+		name: "IDrive e2",
+	},
+	{
+		key: "IONOS",
+		name: "IONOS Cloud",
+	},
+	{
+		key: "LyveCloud",
+		name: "Seagate Lyve Cloud",
+	},
+	{
+		key: "Leviia",
+		name: "Leviia Object Storage",
+	},
+	{
+		key: "Liara",
+		name: "Liara Object Storage",
+	},
+	{
+		key: "Linode",
+		name: "Linode Object Storage",
+	},
+	{
+		key: "Magalu",
+		name: "Magalu Object Storage",
+	},
+	{
+		key: "Minio",
+		name: "Minio Object Storage",
+	},
+	{
+		key: "Netease",
+		name: "Netease Object Storage (NOS)",
+	},
+	{
+		key: "Petabox",
+		name: "Petabox Object Storage",
+	},
+	{
+		key: "RackCorp",
+		name: "RackCorp Object Storage",
+	},
+	{
+		key: "Rclone",
+		name: "Rclone S3 Server",
+	},
+	{
+		key: "Scaleway",
+		name: "Scaleway Object Storage",
+	},
+	{
+		key: "SeaweedFS",
+		name: "SeaweedFS S3",
+	},
+	{
+		key: "StackPath",
+		name: "StackPath Object Storage",
+	},
+	{
+		key: "Storj",
+		name: "Storj (S3 Compatible Gateway)",
+	},
+	{
+		key: "Synology",
+		name: "Synology C2 Object Storage",
+	},
+	{
+		key: "TencentCOS",
+		name: "Tencent Cloud Object Storage (COS)",
+	},
+	{
+		key: "Wasabi",
+		name: "Wasabi Object Storage",
+	},
+	{
+		key: "Qiniu",
+		name: "Qiniu Object Storage (Kodo)",
+	},
+	{
+		key: "Other",
+		name: "Any other S3 compatible provider",
+	},
+];

apps/dokploy/components/dashboard/settings/destination/update-destination.tsx

@@ -35,9 +35,11 @@ import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";
+import { S3_PROVIDERS } from "./constants";
 
 const updateDestination = z.object({
 	name: z.string().min(1, "Name is required"),
+	provider: z.string().optional(),
 	accessKeyId: z.string(),
 	secretAccessKey: z.string(),
 	bucket: z.string(),
@@ -70,6 +72,7 @@ export const UpdateDestination = ({ destinationId }: Props) => {
 		api.destination.testConnection.useMutation();
 	const form = useForm<UpdateDestination>({
 		defaultValues: {
+			provider: "",
 			accessKeyId: "",
 			bucket: "",
 			name: "",
@@ -152,6 +155,40 @@ export const UpdateDestination = ({ destinationId }: Props) => {
 										);
 									}}
 								/>
+								<FormField
+									control={form.control}
+									name="provider"
+									render={({ field }) => {
+										return (
+											<FormItem>
+												<FormLabel>Provider</FormLabel>
+												<FormControl>
+													<Select
+														onValueChange={field.onChange}
+														defaultValue={field.value}
+													>
+														<FormControl>
+															<SelectTrigger>
+																<SelectValue placeholder="Select a S3 Provider" />
+															</SelectTrigger>
+														</FormControl>
+														<SelectContent>
+															{S3_PROVIDERS.map((s3Provider) => (
+																<SelectItem
+																	key={s3Provider.key}
+																	value={s3Provider.key}
+																>
+																	{s3Provider.name}
+																</SelectItem>
+															))}
+														</SelectContent>
+													</Select>
+												</FormControl>
+												<FormMessage />
+											</FormItem>
+										);
+									}}
+								/>
 
 								<FormField
 									control={form.control}
@@ -285,6 +322,7 @@ export const UpdateDestination = ({ destinationId }: Props) => {
 									variant={"secondary"}
 									onClick={async () => {
 										await testConnection({
+											provider: form.getValues("provider"),
 											accessKey: form.getValues("accessKeyId"),
 											bucket: form.getValues("bucket"),
 											endpoint: form.getValues("endpoint"),
@@ -311,6 +349,7 @@ export const UpdateDestination = ({ destinationId }: Props) => {
 								variant="secondary"
 								onClick={async () => {
 									await testConnection({
+										provider: form.getValues("provider"),
 										accessKey: form.getValues("accessKeyId"),
 										bucket: form.getValues("bucket"),
 										endpoint: form.getValues("endpoint"),

apps/dokploy/components/dashboard/settings/web-server/update-server.tsx

@@ -48,7 +48,7 @@ export const UpdateServer = () => {
 						<li>Some bug that is blocking to use some features</li>
 					</ul>
 					<AlertBlock type="info">
-						We recommend checking the latest version for any breaking changes 
+						We recommend checking the latest version for any breaking changes
 						before updating. Go to{" "}
 						<Link
 							href="https://github.com/Dokploy/dokploy/releases"