Merge pull request #7 from ergomake/paste-env

support paste of a .env file to env vars form

front/src/components/HidableSpan.tsx

@@ -0,0 +1,21 @@
+import React, { useCallback, useState } from 'react'
+
+interface Props extends React.HTMLAttributes<unknown> {
+  startHidden?: boolean
+}
+function HidableSpan(props: Props) {
+  const { startHidden, ...spanProps } = props
+  const [hidden, setHidden] = useState(props.startHidden ?? false)
+
+  const onToggle = useCallback(() => {
+    setHidden((h) => !h)
+  }, [setHidden])
+
+  return (
+    <span {...spanProps} onClick={onToggle}>
+      {hidden ? '************' : props.children}
+    </span>
+  )
+}
+
+export default HidableSpan

front/src/components/Input.tsx

@@ -6,6 +6,8 @@ type InputProps = {
   value: string
   placeholder: string
   disabled?: boolean
+  type?: React.HTMLInputTypeAttribute
+  onPaste?: React.ClipboardEventHandler<HTMLInputElement>
 }
 
 const Input = ({
@@ -14,11 +16,13 @@ const Input = ({
   value,
   placeholder,
   disabled,
+  type,
+  onPaste,
 }: InputProps) => {
   return (
     <div className="pr-4">
       <input
-        type="text"
+        type={type ?? 'text'}
         name={label}
         value={value}
         onChange={(e) => {
@@ -30,6 +34,7 @@ const Input = ({
           { 'bg-gray-100 dark:bg-neutral-700': disabled }
         )}
         disabled={disabled}
+        onPaste={onPaste}
       />
     </div>
   )