Merge pull request #174 from Dokploy/canary

v0.2.5

README.md

@@ -26,7 +26,7 @@ Dokploy include multiples features to make your life easier.
 * **Traefik Integration**: Automatically integrates with Traefik for routing and load balancing.
 * **Real-time Monitoring**: Monitor CPU, memory, storage, and network usage, for every resource.
 * **Docker Management**: Easily deploy and manage Docker containers.
-* **CLI (Soon⌛)**: Manage your applications and databases using the command line.
+* **CLI/API**: Manage your applications and databases using the command line or trought the API.
 * **Self-Hosted**: Self-host Dokploy on your VPS.
 
 

components/dashboard/application/deployments/show-deployments.tsx

@@ -86,6 +86,11 @@ export const ShowDeployments = ({ applicationId }: Props) => {
 									<span className="text-sm text-muted-foreground">
 										{deployment.title}
 									</span>
+									{deployment.description && (
+										<span className="text-sm text-muted-foreground">
+											{deployment.description}
+										</span>
+									)}
 								</div>
 								<div className="flex flex-col items-end gap-2">
 									<div className="text-sm capitalize text-muted-foreground">

components/dashboard/application/domains/generate-domain.tsx

@@ -0,0 +1,79 @@
+import { Button } from "@/components/ui/button";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger,
+} from "@/components/ui/dialog";
+import { RefreshCcw } from "lucide-react";
+import { GenerateTraefikMe } from "./generate-traefikme";
+import { GenerateWildCard } from "./generate-wildcard";
+import Link from "next/link";
+import { api } from "@/utils/api";
+
+interface Props {
+	applicationId: string;
+}
+
+export const GenerateDomain = ({ applicationId }: Props) => {
+	return (
+		<Dialog>
+			<DialogTrigger className="" asChild>
+				<Button variant="secondary">
+					Generate Domain
+					<RefreshCcw className="size-4  text-muted-foreground " />
+				</Button>
+			</DialogTrigger>
+			<DialogContent className="max-h-screen  overflow-y-auto sm:max-w-2xl">
+				<DialogHeader>
+					<DialogTitle>Generate Domain</DialogTitle>
+					<DialogDescription>
+						Generate Domains for your applications
+					</DialogDescription>
+				</DialogHeader>
+
+				<div className="flex flex-col gap-4 w-full">
+					<ul className="flex flex-col gap-4">
+						<li className="flex flex-row items-center gap-4">
+							<div className="flex flex-col gap-2">
+								<div className="text-base font-bold">
+									1. Generate TraefikMe Domain
+								</div>
+								<div className="text-sm text-muted-foreground">
+									This option generates a free domain provided by{" "}
+									<Link
+										href="https://traefik.me"
+										className="text-primary"
+										target="_blank"
+									>
+										TraefikMe
+									</Link>
+									. We recommend using this for quick domain testing or if you
+									don't have a domain yet.
+								</div>
+							</div>
+						</li>
+						{/* <li className="flex flex-row items-center gap-4">
+							<div className="flex flex-col gap-2">
+								<div className="text-base font-bold">
+									2. Use Wildcard Domain
+								</div>
+								<div className="text-sm text-muted-foreground">
+									To use this option, you need to set up an 'A' record in your
+									domain provider. For example, create a record for
+									*.yourdomain.com.
+								</div>
+							</div>
+						</li> */}
+					</ul>
+					<div className="flex flex-row gap-4 w-full">
+						<GenerateTraefikMe applicationId={applicationId} />
+						{/* <GenerateWildCard applicationId={applicationId} /> */}
+					</div>
+				</div>
+			</DialogContent>
+		</Dialog>
+	);
+};

components/dashboard/application/domains/generate-traefikme.tsx

@@ -0,0 +1,69 @@
+import React from "react";
+import {
+	AlertDialog,
+	AlertDialogAction,
+	AlertDialogCancel,
+	AlertDialogContent,
+	AlertDialogDescription,
+	AlertDialogFooter,
+	AlertDialogHeader,
+	AlertDialogTitle,
+	AlertDialogTrigger,
+} from "@/components/ui/alert-dialog";
+import { Button } from "@/components/ui/button";
+import { api } from "@/utils/api";
+import { RefreshCcw } from "lucide-react";
+import { toast } from "sonner";
+
+interface Props {
+	applicationId: string;
+}
+export const GenerateTraefikMe = ({ applicationId }: Props) => {
+	const { mutateAsync, isLoading } = api.domain.generateDomain.useMutation();
+	const utils = api.useUtils();
+	return (
+		<AlertDialog>
+			<AlertDialogTrigger asChild>
+				<Button variant="secondary" isLoading={isLoading}>
+					Generate Domain
+					<RefreshCcw className="size-4  text-muted-foreground " />
+				</Button>
+			</AlertDialogTrigger>
+			<AlertDialogContent>
+				<AlertDialogHeader>
+					<AlertDialogTitle>
+						Are you sure to generate a new domain?
+					</AlertDialogTitle>
+					<AlertDialogDescription>
+						This will generate a new domain and will be used to access to the
+						application
+					</AlertDialogDescription>
+				</AlertDialogHeader>
+				<AlertDialogFooter>
+					<AlertDialogCancel>Cancel</AlertDialogCancel>
+					<AlertDialogAction
+						onClick={async () => {
+							await mutateAsync({
+								applicationId,
+							})
+								.then((data) => {
+									utils.domain.byApplicationId.invalidate({
+										applicationId: applicationId,
+									});
+									utils.application.readTraefikConfig.invalidate({
+										applicationId: applicationId,
+									});
+									toast.success("Generated Domain succesfully");
+								})
+								.catch(() => {
+									toast.error("Error to generate Domain");
+								});
+						}}
+					>
+						Confirm
+					</AlertDialogAction>
+				</AlertDialogFooter>
+			</AlertDialogContent>
+		</AlertDialog>
+	);
+};

components/dashboard/application/domains/generate-wildcard.tsx

@@ -0,0 +1,69 @@
+import React from "react";
+import {
+	AlertDialog,
+	AlertDialogAction,
+	AlertDialogCancel,
+	AlertDialogContent,
+	AlertDialogDescription,
+	AlertDialogFooter,
+	AlertDialogHeader,
+	AlertDialogTitle,
+	AlertDialogTrigger,
+} from "@/components/ui/alert-dialog";
+import { Button } from "@/components/ui/button";
+import { api } from "@/utils/api";
+import { SquareAsterisk } from "lucide-react";
+import { toast } from "sonner";
+
+interface Props {
+	applicationId: string;
+}
+export const GenerateWildCard = ({ applicationId }: Props) => {
+	const { mutateAsync, isLoading } = api.domain.generateWildcard.useMutation();
+	const utils = api.useUtils();
+	return (
+		<AlertDialog>
+			<AlertDialogTrigger asChild>
+				<Button variant="secondary" isLoading={isLoading}>
+					Generate Wildcard Domain
+					<SquareAsterisk className="size-4  text-muted-foreground " />
+				</Button>
+			</AlertDialogTrigger>
+			<AlertDialogContent>
+				<AlertDialogHeader>
+					<AlertDialogTitle>
+						Are you sure to generate a new wildcard domain?
+					</AlertDialogTitle>
+					<AlertDialogDescription>
+						This will generate a new domain and will be used to access to the
+						application
+					</AlertDialogDescription>
+				</AlertDialogHeader>
+				<AlertDialogFooter>
+					<AlertDialogCancel>Cancel</AlertDialogCancel>
+					<AlertDialogAction
+						onClick={async () => {
+							await mutateAsync({
+								applicationId,
+							})
+								.then((data) => {
+									utils.domain.byApplicationId.invalidate({
+										applicationId: applicationId,
+									});
+									utils.application.readTraefikConfig.invalidate({
+										applicationId: applicationId,
+									});
+									toast.success("Generated Domain succesfully");
+								})
+								.catch((e) => {
+									toast.error(`Error to generate Domain: ${e.message}`);
+								});
+						}}
+					>
+						Confirm
+					</AlertDialogAction>
+				</AlertDialogFooter>
+			</AlertDialogContent>
+		</AlertDialog>
+	);
+};

components/dashboard/application/domains/show-domains.tsx

@@ -6,7 +6,7 @@ import {
 	CardHeader,
 	CardTitle,
 } from "@/components/ui/card";
-import { ExternalLink, GlobeIcon } from "lucide-react";
+import { ExternalLink, GlobeIcon, RefreshCcw } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { api } from "@/utils/api";
 import { Input } from "@/components/ui/input";
