fix: fix issue [APP-10752]

Author: moonrailgun

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

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { LuX } from 'react-icons/lu';
 import { cn } from '@/utils/style';
 
 export interface SecretInputProps
@@ -13,6 +14,11 @@ export interface SecretInputProps
    * @default "******"
    */
   maskPlaceholder?: string;
+  /**
+   * Whether to allow clearing the existing value via the clear button.
+   * @default true
+   */
+  allowClear?: boolean;
 }
 
 /**
@@ -42,70 +48,62 @@ const SecretInput = React.forwardRef<HTMLInputElement, SecretInputProps>(
       onChange,
       maskPlaceholder = '******',
       placeholder,
+      allowClear = true,
+      disabled,
+      onFocus,
       ...props
     },
     ref
   ) => {
     const [internalValue, setInternalValue] = React.useState('');
-    const [isFocused, setIsFocused] = React.useState(false);
-    const [hasBeenTouched, setHasBeenTouched] = React.useState(false);
+    const [hasInteracted, setHasInteracted] = React.useState(false);
 
-    // Check if there's an existing value (from props)
     const hasExistingValue = Boolean(value);
+    const showMask = hasExistingValue && !hasInteracted;
+    const showClearBtn =
+      allowClear && !disabled && (hasExistingValue || internalValue !== '');
 
-    // 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);
+    const emit = (next: string) => {
+      setHasInteracted(true);
+      setInternalValue(next);
+      onChange?.(next);
     };
 
     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
+      <div className="relative w-full">
+        <input
+          {...props}
+          ref={ref}
+          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',
+            showClearBtn && 'pr-8',
+            className
+          )}
+          value={internalValue}
+          placeholder={showMask ? maskPlaceholder : placeholder}
+          disabled={disabled}
+          onChange={(e) => emit(e.target.value)}
+          onFocus={(e) => {
+            setHasInteracted(true);
+            onFocus?.(e);
+          }}
+        />
+        {showClearBtn && (
+          <button
+            type="button"
+            tabIndex={-1}
+            aria-label="Clear"
+            onClick={(e) => {
+              e.preventDefault();
+              emit('');
+            }}
+            className="absolute right-2 top-1/2 flex h-5 w-5 -translate-y-1/2 items-center justify-center rounded-sm text-zinc-500 hover:bg-zinc-100 hover:text-zinc-900 dark:text-zinc-400 dark:hover:bg-zinc-800 dark:hover:text-zinc-100"
+          >
+            <LuX className="h-3.5 w-3.5" />
+          </button>
         )}
-        ref={ref}
-        value={internalValue}
-        onChange={handleChange}
-        onFocus={handleFocus}
-        onBlur={handleBlur}
-        placeholder={effectivePlaceholder}
-        {...props}
-      />
+      </div>
     );
   }
 );