From 1faa8898cde3856e508afdf5c4904279ed6c4f18 Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Sun, 24 Aug 2025 20:28:39 +0000
Subject: [PATCH] Replace custom password input with reusable PasswordInput
 component

Co-authored-by: benny <benny@comfydeploy.com>
---
 src/components/machine/secrets-selector.tsx | 102 ++++----------------
 src/components/ui/password-input.tsx        |  64 ++++++++++++
 2 files changed, 85 insertions(+), 81 deletions(-)
 create mode 100644 src/components/ui/password-input.tsx

diff --git a/src/components/machine/secrets-selector.tsx b/src/components/machine/secrets-selector.tsx
index 01c2e358..8894a183 100644
--- a/src/components/machine/secrets-selector.tsx
+++ b/src/components/machine/secrets-selector.tsx
@@ -4,8 +4,6 @@ import type React from "react";
 
 import {
   ArrowLeft,
-  Eye,
-  EyeOff,
   KeyRound,
   Link,
   Link2Off,
@@ -59,12 +57,13 @@ import {
 import { toast } from "sonner";
 import { RebuildMachineDialog } from "../machines/machine-list";
 import { Badge } from "../ui/badge";
+import { PasswordInput } from "../ui/password-input";
 
 export function SecretsSelector({ machine }: { machine: any }) {
   const [visibleValues, setVisibleValues] = useState<Record<number, boolean>>(
     {},
   );
-  const [showNewValue, setShowNewValue] = useState(false);
+
   const [isAddingSecret, setIsAddingSecret] = useState(false);
   const [isEditingSecret, setIsEditingSecret] = useState(false);
   const [newGroupName, setNewGroupName] = useState("");
@@ -317,9 +316,7 @@ export function SecretsSelector({ machine }: { machine: any }) {
     }));
   };
 
