Dokploy/dokploy
1
0
Fork 0
mirror of https://github.com/Dokploy/dokploy synced 2025-06-26 18:27:59 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Merge branch 'canary' into fa-locale

Browse Source
This commit is contained in:
Mauricio Siu
2024-11-28 20:45:24 -06:00
parent c8e9d9d169 333776a5a1
commit 4132f714ae
34 changed files with 5399 additions and 595 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
.husky/pre-commit
View File

@@ -1,2 +1,2 @@
pnpm run check # pnpm run check
git add . # git add .

160
apps/dokploy/components/dashboard/application/delete-application.tsx
View File

@@ -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 { 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 { api } from "@/utils/api";
import { zodResolver } from "@hookform/resolvers/zod";
import { TrashIcon } from "lucide-react"; import { TrashIcon } from "lucide-react";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import { useState } from "react";
import { useForm } from "react-hook-form";
import { toast } from "sonner"; 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 { interface Props {
applicationId: string; applicationId: string;
} }
export const DeleteApplication = ({ applicationId }: Props) => { export const DeleteApplication = ({ applicationId }: Props) => {
const [isOpen, setIsOpen] = useState(false);
const { mutateAsync, isLoading } = api.application.delete.useMutation(); const { mutateAsync, isLoading } = api.application.delete.useMutation();
const { data } = api.application.one.useQuery(
{ applicationId },
{ enabled: !!applicationId },
);
const { push } = useRouter(); 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 ( return (
<AlertDialog> <Dialog open={isOpen} onOpenChange={setIsOpen}>
<AlertDialogTrigger asChild> <DialogTrigger asChild>
<Button variant="ghost" isLoading={isLoading}> <Button variant="ghost" isLoading={isLoading}>
<TrashIcon className="size-4 text-muted-foreground" /> <TrashIcon className="size-4 text-muted-foreground" />
</Button> </Button>
</AlertDialogTrigger> </DialogTrigger>
<AlertDialogContent> <DialogContent className="max-h-screen overflow-y-auto sm:max-w-lg">
<AlertDialogHeader> <DialogHeader>
<AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle> <DialogTitle>Are you absolutely sure?</DialogTitle>
<AlertDialogDescription> <DialogDescription>
This action cannot be undone. This will permanently delete the This action cannot be undone. This will permanently delete the
application application. If you are sure please enter the application name to
</AlertDialogDescription> delete this application.
</AlertDialogHeader> </DialogDescription>
<AlertDialogFooter> </DialogHeader>
<AlertDialogCancel>Cancel</AlertDialogCancel> <div className="grid gap-4">
<AlertDialogAction <Form {...form}>
onClick={async () => { <form
await mutateAsync({ onSubmit={form.handleSubmit(onSubmit)}
applicationId, id="hook-form-delete-application"
}) className="grid w-full gap-4"
.then((data) => { >
push(`/dashboard/project/${data?.projectId}`); <FormField
control={form.control}
toast.success("Application delete succesfully"); name="projectName"
}) render={({ field }) => (
.catch(() => { <FormItem>
toast.error("Error to delete Application"); <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 Confirm
</AlertDialogAction> </Button>
</AlertDialogFooter> </DialogFooter>
</AlertDialogContent> </DialogContent>
</AlertDialog> </Dialog>
); );
}; };

158
apps/dokploy/components/dashboard/compose/delete-compose.tsx
View File

@@ -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 { 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 { api } from "@/utils/api";
import { zodResolver } from "@hookform/resolvers/zod";
import { TrashIcon } from "lucide-react"; import { TrashIcon } from "lucide-react";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import { useState } from "react";
import { useForm } from "react-hook-form";
import { toast } from "sonner"; 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 { interface Props {
composeId: string; composeId: string;
} }
export const DeleteCompose = ({ composeId }: Props) => { export const DeleteCompose = ({ composeId }: Props) => {
const [isOpen, setIsOpen] = useState(false);
const { mutateAsync, isLoading } = api.compose.delete.useMutation(); const { mutateAsync, isLoading } = api.compose.delete.useMutation();
const { data } = api.compose.one.useQuery(
{ composeId },
{ enabled: !!composeId },
);
const { push } = useRouter(); 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 ( return (
<AlertDialog> <Dialog open={isOpen} onOpenChange={setIsOpen}>
<AlertDialogTrigger asChild> <DialogTrigger asChild>
<Button variant="ghost" isLoading={isLoading}> <Button variant="ghost" isLoading={isLoading}>
<TrashIcon className="size-4 text-muted-foreground" /> <TrashIcon className="size-4 text-muted-foreground" />
</Button> </Button>
</AlertDialogTrigger> </DialogTrigger>
<AlertDialogContent> <DialogContent className="max-h-screen overflow-y-auto sm:max-w-lg">
<AlertDialogHeader> <DialogHeader>
<AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle> <DialogTitle>Are you absolutely sure?</DialogTitle>
<AlertDialogDescription> <DialogDescription>
This action cannot be undone. This will permanently delete the This action cannot be undone. This will permanently delete the
compose and all its services. compose. If you are sure please enter the compose name to delete
</AlertDialogDescription> this compose.
</AlertDialogHeader> </DialogDescription>
<AlertDialogFooter> </DialogHeader>
<AlertDialogCancel>Cancel</AlertDialogCancel> <div className="grid gap-4">
<AlertDialogAction <Form {...form}>
onClick={async () => { <form
await mutateAsync({ onSubmit={form.handleSubmit(onSubmit)}
composeId, id="hook-form-delete-compose"
}) className="grid w-full gap-4"
.then((data) => { >
push(`/dashboard/project/${data?.projectId}`); <FormField
control={form.control}
toast.success("Compose delete succesfully"); name="projectName"
}) render={({ field }) => (
.catch(() => { <FormItem>
toast.error("Error to delete the compose"); <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 Confirm
</AlertDialogAction> </Button>
</AlertDialogFooter> </DialogFooter>
</AlertDialogContent> </DialogContent>
</AlertDialog> </Dialog>
); );
}; };

160
apps/dokploy/components/dashboard/mariadb/delete-mariadb.tsx
View File

@@ -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 { 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 { api } from "@/utils/api";
import { zodResolver } from "@hookform/resolvers/zod";
import { TrashIcon } from "lucide-react"; import { TrashIcon } from "lucide-react";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import { useState } from "react";
import { useForm } from "react-hook-form";
import { toast } from "sonner"; 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 { interface Props {
mariadbId: string; mariadbId: string;
} }
export const DeleteMariadb = ({ mariadbId }: Props) => { export const DeleteMariadb = ({ mariadbId }: Props) => {
const [isOpen, setIsOpen] = useState(false);
const { mutateAsync, isLoading } = api.mariadb.remove.useMutation(); const { mutateAsync, isLoading } = api.mariadb.remove.useMutation();
const { data } = api.mariadb.one.useQuery(
{ mariadbId },
{ enabled: !!mariadbId },
);
const { push } = useRouter(); 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 ( return (
<AlertDialog> <Dialog open={isOpen} onOpenChange={setIsOpen}>
<AlertDialogTrigger asChild> <DialogTrigger asChild>
<Button variant="ghost" isLoading={isLoading}> <Button variant="ghost" isLoading={isLoading}>
<TrashIcon className="size-4 text-muted-foreground " /> <TrashIcon className="size-4 text-muted-foreground" />
</Button> </Button>
</AlertDialogTrigger> </DialogTrigger>
<AlertDialogContent> <DialogContent className="max-h-screen overflow-y-auto sm:max-w-lg">
<AlertDialogHeader> <DialogHeader>
<AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle> <DialogTitle>Are you absolutely sure?</DialogTitle>
<AlertDialogDescription> <DialogDescription>
This action cannot be undone. This will permanently delete the This action cannot be undone. This will permanently delete the
database database. If you are sure please enter the database name to delete
</AlertDialogDescription> this database.
</AlertDialogHeader> </DialogDescription>
<AlertDialogFooter> </DialogHeader>
<AlertDialogCancel>Cancel</AlertDialogCancel> <div className="grid gap-4">
<AlertDialogAction <Form {...form}>
onClick={async () => { <form
await mutateAsync({ onSubmit={form.handleSubmit(onSubmit)}
mariadbId, id="hook-form-delete-mariadb"
}) className="grid w-full gap-4"
.then((data) => { >
push(`/dashboard/project/${data?.projectId}`); <FormField
toast.success("Database delete succesfully"); control={form.control}
}) name="projectName"
.catch(() => { render={({ field }) => (
toast.error("Error to delete the database"); <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 Confirm
</AlertDialogAction> </Button>
</AlertDialogFooter> </DialogFooter>
</AlertDialogContent> </DialogContent>
</AlertDialog> </Dialog>
); );
}; };

157
apps/dokploy/components/dashboard/mongo/delete-mongo.tsx
View File

@@ -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 { 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 { api } from "@/utils/api";
import { zodResolver } from "@hookform/resolvers/zod";
import { TrashIcon } from "lucide-react"; import { TrashIcon } from "lucide-react";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import { useState } from "react";
import { useForm } from "react-hook-form";
import { toast } from "sonner"; 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 { interface Props {
mongoId: string; mongoId: string;
} }
// commen
export const DeleteMongo = ({ mongoId }: Props) => { export const DeleteMongo = ({ mongoId }: Props) => {
const [isOpen, setIsOpen] = useState(false);
const { mutateAsync, isLoading } = api.mongo.remove.useMutation(); const { mutateAsync, isLoading } = api.mongo.remove.useMutation();
const { data } = api.mongo.one.useQuery({ mongoId }, { enabled: !!mongoId });
const { push } = useRouter(); 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 ( return (
<AlertDialog> <Dialog open={isOpen} onOpenChange={setIsOpen}>
<AlertDialogTrigger asChild> <DialogTrigger asChild>
<Button variant="ghost" isLoading={isLoading}> <Button variant="ghost" isLoading={isLoading}>
<TrashIcon className="size-4 text-muted-foreground " /> <TrashIcon className="size-4 text-muted-foreground" />
</Button> </Button>
</AlertDialogTrigger> </DialogTrigger>
<AlertDialogContent> <DialogContent className="max-h-screen overflow-y-auto sm:max-w-lg">
<AlertDialogHeader> <DialogHeader>
<AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle> <DialogTitle>Are you absolutely sure?</DialogTitle>
<AlertDialogDescription> <DialogDescription>
This action cannot be undone. This will permanently delete the This action cannot be undone. This will permanently delete the
database database. If you are sure please enter the database name to delete
</AlertDialogDescription> this database.
</AlertDialogHeader> </DialogDescription>
<AlertDialogFooter> </DialogHeader>
<AlertDialogCancel>Cancel</AlertDialogCancel> <div className="grid gap-4">
<AlertDialogAction <Form {...form}>
onClick={async () => { <form
await mutateAsync({ onSubmit={form.handleSubmit(onSubmit)}
mongoId, id="hook-form-delete-mongo"
}) className="grid w-full gap-4"
.then((data) => { >
push(`/dashboard/project/${data?.projectId}`); <FormField
toast.success("Database delete succesfully"); control={form.control}
}) name="projectName"
.catch(() => { render={({ field }) => (
toast.error("Error to delete the database"); <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 Confirm
</AlertDialogAction> </Button>
</AlertDialogFooter> </DialogFooter>
</AlertDialogContent> </DialogContent>
</AlertDialog> </Dialog>
); );
}; };

156
apps/dokploy/components/dashboard/mysql/delete-mysql.tsx
View File

@@ -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 { 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 { api } from "@/utils/api";
import { zodResolver } from "@hookform/resolvers/zod";
import { TrashIcon } from "lucide-react"; import { TrashIcon } from "lucide-react";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import { useState } from "react";
import { useForm } from "react-hook-form";
import { toast } from "sonner"; 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 { interface Props {
mysqlId: string; mysqlId: string;
} }
export const DeleteMysql = ({ mysqlId }: Props) => { export const DeleteMysql = ({ mysqlId }: Props) => {
const [isOpen, setIsOpen] = useState(false);
const { mutateAsync, isLoading } = api.mysql.remove.useMutation(); const { mutateAsync, isLoading } = api.mysql.remove.useMutation();
const { data } = api.mysql.one.useQuery({ mysqlId }, { enabled: !!mysqlId });
const { push } = useRouter(); 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 ( return (
<AlertDialog> <Dialog open={isOpen} onOpenChange={setIsOpen}>
<AlertDialogTrigger asChild> <DialogTrigger asChild>
<Button variant="ghost" isLoading={isLoading}> <Button variant="ghost" isLoading={isLoading}>
<TrashIcon className="size-4 text-muted-foreground " /> <TrashIcon className="size-4 text-muted-foreground" />
</Button> </Button>
</AlertDialogTrigger> </DialogTrigger>
<AlertDialogContent> <DialogContent className="max-h-screen overflow-y-auto sm:max-w-lg">
<AlertDialogHeader> <DialogHeader>
<AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle> <DialogTitle>Are you absolutely sure?</DialogTitle>
<AlertDialogDescription> <DialogDescription>
This action cannot be undone. This will permanently delete the This action cannot be undone. This will permanently delete the
database database. If you are sure please enter the database name to delete
</AlertDialogDescription> this database.
</AlertDialogHeader> </DialogDescription>
<AlertDialogFooter> </DialogHeader>
<AlertDialogCancel>Cancel</AlertDialogCancel> <div className="grid gap-4">
<AlertDialogAction <Form {...form}>
onClick={async () => { <form
await mutateAsync({ onSubmit={form.handleSubmit(onSubmit)}
mysqlId, id="hook-form-delete-mysql"
}) className="grid w-full gap-4"
.then((data) => { >
push(`/dashboard/project/${data?.projectId}`); <FormField
toast.success("Database delete succesfully"); control={form.control}
}) name="projectName"
.catch(() => { render={({ field }) => (
toast.error("Error to delete the database"); <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 Confirm
</AlertDialogAction> </Button>
</AlertDialogFooter> </DialogFooter>
</AlertDialogContent> </DialogContent>
</AlertDialog> </Dialog>
); );
}; };

159
apps/dokploy/components/dashboard/postgres/delete-postgres.tsx
View File

@@ -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 { 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 { api } from "@/utils/api";
import { zodResolver } from "@hookform/resolvers/zod";
import { TrashIcon } from "lucide-react"; import { TrashIcon } from "lucide-react";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import { useState } from "react";
import { useForm } from "react-hook-form";
import { toast } from "sonner"; 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 { interface Props {
postgresId: string; postgresId: string;
} }
export const DeletePostgres = ({ postgresId }: Props) => { export const DeletePostgres = ({ postgresId }: Props) => {
const [isOpen, setIsOpen] = useState(false);
const { mutateAsync, isLoading } = api.postgres.remove.useMutation(); const { mutateAsync, isLoading } = api.postgres.remove.useMutation();
const { data } = api.postgres.one.useQuery(
{ postgresId },
{ enabled: !!postgresId },
);
const { push } = useRouter(); 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 ( return (
<AlertDialog> <Dialog open={isOpen} onOpenChange={setIsOpen}>
<AlertDialogTrigger asChild> <DialogTrigger asChild>
<Button variant="ghost" isLoading={isLoading}> <Button variant="ghost" isLoading={isLoading}>
<TrashIcon className="size-4 text-muted-foreground " /> <TrashIcon className="size-4 text-muted-foreground" />
</Button> </Button>
</AlertDialogTrigger> </DialogTrigger>
<AlertDialogContent> <DialogContent className="max-h-screen overflow-y-auto sm:max-w-lg">
<AlertDialogHeader> <DialogHeader>
<AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle> <DialogTitle>Are you absolutely sure?</DialogTitle>
<AlertDialogDescription> <DialogDescription>
This action cannot be undone. This will permanently delete the This action cannot be undone. This will permanently delete the
database database. If you are sure please enter the database name to delete
</AlertDialogDescription> this database.
</AlertDialogHeader> </DialogDescription>
<AlertDialogFooter> </DialogHeader>
<AlertDialogCancel>Cancel</AlertDialogCancel> <div className="grid gap-4">
<AlertDialogAction <Form {...form}>
onClick={async () => { <form
await mutateAsync({ onSubmit={form.handleSubmit(onSubmit)}
postgresId, id="hook-form-delete-postgres"
}) className="grid w-full gap-4"
.then((data) => { >
push(`/dashboard/project/${data?.projectId}`); <FormField
toast.success("Database delete succesfully"); control={form.control}
}) name="projectName"
.catch(() => { render={({ field }) => (
toast.error("Error to delete the database"); <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 Confirm
</AlertDialogAction> </Button>
</AlertDialogFooter> </DialogFooter>
</AlertDialogContent> </DialogContent>
</AlertDialog> </Dialog>
); );
}; };

156
apps/dokploy/components/dashboard/redis/delete-redis.tsx
View File

@@ -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 { 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 { api } from "@/utils/api";
import { zodResolver } from "@hookform/resolvers/zod";
import { TrashIcon } from "lucide-react"; import { TrashIcon } from "lucide-react";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import { useState } from "react";
import { useForm } from "react-hook-form";
import { toast } from "sonner"; 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 { interface Props {
redisId: string; redisId: string;
} }
export const DeleteRedis = ({ redisId }: Props) => { export const DeleteRedis = ({ redisId }: Props) => {
const [isOpen, setIsOpen] = useState(false);
const { mutateAsync, isLoading } = api.redis.remove.useMutation(); const { mutateAsync, isLoading } = api.redis.remove.useMutation();
const { data } = api.redis.one.useQuery({ redisId }, { enabled: !!redisId });
const { push } = useRouter(); 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 ( return (
<AlertDialog> <Dialog open={isOpen} onOpenChange={setIsOpen}>
<AlertDialogTrigger asChild> <DialogTrigger asChild>
<Button variant="ghost" isLoading={isLoading}> <Button variant="ghost" isLoading={isLoading}>
<TrashIcon className="size-4 text-muted-foreground " /> <TrashIcon className="size-4 text-muted-foreground" />
</Button> </Button>
</AlertDialogTrigger> </DialogTrigger>
<AlertDialogContent> <DialogContent className="max-h-screen overflow-y-auto sm:max-w-lg">
<AlertDialogHeader> <DialogHeader>
<AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle> <DialogTitle>Are you absolutely sure?</DialogTitle>
<AlertDialogDescription> <DialogDescription>
This action cannot be undone. This will permanently delete the This action cannot be undone. This will permanently delete the
database database. If you are sure please enter the database name to delete
</AlertDialogDescription> this database.
</AlertDialogHeader> </DialogDescription>
<AlertDialogFooter> </DialogHeader>
<AlertDialogCancel>Cancel</AlertDialogCancel> <div className="grid gap-4">
<AlertDialogAction <Form {...form}>
onClick={async () => { <form
await mutateAsync({ onSubmit={form.handleSubmit(onSubmit)}
redisId, id="hook-form-delete-redis"
}) className="grid w-full gap-4"
.then((data) => { >
push(`/dashboard/project/${data?.projectId}`); <FormField
toast.success("Database delete succesfully"); control={form.control}
}) name="projectName"
.catch(() => { render={({ field }) => (
toast.error("Error to delete the database"); <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 Confirm
</AlertDialogAction> </Button>
</AlertDialogFooter> </DialogFooter>
</AlertDialogContent> </DialogContent>
</AlertDialog> </Dialog>
); );
}; };

400
apps/dokploy/components/dashboard/settings/appearance-form.tsx
View File

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

40
apps/dokploy/components/dashboard/settings/destination/add-destination.tsx
View File

@@ -34,9 +34,11 @@ import { useEffect } from "react";
import { useForm } from "react-hook-form"; import { useForm } from "react-hook-form";
import { toast } from "sonner"; import { toast } from "sonner";
import { z } from "zod"; import { z } from "zod";
import { S3_PROVIDERS } from "./constants";
const addDestination = z.object({ const addDestination = z.object({
name: z.string().min(1, "Name is required"), name: z.string().min(1, "Name is required"),
provider: z.string().optional(),
accessKeyId: z.string(), accessKeyId: z.string(),
secretAccessKey: z.string(), secretAccessKey: z.string(),
bucket: z.string(), bucket: z.string(),
@@ -58,6 +60,7 @@ export const AddDestination = () => {
api.destination.testConnection.useMutation(); api.destination.testConnection.useMutation();
const form = useForm<AddDestination>({ const form = useForm<AddDestination>({
defaultValues: { defaultValues: {
provider: "",
accessKeyId: "", accessKeyId: "",
bucket: "", bucket: "",
name: "", name: "",
@@ -73,6 +76,7 @@ export const AddDestination = () => {
const onSubmit = async (data: AddDestination) => { const onSubmit = async (data: AddDestination) => {
await mutateAsync({ await mutateAsync({
provider: data.provider,
accessKey: data.accessKeyId, accessKey: data.accessKeyId,
bucket: data.bucket, bucket: data.bucket,
endpoint: data.endpoint, 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 <FormField
control={form.control} control={form.control}
@@ -255,6 +293,7 @@ export const AddDestination = () => {
isLoading={isLoading} isLoading={isLoading}
onClick={async () => { onClick={async () => {
await testConnection({ await testConnection({
provider: form.getValues("provider"),
accessKey: form.getValues("accessKeyId"), accessKey: form.getValues("accessKeyId"),
bucket: form.getValues("bucket"), bucket: form.getValues("bucket"),
endpoint: form.getValues("endpoint"), endpoint: form.getValues("endpoint"),
@@ -283,6 +322,7 @@ export const AddDestination = () => {
variant="secondary" variant="secondary"
onClick={async () => { onClick={async () => {
await testConnection({ await testConnection({
provider: form.getValues("provider"),
accessKey: form.getValues("accessKeyId"), accessKey: form.getValues("accessKeyId"),
bucket: form.getValues("bucket"), bucket: form.getValues("bucket"),
endpoint: form.getValues("endpoint"), endpoint: form.getValues("endpoint"),

133
apps/dokploy/components/dashboard/settings/destination/constants.ts Normal file
View File

@@ -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",
},
];

39
apps/dokploy/components/dashboard/settings/destination/update-destination.tsx
View File

@@ -35,9 +35,11 @@ import { useEffect, useState } from "react";
import { useForm } from "react-hook-form"; import { useForm } from "react-hook-form";
import { toast } from "sonner"; import { toast } from "sonner";
import { z } from "zod"; import { z } from "zod";
import { S3_PROVIDERS } from "./constants";
const updateDestination = z.object({ const updateDestination = z.object({
name: z.string().min(1, "Name is required"), name: z.string().min(1, "Name is required"),
provider: z.string().optional(),
accessKeyId: z.string(), accessKeyId: z.string(),
secretAccessKey: z.string(), secretAccessKey: z.string(),
bucket: z.string(), bucket: z.string(),
@@ -70,6 +72,7 @@ export const UpdateDestination = ({ destinationId }: Props) => {
api.destination.testConnection.useMutation(); api.destination.testConnection.useMutation();
const form = useForm<UpdateDestination>({ const form = useForm<UpdateDestination>({
defaultValues: { defaultValues: {
provider: "",
accessKeyId: "", accessKeyId: "",
bucket: "", bucket: "",
name: "", 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 <FormField
control={form.control} control={form.control}
@@ -285,6 +322,7 @@ export const UpdateDestination = ({ destinationId }: Props) => {
variant={"secondary"} variant={"secondary"}
onClick={async () => { onClick={async () => {
await testConnection({ await testConnection({
provider: form.getValues("provider"),
accessKey: form.getValues("accessKeyId"), accessKey: form.getValues("accessKeyId"),
bucket: form.getValues("bucket"), bucket: form.getValues("bucket"),
endpoint: form.getValues("endpoint"), endpoint: form.getValues("endpoint"),
@@ -311,6 +349,7 @@ export const UpdateDestination = ({ destinationId }: Props) => {
variant="secondary" variant="secondary"
onClick={async () => { onClick={async () => {
await testConnection({ await testConnection({
provider: form.getValues("provider"),
accessKey: form.getValues("accessKeyId"), accessKey: form.getValues("accessKeyId"),
bucket: form.getValues("bucket"), bucket: form.getValues("bucket"),
endpoint: form.getValues("endpoint"), endpoint: form.getValues("endpoint"),

2
apps/dokploy/components/shared/status-tooltip.tsx
View File

@@ -31,7 +31,7 @@ export const StatusTooltip = ({ status, className }: Props) => {
)} )}
{status === "done" && ( {status === "done" && (
<div <div
className={cn("size-3.5 rounded-full bg-primary", className)} className={cn("size-3.5 rounded-full bg-green-500", className)}
/> />
)} )}
{status === "running" && ( {status === "running" && (

2
apps/dokploy/components/ui/button.tsx
View File

@@ -12,7 +12,7 @@ const buttonVariants = cva(
variant: { variant: {
default: "bg-primary text-primary-foreground hover:bg-primary/90", default: "bg-primary text-primary-foreground hover:bg-primary/90",
destructive: destructive:
"bg-destructive text-destructive-foreground hover:bg-destructive/90", "bg-destructive text-destructive-foreground hover:bg-destructive/70",
outline: outline:
"border border-input bg-background hover:bg-accent hover:text-accent-foreground", "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
secondary: secondary:

1
apps/dokploy/drizzle/0045_smiling_blur.sql Normal file
View File

@@ -0,0 +1 @@
ALTER TABLE "destination" ADD COLUMN "provider" text;

3981
apps/dokploy/drizzle/meta/0045_snapshot.json Normal file
View File

File diff suppressed because it is too large Load Diff

7
apps/dokploy/drizzle/meta/_journal.json
View File

@@ -316,6 +316,13 @@
"when": 1731875539532, "when": 1731875539532,
"tag": "0044_sour_true_believers", "tag": "0044_sour_true_believers",
"breakpoints": true "breakpoints": true
},
{
"idx": 45,
"version": "6",
"when": 1732644181718,
"tag": "0045_smiling_blur",
"breakpoints": true
} }
] ]
} }

14
apps/dokploy/next-i18next.config.cjs
View File

@@ -1,10 +1,10 @@
/** @type {import('next-i18next').UserConfig} */ /** @type {import('next-i18next').UserConfig} */
module.exports = { module.exports = {
i18n: { i18n: {
defaultLocale: "en", defaultLocale: "en",
locales: ["en", "pl", "ru", "de", "zh-Hant", "zh-Hans", "fa"], locales: ["en", "pl", "ru", "fr", "de", "tr", "zh-Hant", "zh-Hans", "fa"],
localeDetection: false, localeDetection: false,
}, },
fallbackLng: "en", fallbackLng: "en",
keySeparator: false, keySeparator: false,
}; };

2
apps/dokploy/package.json
View File

@@ -1,6 +1,6 @@
{ {
"name": "dokploy", "name": "dokploy",
"version": "v0.12.0", "version": "v0.13.0",
"private": true, "private": true,
"license": "Apache-2.0", "license": "Apache-2.0",
"type": "module", "type": "module",

108
apps/dokploy/pages/_app.tsx
View File

@@ -14,70 +14,78 @@ import type { ReactElement, ReactNode } from "react";
const inter = Inter({ subsets: ["latin"] }); const inter = Inter({ subsets: ["latin"] });
export type NextPageWithLayout<P = {}, IP = P> = NextPage<P, IP> & { export type NextPageWithLayout<P = {}, IP = P> = NextPage<P, IP> & {
getLayout?: (page: ReactElement) => ReactNode; getLayout?: (page: ReactElement) => ReactNode;
// session: Session | null; // session: Session | null;
theme?: string; theme?: string;
}; };
type AppPropsWithLayout = AppProps & { type AppPropsWithLayout = AppProps & {
Component: NextPageWithLayout; Component: NextPageWithLayout;
}; };
const MyApp = ({ const MyApp = ({
Component, Component,
pageProps: { ...pageProps }, pageProps: { ...pageProps },
}: AppPropsWithLayout) => { }: AppPropsWithLayout) => {
const getLayout = Component.getLayout ?? ((page) => page); const getLayout = Component.getLayout ?? ((page) => page);
return ( return (
<> <>
<style jsx global>{` <style jsx global>{`
:root { :root {
--font-inter: ${inter.style.fontFamily}; --font-inter: ${inter.style.fontFamily};
} }
`}</style> `}</style>
<Head> <Head>
<title>Dokploy</title> <title>Dokploy</title>
</Head> </Head>
{process.env.NEXT_PUBLIC_UMAMI_HOST && {process.env.NEXT_PUBLIC_UMAMI_HOST &&
process.env.NEXT_PUBLIC_UMAMI_WEBSITE_ID && ( process.env.NEXT_PUBLIC_UMAMI_WEBSITE_ID && (
<Script <Script
src={process.env.NEXT_PUBLIC_UMAMI_HOST} src={process.env.NEXT_PUBLIC_UMAMI_HOST}
data-website-id={ data-website-id={process.env.NEXT_PUBLIC_UMAMI_WEBSITE_ID}
process.env.NEXT_PUBLIC_UMAMI_WEBSITE_ID />
} )}
/>
)}
<ThemeProvider <ThemeProvider
attribute="class" attribute="class"
defaultTheme="system" defaultTheme="system"
enableSystem enableSystem
disableTransitionOnChange disableTransitionOnChange
forcedTheme={Component.theme} forcedTheme={Component.theme}
> >
<Toaster richColors /> <Toaster richColors />
{getLayout(<Component {...pageProps} />)} {getLayout(<Component {...pageProps} />)}
</ThemeProvider> </ThemeProvider>
</> </>
); );
}; };
export default api.withTRPC( export default api.withTRPC(
appWithTranslation( appWithTranslation(
MyApp, MyApp,
// keep this in sync with next-i18next.config.js // keep this in sync with next-i18next.config.js
// if you want to know why don't just import the config file, this because next-i18next.config.js must be a CJS, but the rest of the code is ESM. // if you want to know why don't just import the config file, this because next-i18next.config.js must be a CJS, but the rest of the code is ESM.
// Add the config here is due to the issue: https://github.com/i18next/next-i18next/issues/2259 // Add the config here is due to the issue: https://github.com/i18next/next-i18next/issues/2259
// if one day every page is translated, we can safely remove this config. // if one day every page is translated, we can safely remove this config.
{ {
i18n: { i18n: {
defaultLocale: "en", defaultLocale: "en",
locales: ["en", "pl", "ru", "de", "zh-Hant", "zh-Hans", "fa"], locales: [
localeDetection: false, "en",
}, "pl",
fallbackLng: "en", "ru",
keySeparator: false, "fr",
} "de",
) "tr",
"zh-Hant",
"zh-Hans",
"fa",
],
localeDetection: false,
},
fallbackLng: "en",
keySeparator: false,
},
),
); );

1
apps/dokploy/public/locales/fa/settings.json
View File

@@ -1,4 +1,3 @@
{ {
"settings.common.save": "ذخیره", "settings.common.save": "ذخیره",
"settings.server.domain.title": "دامنه سرور", "settings.server.domain.title": "دامنه سرور",

1
apps/dokploy/public/locales/fr/common.json Normal file
View File

@@ -0,0 +1 @@
{}

44
apps/dokploy/public/locales/fr/settings.json Normal file
View File

@@ -0,0 +1,44 @@
{
"settings.common.save": "Sauvegarder",
"settings.server.domain.title": "Nom de domaine du serveur",
"settings.server.domain.description": "Ajouter un nom de domaine au serveur de votre application.",
"settings.server.domain.form.domain": "Domaine",
"settings.server.domain.form.letsEncryptEmail": "Adresse email Let's Encrypt",
"settings.server.domain.form.certificate.label": "Certificat",
"settings.server.domain.form.certificate.placeholder": "Choisir un certificat",
"settings.server.domain.form.certificateOptions.none": "Aucun",
"settings.server.domain.form.certificateOptions.letsencrypt": "Let's Encrypt (Par défaut)",
"settings.server.webServer.title": "Serveur web",
"settings.server.webServer.description": "Recharger ou nettoyer le serveur web.",
"settings.server.webServer.actions": "Actions",
"settings.server.webServer.reload": "Recharger",
"settings.server.webServer.watchLogs": "Consulter les logs",
"settings.server.webServer.updateServerIp": "Mettre à jour l'IP du serveur",
"settings.server.webServer.server.label": "Serveur",
"settings.server.webServer.traefik.label": "Traefik",
"settings.server.webServer.traefik.modifyEnv": "Modifier les variables d'environnement",
"settings.server.webServer.storage.label": "Stockage",
"settings.server.webServer.storage.cleanUnusedImages": "Supprimer les images inutilisées",
"settings.server.webServer.storage.cleanUnusedVolumes": "Supprimer les volumes inutilisés",
"settings.server.webServer.storage.cleanStoppedContainers": "Supprimer les conteneurs arrêtés",
"settings.server.webServer.storage.cleanDockerBuilder": "Nettoyer le Docker Builder & System",
"settings.server.webServer.storage.cleanMonitoring": "Nettoyer le monitoring",
"settings.server.webServer.storage.cleanAll": "Tout nettoyer",
"settings.profile.title": "Compte",
"settings.profile.description": "Modifier les informations de votre compte ici.",
"settings.profile.email": "Adresse Email",
"settings.profile.password": "Mot de passe",
"settings.profile.avatar": "Photo de profil",
"settings.appearance.title": "Apparence",
"settings.appearance.description": "Customiser le thème de votre dashboard.",
"settings.appearance.theme": "Thème",
"settings.appearance.themeDescription": "Choisir un thème pour votre dashboard",
"settings.appearance.themes.light": "Clair",
"settings.appearance.themes.dark": "Sombre",
"settings.appearance.themes.system": "Système",
"settings.appearance.language": "Langue",
"settings.appearance.languageDescription": "Sélectionner une langue pour votre dashboard"
}

1
apps/dokploy/public/locales/tr/common.json Normal file
View File

@@ -0,0 +1 @@
{}

44
apps/dokploy/public/locales/tr/settings.json Normal file
View File

@@ -0,0 +1,44 @@
{
"settings.common.save": "Kaydet",
"settings.server.domain.title": "Sunucu Alanı",
"settings.server.domain.description": "Sunucu uygulamanıza bir alan adı ekleyin.",
"settings.server.domain.form.domain": "Alan Adı",
"settings.server.domain.form.letsEncryptEmail": "Let's Encrypt E-postası",
"settings.server.domain.form.certificate.label": "Sertifika",
"settings.server.domain.form.certificate.placeholder": "Bir sertifika seçin",
"settings.server.domain.form.certificateOptions.none": "Hiçbiri",
"settings.server.domain.form.certificateOptions.letsencrypt": "Let's Encrypt (Varsayılan)",
"settings.server.webServer.title": "Web Sunucusu",
"settings.server.webServer.description": "Web sunucusunu yeniden yükleyin veya temizleyin.",
"settings.server.webServer.actions": "İşlemler",
"settings.server.webServer.reload": "Yeniden Yükle",
"settings.server.webServer.watchLogs": "Günlükleri İzle",
"settings.server.webServer.updateServerIp": "Sunucu IP'sini Güncelle",
"settings.server.webServer.server.label": "Sunucu",
"settings.server.webServer.traefik.label": "Traefik",
"settings.server.webServer.traefik.modifyEnv": "Env Değiştir",
"settings.server.webServer.storage.label": "Alan",
"settings.server.webServer.storage.cleanUnusedImages": "Kullanılmayan görüntüleri temizle",
"settings.server.webServer.storage.cleanUnusedVolumes": "Kullanılmayan birimleri temizle",
"settings.server.webServer.storage.cleanStoppedContainers": "Durmuş konteynerleri temizle",
"settings.server.webServer.storage.cleanDockerBuilder": "Docker Builder ve Sistemi Temizle",
"settings.server.webServer.storage.cleanMonitoring": "İzlemeyi Temizle",
"settings.server.webServer.storage.cleanAll": "Hepsini temizle",
"settings.profile.title": "Hesap",
"settings.profile.description": "Profil detaylarınızı buradan değiştirebilirsiniz.",
"settings.profile.email": "E-posta",
"settings.profile.password": "Şifre",
"settings.profile.avatar": "Profil Resmi",
"settings.appearance.title": "Görünüm",
"settings.appearance.description": "Kontrol panelinin temasını özelleştirin.",
"settings.appearance.theme": "Tema",
"settings.appearance.themeDescription": "Kontrol paneli için bir tema seçin",
"settings.appearance.themes.light": "Açık",
"settings.appearance.themes.dark": "Koyu",
"settings.appearance.themes.system": "Sistem",
"settings.appearance.language": "Dil",
"settings.appearance.languageDescription": "Kontrol paneli için bir dil seçin"
}

1
apps/dokploy/public/locales/zh-Hant/common.json
View File

@@ -0,0 +1 @@
{}

8
apps/dokploy/server/api/routers/destination.ts
View File

@@ -40,11 +40,10 @@ export const destinationRouter = createTRPCRouter({
testConnection: adminProcedure testConnection: adminProcedure
.input(apiCreateDestination) .input(apiCreateDestination)
.mutation(async ({ input }) => { .mutation(async ({ input }) => {
const { secretAccessKey, bucket, region, endpoint, accessKey } = input; const { secretAccessKey, bucket, region, endpoint, accessKey, provider } =
input;
try { try {
const rcloneFlags = [ const rcloneFlags = [
// `--s3-provider=Cloudflare`,
`--s3-access-key-id=${accessKey}`, `--s3-access-key-id=${accessKey}`,
`--s3-secret-access-key=${secretAccessKey}`, `--s3-secret-access-key=${secretAccessKey}`,
`--s3-region=${region}`, `--s3-region=${region}`,
@@ -52,6 +51,9 @@ export const destinationRouter = createTRPCRouter({
"--s3-no-check-bucket", "--s3-no-check-bucket",
"--s3-force-path-style", "--s3-force-path-style",
]; ];
if (provider) {
rcloneFlags.unshift(`--s3-provider=${provider}`);
}
const rcloneDestination = `:s3:${bucket}`; const rcloneDestination = `:s3:${bucket}`;
const rcloneCommand = `rclone ls ${rcloneFlags.join(" ")} "${rcloneDestination}"`; const rcloneCommand = `rclone ls ${rcloneFlags.join(" ")} "${rcloneDestination}"`;

2
apps/dokploy/styles/globals.css
View File

@@ -64,7 +64,7 @@
--accent: 240 3.7% 15.9%; --accent: 240 3.7% 15.9%;
--accent-foreground: 0 0% 98%; --accent-foreground: 0 0% 98%;
--destructive: 0 62.8% 30.6%; --destructive: 0 84.2% 60.2%;
--destructive-foreground: 0 0% 98%; --destructive-foreground: 0 0% 98%;
--border: 240 3.7% 15.9%; --border: 240 3.7% 15.9%;

4
apps/dokploy/templates/templates.ts
View File

@@ -956,8 +956,8 @@ export const templates: TemplateData[] = [
}, },
tags: ["media", "photos", "self-hosted"], tags: ["media", "photos", "self-hosted"],
load: () => import("./photoprism/index").then((m) => m.generate), load: () => import("./photoprism/index").then((m) => m.generate),
}, },
{ {
id: "ontime", id: "ontime",
name: "Ontime", name: "Ontime",
version: "v3.8.0", version: "v3.8.0",

34
apps/dokploy/utils/hooks/use-locale.ts
View File

@@ -1,27 +1,29 @@
import Cookies from "js-cookie"; import Cookies from "js-cookie";
const SUPPORTED_LOCALES = [ const SUPPORTED_LOCALES = [
"en", "en",
"pl", "pl",
"ru", "ru",
"de", "fr",
"zh-Hant", "de",
"zh-Hans", "tr",
"fa", "zh-Hant",
"zh-Hans",
"fa",
] as const; ] as const;
type Locale = (typeof SUPPORTED_LOCALES)[number]; type Locale = (typeof SUPPORTED_LOCALES)[number];
export default function useLocale() { export default function useLocale() {
const currentLocale = (Cookies.get("DOKPLOY_LOCALE") ?? "en") as Locale; const currentLocale = (Cookies.get("DOKPLOY_LOCALE") ?? "en") as Locale;
const setLocale = (locale: Locale) => { const setLocale = (locale: Locale) => {
Cookies.set("DOKPLOY_LOCALE", locale, { expires: 365 }); Cookies.set("DOKPLOY_LOCALE", locale, { expires: 365 });
window.location.reload(); window.location.reload();
}; };
return { return {
locale: currentLocale, locale: currentLocale,
setLocale, setLocale,
}; };
} }

3
packages/server/src/db/schema/destination.ts
View File

@@ -12,6 +12,7 @@ export const destinations = pgTable("destination", {
.primaryKey() .primaryKey()
.$defaultFn(() => nanoid()), .$defaultFn(() => nanoid()),
name: text("name").notNull(), name: text("name").notNull(),
provider: text("provider"),
accessKey: text("accessKey").notNull(), accessKey: text("accessKey").notNull(),
secretAccessKey: text("secretAccessKey").notNull(), secretAccessKey: text("secretAccessKey").notNull(),
bucket: text("bucket").notNull(), bucket: text("bucket").notNull(),
@@ -37,6 +38,7 @@ export const destinationsRelations = relations(
const createSchema = createInsertSchema(destinations, { const createSchema = createInsertSchema(destinations, {
destinationId: z.string(), destinationId: z.string(),
name: z.string().min(1), name: z.string().min(1),
provider: z.string(),
accessKey: z.string(), accessKey: z.string(),
bucket: z.string(), bucket: z.string(),
endpoint: z.string(), endpoint: z.string(),
@@ -47,6 +49,7 @@ const createSchema = createInsertSchema(destinations, {
export const apiCreateDestination = createSchema export const apiCreateDestination = createSchema
.pick({ .pick({
name: true, name: true,
provider: true,
accessKey: true, accessKey: true,
bucket: true, bucket: true,
region: true, region: true,

8
packages/server/src/utils/backups/utils.ts
View File

@@ -28,9 +28,9 @@ export const removeScheduleBackup = (backupId: string) => {
}; };
export const getS3Credentials = (destination: Destination) => { export const getS3Credentials = (destination: Destination) => {
const { accessKey, secretAccessKey, bucket, region, endpoint } = destination; const { accessKey, secretAccessKey, bucket, region, endpoint, provider } =
destination;
const rcloneFlags = [ const rcloneFlags = [
// `--s3-provider=Cloudflare`,
`--s3-access-key-id=${accessKey}`, `--s3-access-key-id=${accessKey}`,
`--s3-secret-access-key=${secretAccessKey}`, `--s3-secret-access-key=${secretAccessKey}`,
`--s3-region=${region}`, `--s3-region=${region}`,
@@ -39,5 +39,9 @@ export const getS3Credentials = (destination: Destination) => {
"--s3-force-path-style", "--s3-force-path-style",
]; ];
if (provider) {
rcloneFlags.unshift(`--s3-provider=${provider}`);
}
return rcloneFlags; return rcloneFlags;
}; };