@@ -14,6 +14,7 @@ import { DeleteDomain } from "./delete-domain";
 import Link from "next/link";
 import { AddDomain } from "./add-domain";
 import { UpdateDomain } from "./update-domain";
+import { GenerateDomain } from "./generate-domain";
 
 interface Props {
 	applicationId: string;
@@ -31,7 +32,7 @@ export const ShowDomains = ({ applicationId }: Props) => {
 	return (
 		<div className="flex w-full flex-col gap-5 ">
 			<Card className="bg-background">
-				<CardHeader className="flex flex-row items-center justify-between">
+				<CardHeader className="flex flex-row items-center flex-wrap gap-4 justify-between">
 					<div className="flex flex-col gap-1">
 						<CardTitle className="text-xl">Domains</CardTitle>
 						<CardDescription>
@@ -39,11 +40,16 @@ export const ShowDomains = ({ applicationId }: Props) => {
 						</CardDescription>
 					</div>
 
-					{data && data?.length > 0 && (
-						<AddDomain applicationId={applicationId}>
-							<GlobeIcon className="size-4" /> Add Domain
-						</AddDomain>
-					)}
+					<div className="flex flex-row gap-4 flex-wrap">
+						{data && data?.length > 0 && (
+							<AddDomain applicationId={applicationId}>
+								<GlobeIcon className="size-4" /> Add Domain
+							</AddDomain>
+						)}
+						{data && data?.length > 0 && (
+							<GenerateDomain applicationId={applicationId} />
+						)}
+					</div>
 				</CardHeader>
 				<CardContent className="flex w-full flex-row gap-4">
 					{data?.length === 0 ? (
@@ -53,9 +59,13 @@ export const ShowDomains = ({ applicationId }: Props) => {
 								To access to the application is required to set at least 1
 								domain
 							</span>
-							<AddDomain applicationId={applicationId}>
-								<GlobeIcon className="size-4" /> Add Domain
-							</AddDomain>
+							<div className="flex flex-row gap-4 flex-wrap">
+								<AddDomain applicationId={applicationId}>
+									<GlobeIcon className="size-4" /> Add Domain
+								</AddDomain>
+
+								<GenerateDomain applicationId={applicationId} />
+							</div>
 						</div>
 					) : (
 						<div className="flex w-full flex-col gap-4">

components/dashboard/application/general/show.tsx

@@ -10,7 +10,7 @@ import { RedbuildApplication } from "../rebuild-application";
 import { StartApplication } from "../start-application";
 import { StopApplication } from "../stop-application";
 import { DockerTerminalModal } from "../../settings/web-server/docker-terminal-modal";
-import { Terminal } from "lucide-react";
+import { CheckCircle2, Terminal } from "lucide-react";
 import { DeployApplication } from "./deploy-application";
 import { ResetApplication } from "./reset-application";
 interface Props {
@@ -55,8 +55,10 @@ export const ShowGeneralApplication = ({ applicationId }: Props) => {
 									toast.error("Error to update Auto Deploy");
 								});
 						}}
+						className="flex flex-row gap-2 items-center"
 					>
 						Autodeploy
+						{data?.autoDeploy && <CheckCircle2 className="size-4" />}
 					</Toggle>
 					<RedbuildApplication applicationId={applicationId} />
 					{data?.applicationStatus === "idle" ? (

components/dashboard/monitoring/docker/show.tsx

@@ -141,7 +141,13 @@ export const DockerMonitoring = ({
 			network: data.network[data.network.length - 1] ?? currentData.network,
 			disk: data.disk[data.disk.length - 1] ?? currentData.disk,
 		});
-		setAcummulativeData(data);
+		setAcummulativeData({
+			block: data?.block || [],
+			cpu: data?.cpu || [],
+			disk: data?.disk || [],
+			memory: data?.memory || [],
+			network: data?.network || [],
+		});
 	}, [data]);
 
 	useEffect(() => {

components/dashboard/projects/show.tsx

@@ -76,8 +76,8 @@ export const ShowProjects = () => {
 						project?.compose.length;
 					return (
 						<div key={project.projectId} className="w-full lg:max-w-md">
-							<Card className="group relative w-full  bg-transparent transition-colors hover:bg-card">
-								<Link href={`/dashboard/project/${project.projectId}`}>
+							<Link href={`/dashboard/project/${project.projectId}`}>
+								<Card className="group relative w-full  bg-transparent transition-colors hover:bg-card">
 									<Button
 										className="absolute -right-3 -top-3 size-9 translate-y-1 rounded-full p-0 opacity-0 transition-all duration-200 group-hover:translate-y-0 group-hover:opacity-100"
 										size="sm"
@@ -85,113 +85,122 @@ export const ShowProjects = () => {
 									>
 										<ExternalLinkIcon className="size-3.5" />
 									</Button>
-								</Link>
-								<CardHeader>
-									<CardTitle className="flex items-center justify-between gap-2">
-										<span className="flex flex-col gap-1.5">
-											<div className="flex items-center gap-2">
-												<BookIcon className="size-4 text-muted-foreground" />
-												<Link
-													className="text-base font-medium leading-none"
-													href={`/dashboard/project/${project.projectId}`}
-												>
-													{project.name}
-												</Link>
-											</div>
+									<CardHeader>
+										<CardTitle className="flex items-center justify-between gap-2">
+											<span className="flex flex-col gap-1.5">
+												<div className="flex items-center gap-2">
+													<BookIcon className="size-4 text-muted-foreground" />
+													<span className="text-base font-medium leading-none">
+														{project.name}
+													</span>
+												</div>
 
-											<span className="text-sm font-medium text-muted-foreground">
-												{project.description}
+												<span className="text-sm font-medium text-muted-foreground">
+													{project.description}
+												</span>
 											</span>
-										</span>
-										<div className="flex self-start space-x-1">
-											<DropdownMenu>
-												<DropdownMenuTrigger asChild>
-													<Button variant="ghost" size="icon" className="px-2">
-														<MoreHorizontalIcon className="size-5" />
-													</Button>
-												</DropdownMenuTrigger>
-												<DropdownMenuContent className="w-[200px] space-y-2">
-													<DropdownMenuLabel className="font-normal">
-														Actions
-													</DropdownMenuLabel>
+											<div className="flex self-start space-x-1">
+												<DropdownMenu>
+													<DropdownMenuTrigger asChild>
+														<Button
+															variant="ghost"
+															size="icon"
+															className="px-2"
+														>
+															<MoreHorizontalIcon className="size-5" />
+														</Button>
+													</DropdownMenuTrigger>
+													<DropdownMenuContent className="w-[200px] space-y-2">
+														<DropdownMenuLabel className="font-normal">
+															Actions
+														</DropdownMenuLabel>
 
-													<UpdateProject projectId={project.projectId} />
+														<div onClick={(e) => e.stopPropagation()}>
+															<UpdateProject projectId={project.projectId} />
+														</div>
 
-													{(auth?.rol === "admin" ||
-														user?.canDeleteProjects) && (
-														<AlertDialog>
-															<AlertDialogTrigger className="w-full">
-																<DropdownMenuItem
-																	className="w-full cursor-pointer  space-x-3"
-																	onSelect={(e) => e.preventDefault()}
-																>
-																	<TrashIcon className="size-4" />
-																	<span>Delete</span>
-																</DropdownMenuItem>
-															</AlertDialogTrigger>
-															<AlertDialogContent>
-																<AlertDialogHeader>
-																	<AlertDialogTitle>
-																		Are you sure to delete this project?
-																	</AlertDialogTitle>
-																	{!emptyServices ? (
-																		<div className="flex flex-row gap-4 rounded-lg bg-yellow-50 p-2 dark:bg-yellow-950">
-																			<AlertTriangle className="text-yellow-600 dark:text-yellow-400" />
-																			<span className="text-sm text-yellow-600 dark:text-yellow-400">
-																				You have active services, please delete
-																				them first
-																			</span>
-																		</div>
-																	) : (
-																		<AlertDialogDescription>
-																			This action cannot be undone
-																		</AlertDialogDescription>
-																	)}
-																</AlertDialogHeader>
-																<AlertDialogFooter>
-																	<AlertDialogCancel>Cancel</AlertDialogCancel>
-																	<AlertDialogAction
-																		disabled={!emptyServices}
-																		onClick={async () => {
-																			await mutateAsync({
-																				projectId: project.projectId,
-																			})
-																				.then(() => {
-																					toast.success(
-																						"Project delete succesfully",
-																					);
-																				})
-																				.catch(() => {
-																					toast.error(
-																						"Error to delete this project",
-																					);
-																				})
-																				.finally(() => {
-																					utils.project.all.invalidate();
-																				});
-																		}}
-																	>
-																		Delete
-																	</AlertDialogAction>
-																</AlertDialogFooter>
-															</AlertDialogContent>
-														</AlertDialog>
-													)}
-												</DropdownMenuContent>
-											</DropdownMenu>
+														<div onClick={(e) => e.stopPropagation()}>
+															{(auth?.rol === "admin" ||
+																user?.canDeleteProjects) && (
+																<AlertDialog>
+																	<AlertDialogTrigger className="w-full">
+																		<DropdownMenuItem
+																			className="w-full cursor-pointer  space-x-3"
+																			onSelect={(e) => e.preventDefault()}
+																		>
+																			<TrashIcon className="size-4" />
+																			<span>Delete</span>
+																		</DropdownMenuItem>
+																	</AlertDialogTrigger>
+																	<AlertDialogContent>
+																		<AlertDialogHeader>
+																			<AlertDialogTitle>
+																				Are you sure to delete this project?
+																			</AlertDialogTitle>
+																			{!emptyServices ? (
+																				<div className="flex flex-row gap-4 rounded-lg bg-yellow-50 p-2 dark:bg-yellow-950">
+																					<AlertTriangle className="text-yellow-600 dark:text-yellow-400" />
+																					<span className="text-sm text-yellow-600 dark:text-yellow-400">
+																						You have active services, please
+																						delete them first
+																					</span>
+																				</div>
+																			) : (
+																				<AlertDialogDescription>
+																					This action cannot be undone
+																				</AlertDialogDescription>
+																			)}
+																		</AlertDialogHeader>
+																		<AlertDialogFooter>
+																			<AlertDialogCancel>
+																				Cancel
+																			</AlertDialogCancel>
+																			<AlertDialogAction
+																				disabled={!emptyServices}
+																				onClick={async () => {
+																					await mutateAsync({
+																						projectId: project.projectId,
+																					})
+																						.then(() => {
+																							toast.success(
+																								"Project delete succesfully",
+																							);
+																						})
+																						.catch(() => {
+																							toast.error(
+																								"Error to delete this project",
+																							);
+																						})
+																						.finally(() => {
+																							utils.project.all.invalidate();
+																						});
+																				}}
+																			>
+																				Delete
+																			</AlertDialogAction>
+																		</AlertDialogFooter>
+																	</AlertDialogContent>
+																</AlertDialog>
+															)}
+														</div>
+													</DropdownMenuContent>
+												</DropdownMenu>
+											</div>
+										</CardTitle>
+									</CardHeader>
+									<CardFooter className="pt-4">
+										<div className="space-y-1 text-sm flex flex-row justify-between max-sm:flex-wrap w-full gap-2 sm:gap-4">
+											<DateTooltip date={project.createdAt}>
+												Created
+											</DateTooltip>
+											<span>
+												{totalServices}{" "}
+												{totalServices === 1 ? "service" : "services"}
+											</span>
 										</div>
-									</CardTitle>
-								</CardHeader>
-								<CardFooter className="pt-4">
-									<div className="space-y-1 text-sm flex flex-row justify-between max-sm:flex-wrap w-full gap-2 sm:gap-4">
-										<DateTooltip date={project.createdAt}>Created</DateTooltip>
-										<span>
-											{totalServices}{" "}
-											{totalServices === 1 ? "service" : "services"}
-										</span>
-									</div>
-								</CardFooter>
-							</Card>
+									</CardFooter>
+								</Card>
+							</Link>
 						</div>
 					);
 				})}

components/dashboard/settings/profile/generate-token.tsx

@@ -0,0 +1,73 @@
+import { Button } from "@/components/ui/button";
+import {
+	Card,
+	CardContent,
+	CardDescription,
+	CardHeader,
+	CardTitle,
+} from "@/components/ui/card";
+import { api } from "@/utils/api";
+import { toast } from "sonner";
+import { ToggleVisibilityInput } from "@/components/shared/toggle-visibility-input";
+import { Label } from "@/components/ui/label";
+import Link from "next/link";
+import { ExternalLinkIcon } from "lucide-react";
+
+export const GenerateToken = () => {
+	const { data, refetch } = api.auth.get.useQuery();
+
+	const { mutateAsync: generateToken, isLoading: isLoadingToken } =
+		api.auth.generateToken.useMutation();
+
+	return (
+		<Card className="bg-transparent">
+			<CardHeader className="flex flex-row gap-2 flex-wrap justify-between items-center">
+				<div>
+					<CardTitle className="text-xl">API/CLI</CardTitle>
+					<CardDescription>
+						Generate a token to access the API/CLI
+					</CardDescription>
+				</div>
+				<div className="flex flex-row gap-2 max-sm:flex-wrap items-end">
+					<span className="text-sm font-medium text-muted-foreground">
+						Swagger API:
+					</span>
+					<Link
+						href="/swagger"
+						target="_blank"
+						className="flex flex-row gap-2 items-center"
+					>
+						<span className="text-sm font-medium">View</span>
+						<ExternalLinkIcon className="size-4" />
+					</Link>
+				</div>
+			</CardHeader>
+			<CardContent className="space-y-2">
+				<div className="flex flex-row gap-2 max-sm:flex-wrap justify-end items-end">
+					<div className="grid w-full gap-8">
+						<div className="flex flex-col gap-2">
+							<Label>Token</Label>
+							<ToggleVisibilityInput
+								placeholder="Token"
+								value={data?.token || ""}
+								disabled
+							/>
+						</div>
+					</div>
+					<Button
+						type="button"
+						isLoading={isLoadingToken}
+						onClick={async () => {
+							await generateToken().then(() => {
+								refetch();
+								toast.success("Token generated");
+							});
+						}}
+					>
+						Generate
+					</Button>
+				</div>
+			</CardContent>
+		</Card>
+	);
+};

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

@@ -51,6 +51,9 @@ const randomImages = [
 export const ProfileForm = () => {
 	const { data, refetch } = api.auth.get.useQuery();
 	const { mutateAsync, isLoading } = api.auth.update.useMutation();
+
+	const { mutateAsync: generateToken, isLoading: isLoadingToken } =
+		api.auth.generateToken.useMutation();
 	const form = useForm<Profile>({
 		defaultValues: {
 			email: data?.email || "",

components/dashboard/settings/show.tsx

@@ -32,7 +32,6 @@ export const ShowSettings = () => {
 					<ShowCertificates />
 					<WebDomain />
 					<WebServer />
-
 					<ShowUsers />
 				</>
 			)}

components/dashboard/settings/users/add-permissions.tsx

@@ -38,6 +38,7 @@ const addPermissions = z.object({
 	canDeleteServices: z.boolean().optional().default(false),
 	canAccessToTraefikFiles: z.boolean().optional().default(false),
 	canAccessToDocker: z.boolean().optional().default(false),
+	canAccessToAPI: z.boolean().optional().default(false),
 });
 
 type AddPermissions = z.infer<typeof addPermissions>;
@@ -80,6 +81,7 @@ export const AddUserPermissions = ({ userId }: Props) => {
 				canDeleteServices: data.canDeleteServices,
 				canAccessToTraefikFiles: data.canAccessToTraefikFiles,
 				canAccessToDocker: data.canAccessToDocker,
+				canAccessToAPI: data.canAccessToAPI,
 			});
 		}
 	}, [form, form.formState.isSubmitSuccessful, form.reset, data]);
@@ -95,6 +97,7 @@ export const AddUserPermissions = ({ userId }: Props) => {
 			accesedProjects: data.accesedProjects || [],
 			accesedServices: data.accesedServices || [],
 			canAccessToDocker: data.canAccessToDocker,
+			canAccessToAPI: data.canAccessToAPI,
 		})
 			.then(async () => {
 				toast.success("Permissions updated");
@@ -247,6 +250,26 @@ export const AddUserPermissions = ({ userId }: Props) => {
 								</FormItem>
 							)}
 						/>
+						<FormField
+							control={form.control}
+							name="canAccessToAPI"
+							render={({ field }) => (
+								<FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm">
+									<div className="space-y-0.5">
+										<FormLabel>Access to API/CLI</FormLabel>
+										<FormDescription>
+											Allow the user to access to the API/CLI
+										</FormDescription>
+									</div>
+									<FormControl>
+										<Switch
+											checked={field.value}
+											onCheckedChange={field.onChange}
+										/>
+									</FormControl>
+								</FormItem>
+							)}
+						/>
 						<FormField
 							control={form.control}
 							name="accesedProjects"

drizzle/0015_fearless_callisto.sql

@@ -0,0 +1 @@
+ALTER TABLE "auth" ADD COLUMN "token" text;

drizzle/0016_chunky_leopardon.sql

@@ -0,0 +1 @@
+ALTER TABLE "user" ADD COLUMN "canAccessToAPI" boolean DEFAULT false NOT NULL;

drizzle/0017_minor_post.sql

@@ -0,0 +1 @@
+ALTER TABLE "deployment" ADD COLUMN "description" text;

drizzle/meta/_journal.json

@@ -106,6 +106,27 @@
       "when": 1716715367982,
       "tag": "0014_same_hammerhead",
       "breakpoints": true
+    },
+    {
+      "idx": 15,
+      "version": "6",
+      "when": 1717564517104,
+      "tag": "0015_fearless_callisto",
+      "breakpoints": true
+    },
+    {
+      "idx": 16,
+      "version": "6",
+      "when": 1719109196484,
+      "tag": "0016_chunky_leopardon",
+      "breakpoints": true
+    },
+    {
+      "idx": 17,
+      "version": "6",
+      "when": 1719547174326,
+      "tag": "0017_minor_post",
+      "breakpoints": true
     }
   ]
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "dokploy",
-  "version": "v0.2.3",
+  "version": "v0.2.5",
   "private": true,
   "license": "AGPL-3.0-only",
   "type": "module",
@@ -109,9 +109,11 @@
     "slugify": "^1.6.6",
     "sonner": "^1.4.0",
     "superjson": "^2.2.1",
+    "swagger-ui-react": "^5.17.14",
     "tailwind-merge": "^2.2.0",
     "tailwindcss-animate": "^1.0.7",
     "tar-fs": "3.0.5",
+    "@dokploy/trpc-openapi": "0.0.4",
     "use-resize-observer": "9.1.0",
     "ws": "8.16.0",
     "xterm-addon-fit": "^0.8.0",
@@ -129,6 +131,7 @@
     "@types/qrcode": "^1.5.5",
     "@types/react": "^18.2.37",
     "@types/react-dom": "^18.2.15",
+    "@types/swagger-ui-react": "^4.18.3",
     "@types/tar-fs": "2.0.4",
     "@types/ws": "8.5.10",
     "autoprefixer": "^10.4.14",

pages/api/[...trpc].ts

@@ -0,0 +1,29 @@
+import type { NextApiRequest, NextApiResponse } from "next";
+import { createOpenApiNextHandler } from "@dokploy/trpc-openapi";
+import { appRouter } from "@/server/api/root";
+import { createTRPCContext } from "@/server/api/trpc";
+import { validateBearerToken } from "@/server/auth/token";
+import { validateRequest } from "@/server/auth/auth";
+
+const handler = async (req: NextApiRequest, res: NextApiResponse) => {
+	let { session, user } = await validateBearerToken(req);
+
+	if (!session) {
+		const cookieResult = await validateRequest(req, res);
+		session = cookieResult.session;
+		user = cookieResult.user;
+	}
+
+	if (!user || !session) {
+		res.status(401).json({ message: "Unauthorized" });
+		return;
+	}
+
+	// @ts-ignore
+	return createOpenApiNextHandler({
+		router: appRouter,
+		createContext: createTRPCContext,
+	})(req, res);
+};
+
+export default handler;

pages/api/deploy/[refreshToken].ts

@@ -33,6 +33,7 @@ export default async function handler(
 		}
 
 		const deploymentTitle = extractCommitMessage(req.headers, req.body);
+		const deploymentHash = extractHash(req.headers, req.body);
 
 		const sourceType = application.sourceType;
 
@@ -75,6 +76,7 @@ export default async function handler(
 			const jobData: DeploymentJob = {
 				applicationId: application.applicationId as string,
 				titleLog: deploymentTitle,
+				descriptionLog: `Hash: ${deploymentHash}`,
 				type: "deploy",
 				applicationType: "application",
 			};
@@ -166,6 +168,37 @@ export const extractCommitMessage = (headers: any, body: any) => {
 	return "NEW CHANGES";
 };
 
+export const extractHash = (headers: any, body: any) => {
+	// GitHub
+	if (headers["x-github-event"]) {
+		return body.head_commit ? body.head_commit.id : "";
+	}
+
+	// GitLab
+	if (headers["x-gitlab-event"]) {
+		return (
+			body.checkout_sha ||
+			(body.commits && body.commits.length > 0
+				? body.commits[0].id
+				: "NEW COMMIT")
+		);
+	}
+
+	// Bitbucket
+	if (headers["x-event-key"]?.includes("repo:push")) {
+		return body.push.changes && body.push.changes.length > 0
+			? body.push.changes[0].new.target.hash
+			: "NEW COMMIT";
+	}
+
+	// Gitea
+	if (headers["x-gitea-event"]) {
+		return body.after || "NEW COMMIT";
+	}
+
+	return "";
+};
+
 export const extractBranchName = (headers: any, body: any) => {
 	if (headers["x-github-event"] || headers["x-gitea-event"]) {
 		return body?.ref?.replace("refs/heads/", "");

pages/api/deploy/compose/[refreshToken].ts

@@ -4,7 +4,11 @@ import type { DeploymentJob } from "@/server/queues/deployments-queue";
 import { myQueue } from "@/server/queues/queueSetup";
 import { eq } from "drizzle-orm";
 import type { NextApiRequest, NextApiResponse } from "next";
-import { extractBranchName, extractCommitMessage } from "../[refreshToken]";
+import {
+	extractBranchName,
+	extractCommitMessage,
+	extractHash,
+} from "../[refreshToken]";
 import { updateCompose } from "@/server/api/services/compose";
 
 export default async function handler(
@@ -34,7 +38,7 @@ export default async function handler(
 		}
 
 		const deploymentTitle = extractCommitMessage(req.headers, req.body);
-
+		const deploymentHash = extractHash(req.headers, req.body);
 		const sourceType = composeResult.sourceType;
 
 		if (sourceType === "github") {
@@ -61,6 +65,7 @@ export default async function handler(
 				titleLog: deploymentTitle,
 				type: "deploy",
 				applicationType: "compose",
+				descriptionLog: `Hash: ${deploymentHash}`,
 			};
 			await myQueue.add(
 				"deployments",

pages/api/trpc/[trpc].ts

@@ -5,14 +5,14 @@ import { createTRPCContext } from "@/server/api/trpc";
 
 // export API handler
 export default createNextApiHandler({
-  router: appRouter,
-  createContext: createTRPCContext,
-  onError:
-    process.env.NODE_ENV === "development"
-      ? ({ path, error }) => {
-          console.error(
-            `❌ tRPC failed on ${path ?? "<no-path>"}: ${error.message}`,
-          );
-        }
-      : undefined,
+	router: appRouter,
+	createContext: createTRPCContext,
+	onError:
+		process.env.NODE_ENV === "development"
+			? ({ path, error }) => {
+					console.error(
+						`❌ tRPC failed on ${path ?? "<no-path>"}: ${error.message}`,
+					);
+				}
+			: undefined,
 });

pages/dashboard/settings/profile.tsx

@@ -1,14 +1,26 @@
+import { GenerateToken } from "@/components/dashboard/settings/profile/generate-token";
 import { ProfileForm } from "@/components/dashboard/settings/profile/profile-form";
 import { DashboardLayout } from "@/components/layouts/dashboard-layout";
 import { SettingsLayout } from "@/components/layouts/settings-layout";
 import { validateRequest } from "@/server/auth/auth";
+import { api } from "@/utils/api";
 import type { GetServerSidePropsContext } from "next";
 import React, { type ReactElement } from "react";
 
 const Page = () => {
+	const { data } = api.auth.get.useQuery();
+	const { data: user } = api.user.byAuthId.useQuery(
+		{
+			authId: data?.id || "",
+		},
+		{
+			enabled: !!data?.id && data?.rol === "user",
+		},
+	);
 	return (
 		<div className="flex flex-col gap-4 w-full">
 			<ProfileForm />
+			{(user?.canAccessToAPI || data?.rol === "admin") && <GenerateToken />}
 		</div>
 	);
 };

pages/swagger.tsx

@@ -0,0 +1,80 @@
+import { appRouter } from "@/server/api/root";
+import { validateRequest } from "@/server/auth/auth";
+import { api } from "@/utils/api";
+import { createServerSideHelpers } from "@trpc/react-query/server";
+import type { GetServerSidePropsContext, NextPage } from "next";
+import dynamic from "next/dynamic";
+import "swagger-ui-react/swagger-ui.css";
+import superjson from "superjson";
+import { useEffect, useState } from "react";
+
+const SwaggerUI = dynamic(() => import("swagger-ui-react"), { ssr: false });
+
+const Home: NextPage = () => {
+	const { data } = api.settings.getOpenApiDocument.useQuery();
+	const [spec, setSpec] = useState({});
+
+	useEffect(() => {
+		// Esto solo se ejecutará en el cliente
+		if (data) {
+			const protocolAndHost = `${window.location.protocol}//${window.location.host}/api`;
+			const newSpec = {
+				...data,
+				servers: [{ url: protocolAndHost }],
+				externalDocs: {
+					url: `${protocolAndHost}/settings.getOpenApiDocument`,
+				},
+			};
+			setSpec(newSpec);
+		}
+	}, [data]);
+
+	return (
+		<div className="h-screen bg-white">
+			<SwaggerUI spec={spec} />
+		</div>
+	);
+};
+
+export default Home;
+export async function getServerSideProps(context: GetServerSidePropsContext) {
+	const { req, res } = context;
+	const { user, session } = await validateRequest(context.req, context.res);
+	if (!user) {
+		return {
+			redirect: {
+				permanent: true,
+				destination: "/",
+			},
+		};
+	}
+	const helpers = createServerSideHelpers({
+		router: appRouter,
+		ctx: {
+			req: req as any,
+			res: res as any,
+			db: null as any,
+			session: session,
+			user: user,
+		},
+		transformer: superjson,
+	});
+	if (user.rol === "user") {
+		const result = await helpers.user.byAuthId.fetch({
+			authId: user.id,
+		});
+
+		if (!result.canAccessToAPI) {
+			return {
+				redirect: {
+					permanent: true,
+					destination: "/",
+				},
+			};
+		}
+	}
+
+	return {
+		props: {},
+	};
+}

server/api/root.ts

@@ -23,6 +23,7 @@ import { dockerRouter } from "./routers/docker";
 import { composeRouter } from "./routers/compose";
 import { registryRouter } from "./routers/registry";
 import { clusterRouter } from "./routers/cluster";
+
 /**
  * This is the primary router for your server.
  *
@@ -39,6 +40,7 @@ export const appRouter = createTRPCRouter({
 	redis: redisRouter,
 	mongo: mongoRouter,
 	mariadb: mariadbRouter,
+	compose: composeRouter,
 	user: userRouter,
 	domain: domainRouter,
 	destination: destinationRouter,
@@ -50,7 +52,6 @@ export const appRouter = createTRPCRouter({
 	security: securityRouter,
 	redirects: redirectsRouter,
 	port: portRouter,
-	compose: composeRouter,
 	registry: registryRouter,
 	cluster: clusterRouter,
 });

server/api/routers/application.ts

@@ -162,6 +162,7 @@ export const applicationRouter = createTRPCRouter({
 			const jobData: DeploymentJob = {
 				applicationId: input.applicationId,
 				titleLog: "Rebuild deployment",
+				descriptionLog: "",
 				type: "redeploy",
 				applicationType: "application",
 			};
@@ -294,6 +295,7 @@ export const applicationRouter = createTRPCRouter({
 			const jobData: DeploymentJob = {
 				applicationId: input.applicationId,
 				titleLog: "Manual deployment",
+				descriptionLog: "",
 				type: "deploy",
 				applicationType: "application",
 			};

server/api/routers/auth.ts

@@ -26,6 +26,7 @@ import {
 	updateAuthById,
 	verify2FA,
 } from "../services/auth";
+import { luciaToken } from "@/server/auth/token";
 
 export const authRouter = createTRPCRouter({
 	createAdmin: publicProcedure
@@ -138,6 +139,23 @@ export const authRouter = createTRPCRouter({
 			return auth;
 		}),
 
+	generateToken: protectedProcedure.mutation(async ({ ctx, input }) => {
+		const auth = await findAuthById(ctx.user.authId);
+
+		if (auth.token) {
+			await luciaToken.invalidateSession(auth.token);
+		}
+		const session = await luciaToken.createSession(auth?.id || "", {
+			expiresIn: 60 * 60 * 24 * 30,
+		});
+
+		await updateAuthById(auth.id, {
+			token: session.id,
+		});
+
+		return auth;
+	}),
+
 	one: adminProcedure.input(apiFindOneAuth).query(async ({ input }) => {
 		const auth = await findAuthById(input.id);
 		return auth;
@@ -196,4 +214,7 @@ export const authRouter = createTRPCRouter({
 		});
 		return auth;
 	}),
+	verifyToken: protectedProcedure.mutation(async () => {
+		return true;
+	}),
 });

server/api/routers/compose.ts

@@ -138,6 +138,7 @@ export const composeRouter = createTRPCRouter({
 				titleLog: "Manual deployment",
 				type: "deploy",
 				applicationType: "compose",
+				descriptionLog: "",
 			};
 			await myQueue.add(
 				"deployments",
@@ -156,6 +157,7 @@ export const composeRouter = createTRPCRouter({
 				titleLog: "Rebuild deployment",
 				type: "redeploy",
 				applicationType: "compose",
+				descriptionLog: "",
 			};
 			await myQueue.add(
 				"deployments",

server/api/routers/domain.ts

@@ -12,6 +12,8 @@ import {
 	createDomain,
 	findDomainById,
 	findDomainsByApplicationId,
+	generateDomain,
+	generateWildcard,
 	removeDomainById,
 	updateDomainById,
 } from "../services/domain";
@@ -35,6 +37,16 @@ export const domainRouter = createTRPCRouter({
 		.query(async ({ input }) => {
 			return await findDomainsByApplicationId(input.applicationId);
 		}),
+	generateDomain: protectedProcedure
+		.input(apiFindDomainByApplication)
+		.mutation(async ({ input }) => {
+			return generateDomain(input);
+		}),
+	generateWildcard: protectedProcedure
+		.input(apiFindDomainByApplication)
+		.mutation(async ({ input }) => {
+			return generateWildcard(input);
+		}),
 	update: protectedProcedure
 		.input(apiUpdateDomain)
 		.mutation(async ({ input }) => {

server/api/routers/project.ts

@@ -1,4 +1,8 @@
-import { createTRPCRouter, protectedProcedure } from "@/server/api/trpc";
+import {
+	cliProcedure,
+	createTRPCRouter,
+	protectedProcedure,
+} from "@/server/api/trpc";
 import { db } from "@/server/db";
 import {
 	apiCreateProject,
@@ -54,6 +58,7 @@ export const projectRouter = createTRPCRouter({
 				});
 			}
 		}),
+
 	one: protectedProcedure
 		.input(apiFindOneProject)
 		.query(async ({ input, ctx }) => {

server/api/routers/settings.ts

@@ -41,6 +41,8 @@ import {
 } from "../services/settings";
 import { canAccessToTraefikFiles } from "../services/user";
 import { recreateDirectory } from "@/server/utils/filesystem/directory";
+import { generateOpenApiDocument } from "@dokploy/trpc-openapi";
+import { appRouter } from "../root";
 
 export const settingsRouter = createTRPCRouter({
 	reloadServer: adminProcedure.mutation(async () => {
@@ -242,5 +244,50 @@ export const settingsRouter = createTRPCRouter({
 			}
 			return readConfigInPath(input.path);
 		}),
+
+	getOpenApiDocument: protectedProcedure.query(
+		async ({ ctx }): Promise<unknown> => {
+			const protocol = ctx.req.headers["x-forwarded-proto"];
+			const url = `${protocol}://${ctx.req.headers.host}/api`;
+			const openApiDocument = generateOpenApiDocument(appRouter, {
+				title: "tRPC OpenAPI",
+				version: "1.0.0",
+				baseUrl: url,
+				docsUrl: `${url}/settings.getOpenApiDocument`,
+				tags: [
+					"admin",
+					"docker",
+					"compose",
+					"registry",
+					"cluster",
+					"user",
+					"domain",
+					"destination",
+					"backup",
+					"deployment",
+					"mounts",
+					"certificates",
+					"settings",
+					"security",
+					"redirects",
+					"port",
+					"project",
+					"application",
+					"mysql",
+					"postgres",
+					"redis",
+					"mongo",
+					"mariadb",
+				],
+			});
+
+			openApiDocument.info = {
+				title: "Dokploy API",
+				description: "Endpoints for dokploy",
+				version: getDokployVersion(),
+			};
+
+			return openApiDocument;
+		},
+	),
 });
-// apt-get install apache2-utils

server/api/services/application.ts

@@ -16,11 +16,15 @@ import { createTraefikConfig } from "@/server/utils/traefik/application";
 import { docker } from "@/server/constants";
 import { getAdvancedStats } from "@/server/monitoring/utilts";
 import { validUniqueServerAppName } from "./project";
+import { generatePassword } from "@/templates/utils";
+import { generateAppName } from "@/server/db/schema/utils";
 export type Application = typeof applications.$inferSelect;
 
 export const createApplication = async (
 	input: typeof apiCreateApplication._type,
 ) => {
+	input.appName =
+		`${input.appName}-${generatePassword(6)}` || generateAppName("app");
 	if (input.appName) {
 		const valid = await validUniqueServerAppName(input.appName);
 
@@ -126,15 +130,18 @@ export const updateApplicationStatus = async (
 export const deployApplication = async ({
 	applicationId,
 	titleLog = "Manual deployment",
+	descriptionLog = "",
 }: {
 	applicationId: string;
 	titleLog: string;
+	descriptionLog: string;
 }) => {
 	const application = await findApplicationById(applicationId);
 	const admin = await findAdmin();
 	const deployment = await createDeployment({
 		applicationId: applicationId,
 		title: titleLog,
+		description: descriptionLog,
 	});
 
 	try {
@@ -169,14 +176,17 @@ export const deployApplication = async ({
 export const rebuildApplication = async ({
 	applicationId,
 	titleLog = "Rebuild deployment",
+	descriptionLog = "",
 }: {
 	applicationId: string;
 	titleLog: string;
+	descriptionLog: string;
 }) => {
 	const application = await findApplicationById(applicationId);
 	const deployment = await createDeployment({
 		applicationId: applicationId,
 		title: titleLog,
+		description: descriptionLog,
 	});
 
 	try {

server/api/services/compose.ts

@@ -14,10 +14,14 @@ import { COMPOSE_PATH } from "@/server/constants";
 import { cloneGithubRepository } from "@/server/utils/providers/github";
 import { cloneGitRepository } from "@/server/utils/providers/git";
 import { validUniqueServerAppName } from "./project";
+import { generateAppName } from "@/server/db/schema/utils";
+import { generatePassword } from "@/templates/utils";
 
 export type Compose = typeof compose.$inferSelect;
 
 export const createCompose = async (input: typeof apiCreateCompose._type) => {
+	input.appName =
+		`${input.appName}-${generatePassword(6)}` || generateAppName("compose");
 	if (input.appName) {
 		const valid = await validUniqueServerAppName(input.appName);
 
@@ -130,15 +134,18 @@ export const updateCompose = async (
 export const deployCompose = async ({
 	composeId,
 	titleLog = "Manual deployment",
+	descriptionLog = "",
 }: {
 	composeId: string;
 	titleLog: string;
+	descriptionLog: string;
 }) => {
 	const compose = await findComposeById(composeId);
 	const admin = await findAdmin();
 	const deployment = await createDeploymentCompose({
 		composeId: composeId,
 		title: titleLog,
+		description: descriptionLog,
 	});
 
 	try {
@@ -166,14 +173,17 @@ export const deployCompose = async ({
 export const rebuildCompose = async ({
 	composeId,
 	titleLog = "Rebuild deployment",
+	descriptionLog = "",
 }: {
 	composeId: string;
 	titleLog: string;
+	descriptionLog: string;
 }) => {
 	const compose = await findComposeById(composeId);
 	const deployment = await createDeploymentCompose({
 		composeId: composeId,
 		title: titleLog,
+		description: descriptionLog,
 	});
 
 	try {

server/api/services/deployment.ts

@@ -60,6 +60,7 @@ export const createDeployment = async (
 				title: deployment.title || "Deployment",
 				status: "running",
 				logPath: logFilePath,
+				description: deployment.description || "",
 			})
 			.returning();
 		if (deploymentCreate.length === 0 || !deploymentCreate[0]) {
@@ -100,6 +101,7 @@ export const createDeploymentCompose = async (
 			.values({
 				composeId: deployment.composeId,
 				title: deployment.title || "Deployment",
+				description: deployment.description || "",
 				status: "running",
 				logPath: logFilePath,
 			})

server/api/services/domain.ts

@@ -1,9 +1,15 @@
 import { db } from "@/server/db";
-import { type apiCreateDomain, domains } from "@/server/db/schema";
+import {
+	type apiCreateDomain,
+	type apiFindDomainByApplication,
+	domains,
+} from "@/server/db/schema";
 import { TRPCError } from "@trpc/server";
 import { eq } from "drizzle-orm";
 import { findApplicationById } from "./application";
 import { manageDomain } from "@/server/utils/traefik/domain";
+import { findAdmin } from "./admin";
+import { generateRandomDomain } from "@/templates/utils";
 
 export type Domain = typeof domains.$inferSelect;
 
@@ -29,6 +35,58 @@ export const createDomain = async (input: typeof apiCreateDomain._type) => {
 		await manageDomain(application, domain);
 	});
 };
+
+export const generateDomain = async (
+	input: typeof apiFindDomainByApplication._type,
+) => {
+	const application = await findApplicationById(input.applicationId);
+	const admin = await findAdmin();
+	const domain = await createDomain({
+		applicationId: application.applicationId,
+		host: generateRandomDomain({
+			serverIp: admin.serverIp || "",
+			projectName: application.appName,
+		}),
+		port: 3000,
+		certificateType: "none",
+		https: false,
+		path: "/",
+	});
+
+	return domain;
+};
+
+export const generateWildcard = async (
+	input: typeof apiFindDomainByApplication._type,
+) => {
+	const application = await findApplicationById(input.applicationId);
+	const admin = await findAdmin();
+
+	if (!admin.host) {
+		throw new TRPCError({
+			code: "BAD_REQUEST",
+			message: "We need a host to generate a wildcard domain",
+		});
+	}
+	const domain = await createDomain({
+		applicationId: application.applicationId,
+		host: generateWildcardDomain(application.appName, admin.host || ""),
+		port: 3000,
+		certificateType: "none",
+		https: false,
+		path: "/",
+	});
+
+	return domain;
+};
+
+export const generateWildcardDomain = (
+	appName: string,
+	serverDomain: string,
+) => {
+	return `${appName}-${serverDomain}`;
+};
+
 export const findDomainById = async (domainId: string) => {
 	const domain = await db.query.domains.findFirst({
 		where: eq(domains.domainId, domainId),

server/api/services/mariadb.ts

@@ -6,10 +6,14 @@ import { pullImage } from "@/server/utils/docker/utils";
 import { TRPCError } from "@trpc/server";
 import { eq, getTableColumns } from "drizzle-orm";
 import { validUniqueServerAppName } from "./project";
+import { generateAppName } from "@/server/db/schema/utils";
+import { generatePassword } from "@/templates/utils";
 
 export type Mariadb = typeof mariadb.$inferSelect;
 
 export const createMariadb = async (input: typeof apiCreateMariaDB._type) => {
+	input.appName =
+		`${input.appName}-${generatePassword(6)}` || generateAppName("mariadb");
 	if (input.appName) {
 		const valid = await validUniqueServerAppName(input.appName);
 

server/api/services/mongo.ts

@@ -6,10 +6,14 @@ import { pullImage } from "@/server/utils/docker/utils";
 import { TRPCError } from "@trpc/server";
 import { eq, getTableColumns } from "drizzle-orm";
 import { validUniqueServerAppName } from "./project";
+import { generateAppName } from "@/server/db/schema/utils";
+import { generatePassword } from "@/templates/utils";
 
 export type Mongo = typeof mongo.$inferSelect;
 
 export const createMongo = async (input: typeof apiCreateMongo._type) => {
+	input.appName =
+		`${input.appName}-${generatePassword(6)}` || generateAppName("postgres");
 	if (input.appName) {
 		const valid = await validUniqueServerAppName(input.appName);
 

server/api/services/mysql.ts

@@ -6,10 +6,15 @@ import { pullImage } from "@/server/utils/docker/utils";
 import { TRPCError } from "@trpc/server";
 import { eq, getTableColumns } from "drizzle-orm";
 import { validUniqueServerAppName } from "./project";
+import { generatePassword } from "@/templates/utils";
+import { generateAppName } from "@/server/db/schema/utils";
 
 export type MySql = typeof mysql.$inferSelect;
 
 export const createMysql = async (input: typeof apiCreateMySql._type) => {
+	input.appName =
+		`${input.appName}-${generatePassword(6)}` || generateAppName("mysql");
+
 	if (input.appName) {
 		const valid = await validUniqueServerAppName(input.appName);
 

server/api/services/postgres.ts

@@ -6,10 +6,14 @@ import { pullImage } from "@/server/utils/docker/utils";
 import { TRPCError } from "@trpc/server";
 import { eq, getTableColumns } from "drizzle-orm";
 import { validUniqueServerAppName } from "./project";
+import { generatePassword } from "@/templates/utils";
+import { generateAppName } from "@/server/db/schema/utils";
 
 export type Postgres = typeof postgres.$inferSelect;
 
 export const createPostgres = async (input: typeof apiCreatePostgres._type) => {
+	input.appName =
+		`${input.appName}-${generatePassword(6)}` || generateAppName("postgres");
 	if (input.appName) {
 		const valid = await validUniqueServerAppName(input.appName);
 

server/api/services/redis.ts

@@ -6,11 +6,15 @@ import { pullImage } from "@/server/utils/docker/utils";
 import { TRPCError } from "@trpc/server";
 import { eq } from "drizzle-orm";
 import { validUniqueServerAppName } from "./project";
+import { generateAppName } from "@/server/db/schema/utils";
+import { generatePassword } from "@/templates/utils";
 
 export type Redis = typeof redis.$inferSelect;
 
 // https://github.com/drizzle-team/drizzle-orm/discussions/1483#discussioncomment-7523881
 export const createRedis = async (input: typeof apiCreateRedis._type) => {
+	input.appName =
+		`${input.appName}-${generatePassword(6)}` || generateAppName("redis");
 	if (input.appName) {
 		const valid = await validUniqueServerAppName(input.appName);
 

server/api/trpc.ts

@@ -15,6 +15,8 @@ import superjson from "superjson";
 import { ZodError } from "zod";
 import { validateRequest } from "../auth/auth";
 import type { Session, User } from "lucia";
+import { validateBearerToken } from "../auth/token";
+import type { OpenApiMeta } from "@dokploy/trpc-openapi";
 
 /**
  * 1. CONTEXT
@@ -59,9 +61,15 @@ const createInnerTRPCContext = (opts: CreateContextOptions) => {
  */
 export const createTRPCContext = async (opts: CreateNextContextOptions) => {
 	const { req, res } = opts;
-	// const sessionId = lucia.readSessionCookie(req.headers.cookie ?? "");
-	const { session, user } = await validateRequest(req, res);
-	user;
+
+	let { session, user } = await validateBearerToken(req);
+
+	if (!session) {
+		const cookieResult = await validateRequest(req, res);
+		session = cookieResult.session;
+		user = cookieResult.user;
+	}
+
 	return createInnerTRPCContext({
 		req,
 		res,
@@ -88,19 +96,22 @@ export const createTRPCContext = async (opts: CreateNextContextOptions) => {
  * errors on the backend.
  */
 
-const t = initTRPC.context<typeof createTRPCContext>().create({
-	transformer: superjson,
-	errorFormatter({ shape, error }) {
-		return {
-			...shape,
-			data: {
-				...shape.data,
-				zodError:
-					error.cause instanceof ZodError ? error.cause.flatten() : null,
-			},
-		};
-	},
-});
+const t = initTRPC
+	.meta<OpenApiMeta>()
+	.context<typeof createTRPCContext>()
+	.create({
+		transformer: superjson,
+		errorFormatter({ shape, error }) {
+			return {
+				...shape,
+				data: {
+					...shape.data,
+					zodError:
+						error.cause instanceof ZodError ? error.cause.flatten() : null,
+				},
+			};
+		},
+	});
 
 /**
  * 3. ROUTER & PROCEDURE (THE IMPORTANT BIT)
@@ -147,6 +158,20 @@ export const protectedProcedure = t.procedure.use(({ ctx, next }) => {
 	});
 });
 
+export const cliProcedure = t.procedure.use(({ ctx, next }) => {
+	if (!ctx.session || !ctx.user || ctx.user.rol !== "admin") {
+		throw new TRPCError({ code: "UNAUTHORIZED" });
+	}
+	return next({
+		ctx: {
+			// infers the `session` as non-nullable
+			session: ctx.session,
+			user: ctx.user,
+			// session: { ...ctx.session, user: ctx.user },
+		},
+	});
+});
+
 export const adminProcedure = t.procedure.use(({ ctx, next }) => {
 	if (!ctx.session || !ctx.user || ctx.user.rol !== "admin") {
 		throw new TRPCError({ code: "UNAUTHORIZED" });

server/auth/auth.ts

@@ -33,14 +33,17 @@ declare module "lucia" {
 	}
 }
 
+export type ReturnValidateToken = Promise<{
+	user: (User & { authId: string }) | null;
+	session: Session | null;
+}>;
+
 export async function validateRequest(
 	req: IncomingMessage,
 	res: ServerResponse,
-): Promise<{
-	user: (User & { authId: string }) | null;
-	session: Session | null;
-}> {
+): ReturnValidateToken {
 	const sessionId = lucia.readSessionCookie(req.headers.cookie ?? "");
+
 	if (!sessionId) {
 		return {
 			user: null,

server/auth/token.ts

@@ -0,0 +1,48 @@
+import { Lucia } from "lucia/dist/core.js";
+import type { IncomingMessage } from "node:http";
+import { TimeSpan } from "lucia";
+import { adapter, type ReturnValidateToken } from "./auth";
+
+export const luciaToken = new Lucia(adapter, {
+	sessionCookie: {
+		attributes: {
+			secure: false,
+		},
+	},
+	sessionExpiresIn: new TimeSpan(365, "d"),
+	getUserAttributes: (attributes) => {
+		return {
+			email: attributes.email,
+			rol: attributes.rol,
+			secret: attributes.secret !== null,
+		};
+	},
+});
+
+export const validateBearerToken = async (
+	req: IncomingMessage,
+): ReturnValidateToken => {
+	const authorizationHeader = req.headers.authorization;
+	const sessionId = luciaToken.readBearerToken(authorizationHeader ?? "");
+	if (!sessionId) {
+		return {
+			user: null,
+			session: null,
+		};
+	}
+	const result = await luciaToken.validateSession(sessionId);
+	return {
+		session: result.session,
+		...((result.user && {
+			user: {
+				authId: result.user.id,
+				email: result.user.email,
+				rol: result.user.rol,
+				id: result.user.id,
+				secret: result.user.secret,
+			},
+		}) || {
+			user: null,
+		}),
+	};
+};

server/db/schema/application.ts

@@ -308,17 +308,12 @@ const createSchema = createInsertSchema(applications, {
 	networkSwarm: NetworkSwarmSchema.nullable(),
 });
 
-export const apiCreateApplication = createSchema
-	.pick({
-		name: true,
-		appName: true,
-		description: true,
-		projectId: true,
-	})
-	.transform((data) => ({
-		...data,
-		appName: `${data.appName}-${generatePassword(6)}` || generateAppName("app"),
-	}));
+export const apiCreateApplication = createSchema.pick({
+	name: true,
+	appName: true,
+	description: true,
+	projectId: true,
+});
 
 export const apiFindOneApplication = createSchema
 	.pick({

server/db/schema/auth.ts

@@ -43,6 +43,7 @@ export const auth = pgTable("auth", {
 	rol: roles("rol").notNull(),
 	image: text("image").$defaultFn(() => generateRandomImage()),
 	secret: text("secret"),
+	token: text("token"),
 	is2FAEnabled: boolean("is2FAEnabled").notNull().default(false),
 	createdAt: text("createdAt")
 		.notNull()

server/db/schema/compose.ts

@@ -75,19 +75,13 @@ const createSchema = createInsertSchema(compose, {
 	composeType: z.enum(["docker-compose", "stack"]).optional(),
 });
 
-export const apiCreateCompose = createSchema
-	.pick({
-		name: true,
-		description: true,
-		projectId: true,
-		composeType: true,
-		appName: true,
-	})
-	.transform((data) => ({
-		...data,
-		appName:
-			`${data.appName}-${generatePassword(6)}` || generateAppName("compose"),
-	}));
+export const apiCreateCompose = createSchema.pick({
+	name: true,
+	description: true,
+	projectId: true,
+	composeType: true,
+	appName: true,
+});
 
 export const apiCreateComposeByTemplate = createSchema
 	.pick({

server/db/schema/deployment.ts

@@ -18,6 +18,7 @@ export const deployments = pgTable("deployment", {
 		.primaryKey()
 		.$defaultFn(() => nanoid()),
 	title: text("title").notNull(),
+	description: text("description"),
 	status: deploymentStatus("status").default("running"),
 	logPath: text("logPath").notNull(),
 	applicationId: text("applicationId").references(
@@ -49,6 +50,7 @@ const schema = createInsertSchema(deployments, {
 	logPath: z.string().min(1),
 	applicationId: z.string(),
 	composeId: z.string(),
+	description: z.string().optional(),
 });
 
 export const apiCreateDeployment = schema
@@ -57,6 +59,7 @@ export const apiCreateDeployment = schema
 		status: true,
 		logPath: true,
 		applicationId: true,
+		description: true,
 	})
 	.extend({
 		applicationId: z.string().min(1),
@@ -68,6 +71,7 @@ export const apiCreateDeploymentCompose = schema
 		status: true,
 		logPath: true,
 		composeId: true,
+		description: true,
 	})
 	.extend({
 		composeId: z.string().min(1),

server/db/schema/mariadb.ts

@@ -89,12 +89,7 @@ export const apiCreateMariaDB = createSchema
 		databaseUser: true,
 		databasePassword: true,
 	})
-	.required()
-	.transform((data) => ({
-		...data,
-		appName:
-			`${data.appName}-${generatePassword(6)}` || generateAppName("mariadb"),
-	}));
+	.required();
 
 export const apiFindOneMariaDB = createSchema
 	.pick({

server/db/schema/mongo.ts

@@ -81,12 +81,7 @@ export const apiCreateMongo = createSchema
 		databaseUser: true,
 		databasePassword: true,
 	})
-	.required()
-	.transform((data) => ({
-		...data,
-		appName:
-			`${data.appName}-${generatePassword(6)}` || generateAppName("postgres"),
-	}));
+	.required();
 
 export const apiFindOneMongo = createSchema
 	.pick({

server/db/schema/mysql.ts

@@ -87,12 +87,7 @@ export const apiCreateMySql = createSchema
 		databasePassword: true,
 		databaseRootPassword: true,
 	})
-	.required()
-	.transform((data) => ({
-		...data,
-		appName:
-			`${data.appName}-${generatePassword(6)}` || generateAppName("mysql"),
-	}));
+	.required();
 
 export const apiFindOneMySql = createSchema
 	.pick({

server/db/schema/postgres.ts

@@ -83,12 +83,7 @@ export const apiCreatePostgres = createSchema
 		projectId: true,
 		description: true,
 	})
-	.required()
-	.transform((data) => ({
-		...data,
-		appName:
-			`${data.appName}-${generatePassword(6)}` || generateAppName("postgres"),
-	}));
+	.required();
 
 export const apiFindOnePostgres = createSchema
 	.pick({

server/db/schema/redis.ts

@@ -76,12 +76,7 @@ export const apiCreateRedis = createSchema
 		projectId: true,
 		description: true,
 	})
-	.required()
-	.transform((data) => ({
-		...data,
-		appName:
-			`${data.appName}-${generatePassword(6)}` || generateAppName("redis"),
-	}));
+	.required();
 
 export const apiFindOneRedis = createSchema
 	.pick({

server/db/schema/session.ts

@@ -1,13 +1,6 @@
 import { auth } from "./auth";
 import { pgTable, text, timestamp } from "drizzle-orm/pg-core";
 
-// export const sessionTable = sqliteTable("session", {
-//   id: text("id").notNull().primaryKey(),
-//   userId: text("user_id")
-//     .notNull()
-//     .references(() => users.id),
-//   expiresAt: integer("expires_at").notNull(),
-// });
 export const sessionTable = pgTable("session", {
 	id: text("id").primaryKey(),
 	userId: text("user_id")

server/db/schema/user.ts

@@ -32,6 +32,7 @@ export const users = pgTable("user", {
 	canDeleteProjects: boolean("canDeleteProjects").notNull().default(false),
 	canDeleteServices: boolean("canDeleteServices").notNull().default(false),
 	canAccessToDocker: boolean("canAccessToDocker").notNull().default(false),
+	canAccessToAPI: boolean("canAccessToAPI").notNull().default(false),
 	canAccessToTraefikFiles: boolean("canAccessToTraefikFiles")
 		.notNull()
 		.default(false),
@@ -105,6 +106,7 @@ export const apiAssignPermissions = createSchema
 		accesedServices: true,
 		canAccessToTraefikFiles: true,
 		canAccessToDocker: true,
+		canAccessToAPI: true,
 	})
 	.required();
 

server/queues/deployments-queue.ts

@@ -10,12 +10,14 @@ type DeployJob =
 	| {
 			applicationId: string;
 			titleLog: string;
+			descriptionLog: string;
 			type: "deploy" | "redeploy";
 			applicationType: "application";
 	  }
 	| {
 			composeId: string;
 			titleLog: string;
+			descriptionLog: string;
 			type: "deploy" | "redeploy";
 			applicationType: "compose";
 	  };
@@ -31,11 +33,13 @@ export const deploymentWorker = new Worker(
 					await rebuildApplication({
 						applicationId: job.data.applicationId,
 						titleLog: job.data.titleLog,
+						descriptionLog: job.data.descriptionLog,
 					});
 				} else if (job.data.type === "deploy") {
 					await deployApplication({
 						applicationId: job.data.applicationId,
 						titleLog: job.data.titleLog,
+						descriptionLog: job.data.descriptionLog,
 					});
 				}
 			} else if (job.data.applicationType === "compose") {
@@ -43,11 +47,13 @@ export const deploymentWorker = new Worker(
 					await deployCompose({
 						composeId: job.data.composeId,
 						titleLog: job.data.titleLog,
+						descriptionLog: job.data.descriptionLog,
 					});
 				} else if (job.data.type === "redeploy") {
 					await rebuildCompose({
 						composeId: job.data.composeId,
 						titleLog: job.data.titleLog,
+						descriptionLog: job.data.descriptionLog,
 					});
 				}
 			}

server/utils/databases/mariadb.ts

@@ -63,6 +63,9 @@ export const buildMariadb = async (mariadb: MariadbWithMounts) => {
 			Resources: {
 				...resources,
 			},
+			Placement: {
+				Constraints: ["node.role==manager"],
+			},
 		},
 		Mode: {
 			Replicated: {

server/utils/databases/mongo.ts

@@ -63,6 +63,9 @@ export const buildMongo = async (mongo: MongoWithMounts) => {
 			Resources: {
 				...resources,
 			},
+			Placement: {
+				Constraints: ["node.role==manager"],
+			},
 		},
 		Mode: {
 			Replicated: {

server/utils/databases/mysql.ts

@@ -69,6 +69,9 @@ export const buildMysql = async (mysql: MysqlWithMounts) => {
 			Resources: {
 				...resources,
 			},
+			Placement: {
+				Constraints: ["node.role==manager"],
+			},
 		},
 		Mode: {
 			Replicated: {

server/utils/databases/postgres.ts

@@ -63,6 +63,9 @@ export const buildPostgres = async (postgres: PostgresWithMounts) => {
 			Resources: {
 				...resources,
 			},
+			Placement: {
+				Constraints: ["node.role==manager"],
+			},
 		},
 		Mode: {
 			Replicated: {

server/utils/databases/redis.ts

@@ -50,17 +50,19 @@ export const buildRedis = async (redis: RedisWithMounts) => {
 				Image: dockerImage,
 				Env: envVariables,
 				Mounts: [...volumesMount, ...bindsMount, ...filesMount],
-				...(command
-					? {
-							Command: ["/bin/sh"],
-							Args: ["-c", command],
-						}
-					: {}),
+				Command: ["/bin/sh"],
+				Args: [
+					"-c",
+					command ? command : `redis-server --requirepass ${databasePassword}`,
+				],
 			},
 			Networks: [{ Target: "dokploy-network" }],
 			Resources: {
 				...resources,
 			},
+			Placement: {
+				Constraints: ["node.role==manager"],
+			},
 		},
 		Mode: {
 			Replicated: {

styles/globals.css

@@ -158,3 +158,14 @@
 .animate-heartbeat {
   animation: heartbeat 2.5s infinite;
 }
+@media (prefers-color-scheme: dark) {
+  .swagger-ui {
+    background-color: white;
+  }
+
+  .swagger-ui .info{
+    margin: 0px !important;
+    padding-top: 1rem !important;
+  }
+
+}