483 - password-show-and-hide-functionality-in-variableEditor-for-secret (#486)

Author: chandanrakholia

src/renderer/components/shared/settings/VariableTab/VariableEditor.tsx

@@ -14,6 +14,7 @@ import { memo, useEffect } from 'react';
 import { produce } from 'immer';
 import { Checkbox } from '@/components/ui/checkbox';
 import { Trash2 } from 'lucide-react';
+import { SecretInput } from '@/components/ui/secret-input';
 
 export interface VariableEditorProps {
   variables: VariableObjectWithKey[];
@@ -52,7 +53,7 @@ export const VariableEditor = memo<VariableEditorProps>(
       if (invalidVariableKeys.has('')) return;
       onVariablesChange(
         produce(variables, (variables) => {
-          variables.push({ key: '', value: '' });
+          variables.push({ key: '', value: '', description: '', secret: false });
         })
       );
     };
@@ -109,10 +110,9 @@ export const VariableEditor = memo<VariableEditorProps>(
                   />
                 </TableCell>
                 <TableCell className="break-all">
-                  <input
-                    type="text"
+                  <SecretInput
+                    secret={variable.secret}
                     value={variable.value}
-                    className="w-full bg-transparent outline-none"
                     placeholder="Enter variable value"
                     onChange={(e) => update(index, { value: e.target.value })}
                   />

src/renderer/components/ui/secret-input.tsx

@@ -0,0 +1,38 @@
+import { useState } from 'react';
+import { cn } from '@/lib/utils';
+
+interface SecretInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  secret?: boolean;
+}
+
+export function SecretInput({ secret = false, className, ...props }: SecretInputProps) {
+  const [show, setShow] = useState(false);
+
+  if (!secret) {
+    return (
+      <input
+        type="text"
+        className={cn('w-full bg-transparent outline-none', className)}
+        {...props}
+      />
+    );
+  }
+
+  return (
+    <div className="relative w-full">
+      <input
+        type={show ? 'text' : 'password'}
+        className={cn('w-full bg-transparent pr-12 outline-none', className)}
+        {...props}
+      />
+      <button
+        type="button"
+        className="absolute inset-y-0 right-0 flex items-center text-sm text-text-secondary hover:text-text-primary"
+        onClick={() => setShow((prev) => !prev)}
+        tabIndex={-1}
+      >
+        {show ? 'Hide' : 'Show'}
+      </button>
+    </div>
+  );
+}