Merge branch 'canary' into feature/node-cluster-logs

apps/dokploy/components/dashboard/settings/web-server/docker-terminal-modal.tsx

@@ -80,7 +80,10 @@ export const DockerTerminalModal = ({ children, appName, serverId }: Props) => {
 	return (
 		<Dialog open={mainDialogOpen} onOpenChange={handleMainDialogOpenChange}>
 			<DialogTrigger asChild>{children}</DialogTrigger>
-			<DialogContent className="max-h-[85vh]    overflow-y-auto sm:max-w-7xl">
+			<DialogContent
+				className="max-h-[85vh]    overflow-y-auto sm:max-w-7xl"
+				onEscapeKeyDown={(event) => event.preventDefault()}
+			>
 				<DialogHeader>
 					<DialogTitle>Docker Terminal</DialogTitle>
 					<DialogDescription>
@@ -119,7 +122,7 @@ export const DockerTerminalModal = ({ children, appName, serverId }: Props) => {
 					containerId={containerId || "select-a-container"}
 				/>
 				<Dialog open={confirmDialogOpen} onOpenChange={setConfirmDialogOpen}>
-					<DialogContent>
+					<DialogContent onEscapeKeyDown={(event) => event.preventDefault()}>
 						<DialogHeader>
 							<DialogTitle>
 								Are you sure you want to close the terminal?

apps/dokploy/components/dashboard/settings/web-server/edit-traefik-env.tsx

@@ -80,8 +80,10 @@ export const EditTraefikEnv = ({ children, serverId }: Props) => {
 			<DialogTrigger asChild>{children}</DialogTrigger>
 			<DialogContent className="max-h-screen  overflow-y-auto sm:max-w-4xl">
 				<DialogHeader>
-					<DialogTitle>Update Traefik Env</DialogTitle>
-					<DialogDescription>Update the traefik env</DialogDescription>
+					<DialogTitle>Update Traefik Environment</DialogTitle>
+					<DialogDescription>
+						Update the traefik environment variables
+					</DialogDescription>
 				</DialogHeader>
 				{isError && <AlertBlock type="error">{error?.message}</AlertBlock>}
 

apps/dokploy/components/dashboard/settings/web-server/manage-traefik-ports.tsx

@@ -0,0 +1,303 @@
+import { AlertBlock } from "@/components/shared/alert-block";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+} from "@/components/ui/dialog";
+import {
+	Form,
+	FormControl,
+	FormField,
+	FormItem,
+	FormLabel,
+	FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from "@/components/ui/select";
+import { api } from "@/utils/api";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { ArrowRightLeft, Plus, Trash2 } from "lucide-react";
+import { useTranslation } from "next-i18next";
+import type React from "react";
+import { useEffect, useState } from "react";
+import { useFieldArray, useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
+
+interface Props {
+	children: React.ReactNode;
+	serverId?: string;
+}
+
+const PortSchema = z.object({
+	targetPort: z.number().min(1, "Target port is required"),
+	publishedPort: z.number().min(1, "Published port is required"),
+	publishMode: z.enum(["ingress", "host"]),
+});
+
+const TraefikPortsSchema = z.object({
+	ports: z.array(PortSchema),
+});
+
+type TraefikPortsForm = z.infer<typeof TraefikPortsSchema>;
+
+export const ManageTraefikPorts = ({ children, serverId }: Props) => {
+	const { t } = useTranslation("settings");
+	const [open, setOpen] = useState(false);
+
+	const form = useForm<TraefikPortsForm>({
+		resolver: zodResolver(TraefikPortsSchema),
+		defaultValues: {
+			ports: [],
+		},
+	});
+
+	const { fields, append, remove } = useFieldArray({
+		control: form.control,
+		name: "ports",
+	});
+
+	const { data: currentPorts, refetch: refetchPorts } =
+		api.settings.getTraefikPorts.useQuery({
+			serverId,
+		});
+
+	const { mutateAsync: updatePorts, isLoading } =
+		api.settings.updateTraefikPorts.useMutation({
+			onSuccess: () => {
+				refetchPorts();
+			},
+		});
+
+	useEffect(() => {
+		if (currentPorts) {
+			form.reset({ ports: currentPorts });
+		}
+	}, [currentPorts, form]);
+
+	const handleAddPort = () => {
+		append({ targetPort: 0, publishedPort: 0, publishMode: "host" });
+	};
+
+	const onSubmit = async (data: TraefikPortsForm) => {
+		try {
+			await updatePorts({
+				serverId,
+				additionalPorts: data.ports,
+			});
+			toast.success(t("settings.server.webServer.traefik.portsUpdated"));
+			setOpen(false);
+		} catch (error) {
+			toast.error(t("settings.server.webServer.traefik.portsUpdateError"));
+		}
+	};
+
+	return (
+		<>
+			<div onClick={() => setOpen(true)}>{children}</div>
+			<Dialog open={open} onOpenChange={setOpen}>
+				<DialogContent className="sm:max-w-3xl">
+					<DialogHeader>
+						<DialogTitle className="flex items-center gap-2 text-xl">
+							{t("settings.server.webServer.traefik.managePorts")}
+						</DialogTitle>
+						<DialogDescription className="text-base w-full">
+							<div className="flex items-center justify-between">
+								{t("settings.server.webServer.traefik.managePortsDescription")}
+								<Button
+									onClick={handleAddPort}
+									variant="default"
+									className="gap-2"
+								>
+									<Plus className="h-4 w-4" />
+									Add Mapping
+								</Button>
+							</div>
+						</DialogDescription>
+					</DialogHeader>
+
+					<Form {...form}>
+						<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
+							<div className="grid gap-6 py-4">
+								{fields.length === 0 ? (
+									<div className="flex w-full flex-col items-center justify-center gap-3 pt-10">
+										<ArrowRightLeft className="size-8 text-muted-foreground" />
+										<span className="text-base text-muted-foreground text-center">
+											No port mappings configured
+										</span>
+										<p className="text-sm text-muted-foreground text-center">
+											Add one to get started
+										</p>
+									</div>
+								) : (
+									<div className="grid gap-4">
+										{fields.map((field, index) => (
+											<Card key={field.id}>
+												<CardContent className="grid grid-cols-[1fr_1fr_1.5fr_auto] gap-4 p-4 transparent">
+													<FormField
+														control={form.control}
+														name={`ports.${index}.targetPort`}
+														render={({ field }) => (
+															<FormItem>
+																<FormLabel className="text-sm font-medium text-muted-foreground">
+																	{t(
+																		"settings.server.webServer.traefik.targetPort",
+																	)}
+																</FormLabel>
+																<FormControl>
+																	<Input
+																		type="number"
+																		{...field}
+																		onChange={(e) =>
+																			field.onChange(Number(e.target.value))
+																		}
+																		className="w-full dark:bg-black"
+																		placeholder="e.g. 8080"
+																	/>
+																</FormControl>
+																<FormMessage />
+															</FormItem>
+														)}
+													/>
+
+													<FormField
+														control={form.control}
+														name={`ports.${index}.publishedPort`}
+														render={({ field }) => (
+															<FormItem>
+																<FormLabel className="text-sm font-medium text-muted-foreground">
+																	{t(
+																		"settings.server.webServer.traefik.publishedPort",
+																	)}
+																</FormLabel>
+																<FormControl>
+																	<Input
+																		type="number"
+																		{...field}
+																		onChange={(e) =>
+																			field.onChange(Number(e.target.value))
+																		}
+																		className="w-full dark:bg-black"
+																		placeholder="e.g. 80"
+																	/>
+																</FormControl>
+																<FormMessage />
+															</FormItem>
+														)}
+													/>
+
+													<FormField
+														control={form.control}
+														name={`ports.${index}.publishMode`}
+														render={({ field }) => (
+															<FormItem>
+																<FormLabel className="text-sm font-medium text-muted-foreground">
+																	{t(
+																		"settings.server.webServer.traefik.publishMode",
+																	)}
+																</FormLabel>
+																<Select
+																	onValueChange={field.onChange}
+																	value={field.value}
+																>
+																	<FormControl>
+																		<SelectTrigger className="dark:bg-black">
+																			<SelectValue />
+																		</SelectTrigger>
+																	</FormControl>
+																	<SelectContent>
+																		<SelectItem value="host">
+																			Host Mode
+																		</SelectItem>
+																		<SelectItem value="ingress">
+																			Ingress Mode
+																		</SelectItem>
+																	</SelectContent>
+																</Select>
+																<FormMessage />
+															</FormItem>
+														)}
+													/>
+
+													<div className="flex items-end">
+														<Button
+															onClick={() => remove(index)}
+															variant="ghost"
+															size="icon"
+															className="text-muted-foreground hover:text-destructive"
+														>
+															<Trash2 className="h-4 w-4" />
+														</Button>
+													</div>
+												</CardContent>
+											</Card>
+										))}
+									</div>
+								)}
+
+								{fields.length > 0 && (
+									<AlertBlock type="info">
+										<div className="flex flex-col gap-2">
+											<span className="text-sm">
+												<strong>
+													Each port mapping defines how external traffic reaches
+													your containers.
+												</strong>
+												<ul className="pt-2">
+													<li>
+														<strong>Host Mode:</strong> Directly binds the port
+														to the host machine.
+														<ul className="p-2 list-inside list-disc">
+															<li>
+																Best for single-node deployments or when you
+																need guaranteed port availability.
+															</li>
+														</ul>
+													</li>
+													<li>
+														<strong>Ingress Mode:</strong> Routes through Docker
+														Swarm's load balancer.
+														<ul className="p-2 list-inside list-disc">
+															<li>
+																Recommended for multi-node deployments and
+																better scalability.
+															</li>
+														</ul>
+													</li>
+												</ul>
+											</span>
+										</div>
+									</AlertBlock>
+								)}
+							</div>
+
+							<DialogFooter>
+								<Button
+									type="submit"
+									variant="default"
+									className="text-sm"
+									isLoading={isLoading}
+								>
+									Save
+								</Button>
+							</DialogFooter>
+						</form>
+					</Form>
+				</DialogContent>
+			</Dialog>
+		</>
+	);
+};
+
+export default ManageTraefikPorts;

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

@@ -4,6 +4,7 @@ import { useEffect, useRef } from "react";
 import { FitAddon } from "xterm-addon-fit";
 import "@xterm/xterm/css/xterm.css";
 import { AttachAddon } from "@xterm/addon-attach";
+import { useTheme } from "next-themes";
 
 interface Props {
 	id: string;
@@ -12,7 +13,7 @@ interface Props {
 
 export const Terminal: React.FC<Props> = ({ id, serverId }) => {
 	const termRef = useRef(null);
-
+	const { resolvedTheme } = useTheme();
 	useEffect(() => {
 		const container = document.getElementById(id);
 		if (container) {
@@ -23,8 +24,9 @@ export const Terminal: React.FC<Props> = ({ id, serverId }) => {
 			lineHeight: 1.4,
 			convertEol: true,
 			theme: {
-				cursor: "transparent",
-				background: "transparent",
+				cursor: resolvedTheme === "light" ? "#000000" : "transparent",
+				background: "rgba(0, 0, 0, 0)",
+				foreground: "currentColor",
 			},
 		});
 		const addonFit = new FitAddon();

apps/dokploy/components/dashboard/settings/web-server/toggle-auto-check-updates.tsx

@@ -0,0 +1,28 @@
+import { Label } from "@/components/ui/label";
+import { Switch } from "@/components/ui/switch";
+import { useState } from "react";
+
+export const ToggleAutoCheckUpdates = ({ disabled }: { disabled: boolean }) => {
+	const [enabled, setEnabled] = useState<boolean>(
+		localStorage.getItem("enableAutoCheckUpdates") === "true",
+	);
+
+	const handleToggle = (checked: boolean) => {
+		setEnabled(checked);
+		localStorage.setItem("enableAutoCheckUpdates", String(checked));
+	};
+
+	return (
+		<div className="flex items-center gap-4">
+			<Switch
+				checked={enabled}
+				onCheckedChange={handleToggle}
+				id="autoCheckUpdatesToggle"
+				disabled={disabled}
+			/>
+			<Label className="text-primary" htmlFor="autoCheckUpdatesToggle">
+				Automatically check for new updates
+			</Label>
+		</div>
+	);
+};

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

@@ -3,91 +3,224 @@ import { Button } from "@/components/ui/button";
 import {
 	Dialog,
 	DialogContent,
-	DialogDescription,
-	DialogHeader,
 	DialogTitle,
 	DialogTrigger,
 } from "@/components/ui/dialog";
 import { api } from "@/utils/api";
-import { RefreshCcw } from "lucide-react";
+import {
+	Bug,
+	Download,
+	Info,
+	RefreshCcw,
+	Server,
+	ServerCrash,
+	Sparkles,
+	Stars,
+} from "lucide-react";
 import Link from "next/link";
 import { useState } from "react";
 import { toast } from "sonner";
+import { ToggleAutoCheckUpdates } from "./toggle-auto-check-updates";
 import { UpdateWebServer } from "./update-webserver";
 
 export const UpdateServer = () => {
-	const [isUpdateAvailable, setIsUpdateAvailable] = useState<null | boolean>(
-		null,
-	);
-	const { mutateAsync: checkAndUpdateImage, isLoading } =
-		api.settings.checkAndUpdateImage.useMutation();
+	const [hasCheckedUpdate, setHasCheckedUpdate] = useState(false);
+	const [isUpdateAvailable, setIsUpdateAvailable] = useState(false);
+	const { mutateAsync: getUpdateData, isLoading } =
+		api.settings.getUpdateData.useMutation();
+	const { data: dokployVersion } = api.settings.getDokployVersion.useQuery();
+	const { data: releaseTag } = api.settings.getReleaseTag.useQuery();
 	const [isOpen, setIsOpen] = useState(false);
+	const [latestVersion, setLatestVersion] = useState("");
+
+	const handleCheckUpdates = async () => {
+		try {
+			const updateData = await getUpdateData();
+			const versionToUpdate = updateData.latestVersion || "";
+			setHasCheckedUpdate(true);
+			setIsUpdateAvailable(updateData.updateAvailable);
+			setLatestVersion(versionToUpdate);
+
+			if (updateData.updateAvailable) {
+				toast.success(versionToUpdate, {
+					description: "New version available!",
+				});
+			} else {
+				toast.info("No updates available");
+			}
+		} catch (error) {
+			console.error("Error checking for updates:", error);
+			setHasCheckedUpdate(true);
+			setIsUpdateAvailable(false);
+			toast.error(
+				"An error occurred while checking for updates, please try again.",
+			);
+		}
+	};
 
 	return (
 		<Dialog open={isOpen} onOpenChange={setIsOpen}>
 			<DialogTrigger asChild>
-				<Button variant="secondary">
-					<RefreshCcw className="h-4 w-4" />
+				<Button variant="secondary" className="gap-2">
+					<Sparkles className="h-4 w-4" />
 					Updates
 				</Button>
 			</DialogTrigger>
-			<DialogContent className="sm:m:max-w-lg ">
-				<DialogHeader>
-					<DialogTitle>Web Server Update</DialogTitle>
-					<DialogDescription>
-						Check new releases and update your dokploy
-					</DialogDescription>
-				</DialogHeader>
+			<DialogContent className="max-w-lg p-6">
+				<div className="flex items-center justify-between mb-8">
+					<DialogTitle className="text-2xl font-semibold">
+						Web Server Update
+					</DialogTitle>
+					{dokployVersion && (
+						<div className="flex items-center gap-1.5 rounded-full px-3 py-1 mr-2 bg-muted">
+							<Server className="h-4 w-4 text-muted-foreground" />
+							<span className="text-sm text-muted-foreground">
+								{dokployVersion} | {releaseTag}
+							</span>
+						</div>
+					)}
+				</div>
 
-				<div className="flex flex-col gap-4">
-					<span className="text-sm text-muted-foreground">
-						We suggest to update your dokploy to the latest version only if you:
-					</span>
-					<ul className="list-disc list-inside text-sm text-muted-foreground">
-						<li>Want to try the latest features</li>
-						<li>Some bug that is blocking to use some features</li>
-					</ul>
-					<AlertBlock type="info">
-						We recommend checking the latest version for any breaking changes
-						before updating. Go to{" "}
-						<Link
-							href="https://github.com/Dokploy/dokploy/releases"
-							target="_blank"
-							className="text-foreground"
-						>
-							Dokploy Releases
-						</Link>{" "}
-						to check the latest version.
-					</AlertBlock>
+				{/* Initial state */}
+				{!hasCheckedUpdate && (
+					<div className="mb-8">
+						<p className="text text-muted-foreground">
+							Check for new releases and update Dokploy.
+							<br />
+							<br />
+							We recommend checking for updates regularly to ensure you have the
+							latest features and security improvements.
+						</p>
+					</div>
+				)}
 
-					<div className="w-full flex flex-col gap-4">
-						{isUpdateAvailable === false && (
-							<div className="flex flex-col items-center gap-3">
-								<RefreshCcw className="size-6 self-center text-muted-foreground" />
-								<span className="text-sm text-muted-foreground">
-									You are using the latest version
+				{/* Update available state */}
+				{isUpdateAvailable && latestVersion && (
+					<div className="mb-8">
+						<div className="inline-flex items-center gap-2 rounded-lg px-3 py-2 border border-emerald-900 bg-emerald-900 dark:bg-emerald-900/40 mb-4 w-full">
+							<div className="flex items-center gap-1.5">
+								<span className="flex h-2 w-2">
+									<span className="animate-ping absolute inline-flex h-2 w-2 rounded-full bg-emerald-400 opacity-75" />
+									<span className="relative inline-flex rounded-full h-2 w-2 bg-emerald-500" />
+								</span>
+								<Download className="h-4 w-4 text-emerald-400" />
+								<span className="text font-medium text-emerald-400 ">
+									New version available:
 								</span>
 							</div>
-						)}
+							<span className="text font-semibold text-emerald-300">
+								{latestVersion}
+							</span>
+						</div>
+
+						<div className="space-y-4 text-muted-foreground">
+							<p className="text">
+								A new version of the server software is available. Consider
+								updating if you:
+							</p>
+							<ul className="space-y-3">
+								<li className="flex items-start gap-2">
+									<Stars className="h-5 w-5 mt-0.5 text-[#5B9DFF]" />
+									<span className="text">
+										Want to access the latest features and improvements
+									</span>
+								</li>
+								<li className="flex items-start gap-2">
+									<Bug className="h-5 w-5 mt-0.5 text-[#5B9DFF]" />
+									<span className="text">
+										Are experiencing issues that may be resolved in the new
+										version
+									</span>
+								</li>
+							</ul>
+						</div>
+					</div>
+				)}
+
+				{/* Up to date state */}
+				{hasCheckedUpdate && !isUpdateAvailable && !isLoading && (
+					<div className="mb-8">
+						<div className="flex flex-col items-center gap-6 mb-6">
+							<div className="rounded-full p-4 bg-emerald-400/40">
+								<Sparkles className="h-8 w-8 text-emerald-400" />
+							</div>
+							<div className="text-center space-y-2">
+								<h3 className="text-lg font-medium">
+									You are using the latest version
+								</h3>
+								<p className="text text-muted-foreground">
+									Your server is up to date with all the latest features and
+									security improvements.
+								</p>
+							</div>
+						</div>
+					</div>
+				)}
+
+				{hasCheckedUpdate && isLoading && (
+					<div className="mb-8">
+						<div className="flex flex-col items-center gap-6 mb-6">
+							<div className="rounded-full p-4 bg-[#5B9DFF]/40 text-foreground">
+								<RefreshCcw className="h-8 w-8 animate-spin" />
+							</div>
+							<div className="text-center space-y-2">
+								<h3 className="text-lg font-medium">Checking for updates...</h3>
+								<p className="text text-muted-foreground">
+									Please wait while we pull the latest version information from
+									Docker Hub.
+								</p>
+							</div>
+						</div>
+					</div>
+				)}
+
+				{isUpdateAvailable && (
+					<div className="rounded-lg bg-[#16254D] p-4 mb-8">
+						<div className="flex gap-2">
+							<Info className="h-5 w-5 flex-shrink-0 text-[#5B9DFF]" />
+							<div className="text-[#5B9DFF]">
+								We recommend reviewing the{" "}
+								<Link
+									href="https://github.com/Dokploy/dokploy/releases"
+									target="_blank"
+									className="text-white underline hover:text-zinc-200"
+								>
+									release notes
+								</Link>{" "}
+								for any breaking changes before updating.
+							</div>
+						</div>
+					</div>
+				)}
+
+				<div className="flex items-center justify-between pt-2">
+					<ToggleAutoCheckUpdates disabled={isLoading} />
+				</div>
+
+				<div className="space-y-4 flex items-center justify-end">
+					<div className="flex items-center gap-2">
+						<Button variant="outline" onClick={() => setIsOpen(false)}>
+							Cancel
+						</Button>
 						{isUpdateAvailable ? (
 							<UpdateWebServer />
 						) : (
 							<Button
-								className="w-full"
-								onClick={async () => {
-									await checkAndUpdateImage()
-										.then(async (e) => {
-											setIsUpdateAvailable(e);
-										})
-										.catch(() => {
-											setIsUpdateAvailable(false);
-											toast.error("Error to check updates");
-										});
-									toast.success("Check updates");
-								}}
-								isLoading={isLoading}
+								variant="secondary"
+								onClick={handleCheckUpdates}
+								disabled={isLoading}
 							>
-								Check Updates
+								{isLoading ? (
+									<>
+										<RefreshCcw className="h-4 w-4 animate-spin" />
+										Checking for updates
+									</>
+								) : (
+									<>
+										<RefreshCcw className="h-4 w-4" />
+										Check for updates
+									</>
+								)}
 							</Button>
 						)}
 					</div>
@@ -96,3 +229,5 @@ export const UpdateServer = () => {
 		</Dialog>
 	);
 };
+
+export default UpdateServer;

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

@@ -11,24 +11,53 @@ import {
 } from "@/components/ui/alert-dialog";
 import { Button } from "@/components/ui/button";
 import { api } from "@/utils/api";
+import { HardDriveDownload } from "lucide-react";
 import { toast } from "sonner";
 
-export const UpdateWebServer = () => {
+interface Props {
+	isNavbar?: boolean;
+}
+
+export const UpdateWebServer = ({ isNavbar }: Props) => {
 	const { mutateAsync: updateServer, isLoading } =
 		api.settings.updateServer.useMutation();
+
+	const buttonLabel = isNavbar ? "Update available" : "Update Server";
+
+	const handleConfirm = async () => {
+		try {
+			await updateServer();
+			toast.success(
+				"The server has been updated. The page will be reloaded to reflect the changes...",
+			);
+			setTimeout(() => {
+				// Allow seeing the toast before reloading
+				window.location.reload();
+			}, 2000);
+		} catch (error) {
+			console.error("Error updating server:", error);
+			toast.error(
+				"An error occurred while updating the server, please try again.",
+			);
+		}
+	};
+
 	return (
 		<AlertDialog>
 			<AlertDialogTrigger asChild>
 				<Button
 					className="relative w-full"
-					variant="secondary"
+					variant={isNavbar ? "outline" : "secondary"}
 					isLoading={isLoading}
 				>
-					<span className="absolute -right-1 -top-2 flex h-3 w-3">
-						<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75" />
-						<span className="relative inline-flex rounded-full h-3 w-3 bg-green-500" />
-					</span>
-					Update Server
+					{!isLoading && <HardDriveDownload className="h-4 w-4" />}
+					{!isLoading && (
+						<span className="absolute -right-1 -top-2 flex h-3 w-3">
+							<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75" />
+							<span className="relative inline-flex rounded-full h-3 w-3 bg-green-500" />
+						</span>
+					)}
+					{isLoading ? "Updating..." : buttonLabel}
 				</Button>
 			</AlertDialogTrigger>
 			<AlertDialogContent>
@@ -36,19 +65,12 @@ export const UpdateWebServer = () => {
 					<AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
 					<AlertDialogDescription>
 						This action cannot be undone. This will update the web server to the
-						new version.
+						new version. The page will be reloaded once the update is finished.
 					</AlertDialogDescription>
 				</AlertDialogHeader>
 				<AlertDialogFooter>
 					<AlertDialogCancel>Cancel</AlertDialogCancel>
-					<AlertDialogAction
-						onClick={async () => {
-							await updateServer();
-							toast.success("Please reload the browser to see the changes");
-						}}
-					>
-						Confirm
-					</AlertDialogAction>
+					<AlertDialogAction onClick={handleConfirm}>Confirm</AlertDialogAction>
 				</AlertDialogFooter>
 			</AlertDialogContent>
 		</AlertDialog>