Obfuscate environment variables

src-web/components/core/Editor/Editor.tsx

@@ -9,7 +9,6 @@ import {
   cloneElement,
   forwardRef,
   isValidElement,
-  memo,
   useCallback,
   useEffect,
   useImperativeHandle,
@@ -57,7 +56,7 @@ export interface EditorProps {
   actions?: ReactNode;
 }
 
-const _Editor = forwardRef<EditorView | undefined, EditorProps>(function Editor(
+export const Editor = forwardRef<EditorView | undefined, EditorProps>(function Editor(
   {
     readOnly,
     type = 'text',
@@ -295,8 +294,6 @@ const _Editor = forwardRef<EditorView | undefined, EditorProps>(function Editor(
   );
 });
 
-export const Editor = memo(_Editor);
-
 function getExtensions({
   container,
   readOnly,

src-web/components/core/Input.tsx

@@ -2,6 +2,7 @@ import classNames from 'classnames';
 import type { EditorView } from 'codemirror';
 import type { HTMLAttributes, ReactNode } from 'react';
 import { forwardRef, useCallback, useMemo, useRef, useState } from 'react';
+import { useStateSyncDefault } from '../../hooks/useStateSyncDefault';
 import type { EditorProps } from './Editor';
 import { Editor } from './Editor';
 import { IconButton } from './IconButton';
@@ -69,7 +70,7 @@ export const Input = forwardRef<EditorView | undefined, InputProps>(function Inp
   }: InputProps,
   ref,
 ) {
-  const [obscured, setObscured] = useState(type === 'password');
+  const [obscured, setObscured] = useStateSyncDefault(type === 'password');
   const [currentValue, setCurrentValue] = useState(defaultValue ?? '');
   const [focused, setFocused] = useState(false);
 
@@ -181,9 +182,10 @@ export const Input = forwardRef<EditorView | undefined, InputProps>(function Inp
           <IconButton
             title={obscured ? `Show ${label}` : `Obscure ${label}`}
             size="xs"
-            className="mr-0.5"
+            className="mr-0.5 group/obscure !h-auto my-0.5"
+            iconClassName="text-gray-500 group-hover/obscure:text-gray-800"
             iconSize="sm"
-            icon={obscured ? 'eyeClosed' : 'eye'}
+            icon={obscured ? 'eye' : 'eyeClosed'}
             onClick={() => setObscured((o) => !o)}
           />
         )}

src-web/components/core/PairEditor.tsx

@@ -22,6 +22,7 @@ export type PairEditorProps = {
   className?: string;
   namePlaceholder?: string;
   valuePlaceholder?: string;
+  valueType?: 'text' | 'password';
   nameAutocomplete?: GenericCompletionConfig;
   valueAutocomplete?: (name: string) => GenericCompletionConfig | undefined;
   nameAutocompleteVariables?: boolean;
@@ -51,6 +52,7 @@ export const PairEditor = memo(function PairEditor({
   nameAutocompleteVariables,
   namePlaceholder,
   nameValidate,
+  valueType,
   onChange,
   pairs: originalPairs,
   valueAutocomplete,
@@ -176,6 +178,7 @@ export const PairEditor = memo(function PairEditor({
               allowFileValues={allowFileValues}
               nameAutocompleteVariables={nameAutocompleteVariables}
               valueAutocompleteVariables={valueAutocompleteVariables}
+              valueType={valueType}
               forceFocusPairId={forceFocusPairId}
               forceUpdateKey={forceUpdateKey}
               nameAutocomplete={nameAutocomplete}
@@ -218,6 +221,7 @@ type FormRowProps = {
   | 'valueAutocomplete'
   | 'nameAutocompleteVariables'
   | 'valueAutocompleteVariables'
+  | 'valueType'
   | 'namePlaceholder'
   | 'valuePlaceholder'
   | 'nameValidate'
@@ -246,6 +250,7 @@ const FormRow = memo(function FormRow({
   valueAutocompleteVariables,
   valuePlaceholder,
   valueValidate,
+  valueType,
 }: FormRowProps) {
   const { id } = pairContainer;
   const ref = useRef<HTMLDivElement>(null);
@@ -397,6 +402,7 @@ const FormRow = memo(function FormRow({
               name="value"
               onChange={handleChangeValueText}
               onFocus={handleFocus}
+              type={isLast ? 'text' : valueType}
               placeholder={valuePlaceholder ?? 'value'}
               autocomplete={valueAutocomplete?.(pairContainer.pair.name)}
               autocompleteVariables={valueAutocompleteVariables}