Skip to content

feat(databases): add copy button to User and Database Name fields #4735

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Siumauricio merged 2 commits into from
Jul 5, 2026
Merged

feat(databases): add copy button to User and Database Name fields #4735

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a6b1d6c
feat(databases): add copy button to User and Database Name fields
Siumauricio Jul 5, 2026
d8a907c
[autofix.ci] apply automated fixes
autofix-ci[bot] Jul 5, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions apps/dokploy/components/dashboard/libsql/general/show-internal-libsql-credentials.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,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} />
<Input enableCopyButton disabled value={data?.databaseUser} />
</div>
<div className="flex flex-col gap-2">
<Label>Sqld Node</Label>
Expand Down Expand Up @@ -71,7 +71,7 @@ export const ShowInternalLibsqlCredentials = ({ libsqlId }: Props) => {
</div>
<div className="flex flex-col gap-2">
<Label>Internal Host</Label>
<Input disabled value={data?.appName} />
<Input enableCopyButton disabled value={data?.appName} />
</div>
<div className="flex flex-col gap-2">
<Label>Enable Namespaces</Label>
Expand Down
6 changes: 3 additions & 3 deletions apps/dokploy/components/dashboard/mariadb/general/show-internal-mariadb-credentials.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,11 +25,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} />
<Input enableCopyButton disabled value={data?.databaseUser} />
</div>
<div className="flex flex-col gap-2">
<Label>Database Name</Label>
<Input disabled value={data?.databaseName} />
<Input enableCopyButton disabled value={data?.databaseName} />
</div>
<div className="flex flex-col gap-2">
<Label>Password</Label>
Expand Down Expand Up @@ -79,7 +79,7 @@ export const ShowInternalMariadbCredentials = ({ mariadbId }: Props) => {

<div className="flex flex-col gap-2">
<Label>Internal Host</Label>
<Input disabled value={data?.appName} />
<Input enableCopyButton disabled value={data?.appName} />
</div>

<div className="flex flex-col gap-2 md:col-span-2">
Expand Down
4 changes: 2 additions & 2 deletions apps/dokploy/components/dashboard/mongo/general/show-internal-mongo-credentials.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,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} />
<Input enableCopyButton disabled value={data?.databaseUser} />
</div>

