Merge pull request #2320 from Dokploy/2004-how-to-pause-log-output-in-doploy

feat(docker-logs): add pause/resume functionality for log streaming

.github/pull_request_template.md

@@ -0,0 +1,21 @@
+## What is this PR about?
+
+Please describe in a short paragraph what this PR is about.
+
+## Checklist
+
+Before submitting this PR, please make sure that:
+
+- [ ] You created a dedicated branch based on the `canary` branch.
+- [ ] You have read the suggestions in the CONTRIBUTING.md file https://github.com/Dokploy/dokploy/blob/canary/CONTRIBUTING.md#pull-request
+- [ ] You have tested this PR in your local instance.
+
+## Issues related (if applicable)
+
+Close automatically the related issues using the keywords: `closes #ISSUE_NUMBER`, `fixes #ISSUE_NUMBER`, `resolves #ISSUE_NUMBER`
+
+Example: `closes #123`
+
+## Screenshots (if applicable)
+
+If you include a video or screenshot, would be awesome so we can see the changes in action.

.github/workflows/create-pr.yml

@@ -19,17 +19,14 @@ jobs:
           fetch-depth: 0
 
       - name: Get version from package.json
-        id: package_version
         run: echo "VERSION=$(jq -r .version ./apps/dokploy/package.json)" >> $GITHUB_ENV
 
       - name: Get latest GitHub tag
-        id: latest_tag
         run: |
           LATEST_TAG=$(git ls-remote --tags origin | awk -F'/' '{print $3}' | sort -V | tail -n1)
           echo "LATEST_TAG=$LATEST_TAG" >> $GITHUB_ENV
           echo $LATEST_TAG
       - name: Compare versions
-        id: compare_versions
         run: |
           if [ "${{ env.VERSION }}" != "${{ env.LATEST_TAG }}" ]; then
             VERSION_CHANGED="true"
@@ -42,7 +39,6 @@ jobs:
           echo "Latest tag: ${{ env.LATEST_TAG }}"
           echo "Version changed: $VERSION_CHANGED"
       - name: Check if a PR already exists
-        id: check_pr
         run: |
           PR_EXISTS=$(gh pr list --state open --base main --head canary --json number --jq '. | length')
           echo "PR_EXISTS=$PR_EXISTS" >> $GITHUB_ENV

CONTRIBUTING.md

@@ -87,7 +87,8 @@ pnpm run dokploy:dev
 
 Go to http://localhost:3000 to see the development server
 
-Note: this project uses Biome. If your editor is configured to use another formatter such as Prettier, it's recommended to either change it to use Biome or turn it off.
+> [!NOTE]
+> This project uses Biome. If your editor is configured to use another formatter such as Prettier, it's recommended to either change it to use Biome or turn it off.
 
 ## Build
 
@@ -117,10 +118,10 @@ In the case you lost your password, you can reset it using the following command
 pnpm run reset-password
 ```
 
-If you want to test the webhooks on development mode using localtunnel, make sure to install `localtunnel`
+If you want to test the webhooks on development mode using localtunnel, make sure to install [`localtunnel`](https://localtunnel.app/)
 
 ```bash
-bunx lt --port 3000
+pnpm dlx localtunnel --port 3000
 ```
 
 If you run into permission issues of docker run the following command
@@ -152,7 +153,7 @@ curl -sSL "https://github.com/buildpacks/pack/releases/download/v0.35.0/pack-v0.
 
 ## Pull Request
 
-- The `main` branch is the source of truth and should always reflect the latest stable release.
+- The `canary` branch is the source of truth and should always reflect the latest stable release.
 - Create a new branch for each feature or bug fix.
 - Make sure to add tests for your changes.
 - Make sure to update the documentation for any changes Go to the [docs.dokploy.com](https://docs.dokploy.com) website to see the changes.
@@ -161,6 +162,12 @@ curl -sSL "https://github.com/buildpacks/pack/releases/download/v0.35.0/pack-v0.
 - If your pull request fixes an open issue, please reference the issue in the pull request description.
 - Once your pull request is merged, you will be automatically added as a contributor to the project.
 
+**Important Considerations for Pull Requests:**
+
+- **Focus and Scope:** Each Pull Request should ideally address a single, well-defined problem or introduce one new feature. This greatly facilitates review and reduces the chances of introducing unintended side effects.
+- **Avoid Unfocused Changes:** Please avoid submitting Pull Requests that contain only minor changes such as whitespace adjustments, IDE-generated formatting, or removal of unused variables, unless these are part of a larger, clearly defined refactor or a dedicated "cleanup" Pull Request that addresses a specific `good first issue` or maintenance task.
+- **Issue Association:** For any significant change, it's highly recommended to open an issue first to discuss the proposed solution with the community and maintainers. This ensures alignment and avoids duplicated effort. If your PR resolves an existing issue, please link it in the description (e.g., `Fixes #123`, `Closes #456`).
+
 Thank you for your contribution!
 
 ## Templates

