Refactored dashboard to TS - still some bugs and inefficiencies

frontend/components/basic/Toggle.tsx

@@ -28,7 +28,6 @@ interface ToggleProps {
  * @returns 
  */
 export default function Toggle ({ enabled, setEnabled, addOverride, keyName, value, pos, id, deleteOverride }: ToggleProps): JSX.Element {
-  console.log(755, pos, enabled)
   return (
     <Switch
       checked={enabled}

frontend/components/basic/buttons/Button.tsx

@@ -16,7 +16,7 @@ type ButtonProps = {
   size: string;
   icon?: IconProp;
   active?: boolean;
-  iconDisabled?: string;
+  iconDisabled?: IconProp;
   textDisabled?: string;
 };
 

frontend/components/basic/popups/BottomRightPopup.js → frontend/components/basic/popups/BottomRightPopup.tsx

@@ -3,6 +3,16 @@ import { faXmark } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 
+interface PopupProps {
+  buttonText: string;
+  buttonLink: string;
+  titleText: string;
+  emoji: string;
+  textLine1: string;
+  textLine2: string;
+  setCheckDocsPopUpVisible: (value: boolean) => void;
+}
+
 /**
  * This is the notification that pops up at the bottom right when a user performs a certain action
  * @param {object} org 
@@ -23,16 +33,16 @@ export default function BottonRightPopup({
   textLine1,
   textLine2,
   setCheckDocsPopUpVisible,
-}) {
+}: PopupProps): JSX.Element {
   return (
     <div
-      class="z-50 drop-shadow-xl border-gray-600/50 border flex flex-col items-start bg-bunker max-w-xl text-gray-200 pt-3 pb-4 rounded-xl absolute bottom-0 right-0 mr-6 mb-6"
+      className="z-50 drop-shadow-xl border-gray-600/50 border flex flex-col items-start bg-bunker max-w-xl text-gray-200 pt-3 pb-4 rounded-xl absolute bottom-0 right-0 mr-6 mb-6"
       role="alert"
     >
       <div className="flex flex-row items-center justify-between w-full border-b border-gray-600/70 pb-3 px-6">
         <div className="font-bold text-xl mr-2 mt-0.5 flex flex-row">
           <div>{titleText}</div>
-          <div class="ml-2.5">{emoji}</div>
+          <div className="ml-2.5">{emoji}</div>
         </div>
         <button
           className="mt-1"
@@ -44,14 +54,14 @@ export default function BottonRightPopup({
           />
         </button>
       </div>
-      <div class="block sm:inline px-6 mt-4 mb-0.5 text-gray-300">
+      <div className="block sm:inline px-6 mt-4 mb-0.5 text-gray-300">
         {textLine1}
       </div>
-      <div class="block sm:inline mb-4 px-6">{textLine2}</div>
+      <div className="block sm:inline mb-4 px-6">{textLine2}</div>
       <div className="flex flex-row px-6 w-full">
         {/*eslint-disable-next-line react/jsx-no-target-blank */}
         <a
-          class="font-bold p-2 bg-white/10 rounded-md w-full hover:bg-primary duration-200 hover:text-black flex justify-center"
+          className="font-bold p-2 bg-white/10 rounded-md w-full hover:bg-primary duration-200 hover:text-black flex justify-center"
           href={buttonLink}
           target="_blank"
           rel="noopener"

frontend/components/dashboard/DashboardInputField.tsx

@@ -87,7 +87,7 @@ const DashboardInputField = ({
         <div
           className={`group relative whitespace-pre	flex flex-col justify-center w-full max-w-2xl border border-mineshaft-500 rounded-md`}
         >
-          {override == true && <div className='bg-yellow-300 absolute top-[0.1rem] right-[0.1rem] z-10 w-min text-xxs px-1 text-black opacity-80 rounded-sm'>Override enabled</div>}
+          {override == true && <div className='bg-primary-300 absolute top-[0.1rem] right-[0.1rem] z-10 w-min text-xxs px-1 text-black opacity-80 rounded-md'>Override enabled</div>}
           <input
             value={value}
             onChange={(e) => onChangeHandler(e.target.value, position)}
@@ -106,7 +106,7 @@ const DashboardInputField = ({
                 ? 'text-bunker-800 group-hover:text-gray-400 peer-focus:text-gray-400 peer-active:text-gray-400'
                 : ''
             } ${
-              override ? 'text-yellow-300' : 'text-gray-400'
+              override ? 'text-primary-300' : 'text-gray-400'
             }
             absolute flex flex-row whitespace-pre font-mono z-0 ph-no-capture max-w-2xl overflow-x-scroll bg-bunker-800 h-9 rounded-md text-md px-2 py-1.5 w-full min-w-16 outline-none focus:ring-2 focus:ring-primary/50 duration-100 no-scrollbar no-scrollbar::-webkit-scrollbar`}
           >

frontend/components/dashboard/GenerateSecretMenu.tsx

@@ -8,7 +8,7 @@ import { Menu, Transition } from '@headlessui/react';
  * This is the menu that is used to (re)generate secrets (currently we only have ranom hex, in future we will have more options)
  * @returns the popup-menu for randomly generating secrets
  */
-const GenerateSecretMenu = () => {
+const GenerateSecretMenu = ({ modifyValue, position }: { modifyValue: (value: string, position: number) => void; position: number; }) => {
   const [randomStringLength, setRandomStringLength] = useState(32);
 
   return <Menu as="div" className="relative inline-block text-left">
@@ -36,12 +36,12 @@ const GenerateSecretMenu = () => {
             } else if (randomStringLength < 2) {
               setRandomStringLength(2);
             } else {
-              // modifyValue(
-              //   [...Array(randomStringLength)]
-              //     .map(() => Math.floor(Math.random() * 16).toString(16))
-              //     .join(''),
-              //   keyPair.pos
-              // );
+              modifyValue(
+                [...Array(randomStringLength)]
+                  .map(() => Math.floor(Math.random() * 16).toString(16))
+                  .join(''),
+                position
+              );
             }
           }}
           className="relative flex flex-row justify-start items-center cursor-pointer select-none py-2 px-2 rounded-md text-gray-400 hover:bg-white/10 duration-200 hover:text-gray-200 w-full"

frontend/components/dashboard/SideBar.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { faBackward, faDotCircle, faRotateLeft, faX } from '@fortawesome/free-solid-svg-icons';
+import { faDotCircle, faRotateLeft, faX } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
 import Button from '../basic/buttons/Button';
@@ -13,6 +13,7 @@ interface SecretProps {
   key: string;
   value: string;
   pos: number;
+  type: string;
   id: string;
 }
 
@@ -24,13 +25,14 @@ interface OverrideProps {
 }
 
 interface SideBarProps {
-  toggleSidebar: (value: number) => void; 
+  toggleSidebar: (value: string) => void; 
   data: SecretProps[];
-  modifyKey: (value: string) => void; 
-  modifyValue: (value: string) => void; 
-  modifyVisibility: (value: string) => void; 
+  modifyKey: (value: string, position: number) => void; 
+  modifyValue: (value: string, position: number) => void; 
   addOverride: (value: OverrideProps) => void; 
   deleteOverride: (id: string) => void; 
+  buttonReady: boolean;
+  savePush: () => void;
 }
 
 /**
@@ -39,17 +41,21 @@ interface SideBarProps {
  * @param {SecretProps[]} obj.data - data of a certain key valeu pair
  * @param {function} obj.modifyKey - function that modifies the secret key
  * @param {function} obj.modifyValue - function that modifies the secret value
- * @param {function} obj.modifyVisibility - function that modifies the secret visibility
+ * @param {function} obj.addOverride - override a certain secret
+ * @param {function} obj.deleteOverride - delete the personal override for a certain secret
+ * @param {boolean} obj.buttonReady - is the button for saving chagnes active
+ * @param {function} obj.savePush - save changes andp ush secrets
  * @returns the sidebar with 'secret's settings'
  */
-const SideBar = ({ toggleSidebar, data, modifyKey, modifyValue, modifyVisibility, addOverride, deleteOverride }: SideBarProps) => {
-  const [overrideEnabled, setOverrideEnabled] = useState(false);
+const SideBar = ({ toggleSidebar, data, modifyKey, modifyValue, addOverride, deleteOverride, buttonReady, savePush }: SideBarProps) => {
+  const [overrideEnabled, setOverrideEnabled] = useState(data.map(secret => secret.type).includes("personal"));
+  console.log("sidebar", data, data.map(secret => secret.type).includes("personal"))
 
   return <div className='absolute border-l border-mineshaft-500 bg-bunker fixed h-full w-96 top-14 right-0 z-50 shadow-xl flex flex-col justify-between'>
-    <div className='h-min'>
+    <div className='h-min overflow-y-auto'>
       <div className="flex flex-row px-4 py-3 border-b border-mineshaft-500 justify-between items-center">
         <p className="font-semibold text-lg text-bunker-200">Secret</p>
-        <div className='p-1' onClick={() => toggleSidebar(-1)}>
+        <div className='p-1' onClick={() => toggleSidebar("None")}>
           <FontAwesomeIcon icon={faX} className='w-4 h-4 text-bunker-300 cursor-pointer'/>
         </div>
       </div>
@@ -64,21 +70,27 @@ const SideBar = ({ toggleSidebar, data, modifyKey, modifyValue, modifyVisibility
           blurred={false}
         />
       </div>
-      <div className={`relative mt-2 px-4 ${overrideEnabled && "opacity-40 pointer-events-none"} duration-200`}>
+      {data.filter(secret => secret.type == "shared")[0]?.value 
+        ? <div className={`relative mt-2 px-4 ${overrideEnabled && "opacity-40 pointer-events-none"} duration-200`}>
         <p className='text-sm text-bunker-300'>Value</p>
         <DashboardInputField
           onChangeHandler={modifyValue}
           type="value"
-          position={data[0].pos}
-          value={data[0].value + "xxx" + data[0].pos}
+          position={data.filter(secret => secret.type == "shared")[0]?.pos}
+          value={data.filter(secret => secret.type == "shared")[0]?.value}
           duplicates={[]}
           blurred={true}     
         />
         <div className='absolute bg-bunker-800 right-[1.07rem] top-[1.6rem] z-50'>
-          <GenerateSecretMenu />
+          <GenerateSecretMenu modifyValue={modifyValue} position={data.filter(secret => secret.type == "shared")[0]?.pos} />
         </div>
       </div>
+        : <div className='px-4 text-sm text-bunker-300 pt-4'>
+          <span className='py-0.5 px-1 rounded-md bg-primary-200/10 mr-1'>Note:</span>
+          This secret is personal. It is not shared with any of your teammates.
+        </div>}
       <div className='mt-4 px-4'>
+        {data.filter(secret => secret.type == "shared")[0]?.value &&
         <div className='flex flex-row items-center justify-between my-2 pl-1 pr-2'>
           <p className='text-sm text-bunker-300'>Override value with a personal value</p>
           <Toggle 
@@ -91,30 +103,30 @@ const SideBar = ({ toggleSidebar, data, modifyKey, modifyValue, modifyVisibility
             id={data[0].id}
             deleteOverride={deleteOverride}
           />
-        </div>
+        </div>}
         <div className={`relative ${!overrideEnabled && "opacity-40 pointer-events-none"} duration-200`}>
           <DashboardInputField
             onChangeHandler={modifyValue}
             type="value"
-            position={data[0].pos}
-            value={"ValueValueValue" + data[0].pos}
+            position={overrideEnabled ? data.filter(secret => secret.type == "personal")[0].pos : data[0].pos}
+            value={overrideEnabled ? data.filter(secret => secret.type == "personal")[0].value : data[0].value}
             duplicates={[]}
             blurred={true}
           />
-          <div className='absolute right-3 top-[0.3rem] z-50'>
-            <GenerateSecretMenu />
+          <div className='absolute right-[0.57rem] top-[0.3rem] z-50'>
+            <GenerateSecretMenu modifyValue={modifyValue} position={overrideEnabled ? data.filter(secret => secret.type == "personal")[0].pos : data[0].pos} />
           </div>
         </div>
       </div>
-      <div className={`relative mt-4 px-4 opacity-80 duration-200`}>
+      {/* <div className={`relative mt-4 px-4 opacity-80 duration-200`}>
         <p className='text-sm text-bunker-200'>Group</p>
         <ListBox
           selected={"Database Secrets"}
           onChange={() => {}}
           data={["Group1"]}
           isFull={true}
         />
-      </div>
+      </div> */}
       <div className='w-full h-52 px-4 mt-4 text-sm text-bunker-300 overflow-x-none'>
         <p className=''>Version History</p>
         <div className='p-1 rounded-md bg-bunker-800 border border-mineshaft-500 overflow-x-none'>
@@ -170,12 +182,14 @@ const SideBar = ({ toggleSidebar, data, modifyKey, modifyValue, modifyVisibility
         </div>
       </div>
     </div>
-    <div className='mt-full px-4 mb-[4.7rem]'>
+    <div className={`flex justify-start max-w-sm mt-4 px-4 mt-full mb-[4.7rem]`}>
       <Button
-        onButtonPressed={() => console.log('Saved')}
         text="Save Changes"
+        onButtonPressed={savePush}
         color="primary"
         size="md"
+        active={buttonReady}
+        textDisabled="Saved"
       />
     </div>
   </div>

frontend/components/utilities/secrets/getSecretsForProject.ts

@@ -39,7 +39,7 @@ const getSecretsForProject = async ({
 
     const PRIVATE_KEY = localStorage.getItem('PRIVATE_KEY');
 
-    const tempFileState: { key: string; value: string; type: string }[] = [];
+    const tempFileState: { key: string; value: string; type: 'personal' | 'shared'; }[] = [];
     if (file.key) {
       // assymmetrically decrypt symmetric key with local private key
       const key = decryptAssymmetric({
@@ -97,7 +97,7 @@ const getSecretsForProject = async ({
   } catch (error) {
     console.log('Something went wrong during accessing or decripting secrets.');
   }
-  return true;
+  return [];
 };
 
 export default getSecretsForProject;

frontend/components/utilities/secrets/pushKeys.ts

@@ -51,7 +51,7 @@ const pushKeys = async({ obj, workspaceId, env }: { obj: object; workspaceId: st
       iv: ivKey,
       tag: tagKey,
     } = encryptSymmetric({
-      plaintext: key,
+      plaintext: key.slice(1),
       key: randomBytes,
     });
 
@@ -65,13 +65,13 @@ const pushKeys = async({ obj, workspaceId, env }: { obj: object; workspaceId: st
       key: randomBytes,
     });
 
-    const visibility = obj[key as keyof typeof obj][1] != null ? obj[key as keyof typeof obj][1] : "personal";
+    const visibility = key.charAt(0) == "p" ? "personal" : "shared";
 
     return {
       ciphertextKey,
       ivKey,
       tagKey,
-      hashKey: crypto.createHash("sha256").update(key).digest("hex"),
+      hashKey: crypto.createHash("sha256").update(key.slice(1)).digest("hex"),
       ciphertextValue,
       ivValue,
       tagValue,