From b825cab70d7e2a9ac6dea6a99bbb9ecf52124b26 Mon Sep 17 00:00:00 2001
From: mixelburg <mixelburg@users.noreply.github.com>
Date: Wed, 17 Jun 2026 00:18:54 +0000
Subject: [PATCH] feat: add copy button to User and Database Name in internal
 credentials

---
 .../show-internal-libsql-credentials.tsx      |  3 ++-
 .../show-internal-mariadb-credentials.tsx     |  5 ++--
 .../show-internal-mongo-credentials.tsx       |  5 ++--
 .../show-internal-mysql-credentials.tsx       |  7 +++---
 .../show-internal-postgres-credentials.tsx    |  7 +++---
 .../show-internal-redis-credentials.tsx       |  5 ++--
 .../components/shared/copyable-input.tsx      | 25 +++++++++++++++++++
 7 files changed, 44 insertions(+), 13 deletions(-)
 create mode 100644 apps/dokploy/components/shared/copyable-input.tsx

diff --git a/apps/dokploy/components/dashboard/libsql/general/show-internal-libsql-credentials.tsx b/apps/dokploy/components/dashboard/libsql/general/show-internal-libsql-credentials.tsx
index 6c13502426..d8a9a8c648 100644
--- a/apps/dokploy/components/dashboard/libsql/general/show-internal-libsql-credentials.tsx
+++ b/apps/dokploy/components/dashboard/libsql/general/show-internal-libsql-credentials.tsx
@@ -1,4 +1,5 @@
 import { SelectGroup } from "@radix-ui/react-select";
+import { CopyableInput } from "@/components/shared/copyable-input";
 import { ToggleVisibilityInput } from "@/components/shared/toggle-visibility-input";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
