Fixing merge conflicts for pages/users

frontend/components/RouteGuard.js

@@ -48,6 +48,7 @@ export default function RouteGuard({ children }) {
     // Check if the user is authenticated
     const response = await checkAuth();
     // #TODO: figure our why sometimes it doesn't output a response
+    // ANS(akhilmhdh): Because inside the security client the await token() doesn't have try/catch
     if (!publicPaths.includes(path)) {
       try {
         if (response.status !== 200) {

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';
 
@@ -140,4 +140,4 @@ const InputField = (
   }
 };
 
-export default React.memo(InputField);
+export default memo(InputField);

frontend/components/basic/Toggle.tsx

@@ -0,0 +1,83 @@
+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 {
+          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

@@ -16,7 +16,7 @@ type ButtonProps = {
   size: string;
   icon?: IconProp;
   active?: boolean;
-  iconDisabled?: string;
+  iconDisabled?: IconProp;
   textDisabled?: string;
   type?: ButtonHTMLAttributes<any>['type'];
 };
@@ -73,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",

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

@@ -152,7 +152,13 @@ const DropZone = ({
           icon={faUpload}
           className="text-bunker-300 text-3xl mr-6"
         />
+<<<<<<< HEAD
         <p className="text-bunker-300 mt-1">{t("common:drop-zone-keys")}</p>
+=======
+        <p className="text-bunker-300 mt-1">
+          Drag and drop your .env file here to add more keys.
+        </p>
+>>>>>>> 876c5f51c2caabf92b47d5a18a9b98e601806bf4
       </div>
       {errorDragAndDrop ? (
         <div className="mt-8 max-w-xl opacity-80">

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,168 @@
+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> */}
+      <SecretVersionList secretId={data[0]?.id} />
+      <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,

frontend/components/navigation/NavBarDashboard.tsx

@@ -1,10 +1,18 @@
 /* eslint-disable react/jsx-key */
+<<<<<<< HEAD
 import React, { Fragment, useEffect, useMemo, useState } from "react";
 import Image from "next/image";
 import { useRouter } from "next/router";
 import { TFunction, useTranslation } from "next-i18next";
 import { faGithub, faSlack } from "@fortawesome/free-brands-svg-icons";
 import { faCircleQuestion } from "@fortawesome/free-regular-svg-icons";
+=======
+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';
+import { faCircleQuestion } from '@fortawesome/free-regular-svg-icons';
+>>>>>>> 876c5f51c2caabf92b47d5a18a9b98e601806bf4
 import {
   faAngleDown,
   faBook,

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/SecurityClient.ts

@@ -16,12 +16,19 @@ export default class SecurityClient {
     const req = new Request(resource, options);
 
     if (this.#token == '') {
-      this.setToken(await token());
+      try {
+        // TODO: This should be moved to a context to do it only once when app loads
+        // this try catch saves route guard from a stuck state
+        this.setToken(await token());
+      } catch (error) {
+        console.error("Unauthorized access");
+      }
     }
 
     if (this.#token) {
       req.headers.set('Authorization', 'Bearer ' + this.#token);
-      return fetch(req);
     }
+
+    return fetch(req);
   }
 }

frontend/components/utilities/secrets/getSecretsForProject.ts

@@ -10,6 +10,14 @@ const {
 const nacl = require('tweetnacl');
 nacl.util = require('tweetnacl-util');
 
+interface SecretProps { 
+  key: string; 
+  value: string; 
+  type: 'personal' | 'shared'; 
+  comment: string; 
+  id: string;
+}
+
 interface Props {
   env: keyof typeof envMapping;
   setFileState: any;
@@ -34,12 +42,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 +72,25 @@ 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({
+          id: secretPair._id,
           key: plainTextKey,
           value: plainTextValue,
-          type: secretPair.type
+          type: secretPair.type,
+          comment: plainTextComment
         });
       });
     }
@@ -76,28 +99,30 @@ const getSecretsForProject = async ({
     setData(
       tempFileState.map((line, index) => {
         return {
-          id: guidGenerator(),
+          id: line['id'],
           pos: index,
           key: line['key'],
           value: line['value'],
-          type: line['type']
+          type: line['type'],
+          comment: line['comment']
         };
       })
     );
 
     return tempFileState.map((line, index) => {
       return {
-        id: guidGenerator(),
+        id: line['id'],
         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/api/secrets/GetSecretVersions.ts

@@ -0,0 +1,40 @@
+import SecurityClient from '~/utilities/SecurityClient';
+
+
+interface secretVersionProps {
+  secretId: string; 
+  offset: number; 
+  limit: number;
+}
+
+/**
+ * This function fetches the versions of a specific secret
+ * @param {object} obj
+ * @param {string} obj.secretId - the id of a secret for which we are fetching the version history
+ * @param {number} obj.offset - the start of our query
+ * @param {number} obj.limit - how far our query goes
+ * @returns
+ */
+const getSecretVersions = async ({ secretId, offset, limit }: secretVersionProps) => {
+  return SecurityClient.fetchCall(
+    '/api/v1/secret/' + secretId + '/secret-versions?'+
+      new URLSearchParams({
+        offset: String(offset),
+        limit: String(limit)
+      }),
+    {
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json'
+      }
+    }
+  ).then(async (res) => {
+    if (res && res.status == 200) {
+      return await res.json();
+    } else {
+      console.log('Failed to get project secrets');
+    }
+  });
+};
+
+export default getSecretVersions;

frontend/ee/components/SecretVersionList.tsx

@@ -0,0 +1,101 @@
+import { useEffect, useState } from 'react';
+import { useRouter } from 'next/router';
+import { faCircle, faDotCircle } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import getSecretVersions from 'ee/api/secrets/GetSecretVersions';
+
+import { decryptAssymmetric, decryptSymmetric } from '~/components/utilities/cryptography/crypto';
+import getLatestFileKey from '~/pages/api/workspace/getLatestFileKey';
+
+interface DecryptedSecretVersionListProps {
+  createdAt: string;
+  value: string;
+}
+
+interface EncrypetedSecretVersionListProps {
+  createdAt: string;
+  secretValueCiphertext: string;
+  secretValueIV: string;
+  secretValueTag: string;
+}
+
+
+/**
+ * @returns a list of versions for a specific secret
+ */
+const SecretVersionList = ({ secretId }: { secretId: string; }) => {
+  const router = useRouter();
+  const [secretVersions, setSecretVersions] = useState<DecryptedSecretVersionListProps[]>([{createdAt: "123", value: "124"}]);
+  
+  useEffect(() => {
+    const getSecretVersionHistory = async () => {
+      try {
+        const encryptedSecretVersions = await getSecretVersions({ secretId, offset: 0, limit: 10});
+        const latestKey = await getLatestFileKey({ workspaceId: String(router.query.id) })
+        
+        const PRIVATE_KEY = localStorage.getItem('PRIVATE_KEY');
+
+        let decryptedLatestKey: string;
+        if (latestKey) {
+          // assymmetrically decrypt symmetric key with local private key
+          decryptedLatestKey = decryptAssymmetric({
+            ciphertext: latestKey.latestKey.encryptedKey,
+            nonce: latestKey.latestKey.nonce,
+            publicKey: latestKey.latestKey.sender.publicKey,
+            privateKey: String(PRIVATE_KEY)
+          });
+        }
+
+        const decryptedSecretVersions = encryptedSecretVersions.secretVersions.map((encryptedSecretVersion: EncrypetedSecretVersionListProps) => { 
+          return {
+            createdAt: encryptedSecretVersion.createdAt,
+            value: decryptSymmetric({
+              ciphertext: encryptedSecretVersion.secretValueCiphertext,
+              iv: encryptedSecretVersion.secretValueIV,
+              tag: encryptedSecretVersion.secretValueTag,
+              key: decryptedLatestKey
+            })
+          }
+        })
+
+        setSecretVersions(decryptedSecretVersions);
+      } catch (error) {
+        console.log(error)
+      }
+    };
+    getSecretVersionHistory();
+  }, []);
+
+  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-auto overflow-x-none'>
+      {secretVersions?.sort((a, b) => b.createdAt.localeCompare(a.createdAt))
+      .map((version: DecryptedSecretVersionListProps, index: number) =>
+        <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'>
+              {(new Date(version.createdAt)).toLocaleDateString('en-US', {
+                year: 'numeric',
+                month: '2-digit',
+                day: '2-digit',
+                hour: '2-digit',
+                minute: '2-digit',
+                second: '2-digit'
+              })}
+            </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/api/auth/CheckAuth.ts

@@ -10,13 +10,7 @@ const checkAuth = async () => {
     headers: {
       'Content-Type': 'application/json'
     }
-  }).then((res) => {
-    if (res && res.status == 200) {
-      return res;
-    } else {
-      console.log('Not authorized');
-    }
-  });
+  }).then((res) => res);
 };
 
 export default checkAuth;

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].tsx

@@ -0,0 +1,658 @@
+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);
+
+    // find which shared secret corresponds to the overriden version
+    const sharedVersionOfOverride = data!.filter(secret => secret.type == "shared" && secret.key == data!.filter(row => row.id == id)[0]?.key)[0]?.id;
+    
+    // change the sidebar to this shared secret; and unhide it
+    toggleSidebar(sharedVersionOfOverride)
+    setSharedToHide(sharedToHide!.filter(tempId => tempId != sharedVersionOfOverride))
+
+    // resort secrets
+    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.key == data.filter(row => row.id == sidebarSecretId)[0]?.key)} 
+          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/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";

frontend/pages/login.tsx

@@ -1,3 +1,4 @@
+<<<<<<< HEAD
 import React, { useEffect, useState } from "react";
 import Head from "next/head";
 import Image from "next/image";
@@ -6,6 +7,15 @@ import { useRouter } from "next/router";
 import { useTranslation } from "next-i18next";
 import { faWarning } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+=======
+import { useEffect, useState } from 'react';
+import Head from 'next/head';
+import Image from 'next/image';
+import Link from 'next/link';
+import { useRouter } from 'next/router';
+import { faWarning } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+>>>>>>> 876c5f51c2caabf92b47d5a18a9b98e601806bf4
 
 import Button from "~/components/basic/buttons/Button";
 import Error from "~/components/basic/Error";

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/password-reset.tsx

@@ -1,8 +1,16 @@
+<<<<<<< HEAD
 import React, { useState } from "react";
 import Image from "next/image";
 import { useRouter } from "next/router";
 import { faCheck, faX } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+=======
+import { useState } from 'react';
+import Image from 'next/image';
+import { useRouter } from 'next/router';
+import { faCheck, faX } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+>>>>>>> 876c5f51c2caabf92b47d5a18a9b98e601806bf4
 
 import Button from "~/components/basic/buttons/Button";
 import InputField from "~/components/basic/InputField";

frontend/pages/requestnewinvite.js

@@ -1,21 +1,31 @@
 import React from "react";
 import Head from "next/head";
+import Image from "next/image";
 
-export default function Activity() {
+export default function RequestNewInvite() {
   return (
-    <div className="bg-bunker-800 md:h-screen flex flex-col justify-between">
+    <div className="bg-bunker-700 md:h-screen flex flex-col justify-between">
       <Head>
         <title>Request a New Invite</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-6xl">Oops.</p>
-        <p className="mt-2 mb-1 text-xl">Your invite has expired. </p>
-        <p className="text-xl">Ask the administrator for a new one.</p>
-        <p className="text-md mt-8 text-gray-600 max-w-sm text-center">
+      <div className="flex flex-col items-center justify-center text-bunker-200 h-screen w-screen mt-24">
+        <p className="text-4xl text-bunker-100">Oops, your invite has expired.</p>
+        <p className="text-lg my-6">Ask the administrator for a new one.</p>
+        <p className="text-md text-bunker-400 max-w-sm text-center">
           Note: If it still {"doesn't work"}, please reach out to us at
           support@infisical.com
         </p>
+        <div
+          className=""
+        >
+          <Image
+            src="/images/invitation-expired.svg"
+            height={500}
+            width={800}
+            alt="google logo"
+          ></Image>
+        </div>
       </div>
     </div>
   );

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 { useTranslation } from "next-i18next";
 

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

@@ -1,7 +1,13 @@
+<<<<<<< HEAD
 import React, { useEffect, useState } from "react";
 import Head from "next/head";
 import { useRouter } from "next/router";
 import { useTranslation } from "next-i18next";
+=======
+import { useEffect, useState } from 'react';
+import Head from 'next/head';
+import { useRouter } from 'next/router';
+>>>>>>> 876c5f51c2caabf92b47d5a18a9b98e601806bf4
 import {
   faMagnifyingGlass,
   faPlus,

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

@@ -1,4 +1,8 @@
+<<<<<<< HEAD
 import React, { useCallback, useEffect, useState } from "react";
+=======
+import { useEffect, useState } from "react";
+>>>>>>> 876c5f51c2caabf92b47d5a18a9b98e601806bf4
 import Head from "next/head";
 import { useRouter } from "next/router";
 import { useTranslation } from "next-i18next";

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 { useTranslation } from "next-i18next";

frontend/pages/signup.tsx

@@ -1,3 +1,4 @@
+<<<<<<< HEAD
 import React, { useEffect, useState } from "react";
 import ReactCodeInput from "react-code-input";
 import Head from "next/head";
@@ -7,6 +8,16 @@ import { useRouter } from "next/router";
 import { useTranslation } from "next-i18next";
 import { faCheck, faWarning, faX } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+=======
+import { useEffect, useState } from 'react';
+import ReactCodeInput from 'react-code-input';
+import Head from 'next/head';
+import Image from 'next/image';
+import Link from 'next/link';
+import { useRouter } from 'next/router';
+import { faCheck, faWarning, faX } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+>>>>>>> 876c5f51c2caabf92b47d5a18a9b98e601806bf4
 
 import Button from "~/components/basic/buttons/Button";
 import Error from "~/components/basic/Error";
@@ -265,6 +276,7 @@ export default function SignUp() {
 
   // Step 1 of the sign up process (enter the email or choose google authentication)
   const step1 = (
+<<<<<<< HEAD
     <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
@@ -277,10 +289,50 @@ export default function SignUp() {
           >
             <u className="font-normal text-md text-sky-500">
               {t("signup:already-have-account")}
+=======
+    <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 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
+>>>>>>> 876c5f51c2caabf92b47d5a18a9b98e601806bf4
             </u>
           </button>
         </Link>
       </div>
+<<<<<<< HEAD
       <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={t("common:email")}
@@ -306,7 +358,10 @@ export default function SignUp() {
           <Button text="Get Started" onButtonPressed={emailCheck} size="lg" />
         </div>
       </div>
+=======
+>>>>>>> 876c5f51c2caabf92b47d5a18a9b98e601806bf4
     </div>
+
   );
 
   // Step 2 of the signup process (enter the email verification code)
@@ -349,6 +404,7 @@ export default function SignUp() {
         />
       </div>
       <div className="flex flex-col items-center justify-center w-full max-h-24 max-w-md mx-auto pt-2">
+<<<<<<< HEAD
         <div className="flex flex-row items-baseline gap-1">
           <span className="text-gray-400">Not seeing an email?</span>
           <u
@@ -358,6 +414,13 @@ export default function SignUp() {
                 : "text-sky-500 hover:opacity-90 duration-200"
             }`}
           >
+=======
+        <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'}`}>
+>>>>>>> 876c5f51c2caabf92b47d5a18a9b98e601806bf4
             <button disabled={isLoading} onClick={resendVerificationEmail}>
               {isResendingVerificationEmail ? "Resending..." : "Resend"}
             </button>
@@ -527,13 +590,18 @@ export default function SignUp() {
         <FontAwesomeIcon icon={faWarning} className="ml-2 mr-4 text-4xl" />
         {t("signup:step4-description3")}
       </div>
+<<<<<<< HEAD
       <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">
+>>>>>>> 876c5f51c2caabf92b47d5a18a9b98e601806bf4
         <Button
           text="Download PDF"
           onButtonPressed={async () => {
             await issueBackupKey({
               email,
               password,
+<<<<<<< HEAD
               personalName: firstName + " " + lastName,
               setBackupKeyError,
               setBackupKeyIssued,
@@ -541,6 +609,13 @@ export default function SignUp() {
             const userWorkspaces = await getWorkspaces();
             const userWorkspace = userWorkspaces[0]._id;
             router.push("/home/" + userWorkspace);
+=======
+              personalName: firstName + ' ' + lastName,
+              setBackupKeyError,
+              setBackupKeyIssued
+            });
+            router.push('/dashboard/');
+>>>>>>> 876c5f51c2caabf92b47d5a18a9b98e601806bf4
           }}
           size="lg"
         />

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';
@@ -159,8 +159,17 @@ export default function SignupInvite() {
               code: token
             });
             if (response.status == 200) {
-              setVerificationToken((await response.json()).token);
-              setStep(2);
+              const res = await response.json();
+              // user will have temp token if doesn't have an account
+              // then continue with account setup workflow
+              if(res?.token){
+                setVerificationToken(res.token);
+                setStep(2);
+              } else {
+                // user will be redirected to dashboard
+                // if not logged in gets kicked out to login 
+                router.push("/dashboard")
+              }
             } else {
               console.log('ERROR', response);
               router.push('/requestnewinvite');

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,7 +1,14 @@
+<<<<<<< HEAD
 import React, { useState } from "react";
 import Head from "next/head";
 import Image from "next/image";
 import Link from "next/link";
+=======
+import { useState } from 'react';
+import Head from 'next/head';
+import Image from 'next/image';
+import Link from 'next/link';
+>>>>>>> 876c5f51c2caabf92b47d5a18a9b98e601806bf4
 
 import Button from "~/components/basic/buttons/Button";
 import InputField from "~/components/basic/InputField";