<div className="flex flex-col gap-2">
Expand Down Expand Up @@ -55,7 +55,7 @@ export const ShowInternalMongoCredentials = ({ mongoId }: Props) => {

<div className="flex flex-col gap-2">
<Label>Internal Host</Label>
<Input disabled value={data?.appName} />
<Input enableCopyButton disabled value={data?.appName} />
</div>

<div className="flex flex-col gap-2 md:col-span-2">
Expand Down
6 changes: 3 additions & 3 deletions apps/dokploy/components/dashboard/mysql/general/show-internal-mysql-credentials.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,11 +25,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} />
<Input enableCopyButton disabled value={data?.databaseUser} />
</div>
<div className="flex flex-col gap-2">
<Label>Database Name</Label>
<Input disabled value={data?.databaseName} />
<Input enableCopyButton disabled value={data?.databaseName} />
</div>
<div className="flex flex-col gap-2">
<Label>Password</Label>
Expand Down Expand Up @@ -79,7 +79,7 @@ export const ShowInternalMysqlCredentials = ({ mysqlId }: Props) => {

<div className="flex flex-col gap-2">
<Label>Internal Host</Label>
<Input disabled value={data?.appName} />
<Input enableCopyButton disabled value={data?.appName} />
</div>

<div className="flex flex-col gap-2 md:col-span-2">
Expand Down
6 changes: 3 additions & 3 deletions apps/dokploy/components/dashboard/postgres/general/show-internal-postgres-credentials.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,11 +25,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} />
<Input enableCopyButton disabled value={data?.databaseUser} />
</div>
<div className="flex flex-col gap-2">
<Label>Database Name</Label>
<Input disabled value={data?.databaseName} />
<Input enableCopyButton disabled value={data?.databaseName} />
</div>
<div className="flex flex-col gap-2">
<Label>Password</Label>
Expand Down Expand Up @@ -57,7 +57,7 @@ export const ShowInternalPostgresCredentials = ({ postgresId }: Props) => {

<div className="flex flex-col gap-2">
<Label>Internal Host</Label>
<Input disabled value={data?.appName} />
<Input enableCopyButton disabled value={data?.appName} />
</div>

<div className="flex flex-col gap-2">
Expand Down
4 changes: 2 additions & 2 deletions apps/dokploy/components/dashboard/redis/general/show-internal-redis-credentials.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,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" />
<Input enableCopyButton disabled value="default" />
</div>
<div className="flex flex-col gap-2">
<Label>Password</Label>
Expand Down Expand Up @@ -53,7 +53,7 @@ export const ShowInternalRedisCredentials = ({ redisId }: Props) => {

<div className="flex flex-col gap-2">
<Label>Internal Host</Label>
<Input disabled value={data?.appName} />
<Input enableCopyButton disabled value={data?.appName} />
</div>

<div className="flex flex-col gap-2 md:col-span-2">
Expand Down
99 changes: 61 additions & 38 deletions apps/dokploy/components/ui/input.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,17 @@
import { EyeIcon, EyeOffIcon, RefreshCcw } from "lucide-react";
import copy from "copy-to-clipboard";
import { Clipboard, EyeIcon, EyeOffIcon, RefreshCcw } from "lucide-react";
import * as React from "react";
import { toast } from "sonner";

import { generateRandomPassword } from "@/lib/password-utils";
import { cn } from "@/lib/utils";
import { Button } from "./button";

export interface InputProps extends React.ComponentProps<"input"> {
errorMessage?: string;
enablePasswordGenerator?: boolean;
passwordGeneratorLength?: number;
enableCopyButton?: boolean;
}

function Input({
Expand All @@ -16,6 +20,7 @@ function Input({
errorMessage,
enablePasswordGenerator = false,
passwordGeneratorLength,
enableCopyButton = false,
ref,
...props
}: InputProps) {
Expand Down Expand Up @@ -65,49 +70,67 @@ function Input({
input.dispatchEvent(new Event("input", { bubbles: true }));
};

return (
<>
<div className="relative w-full">
<input
type={inputType}
data-slot="input"
className={cn(
"h-10 w-full min-w-0 rounded-lg border border-input bg-transparent px-3 py-2 text-sm transition-colors outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
isPassword && (shouldShowGenerator ? "pr-16" : "pr-10"),
className,
)}
ref={setRefs}
{...props}
/>
{isPassword && (
<div className="absolute inset-y-0 right-0 flex items-center gap-1 pr-3 text-muted-foreground">
{shouldShowGenerator && (
<button
type="button"
className="hover:text-foreground focus:outline-none"
onClick={handleGeneratePassword}
aria-label="Generate password"
title="Generate password"
tabIndex={-1}
>
<RefreshCcw className="h-4 w-4" />
</button>
)}
const handleCopy = () => {
copy(inputRef.current?.value || "");
toast.success("Value is copied to clipboard");
};

const inputElement = (
<div className="relative w-full">
<input
type={inputType}
data-slot="input"
className={cn(
"h-10 w-full min-w-0 rounded-lg border border-input bg-transparent px-3 py-2 text-sm transition-colors outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
isPassword && (shouldShowGenerator ? "pr-16" : "pr-10"),
className,
)}
ref={setRefs}
{...props}
/>
{isPassword && (
<div className="absolute inset-y-0 right-0 flex items-center gap-1 pr-3 text-muted-foreground">
{shouldShowGenerator && (
<button
type="button"
className="hover:text-foreground focus:outline-none"
onClick={() => setShowPassword(!showPassword)}
onClick={handleGeneratePassword}
aria-label="Generate password"
title="Generate password"
tabIndex={-1}
>
{showPassword ? (
<EyeOffIcon className="h-4 w-4" />
) : (
<EyeIcon className="h-4 w-4" />
)}
<RefreshCcw className="h-4 w-4" />
</button>
</div>
)}
</div>
)}
<button
type="button"
className="hover:text-foreground focus:outline-none"
onClick={() => setShowPassword(!showPassword)}
tabIndex={-1}
>
{showPassword ? (
<EyeOffIcon className="h-4 w-4" />
) : (
<EyeIcon className="h-4 w-4" />
)}
</button>
</div>
)}
</div>
);

return (
<>
{enableCopyButton ? (
<div className="flex w-full items-center space-x-2">
{inputElement}
<Button type="button" variant={"secondary"} onClick={handleCopy}>
<Clipboard className="size-4 text-muted-foreground" />
</Button>
</div>
) : (
inputElement
)}
{errorMessage && (
<span className="text-sm text-red-600 text-secondary-foreground">
{errorMessage}
Expand Down
4 changes: 3 additions & 1 deletion apps/dokploy/server/api/routers/deployment.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -136,7 +136,9 @@ export const deploymentRouter = createTRPCRouter({
});
} else if (schedule.serverId) {
const targetServer = await findServerById(schedule.serverId);
if (targetServer.organizationId !== ctx.session.activeOrganizationId) {
if (
targetServer.organizationId !== ctx.session.activeOrganizationId
) {
throw new TRPCError({
code: "UNAUTHORIZED",
message: "You don't have access to this schedule.",
Expand Down
Loading