apps/dokploy/components/dashboard/application/advanced/ports/handle-ports.tsx

@@ -1,3 +1,9 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import { PenBoxIcon, PlusIcon } from "lucide-react";
+import { useEffect, useState } from "react";
+import { useForm, useWatch } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
 import { AlertBlock } from "@/components/shared/alert-block";
 import { Button } from "@/components/ui/button";
 import {
@@ -26,12 +32,6 @@ import {
 	SelectValue,
 } from "@/components/ui/select";
 import { api } from "@/utils/api";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { PenBoxIcon, PlusIcon } from "lucide-react";
-import { useEffect, useState } from "react";
-import { useForm } from "react-hook-form";
-import { toast } from "sonner";
-import { z } from "zod";
 
 const AddPortSchema = z.object({
 	publishedPort: z.number().int().min(1).max(65535),
@@ -80,6 +80,11 @@ export const HandlePorts = ({
 		resolver: zodResolver(AddPortSchema),
 	});
 
+	const publishMode = useWatch({
+		control: form.control,
+		name: "publishMode",
+	});
+
 	useEffect(() => {
 		form.reset({
 			publishedPort: data?.publishedPort ?? 0,
@@ -253,6 +258,16 @@ export const HandlePorts = ({
 						</div>
 					</form>
 
+					{publishMode === "host" && (
+						<AlertBlock type="warning" className="mt-4">
+							<strong>Host Mode Limitation:</strong> When using Host publish
+							mode, Docker Swarm has limitations that prevent proper container
+							updates during deployments. Old containers may not be replaced
+							automatically. Consider using Ingress mode instead, or be prepared
+							to manually stop/start the application after deployments.
+						</AlertBlock>
+					)}
+
 					<DialogFooter>
 						<Button
 							isLoading={isLoading}

apps/dokploy/components/dashboard/docker/logs/docker-logs-id.tsx

@@ -1,13 +1,14 @@
+import { Download as DownloadIcon, Loader2, Pause, Play } from "lucide-react";
+import React, { useEffect, useRef } from "react";
+import { AlertBlock } from "@/components/shared/alert-block";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { api } from "@/utils/api";
-import { Download as DownloadIcon, Loader2 } from "lucide-react";
-import React, { useEffect, useRef } from "react";
 import { LineCountFilter } from "./line-count-filter";
 import { SinceLogsFilter, type TimeFilter } from "./since-logs-filter";
 import { StatusLogsFilter } from "./status-logs-filter";
 import { TerminalLine } from "./terminal-line";
-import { type LogLine, getLogType, parseLogs } from "./utils";
+import { getLogType, type LogLine, parseLogs } from "./utils";
 
 interface Props {
 	containerId: string;
@@ -61,6 +62,9 @@ export const DockerLogsId: React.FC<Props> = ({
 	const [showTimestamp, setShowTimestamp] = React.useState(true);
 	const [since, setSince] = React.useState<TimeFilter>("all");
 	const [typeFilter, setTypeFilter] = React.useState<string[]>([]);
+	const [isPaused, setIsPaused] = React.useState(false);
+	const [messageBuffer, setMessageBuffer] = React.useState<string[]>([]);
+	const isPausedRef = useRef(false);
 	const scrollRef = useRef<HTMLDivElement>(null);
 	const [isLoading, setIsLoading] = React.useState(false);
 
@@ -85,15 +89,38 @@ export const DockerLogsId: React.FC<Props> = ({
 	const handleLines = (lines: number) => {
 		setRawLogs("");
 		setFilteredLogs([]);
+		setMessageBuffer([]);
 		setLines(lines);
 	};
 
 	const handleSince = (value: TimeFilter) => {
 		setRawLogs("");
 		setFilteredLogs([]);
+		setMessageBuffer([]);
 		setSince(value);
 	};
 
+	const handlePauseResume = () => {
+		if (isPaused) {
+			// Resume: Apply all buffered messages
+			if (messageBuffer.length > 0) {
+				const bufferedContent = messageBuffer.join("");
+				setRawLogs((prev) => {
+					const updated = prev + bufferedContent;
+					const splitLines = updated.split("\n");
+					if (splitLines.length > lines) {
+						return splitLines.slice(-lines).join("\n");
+					}
+					return updated;
+				});
+				setMessageBuffer([]);
+			}
+		}
+		const newPausedState = !isPaused;
+		setIsPaused(newPausedState);
+		isPausedRef.current = newPausedState;
+	};
+
 	useEffect(() => {
 		if (!containerId) return;
 
@@ -102,6 +129,10 @@ export const DockerLogsId: React.FC<Props> = ({
 		setIsLoading(true);
 		setRawLogs("");
 		setFilteredLogs([]);
+		setMessageBuffer([]);
+		// Reset pause state when container changes
+		setIsPaused(false);
+		isPausedRef.current = false;
 
 		const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
 		const params = new globalThis.URLSearchParams({
@@ -140,14 +171,22 @@ export const DockerLogsId: React.FC<Props> = ({
 
 		ws.onmessage = (e) => {
 			if (!isCurrentConnection) return;
-			setRawLogs((prev) => {
-				const updated = prev + e.data;
-				const splitLines = updated.split("\n");
-				if (splitLines.length > lines) {
-					return splitLines.slice(-lines).join("\n");
-				}
-				return updated;
-			});
+
+			if (isPausedRef.current) {
+				// When paused, buffer the messages instead of displaying them
+				setMessageBuffer((prev) => [...prev, e.data]);
+			} else {
+				// When not paused, display messages normally
+				setRawLogs((prev) => {
+					const updated = prev + e.data;
+					const splitLines = updated.split("\n");
+					if (splitLines.length > lines) {
+						return splitLines.slice(-lines).join("\n");
+					}
+					return updated;
+				});
+			}
+
 			setIsLoading(false);
 			if (noDataTimeout) clearTimeout(noDataTimeout);
 		};
@@ -210,9 +249,15 @@ export const DockerLogsId: React.FC<Props> = ({
 		});
 	};
 
+	// Sync isPausedRef with isPaused state
+	useEffect(() => {
+		isPausedRef.current = isPaused;
+	}, [isPaused]);
+
 	useEffect(() => {
 		setRawLogs("");
 		setFilteredLogs([]);
+		setMessageBuffer([]);
 	}, [containerId]);
 
 	useEffect(() => {
@@ -260,17 +305,48 @@ export const DockerLogsId: React.FC<Props> = ({
 							/>
 						</div>
 
-						<Button
-							variant="outline"
-							size="sm"
-							className="h-9 sm:w-auto w-full"
-							onClick={handleDownload}
-							disabled={filteredLogs.length === 0 || !data?.Name}
-						>
-							<DownloadIcon className="mr-2 h-4 w-4" />
-							Download logs
-						</Button>
+						<div className="flex gap-2">
+							<Button
+								variant="outline"
+								size="sm"
+								className="h-9"
+								onClick={handlePauseResume}
+								title={isPaused ? "Resume logs" : "Pause logs"}
+							>
+								{isPaused ? (
+									<Play className="mr-2 h-4 w-4" />
+								) : (
+									<Pause className="mr-2 h-4 w-4" />
+								)}
+								{isPaused ? "Resume" : "Pause"}
+							</Button>
+							<Button
+								variant="outline"
+								size="sm"
+								className="h-9 sm:w-auto w-full"
+								onClick={handleDownload}
+								disabled={filteredLogs.length === 0 || !data?.Name}
+							>
+								<DownloadIcon className="mr-2 h-4 w-4" />
+								Download logs
+							</Button>
+						</div>
 					</div>
+					{isPaused && (
+						<AlertBlock type="warning">
+							<div className="flex items-center gap-2">
+								<Pause className="h-4 w-4" />
+								<span>
+									Logs paused
+									{messageBuffer.length > 0 && (
+										<span className="ml-1 font-medium">
+											({messageBuffer.length} messages buffered)
+										</span>
+									)}
+								</span>
+							</div>
+						</AlertBlock>
+					)}
 					<div
 						ref={scrollRef}
 						onScroll={handleScroll}

apps/dokploy/components/dashboard/projects/show.tsx

@@ -1,3 +1,17 @@
+import {
+	AlertTriangle,
+	ArrowUpDown,
+	BookIcon,
+	ExternalLinkIcon,
+	FolderInput,
+	Loader2,
+	MoreHorizontalIcon,
+	Search,
+	TrashIcon,
+} from "lucide-react";
+import Link from "next/link";
+import { useEffect, useMemo, useState } from "react";
+import { toast } from "sonner";
 import { BreadcrumbSidebar } from "@/components/shared/breadcrumb-sidebar";
 import { DateTooltip } from "@/components/shared/date-tooltip";
 import { StatusTooltip } from "@/components/shared/status-tooltip";
@@ -31,20 +45,14 @@ import {
 	DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { Input } from "@/components/ui/input";
-import { api } from "@/utils/api";
 import {
-	AlertTriangle,
-	BookIcon,
-	ExternalLinkIcon,
-	FolderInput,
-	Loader2,
-	MoreHorizontalIcon,
-	Search,
-	TrashIcon,
-} from "lucide-react";
-import Link from "next/link";
-import { useMemo, useState } from "react";
-import { toast } from "sonner";
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from "@/components/ui/select";
+import { api } from "@/utils/api";
 import { HandleProject } from "./handle-project";
 import { ProjectEnvironment } from "./project-environment";
 
@@ -54,15 +62,65 @@ export const ShowProjects = () => {
 	const { data: auth } = api.user.get.useQuery();
 	const { mutateAsync } = api.project.remove.useMutation();
 	const [searchQuery, setSearchQuery] = useState("");
+	const [sortBy, setSortBy] = useState<string>(() => {
+		if (typeof window !== "undefined") {
+			return localStorage.getItem("projectsSort") || "createdAt-desc";
+		}
+		return "createdAt-desc";
+	});
+
+	useEffect(() => {
+		localStorage.setItem("projectsSort", sortBy);
+	}, [sortBy]);
 
 	const filteredProjects = useMemo(() => {
 		if (!data) return [];
-		return data.filter(
+
+		// First filter by search query
+		const filtered = data.filter(
 			(project) =>
 				project.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
 				project.description?.toLowerCase().includes(searchQuery.toLowerCase()),
 		);
-	}, [data, searchQuery]);
+
+		// Then sort the filtered results
+		const [field, direction] = sortBy.split("-");
+		return [...filtered].sort((a, b) => {
+			let comparison = 0;
+			switch (field) {
+				case "name":
+					comparison = a.name.localeCompare(b.name);
+					break;
+				case "createdAt":
+					comparison =
+						new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime();
+					break;
+				case "services": {
+					const aTotalServices =
+						a.mariadb.length +
+						a.mongo.length +
+						a.mysql.length +
+						a.postgres.length +
+						a.redis.length +
+						a.applications.length +
+						a.compose.length;
+					const bTotalServices =
+						b.mariadb.length +
+						b.mongo.length +
+						b.mysql.length +
+						b.postgres.length +
+						b.redis.length +
+						b.applications.length +
+						b.compose.length;
+					comparison = aTotalServices - bTotalServices;
+					break;
+				}
+				default:
+					comparison = 0;
+			}
+			return direction === "asc" ? comparison : -comparison;
+		});
+	}, [data, searchQuery, sortBy]);
 
 	return (
 		<>
@@ -98,14 +156,40 @@ export const ShowProjects = () => {
 								</div>
 							) : (
 								<>
-									<div className="w-full relative">
-										<Input
-											placeholder="Filter projects..."
-											value={searchQuery}
-											onChange={(e) => setSearchQuery(e.target.value)}
-											className="pr-10"
-										/>
-										<Search className="absolute right-3 top-1/2 -translate-y-1/2 size-4 text-muted-foreground" />
+									<div className="flex max-sm:flex-col gap-4 items-center w-full">
+										<div className="flex-1 relative max-sm:w-full">
+											<Input
+												placeholder="Filter projects..."
+												value={searchQuery}
+												onChange={(e) => setSearchQuery(e.target.value)}
+												className="pr-10"
+											/>
+											<Search className="absolute right-3 top-1/2 -translate-y-1/2 size-4 text-muted-foreground" />
+										</div>
+										<div className="flex items-center gap-2 min-w-48 max-sm:w-full">
+											<ArrowUpDown className="size-4 text-muted-foreground" />
+											<Select value={sortBy} onValueChange={setSortBy}>
+												<SelectTrigger className="w-full">
+													<SelectValue placeholder="Sort by..." />
+												</SelectTrigger>
+												<SelectContent>
+													<SelectItem value="name-asc">Name (A-Z)</SelectItem>
+													<SelectItem value="name-desc">Name (Z-A)</SelectItem>
+													<SelectItem value="createdAt-desc">
+														Newest first
+													</SelectItem>
+													<SelectItem value="createdAt-asc">
+														Oldest first
+													</SelectItem>
+													<SelectItem value="services-desc">
+														Most services
+													</SelectItem>
+													<SelectItem value="services-asc">
+														Least services
+													</SelectItem>
+												</SelectContent>
+											</Select>
+										</div>
 									</div>
 									{filteredProjects?.length === 0 && (
 										<div className="mt-6 flex h-[50vh] w-full flex-col items-center justify-center space-y-4">

apps/dokploy/components/shared/ChatwootWidget.tsx

@@ -10,7 +10,7 @@ interface ChatwootWidgetProps {
 		launcherTitle?: string;
 		darkMode?: boolean;
 		hideMessageBubble?: boolean;
-		placement?: "right" | "left";
+		placement?: "left" | "right";
 		showPopoutButton?: boolean;
 		widgetStyle?: "standard" | "bubble";
 	};
@@ -41,7 +41,7 @@ export const ChatwootWidget = ({
 			position: "right",
 		};
 
-		(window as any).chatwootSDKReady = () => {
+		window.chatwootSDKReady = () => {
 			window.chatwootSDK?.run({ websiteToken, baseUrl });
 
 			const trySetUser = () => {
@@ -63,7 +63,7 @@ export const ChatwootWidget = ({
 		<Script
 			src={`${baseUrl}/packs/js/sdk.js`}
 			strategy="lazyOnload"
-			onLoad={() => (window as any).chatwootSDKReady?.()}
+			onLoad={() => window.chatwootSDKReady?.()}
 		/>
 	);
 };

apps/dokploy/components/shared/alert-block.tsx

@@ -1,11 +1,11 @@
+import { AlertCircle, AlertTriangle, CheckCircle2, Info } from "lucide-react";
+import { cn } from "@/lib/utils";
+
 interface Props extends React.ComponentPropsWithoutRef<"div"> {
 	icon?: React.ReactNode;
 	type?: "info" | "success" | "warning" | "error";
 }
 
-import { cn } from "@/lib/utils";
-import { AlertCircle, AlertTriangle, CheckCircle2, Info } from "lucide-react";
-
 const iconMap = {
 	info: {
 		className: "bg-blue-50 dark:bg-blue-950 text-blue-600 dark:text-blue-400",

apps/dokploy/components/shared/breadcrumb-sidebar.tsx

@@ -1,3 +1,5 @@
+import Link from "next/link";
+import { Fragment } from "react";
 import {
 	Breadcrumb,
 	BreadcrumbItem,
@@ -7,8 +9,6 @@ import {
 } from "@/components/ui/breadcrumb";
 import { Separator } from "@/components/ui/separator";
 import { SidebarTrigger } from "@/components/ui/sidebar";
-import Link from "next/link";
-import { Fragment } from "react";
 
 interface Props {
 	list: {
@@ -26,7 +26,7 @@ export const BreadcrumbSidebar = ({ list }: Props) => {
 					<Separator orientation="vertical" className="mr-2 h-4" />
 					<Breadcrumb>
 						<BreadcrumbList>
-							{list.map((item, _index) => (
+							{list.map((item, index) => (
 								<Fragment key={item.name}>
 									<BreadcrumbItem className="block">
 										<BreadcrumbLink href={item.href} asChild={!!item.href}>
@@ -37,7 +37,7 @@ export const BreadcrumbSidebar = ({ list }: Props) => {
 											)}
 										</BreadcrumbLink>
 									</BreadcrumbItem>
-									{_index + 1 < list.length && (
+									{index + 1 < list.length && (
 										<BreadcrumbSeparator className="block" />
 									)}
 								</Fragment>

apps/dokploy/components/shared/code-editor.tsx

@@ -1,20 +1,19 @@
-import { cn } from "@/lib/utils";
-import { json } from "@codemirror/lang-json";
-import { yaml } from "@codemirror/lang-yaml";
-import { StreamLanguage } from "@codemirror/language";
-
 import {
+	autocompletion,
 	type Completion,
 	type CompletionContext,
 	type CompletionResult,
-	autocompletion,
 } from "@codemirror/autocomplete";
+import { json } from "@codemirror/lang-json";
+import { yaml } from "@codemirror/lang-yaml";
+import { StreamLanguage } from "@codemirror/language";
 import { properties } from "@codemirror/legacy-modes/mode/properties";
 import { shell } from "@codemirror/legacy-modes/mode/shell";
 import { EditorView } from "@codemirror/view";
 import { githubDark, githubLight } from "@uiw/codemirror-theme-github";
 import CodeMirror, { type ReactCodeMirrorProps } from "@uiw/react-codemirror";
 import { useTheme } from "next-themes";
+import { cn } from "@/lib/utils";
 
 // Docker Compose completion options
 const dockerComposeServices = [
@@ -101,9 +100,7 @@ function dockerComposeComplete(
 	context: CompletionContext,
 ): CompletionResult | null {
 	const word = context.matchBefore(/\w*/);
-	if (!word) return null;
-
-	if (!word.text && !context.explicit) return null;
+	if (!word || (!word.text && !context.explicit)) return null;
 
 	// Check if we're at the root level
 	const line = context.state.doc.lineAt(context.pos);

apps/dokploy/components/shared/date-tooltip.tsx

@@ -1,3 +1,4 @@
+import { format, formatDistanceToNow } from "date-fns";
 import {
 	Tooltip,
 	TooltipContent,
@@ -5,7 +6,6 @@ import {
 	TooltipTrigger,
 } from "@/components/ui/tooltip";
 import { cn } from "@/lib/utils";
-import { format, formatDistanceToNow } from "date-fns";
 
 interface Props {
 	date: string;

apps/dokploy/components/shared/drawer-logs.tsx

@@ -1,3 +1,5 @@
+import { Loader2 } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
 import {
 	Sheet,
 	SheetContent,
@@ -5,8 +7,6 @@ import {
 	SheetHeader,
 	SheetTitle,
 } from "@/components/ui/sheet";
-import { Loader2 } from "lucide-react";
-import { useEffect, useRef, useState } from "react";
 import { TerminalLine } from "../dashboard/docker/logs/terminal-line";
 import type { LogLine } from "../dashboard/docker/logs/utils";
 
@@ -43,11 +43,11 @@ export const DrawerLogs = ({ isOpen, onClose, filteredLogs }: Props) => {
 	return (
 		<Sheet
 			open={!!isOpen}
-			onOpenChange={(_open) => {
+			onOpenChange={() => {
 				onClose();
 			}}
 		>
-			<SheetContent className="sm:max-w-[740px]  flex flex-col">
+			<SheetContent className="sm:max-w-[740px] flex flex-col">
 				<SheetHeader>
 					<SheetTitle>Deployment Logs</SheetTitle>
 					<SheetDescription>Details of the request log entry.</SheetDescription>

apps/dokploy/components/shared/toggle-visibility-input.tsx

@@ -13,10 +13,13 @@ export const ToggleVisibilityInput = ({ ...props }: InputProps) => {
 		setIsPasswordVisible((prevVisibility) => !prevVisibility);
 	};
 
-	const inputType = isPasswordVisible ? "text" : "password";
 	return (
 		<div className="flex w-full items-center space-x-2">
-			<Input ref={inputRef} type={inputType} {...props} />
+			<Input
+				ref={inputRef}
+				type={isPasswordVisible ? "text" : "password"}
+				{...props}
+			/>
 			<Button
 				variant={"secondary"}
 				onClick={() => {
@@ -27,10 +30,10 @@ export const ToggleVisibilityInput = ({ ...props }: InputProps) => {
 				<Clipboard className="size-4 text-muted-foreground" />
 			</Button>
 			<Button onClick={togglePasswordVisibility} variant={"secondary"}>
-				{inputType === "password" ? (
-					<EyeIcon className="size-4 text-muted-foreground" />
-				) : (
+				{isPasswordVisible ? (
 					<EyeOffIcon className="size-4 text-muted-foreground" />
+				) : (
+					<EyeIcon className="size-4 text-muted-foreground" />
 				)}
 			</Button>
 		</div>