Fix merge conflicts

frontend/components/basic/InputField.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { memo,useState } from 'react';
 import { faCircle, faEye, faEyeSlash } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
@@ -96,6 +96,7 @@ const InputField = (
           />
           {props.label?.includes('Password') && (
             <button
+              type="button"
               onClick={() => {
                 setPasswordVisible(!passwordVisible);
               }}
@@ -139,4 +140,4 @@ const InputField = (
   }
 };
 
-export default React.memo(InputField);
+export default memo(InputField);

frontend/components/basic/Toggle.tsx

@@ -0,0 +1,84 @@
+import React from "react";
+import { Switch } from "@headlessui/react";
+
+
+interface OverrideProps {
+  id: string;
+  keyName: string;
+  value: string;
+  pos: number;
+  comment: string;
+}
+
+interface ToggleProps { 
+  enabled: boolean; 
+  setEnabled: (value: boolean) => void; 
+  addOverride: (value: OverrideProps) => void; 
+  keyName: string;
+  value: string;
+  pos: number;
+  id: string;
+  comment: string;
+  deleteOverride: (id: string) => void; 
+  sharedToHide: string[];
+  setSharedToHide: (values: string[]) => void;
+}
+
+/**
+ * This is a typical 'iPhone' toggle (e.g., user for overriding secrets with personal values)
+ * @param obj 
+ * @param {boolean} obj.enabled - whether the toggle is turned on or off
+ * @param {function} obj.setEnabled - change the state of the toggle
+ * @param {function} obj.addOverride - a function that adds an override to a certain secret
+ * @param {string} obj.keyName - key of a certain secret
+ * @param {string} obj.value - value of a certain secret
+ * @param {number} obj.pos - position of a certain secret
+ #TODO: make the secret id persistent?
+ * @param {string} obj.id - id of a certain secret  
+ * @param {function} obj.deleteOverride - a function that deleted an override for a certain secret
+ * @param {string[]} obj.sharedToHide - an array of shared secrets that we want to hide visually because they are overriden. 
+ * @param {function} obj.setSharedToHide - a function that updates the array of secrets that we want to hide visually
+ * @returns 
+ */
+export default function Toggle ({ 
+  enabled, 
+  setEnabled, 
+  addOverride, 
+  keyName, 
+  value, 
+  pos, 
+  id, 
+  comment,
+  deleteOverride,
+  sharedToHide,
+  setSharedToHide
+}: ToggleProps): JSX.Element {
+  return (
+    <Switch
+      checked={enabled}
+      onChange={() => {
+        if (enabled == false) {
+          addOverride({ id, keyName, value, pos, comment });
+          setSharedToHide([
+            ...sharedToHide!,
+            id
+          ])
+        } else {
+          setSharedToHide(sharedToHide!.filter(tempId => tempId != id))
+          deleteOverride(id);
+        }
+        setEnabled(!enabled);
+      }}
+      className={`${
+        enabled ? 'bg-primary' : 'bg-bunker-400'
+      } relative inline-flex h-5 w-9 items-center rounded-full`}
+    >
+      <span className="sr-only">Enable notifications</span>
+      <span
+        className={`${
+          enabled ? 'translate-x-[1.26rem]' : 'translate-x-0.5'
+        } inline-block h-3.5 w-3.5 transform rounded-full bg-bunker-800 transition`}
+      />
+    </Switch>
+  )
+}

frontend/components/basic/buttons/Button.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { ButtonHTMLAttributes } from "react";
 import Image from "next/image";
 import { IconProp } from "@fortawesome/fontawesome-svg-core";
 import {
@@ -16,8 +16,9 @@ type ButtonProps = {
   size: string;
   icon?: IconProp;
   active?: boolean;
-  iconDisabled?: string;
+  iconDisabled?: IconProp;
   textDisabled?: string;
+  type?: ButtonHTMLAttributes<any>['type'];
 };
 
 /**
@@ -72,15 +73,16 @@ export default function Button(props: ButtonProps): JSX.Element {
 
     // Setting the text color for the text and icon
     props.color == "mineshaft" && "text-gray-400",
-    props.color != "mineshaft" && props.color != "red" && "text-black",
+    props.color != "mineshaft" && props.color != "red" && props.color != "none" && "text-black",
     props.color == "red" && "text-gray-200",
-    activityStatus && props.color != "red" ? "group-hover:text-black" : "",
+    props.color == "none" && "text-gray-200 text-xl",
+    activityStatus && props.color != "red" && props.color != "none" ? "group-hover:text-black" : "",
 
     props.size == "icon" && "flex items-center justify-center"
   );
 
   const textStyle = classNames(
-    "relative duration-200",
+    "relative duration-200 text-center w-full",
 
     // Show the loading sign if the loading indicator is on
     props.loading ? "opacity-0" : "opacity-100",
@@ -91,6 +93,7 @@ export default function Button(props: ButtonProps): JSX.Element {
   const button = (
     <button
       disabled={!activityStatus}
+      type={props.type}
       onClick={props.onButtonPressed}
       className={styleButton}
     >

frontend/components/basic/dialog/AddServiceTokenDialog.js

@@ -209,7 +209,7 @@ const AddServiceTokenDialog = ({
                       </div>
                     </div>
                     <div className="w-full">
-                      <div className="flex justify-end items-center bg-white/[0.07] text-base mt-2 mr-2 rounded-md text-gray-400 w-full h-36">
+                      <div className="flex justify-end items-center bg-white/[0.07] text-base mt-2 mr-2 rounded-md text-gray-400 w-full h-44">
                         <input
                           type="text"
                           value={serviceToken}

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/basic/table/ServiceTokenTable.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useRouter } from 'next/router';
 import { faX } from '@fortawesome/free-solid-svg-icons';
 

frontend/components/basic/table/UserTable.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { useRouter } from 'next/router';
 import { faX } from '@fortawesome/free-solid-svg-icons';
 

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/DashboardInputField.tsx

@@ -1,4 +1,4 @@
-import React, { SyntheticEvent, useRef } from 'react';
+import { memo, SyntheticEvent, useRef } from 'react';
 import { faCircle } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
@@ -11,19 +11,21 @@ interface DashboardInputFieldProps {
   onChangeHandler: (value: string, position: number) => void;
   value: string;
   type: 'varName' | 'value';
-  blurred: boolean;
-  duplicates: string[];
+  blurred?: boolean;
+  isDuplicate?: boolean;
+  override?: boolean;
 }
 
 /**
  * This component renders the input fields on the dashboard
  * @param {object} obj - the order number of a keyPair
- * @param {number} obj.pos - the order number of a keyPair
+ * @param {number} obj.position - the order number of a keyPair
  * @param {function} obj.onChangeHandler - what happens when the input is modified
  * @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 duplicated key names on the dashboard
+ * @param {boolean} obj.isDuplicate - if the key name is duplicated
+ * @param {boolean} obj.override - whether a secret/row should be displalyed as overriden
  * @returns
  */
 
@@ -33,7 +35,8 @@ const DashboardInputField = ({
   type,
   value,
   blurred,
-  duplicates
+  isDuplicate,
+  override
 }: DashboardInputFieldProps) => {
   const ref = useRef<HTMLDivElement | null>(null);
   const syncScroll = (e: SyntheticEvent<HTMLDivElement>) => {
@@ -45,8 +48,7 @@ const DashboardInputField = ({
 
   if (type === 'varName') {
     const startsWithNumber = !isNaN(Number(value.charAt(0))) && value != '';
-    const hasDuplicates = duplicates?.includes(value);
-    const error = startsWithNumber || hasDuplicates;
+    const error = startsWithNumber || isDuplicate;
 
     return (
       <div className="flex-col w-full">
@@ -72,7 +74,7 @@ const DashboardInputField = ({
             Should not start with a number
           </p>
         )}
-        {hasDuplicates && !startsWithNumber && (
+        {isDuplicate && !startsWithNumber && (
           <p className="text-red text-xs mt-0.5 mx-1 mb-2 max-w-xs">
             Secret names should be unique
           </p>
@@ -85,6 +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-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)}
@@ -99,10 +102,13 @@ const DashboardInputField = ({
           <div
             ref={ref}
             className={`${
-              blurred
+              blurred && !override
                 ? 'text-bunker-800 group-hover:text-gray-400 peer-focus:text-gray-400 peer-active: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-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 no-scrollbar no-scrollbar::-webkit-scrollbar`}
+            } ${
+              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`}
           >
             {value.split(REGEX).map((word, id) => {
               if (word.match(REGEX) !== null) {
@@ -153,4 +159,8 @@ const DashboardInputField = ({
   return <>Something Wrong</>;
 };
 
-export default React.memo(DashboardInputField);
+function inputPropsAreEqual(prev: DashboardInputFieldProps, next: DashboardInputFieldProps) {
+  return prev.value === next.value && prev.type === next.type && prev.position === next.position && prev.blurred === next.blurred && prev.override === next.override && prev.isDuplicate === next.isDuplicate;
+}
+
+export default memo(DashboardInputField, inputPropsAreEqual);

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/GenerateSecretMenu.tsx

@@ -0,0 +1,93 @@
+import { Fragment,useState } from 'react';
+import { faShuffle } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+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 = ({ 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">
+    <div>
+      <Menu.Button className="inline-flex w-full justify-center rounded-md text-sm font-medium text-gray-200 rounded-md hover:bg-white/10 duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75">
+        <div className='py-1 px-2 rounded-md bg-bunker-800 hover:bg-bunker-500'>
+          <FontAwesomeIcon icon={faShuffle} className='text-bunker-300'/>
+        </div>
+      </Menu.Button>
+    </div>
+    <Transition
+      as={Fragment}
+      enter="transition ease-out duration-100"
+      enterFrom="transform opacity-0 scale-95"
+      enterTo="transform opacity-100 scale-100"
+      leave="transition ease-in duration-75"
+      leaveFrom="transform opacity-100 scale-100"
+      leaveTo="transform opacity-0 scale-95"
+    >
+      <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 ring-opacity-5 focus:outline-none px-1 py-1">
+        <div
+          onClick={() => {
+            if (randomStringLength > 32) {
+              setRandomStringLength(32);
+            } else if (randomStringLength < 2) {
+              setRandomStringLength(2);
+            } else {
+              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"
+        >
+          <FontAwesomeIcon
+            className="text-lg pl-1.5 pr-3"
+            icon={faShuffle}
+          />
+          <div className="text-sm justify-between flex flex-row w-full">
+            <p>Generate Random Hex</p>
+            <p>digits</p>
+          </div>
+        </div>
+        <div className="flex flex-row absolute bottom-[0.4rem] right-[3.3rem] w-16 bg-bunker-800 border border-chicago-700 rounded-md text-bunker-200 ">
+          <div
+            className="m-0.5 px-1 cursor-pointer rounded-md hover:bg-chicago-700"
+            onClick={() => {
+              if (randomStringLength > 1) {
+                setRandomStringLength(randomStringLength - 1);
+              }
+            }}
+          >
+            -
+          </div>
+          <input
+            onChange={(e) =>
+              setRandomStringLength(parseInt(e.target.value))
+            }
+            value={randomStringLength}
+            className="text-center z-20 peer text-sm bg-transparent w-full outline-none"
+            spellCheck="false"
+          />
+          <div
+            className="m-0.5 px-1 pb-0.5 cursor-pointer rounded-md hover:bg-chicago-700"
+            onClick={() => {
+              if (randomStringLength < 32) {
+                setRandomStringLength(randomStringLength + 1);
+              }
+            }}
+          >
+            +
+          </div>
+        </div>
+      </Menu.Items>
+    </Transition>
+  </Menu>
+}
+
+export default GenerateSecretMenu;

frontend/components/dashboard/KeyPair.tsx

@@ -0,0 +1,102 @@
+import React from 'react';
+import { faEllipsis, faShuffle, faX } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
+import Button from '../basic/buttons/Button';
+import DashboardInputField from './DashboardInputField';
+
+interface SecretDataProps {
+  type: 'personal' | 'shared';
+  pos: number;
+  key: string;
+  value: string;
+  id: string;
+}
+
+interface KeyPairProps {
+  keyPair: SecretDataProps;
+  deleteRow: (id: string) => void;
+  modifyKey: (value: string, position: number) => void; 
+  modifyValue: (value: string, position: number) => void; 
+  isBlurred: boolean;
+  isDuplicate: boolean;
+  toggleSidebar: (id: string) => void;
+  sidebarSecretId: string;
+}
+
+/**
+ * This component represent a single row for an environemnt variable on the dashboard
+ * @param {object} obj
+ * @param {String[]} obj.keyPair - data related to the environment variable (id, pos, key, value, public/private)
+ * @param {function} obj.deleteRow - a function to delete a certain keyPair
+ * @param {function} obj.modifyKey - modify the key of a certain environment variable
+ * @param {function} obj.modifyValue - modify the value of a certain environment variable
+ * @param {boolean} obj.isBlurred - if the blurring setting is turned on
+ * @param {boolean} obj.isDuplicate - list of all the duplicates secret names on the dashboard
+ * @param {function} obj.toggleSidebar - open/close/switch sidebar
+ * @param {string} obj.sidebarSecretId - the id of a secret for the side bar is displayed
+ * @returns
+ */
+const KeyPair = ({
+  keyPair,
+  deleteRow,
+  modifyKey,
+  modifyValue,
+  isBlurred,
+  isDuplicate,
+  toggleSidebar,
+  sidebarSecretId
+}: KeyPairProps) => {
+  return (
+    <div className={`mx-1 flex flex-col items-center ml-1 ${keyPair.id == sidebarSecretId && "bg-mineshaft-500 duration-200"} rounded-md`}>
+      <div className="relative flex flex-row justify-between w-full max-w-5xl mr-auto max-h-14 my-1 items-start px-1">
+      {keyPair.type == "personal" && <div className="group font-normal group absolute top-[1rem] left-[0.2rem] z-40 inline-block text-gray-300 underline hover:text-primary duration-200">
+        <div className='w-1 h-1 rounded-full bg-primary z-40'></div>
+        <span className="absolute z-50 hidden group-hover:flex group-hover:animate-popdown duration-200 w-[10.5rem] -left-[0.4rem] -top-[1.7rem] translate-y-full px-2 py-2 bg-mineshaft-500 rounded-b-md rounded-r-md text-center text-gray-100 text-sm after:content-[''] after:absolute after:left-0 after:bottom-[100%] after:-translate-x-0 after:border-8 after:border-x-transparent after:border-t-transparent after:border-b-mineshaft-500">
+          This secret is overriden
+        </span>
+      </div>}
+        <div className="min-w-xl w-96">
+          <div className="flex pr-1 items-center rounded-lg mt-4 md:mt-0 max-h-16">
+            <DashboardInputField
+              onChangeHandler={modifyKey}
+              type="varName"
+              position={keyPair.pos}
+              value={keyPair.key}
+              isDuplicate={isDuplicate}
+            />
+          </div>
+        </div>
+        <div className="w-full min-w-5xl">
+          <div className="flex min-w-7xl items-center pl-1 pr-1.5 rounded-lg mt-4 md:mt-0 max-h-10 ">
+            <DashboardInputField
+              onChangeHandler={modifyValue}
+              type="value"
+              position={keyPair.pos}
+              value={keyPair.value}
+              blurred={isBlurred}
+              override={keyPair.type == "personal"}
+            />
+          </div>
+        </div>
+        <div onClick={() => toggleSidebar(keyPair.id)} className="cursor-pointer w-9 h-9 bg-mineshaft-700 hover:bg-chicago-700 rounded-md flex flex-row justify-center items-center duration-200">
+          <FontAwesomeIcon
+            className="text-gray-300 px-2.5 text-lg mt-0.5"
+            icon={faEllipsis}
+          />
+        </div>
+        <div className="w-2"></div>
+        <div className="bg-[#9B3535] hover:bg-red rounded-md duration-200">
+          <Button
+            onButtonPressed={() => deleteRow(keyPair.id)}
+            color="none"
+            size="icon-sm"
+            icon={faX}
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default React.memo(KeyPair);

frontend/components/dashboard/SideBar.tsx

@@ -0,0 +1,167 @@
+import { useState } from 'react';
+import { faX } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+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';
+
+
+interface SecretProps {
+  key: string;
+  value: string;
+  pos: number;
+  type: string;
+  id: string;
+  comment: string;
+}
+
+interface OverrideProps {
+  id: string;
+  keyName: string;
+  value: string;
+  pos: number;
+  comment: string;
+}
+
+interface SideBarProps {
+  toggleSidebar: (value: string) => void; 
+  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;
+  savePush: () => void;
+  sharedToHide: string[];
+  setSharedToHide: (values: string[]) => void;
+}
+
+/**
+ * @param {object} obj
+ * @param {function} obj.toggleSidebar - function that opens or closes the sidebar
+ * @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.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
+ * @param {string[]} obj.sharedToHide - an array of shared secrets that we want to hide visually because they are overriden. 
+ * @param {function} obj.setSharedToHide - a function that updates the array of secrets that we want to hide visually
+ * @returns the sidebar with 'secret's settings'
+ */
+const SideBar = ({ 
+  toggleSidebar, 
+  data, 
+  modifyKey, 
+  modifyValue, 
+  modifyComment,
+  addOverride, 
+  deleteOverride, 
+  buttonReady, 
+  savePush,
+  sharedToHide,
+  setSharedToHide 
+}: SideBarProps) => {
+  const [overrideEnabled, setOverrideEnabled] = useState(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 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("None")}>
+          <FontAwesomeIcon icon={faX} className='w-4 h-4 text-bunker-300 cursor-pointer'/>
+        </div>
+      </div>
+      <div className='mt-4 px-4 pointer-events-none'>
+        <p className='text-sm text-bunker-300'>Key</p>
+        <DashboardInputField
+          onChangeHandler={modifyKey}
+          type="varName"
+          position={data[0].pos}
+          value={data[0].key}
+          isDuplicate={false}
+          blurred={false}
+        />
+      </div>
+      {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.filter(secret => secret.type == "shared")[0]?.pos}
+          value={data.filter(secret => secret.type == "shared")[0]?.value}
+          isDuplicate={false}
+          blurred={true}     
+        />
+        <div className='absolute bg-bunker-800 right-[1.07rem] top-[1.6rem] z-50'>
+          <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 
+            enabled={overrideEnabled} 
+            setEnabled={setOverrideEnabled} 
+            addOverride={addOverride} 
+            keyName={data[0].key}
+            value={data[0].value}
+            pos={data[0].pos}
+            id={data[0].id}
+            comment={data[0].comment}
+            deleteOverride={deleteOverride}
+            sharedToHide={sharedToHide}
+            setSharedToHide={setSharedToHide}
+          />
+        </div>}
+        <div className={`relative ${!overrideEnabled && "opacity-40 pointer-events-none"} duration-200`}>
+          <DashboardInputField
+            onChangeHandler={modifyValue}
+            type="value"
+            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}
+            isDuplicate={false}
+            blurred={true}
+          />
+          <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`}>
+        <p className='text-sm text-bunker-200'>Group</p>
+        <ListBox
+          selected={"Database Secrets"}
+          onChange={() => {}}
+          data={["Group1"]}
+          isFull={true}
+        />
+      </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
+        text="Save Changes"
+        onButtonPressed={savePush}
+        color="primary"
+        size="md"
+        active={buttonReady}
+        textDisabled="Saved"
+      />
+    </div>
+  </div>
+};
+
+export default SideBar;

frontend/components/integrations/Integration.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { useRouter } from "next/router";
 import {
     faArrowRight,
@@ -203,7 +203,7 @@ const Integration = ({
                     context: integrationContext ? reverseContextNetlifyMapping[integrationContext] : null,
                     siteId
                   });
-                  
+
                   router.reload();
                 }}
                 color="mineshaft"

frontend/components/navigation/NavBarDashboard.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 /* eslint-disable react/jsx-key */
-import React, { Fragment, useEffect, useState } from 'react';
+import { Fragment, useEffect, useState } from 'react';
 import Image from 'next/image';
 import { useRouter } from 'next/router';
 import { faGithub, faSlack } from '@fortawesome/free-brands-svg-icons';

frontend/components/navigation/NavHeader.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { useRouter } from "next/router";
 import {
   faAngleRight,

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: string }[] = [];
+    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,13 +113,14 @@ const getSecretsForProject = async ({
         pos: index,
         key: line['key'],
         value: line['value'],
-        type: line['type']
+        type: line['type'],
+        comment: line['comment']
       };
     });
   } catch (error) {
     console.log('Something went wrong during accessing or decripting secrets.');
   }
-  return true;
+  return [];
 };
 
 export default getSecretsForProject;

frontend/components/utilities/secrets/pushKeys.ts

@@ -47,35 +47,49 @@ const pushKeys = async({ obj, workspaceId, env }: { obj: object; workspaceId: st
   const secrets = Object.keys(obj).map((key) => {
     // encrypt key
     const {
-      ciphertext: ciphertextKey,
-      iv: ivKey,
-      tag: tagKey,
+      ciphertext: secretKeyCiphertext,
+      iv: secretKeyIV,
+      tag: secretKeyTag,
     } = encryptSymmetric({
-      plaintext: key,
+      plaintext: key.slice(1),
       key: randomBytes,
     });
 
     // encrypt value
     const {
-      ciphertext: ciphertextValue,
-      iv: ivValue,
-      tag: tagValue,
+      ciphertext: secretValueCiphertext,
+      iv: secretValueIV,
+      tag: secretValueTag,
     } = encryptSymmetric({
       plaintext: obj[key as keyof typeof obj][0],
       key: randomBytes,
     });
 
-    const visibility = obj[key as keyof typeof obj][1] != null ? obj[key as keyof typeof obj][1] : "personal";
+    // encrypt comment
+    const {
+      ciphertext: secretCommentCiphertext,
+      iv: secretCommentIV,
+      tag: secretCommentTag,
+    } = encryptSymmetric({
+      plaintext: obj[key as keyof typeof obj][1],
+      key: randomBytes,
+    });
+
+    const visibility = key.charAt(0) == "p" ? "personal" : "shared";
 
     return {
-      ciphertextKey,
-      ivKey,
-      tagKey,
-      hashKey: crypto.createHash("sha256").update(key).digest("hex"),
-      ciphertextValue,
-      ivValue,
-      tagValue,
-      hashValue: crypto.createHash("sha256").update(obj[key as keyof typeof obj][0]).digest("hex"),
+      secretKeyCiphertext,
+      secretKeyIV,
+      secretKeyTag,
+      secretKeyHash: crypto.createHash("sha256").update(key.slice(1)).digest("hex"),
+      secretValueCiphertext,
+      secretValueIV,
+      secretValueTag,
+      secretValueHash: crypto.createHash("sha256").update(obj[key as keyof typeof obj][0]).digest("hex"),
+      secretCommentCiphertext,
+      secretCommentIV,
+      secretCommentTag,
+      secretCommentHash: crypto.createHash("sha256").update(obj[key as keyof typeof obj][1]).digest("hex"),
       type: visibility,
     };
   });

frontend/ee/components/SecretVersionList.tsx

@@ -0,0 +1,44 @@
+import { useState } from 'react';
+import { faCircle, faDotCircle } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+interface SecretVersionListProps {}
+
+const versionData = [{
+  value: "Value1",
+  date: "Date1",
+  user: "[email protected]"
+}, {
+  value: "Value2",
+  date: "Date2",
+  user: "[email protected]"
+}]
+
+/**
+ * @returns a list of the versions for a specific secret
+ */
+const SecretVersionList = () => {
+  return <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'>
+    <div className='h-48 overflow-y-scroll overflow-x-none'>
+      {versionData.map((version, index) =>
+        <div key={index} className='flex flex-row'>
+          <div className='pr-1 flex flex-col items-center'>
+            <div className='p-1'><FontAwesomeIcon icon={index == 0 ? faDotCircle : faCircle} /></div>
+            <div className='w-0 h-full border-l mt-1'></div>
+          </div>
+          <div className='flex flex-col w-full max-w-[calc(100%-2.3rem)]'>
+            <div className='pr-2 pt-1'>{version.date}</div>
+            <div className=''><p className='break-words'><span className='py-0.5 px-1 rounded-md bg-primary-200/10 mr-1.5'>Value:</span>{version.value}</p></div>
+            <div className=''><p className='break-words'><span className='py-0.5 px-1 rounded-md bg-primary-200/10 mr-1.5'>Updated by:</span>{version.user}</p></div>
+          </div>
+        </div>
+      )}
+    </div>
+  </div>
+</div>
+};
+
+export default SecretVersionList;

frontend/pages/404.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+import Head from "next/head";
+import Image from "next/image";
+import Link from "next/link";
+
+export default function Custom404() {
+  return (
+    <div className="bg-bunker-800 md:h-screen flex flex-col justify-between">
+      <Head>
+        <title>Infisical | Page Not Found</title>
+        <link rel="icon" href="/infisical.ico" />
+      </Head>
+      <div className="flex flex-col items-center justify-center text-gray-200 h-screen w-screen">
+        <p className="text-4xl mt-32">Oops, something went wrong</p>
+        <p className="mt-2 mb-1 text-lg">Think this is a mistake? Email <a className="text-primary underline underline-offset-4" href="mailto:[email protected]">team@infisical.com</a> and we`ll fix it! </p>
+        <Link href="/dashboard" className="bg-mineshaft-500 mt-8 py-2 px-4 rounded-md hover:bg-primary diration-200 hover:text-black cursor-pointer font-semibold">
+          Go to Dashboard
+        </Link>
+        <Image
+          src="/images/dragon-404.svg"
+          height={554}
+          width={942}
+          alt="google logo"
+        ></Image>
+      </div>
+    </div>
+  );
+}

frontend/pages/api/files/UploadSecrets.ts

@@ -22,7 +22,7 @@ const uploadSecrets = async ({
   keys,
   environment
 }: Props) => {
-  return SecurityClient.fetchCall('/api/v1/secret/' + workspaceId, {
+  return SecurityClient.fetchCall('/api/v2/workspace/' + workspaceId + '/secrets', {
     method: 'POST',
     headers: {
       'Content-Type': 'application/json'

frontend/pages/dashboard.js

@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import { useEffect } from "react";
 import Head from "next/head";
 import { useRouter } from "next/router";
 

frontend/pages/dashboard/[id].js

@@ -1,805 +0,0 @@
-import React, { Fragment, useCallback, useEffect, useState } from 'react';
-import Head from 'next/head';
-import Image from 'next/image';
-import { useRouter } from 'next/router';
-import {
-  faArrowDownAZ,
-  faArrowDownZA,
-  faCheck,
-  faCircleInfo,
-  faCopy,
-  faDownload,
-  faEllipsis,
-  faEye,
-  faEyeSlash,
-  faFolderOpen,
-  faMagnifyingGlass,
-  faPeopleGroup,
-  faPerson,
-  faPlus,
-  faShuffle,
-  faX
-} from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { Menu, Transition } from '@headlessui/react';
-
-import Button from '~/components/basic/buttons/Button';
-import ListBox from '~/components/basic/Listbox';
-import BottonRightPopup from '~/components/basic/popups/BottomRightPopup';
-import { useNotificationContext } from '~/components/context/Notifications/NotificationProvider';
-import DashboardInputField from '~/components/dashboard/DashboardInputField';
-import DropZone from '~/components/dashboard/DropZone';
-import NavHeader from '~/components/navigation/NavHeader';
-import getSecretsForProject from '~/components/utilities/secrets/getSecretsForProject';
-import pushKeys from '~/components/utilities/secrets/pushKeys';
-import pushKeysIntegration from '~/components/utilities/secrets/pushKeysIntegration';
-import guidGenerator from '~/utilities/randomId';
-
-import { envMapping } from '../../public/data/frequentConstants';
-import getWorkspaceIntegrations from '../api/integrations/getWorkspaceIntegrations';
-import getUser from '../api/user/getUser';
-import checkUserAction from '../api/userActions/checkUserAction';
-import registerUserAction from '../api/userActions/registerUserAction';
-import getWorkspaces from '../api/workspace/getWorkspaces';
-
-/**
- * This component represent a single row for an environemnt variable on the dashboard
- * @param {object} obj
- * @param {String[]} obj.keyPair - data related to the environment variable (id, pos, key, value, public/private)
- * @param {function} obj.deleteRow - a function to delete a certain keyPair
- * @param {function} obj.modifyKey - modify the key of a certain environment variable
- * @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 = ({
-  keyPair,
-  deleteRow,
-  modifyKey,
-  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-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-16">
-            <DashboardInputField
-              onChangeHandler={modifyKey}
-              type="varName"
-              position={keyPair.pos}
-              value={keyPair.key}
-              duplicates={duplicates}
-            />
-          </div>
-        </div>
-        <div className="w-full min-w-5xl">
-          <div className="flex min-w-7xl items-center pl-1 pr-1.5 rounded-lg mt-4 md:mt-0 max-h-10 ">
-            <DashboardInputField
-              onChangeHandler={modifyValue}
-              type="value"
-              position={keyPair.pos}
-              value={keyPair.value}
-              blurred={isBlurred}
-            />
-          </div>
-        </div>
-        <Menu as="div" className="relative inline-block text-left">
-          <div>
-            <Menu.Button className="inline-flex w-full justify-center rounded-md text-sm font-medium text-gray-200 rounded-md hover:bg-white/10 duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75">
-              <div className="cursor-pointer w-9 h-9 bg-white/10 rounded-md flex flex-row justify-center items-center opacity-50 hover:opacity-100 duration-200">
-                <FontAwesomeIcon
-                  className="text-gray-300 px-2.5 text-lg mt-0.5"
-                  icon={faEllipsis}
-                />
-              </div>
-            </Menu.Button>
-          </div>
-          <Transition
-            as={Fragment}
-            enter="transition ease-out duration-100"
-            enterFrom="transform opacity-0 scale-95"
-            enterTo="transform opacity-100 scale-100"
-            leave="transition ease-in duration-75"
-            leaveFrom="transform opacity-100 scale-100"
-            leaveTo="transform opacity-0 scale-95"
-          >
-            <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 ring-opacity-5 focus:outline-none px-1 py-1">
-              <div
-                onClick={() =>
-                  modifyVisibility(
-                    keyPair.type == 'personal' ? 'shared' : 'personal',
-                    keyPair.pos
-                  )
-                }
-                className="relative flex 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"
-              >
-                <FontAwesomeIcon
-                  className="text-lg pl-1.5 pr-3"
-                  icon={keyPair.type == 'personal' ? faPeopleGroup : faPerson}
-                />
-                <div className="text-sm">
-                  {keyPair.type == 'personal' ? 'Make Shared' : 'Make Personal'}
-                </div>
-              </div>
-              <div
-                onClick={() => {
-                  if (randomStringLength > 32) {
-                    setRandomStringLength(32);
-                  } else if (randomStringLength < 2) {
-                    setRandomStringLength(2);
-                  } else {
-                    modifyValue(
-                      [...Array(randomStringLength)]
-                        .map(() => Math.floor(Math.random() * 16).toString(16))
-                        .join(''),
-                      keyPair.pos
-                    );
-                  }
-                }}
-                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"
-              >
-                <FontAwesomeIcon
-                  className="text-lg pl-1.5 pr-3"
-                  icon={keyPair.value == '' ? faPlus : faShuffle}
-                />
-                <div className="text-sm justify-between flex flex-row w-full">
-                  <p>Generate Random Hex</p>
-                  <p>digits</p>
-                </div>
-              </div>
-              <div className="flex flex-row absolute bottom-[0.4rem] right-[3.3rem] w-16 bg-bunker-800 border border-chicago-700 rounded-md text-bunker-200 ">
-                <div
-                  className="m-0.5 px-1 cursor-pointer rounded-md hover:bg-chicago-700"
-                  onClick={() => {
-                    if (randomStringLength > 1) {
-                      setRandomStringLength(randomStringLength - 1);
-                    }
-                  }}
-                >
-                  -
-                </div>
-                <input
-                  onChange={(e) =>
-                    setRandomStringLength(parseInt(e.target.value))
-                  }
-                  value={randomStringLength}
-                  className="text-center z-20 peer text-sm bg-transparent w-full outline-none"
-                  spellCheck="false"
-                />
-                <div
-                  className="m-0.5 px-1 pb-0.5 cursor-pointer rounded-md hover:bg-chicago-700"
-                  onClick={() => {
-                    if (randomStringLength < 32) {
-                      setRandomStringLength(randomStringLength + 1);
-                    }
-                  }}
-                >
-                  +
-                </div>
-              </div>
-            </Menu.Items>
-          </Transition>
-        </Menu>
-        <div className="w-2"></div>
-        <div className="opacity-50 hover:opacity-100 duration-200">
-          <Button
-            onButtonPressed={() => deleteRow(keyPair.id)}
-            color="red"
-            size="icon-sm"
-            icon={faX}
-          />
-        </div>
-      </div>
-    </div>
-  );
-};
-
-/**
- * This is the main component for the dashboard (aka the screen with all the encironemnt variable & secrets)
- * @returns
- */
-export default function Dashboard() {
-  const [data, setData] = useState();
-  const [fileState, setFileState] = useState([]);
-  const [buttonReady, setButtonReady] = useState(false);
-  const router = useRouter();
-  const [workspaceId, setWorkspaceId] = useState('');
-  const [blurred, setBlurred] = useState(true);
-  const [isKeyAvailable, setIsKeyAvailable] = useState(true);
-  const [env, setEnv] = useState(
-    router.asPath.split('?').length == 1
-      ? 'Development'
-      : Object.keys(envMapping).includes(router.asPath.split('?')[1])
-      ? router.asPath.split('?')[1]
-      : 'Development'
-  );
-  const [isNew, setIsNew] = useState(false);
-  const [searchKeys, setSearchKeys] = useState('');
-  const [errorDragAndDrop, setErrorDragAndDrop] = useState(false);
-  const [projectIdCopied, setProjectIdCopied] = useState(false);
-  const [sortMethod, setSortMethod] = useState('alphabetical');
-  const [checkDocsPopUpVisible, setCheckDocsPopUpVisible] = useState(false);
-  const [hasUserEverPushed, setHasUserEverPushed] = useState(false);
-
-  const { createNotification } = useNotificationContext();
-
-  // #TODO: fix save message for changing reroutes
-  // const beforeRouteHandler = (url) => {
-  // 	const warningText =
-  // 		"Do you want to save your results bfore leaving this page?";
-  // 	if (!buttonReady) return;
-  // 	if (router.asPath !== url && !confirm(warningText)) {
-  // 		// router.events.emit('routeChangeError');
-  // 		// setData(data)
-  // 		savePush();
-  // 		throw `Route change to "${url}" was aborted (this error can be safely ignored).`;
-  // 	} else {
-  // 		setButtonReady(false);
-  // 	}
-  // };
-
-  // prompt the user if they try and leave with unsaved changes
-  useEffect(() => {
-    const warningText =
-      'Do you want to save your results before leaving this page?';
-    const handleWindowClose = (e) => {
-      if (!buttonReady) return;
-      e.preventDefault();
-      return (e.returnValue = warningText);
-    };
-    window.addEventListener('beforeunload', handleWindowClose);
-    // router.events.on('routeChangeStart', beforeRouteHandler);
-    return () => {
-      window.removeEventListener('beforeunload', handleWindowClose);
-      // router.events.off('routeChangeStart', beforeRouteHandler);
-    };
-  }, [buttonReady]);
-
-  /**
-   * Reorder rows alphabetically or in the opprosite order
-   */
-  const reorderRows = (dataToReorder) => {
-    setSortMethod((prevSort) =>
-      prevSort == 'alphabetical' ? '-alphabetical' : 'alphabetical'
-    );
-
-    sortValuesHandler(dataToReorder);
-  };
-
-  useEffect(() => {
-    (async () => {
-      try {
-        let userWorkspaces = await getWorkspaces();
-        const listWorkspaces = userWorkspaces.map((workspace) => workspace._id);
-        if (
-          !listWorkspaces.includes(router.asPath.split('/')[2].split('?')[0])
-        ) {
-          router.push('/dashboard/' + listWorkspaces[0]);
-        }
-
-        if (env != router.asPath.split('?')[1]) {
-          router.push(router.asPath.split('?')[0] + '?' + env);
-        }
-        setBlurred(true);
-        setWorkspaceId(router.query.id);
-
-        const dataToSort = await getSecretsForProject({
-          env,
-          setFileState,
-          setIsKeyAvailable,
-          setData,
-          workspaceId: router.query.id
-        });
-        reorderRows(dataToSort);
-
-        const user = await getUser();
-        setIsNew(
-          (Date.parse(new Date()) - Date.parse(user.createdAt)) / 60000 < 3
-            ? true
-            : false
-        );
-
-        let userAction = await checkUserAction({
-          action: 'first_time_secrets_pushed'
-        });
-        setHasUserEverPushed(userAction ? true : false);
-      } catch (error) {
-        console.log('Error', error);
-        setData([]);
-      }
-    })();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [env]);
-
-  const addRow = () => {
-    setIsNew(false);
-    setData([
-      ...data,
-      {
-        id: guidGenerator(),
-        pos: data.length,
-        key: '',
-        value: '',
-        type: 'shared'
-      }
-    ]);
-  };
-
-  const deleteRow = (id) => {
-    setButtonReady(true);
-    setData(data.filter((row) => row.id !== id));
-  };
-
-  const modifyValue = (value, pos) => {
-    setData((oldData) => {
-      oldData[pos].value = value;
-      return [...oldData];
-    });
-    setButtonReady(true);
-  };
-
-  const modifyKey = (value, pos) => {
-    setData((oldData) => {
-      oldData[pos].key = value;
-      return [...oldData];
-    });
-    setButtonReady(true);
-  };
-
-  const modifyVisibility = (value, pos) => {
-    setData((oldData) => {
-      oldData[pos].type = value;
-      return [...oldData];
-    });
-    setButtonReady(true);
-  };
-
-  // For speed purposes and better perforamance, we are using useCallback
-  const listenChangeValue = useCallback((value, pos) => {
-    modifyValue(value, pos);
-  }, []);
-
-  const listenChangeKey = useCallback((value, pos) => {
-    modifyKey(value, pos);
-  }, []);
-
-  const listenChangeVisibility = useCallback((value, pos) => {
-    modifyVisibility(value, pos);
-  }, []);
-
-  /**
-   * Save the changes of environment variables and push them to the database
-   */
-  const savePush = async () => {
-    // Format the new object with environment variables
-    let obj = Object.assign(
-      {},
-      ...data.map((row) => ({ [row.key]: [row.value, row.type] }))
-    );
-
-    // 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.key)
-        .filter(
-          (item, index) => index !== data?.map((item) => item.key).indexOf(item)
-        ).length > 0;
-
-    if (nameErrors) {
-      return createNotification({
-        text: 'Solve all name errors before saving secrets.',
-        type: 'error'
-      });
-    }
-
-    if (duplicatesExist) {
-      return createNotification({
-        text: 'Remove duplicated secret names before saving.',
-        type: 'error'
-      });
-    }
-
-    // Once "Save changed is clicked", disable that button
-    setButtonReady(false);
-    pushKeys({ obj, workspaceId: router.query.id, env });
-
-    // 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' });
-    }
-  };
-
-  const addData = (newData) => {
-    setData(data.concat(newData));
-    setButtonReady(true);
-  };
-
-  const changeBlurred = () => {
-    setBlurred(!blurred);
-  };
-
-  const sortValuesHandler = (dataToSort) => {
-    const sortedData = (dataToSort != 1 ? dataToSort : data)
-      .sort((a, b) =>
-        sortMethod == 'alphabetical'
-          ? a.key.localeCompare(b.key)
-          : b.key.localeCompare(a.key)
-      )
-      .map((item, index) => {
-        return {
-          ...item,
-          pos: index
-        };
-      });
-
-    setData(sortedData);
-  };
-
-  // This function downloads the secrets as a .env file
-  const download = () => {
-    const file = data
-      .map((item) => [item.key, item.value].join('='))
-      .join('\n');
-    const blob = new Blob([file]);
-    const fileDownloadUrl = URL.createObjectURL(blob);
-    let alink = document.createElement('a');
-    alink.href = fileDownloadUrl;
-    alink.download = envMapping[env] + '.env';
-    alink.click();
-  };
-
-  const deleteCertainRow = (id) => {
-    deleteRow(id);
-  };
-
-  /**
-   * This function copies the project id to the clipboard
-   */
-  function copyToClipboard() {
-    var copyText = document.getElementById('myInput');
-
-    copyText.select();
-    copyText.setSelectionRange(0, 99999); // For mobile devices
-
-    navigator.clipboard.writeText(copyText.value);
-
-    setProjectIdCopied(true);
-    setTimeout(() => setProjectIdCopied(false), 2000);
-  }
-
-  return data ? (
-    <div className="bg-bunker-800 max-h-screen flex flex-col justify-between text-white">
-      <Head>
-        <title>Secrets</title>
-        <link rel="icon" href="/infisical.ico" />
-        <meta property="og:image" content="/images/message.png" />
-        <meta property="og:title" content="Manage your .env files in seconds" />
-        <meta
-          name="og:description"
-          content="Infisical a simple end-to-end encrypted platform that enables teams to sync and manage their .env files."
-        />
-      </Head>
-      <div className="flex flex-row">
-        <div className="w-full max-h-96 pb-2">
-          <NavHeader pageName="Secrets" isProjectRelated={true} />
-          {checkDocsPopUpVisible && (
-            <BottonRightPopup
-              buttonText="Check Docs"
-              buttonLink="https://infisical.com/docs/getting-started/introduction"
-              titleText="Good job!"
-              emoji="🎉"
-              textLine1="Congrats on adding more secrets."
-              textLine2="Here is how to connect them to your codebase."
-              setCheckDocsPopUpVisible={setCheckDocsPopUpVisible}
-            />
-          )}
-          <div className="flex flex-row justify-between items-center mx-6 mt-6 mb-3 text-xl max-w-5xl">
-            <div className="flex flex-row justify-start items-center text-3xl">
-              <p className="font-semibold mr-4 mt-1">Secrets</p>
-              {data?.length == 0 && (
-                <ListBox
-                  selected={env}
-                  data={['Development', 'Staging', 'Production', 'Testing']}
-                  // ref={useRef(123)}
-                  onChange={setEnv}
-                  className="z-40"
-                />
-              )}
-            </div>
-            <div className="flex flex-row">
-              <div className="flex justify-end items-center bg-white/[0.07] text-base mt-2 mr-2 rounded-md text-gray-400">
-                <p className="mr-2 font-bold pl-4">Project ID:</p>
-                <input
-                  type="text"
-                  value={workspaceId}
-                  id="myInput"
-                  className="bg-white/0 text-gray-400 py-2 w-60 px-2 min-w-md outline-none"
-                  disabled
-                ></input>
-                <div className="group font-normal group relative inline-block text-gray-400 underline hover:text-primary duration-200">
-                  <button
-                    onClick={copyToClipboard}
-                    className="pl-4 pr-4 border-l border-white/20 py-2 hover:bg-white/[0.12] duration-200"
-                  >
-                    {projectIdCopied ? (
-                      <FontAwesomeIcon icon={faCheck} className="pr-0.5" />
-                    ) : (
-                      <FontAwesomeIcon icon={faCopy} />
-                    )}
-                  </button>
-                  <span className="absolute hidden group-hover:flex group-hover:animate-popup duration-300 w-28 -left-8 -top-20 translate-y-full pl-3 py-2 bg-white/10 rounded-md text-center text-gray-400 text-sm">
-                    Click to Copy
-                  </span>
-                </div>
-              </div>
-              {(data?.length !== 0 || buttonReady) && (
-                <div className={`flex justify-start max-w-sm mt-2`}>
-                  <Button
-                    text="Save Changes"
-                    onButtonPressed={savePush}
-                    color="primary"
-                    size="md"
-                    active={buttonReady}
-                    iconDisabled={faCheck}
-                    textDisabled="Saved"
-                  />
-                </div>
-              )}
-            </div>
-          </div>
-          <div className="mx-6 w-full pr-12">
-            <div className="flex flex-col max-w-5xl pb-1">
-              <div className="w-full flex flex-row items-start">
-                {data?.length !== 0 && (
-                  <>
-                    <ListBox
-                      selected={env}
-                      data={['Development', 'Staging', 'Production', 'Testing']}
-                      // ref={useRef(123)}
-                      onChange={setEnv}
-                      className="z-40"
-                    />
-                    <div className="h-10 w-full bg-white/5 hover:bg-white/10 ml-2 flex items-center rounded-md flex flex-row items-center">
-                      <FontAwesomeIcon
-                        className="bg-white/5 rounded-l-md py-3 pl-4 pr-2 text-gray-400"
-                        icon={faMagnifyingGlass}
-                      />
-                      <input
-                        className="pl-2 text-gray-400 rounded-r-md bg-white/5 w-full h-full outline-none"
-                        value={searchKeys}
-                        onChange={(e) => setSearchKeys(e.target.value)}
-                        placeholder={'Search keys...'}
-                      />
-                    </div>
-                    <div className="ml-2 min-w-max flex flex-row items-start justify-start">
-                      <Button
-                        onButtonPressed={() => reorderRows(1)}
-                        color="mineshaft"
-                        size="icon-md"
-                        icon={
-                          sortMethod == 'alphabetical'
-                            ? faArrowDownAZ
-                            : faArrowDownZA
-                        }
-                      />
-                    </div>
-                    <div className="ml-2 min-w-max flex flex-row items-start justify-start">
-                      <Button
-                        onButtonPressed={download}
-                        color="mineshaft"
-                        size="icon-md"
-                        icon={faDownload}
-                      />
-                    </div>
-                    <div className="ml-2 min-w-max flex flex-row items-start justify-start">
-                      <Button
-                        onButtonPressed={changeBlurred}
-                        color="mineshaft"
-                        size="icon-md"
-                        icon={blurred ? faEye : faEyeSlash}
-                      />
-                    </div>
-                    <div className="relative ml-2 min-w-max flex flex-row items-start justify-end">
-                      <Button
-                        text="Add Key"
-                        onButtonPressed={addRow}
-                        color="mineshaft"
-                        icon={faPlus}
-                        size="md"
-                      />
-                      {isNew && (
-                        <span className="absolute right-0 flex h-3 w-3 items-center justify-center ml-4 mb-4">
-                          <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-primary/50 opacity-75 h-4 w-4"></span>
-                          <span className="relative inline-flex rounded-full h-3 w-3 bg-primary"></span>
-                        </span>
-                      )}
-                    </div>
-                  </>
-                )}
-              </div>
-            </div>
-            {data?.length !== 0 ? (
-              <div
-                id="dataall"
-                className="flex flex-col max-h-40 grow max-h-[calc(100vh-240px)] w-full overflow-y-scroll no-scrollbar no-scrollbar::-webkit-scrollbar"
-              >
-                <div
-                  className={`bg-white/5 mt-1 mb-1 rounded-md pb-2 max-w-5xl overflow-visible`}
-                >
-                  <div className="rounded-t-md sticky top-0 z-20 bg-bunker flex flex-row pl-4 pr-6 pt-4 pb-2 items-center justify-between text-gray-300 font-bold">
-                    {/* <FontAwesomeIcon icon={faAngleDown} /> */}
-                    <div className="flex flex-row items-center">
-                      <p className="pl-2 text-lg">Personal</p>
-                      <div className="group font-normal group relative inline-block text-gray-300 underline hover:text-primary duration-200">
-                        <FontAwesomeIcon
-                          className="ml-3 mt-1 text-lg"
-                          icon={faCircleInfo}
-                        />
-                        <span className="absolute hidden group-hover:flex group-hover:animate-popdown duration-300 w-44 -left-16 -top-7 translate-y-full px-2 py-2 bg-gray-700 rounded-md text-center text-gray-100 text-sm after:content-[''] after:absolute after:left-1/2 after:bottom-[100%] after:-translate-x-1/2 after:border-8 after:border-x-transparent after:border-t-transparent after:border-b-gray-700">
-                          Personal keys are only visible to you
-                        </span>
-                      </div>
-                    </div>
-                  </div>
-                  <div id="data1" className="">
-                    {data
-                      .filter(
-                        (keyPair) =>
-                          keyPair.key
-                            .toLowerCase()
-                            .includes(searchKeys.toLowerCase()) &&
-                          keyPair.type == 'personal'
-                      )
-                      ?.map((keyPair) => (
-                        <KeyPair
-                          key={keyPair.id}
-                          keyPair={keyPair}
-                          deleteRow={deleteCertainRow}
-                          modifyValue={listenChangeValue}
-                          modifyKey={listenChangeKey}
-                          modifyVisibility={listenChangeVisibility}
-                          isBlurred={blurred}
-                          duplicates={data
-                            ?.map((item) => item.key)
-                            .filter(
-                              (item, index) =>
-                                index !==
-                                data?.map((item) => item.key).indexOf(item)
-                            )}
-                        />
-                      ))}
-                  </div>
-                </div>
-                <div
-                  className={`bg-white/5 mt-1 mb-2 rounded-md p-1 pb-2 max-w-5xl ${
-                    data?.length > 8 ? 'h-3/4' : 'h-min'
-                  }`}
-                >
-                  <div className="sticky top-0 z-40 bg-bunker flex flex-row pl-4 pr-5 pt-4 pb-2 items-center justify-between text-gray-300 font-bold">
-                    {/* <FontAwesomeIcon icon={faAngleDown} /> */}
-                    <div className="flex flex-row items-center">
-                      <p className="pl-2 text-lg">Shared</p>
-                      <div className="group font-normal group relative inline-block text-gray-300 underline hover:text-primary duration-200">
-                        <FontAwesomeIcon
-                          className="ml-3 text-lg mt-1"
-                          icon={faCircleInfo}
-                        />
-                        <span className="absolute hidden group-hover:flex group-hover:animate-popdown duration-300 w-44 -left-16 -top-7 translate-y-full px-2 py-2 bg-gray-700 rounded-md text-center text-gray-100 text-sm after:content-[''] after:absolute after:left-1/2 after:bottom-[100%] after:-translate-x-1/2 after:border-8 after:border-x-transparent after:border-t-transparent after:border-b-gray-700">
-                          Shared keys are visible to your whole team
-                        </span>
-                      </div>
-                    </div>
-                  </div>
-                  <div id="data2" className="data2">
-                    {data
-                      .filter(
-                        (keyPair) =>
-                          keyPair.key
-                            .toLowerCase()
-                            .includes(searchKeys.toLowerCase()) &&
-                          keyPair.type == 'shared'
-                      )
-                      ?.map((keyPair) => (
-                        <KeyPair
-                          key={keyPair.id}
-                          keyPair={keyPair}
-                          deleteRow={deleteCertainRow}
-                          modifyValue={listenChangeValue}
-                          modifyKey={listenChangeKey}
-                          modifyVisibility={listenChangeVisibility}
-                          isBlurred={blurred}
-                          duplicates={data
-                            ?.map((item) => item.key)
-                            .filter(
-                              (item, index) =>
-                                index !==
-                                data?.map((item) => item.key).indexOf(item)
-                            )}
-                        />
-                      ))}
-                  </div>
-                </div>
-                <div className="w-full max-w-5xl">
-                  <DropZone
-                    setData={addData}
-                    setErrorDragAndDrop={setErrorDragAndDrop}
-                    createNewFile={addRow}
-                    errorDragAndDrop={errorDragAndDrop}
-                    setButtonReady={setButtonReady}
-                    keysExist={true}
-                    numCurrentRows={data.length}
-                  />
-                </div>
-              </div>
-            ) : (
-              <div className="flex flex-col items-center justify-center h-full text-xl text-gray-400 max-w-5xl mt-28">
-                {fileState.message != "There's nothing to pull" &&
-                  fileState.message != undefined && (
-                    <FontAwesomeIcon
-                      className="text-7xl mb-8"
-                      icon={faFolderOpen}
-                    />
-                  )}
-                {(fileState.message == "There's nothing to pull" ||
-                  fileState.message == undefined) &&
-                  isKeyAvailable && (
-                    <DropZone
-                      setData={setData}
-                      setErrorDragAndDrop={setErrorDragAndDrop}
-                      createNewFile={addRow}
-                      errorDragAndDrop={errorDragAndDrop}
-                      setButtonReady={setButtonReady}
-                      numCurrentRows={data.length}
-                    />
-                  )}
-                {fileState.message ==
-                  'Failed membership validation for workspace' && (
-                  <p>You are not authorized to view this project.</p>
-                )}
-                {fileState.message == 'Access needed to pull the latest file' ||
-                  (!isKeyAvailable && (
-                    <>
-                      <FontAwesomeIcon
-                        className="text-7xl mt-20 mb-8"
-                        icon={faFolderOpen}
-                      />
-                      <p>
-                        To view this file, contact your administrator for
-                        permission.
-                      </p>
-                      <p className="mt-1">
-                        They need to grant you access in the team tab.
-                      </p>
-                    </>
-                  ))}
-              </div>
-            )}
-          </div>
-        </div>
-      </div>
-    </div>
-  ) : (
-    <div className="relative z-10 w-10/12 mr-auto h-full ml-2 bg-bunker-800 flex flex-col items-center justify-center">
-      <div className="absolute top-0 bg-bunker h-14 border-b border-mineshaft-700 w-full"></div>
-      <Image
-        src="/images/loading/loading.gif"
-        height={70}
-        width={120}
-        alt="loading animation"
-      ></Image>
-    </div>
-  );
-}
-
-Dashboard.requireAuth = true;

frontend/pages/dashboard/[id].tsx

@@ -0,0 +1,649 @@
+import { Fragment, useCallback, useEffect, useState } from 'react';
+import Head from 'next/head';
+import Image from 'next/image';
+import { useRouter } from 'next/router';
+import {
+  faArrowDownAZ,
+  faArrowDownZA,
+  faCheck,
+  faCopy,
+  faDownload,
+  faEye,
+  faEyeSlash,
+  faFolderOpen,
+  faMagnifyingGlass,
+  faPlus,
+} from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
+import Button from '~/components/basic/buttons/Button';
+import ListBox from '~/components/basic/Listbox';
+import BottonRightPopup from '~/components/basic/popups/BottomRightPopup';
+import { useNotificationContext } from '~/components/context/Notifications/NotificationProvider';
+import DropZone from '~/components/dashboard/DropZone';
+import KeyPair from '~/components/dashboard/KeyPair';
+import SideBar from '~/components/dashboard/SideBar';
+import NavHeader from '~/components/navigation/NavHeader';
+import getSecretsForProject from '~/components/utilities/secrets/getSecretsForProject';
+import pushKeys from '~/components/utilities/secrets/pushKeys';
+import guidGenerator from '~/utilities/randomId';
+
+import { envMapping } from '../../public/data/frequentConstants';
+import getUser from '../api/user/getUser';
+import checkUserAction from '../api/userActions/checkUserAction';
+import registerUserAction from '../api/userActions/registerUserAction';
+import getWorkspaces from '../api/workspace/getWorkspaces';
+
+
+interface SecretDataProps {
+  type: 'personal' | 'shared';
+  pos: number;
+  key: string;
+  value: string;
+  id: string;
+  comment: string;
+}
+
+/**
+ * this function finds the teh duplicates in an array
+ * @param arr - array of anything (e.g., with secret keys and types (personal/shared))
+ * @returns - a list with duplicates
+ */
+function findDuplicates(arr: any[]) {
+  const map = new Map();
+  return arr.filter((item) => {
+    if (map.has(item)) {
+      map.set(item, false);
+      return true;
+    } else {
+      map.set(item, true);
+      return false;
+    }
+  });
+}
+
+/**
+ * This is the main component for the dashboard (aka the screen with all the encironemnt variable & secrets)
+ * @returns
+ */
+export default function Dashboard() {
+  const [data, setData] = useState<SecretDataProps[] | null>();
+  const [fileState, setFileState] = useState<SecretDataProps[]>([]);
+  const [buttonReady, setButtonReady] = useState(false);
+  const router = useRouter();
+  const [workspaceId, setWorkspaceId] = useState('');
+  const [blurred, setBlurred] = useState(true);
+  const [isKeyAvailable, setIsKeyAvailable] = useState(true);
+  const [env, setEnv] = useState(
+    router.asPath.split('?').length == 1
+      ? 'Development'
+      : Object.keys(envMapping).includes(router.asPath.split('?')[1])
+      ? router.asPath.split('?')[1]
+      : 'Development'
+  );
+  const [isNew, setIsNew] = useState(false);
+  const [searchKeys, setSearchKeys] = useState('');
+  const [errorDragAndDrop, setErrorDragAndDrop] = useState(false);
+  const [projectIdCopied, setProjectIdCopied] = useState(false);
+  const [sortMethod, setSortMethod] = useState('alphabetical');
+  const [checkDocsPopUpVisible, setCheckDocsPopUpVisible] = useState(false);
+  const [hasUserEverPushed, setHasUserEverPushed] = useState(false);
+  const [sidebarSecretId, toggleSidebar] = useState("None");
+  const [sharedToHide, setSharedToHide] = useState<string[]>([]);
+
+  const { createNotification } = useNotificationContext();
+
+  // #TODO: fix save message for changing reroutes
+  // const beforeRouteHandler = (url) => {
+  // 	const warningText =
+  // 		"Do you want to save your results bfore leaving this page?";
+  // 	if (!buttonReady) return;
+  // 	if (router.asPath !== url && !confirm(warningText)) {
+  // 		// router.events.emit('routeChangeError');
+  // 		// setData(data)
+  // 		savePush();
+  // 		throw `Route change to "${url}" was aborted (this error can be safely ignored).`;
+  // 	} else {
+  // 		setButtonReady(false);
+  // 	}
+  // };
+
+  // prompt the user if they try and leave with unsaved changes
+  useEffect(() => {
+    const warningText =
+      'Do you want to save your results before leaving this page?';
+    const handleWindowClose = (e: any) => {
+      if (!buttonReady) return;
+      e.preventDefault();
+      return (e.returnValue = warningText);
+    };
+    window.addEventListener('beforeunload', handleWindowClose);
+    // router.events.on('routeChangeStart', beforeRouteHandler);
+    return () => {
+      window.removeEventListener('beforeunload', handleWindowClose);
+      // router.events.off('routeChangeStart', beforeRouteHandler);
+    };
+  }, [buttonReady]);
+
+  /**
+   * Reorder rows alphabetically or in the opprosite order
+   */
+  const reorderRows = (dataToReorder: SecretDataProps[] | 1) => {
+    setSortMethod((prevSort) =>
+      prevSort == 'alphabetical' ? '-alphabetical' : 'alphabetical'
+    );
+
+    sortValuesHandler(dataToReorder, undefined);
+  };
+
+  useEffect(() => {
+    (async () => {
+      try {
+        const userWorkspaces = await getWorkspaces();
+        const listWorkspaces = userWorkspaces.map((workspace) => workspace._id);
+        if (
+          !listWorkspaces.includes(router.asPath.split('/')[2].split('?')[0])
+        ) {
+          router.push('/dashboard/' + listWorkspaces[0]);
+        }
+
+        if (env != router.asPath.split('?')[1]) {
+          router.push(router.asPath.split('?')[0] + '?' + env);
+        }
+        setBlurred(true);
+        setWorkspaceId(String(router.query.id));
+
+        const dataToSort = await getSecretsForProject({
+          env,
+          setFileState,
+          setIsKeyAvailable,
+          setData,
+          workspaceId: String(router.query.id)
+        });
+        reorderRows(dataToSort);
+
+        setSharedToHide(
+          dataToSort?.filter(row => (dataToSort
+          ?.map((item) => item.key)
+          .filter(
+            (item, index) =>
+              index !==
+              dataToSort?.map((item) => item.key).indexOf(item)
+          ).includes(row.key) && row.type == 'shared'))?.map((item) => item.id)
+        )
+
+        const user = await getUser();
+        setIsNew(
+          (Date.parse(String(new Date())) - Date.parse(user.createdAt)) / 60000 < 3
+            ? true
+            : false
+        );
+
+        const userAction = await checkUserAction({
+          action: 'first_time_secrets_pushed'
+        });
+        setHasUserEverPushed(userAction ? true : false);
+      } catch (error) {
+        console.log('Error', error);
+        setData(undefined);
+      }
+    })();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [env]);
+
+  const addRow = () => {
+    setIsNew(false);
+    setData([
+      ...data!,
+      {
+        id: guidGenerator(),
+        pos: data!.length,
+        key: '',
+        value: '',
+        type: 'shared',
+        comment: '',
+      }
+    ]);
+  };
+
+  interface overrideProps {
+    id: string;
+    keyName: string;
+    value: string;
+    pos: number;
+    comment: string;
+  }
+
+  /**
+   * This function add an ovverrided version of a certain secret to the current user
+   * @param {object} obj 
+   * @param {string} obj.id - if of this secret that is about to be overriden
+   * @param {string} obj.keyName - key name of this secret
+   * @param {string} obj.value - value of this secret
+   * @param {string} obj.pos - position of this secret on the dashboard 
+   */
+  const addOverride = ({ id, keyName, value, pos, comment }: overrideProps) => {
+    setIsNew(false);
+    const tempdata: SecretDataProps[] | 1 = [
+      ...data!,
+      {
+        id: id,
+        pos: pos,
+        key: keyName,
+        value: value,
+        type: 'personal',
+        comment: comment
+      }
+    ];
+    sortValuesHandler(tempdata, sortMethod == "alhpabetical" ? "-alphabetical" : "alphabetical");
+  };
+
+  const deleteRow = (id: string) => {
+    setButtonReady(true);
+    setData(data!.filter((row: SecretDataProps) => row.id !== id));
+  };
+
+  /**
+   * This function deleted the override of a certain secrer
+   * @param {string} id - id of a secret to be deleted
+   */
+  const deleteOverride = (id: string) => {
+    setButtonReady(true);
+    const tempData = data!.filter((row: SecretDataProps) => !(row.id == id && row.type == 'personal'))
+    sortValuesHandler(tempData, sortMethod == "alhpabetical" ? "-alphabetical" : "alphabetical")
+  };
+
+  const modifyValue = (value: string, pos: number) => {
+    setData((oldData) => {
+      oldData![pos].value = value;
+      return [...oldData!];
+    });
+    setButtonReady(true);
+  };
+
+  const modifyKey = (value: string, pos: number) => {
+    setData((oldData) => {
+      oldData![pos].key = value;
+      return [...oldData!];
+    });
+    setButtonReady(true);
+  };
+
+  const modifyVisibility = (value: "shared" | "personal", pos: number) => {
+    setData((oldData) => {
+      oldData![pos].type = value;
+      return [...oldData!];
+    });
+    setButtonReady(true);
+  };
+
+  const modifyComment = (value: string, pos: number) => {
+    setData((oldData) => {
+      oldData![pos].comment = value;
+      return [...oldData!];
+    });
+    setButtonReady(true);
+  };
+
+  // For speed purposes and better perforamance, we are using useCallback
+  const listenChangeValue = useCallback((value: string, pos: number) => {
+    modifyValue(value, pos);
+  }, []);
+
+  const listenChangeKey = useCallback((value: string, pos: number) => {
+    modifyKey(value, pos);
+  }, []);
+
+  const listenChangeVisibility = useCallback((value: "shared" | "personal", pos: number) => {
+    modifyVisibility(value, pos);
+  }, []);
+
+  const listenChangeComment = useCallback((value: string, pos: number) => {
+    modifyComment(value, pos);
+  }, []);
+
+  /**
+   * Save the changes of environment variables and push them to the database
+   */
+  const savePush = async () => {
+    // Format the new object with environment variables
+    const obj = Object.assign(
+      {},
+      ...data!.map((row: SecretDataProps) => ({ [row.type.charAt(0) + row.key]: [row.value, row.comment] }))
+    );
+
+    // 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(Number(key[0].charAt(0))))
+      .every((v) => v === false);
+    const duplicatesExist = findDuplicates(data!.map((item: SecretDataProps) => item.key + item.type)).length > 0;
+
+    if (nameErrors) {
+      return createNotification({
+        text: 'Solve all name errors before saving secrets.',
+        type: 'error'
+      });
+    }
+
+    if (duplicatesExist) {
+      return createNotification({
+        text: 'Remove duplicated secret names before saving.',
+        type: 'error'
+      });
+    }
+
+    // Once "Save changed is clicked", disable that button
+    setButtonReady(false);
+    pushKeys({ obj, workspaceId: String(router.query.id), env });
+
+    // 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' });
+    }
+  };
+
+  const addData = (newData: SecretDataProps[]) => {
+    setData(data!.concat(newData));
+    setButtonReady(true);
+  };
+
+  const changeBlurred = () => {
+    setBlurred(!blurred);
+  };
+
+  const sortValuesHandler = (dataToSort: SecretDataProps[] | 1, specificSortMethod?: 'alphabetical' | '-alphabetical') => {
+    const howToSort = specificSortMethod == undefined ? sortMethod : specificSortMethod;
+    const sortedData = (dataToSort != 1 ? dataToSort : data)!
+    .sort((a, b) =>
+      howToSort == 'alphabetical'
+        ? a.key.localeCompare(b.key)
+        : b.key.localeCompare(a.key)
+    )
+    .map((item: SecretDataProps, index: number) => {
+      return {
+        ...item,
+        pos: index
+      };
+    });
+
+    setData(sortedData);
+  };
+
+  // This function downloads the secrets as a .env file
+  const download = () => {
+    const file = data!
+      .map((item: SecretDataProps) => [item.key, item.value].join('='))
+      .join('\n');
+    const blob = new Blob([file]);
+    const fileDownloadUrl = URL.createObjectURL(blob);
+    const alink = document.createElement('a');
+    alink.href = fileDownloadUrl;
+    alink.download = envMapping[env] + '.env';
+    alink.click();
+  };
+
+  const deleteCertainRow = (id: string) => {
+    deleteRow(id);
+  };
+
+  /**
+   * This function copies the project id to the clipboard
+   */
+  function copyToClipboard() {
+    const copyText = document.getElementById('myInput') as HTMLInputElement;
+    
+    if (copyText) {
+      copyText.select();
+      copyText.setSelectionRange(0, 99999); // For mobile devices
+
+      navigator.clipboard.writeText(copyText.value);
+  
+      setProjectIdCopied(true);
+      setTimeout(() => setProjectIdCopied(false), 2000);
+    }
+  }
+
+  return data ? (
+    <div className="bg-bunker-800 max-h-screen flex flex-col justify-between text-white">
+      <Head>
+        <title>Secrets</title>
+        <link rel="icon" href="/infisical.ico" />
+        <meta property="og:image" content="/images/message.png" />
+        <meta property="og:title" content="Manage your .env files in seconds" />
+        <meta
+          name="og:description"
+          content="Infisical a simple end-to-end encrypted platform that enables teams to sync and manage their .env files."
+        />
+      </Head>
+      <div className="flex flex-row">
+        {sidebarSecretId != "None" && <SideBar 
+          toggleSidebar={toggleSidebar} 
+          data={data.filter((row: SecretDataProps) => row.id == sidebarSecretId)} 
+          modifyKey={listenChangeKey} 
+          modifyValue={listenChangeValue} 
+          modifyComment={listenChangeComment}
+          addOverride={addOverride}
+          deleteOverride={deleteOverride}
+          buttonReady={buttonReady}
+          savePush={savePush}
+          sharedToHide={sharedToHide}
+          setSharedToHide={setSharedToHide}
+        />}
+        <div className="w-full max-h-96 pb-2">
+          <NavHeader pageName="Secrets" isProjectRelated={true} />
+          {checkDocsPopUpVisible && (
+            <BottonRightPopup
+              buttonText="Check Docs"
+              buttonLink="https://infisical.com/docs/getting-started/introduction"
+              titleText="Good job!"
+              emoji="🎉"
+              textLine1="Congrats on adding more secrets."
+              textLine2="Here is how to connect them to your codebase."
+              setCheckDocsPopUpVisible={setCheckDocsPopUpVisible}
+            />
+          )}
+          <div className="flex flex-row justify-between items-center mx-6 mt-6 mb-3 text-xl max-w-5xl">
+            <div className="flex flex-row justify-start items-center text-3xl">
+              <p className="font-semibold mr-4 mt-1">Secrets</p>
+              {data?.length == 0 && (
+                <ListBox
+                  selected={env}
+                  data={['Development', 'Staging', 'Production', 'Testing']}
+                  onChange={setEnv}
+                />
+              )}
+            </div>
+            <div className="flex flex-row">
+              <div className="flex justify-end items-center bg-white/[0.07] text-base mt-2 mr-2 rounded-md text-gray-400">
+                <p className="mr-2 font-bold pl-4">Project ID:</p>
+                <input
+                  type="text"
+                  value={workspaceId}
+                  id="myInput"
+                  className="bg-white/0 text-gray-400 py-2 w-60 px-2 min-w-md outline-none"
+                  disabled
+                ></input>
+                <div className="group font-normal group relative inline-block text-gray-400 underline hover:text-primary duration-200">
+                  <button
+                    onClick={copyToClipboard}
+                    className="pl-4 pr-4 border-l border-white/20 py-2 hover:bg-white/[0.12] duration-200"
+                  >
+                    {projectIdCopied ? (
+                      <FontAwesomeIcon icon={faCheck} className="pr-0.5" />
+                    ) : (
+                      <FontAwesomeIcon icon={faCopy} />
+                    )}
+                  </button>
+                  <span className="absolute hidden group-hover:flex group-hover:animate-popup duration-300 w-28 -left-8 -top-20 translate-y-full pl-3 py-2 bg-white/10 rounded-md text-center text-gray-400 text-sm">
+                    Click to Copy
+                  </span>
+                </div>
+              </div>
+              {(data?.length !== 0 || buttonReady) && (
+                <div className={`flex justify-start max-w-sm mt-2`}>
+                  <Button
+                    text="Save Changes"
+                    onButtonPressed={savePush}
+                    color="primary"
+                    size="md"
+                    active={buttonReady}
+                    iconDisabled={faCheck}
+                    textDisabled="Saved"
+                  />
+                </div>
+              )}
+            </div>
+          </div>
+          <div className="mx-6 w-full pr-12">
+            <div className="flex flex-col max-w-5xl pb-1">
+              <div className="w-full flex flex-row items-start">
+                {data?.length !== 0 && (
+                  <>
+                    <ListBox
+                      selected={env}
+                      data={['Development', 'Staging', 'Production', 'Testing']}
+                      onChange={setEnv}
+                    />
+                    <div className="h-10 w-full bg-white/5 hover:bg-white/10 ml-2 flex items-center rounded-md flex flex-row items-center">
+                      <FontAwesomeIcon
+                        className="bg-white/5 rounded-l-md py-3 pl-4 pr-2 text-gray-400"
+                        icon={faMagnifyingGlass}
+                      />
+                      <input
+                        className="pl-2 text-gray-400 rounded-r-md bg-white/5 w-full h-full outline-none"
+                        value={searchKeys}
+                        onChange={(e) => setSearchKeys(e.target.value)}
+                        placeholder={'Search keys...'}
+                      />
+                    </div>
+                    <div className="ml-2 min-w-max flex flex-row items-start justify-start">
+                      <Button
+                        onButtonPressed={() => reorderRows(1)}
+                        color="mineshaft"
+                        size="icon-md"
+                        icon={
+                          sortMethod == 'alphabetical'
+                            ? faArrowDownAZ
+                            : faArrowDownZA
+                        }
+                      />
+                    </div>
+                    <div className="ml-2 min-w-max flex flex-row items-start justify-start">
+                      <Button
+                        onButtonPressed={download}
+                        color="mineshaft"
+                        size="icon-md"
+                        icon={faDownload}
+                      />
+                    </div>
+                    <div className="ml-2 min-w-max flex flex-row items-start justify-start">
+                      <Button
+                        onButtonPressed={changeBlurred}
+                        color="mineshaft"
+                        size="icon-md"
+                        icon={blurred ? faEye : faEyeSlash}
+                      />
+                    </div>
+                    <div className="relative ml-2 min-w-max flex flex-row items-start justify-end">
+                      <Button
+                        text="Add Key"
+                        onButtonPressed={addRow}
+                        color="mineshaft"
+                        icon={faPlus}
+                        size="md"
+                      />
+                      {isNew && (
+                        <span className="absolute right-0 flex h-3 w-3 items-center justify-center ml-4 mb-4">
+                          <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-primary/50 opacity-75 h-4 w-4"></span>
+                          <span className="relative inline-flex rounded-full h-3 w-3 bg-primary"></span>
+                        </span>
+                      )}
+                    </div>
+                  </>
+                )}
+              </div>
+            </div>
+            {data?.length !== 0 ? (
+              <div className="flex flex-col w-full mt-1 mb-2">
+                <div
+                  className={`max-w-5xl mt-1 max-h-[calc(100vh-280px)] overflow-hidden overflow-y-scroll no-scrollbar no-scrollbar::-webkit-scrollbar`}
+                >
+                  <div className="px-1 pt-2 bg-mineshaft-800 rounded-md p-2">
+                    {data?.filter(row => !(sharedToHide.includes(row.id) && row.type == 'shared')).map((keyPair) => (
+                      <KeyPair 
+                        key={keyPair.id}
+                        keyPair={keyPair}
+                        deleteRow={deleteCertainRow}
+                        modifyValue={listenChangeValue}
+                        modifyKey={listenChangeKey}
+                        isBlurred={blurred}
+                        isDuplicate={findDuplicates(data?.map((item) => item.key + item.type))?.includes(keyPair.key + keyPair.type)}
+                        toggleSidebar={toggleSidebar}
+                        sidebarSecretId={sidebarSecretId}
+                      />
+                    ))}
+                  </div>
+                  <div className="w-full max-w-5xl px-2 pt-3">
+                    <DropZone
+                      setData={addData}
+                      setErrorDragAndDrop={setErrorDragAndDrop}
+                      createNewFile={addRow}
+                      errorDragAndDrop={errorDragAndDrop}
+                      setButtonReady={setButtonReady}
+                      keysExist={true}
+                      numCurrentRows={data.length}
+                    />
+                  </div>
+                </div>
+              </div>
+            ) : (
+              <div className="flex flex-col items-center justify-center h-full text-xl text-gray-400 max-w-5xl mt-28">
+                {isKeyAvailable && (
+                  <DropZone
+                    setData={setData}
+                    setErrorDragAndDrop={setErrorDragAndDrop}
+                    createNewFile={addRow}
+                    errorDragAndDrop={errorDragAndDrop}
+                    setButtonReady={setButtonReady}
+                    numCurrentRows={data.length}
+                    keysExist={false}
+                  />
+                )}
+                {
+                // fileState.message == 'Access needed to pull the latest file' ||
+                  (!isKeyAvailable && (
+                    <>
+                      <FontAwesomeIcon
+                        className="text-7xl mt-20 mb-8"
+                        icon={faFolderOpen}
+                      />
+                      <p>
+                        To view this file, contact your administrator for
+                        permission.
+                      </p>
+                      <p className="mt-1">
+                        They need to grant you access in the team tab.
+                      </p>
+                    </>
+                  ))}
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  ) : (
+    <div className="relative z-10 w-10/12 mr-auto h-full ml-2 bg-bunker-800 flex flex-col items-center justify-center">
+      <div className="absolute top-0 bg-bunker h-14 border-b border-mineshaft-700 w-full"></div>
+      <Image
+        src="/images/loading/loading.gif"
+        height={70}
+        width={120}
+        alt="loading animation"
+      ></Image>
+    </div>
+  );
+}
+
+Dashboard.requireAuth = true;

frontend/pages/github.js

@@ -0,0 +1,37 @@
+import React, { useEffect } from "react";
+import Head from "next/head";
+import { useRouter } from "next/router";
+const queryString = require("query-string");
+import AuthorizeIntegration from "./api/integrations/authorizeIntegration";
+
+export default function Github() {
+  const router = useRouter();
+  const parsedUrl = queryString.parse(router.asPath.split("?")[1]);
+  const code = parsedUrl.code;
+  const state = parsedUrl.state;
+
+  /**
+   * Here we forward to the default workspace if a user opens this url
+   */
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  useEffect(async () => {
+    try {
+      if (state === localStorage.getItem('latestCSRFToken')) {
+        localStorage.removeItem('latestCSRFToken');
+        await AuthorizeIntegration({
+          workspaceId: localStorage.getItem('projectData.id'),
+          code,
+          integration: "github",
+        });
+        router.push("/integrations/" + localStorage.getItem("projectData.id"));
+      }
+    } catch (error) {
+      console.error('Github integration error: ', error);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return <div></div>;
+}
+
+Github.requireAuth = true;

frontend/pages/heroku.js

@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import { useEffect } from "react";
 import Head from "next/head";
 import { useRouter } from "next/router";
 const queryString = require("query-string");

frontend/pages/home/[id].tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
 import { IconProp } from '@fortawesome/fontawesome-svg-core';

frontend/pages/index.js

@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import { useEffect } from "react";
 import { useRouter } from "next/router";
 
 export default function Home() {

frontend/pages/integrations/[id].js

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import Head from "next/head";
 import Image from "next/image";
 import { useRouter } from "next/router";
@@ -123,6 +123,8 @@ export default function Integrations() {
    * @returns 
    */
   const handleIntegrationOption = async ({ integrationOption }) => {
+    
+    console.log('handleIntegrationOption', integrationOption);
 
     try {
       // generate CSRF token for OAuth2 code-token exchange integrations
@@ -139,6 +141,9 @@ export default function Integrations() {
         case 'Netlify':
           window.location = `https://app.netlify.com/authorize?client_id=${integrationOption.clientId}&response_type=code&state=${state}&redirect_uri=${window.location.origin}/netlify`;
           break;
+        case 'GitHub':
+          window.location = `https://github.com/login/oauth/authorize?client_id=${integrationOption.clientId}&response_type=code&scope=repo&redirect_uri=${window.location.origin}/github&state=${state}`;
+          break;
         // case 'Fly.io':
         //   console.log('fly.io');
         //   setIntegrationAccessTokenDialogOpen(true);

frontend/pages/login.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import Head from 'next/head';
 import Image from 'next/image';
 import Link from 'next/link';
@@ -38,6 +38,10 @@ export default function Login() {
    * This function check if the user entered the correct credentials and should be allowed to log in.
    */
   const loginCheck = async () => {
+    if (!email || !password) {
+      return;
+    }
+
     setIsLoading(true);
     await attemptLogin(
       email,
@@ -45,7 +49,7 @@ export default function Login() {
       setErrorLogin,
       router,
       false,
-      true
+      true,
     ).then(() => {
       setTimeout(function () {
         setIsLoading(false);
@@ -75,68 +79,73 @@ export default function Login() {
           />
         </div>
       </Link>
-      <div className="bg-bunker w-full max-w-md mx-auto h-7/12 py-4 pt-8 px-6 rounded-xl drop-shadow-xl">
-        <p className="text-3xl w-max mx-auto flex justify-center font-semibold text-bunker-100 mb-6">
-          Log in to your account
-        </p>
-        <div className="flex items-center justify-center w-full md:p-2 rounded-lg mt-4 md:mt-0 max-h-24 md:max-h-28">
-          <InputField
-            label="Email"
-            onChangeHandler={setEmail}
-            type="email"
-            value={email}
-            placeholder=""
-            isRequired
-            autoComplete="username"
-          />
-        </div>
-        <div className="relative flex items-center justify-center w-full md:p-2 rounded-lg md:mt-2 mt-6 max-h-24 md:max-h-28">
-          <InputField
-            label="Password"
-            onChangeHandler={setPassword}
-            type="password"
-            value={password}
-            placeholder=""
-            isRequired
-            autoComplete="current-password"
-            id="current-password"
-          />
-          <div className="absolute top-0 md:top-2 right-0.5 md:right-3 text-primary-700 hover:text-primary duration-200 cursor-pointer text-sm">
-            <Link href="/verify-email">Forgot password?</Link>
-          </div>
-        </div>
-        {errorLogin && <Error text="Your email and/or password are wrong." />}
-        <div className="flex flex-col items-center justify-center w-full md:p-2 max-h-20 max-w-md mt-4 mx-auto text-sm">
-          <div className="text-l mt-6 m-8 px-8 py-3 text-lg">
-            <Button
-              text="Log In"
-              onButtonPressed={loginCheck}
-              loading={isLoading}
-              size="lg"
+      <form
+        onChange={() => setErrorLogin(false)} onSubmit={(e) => e.preventDefault()}
+      >
+        <div className="bg-bunker w-full max-w-md mx-auto h-7/12 py-4 pt-8 px-6 rounded-xl drop-shadow-xl">
+          <p className="text-3xl w-max mx-auto flex justify-center font-semibold text-bunker-100 mb-6">
+            Log in to your account
+          </p>
+          <div className="flex items-center justify-center w-full md:p-2 rounded-lg mt-4 md:mt-0 max-h-24 md:max-h-28">
+            <InputField
+              label="Email"
+              onChangeHandler={setEmail}
+              type="email"
+              value={email}
+              placeholder=""
+              isRequired
+              autoComplete="username"
             />
           </div>
-        </div>
-        {/* <div className="flex items-center justify-center w-full md:p-2 rounded-lg max-h-24 md:max-h-28">
+          <div className="relative flex items-center justify-center w-full md:p-2 rounded-lg md:mt-2 mt-6 max-h-24 md:max-h-28">
+            <InputField
+              label="Password"
+              onChangeHandler={setPassword}
+              type="password"
+              value={password}
+              placeholder=""
+              isRequired
+              autoComplete="current-password"
+              id="current-password"
+            />
+            <div className="absolute top-2 right-3 text-primary-700 hover:text-primary duration-200 cursor-pointer text-sm">
+              <Link href="/verify-email">Forgot password?</Link>
+            </div>
+          </div>
+          {!isLoading && errorLogin && <Error text="Your email and/or password are wrong." />}
+          <div className="flex flex-col items-center justify-center w-full md:p-2 max-h-20 max-w-md mt-4 mx-auto text-sm">
+            <div className="text-l mt-6 m-8 px-8 py-3 text-lg">
+              <Button
+                type="submit"
+                text="Log In"
+                onButtonPressed={loginCheck}
+                loading={isLoading}
+                size="lg"
+              />
+            </div>
+          </div>
+          {/* <div className="flex items-center justify-center w-full md:p-2 rounded-lg max-h-24 md:max-h-28">
           <p className="text-gray-400">I may have <Link href="/login"><u className="text-sky-500 cursor-pointer">forgotten my password.</u></Link></p>
         </div> */}
-      </div>
-      {false && (
-        <div className="w-full p-2 flex flex-row items-center bg-white/10 text-gray-300 rounded-md max-w-md mx-auto mt-4">
-          <FontAwesomeIcon icon={faWarning} className="ml-2 mr-6 text-6xl" />
-          We are experiencing minor technical difficulties. We are working on
-          solving it right now. Please come back in a few minutes.
         </div>
-      )}
-      <div className="flex flex-row items-center justify-center md:pb-4 mt-4">
-        <p className="text-sm flex justify-center text-gray-400 w-max">
-          Need an Infisical account?
-        </p>
-        <Link href="/signup">
-          <button className="text-primary-700 hover:text-primary duration-200 font-normal text-sm underline-offset-4 ml-1.5">
-            Sign up here.
-          </button>
-        </Link>
-      </div>
+        {false && (
+          <div className="w-full p-2 flex flex-row items-center bg-white/10 text-gray-300 rounded-md max-w-md mx-auto mt-4">
+            <FontAwesomeIcon icon={faWarning} className="ml-2 mr-6 text-6xl" />
+            We are experiencing minor technical difficulties. We are working on
+            solving it right now. Please come back in a few minutes.
+          </div>
+        )}
+        <div className="flex flex-row items-center justify-center md:pb-4 mt-4">
+          <p className="text-sm flex justify-center text-gray-400 w-max">
+            Need an Infisical account?
+          </p>
+          <Link href="/signup">
+            <button className="text-primary-700 hover:text-primary duration-200 font-normal text-sm underline-offset-4 ml-1.5">
+              Sign up here.
+            </button>
+          </Link>
+        </div>
+      </form>
     </div>
   );
 }

frontend/pages/netlify.js

@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import { useEffect } from "react";
 import Head from "next/head";
 import { useRouter } from "next/router";
 const queryString = require("query-string");

frontend/pages/noprojects.js

@@ -1,21 +1,30 @@
 import React from "react";
+import Image from "next/image";
 import { faFolderOpen } from "@fortawesome/free-regular-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 export default function NoProjects() {
   return (
     <div className="h-full flex flex-col items-center justify-center text-gray-300 text-lg text-center w-11/12 mr-auto">
-      <FontAwesomeIcon
-        icon={faFolderOpen}
-        className="text-7xl mb-8 w-full px-auto"
-      />
-      <div className="max-w-md">
-        You are not part of any projects in this organization yet. When you do,
-        they will appear here.
+      <div
+        className="mb-4 mr-16"
+      >
+        <Image
+          src="/images/dragon-cant-find.png"
+          height={270}
+          width={436}
+          alt="google logo"
+        ></Image>
       </div>
-      <div className="max-w-md mt-4">
-        Create a new project, or ask other organization members to give you
-        neccessary permissions.
+      <div className="p-4 rounded-md bg-bunker-500 mb-8 text-bunker-300 shadow-xl">
+        <div className="max-w-md">
+          You are not part of any projects in this organization yet. When you do,
+          they will appear here.
+        </div>
+        <div className="max-w-md mt-4">
+          Create a new project, or ask other organization members to give you
+          neccessary permissions.
+        </div>
       </div>
     </div>
   );

frontend/pages/password-reset.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import Image from 'next/image';
 import { useRouter } from 'next/router';
 import { faCheck, faX } from '@fortawesome/free-solid-svg-icons';

frontend/pages/settings/billing/[id].js

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import Head from "next/head";
 
 import Plan from "~/components/billing/Plan";

frontend/pages/settings/org/[id].js

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import Head from 'next/head';
 import { useRouter } from 'next/router';
 import {

frontend/pages/settings/personal/[id].js

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import Head from "next/head";
 import { faCheck, faX } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

frontend/pages/settings/project/[id].js

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import Head from "next/head";
 import { useRouter } from "next/router";
 import { faCheck, faPlus } from "@fortawesome/free-solid-svg-icons";

frontend/pages/signup.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import ReactCodeInput from 'react-code-input';
 import Head from 'next/head';
 import Image from 'next/image';
@@ -40,8 +40,8 @@ const props = {
     backgroundColor: '#0d1117',
     color: 'white',
     border: '1px solid gray',
-    textAlign: 'center'
-  }
+    textAlign: 'center',
+  },
 } as const;
 const propsPhone = {
   inputStyle: {
@@ -56,8 +56,8 @@ const propsPhone = {
     backgroundColor: '#0d1117',
     color: 'white',
     border: '1px solid gray',
-    textAlign: 'center'
-  }
+    textAlign: 'center',
+  },
 } as const;
 
 export default function SignUp() {
@@ -81,6 +81,7 @@ export default function SignUp() {
   const router = useRouter();
   const [errorLogin, setErrorLogin] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
+  const [isResendingVerificationEmail, setIsResendingVerificationEmail] = useState(false);
   const [backupKeyError, setBackupKeyError] = useState(false);
   const [verificationToken, setVerificationToken] = useState('');
   const [backupKeyIssued, setBackupKeyIssued] = useState(false);
@@ -148,7 +149,8 @@ export default function SignUp() {
     }
   };
 
-  // Verifies if the imformation that the users entered (name, workspace) is there, and if the password matched the criteria.
+  // Verifies if the imformation that the users entered (name, workspace) is there, and if the password matched the
+  // criteria.
   const signupErrorCheck = async () => {
     setIsLoading(true);
     let errorCheck = false;
@@ -169,7 +171,7 @@ export default function SignUp() {
       setPasswordErrorLength,
       setPasswordErrorNumber,
       setPasswordErrorLowerCase,
-      currentErrorCheck: errorCheck
+      currentErrorCheck: errorCheck,
     });
 
     if (!errorCheck) {
@@ -186,8 +188,8 @@ export default function SignUp() {
           .slice(0, 32)
           .padStart(
             32 + (password.slice(0, 32).length - new Blob([password]).size),
-            '0'
-          )
+            '0',
+          ),
       }) as { ciphertext: string; iv: string; tag: string };
 
       localStorage.setItem('PRIVATE_KEY', PRIVATE_KEY);
@@ -195,7 +197,7 @@ export default function SignUp() {
       client.init(
         {
           username: email,
-          password: password
+          password: password,
         },
         async () => {
           client.createVerifier(
@@ -204,14 +206,14 @@ export default function SignUp() {
                 email,
                 firstName,
                 lastName,
-                organizationName: firstName + "'s organization",
+                organizationName: firstName + '\'s organization',
                 publicKey: PUBLIC_KEY,
                 ciphertext,
                 iv,
                 tag,
                 salt: result.salt,
                 verifier: result.verifier,
-                token: verificationToken
+                token: verificationToken,
               });
 
               // if everything works, go the main dashboard page.
@@ -230,71 +232,84 @@ export default function SignUp() {
                     setErrorLogin,
                     router,
                     true,
-                    false
+                    false,
                   );
                   incrementStep();
                 } catch (error) {
                   setIsLoading(false);
                 }
               }
-            }
+            },
           );
-        }
+        },
       );
     } else {
       setIsLoading(false);
     }
   };
 
+  const resendVerificationEmail = async () => {
+    setIsResendingVerificationEmail(true);
+    setIsLoading(true);
+    await sendVerificationEmail(email);
+    setTimeout(() => {
+      setIsLoading(false);
+      setIsResendingVerificationEmail(false);
+    }, 2000);
+  };
+
   // Step 1 of the sign up process (enter the email or choose google authentication)
   const step1 = (
-    <div className="bg-bunker w-full max-w-md mx-auto h-7/12 py-8 md:px-6 mx-1 mb-48 md:mb-16 rounded-xl drop-shadow-xl">
-      <p className="text-4xl font-semibold flex justify-center text-transparent bg-clip-text bg-gradient-to-br from-sky-400 to-primary">
-        {"Let'"}s get started
-      </p>
-      <div className="flex flex-col items-center justify-center w-full md:pb-2 max-h-24 max-w-md mx-auto pt-2">
+    <div>
+      <div className="bg-bunker w-full max-w-md mx-auto h-7/12 py-8 md:px-6 mx-1 rounded-xl drop-shadow-xl">
+        <p className="text-4xl font-semibold flex justify-center text-primary">
+          {'Let\''}s get started
+        </p>
+        <div className="flex items-center justify-center w-5/6 md:w-full m-auto md:p-2 rounded-lg max-h-24 mt-4">
+          <InputField
+            label="Email"
+            onChangeHandler={setEmail}
+            type="email"
+            value={email}
+            placeholder=""
+            isRequired
+            error={emailError}
+            errorText={emailErrorMessage}
+            autoComplete="username"
+          />
+        </div>
+          {/* <div className='flex flex-row justify-left mt-4 max-w-md mx-auto'>
+            <Checkbox className="mr-4"/>
+            <p className='text-sm'>I do not want to receive emails about Infisical and its products.</p>
+          </div> */}
+        <div className="flex flex-col items-center justify-center w-5/6 md:w-full md:p-2 max-h-28 max-w-xs md:max-w-md mx-auto mt-4 md:mt-4 text-sm text-center md:text-left">
+          <p className="text-gray-400 mt-2 md:mx-0.5">
+            By creating an account, you agree to our Terms and have read and
+            acknowledged the Privacy Policy.
+          </p>
+          <div className="text-l mt-6 m-2 md:m-8 px-8 py-1 text-lg">
+            <Button text="Get Started" type="submit" onButtonPressed={emailCheck} size="lg" />
+          </div>
+        </div>
+      </div>
+      <div className="flex flex-col items-center justify-center w-full md:pb-2 max-w-md mx-auto pt-2 mb-48 md:mb-16 mt-2">
         <Link href="/login">
-          <button className="w-max pb-3 hover:opacity-90 duration-200">
-            <u className="font-normal text-md text-sky-500">
+          <button type="button" className="w-max pb-3 hover:opacity-90 duration-200">
+            <u className="font-normal text-sm text-primary-500">
               Have an account? Log in
             </u>
           </button>
         </Link>
       </div>
-      <div className="flex items-center justify-center w-5/6 md:w-full m-auto md:p-2 rounded-lg max-h-24 mt-4">
-        <InputField
-          label="Email"
-          onChangeHandler={setEmail}
-          type="email"
-          value={email}
-          placeholder=""
-          isRequired
-          error={emailError}
-          errorText={emailErrorMessage}
-          autoComplete="username"
-        />
-      </div>
-      {/* <div className='flex flex-row justify-left mt-4 max-w-md mx-auto'>
-          <Checkbox className="mr-4"/>
-          <p className='text-sm'>I do not want to receive emails about Infisical and its products.</p>
-        </div> */}
-      <div className="flex flex-col items-center justify-center w-5/6 md:w-full md:p-2 max-h-28 max-w-xs md:max-w-md mx-auto mt-4 md:mt-4 text-sm text-center md:text-left">
-        <p className="text-gray-400 mt-2 md:mx-0.5">
-          By creating an account, you agree to our Terms and have read and
-          acknowledged the Privacy Policy.
-        </p>
-        <div className="text-l mt-6 m-2 md:m-8 px-8 py-1 text-lg">
-          <Button text="Get Started" onButtonPressed={emailCheck} size="lg" />
-        </div>
-      </div>
     </div>
+
   );
 
   // Step 2 of the signup process (enter the email verification code)
   const step2 = (
     <div className="bg-bunker w-max mx-auto h-7/12 pt-10 pb-4 px-8 rounded-xl drop-shadow-xl mb-64 md:mb-16">
       <p className="text-l flex justify-center text-gray-400">
-        {"We've"} sent a verification email to{' '}
+        {'We\'ve'} sent a verification email to{' '}
       </p>
       <p className="text-l flex justify-center font-semibold my-2 text-gray-400">
         {email}{' '}
@@ -328,13 +343,16 @@ export default function SignUp() {
         <Button text="Verify" onButtonPressed={incrementStep} size="lg" />
       </div>
       <div className="flex flex-col items-center justify-center w-full max-h-24 max-w-md mx-auto pt-2">
-        {/* <Link href="/login">
-          <button className="w-full hover:opacity-90 duration-200">
-            <u className="font-normal text-sm text-sky-700">
-              Not seeing an email? Resend
-            </u>
-          </button>
-        </Link> */}
+        <div className="flex flex-row items-baseline gap-1 text-sm">
+          <span className="text-gray-400">
+            Not seeing an email?
+          </span>
+          <u className={`font-normal ${isResendingVerificationEmail ? 'text-gray-400' : 'text-primary-500 hover:opacity-90 duration-200'}`}>
+            <button disabled={isLoading} onClick={resendVerificationEmail}>
+              {isResendingVerificationEmail ? 'Resending...' : 'Resend'}
+            </button>
+          </u>
+        </div>
         <p className="text-sm text-gray-500 pb-2">
           Make sure to check your spam inbox.
         </p>
@@ -382,7 +400,7 @@ export default function SignUp() {
               setPasswordErrorLength,
               setPasswordErrorNumber,
               setPasswordErrorLowerCase,
-              currentErrorCheck: false
+              currentErrorCheck: false,
             });
           }}
           type="password"
@@ -497,7 +515,7 @@ export default function SignUp() {
         It contains your Secret Key which we cannot access or recover for you if
         you lose it.
       </div>
-      <div className="flex flex-row items-center justify-center w-3/4 md:w-full md:p-2 max-h-28 max-w-max mx-auto mt-6 py-1 md:mt-4 text-lg text-center md:text-left">
+      <div className="flex flex-col items-center justify-center md:px-4 md:py-5 mt-2 px-2 py-3 max-h-24 max-w-max mx-auto text-lg">
         <Button
           text="Download PDF"
           onButtonPressed={async () => {
@@ -508,9 +526,7 @@ export default function SignUp() {
               setBackupKeyError,
               setBackupKeyIssued
             });
-            const userWorkspaces = await getWorkspaces();
-            const userWorkspace = userWorkspaces[0]._id;
-            router.push('/home/' + userWorkspace);
+            router.push('/dashboard/');
           }}
           size="lg"
         />
@@ -556,7 +572,9 @@ export default function SignUp() {
             />
           </div>
         </Link>
-        {step == 1 ? step1 : step == 2 ? step2 : step == 3 ? step3 : step4}
+        <form onSubmit={(e) => e.preventDefault()}>
+          {step == 1 ? step1 : step == 2 ? step2 : step == 3 ? step3 : step4}
+        </form>
       </div>
     </div>
   );

frontend/pages/signupinvite.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import Head from 'next/head';
 import Image from 'next/image';
 import Link from 'next/link';

frontend/pages/users/[id].js

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import Head from 'next/head';
 import Image from 'next/image';
 import { useRouter } from 'next/router';

frontend/pages/vercel.js

@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import { useEffect } from "react";
 import Head from "next/head";
 import { useRouter } from "next/router";
 const queryString = require("query-string");

frontend/pages/verify-email.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import Head from 'next/head';
 import Image from 'next/image';
 import Link from 'next/link';