cp dines

Author: dines-rl

src/components/SecretCreatePage.tsx

@@ -301,13 +301,11 @@ export const SecretCreatePage = ({
             const value = formData[field.key as keyof FormData] as string;
             const hasError =
               field.key === "value" && validationError === "Value is required";
-            // Display masked value when not active
-            const maskedValue = "*".repeat(value.length);
             return (
               <FormTextInput
                 key={field.key}
                 label={field.label}
-                value={isActive ? value : maskedValue}
+                value={value}
                 onChange={(newValue) => {
                   setFormData({ ...formData, [field.key]: newValue });
                   if (validationError) {
@@ -318,6 +316,7 @@ export const SecretCreatePage = ({
                 isActive={isActive}
                 placeholder="Enter secret value"
                 error={hasError ? validationError : undefined}
+                mask="*"
               />
             );
           }

src/components/form/FormTextInput.tsx

@@ -16,6 +16,8 @@ export interface FormTextInputProps {
   error?: string;
   /** Called when Enter is pressed in the text input */
   onSubmit?: () => void;
+  /** Character to mask input with (e.g., "*" for passwords) */
+  mask?: string;
 }
 
 export const FormTextInput = ({
@@ -26,7 +28,11 @@ export const FormTextInput = ({
   placeholder,
   error,
   onSubmit,
+  mask,
 }: FormTextInputProps) => {
+  // Display value: use mask character if provided
+  const displayValue = mask && value ? mask.repeat(value.length) : value;
+
   return (
     <FormField label={label} isActive={isActive} error={error}>
       {isActive ? (
@@ -35,10 +41,11 @@ export const FormTextInput = ({
           onChange={onChange}
           placeholder={placeholder}
           onSubmit={onSubmit}
+          mask={mask}
         />
       ) : (
         <Text color={error ? colors.error : colors.text}>
-          {value || "(empty)"}
+          {displayValue || "(empty)"}
         </Text>
       )}
     </FormField>