-  const toggleShowNewValue = () => {
-    setShowNewValue(!showNewValue);
-  };
+
 
   const selectGroup = async (groupId: string) => {
     try {
@@ -415,31 +412,12 @@ export function SecretsSelector({ machine }: { machine: any }) {
                 </div>
                 <div className="grid gap-2">
                   <Label htmlFor="secret-value">Value</Label>
-                  <div className="relative">
-                    <Input
-                      id="secret-value"
-                      value={newSecretValue}
-                      onChange={(e) => setNewSecretValue(e.target.value)}
-                      type={showNewValue ? "text" : "password"}
-                      placeholder="Enter secret value"
-                    />
-                    <Button
-                      type="button"
-                      variant="ghost"
-                      size="sm"
-                      className="absolute top-0 right-0 h-full px-3 py-2 text-muted-foreground"
-                      onClick={toggleShowNewValue}
-                    >
-                      {showNewValue ? (
-                        <EyeOff className="h-4 w-4" />
-                      ) : (
-                        <Eye className="h-4 w-4" />
-                      )}
-                      <span className="sr-only">
-                        {showNewValue ? "Hide" : "Show"} value
-                      </span>
-                    </Button>
-                  </div>
+                  <PasswordInput
+                    id="secret-value"
+                    value={newSecretValue}
+                    onChange={(e) => setNewSecretValue(e.target.value)}
+                    placeholder="Enter secret value"
+                  />
                 </div>
               </div>
             </div>
@@ -667,31 +645,12 @@ export function SecretsSelector({ machine }: { machine: any }) {
               </div>
               <div className="grid gap-2">
                 <Label htmlFor="secret-value">Value</Label>
-                <div className="relative">
-                  <Input
-                    id="secret-value"
-                    value={newSecretValue}
-                    onChange={(e) => setNewSecretValue(e.target.value)}
-                    type={showNewValue ? "text" : "password"}
-                    placeholder="Enter secret value"
-                  />
-                  <Button
-                    type="button"
-                    variant="ghost"
-                    size="sm"
-                    className="absolute top-0 right-0 h-full px-3 py-2 text-muted-foreground"
-                    onClick={toggleShowNewValue}
-                  >
-                    {showNewValue ? (
-                      <EyeOff className="h-4 w-4" />
-                    ) : (
-                      <Eye className="h-4 w-4" />
-                    )}
-                    <span className="sr-only">
-                      {showNewValue ? "Hide" : "Show"} value
-                    </span>
-                  </Button>
-                </div>
+                <PasswordInput
+                  id="secret-value"
+                  value={newSecretValue}
+                  onChange={(e) => setNewSecretValue(e.target.value)}
+                  placeholder="Enter secret value"
+                />
               </div>
             </div>
           </div>
@@ -746,31 +705,12 @@ export function SecretsSelector({ machine }: { machine: any }) {
               </div>
               <div className="grid gap-2">
                 <Label htmlFor="edit-secret-value">Value</Label>
-                <div className="relative">
-                  <Input
-                    id="edit-secret-value"
-                    value={editSecretValue}
-                    onChange={(e) => setEditSecretValue(e.target.value)}
-                    type={showNewValue ? "text" : "password"}
-                    placeholder="Enter secret value"
-                  />
-                  <Button
-                    type="button"
-                    variant="ghost"
-                    size="sm"
-                    className="absolute top-0 right-0 h-full px-3 py-2 text-muted-foreground"
-                    onClick={toggleShowNewValue}
-                  >
-                    {showNewValue ? (
-                      <EyeOff className="h-4 w-4" />
-                    ) : (
-                      <Eye className="h-4 w-4" />
-                    )}
-                    <span className="sr-only">
-                      {showNewValue ? "Hide" : "Show"} password
-                    </span>
-                  </Button>
-                </div>
+                <PasswordInput
+                  id="edit-secret-value"
+                  value={editSecretValue}
+                  onChange={(e) => setEditSecretValue(e.target.value)}
+                  placeholder="Enter secret value"
+                />
               </div>
             </div>
           </div>
diff --git a/src/components/ui/password-input.tsx b/src/components/ui/password-input.tsx
new file mode 100644
index 00000000..addf6a51
--- /dev/null
+++ b/src/components/ui/password-input.tsx
@@ -0,0 +1,64 @@
+import type React from "react";
+import { useState } from "react";
+import { Eye, EyeOff } from "lucide-react";
+import { Button } from "./button";
+import { Input } from "./input";
+import { cn } from "@/lib/utils";
+
+export interface PasswordInputProps
+  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type"> {
+  showToggle?: boolean;
+}
+
+const PasswordInput = React.forwardRef<HTMLInputElement, PasswordInputProps>(
+  ({ className, showToggle = true, ...props }, ref) => {
+    const [showPassword, setShowPassword] = useState(false);
+
+    const togglePasswordVisibility = () => {
+      setShowPassword((prev) => !prev);
+    };
+
+    if (!showToggle) {
+      return (
+        <Input
+          type="password"
+          className={className}
+          ref={ref}
+          {...props}
+        />
+      );
+    }
+
+    return (
+      <div className="relative">
+        <Input
+          type={showPassword ? "text" : "password"}
+          className={cn("pr-10", className)}
+          ref={ref}
+          {...props}
+        />
+        <Button
+          type="button"
+          variant="ghost"
+          size="sm"
+          className="absolute right-0 top-1/2 -translate-y-1/2 h-8 w-8 p-0 text-muted-foreground hover:text-foreground"
+          onClick={togglePasswordVisibility}
+          tabIndex={-1}
+        >
+          {showPassword ? (
+            <EyeOff className="h-4 w-4" />
+          ) : (
+            <Eye className="h-4 w-4" />
+          )}
+          <span className="sr-only">
+            {showPassword ? "Hide" : "Show"} password
+          </span>
+        </Button>
+      </div>
+    );
+  },
+);
+
+PasswordInput.displayName = "PasswordInput";
+
+export { PasswordInput };
\ No newline at end of file