Added commenting functionality (#135)

frontend/components/basic/Toggle.tsx

@@ -7,6 +7,7 @@ interface OverrideProps {
   keyName: string;
   value: string;
   pos: number;
+  comment: string;
 }
 
 interface ToggleProps { 
@@ -17,6 +18,7 @@ interface ToggleProps {
   value: string;
   pos: number;
   id: string;
+  comment: string;
   deleteOverride: (id: string) => void; 
   sharedToHide: string[];
   setSharedToHide: (values: string[]) => void;
@@ -46,6 +48,7 @@ export default function Toggle ({
   value, 
   pos, 
   id, 
+  comment,
   deleteOverride,
   sharedToHide,
   setSharedToHide
@@ -55,7 +58,7 @@ export default function Toggle ({
       checked={enabled}
       onChange={() => {
         if (enabled == false) {
-          addOverride({ id, keyName, value, pos });
+          addOverride({ id, keyName, value, pos, comment });
           setSharedToHide([
             ...sharedToHide!,
             id

frontend/components/dashboard/CommentField.tsx

@@ -0,0 +1,16 @@
+/**
+ * This is the text field where people can add comments to particular secrets.
+ */
+const CommentField = ({ comment, modifyComment, position }: { comment: string; modifyComment: (value: string, posistion: number) => void; position: number;}) => {
+  return <div className={`relative mt-4 px-4 pt-4`}>
+    <p className='text-sm text-bunker-300'>Comments & notes</p>
+    <textarea 
+      className="bg-bunker-800 h-32 w-full bg-bunker-800 p-2 rounded-md border border-mineshaft-500 text-sm text-bunker-300 outline-none focus:ring-2 ring-primary-800 ring-opacity-70"
+      value={comment}
+      onChange={(e) => modifyComment(e.target.value, position)}
+      placeholder="Leave any comments here..."
+    />
+  </div>
+}
+
+export default CommentField;

frontend/components/dashboard/DropZone.tsx

@@ -126,7 +126,7 @@ const DropZone = ({
     </div>
   ) : keysExist ? (
     <div
-      className="opacity-60 hover:opacity-100 duration-200 relative bg-bunker outline max-w-[calc(100%-1rem)] w-full outline-dashed outline-gray-600 rounded-md outline-2 flex flex-col items-center justify-center mb-16 mx-auto mt-1 py-8 px-2"
+      className="opacity-60 hover:opacity-100 duration-200 relative bg-mineshaft-900 outline max-w-[calc(100%-1rem)] w-full outline-dashed outline-chicago-600 rounded-md outline-2 flex flex-col items-center justify-center mb-16 mx-auto mt-1 py-8 px-2"
       onDragEnter={handleDragEnter}
       onDragOver={handleDragOver}
       onDragLeave={handleDragLeave}
@@ -147,9 +147,9 @@ const DropZone = ({
       <div className="flex flex-row">
         <FontAwesomeIcon
           icon={faUpload}
-          className="text-gray-300 text-3xl mr-6"
+          className="text-bunker-300 text-3xl mr-6"
         />
-        <p className="text-gray-300 mt-1">
+        <p className="text-bunker-300 mt-1">
           Drag and drop your .env file here to add more keys.
         </p>
       </div>

frontend/components/dashboard/SideBar.tsx

@@ -5,6 +5,7 @@ import SecretVersionList from 'ee/components/SecretVersionList';
 
 import Button from '../basic/buttons/Button';
 import Toggle from '../basic/Toggle';
+import CommentField from './CommentField';
 import DashboardInputField from './DashboardInputField';
 import GenerateSecretMenu from './GenerateSecretMenu';
 
@@ -15,6 +16,7 @@ interface SecretProps {
   pos: number;
   type: string;
   id: string;
+  comment: string;
 }
 
 interface OverrideProps {
@@ -22,6 +24,7 @@ interface OverrideProps {
   keyName: string;
   value: string;
   pos: number;
+  comment: string;
 }
 
 interface SideBarProps {
@@ -29,6 +32,7 @@ interface SideBarProps {
   data: SecretProps[];
   modifyKey: (value: string, position: number) => void; 
   modifyValue: (value: string, position: number) => void; 
+  modifyComment: (value: string, position: number) => void; 
   addOverride: (value: OverrideProps) => void; 
   deleteOverride: (id: string) => void; 
   buttonReady: boolean;
@@ -56,6 +60,7 @@ const SideBar = ({
   data, 
   modifyKey, 
   modifyValue, 
+  modifyComment,
   addOverride, 
   deleteOverride, 
   buttonReady, 
@@ -115,6 +120,7 @@ const SideBar = ({
             value={data[0].value}
             pos={data[0].pos}
             id={data[0].id}
+            comment={data[0].comment}
             deleteOverride={deleteOverride}
             sharedToHide={sharedToHide}
             setSharedToHide={setSharedToHide}
@@ -143,17 +149,7 @@ const SideBar = ({
           isFull={true}
         />
       </div> */}
-      <div className={`relative mt-4 px-4 pt-4`}>
-        <div className='flex flex-row justify-between'>
-          <p className='text-sm text-bunker-300'>Comments & notes</p>
-          <div className="bg-yellow rounded-md h-min">
-            <p className="relative text-black text-xs px-1.5 h-min">Coming soon!</p>
-          </div>
-        </div>
-        <div className='h-32 opacity-50 w-full bg-bunker-800 p-2 rounded-md border border-mineshaft-500 rounded-md text-sm text-bunker-300'> 
-          Leave your comment here...
-        </div>
-      </div>
+      <CommentField comment={data.filter(secret => secret.type == "shared")[0]?.comment} modifyComment={modifyComment} position={data[0].pos} />
     </div>
     <div className={`flex justify-start max-w-sm mt-4 px-4 mt-full mb-[4.7rem]`}>
       <Button

frontend/components/utilities/secrets/getSecretsForProject.ts

@@ -10,6 +10,13 @@ const {
 const nacl = require('tweetnacl');
 nacl.util = require('tweetnacl-util');
 
+interface SecretProps { 
+  key: string; 
+  value: string; 
+  type: 'personal' | 'shared'; 
+  comment: string; 
+}
+
 interface Props {
   env: keyof typeof envMapping;
   setFileState: any;
@@ -34,12 +41,12 @@ const getSecretsForProject = async ({
     } catch (error) {
       console.log('ERROR: Not able to access the latest file');
     }
-    // This is called isKeyAvilable but what it really means is if a person is able to create new key pairs
+    // This is called isKeyAvailable but what it really means is if a person is able to create new key pairs
     setIsKeyAvailable(!file.key ? file.secrets.length == 0 : true);
 
     const PRIVATE_KEY = localStorage.getItem('PRIVATE_KEY');
 
-    const tempFileState: { key: string; value: string; type: 'personal' | 'shared'; }[] = [];
+    const tempFileState: SecretProps[] = [];
     if (file.key) {
       // assymmetrically decrypt symmetric key with local private key
       const key = decryptAssymmetric({
@@ -64,10 +71,24 @@ const getSecretsForProject = async ({
           tag: secretPair.secretValue.tag,
           key
         });
+
+        let plainTextComment;
+        if (secretPair.secretComment.ciphertext) {
+          plainTextComment = decryptSymmetric({
+            ciphertext: secretPair.secretComment.ciphertext,
+            iv: secretPair.secretComment.iv,
+            tag: secretPair.secretComment.tag,
+            key
+          });
+        } else {
+          plainTextComment = "";
+        }
+
         tempFileState.push({
           key: plainTextKey,
           value: plainTextValue,
-          type: secretPair.type
+          type: secretPair.type,
+          comment: plainTextComment
         });
       });
     }
@@ -80,7 +101,8 @@ const getSecretsForProject = async ({
           pos: index,
           key: line['key'],
           value: line['value'],
-          type: line['type']
+          type: line['type'],
+          comment: line['comment']
         };
       })
     );
@@ -91,7 +113,8 @@ const getSecretsForProject = async ({
         pos: index,
         key: line['key'],
         value: line['value'],
-        type: line['type']
+        type: line['type'],
+        comment: line['comment']
       };
     });
   } catch (error) {

frontend/components/utilities/secrets/pushKeys.ts

@@ -65,6 +65,16 @@ const pushKeys = async({ obj, workspaceId, env }: { obj: object; workspaceId: st
       key: randomBytes,
     });
 
+    // encrypt comment
+    const {
+      ciphertext: ciphertextComment,
+      iv: ivComment,
+      tag: tagComment,
+    } = encryptSymmetric({
+      plaintext: obj[key as keyof typeof obj][1],
+      key: randomBytes,
+    });
+
     const visibility = key.charAt(0) == "p" ? "personal" : "shared";
 
     return {
@@ -76,6 +86,10 @@ const pushKeys = async({ obj, workspaceId, env }: { obj: object; workspaceId: st
       ivValue,
       tagValue,
       hashValue: crypto.createHash("sha256").update(obj[key as keyof typeof obj][0]).digest("hex"),
+      ciphertextComment,
+      ivComment,
+      tagComment,
+      hashComment: crypto.createHash("sha256").update(obj[key as keyof typeof obj][1]).digest("hex"),
       type: visibility,
     };
   });