diff --git a/frontend/src/helpers/parseEnvVar.ts b/frontend/src/helpers/parseEnvVar.ts new file mode 100644 index 000000000..27640b515 --- /dev/null +++ b/frontend/src/helpers/parseEnvVar.ts @@ -0,0 +1,14 @@ +/** Extracts the key and value from a passed in env string based on the provided delimiters. */ +export const getKeyValue = (pastedContent: string, delimiters: string[]) => { + const foundDelimiter = delimiters.find((delimiter) => pastedContent.includes(delimiter)); + + if (!foundDelimiter) { + return { key: pastedContent.trim(), value: "" }; + } + + const [key, value] = pastedContent.split(foundDelimiter); + return { + key: key.trim(), + value: (value ?? "").trim() + }; +}; diff --git a/frontend/src/views/SecretMainPage/components/CreateSecretForm/CreateSecretForm.tsx b/frontend/src/views/SecretMainPage/components/CreateSecretForm/CreateSecretForm.tsx index ffaa72502..c115a9acb 100644 --- a/frontend/src/views/SecretMainPage/components/CreateSecretForm/CreateSecretForm.tsx +++ b/frontend/src/views/SecretMainPage/components/CreateSecretForm/CreateSecretForm.tsx @@ -1,3 +1,4 @@ +import { ClipboardEvent } from 'react'; import { Controller, useForm } from "react-hook-form"; import { zodResolver } from "@hookform/resolvers/zod"; import { z } from "zod"; @@ -7,6 +8,7 @@ import { Button, FormControl, Input, Modal, ModalContent } from "@app/components import { InfisicalSecretInput } from "@app/components/v2/InfisicalSecretInput"; import { useCreateSecretV3 } from "@app/hooks/api"; import { SecretType } from "@app/hooks/api/types"; +import { getKeyValue } from '@app/helpers/parseEnvVar'; import { PopUpNames, usePopUpAction, usePopUpState } from "../../SecretMainPage.store"; @@ -38,6 +40,7 @@ export const CreateSecretForm = ({ handleSubmit, control, reset, + setValue, formState: { errors, isSubmitting } } = useForm({ resolver: zodResolver(typeSchema) }); const { isOpen } = usePopUpState(PopUpNames.CreateSecretForm); @@ -73,6 +76,16 @@ export const CreateSecretForm = ({ } }; + const handlePaste = (e: ClipboardEvent) => { + e.preventDefault(); + const delimitters = [":", "="]; + const pastedContent = e.clipboardData.getData("text"); + const { key, value } = getKeyValue(pastedContent, delimitters); + + setValue("key", key); + setValue("value", value); + } + return ( diff --git a/frontend/src/views/SecretOverviewPage/components/CreateSecretForm/CreateSecretForm.tsx b/frontend/src/views/SecretOverviewPage/components/CreateSecretForm/CreateSecretForm.tsx index 8a58c4d0f..d61957d74 100644 --- a/frontend/src/views/SecretOverviewPage/components/CreateSecretForm/CreateSecretForm.tsx +++ b/frontend/src/views/SecretOverviewPage/components/CreateSecretForm/CreateSecretForm.tsx @@ -1,3 +1,4 @@ +import { ClipboardEvent } from 'react'; import { Controller, useForm } from "react-hook-form"; import { faWarning } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; @@ -19,6 +20,7 @@ import { InfisicalSecretInput } from "@app/components/v2/InfisicalSecretInput"; import { useWorkspace } from "@app/context"; import { useCreateFolder, useCreateSecretV3, useUpdateSecretV3 } from "@app/hooks/api"; import { SecretType,SecretV3RawSanitized } from "@app/hooks/api/types"; +import { getKeyValue } from '@app/helpers/parseEnvVar'; const typeSchema = z .object({ @@ -54,6 +56,7 @@ export const CreateSecretForm = ({ control, reset, watch, + setValue, formState: { isSubmitting, errors } } = useForm({ resolver: zodResolver(typeSchema) }); const newSecretKey = watch("key"); @@ -133,6 +136,17 @@ export const CreateSecretForm = ({ }); } }; + + const handlePaste = (e: ClipboardEvent) => { + e.preventDefault(); + const delimitters = [":", "="]; + const pastedContent = e.clipboardData.getData("text"); + const { key, value } = getKeyValue(pastedContent, delimitters); + + setValue("key", key); + setValue("value", value); + } + return (