From fe5efd7651e6209b699278154477a523752e8b64 Mon Sep 17 00:00:00 2001
From: mhbdev <whw1483@gmail.com>
Date: Tue, 6 Jan 2026 16:26:42 +0330
Subject: [PATCH] Added a built-in password generator to the shared input

---
 .../settings/profile/configure-2fa.tsx        |   1 +
 .../dashboard/settings/profile/enable-2fa.tsx |   1 +
 .../settings/profile/profile-form.tsx         |   1 +
 .../settings/servers/setup-monitoring.tsx     |   1 +
 .../shared/toggle-visibility-input.tsx        |   7 +-
 apps/dokploy/components/ui/input.tsx          | 100 +++++++++++++++---
 apps/dokploy/lib/password-utils.ts            |  37 +++++++
 7 files changed, 132 insertions(+), 16 deletions(-)
 create mode 100644 apps/dokploy/lib/password-utils.ts

diff --git a/apps/dokploy/components/dashboard/settings/profile/configure-2fa.tsx b/apps/dokploy/components/dashboard/settings/profile/configure-2fa.tsx
index 17220cd11..788ea55ac 100644
--- a/apps/dokploy/components/dashboard/settings/profile/configure-2fa.tsx
+++ b/apps/dokploy/components/dashboard/settings/profile/configure-2fa.tsx
@@ -263,6 +263,7 @@ export const Configure2FA = () => {
 													type="password"
 													placeholder="Enter your password"
 													{...field}
+													enablePasswordGenerator={false}
 												/>
 											</FormControl>
 											<FormDescription>
diff --git a/apps/dokploy/components/dashboard/settings/profile/enable-2fa.tsx b/apps/dokploy/components/dashboard/settings/profile/enable-2fa.tsx
index 656b27401..573dae8f8 100644
--- a/apps/dokploy/components/dashboard/settings/profile/enable-2fa.tsx
+++ b/apps/dokploy/components/dashboard/settings/profile/enable-2fa.tsx
@@ -290,6 +290,7 @@ export const Enable2FA = () => {
 												type="password"
 												placeholder="Enter your password"
 												{...field}
+												enablePasswordGenerator={false}
 											/>
 										</FormControl>
 										<FormDescription>
diff --git a/apps/dokploy/components/dashboard/settings/profile/profile-form.tsx b/apps/dokploy/components/dashboard/settings/profile/profile-form.tsx
index ad66aa0fa..c2ee0c230 100644
--- a/apps/dokploy/components/dashboard/settings/profile/profile-form.tsx
+++ b/apps/dokploy/components/dashboard/settings/profile/profile-form.tsx
@@ -236,6 +236,7 @@ export const ProfileForm = () => {
 																placeholder={t("settings.profile.password")}
 																{...field}
 																value={field.value || ""}
+																enablePasswordGenerator={false}
 															/>
 														</FormControl>
 														<FormMessage />
diff --git a/apps/dokploy/components/dashboard/settings/servers/setup-monitoring.tsx b/apps/dokploy/components/dashboard/settings/servers/setup-monitoring.tsx
index 09260b1a2..d2b9b999b 100644
--- a/apps/dokploy/components/dashboard/settings/servers/setup-monitoring.tsx
+++ b/apps/dokploy/components/dashboard/settings/servers/setup-monitoring.tsx
@@ -568,6 +568,7 @@ export const SetupMonitoring = ({ serverId }: Props) => {
 														type={showToken ? "text" : "password"}
 														placeholder="Enter your metrics token"
 														{...field}
+														enablePasswordGenerator={false}
 													/>
 													<Button
 														type="button"
diff --git a/apps/dokploy/components/shared/toggle-visibility-input.tsx b/apps/dokploy/components/shared/toggle-visibility-input.tsx
index aea173fbc..1f1456b5f 100644
--- a/apps/dokploy/components/shared/toggle-visibility-input.tsx
+++ b/apps/dokploy/components/shared/toggle-visibility-input.tsx
@@ -10,7 +10,12 @@ export const ToggleVisibilityInput = ({ ...props }: InputProps) => {
 
 	return (
 		<div className="flex w-full items-center space-x-2">
-			<Input ref={inputRef} type={"password"} {...props} />
+			<Input
+				ref={inputRef}
+				{...props}
+				type="password"
+				enablePasswordGenerator={false}
+			/>
 			<Button
 				variant={"secondary"}
 				onClick={() => {
diff --git a/apps/dokploy/components/ui/input.tsx b/apps/dokploy/components/ui/input.tsx
index 87afd64e5..62be2d22d 100644
--- a/apps/dokploy/components/ui/input.tsx
+++ b/apps/dokploy/components/ui/input.tsx
@@ -1,18 +1,74 @@
-import { EyeIcon, EyeOffIcon } from "lucide-react";
+import { EyeIcon, EyeOffIcon, RefreshCcw } from "lucide-react";
 import * as React from "react";
+import { generateRandomPassword } from "@/lib/password-utils";
 import { cn } from "@/lib/utils";
 
 export interface InputProps
 	extends React.InputHTMLAttributes<HTMLInputElement> {
 	errorMessage?: string;
+	enablePasswordGenerator?: boolean;
+	passwordGeneratorLength?: number;
 }
 
 const Input = React.forwardRef<HTMLInputElement, InputProps>(
-	({ className, errorMessage, type, ...props }, ref) => {
+	(
+		{
+			className,
+			errorMessage,
+			type,
+			enablePasswordGenerator = true,
+			passwordGeneratorLength,
+			...props
+		},
+		ref,
+	) => {
 		const [showPassword, setShowPassword] = React.useState(false);
+		const inputRef = React.useRef<HTMLInputElement>(null);
 		const isPassword = type === "password";
+		const shouldShowGenerator =
+			isPassword &&
+			enablePasswordGenerator !== false &&
+			!props.disabled &&
+			!props.readOnly;
 		const inputType = isPassword ? (showPassword ? "text" : "password") : type;
 
+		const setRefs = React.useCallback(
+			(node: HTMLInputElement | null) => {
+				inputRef.current = node;
+				if (typeof ref === "function") {
+					ref(node);
+				} else if (ref) {
+					ref.current = node;
+				}
+			},
+			[ref],
+		);
+
+		const handleGeneratePassword = () => {
+			const nextValue =
+				typeof passwordGeneratorLength === "number" &&
+				passwordGeneratorLength > 0
+					? generateRandomPassword(Math.floor(passwordGeneratorLength))
+					: generateRandomPassword();
+
+			const input = inputRef.current;
+			if (!input) {
+				return;
+			}
+
+			const valueSetter = Object.getOwnPropertyDescriptor(
+				HTMLInputElement.prototype,
+				"value",
+			)?.set;
+			if (valueSetter) {
+				valueSetter.call(input, nextValue);
+			} else {
+				input.value = nextValue;
+			}
+
+			input.dispatchEvent(new Event("input", { bubbles: true }));
+		};
+
 		return (
 			<>
 				<div className="relative w-full">
@@ -21,25 +77,39 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
 						className={cn(
 							// bg-gray
 							"flex h-10 w-full rounded-md bg-input px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border disabled:cursor-not-allowed disabled:opacity-50",
-							isPassword && "pr-10", // Add padding for the eye icon
+							isPassword && (shouldShowGenerator ? "pr-16" : "pr-10"),
 							className,
 						)}
-						ref={ref}
+						ref={setRefs}
 						{...props}
 					/>
 					{isPassword && (
-						<button
-							type="button"
-							className="absolute inset-y-0 right-0 flex items-center pr-3 text-muted-foreground hover:text-foreground focus:outline-none"
-							onClick={() => setShowPassword(!showPassword)}
-							tabIndex={-1}
-						>
-							{showPassword ? (
-								<EyeOffIcon className="h-4 w-4" />
-							) : (
-								<EyeIcon className="h-4 w-4" />
+						<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>
 							)}
-						</button>
+							<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>
 				{errorMessage && (
diff --git a/apps/dokploy/lib/password-utils.ts b/apps/dokploy/lib/password-utils.ts
new file mode 100644
index 000000000..3da2aca73
--- /dev/null
+++ b/apps/dokploy/lib/password-utils.ts
@@ -0,0 +1,37 @@
+const DEFAULT_PASSWORD_LENGTH = 20;
+const DEFAULT_PASSWORD_CHARSET =
+	"abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
+
+export const generateRandomPassword = (
+	length: number = DEFAULT_PASSWORD_LENGTH,
+	charset: string = DEFAULT_PASSWORD_CHARSET,
+) => {
+	const safeLength = Number.isFinite(length) && length > 0
+		? Math.floor(length)
+		: DEFAULT_PASSWORD_LENGTH;
+
+	if (safeLength <= 0 || charset.length === 0) {
+		return "";
+	}
+
+	const cryptoApi =
+		typeof globalThis !== "undefined" ? globalThis.crypto : undefined;
+
+	if (!cryptoApi?.getRandomValues) {
+		let fallback = "";
+		for (let i = 0; i < safeLength; i += 1) {
+			fallback += charset[Math.floor(Math.random() * charset.length)];
+		}
+		return fallback;
+	}
+
+	const values = new Uint32Array(safeLength);
+	cryptoApi.getRandomValues(values);
+
+	let result = "";
+	for (const value of values) {
+		result += charset[value % charset.length];
+	}
+
+	return result;
+};