feat: add secret input for secret key sense

Author: moonrailgun

src/client/components/aiGateway/AIGatewayEditForm.tsx

@@ -13,6 +13,7 @@ import {
   FormMessage,
 } from '@/components/ui/form';
 import { Input } from '@/components/ui/input';
+import { SecretInput } from '@/components/ui/secret-input';
 import { useForm } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
 import React from 'react';
@@ -90,10 +91,11 @@ export const AIGatewayEditForm: React.FC<AIGatewayEditFormProps> = React.memo(
                   <FormItem>
                     <FormLabel optional={true}>{t('Model API Key')}</FormLabel>
                     <FormControl>
-                      <Input
-                        type="password"
-                        {...field}
-                        value={field.value ?? ''}
+                      <SecretInput
+                        value={field.value}
+                        onChange={field.onChange}
+                        placeholder="sk-..."
+                        maskPlaceholder="••••••••••••••••"
                       />
                     </FormControl>
                     <FormDescription>

src/client/components/ui/secret-input.stories.tsx

@@ -0,0 +1,102 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { fn } from 'storybook/test';
+import { SecretInput } from './secret-input';
+import React from 'react';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { z } from 'zod';
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from './form';
+import { Button } from './button';
+
+const meta = {
+  title: 'Components/UI/SecretInput',
+  component: SecretInput,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component:
+          'A secure input component for sensitive data like API keys. Shows a masked placeholder when there is an existing value, clears on focus, and only submits new values when user types.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    value: {
+      control: 'text',
+      description: 'The existing secret value (will be hidden)',
+    },
+    placeholder: {
+      control: 'text',
+      description: 'Placeholder text when no value or after focus',
+    },
+    maskPlaceholder: {
+      control: 'text',
+      description: 'Placeholder text shown when there is an existing value',
+    },
+    onChange: {
+      description: 'Callback when user types a new value',
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Whether the input is disabled',
+    },
+  },
+  args: {
+    onChange: fn(),
+  },
+} satisfies Meta<typeof SecretInput>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * Default state with no existing value - shows normal placeholder
+ */
+export const Empty: Story = {
+  args: {
+    value: null,
+    placeholder: 'Enter your API key',
+  },
+};
+
+/**
+ * With an existing secret value - shows masked placeholder (******)
+ * Click to focus and the placeholder will change to normal text
+ */
+export const WithExistingValue: Story = {
+  args: {
+    value: 'sk-1234567890abcdef',
+    placeholder: 'Enter new API key',
+  },
+};
+
+/**
+ * Custom mask placeholder - use bullet points or other characters
+ */
+export const CustomMaskPlaceholder: Story = {
+  args: {
+    value: 'existing-secret-key-value',
+    placeholder: 'Enter new value',
+    maskPlaceholder: '••••••••••••••••',
+  },
+};
+
+/**
+ * Disabled state
+ */
+export const Disabled: Story = {
+  args: {
+    value: 'existing-key',
+    placeholder: 'Enter API key',
+    disabled: true,
+  },
+};

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

@@ -0,0 +1,114 @@
+import * as React from 'react';
+import { cn } from '@/utils/style';
+
+export interface SecretInputProps
+  extends Omit<
+    React.InputHTMLAttributes<HTMLInputElement>,
+    'type' | 'value' | 'onChange'
+  > {
+  value?: string | null;
+  onChange?: (value: string) => void;
+  /**
+   * The placeholder to show when the field has an existing value.
+   * @default "******"
+   */
+  maskPlaceholder?: string;
+}
+
+/**
+ * SecretInput - A secure input component for sensitive data like API keys
+ *
+ * Features:
+ * - Shows masked placeholder (******) when there's an existing value
+ * - Actual field value is empty until user starts typing
+ * - Clears the masked placeholder on focus
+ * - Only submits new value if user has entered something
+ * - Perfect for edit forms where you don't want to expose existing secrets
+ *
+ * @example
+ * ```tsx
+ * <SecretInput
+ *   value={existingApiKey}
+ *   onChange={(newValue) => setApiKey(newValue)}
+ *   placeholder="Enter your API key"
+ * />
+ * ```
+ */
+const SecretInput = React.forwardRef<HTMLInputElement, SecretInputProps>(
+  (
+    {
+      className,
+      value,
+      onChange,
+      maskPlaceholder = '******',
+      placeholder,
+      ...props
+    },
+    ref
+  ) => {
+    const [internalValue, setInternalValue] = React.useState('');
+    const [isFocused, setIsFocused] = React.useState(false);
+    const [hasBeenTouched, setHasBeenTouched] = React.useState(false);
+
+    // Check if there's an existing value (from props)
+    const hasExistingValue = Boolean(value);
+
+    // Determine what placeholder to show
+    const effectivePlaceholder = React.useMemo(() => {
+      if (hasBeenTouched) {
+        // After user has interacted, show normal placeholder
+        return placeholder;
+      }
+      if (hasExistingValue && !isFocused) {
+        // Show masked placeholder when there's existing value and not focused
+        return maskPlaceholder;
+      }
+      // Show normal placeholder
+      return placeholder;
+    }, [
+      hasBeenTouched,
+      hasExistingValue,
+      isFocused,
+      placeholder,
+      maskPlaceholder,
+    ]);
+
+    const handleFocus = (e: React.FocusEvent<HTMLInputElement>) => {
+      setIsFocused(true);
+      setHasBeenTouched(true);
+      props.onFocus?.(e);
+    };
+
+    const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {
+      setIsFocused(false);
+      props.onBlur?.(e);
+    };
+
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      const newValue = e.target.value;
+      setInternalValue(newValue);
+      setHasBeenTouched(true);
+      onChange?.(newValue);
+    };
+
+    return (
+      <input
+        type="password"
+        className={cn(
+          'flex h-9 w-full rounded-md border border-zinc-200 bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-zinc-500 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-zinc-950 disabled:cursor-not-allowed disabled:opacity-50 dark:border-zinc-800 dark:placeholder:text-zinc-400 dark:focus-visible:ring-zinc-300',
+          className
+        )}
+        ref={ref}
+        value={internalValue}
+        onChange={handleChange}
+        onFocus={handleFocus}
+        onBlur={handleBlur}
+        placeholder={effectivePlaceholder}
+        {...props}
+      />
+    );
+  }
+);
+SecretInput.displayName = 'SecretInput';
+
+export { SecretInput };