Skip to content

Commit

Permalink
Added frontend checks for secret names (#35)
Browse files Browse the repository at this point in the history
  • Loading branch information
@vmatsiiako
vmatsiiako committed Nov 28, 2022
1 parent 634d5fe commit 2fe45ec
Show file tree
Hide file tree
Showing 2 changed files with 69 additions and 38 deletions.
28 changes: 22 additions & 6 deletions frontend/components/dashboard/DashboardInputField.js
View file
Original file line number Diff line number Diff line change
@@ -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";

Expand Down Expand Up @@ -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 = ({
Expand All @@ -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 (
<div className="flex-col w-full">
<div
className={`group relative flex flex-col justify-center w-full max-w-2xl border border-mineshaft-500 rounded-md`}
className={`group relative flex flex-col justify-center w-full max-w-2xl border ${error ? "border-red" : "border-mineshaft-500"} rounded-md`}
>
<input
onChange={(e) => 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"
/>
</div>
{startsWithNumber &&
<p className="text-red text-xs mt-0.5 mx-1 mb-2 max-w-xs">
Can't start with a number
</p>
}
{hasDuplicates && !startsWithNumber &&
<p className="text-red text-xs mt-0.5 mx-1 mb-2 max-w-xs">
Secret names should be unique
</p>
}
</div>
);
} else if (type === "value") {
Expand All @@ -70,15 +86,15 @@ 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"
/>
<div
className={`${
blurred
? "text-bunker-800 group-hover:text-gray-400 peer-focus:text-gray-400 peer-active:text-gray-400"
: ""
} flex flex-row font-mono absolute z-0 ph-no-capture bg-bunker-800 h-9 rounded-md 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-100`}
} flex flex-row font-mono absolute z-0 ph-no-capture bg-bunker-800 h-9 rounded-md text-gray-400 text-md px-2 py-1.5 w-full min-w-16 outline-none focus:ring-2 focus:ring-primary/50 duration-100`}
>
{findReferences(value).map((texts, id) => {
if (id % 2 == 0 || texts.length <= 2) {
Expand Down
79 changes: 47 additions & 32 deletions frontend/pages/dashboard/[id].js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 = ({
Expand All @@ -65,19 +66,21 @@ const KeyPair = ({
modifyValue,
modifyVisibility,
isBlurred,
duplicates
}) => {
const [randomStringLength, setRandomStringLength] = useState(32);

return (
<div className="px-1 flex flex-col items-center ml-1">
<div className="relative flex flex-row justify-between w-full max-w-5xl mr-auto max-h-10 my-1 items-center px-2">
<div className="relative flex flex-row justify-between w-full max-w-5xl mr-auto max-h-14 my-1 items-start px-2">
<div className="min-w-xl w-96">
<div className="flex items-center md:px-1 rounded-lg mt-4 md:mt-0 max-h-10">
<div className="flex items-center md:px-1 rounded-lg mt-4 md:mt-0 max-h-16">
<DashboardInputField
onChangeHandler={modifyKey}
type="varName"
index={keyPair[1]}
value={keyPair[2]}
duplicates={duplicates}
/>
</div>
</div>
Expand Down Expand Up @@ -112,7 +115,7 @@ const KeyPair = ({
leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95"
>
<Menu.Items className="absolute z-40 right-0 mt-0.5 w-[20rem] origin-top-right rounded-md bg-bunker border border-mineshaft-700 shadow-lg ring-1 ring-black z-20 ring-opacity-5 focus:outline-none px-1 py-1">
<Menu.Items className="absolute z-50 drop-shadow-xl right-0 mt-0.5 w-[20rem] origin-top-right rounded-md bg-bunker border border-mineshaft-500 shadow-lg ring-1 ring-black z-20 ring-opacity-5 focus:outline-none px-1 py-1">
<div
onClick={() =>
modifyVisibility(
Expand Down Expand Up @@ -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;

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,
});
}
});

/**
* 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" });
}
};

Expand Down Expand Up @@ -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))}
/>
))}
</div>
Expand Down Expand Up @@ -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))}
/>
))}
</div>
Expand Down

0 comments on commit 2fe45ec

Please sign in to comment.