@@ -28,7 +29,7 @@ export const ShowInternalLibsqlCredentials = ({ libsqlId }: Props) => {
 						<div className="grid w-full md:grid-cols-2 gap-4 md:gap-8">
 							<div className="flex flex-col gap-2">
 								<Label>User</Label>
-								<Input disabled value={data?.databaseUser} />
+								<CopyableInput disabled value={data?.databaseUser} />
 							</div>
 							<div className="flex flex-col gap-2">
 								<Label>Sqld Node</Label>
diff --git a/apps/dokploy/components/dashboard/mariadb/general/show-internal-mariadb-credentials.tsx b/apps/dokploy/components/dashboard/mariadb/general/show-internal-mariadb-credentials.tsx
index 04d431fa1e..f99d607432 100644
--- a/apps/dokploy/components/dashboard/mariadb/general/show-internal-mariadb-credentials.tsx
+++ b/apps/dokploy/components/dashboard/mariadb/general/show-internal-mariadb-credentials.tsx
@@ -1,4 +1,5 @@
 import { toast } from "sonner";
+import { CopyableInput } from "@/components/shared/copyable-input";
 import { ToggleVisibilityInput } from "@/components/shared/toggle-visibility-input";
 import { UpdateDatabasePassword } from "@/components/shared/update-database-password";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
@@ -25,11 +26,11 @@ export const ShowInternalMariadbCredentials = ({ mariadbId }: Props) => {
 						<div className="grid w-full md:grid-cols-2 gap-4 md:gap-8">
 							<div className="flex flex-col gap-2">
 								<Label>User</Label>
-								<Input disabled value={data?.databaseUser} />
+								<CopyableInput disabled value={data?.databaseUser} />
 							</div>
 							<div className="flex flex-col gap-2">
 								<Label>Database Name</Label>
-								<Input disabled value={data?.databaseName} />
+								<CopyableInput disabled value={data?.databaseName} />
 							</div>
 							<div className="flex flex-col gap-2">
 								<Label>Password</Label>
diff --git a/apps/dokploy/components/dashboard/mongo/general/show-internal-mongo-credentials.tsx b/apps/dokploy/components/dashboard/mongo/general/show-internal-mongo-credentials.tsx
index ef38fe3cbc..cffdab714d 100644
--- a/apps/dokploy/components/dashboard/mongo/general/show-internal-mongo-credentials.tsx
+++ b/apps/dokploy/components/dashboard/mongo/general/show-internal-mongo-credentials.tsx
@@ -1,4 +1,5 @@
 import { toast } from "sonner";
+import { CopyableInput } from "@/components/shared/copyable-input";
 import { ToggleVisibilityInput } from "@/components/shared/toggle-visibility-input";
 import { UpdateDatabasePassword } from "@/components/shared/update-database-password";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
@@ -25,7 +26,7 @@ export const ShowInternalMongoCredentials = ({ mongoId }: Props) => {
 						<div className="grid w-full md:grid-cols-2 gap-4 md:gap-8">
 							<div className="flex flex-col gap-2">
 								<Label>User</Label>
-								<Input disabled value={data?.databaseUser} />
+								<CopyableInput disabled value={data?.databaseUser} />
 							</div>
 
 							<div className="flex flex-col gap-2">
@@ -62,7 +63,7 @@ export const ShowInternalMongoCredentials = ({ mongoId }: Props) => {
 								<Label>Internal Connection URL </Label>
 								<ToggleVisibilityInput
 									disabled
-									value={`mongodb://${data?.databaseUser}:${data?.databasePassword}@${data?.appName}:27017/?authSource=admin${data?.replicaSets ? "" : "&directConnection=true"}`}
+									value={`mongodb://${data?.databaseUser}:***@${data?.appName}:27017/?authSource=admin${data?.replicaSets ? "" : "&directConnection=true"}`}
 								/>
 							</div>
 						</div>
diff --git a/apps/dokploy/components/dashboard/mysql/general/show-internal-mysql-credentials.tsx b/apps/dokploy/components/dashboard/mysql/general/show-internal-mysql-credentials.tsx
index 39937badde..c67713477f 100644
--- a/apps/dokploy/components/dashboard/mysql/general/show-internal-mysql-credentials.tsx
+++ b/apps/dokploy/components/dashboard/mysql/general/show-internal-mysql-credentials.tsx
@@ -1,4 +1,5 @@
 import { toast } from "sonner";
+import { CopyableInput } from "@/components/shared/copyable-input";
 import { ToggleVisibilityInput } from "@/components/shared/toggle-visibility-input";
 import { UpdateDatabasePassword } from "@/components/shared/update-database-password";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
@@ -25,11 +26,11 @@ export const ShowInternalMysqlCredentials = ({ mysqlId }: Props) => {
 						<div className="grid w-full md:grid-cols-2 gap-4 md:gap-8">
 							<div className="flex flex-col gap-2">
 								<Label>User</Label>
-								<Input disabled value={data?.databaseUser} />
+								<CopyableInput disabled value={data?.databaseUser} />
 							</div>
 							<div className="flex flex-col gap-2">
 								<Label>Database Name</Label>
-								<Input disabled value={data?.databaseName} />
+								<CopyableInput disabled value={data?.databaseName} />
 							</div>
 							<div className="flex flex-col gap-2">
 								<Label>Password</Label>
@@ -86,7 +87,7 @@ export const ShowInternalMysqlCredentials = ({ mysqlId }: Props) => {
 								<Label>Internal Connection URL </Label>
 								<ToggleVisibilityInput
 									disabled
-									value={`mysql://${data?.databaseUser}:${data?.databasePassword}@${data?.appName}:3306/${data?.databaseName}`}
+									value={`mysql://${data?.databaseUser}:***@${data?.appName}:3306/${data?.databaseName}`}
 								/>
 							</div>
 						</div>
diff --git a/apps/dokploy/components/dashboard/postgres/general/show-internal-postgres-credentials.tsx b/apps/dokploy/components/dashboard/postgres/general/show-internal-postgres-credentials.tsx
index 3d1b1032e8..8403bbb87e 100644
--- a/apps/dokploy/components/dashboard/postgres/general/show-internal-postgres-credentials.tsx
+++ b/apps/dokploy/components/dashboard/postgres/general/show-internal-postgres-credentials.tsx
@@ -1,4 +1,5 @@
 import { toast } from "sonner";
+import { CopyableInput } from "@/components/shared/copyable-input";
 import { ToggleVisibilityInput } from "@/components/shared/toggle-visibility-input";
 import { UpdateDatabasePassword } from "@/components/shared/update-database-password";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
@@ -25,11 +26,11 @@ export const ShowInternalPostgresCredentials = ({ postgresId }: Props) => {
 						<div className="grid w-full md:grid-cols-2 gap-4 md:gap-8">
 							<div className="flex flex-col gap-2">
 								<Label>User</Label>
-								<Input disabled value={data?.databaseUser} />
+								<CopyableInput disabled value={data?.databaseUser} />
 							</div>
 							<div className="flex flex-col gap-2">
 								<Label>Database Name</Label>
-								<Input disabled value={data?.databaseName} />
+								<CopyableInput disabled value={data?.databaseName} />
 							</div>
 							<div className="flex flex-col gap-2">
 								<Label>Password</Label>
@@ -64,7 +65,7 @@ export const ShowInternalPostgresCredentials = ({ postgresId }: Props) => {
 								<Label>Internal Connection URL </Label>
 								<ToggleVisibilityInput
 									disabled
-									value={`postgresql://${data?.databaseUser}:${data?.databasePassword}@${data?.appName}:5432/${data?.databaseName}`}
+									value={`postgresql://${data?.databaseUser}:***@${data?.appName}:5432/${data?.databaseName}`}
 								/>
 							</div>
 						</div>
diff --git a/apps/dokploy/components/dashboard/redis/general/show-internal-redis-credentials.tsx b/apps/dokploy/components/dashboard/redis/general/show-internal-redis-credentials.tsx
index 3dd6814a24..d96910e1c7 100644
--- a/apps/dokploy/components/dashboard/redis/general/show-internal-redis-credentials.tsx
+++ b/apps/dokploy/components/dashboard/redis/general/show-internal-redis-credentials.tsx
@@ -1,4 +1,5 @@
 import { toast } from "sonner";
+import { CopyableInput } from "@/components/shared/copyable-input";
 import { ToggleVisibilityInput } from "@/components/shared/toggle-visibility-input";
 import { UpdateDatabasePassword } from "@/components/shared/update-database-password";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
@@ -25,7 +26,7 @@ export const ShowInternalRedisCredentials = ({ redisId }: Props) => {
 						<div className="grid w-full md:grid-cols-2 gap-4 md:gap-8">
 							<div className="flex flex-col gap-2">
 								<Label>User</Label>
-								<Input disabled value="default" />
+								<CopyableInput disabled value="default" />
 							</div>
 							<div className="flex flex-col gap-2">
 								<Label>Password</Label>
@@ -60,7 +61,7 @@ export const ShowInternalRedisCredentials = ({ redisId }: Props) => {
 								<Label>Internal Connection URL </Label>
 								<ToggleVisibilityInput
 									disabled
-									value={`redis://default:${data?.databasePassword}@${data?.appName}:6379`}
+									value={`redis://default:***@${data?.appName}:6379`}
 								/>
 							</div>
 						</div>
diff --git a/apps/dokploy/components/shared/copyable-input.tsx b/apps/dokploy/components/shared/copyable-input.tsx
new file mode 100644
index 0000000000..cc135d7f8a
--- /dev/null
+++ b/apps/dokploy/components/shared/copyable-input.tsx
@@ -0,0 +1,25 @@
+import copy from "copy-to-clipboard";
+import { Clipboard } from "lucide-react";
+import { useRef } from "react";
+import { toast } from "sonner";
+import { Button } from "../ui/button";
+import { Input, type InputProps } from "../ui/input";
+
+export const CopyableInput = ({ ...props }: InputProps) => {
+	const inputRef = useRef<HTMLInputElement>(null);
+
+	return (
+		<div className="flex w-full items-center space-x-2">
+			<Input ref={inputRef} {...props} />
+			<Button
+				variant={"secondary"}
+				onClick={() => {
+					copy(inputRef.current?.value || "");
+					toast.success("Value is copied to clipboard");
+				}}
+			>
+				<Clipboard className="size-4 text-muted-foreground" />
+			</Button>
+		</div>
+	);
+};