Added frontend checks for secret names (#35)

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 (
       <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") {
@@ -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"
           />
           <div
@@ -78,7 +94,7 @@ const DashboardInputField = ({
               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) {

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 (
     <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>
@@ -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(
@@ -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))}
                         />
                       ))}
                   </div>
@@ -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>