From 2fe45ec89847ef5bf86efd004658145e47d4e293 Mon Sep 17 00:00:00 2001 From: Vladyslav Matsiiako Date: Sun, 27 Nov 2022 19:10:49 -0500 Subject: [PATCH] Added frontend checks for secret names (#35) --- .../dashboard/DashboardInputField.js | 28 +++++-- frontend/pages/dashboard/[id].js | 79 +++++++++++-------- 2 files changed, 69 insertions(+), 38 deletions(-) diff --git a/frontend/components/dashboard/DashboardInputField.js b/frontend/components/dashboard/DashboardInputField.js index 53733c38b2..c8e42233ab 100644 --- a/frontend/components/dashboard/DashboardInputField.js +++ b/frontend/components/dashboard/DashboardInputField.js @@ -1,4 +1,4 @@ -import React, { Fragment } from "react"; +import React from "react"; import { faCircle } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; @@ -31,6 +31,7 @@ const findReferences = (text) => { * @param {string} obj.type - whether the input field is for a Key Name or for a Key Value * @param {string} obj.value - value of the InputField * @param {boolean} obj.blurred - whether the input field should be blurred (behind the gray dots) or not; this can be turned on/off in the dashboard + * @param {string[]} obj.duplicates - list of all the suplicated key names on the dashboard * @returns */ const DashboardInputField = ({ @@ -39,21 +40,36 @@ const DashboardInputField = ({ type, value, blurred, + duplicates }) => { if (type === "varName") { + const startsWithNumber = !isNaN(value.charAt(0)) && value != ""; + const hasDuplicates = duplicates?.includes(value); + const error = startsWithNumber || hasDuplicates; + return (
onChangeHandler(e.target.value, index)} + onChange={(e) => onChangeHandler(e.target.value.toUpperCase(), index)} type={type} value={value} - className="asolute z-10 peer font-mono ph-no-capture bg-bunker-800 rounded-md caret-white text-gray-400 text-md px-2 py-1.5 w-full min-w-16 outline-none focus:ring-4 focus:ring-primary/50 duration-200" + className={`asolute z-10 peer font-mono ph-no-capture bg-bunker-800 rounded-md caret-white text-gray-400 text-md px-2 py-1.5 w-full min-w-16 outline-none focus:ring-2 ${error ? "focus:ring-red/50" : "focus:ring-primary/50"} duration-200`} spellCheck="false" />
+ {startsWithNumber && +

+ Can't start with a number +

+ } + {hasDuplicates && !startsWithNumber && +

+ Secret names should be unique +

+ }
); } else if (type === "value") { @@ -70,7 +86,7 @@ const DashboardInputField = ({ blurred ? "text-transparent group-hover:text-transparent focus:text-transparent active:text-transparent" : "" - } asolute z-10 peer font-mono ph-no-capture bg-transparent rounded-md caret-white text-transparent text-md px-2 py-1.5 w-full min-w-16 outline-none focus:ring-4 focus:ring-primary/50 duration-200`} + } asolute z-10 peer font-mono ph-no-capture bg-transparent rounded-md caret-white text-transparent text-md px-2 py-1.5 w-full min-w-16 outline-none focus:ring-2 focus:ring-primary/50 duration-200`} spellCheck="false" />
{findReferences(value).map((texts, id) => { if (id % 2 == 0 || texts.length <= 2) { diff --git a/frontend/pages/dashboard/[id].js b/frontend/pages/dashboard/[id].js index 23fa4921ae..18339ac010 100644 --- a/frontend/pages/dashboard/[id].js +++ b/frontend/pages/dashboard/[id].js @@ -56,6 +56,7 @@ const envMapping = { * @param {function} obj.modifyValue - modify the value of a certain environment variable * @param {function} obj.modifyVisibility - switch between public/private visibility * @param {boolean} obj.isBlurred - if the blurring setting is turned on + * @param {string[]} obj.duplicates - list of all the duplicates secret names on the dashboard * @returns */ const KeyPair = ({ @@ -65,19 +66,21 @@ const KeyPair = ({ modifyValue, modifyVisibility, isBlurred, + duplicates }) => { const [randomStringLength, setRandomStringLength] = useState(32); return (
-
+
-
+
@@ -112,7 +115,7 @@ const KeyPair = ({ leaveFrom="transform opacity-100 scale-100" leaveTo="transform opacity-0 scale-95" > - +
modifyVisibility( @@ -372,37 +375,47 @@ export default function Dashboard() { ...data.map((row) => ({ [row[2]]: [row[3], row[4]] })) ); - // Once "Save changed is clicked", disable that button - setButtonReady(false); - pushKeys(obj, router.query.id, env); + // Checking if any of the secret keys start with a number - if so, don't do anything + const nameErrors = !Object.keys(obj).map(key => !isNaN(key.charAt(0))).every(v => v === false); + const duplicatesExist = data?.map(item => item[2]).filter((item, index) => index !== data?.map(item => item[2]).indexOf(item)).length > 0; - /** - * Check which integrations are active for this project and environment - * If there are any, update environment variables for those integrations - */ - let integrations = await getWorkspaceIntegrations({ - workspaceId: router.query.id, - }); - integrations.map(async (integration) => { - if ( - envMapping[env] == integration.environment && - integration.isActive == true - ) { - let objIntegration = Object.assign( - {}, - ...data.map((row) => ({ [row[2]]: row[3] })) - ); - await pushKeysIntegration({ - obj: objIntegration, - integrationId: integration._id, - }); + if (nameErrors) { + console.log("Solve all name errors first!"); + } else if (duplicatesExist) { + console.log("Remove the duplicated entries first!"); + } else { + // Once "Save changed is clicked", disable that button + setButtonReady(false); + pushKeys(obj, router.query.id, env); + + /** + * Check which integrations are active for this project and environment + * If there are any, update environment variables for those integrations + */ + let integrations = await getWorkspaceIntegrations({ + workspaceId: router.query.id, + }); + integrations.map(async (integration) => { + if ( + envMapping[env] == integration.environment && + integration.isActive == true + ) { + let objIntegration = Object.assign( + {}, + ...data.map((row) => ({ [row[2]]: row[3] })) + ); + await pushKeysIntegration({ + obj: objIntegration, + integrationId: integration._id, + }); + } + }); + + // If this user has never saved environment variables before, show them a prompt to read docs + if (!hasUserEverPushed) { + setCheckDocsPopUpVisible(true); + await registerUserAction({ action: "first_time_secrets_pushed" }); } - }); - - // If this user has never saved environment variables before, show them a prompt to read docs - if (!hasUserEverPushed) { - setCheckDocsPopUpVisible(true); - await registerUserAction({ action: "first_time_secrets_pushed" }); } }; @@ -642,6 +655,7 @@ export default function Dashboard() { modifyKey={listenChangeKey} modifyVisibility={listenChangeVisibility} isBlurred={blurred} + duplicates={data?.map(item => item[2]).filter((item, index) => index !== data?.map(item => item[2]).indexOf(item))} /> ))}
@@ -689,6 +703,7 @@ export default function Dashboard() { modifyKey={listenChangeKey} modifyVisibility={listenChangeVisibility} isBlurred={blurred} + duplicates={data?.map(item => item[2]).filter((item, index) => index !== data?.map(item => item[2]).indexOf(item))} /> ))}