Merge branch 'main' into language-support-ptbr

frontend/components/analytics/posthog.ts

@@ -9,7 +9,6 @@ export const initPostHog = () => {
     if (typeof window !== 'undefined') {
       // @ts-ignore
       if (ENV == 'production' && TELEMETRY_CAPTURING_ENABLED) {
-        console.log("Outside of posthog", "POSTHOG_API_KEY", POSTHOG_API_KEY, "POSTHOG_HOST", POSTHOG_HOST)
         posthog.init(POSTHOG_API_KEY, {
           api_host: POSTHOG_HOST
         });

frontend/components/basic/Error.tsx

@@ -4,13 +4,13 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 export default function Error({ text }: { text: string }): JSX.Element {
   return (
-    <div className="relative bg-red-500 opacity-100 border flex flex-row justify-center m-auto items-center w-fit rounded-full mb-4">
+    <div className="relative flex flex-row justify-center m-auto items-center w-fit rounded-full">
       <FontAwesomeIcon
         icon={faExclamationTriangle}
-        className="text-white mt-1.5 mb-2 mx-2"
+        className="text-red mt-1.5 mb-2 mx-2"
       />
       {text && (
-        <p className="relative top-0 text-white mr-2 text-sm py-1">{text}</p>
+        <p className="relative top-0 text-red mr-2 text-sm py-1">{text}</p>
       )}
     </div>
   );

frontend/components/basic/EventFilter.tsx

@@ -55,7 +55,7 @@ export default function EventFilter({
           {selected != '' ? (
             <p className="select-none text-bunker-100">{t("activity:event." + selected)}</p>
           ) : (
-            <p className="select-none">Select an event</p>
+            <p className="select-none">{String(t("common:select-event"))}</p>
           )}
           {selected != '' ? (
             <FontAwesomeIcon

frontend/components/basic/Layout.tsx

@@ -11,7 +11,6 @@ import {
   faKey,
   faMobile,
   faPlug,
-  faTimeline,
   faUser,
 } from "@fortawesome/free-solid-svg-icons";
 import { faPlus } from "@fortawesome/free-solid-svg-icons";
@@ -20,7 +19,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import getOrganizations from "~/pages/api/organization/getOrgs";
 import getOrganizationUserProjects from "~/pages/api/organization/GetOrgUserProjects";
 import getOrganizationUsers from "~/pages/api/organization/GetOrgUsers";
-import checkUserAction from "~/pages/api/userActions/checkUserAction";
+import getUser from "~/pages/api/user/getUser";
 import addUserToWorkspace from "~/pages/api/workspace/addUserToWorkspace";
 import createWorkspace from "~/pages/api/workspace/createWorkspace";
 import getWorkspaces from "~/pages/api/workspace/getWorkspaces";
@@ -40,6 +39,7 @@ import Listbox from "./Listbox";
 interface LayoutProps {
   children: React.ReactNode;
 }
+const crypto = require("crypto");
 
 export default function Layout({ children }: LayoutProps) {
   const router = useRouter();
@@ -84,12 +84,31 @@ export default function Layout({ children }: LayoutProps) {
         });
         const newWorkspaceId = newWorkspace._id;
 
+        const randomBytes = crypto.randomBytes(16).toString("hex");
+        const PRIVATE_KEY = String(localStorage.getItem("PRIVATE_KEY"));
+
+        const myUser = await getUser();
+
+        const { ciphertext, nonce } = encryptAssymmetric({
+          plaintext: randomBytes,
+          publicKey: myUser.publicKey,
+          privateKey: PRIVATE_KEY,
+        }) as { ciphertext: string; nonce: string };
+
+        await uploadKeys(
+          newWorkspaceId,
+          myUser._id,
+          ciphertext,
+          nonce
+        );
+
         if (addAllUsers) {
+          console.log('adding other users')
           const orgUsers = await getOrganizationUsers({
             orgId: tempLocalStorage("orgData.id"),
           });
           orgUsers.map(async (user: any) => {
-            if (user.status == "accepted") {
+            if (user.status == "accepted" && user.email != myUser.email) {
               const result = await addUserToWorkspace(
                 user.user.email,
                 newWorkspaceId
@@ -184,6 +203,7 @@ export default function Layout({ children }: LayoutProps) {
       if (
         userWorkspaces.length == 0 &&
         router.asPath != "/noprojects" &&
+        !router.asPath.includes("home")&&
         !router.asPath.includes("settings")
       ) {
         router.push("/noprojects");
@@ -191,9 +211,16 @@ export default function Layout({ children }: LayoutProps) {
         const intendedWorkspaceId = router.asPath
           .split("/")
           [router.asPath.split("/").length - 1].split("?")[0];
+        
+        if (
+          !["heroku", "vercel", "github", "netlify"].includes(intendedWorkspaceId)
+        ) {
+          localStorage.setItem("projectData.id", intendedWorkspaceId);
+        }
+        
         // If a user is not a member of a workspace they are trying to access, just push them to one of theirs
         if (
-          intendedWorkspaceId != "heroku" &&
+          !["heroku", "vercel", "github", "netlify"].includes(intendedWorkspaceId) &&
           !userWorkspaces
             .map((workspace: { _id: string }) => workspace._id)
             .includes(intendedWorkspaceId)
@@ -239,14 +266,14 @@ export default function Layout({ children }: LayoutProps) {
             .split("/")
             [router.asPath.split("/").length - 1].split("?")[0]
       ) {
-        router.push(
-          "/dashboard/" +
-            workspaceMapping[workspaceSelected as any]
-        );
         localStorage.setItem(
           "projectData.id",
           `${workspaceMapping[workspaceSelected as any]}`
         );
+        router.push(
+          "/dashboard/" +
+            workspaceMapping[workspaceSelected as any]
+        );
       }
     } catch (error) {
       console.log(error);

frontend/components/basic/Listbox.tsx

@@ -46,7 +46,7 @@ export default function ListBox({
         >
           <div className="flex flex-row">
             {text}
-            <span className="ml-1 cursor-pointer block truncate font-semibold text-gray-300">
+            <span className="ml-1 cursor-pointer block truncate font-semibold text-gray-300 capitalize">
               {' '}
               {selected}
             </span>
@@ -69,7 +69,7 @@ export default function ListBox({
                 <Listbox.Option
                   key={personIdx}
                   className={({ active, selected }) =>
-                    `my-0.5 relative cursor-default select-none py-2 pl-10 pr-4 rounded-md ${
+                    `my-0.5 relative cursor-default select-none py-2 pl-10 pr-4 rounded-md capitalize ${
                       selected ? 'bg-white/10 text-gray-400 font-bold' : ''
                     } ${
                       active && !selected

frontend/components/basic/Toggle.tsx

@@ -1,27 +1,11 @@
 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;
+  addOverride: (value: string | undefined, pos: number) => void; 
   pos: number;
-  id: string;
-  comment: string;
-  deleteOverride: (id: string) => void; 
-  sharedToHide: string[];
-  setSharedToHide: (values: string[]) => void;
 }
 
 /**
@@ -30,41 +14,23 @@ interface ToggleProps {
  * @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
+  pos
 }: ToggleProps): JSX.Element {
   return (
     <Switch
       checked={enabled}
       onChange={() => {
         if (enabled == false) {
-          addOverride({ id, keyName, value, pos, comment });
-          setSharedToHide([
-            ...sharedToHide!,
-            id
-          ])
+          addOverride('', pos);
         } else {
-          deleteOverride(id);
+          addOverride(undefined, pos);
         }
         setEnabled(!enabled);
       }}

frontend/components/basic/buttons/Button.tsx

@@ -3,7 +3,6 @@ import Image from "next/image";
 import { IconProp } from "@fortawesome/fontawesome-svg-core";
 import {
   FontAwesomeIcon,
-  FontAwesomeIconProps,
 } from "@fortawesome/react-fontawesome";
 
 const classNames = require("classnames");
@@ -101,7 +100,7 @@ export default function Button(props: ButtonProps): JSX.Element {
         <div
           className={`${
             props.loading == true ? "opacity-100" : "opacity-0"
-          } absolute flex items-center px-2 duration-200`}
+          } absolute flex items-center px-3 bg-primary duration-200 w-full`}
         >
           <Image
             src="/images/loading/loadingblack.gif"

frontend/components/basic/dialog/AddProjectMemberDialog.js

@@ -109,7 +109,7 @@ const AddProjectMemberDialog = ({
                         selected={email ? email : data[0]}
                         onChange={setEmail}
                         data={data}
-                        width="full"
+                        isFull={true}
                       />
                     )}
                   </div>

frontend/components/basic/dialog/AddServiceTokenDialog.js

@@ -8,7 +8,6 @@ import nacl from "tweetnacl";
 import addServiceToken from "~/pages/api/serviceToken/addServiceToken";
 import getLatestFileKey from "~/pages/api/workspace/getLatestFileKey";
 
-import { envMapping } from "../../../public/data/frequentConstants";
 import {
   decryptAssymmetric,
   encryptAssymmetric,
@@ -34,11 +33,12 @@ const AddServiceTokenDialog = ({
   workspaceId,
   workspaceName,
   serviceTokens,
+  environments,
   setServiceTokens
 }) => {
   const [serviceToken, setServiceToken] = useState("");
   const [serviceTokenName, setServiceTokenName] = useState("");
-  const [serviceTokenEnv, setServiceTokenEnv] = useState("Development");
+  const [selectedServiceTokenEnv, setSelectedServiceTokenEnv] = useState(environments?.[0]);
   const [serviceTokenExpiresIn, setServiceTokenExpiresIn] = useState("1 day");
   const [serviceTokenCopied, setServiceTokenCopied] = useState(false);
   const { t } = useTranslation();
@@ -66,15 +66,13 @@ const AddServiceTokenDialog = ({
     let newServiceToken = await addServiceToken({
       name: serviceTokenName,
       workspaceId,
-      environment: envMapping[serviceTokenEnv],
+      environment: selectedServiceTokenEnv?.slug ? selectedServiceTokenEnv.slug : environments[0]?.name,
       expiresIn: expiryMapping[serviceTokenExpiresIn],
       encryptedKey: ciphertext,
       iv, 
       tag
     });
     
-    console.log('newServiceToken', newServiceToken);
-
     setServiceTokens(serviceTokens.concat([newServiceToken.serviceTokenData]));
     setServiceToken(newServiceToken.serviceToken + "." + randomBytes);
   };
@@ -103,155 +101,159 @@ const AddServiceTokenDialog = ({
   };
 
   return (
-    <div className="z-50">
+    <div className='z-50'>
       <Transition appear show={isOpen} as={Fragment}>
-        <Dialog as="div" className="relative" onClose={closeModal}>
+        <Dialog as='div' className='relative' onClose={closeModal}>
           <Transition.Child
             as={Fragment}
-            enter="ease-out duration-300"
-            enterFrom="opacity-0"
-            enterTo="opacity-100"
-            leave="ease-in duration-200"
-            leaveFrom="opacity-100"
-            leaveTo="opacity-0"
+            enter='ease-out duration-300'
+            enterFrom='opacity-0'
+            enterTo='opacity-100'
+            leave='ease-in duration-200'
+            leaveFrom='opacity-100'
+            leaveTo='opacity-0'
           >
-            <div className="fixed inset-0 bg-bunker-700 bg-opacity-80" />
+            <div className='fixed inset-0 bg-bunker-700 bg-opacity-80' />
           </Transition.Child>
 
-          <div className="fixed inset-0 overflow-y-auto">
-            <div className="flex min-h-full items-center justify-center p-4 text-center">
+          <div className='fixed inset-0 overflow-y-auto'>
+            <div className='flex min-h-full items-center justify-center p-4 text-center'>
               <Transition.Child
                 as={Fragment}
-                enter="ease-out duration-300"
-                enterFrom="opacity-0 scale-95"
-                enterTo="opacity-100 scale-100"
-                leave="ease-in duration-200"
-                leaveFrom="opacity-100 scale-100"
-                leaveTo="opacity-0 scale-95"
+                enter='ease-out duration-300'
+                enterFrom='opacity-0 scale-95'
+                enterTo='opacity-100 scale-100'
+                leave='ease-in duration-200'
+                leaveFrom='opacity-100 scale-100'
+                leaveTo='opacity-0 scale-95'
               >
-                {serviceToken == "" ? (
-                  <Dialog.Panel className="w-full max-w-md transform rounded-md bg-bunker-800 border border-gray-700 p-6 text-left align-middle shadow-xl transition-all">
+                {serviceToken == '' ? (
+                  <Dialog.Panel className='w-full max-w-md transform rounded-md bg-bunker-800 border border-gray-700 p-6 text-left align-middle shadow-xl transition-all'>
                     <Dialog.Title
-                      as="h3"
-                      className="text-lg font-medium leading-6 text-gray-400 z-50"
+                      as='h3'
+                      className='text-lg font-medium leading-6 text-gray-400 z-50'
                     >
-                      {t("section-token:add-dialog.title", {
+                      {t('section-token:add-dialog.title', {
                         target: workspaceName,
                       })}
                     </Dialog.Title>
-                    <div className="mt-2 mb-4">
-                      <div className="flex flex-col">
-                        <p className="text-sm text-gray-500">
-                          {t("section-token:add-dialog.description")}
+                    <div className='mt-2 mb-4'>
+                      <div className='flex flex-col'>
+                        <p className='text-sm text-gray-500'>
+                          {t('section-token:add-dialog.description')}
                         </p>
                       </div>
                     </div>
-                    <div className="max-h-28 mb-2">
+                    <div className='max-h-28 mb-2'>
                       <InputField
-                        label={t("section-token:add-dialog.name")}
+                        label={t('section-token:add-dialog.name')}
                         onChangeHandler={setServiceTokenName}
-                        type="varName"
+                        type='varName'
                         value={serviceTokenName}
-                        placeholder=""
+                        placeholder=''
                         isRequired
                       />
                     </div>
-                    <div className="max-h-28 mb-2">
+                    <div className='max-h-28 mb-2'>
                       <ListBox
-                        selected={serviceTokenEnv}
-                        onChange={setServiceTokenEnv}
-                        data={[
-                          "Development",
-                          "Staging",
-                          "Production",
-                          "Testing",
-                        ]}
+                        selected={selectedServiceTokenEnv?.name ? selectedServiceTokenEnv?.name : environments[0]?.name}
+                        data={environments.map(({ name }) => name)}
+                        onChange={(envName) =>
+                          setSelectedServiceTokenEnv(
+                            environments.find(
+                              ({ name }) => envName === name
+                            ) || {
+                              name: 'unknown',
+                              slug: 'unknown',
+                            }
+                          )
+                        }
                         isFull={true}
-                        text={`${t("common:environment")}: `}
+                        text={`${t('common:environment')}: `}
                       />
                     </div>
-                    <div className="max-h-28">
+                    <div className='max-h-28'>
                       <ListBox
                         selected={serviceTokenExpiresIn}
                         onChange={setServiceTokenExpiresIn}
                         data={[
-                          "1 day",
-                          "7 days",
-                          "1 month",
-                          "6 months",
-                          "12 months",
+                          '1 day',
+                          '7 days',
+                          '1 month',
+                          '6 months',
+                          '12 months',
                         ]}
                         isFull={true}
-                        text={`${t("common:expired-in")}: `}
+                        text={`${t('common:expired-in')}: `}
                       />
                     </div>
-                    <div className="max-w-max">
-                      <div className="mt-6 flex flex-col justify-start w-max">
+                    <div className='max-w-max'>
+                      <div className='mt-6 flex flex-col justify-start w-max'>
                         <Button
                           onButtonPressed={() => generateServiceToken()}
-                          color="mineshaft"
-                          text={t("section-token:add-dialog.add")}
-                          textDisabled={t("section-token:add-dialog.add")}
-                          size="md"
-                          active={serviceTokenName == "" ? false : true}
+                          color='mineshaft'
+                          text={t('section-token:add-dialog.add')}
+                          textDisabled={t('section-token:add-dialog.add')}
+                          size='md'
+                          active={serviceTokenName == '' ? false : true}
                         />
                       </div>
                     </div>
                   </Dialog.Panel>
                 ) : (
-                  <Dialog.Panel className="w-full max-w-md transform rounded-md bg-bunker-800 border border-gray-700 p-6 text-left align-middle shadow-xl transition-all">
+                  <Dialog.Panel className='w-full max-w-md transform rounded-md bg-bunker-800 border border-gray-700 p-6 text-left align-middle shadow-xl transition-all'>
                     <Dialog.Title
-                      as="h3"
-                      className="text-lg font-medium leading-6 text-gray-400 z-50"
+                      as='h3'
+                      className='text-lg font-medium leading-6 text-gray-400 z-50'
                     >
-                      {t("section-token:add-dialog.copy-service-token")}
+                      {t('section-token:add-dialog.copy-service-token')}
                     </Dialog.Title>
-                    <div className="mt-2 mb-4">
-                      <div className="flex flex-col">
-                        <p className="text-sm text-gray-500">
+                    <div className='mt-2 mb-4'>
+                      <div className='flex flex-col'>
+                        <p className='text-sm text-gray-500'>
                           {t(
-                            "section-token:add-dialog.copy-service-token-description"
+                            'section-token:add-dialog.copy-service-token-description'
                           )}
                         </p>
                       </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-20">
+                    <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-20'>
                         <input
-                          type="text"
+                          type='text'
                           value={serviceToken}
-                          id="serviceToken"
-                          className="invisible bg-white/0 text-gray-400 py-2 w-full px-2 min-w-full outline-none"
+                          id='serviceToken'
+                          className='invisible bg-white/0 text-gray-400 py-2 w-full px-2 min-w-full outline-none'
                         ></input>
-                        <div className="bg-white/0 max-w-md text-sm text-gray-400 py-2 w-full pl-14 pr-2 break-words outline-none">
+                        <div className='bg-white/0 max-w-md text-sm text-gray-400 py-2 w-full pl-14 pr-2 break-words outline-none'>
                           {serviceToken}
                         </div>
-                        <div className="group font-normal h-full relative inline-block text-gray-400 underline hover:text-primary duration-200">
+                        <div className='group font-normal h-full relative inline-block text-gray-400 underline hover:text-primary duration-200'>
                           <button
                             onClick={copyToClipboard}
-                            className="h-full pl-3.5 pr-4 border-l border-white/20 py-2 hover:bg-white/[0.12] duration-200"
+                            className='h-full pl-3.5 pr-4 border-l border-white/20 py-2 hover:bg-white/[0.12] duration-200'
                           >
                             {serviceTokenCopied ? (
                               <FontAwesomeIcon
                                 icon={faCheck}
-                                className="pr-0.5"
+                                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 px-3 py-2 bg-chicago-900 rounded-md text-center text-gray-400 text-sm">
-                            {t("common:click-to-copy")}
+                          <span className='absolute hidden group-hover:flex group-hover:animate-popup duration-300 w-28 -left-8 -top-20 translate-y-full px-3 py-2 bg-chicago-900 rounded-md text-center text-gray-400 text-sm'>
+                            {t('common:click-to-copy')}
                           </span>
                         </div>
                       </div>
                     </div>
-                    <div className="mt-6 flex flex-col justify-start w-max">
+                    <div className='mt-6 flex flex-col justify-start w-max'>
                       <Button
                         onButtonPressed={() => closeAddServiceTokenModal()}
-                        color="mineshaft"
-                        text="Close"
-                        size="md"
+                        color='mineshaft'
+                        text='Close'
+                        size='md'
                       />
                     </div>
                   </Dialog.Panel>

frontend/components/basic/dialog/AddUpdateEnvironmentDialog.tsx

@@ -0,0 +1,145 @@
+import { FormEventHandler, Fragment, useEffect, useState } from 'react';
+import { Dialog, Transition } from '@headlessui/react';
+
+import Button from '../buttons/Button';
+import InputField from '../InputField';
+
+type FormFields = { name: string; slug: string };
+
+type Props = {
+  isOpen?: boolean;
+  isEditMode?: boolean;
+  // on edit mode load up initial values
+  initialValues?: FormFields;
+  onClose: () => void;
+  onCreateSubmit: (data: FormFields) => void;
+  onEditSubmit: (data: FormFields) => void;
+};
+
+// TODO: Migrate to better form management and validation. Preferable react-hook-form + yup
+/**
+ * The dialog modal for when the user wants to create a new workspace
+ * @param {*} param0
+ * @returns
+ */
+export const AddUpdateEnvironmentDialog = ({
+  isOpen,
+  onClose,
+  onCreateSubmit,
+  onEditSubmit,
+  initialValues,
+  isEditMode,
+}: Props) => {
+  const [formInput, setFormInput] = useState<FormFields>({
+    name: '',
+    slug: '',
+  });
+
+  // This use effect can be removed when the unmount is happening from outside the component
+  // When unmount happens outside state gets unmounted also
+  useEffect(() => {
+    setFormInput(initialValues || { name: '', slug: '' });
+  }, [isOpen]);
+
+  // REFACTOR: Move to react-hook-form with yup for better form management
+  const onInputChange = (fieldName: string, fieldValue: string) => {
+    setFormInput((state) => ({ ...state, [fieldName]: fieldValue }));
+  };
+
+  const onFormSubmit: FormEventHandler = (e) => {
+    e.preventDefault();
+    const data = {
+      name: formInput.name.toLowerCase(),
+      slug: formInput.slug.toLowerCase(),
+    };
+    if (isEditMode) {
+      onEditSubmit(data);
+      return;
+    }
+    onCreateSubmit(data);
+  };
+
+  return (
+    <div>
+      <Transition appear show={isOpen} as={Fragment}>
+        <Dialog as='div' className='relative z-20' onClose={onClose}>
+          <Transition.Child
+            as={Fragment}
+            enter='ease-out duration-300'
+            enterFrom='opacity-0'
+            enterTo='opacity-100'
+            leave='ease-out duration-150'
+            leaveFrom='opacity-100'
+            leaveTo='opacity-0'
+          >
+            <div className='fixed inset-0 bg-black bg-opacity-70' />
+          </Transition.Child>
+
+          <div className='fixed inset-0 overflow-y-auto z-50'>
+            <div className='flex min-h-full items-center justify-center p-4 text-center'>
+              <Transition.Child
+                as={Fragment}
+                enter='ease-out duration-300'
+                enterFrom='opacity-0 scale-95'
+                enterTo='opacity-100 scale-100'
+                leave='ease-in duration-200'
+                leaveFrom='opacity-100 scale-100'
+                leaveTo='opacity-0 scale-95'
+              >
+                <Dialog.Panel className='w-full max-w-md transform overflow-hidden rounded-2xl bg-bunker-800 border border-gray-700 p-6 text-left align-middle shadow-xl transition-all'>
+                  <Dialog.Title
+                    as='h3'
+                    className='text-lg font-medium leading-6 text-gray-400'
+                  >
+                    {isEditMode
+                      ? 'Update environment'
+                      : 'Create a new environment'}
+                  </Dialog.Title>
+                  <form onSubmit={onFormSubmit}>
+                    <div className='max-h-28 mt-4'>
+                      <InputField
+                        label='Environment Name'
+                        onChangeHandler={(val) => onInputChange('name', val)}
+                        type='varName'
+                        value={formInput.name}
+                        placeholder=''
+                        isRequired
+                        // error={error.length > 0}
+                        // errorText={error}
+                      />
+                    </div>
+                    <div className='max-h-28 mt-4'>
+                      <InputField
+                        label='Environment Slug'
+                        onChangeHandler={(val) => onInputChange('slug', val)}
+                        type='varName'
+                        value={formInput.slug}
+                        placeholder=''
+                        isRequired
+                        // error={error.length > 0}
+                        // errorText={error}
+                      />
+                    </div>
+                    <p className='text-xs text-gray-500 mt-2'>
+                      Slugs are shorthands used in cli to access environment
+                    </p>
+                    <div className='mt-4 max-w-min'>
+                      <Button
+                        onButtonPressed={() => null}
+                        type='submit'
+                        color='mineshaft'
+                        text={isEditMode ? 'Update' : 'Create'}
+                        active={formInput.name !== '' && formInput.slug !== ''}
+                        size='md'
+                      />
+                    </div>
+                  </form>
+                </Dialog.Panel>
+              </Transition.Child>
+            </div>
+          </div>
+        </Dialog>
+      </Transition>
+    </div>
+  );
+};

frontend/components/basic/dialog/DeleteActionModal.tsx

@@ -0,0 +1,104 @@
+import { Fragment, useEffect, useState } from 'react';
+import { Dialog, Transition } from '@headlessui/react';
+
+import InputField from '../InputField';
+
+// REFACTOR: Move all these modals into one reusable one 
+type Props = {
+  isOpen?: boolean;
+  onClose: ()=>void;
+  title: string;
+  onSubmit:()=>void;
+  deleteKey?:string;
+}
+
+const DeleteActionModal = ({
+  isOpen,
+  onClose,
+  title,
+  onSubmit,
+  deleteKey
+}:Props) => {
+  const [deleteInputField, setDeleteInputField] = useState("")
+
+    useEffect(() => {
+      setDeleteInputField("");
+    }, [isOpen]);
+
+  return (
+    <div>
+      <Transition appear show={isOpen} as={Fragment}>
+        <Dialog as='div' className='relative z-10' onClose={onClose}>
+          <Transition.Child
+            as={Fragment}
+            enter='ease-out duration-300'
+            enterFrom='opacity-0'
+            enterTo='opacity-100'
+            leave='ease-in duration-150'
+            leaveFrom='opacity-100'
+            leaveTo='opacity-0'
+          >
+            <div className='fixed inset-0 bg-black bg-opacity-25' />
+          </Transition.Child>
+          <div className='fixed inset-0 overflow-y-auto'>
+            <div className='flex min-h-full items-center justify-center p-4 text-center'>
+              <Transition.Child
+                as={Fragment}
+                enter='ease-out duration-300'
+                enterFrom='opacity-0 scale-95'
+                enterTo='opacity-100 scale-100'
+                leave='ease-in duration-200'
+                leaveFrom='opacity-100 scale-100'
+                leaveTo='opacity-0 scale-95'
+              >
+                <Dialog.Panel className='w-full max-w-md transform overflow-hidden rounded-2xl bg-grey border border-gray-700 p-6 text-left align-middle shadow-xl transition-all'>
+                  <Dialog.Title
+                    as='h3'
+                    className='text-lg font-medium leading-6 text-gray-400'
+                  >
+                    {title}
+                  </Dialog.Title>
+                  <div className='mt-2'>
+                    <p className='text-sm text-gray-500'>
+                      This action is irrevertible.
+                    </p>
+                  </div>
+                  <div className='mt-2'>
+                    <InputField
+                      isRequired
+                      label={`Type ${deleteKey} to delete the resource`}
+                      onChangeHandler={(val) => setDeleteInputField(val)}
+                      value={deleteInputField}
+                      type='text'
+                    />
+                  </div>
+                  <div className='mt-6'>
+                    <button
+                      type='button'
+                      className='inline-flex justify-center rounded-md border border-transparent bg-gray-800 px-4 py-2 text-sm font-medium text-gray-400 hover:bg-alizarin hover:text-white hover:text-semibold duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2'
+                      onClick={onSubmit}
+                      disabled={
+                        Boolean(deleteKey) && deleteInputField !== deleteKey
+                      }
+                    >
+                      Delete
+                    </button>
+                    <button
+                      type='button'
+                      className='ml-2 inline-flex justify-center rounded-md border border-transparent bg-gray-800 px-4 py-2 text-sm font-medium text-gray-400 hover:border-white hover:text-white hover:text-semibold duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2'
+                      onClick={onClose}
+                    >
+                      Cancel
+                    </button>
+                  </div>
+                </Dialog.Panel>
+              </Transition.Child>
+            </div>
+          </div>
+        </Dialog>
+      </Transition>
+    </div>
+  );
+};
+
+export default DeleteActionModal;

frontend/components/basic/dialog/DeleteEnvVar.tsx

@@ -0,0 +1,77 @@
+import { Fragment } from "react";
+import { useTranslation } from "react-i18next";
+import { Dialog, Transition } from "@headlessui/react";
+
+// #TODO: USE THIS. Currently it's not. Kinda complicated to set up because of state.
+
+type Props = {
+  isOpen: boolean
+  onClose: () => void
+  onSubmit: () => void 
+}
+
+export const DeleteEnvVar = ({ isOpen, onClose, onSubmit }: Props) => {
+  const { t } = useTranslation()
+  return (
+    <div>
+      <Transition appear show={isOpen} as={Fragment}>
+        <Dialog as="div" className="relative z-10" onClose={() => {}}>
+          <div className="fixed inset-0 overflow-y-auto">
+            <Transition.Child
+              as={Fragment}
+              enter="ease-out duration-300"
+              enterFrom="opacity-0"
+              enterTo="opacity-100"
+              leave="ease-in duration-200"
+              leaveFrom="opacity-100"
+              leaveTo="opacity-0"
+            >
+              <div className="fixed inset-0 bg-black bg-opacity-70" onClick={onClose} />
+            </Transition.Child>
+            <div className="flex min-h-full items-center justify-center p-4 text-center">
+              <Transition.Child
+                as={Fragment}
+                enter="ease-out duration-300"
+                enterFrom="opacity-0 scale-95"
+                enterTo="opacity-100 scale-100"
+                leave="ease-in duration-200"
+                leaveFrom="opacity-100 scale-100"
+                leaveTo="opacity-0 scale-95"
+              >
+                <Dialog.Panel className="w-full max-w-md transform overflow-hidden rounded-md bg-grey border border-gray-700 p-6 text-left align-middle shadow-xl transition-all">
+                  <Dialog.Title
+                    as="h3"
+                    className="text-lg font-medium leading-6 text-gray-400"
+                  >
+                    {t('dashboard:sidebar.delete-key-dialog.title')}
+                  </Dialog.Title>
+                  <div className="mt-2">
+                    <p className="text-sm text-gray-500">
+                      {t('dashboard:sidebar.delete-key-dialog.confirm-delete-message')}
+                    </p>
+                  </div>
+                  <div className="mt-6 flex justify-start">
+                    <button
+                      type="button"
+                      className="inline-flex justify-center rounded-md border border-transparent bg-red-700 hover:bg-red-600 px-4 py-2 text-sm font-medium text-bunker-200 hover:text-white text-semibold duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2"
+                      onClick={onSubmit}
+                    >
+                      Delete
+                    </button>
+                    <button
+                      type="button"
+                      className="ml-2 inline-flex justify-center rounded-md border border-transparent bg-bunker-500 px-4 py-2 text-sm font-medium text-gray-400 hover:bg-mineshaft-500 hover:text-white hover:text-semibold duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2"
+                      onClick={onClose}
+                    >
+                      Cancel
+                    </button>
+                  </div>
+                </Dialog.Panel>
+              </Transition.Child>
+            </div>
+          </div>
+        </Dialog>
+      </Transition>
+    </div>
+  );
+};

frontend/components/basic/popups/BottomRightPopup.tsx

@@ -36,7 +36,7 @@ export default function BottonRightPopup({
 }: PopupProps): JSX.Element {
   return (
     <div
-      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"
+      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-md 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">

frontend/components/basic/table/EnvironmentsTable.tsx

@@ -0,0 +1,167 @@
+import { faPencil, faPlus, faX } from '@fortawesome/free-solid-svg-icons';
+
+import { usePopUp } from '../../../hooks/usePopUp';
+import Button from '../buttons/Button';
+import { AddUpdateEnvironmentDialog } from '../dialog/AddUpdateEnvironmentDialog';
+import DeleteActionModal from '../dialog/DeleteActionModal';
+
+type Env = { name: string; slug: string };
+
+type Props = {
+  data: Env[];
+  onCreateEnv: (arg0: Env) => Promise<void>;
+  onUpdateEnv: (oldSlug: string, arg0: Env) => Promise<void>;
+  onDeleteEnv: (slug: string) => Promise<void>;
+};
+
+const EnvironmentTable = ({
+  data = [],
+  onCreateEnv,
+  onDeleteEnv,
+  onUpdateEnv,
+}: Props) => {
+  const { popUp, handlePopUpOpen, handlePopUpClose } = usePopUp([
+    'createUpdateEnv',
+    'deleteEnv',
+  ] as const);
+
+  const onEnvCreateCB = async (env: Env) => {
+    try {
+      await onCreateEnv(env);
+      handlePopUpClose('createUpdateEnv');
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  const onEnvUpdateCB = async (env: Env) => {
+    try {
+      await onUpdateEnv(
+        (popUp.createUpdateEnv?.data as Pick<Env, 'slug'>)?.slug,
+        env
+      );
+      handlePopUpClose('createUpdateEnv');
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  const onEnvDeleteCB = async () => {
+    try {
+      await onDeleteEnv(
+        (popUp.deleteEnv?.data as Pick<Env, 'slug'>)?.slug
+      );
+      handlePopUpClose('deleteEnv');
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  return (
+    <>
+      <div className='flex flex-row justify-between w-full'>
+        <div className='flex flex-col w-full'>
+          <p className='text-xl font-semibold mb-3'>Project Environments</p>
+          <p className='text-base text-gray-400 mb-4'>
+            Choose which environments will show up in your dashboard like
+            development, staging, production
+          </p>
+          <p className='text-sm mr-1 text-gray-500 self-start'>
+            Note: the text in slugs shows how these environmant should be
+            accessed in CLI.
+          </p>
+        </div>
+        <div className='w-48'>
+          <Button
+            text='Add New Env'
+            onButtonPressed={() => handlePopUpOpen('createUpdateEnv')}
+            color='mineshaft'
+            icon={faPlus}
+            size='md'
+          />
+        </div>
+      </div>
+      <div className='table-container w-full bg-bunker rounded-md mb-6 border border-mineshaft-700 relative mt-1'>
+        <div className='absolute rounded-t-md w-full h-12 bg-white/5'></div>
+        <table className='w-full my-1'>
+          <thead className='text-bunker-300'>
+            <tr>
+              <th className='text-left pl-6 pt-2.5 pb-2'>Name</th>
+              <th className='text-left pl-6 pt-2.5 pb-2'>Slug</th>
+              <th></th>
+            </tr>
+          </thead>
+          <tbody>
+            {data?.length > 0 ? (
+              data.map(({ name, slug }) => {
+                return (
+                  <tr
+                    key={name}
+                    className='bg-bunker-800 hover:bg-bunker-800/5 duration-100'
+                  >
+                    <td className='pl-6 py-2 border-mineshaft-700 border-t text-gray-300 capitalize'>
+                      {name}
+                    </td>
+                    <td className='pl-6 py-2 border-mineshaft-700 border-t text-gray-300'>
+                      {slug}
+                    </td>
+                    <td className='py-2 border-mineshaft-700 border-t flex'>
+                      <div className='opacity-50 hover:opacity-100 duration-200 flex items-center mr-8'>
+                        <Button
+                          onButtonPressed={() =>
+                            handlePopUpOpen('createUpdateEnv', { name, slug })
+                          }
+                          color='red'
+                          size='icon-sm'
+                          icon={faPencil}
+                        />
+                      </div>
+                      <div className='opacity-50 hover:opacity-100 duration-200 flex items-center'>
+                        <Button
+                          onButtonPressed={() =>
+                            handlePopUpOpen('deleteEnv', { name, slug })
+                          }
+                          color='red'
+                          size='icon-sm'
+                          icon={faX}
+                        />
+                      </div>
+                    </td>
+                  </tr>
+                );
+              })
+            ) : (
+              <tr>
+                <td
+                  colSpan={4}
+                  className='text-center pt-7 pb-4 text-bunker-400'
+                >
+                  No environmants found
+                </td>
+              </tr>
+            )}
+          </tbody>
+        </table>
+        <DeleteActionModal
+          isOpen={popUp['deleteEnv'].isOpen}
+          title={`Are you sure want to delete ${
+            (popUp?.deleteEnv?.data as { name: string })?.name || ' '
+          }?`}
+          deleteKey={(popUp?.deleteEnv?.data as { slug: string })?.slug || ''}
+          onClose={() => handlePopUpClose('deleteEnv')}
+          onSubmit={onEnvDeleteCB}
+        />
+        <AddUpdateEnvironmentDialog
+          isOpen={popUp.createUpdateEnv.isOpen}
+          isEditMode={Boolean(popUp.createUpdateEnv?.data)}
+          initialValues={popUp?.createUpdateEnv?.data as any}
+          onClose={() => handlePopUpClose('createUpdateEnv')}
+          onCreateSubmit={onEnvCreateCB}
+          onEditSubmit={onEnvUpdateCB}
+        />
+      </div>
+    </>
+  );
+};
+
+export default EnvironmentTable;

frontend/components/basic/table/ServiceTokenTable.tsx

@@ -3,7 +3,6 @@ import { faX } from '@fortawesome/free-solid-svg-icons';
 import { useNotificationContext } from '~/components/context/Notifications/NotificationProvider';
 
 import deleteServiceToken from "../../../pages/api/serviceToken/deleteServiceToken";
-import { reverseEnvMapping } from '../../../public/data/frequentConstants';
 import guidGenerator from '../../utilities/randomId';
 import Button from '../buttons/Button';
 
@@ -60,7 +59,7 @@ const ServiceTokenTable = ({ data, workspaceName, setServiceTokens }: ServiceTok
                     {workspaceName}
                   </td>
                   <td className="pl-6 py-2 border-mineshaft-700 border-t text-gray-300">
-                    {reverseEnvMapping[row.environment]}
+                    {row.environment}
                   </td>
                   <td className="pl-6 py-2 border-mineshaft-700 border-t text-gray-300">
                     {new Date(row.expiresAt).toUTCString()}

frontend/components/basic/table/UserTable.js

@@ -117,13 +117,13 @@ const UserTable = ({
 
   return (
     <div className="table-container bg-bunker rounded-md mb-6 border border-mineshaft-700 relative mt-1">
-      <div className="absolute rounded-t-md w-full h-14 bg-white/5"></div>
-      <table className="w-full my-1">
-        <thead className="text-gray-400">
+      <div className="absolute rounded-t-md w-full h-[3.25rem] bg-white/5"></div>
+      <table className="w-full my-0.5">
+        <thead className="text-gray-400 text-sm font-light">
           <tr>
-            <th className="text-left pl-6 py-3.5">First Name</th>
-            <th className="text-left pl-6 py-3.5">Last Name</th>
-            <th className="text-left pl-6 py-3.5">Email</th>
+            <th className="text-left pl-6 py-3.5">FIRST NAME</th>
+            <th className="text-left pl-6 py-3.5">LAST NAME</th>
+            <th className="text-left pl-6 py-3.5">EMAIL</th>
             <th></th>
           </tr>
         </thead>

frontend/components/dashboard/CommentField.tsx

@@ -6,10 +6,10 @@ import { useTranslation } from "next-i18next";
 const CommentField = ({ comment, modifyComment, position }: { comment: string; modifyComment: (value: string, posistion: number) => void; position: number;}) => {
   const { t } = useTranslation();
 
-  return <div className={`relative mt-4 px-4 pt-4`}>
-    <p className='text-sm text-bunker-300'>{t("dashboard:sidebar.comments")}</p>
+  return <div className={`relative mt-4 px-4 pt-6`}>
+    <p className='text-sm text-bunker-300 pl-0.5'>{t("dashboard:sidebar.comments")}</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"
+      className="bg-bunker-800 placeholder:text-bunker-400 h-32 w-full bg-bunker-800 px-2 py-1.5 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..."

frontend/components/dashboard/DashboardInputField.tsx

@@ -9,7 +9,7 @@ const REGEX = /([$]{.*?})/g;
 interface DashboardInputFieldProps {
   position: number;
   onChangeHandler: (value: string, position: number) => void;
-  value: string;
+  value: string | undefined;
   type: 'varName' | 'value';
   blurred?: boolean;
   isDuplicate?: boolean;
@@ -47,7 +47,7 @@ const DashboardInputField = ({
   };
 
   if (type === 'varName') {
-    const startsWithNumber = !isNaN(Number(value.charAt(0))) && value != '';
+    const startsWithNumber = !isNaN(Number(value?.charAt(0))) && value != '';
     const error = startsWithNumber || isDuplicate;
 
     return (
@@ -141,7 +141,7 @@ const DashboardInputField = ({
           {blurred && (
             <div className="absolute flex flex-row items-center z-20 peer pr-2 bg-bunker-800 group-hover:hidden peer-hover:hidden peer-focus:hidden peer-active:invisible h-9 w-full rounded-md text-gray-400/50 text-clip">
               <div className="px-2 flex flex-row items-center overflow-x-scroll no-scrollbar no-scrollbar::-webkit-scrollbar">
-                {value.split('').map(() => (
+                {value?.split('').map(() => (
                   <FontAwesomeIcon
                     key={guidGenerator()}
                     className="text-xxs mx-0.5"

frontend/components/dashboard/DeleteActionButton.tsx

@@ -0,0 +1,33 @@
+import React, { useState } from 'react'
+import { useTranslation } from 'react-i18next';
+
+import Button from '../basic/buttons/Button';
+import { DeleteEnvVar } from '../basic/dialog/DeleteEnvVar';
+
+type Props = {
+  onSubmit: () => void
+}
+
+export function DeleteActionButton({ onSubmit }: Props) {
+  const { t } = useTranslation();
+  const [open, setOpen] = useState(false)
+
+  return (
+    <div className="bg-[#9B3535] opacity-70 hover:opacity-100 w-[4.5rem] h-[2.5rem] rounded-md duration-200 ml-2">
+      <Button
+        text={String(t("Delete"))}
+        // onButtonPressed={onSubmit}
+        color="red"
+        size="md"
+        onButtonPressed={() => setOpen(true)}
+      />
+      <DeleteEnvVar 
+        isOpen={open}
+        onClose={() => {
+          setOpen(false)
+        }}
+        onSubmit={onSubmit}
+      />
+    </div>
+  )
+}

frontend/components/dashboard/DownloadSecretsMenu.tsx

@@ -0,0 +1,66 @@
+import { Fragment } from 'react';
+import { useTranslation } from "next-i18next";
+import { faDownload } from '@fortawesome/free-solid-svg-icons';
+import { Menu, Transition } from '@headlessui/react';
+import { SecretDataProps } from 'public/data/frequentInterfaces';
+
+import Button from '../basic/buttons/Button';
+import downloadDotEnv from '../utilities/secrets/downloadDotEnv';
+import downloadYaml from '../utilities/secrets/downloadYaml';
+
+/**
+ * This is the menu that is used to download secrets as .env ad .yml files (in future we may have more options)
+ * @param {object} obj 
+ * @param {SecretDataProps[]} obj.data - secrets that we want to downlaod
+ * @param {string} obj.env - the environment which we're downloading (used for naming the file)
+ */
+const DownloadSecretMenu = ({ data, env }: { data: SecretDataProps[]; env: string; }) => {
+  const { t } = useTranslation();
+
+  return <Menu
+    as="div"
+    className="relative inline-block text-left"
+  >
+    <Menu.Button
+      as="div"
+      className="inline-flex w-full justify-center 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"
+    >
+      <Button
+        color="mineshaft"
+        size="icon-md"
+        icon={faDownload}
+        onButtonPressed={() => {}}
+      />
+    </Menu.Button>
+    <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-[12rem] origin-top-right rounded-md bg-bunker border border-mineshaft-500 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none p-2 space-y-2">
+        <Menu.Item>
+          <Button
+            color="mineshaft"
+            onButtonPressed={() => downloadDotEnv({ data, env })}
+            size="md"
+            text="Download as .env"
+          />
+        </Menu.Item>
+        <Menu.Item>
+          <Button
+            color="mineshaft"
+            onButtonPressed={() => downloadYaml({ data, env })}
+            size="md"
+            text="Download as .yml"
+          />
+        </Menu.Item>
+      </Menu.Items>
+    </Transition>
+  </Menu>
+}
+
+export default DownloadSecretMenu;

frontend/components/dashboard/DropZone.tsx

@@ -3,10 +3,11 @@ import Image from "next/image";
 import { useTranslation } from "next-i18next";
 import { faUpload } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { parseDocument, Scalar, YAMLMap } from 'yaml';
 
 import Button from "../basic/buttons/Button";
 import Error from "../basic/Error";
-import parse from "../utilities/file";
+import { parseDotEnv } from '../utilities/parseDotEnv';
 import guidGenerator from "../utilities/randomId";
 
 interface DropZoneProps {
@@ -51,6 +52,53 @@ const DropZone = ({
 
   const [loading, setLoading] = useState(false);
 
+  const getSecrets = (file: ArrayBuffer, fileType: string) => {
+    let secrets;
+    switch (fileType) {
+      case 'env': {
+        const keyPairs = parseDotEnv(file);
+        secrets = Object.keys(keyPairs).map((key, index) => {
+          return {
+            id: guidGenerator(),
+            pos: numCurrentRows + index,
+            key: key,
+            value: keyPairs[key as keyof typeof keyPairs].value,
+            comment: keyPairs[key as keyof typeof keyPairs].comments.join('\n'),
+            type: 'shared',
+          };
+        });
+        break;
+      }
+      case 'yml': {
+        const parsedFile = parseDocument(file.toString());
+        const keyPairs = parsedFile.contents!.toJSON();
+
+        secrets = Object.keys(keyPairs).map((key, index) => {
+          const fileContent = parsedFile.contents as YAMLMap<Scalar, Scalar>;
+          const comment =
+            fileContent!.items
+              .find((item) => item.key.value === key)
+              ?.key?.commentBefore?.split('\n')
+              .map((comment) => comment.trim())
+              .join('\n') ?? '';
+          return {
+            id: guidGenerator(),
+            pos: numCurrentRows + index,
+            key: key,
+            value: keyPairs[key as keyof typeof keyPairs]?.toString() ?? '',
+            comment,
+            type: 'shared',
+          };
+        });
+        break;
+      }
+      default:
+        secrets = '';
+        break;
+    }
+    return secrets;
+  };
+
   // This function function immediately parses the file after it is dropped
   const handleDrop = async (e: DragEvent) => {
     setLoading(true);
@@ -61,20 +109,12 @@ const DropZone = ({
 
     const file = e.dataTransfer.files[0];
     const reader = new FileReader();
+    const fileType = file.name.split('.')[1];
 
     reader.onload = (event) => {
       if (event.target === null || event.target.result === null) return;
       // parse function's argument looks like to be ArrayBuffer
-      const keyPairs = parse(event.target.result as Buffer);
-      const newData = Object.keys(keyPairs).map((key, index) => {
-        return {
-          id: guidGenerator(),
-          pos: numCurrentRows + index,
-          key: key,
-          value: keyPairs[key as keyof typeof keyPairs],
-          type: "shared",
-        };
-      });
+      const newData = getSecrets(event.target.result as ArrayBuffer, fileType);
       setData(newData);
       setButtonReady(true);
     };
@@ -95,25 +135,14 @@ const DropZone = ({
     setTimeout(() => setLoading(false), 5000);
     if (e.currentTarget.files === null) return;
     const file = e.currentTarget.files[0];
+    const fileType = file.name.split('.')[1];
     const reader = new FileReader();
     reader.onload = (event) => {
       if (event.target === null || event.target.result === null) return;
       const { result } = event.target;
-      if (typeof result === "string") {
-        const newData = result
-          .split("\n")
-          .map((line: string, index: number) => {
-            return {
-              id: guidGenerator(),
-              pos: numCurrentRows + index,
-              key: line.split("=")[0],
-              value: line.split("=").slice(1, line.split("=").length).join("="),
-              type: "shared",
-            };
-          });
-        setData(newData);
-        setButtonReady(true);
-      }
+      const newData = getSecrets(result as ArrayBuffer, fileType);
+      setData(newData);
+      setButtonReady(true);
     };
     reader.readAsText(file);
   };
@@ -139,7 +168,7 @@ const DropZone = ({
         id="fileSelect"
         type="file"
         className="opacity-0 absolute w-full h-full"
-        accept=".txt,.env"
+        accept=".txt,.env,.yml"
         onChange={handleFileSelect}
       />
       {errorDragAndDrop ? (
@@ -176,7 +205,7 @@ const DropZone = ({
         id="fileSelect"
         type="file"
         className="opacity-0 absolute w-full h-full"
-        accept=".txt,.env"
+        accept=".txt,.env,.yml"
         onChange={handleFileSelect}
       />
       <div className="flex flex-row w-full items-center justify-center mb-6 mt-5">
@@ -187,7 +216,7 @@ const DropZone = ({
       <div className="z-10 mb-6">
         <Button
           color="mineshaft"
-          text="Create a new .env file"
+          text={String(t("dashboard:add-secret"))}
           onButtonPressed={createNewFile}
           size="md"
         />

frontend/components/dashboard/KeyPair.tsx

@@ -1,22 +1,15 @@
 import React from 'react';
-import { faEllipsis, faShuffle, faX } from '@fortawesome/free-solid-svg-icons';
+import { faEllipsis } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { SecretDataProps } from 'public/data/frequentInterfaces';
 
-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;
   modifyKey: (value: string, position: number) => void; 
   modifyValue: (value: string, position: number) => void; 
+  modifyValueOverride: (value: string, position: number) => void; 
   isBlurred: boolean;
   isDuplicate: boolean;
   toggleSidebar: (id: string) => void;
@@ -30,6 +23,7 @@ interface KeyPairProps {
  * @param {String[]} obj.keyPair - data related to the environment variable (id, pos, key, value, public/private)
  * @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.modifyValueOverride - modify the value of a certain environment variable if it is overriden
  * @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
@@ -41,6 +35,7 @@ const KeyPair = ({
   keyPair,
   modifyKey,
   modifyValue,
+  modifyValueOverride,
   isBlurred,
   isDuplicate,
   toggleSidebar,
@@ -50,7 +45,7 @@ const KeyPair = ({
   return (
     <div className={`mx-1 flex flex-col items-center ml-1 ${isSnapshot && "pointer-events-none"} ${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">
+      {keyPair.valueOverride && <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
@@ -70,12 +65,12 @@ const KeyPair = ({
         <div className="w-full min-w-xl">
           <div className={`flex min-w-xl items-center ${!isSnapshot && "pr-1.5"} rounded-lg mt-4 md:mt-0 max-h-10`}>
             <DashboardInputField
-              onChangeHandler={modifyValue}
+              onChangeHandler={keyPair.valueOverride ? modifyValueOverride : modifyValue}
               type="value"
               position={keyPair.pos}
-              value={keyPair.value}
+              value={keyPair.valueOverride ? keyPair.valueOverride : keyPair.value}
               blurred={isBlurred}
-              override={keyPair.type == "personal"}
+              override={Boolean(keyPair.valueOverride)}
             />
           </div>
         </div>

frontend/components/dashboard/SideBar.tsx

@@ -9,24 +9,26 @@ import Button from '../basic/buttons/Button';
 import Toggle from '../basic/Toggle';
 import CommentField from './CommentField';
 import DashboardInputField from './DashboardInputField';
+import { DeleteActionButton } from './DeleteActionButton';
 import GenerateSecretMenu from './GenerateSecretMenu';
 
 
 interface SecretProps {
   key: string;
   value: string;
+  valueOverride: string | undefined;
   pos: number;
-  type: string;
   id: string;
   comment: string;
 }
 
 interface OverrideProps {
   id: string;
-  keyName: string;
-  value: string;
-  pos: number;
-  comment: string;
+  valueOverride: string;
+}
+export interface DeleteRowFunctionProps { 
+  ids: string[]; 
+  secretName: string; 
 }
 
 interface SideBarProps {
@@ -34,14 +36,13 @@ interface SideBarProps {
   data: SecretProps[];
   modifyKey: (value: string, position: number) => void; 
   modifyValue: (value: string, position: number) => void; 
+  modifyValueOverride: (value: string | undefined, 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;
-  deleteRow: any;
+  deleteRow: (props: DeleteRowFunctionProps) => void;
 }
 
 /**
@@ -50,12 +51,9 @@ interface SideBarProps {
  * @param {SecretProps[]} obj.data - data of a certain key valeu pair
  * @param {function} obj.modifyKey - function that modifies the secret key
  * @param {function} obj.modifyValue - function that modifies the secret value
- * @param {function} obj.addOverride - override a certain secret
- * @param {function} obj.deleteOverride - delete the personal override for a certain secret
+ * @param {function} obj.modifyValueOverride - function that modifies the secret value if it is an override
  * @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
  * @param {function} obj.deleteRow - a function to delete a certain keyPair
  * @returns the sidebar with 'secret's settings'
  */
@@ -64,17 +62,14 @@ const SideBar = ({
   data, 
   modifyKey, 
   modifyValue, 
+  modifyValueOverride, 
   modifyComment,
-  addOverride, 
-  deleteOverride, 
   buttonReady, 
   savePush,
-  sharedToHide,
-  setSharedToHide,
   deleteRow
 }: SideBarProps) => {
   const [isLoading, setIsLoading] = useState(false);
-  const [overrideEnabled, setOverrideEnabled] = useState(data.map(secret => secret.type).includes("personal"));
+  const [overrideEnabled, setOverrideEnabled] = useState(data[0].valueOverride != undefined);
   const { t } = useTranslation();
 
   return <div className='absolute border-l border-mineshaft-500 bg-bunker fixed h-full w-96 top-14 right-0 z-40 shadow-xl flex flex-col justify-between'>
@@ -106,19 +101,19 @@ const SideBar = ({
             blurred={false}
           />
         </div>
-        {data.filter(secret => secret.type == "shared")[0]?.value 
+        {data[0]?.value 
           ? <div className={`relative mt-2 px-4 ${overrideEnabled && "opacity-40 pointer-events-none"} duration-200`}>
           <p className='text-sm text-bunker-300'>{t("dashboard:sidebar.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}
+            position={data[0].pos}
+            value={data[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} />
+            <GenerateSecretMenu modifyValue={modifyValue} position={data[0]?.pos} />
           </div>
         </div>
           : <div className='px-4 text-sm text-bunker-300 pt-4'>
@@ -126,39 +121,32 @@ const SideBar = ({
             {t("dashboard:sidebar.personal-explanation")}
           </div>}
         <div className='mt-4 px-4'>
-          {data.filter(secret => secret.type == "shared")[0]?.value &&
+          {data[0]?.value &&
           <div className='flex flex-row items-center justify-between my-2 pl-1 pr-2'>
             <p className='text-sm text-bunker-300'>{t("dashboard:sidebar.override")}</p>
             <Toggle 
               enabled={overrideEnabled} 
               setEnabled={setOverrideEnabled} 
-              addOverride={addOverride} 
-              keyName={data[0]?.key}
-              value={data[0]?.value}
+              addOverride={modifyValueOverride} 
               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}
+              onChangeHandler={modifyValueOverride}
               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}
+              position={data[0]?.pos}
+              value={overrideEnabled ? data[0]?.valueOverride : 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} />
+              <GenerateSecretMenu modifyValue={modifyValueOverride} position={data[0]?.pos} />
             </div>
           </div>
         </div>
         <SecretVersionList secretId={data[0]?.id} />
-        <CommentField comment={data.filter(secret => secret.type == "shared")[0]?.comment} modifyComment={modifyComment} position={data[0]?.pos} />
+        <CommentField comment={data[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]`}>
@@ -170,14 +158,9 @@ const SideBar = ({
         active={buttonReady}
         textDisabled="Saved"
       />
-      <div className="bg-[#9B3535] opacity-70 hover:opacity-100 w-[4.5rem] h-[2.5rem] rounded-md duration-200 ml-2">
-        <Button
-          text={String(t("Delete"))}
-          onButtonPressed={() => deleteRow({ ids: overrideEnabled ? data.map(secret => secret.id) : [data.filter(secret => secret.type == "shared")[0]?.id], secretName: data[0]?.key })}
-          color="red"
-          size="md"
-        />
-      </div>
+      <DeleteActionButton 
+        onSubmit={() => deleteRow({ ids: data.map(secret => secret.id), secretName: data[0]?.key })}
+      />
     </div>
   </div>
 };

frontend/components/integrations/CloudIntegration.tsx

@@ -74,7 +74,7 @@ const CloudIntegration = ({
             integrationAuths
             .map((authorization) => authorization.integration)
             .includes(cloudIntegrationOption.name.toLowerCase()) && (
-            <div className="absolute group z-50 top-0 right-0 flex flex-row">
+            <div className="absolute group z-40 top-0 right-0 flex flex-row">
                 <div
                     onClick={(event) => {
                         event.stopPropagation();

frontend/components/integrations/Integration.tsx

@@ -15,14 +15,13 @@ import getIntegrationApps from "../../pages/api/integrations/GetIntegrationApps"
 import updateIntegration from "../../pages/api/integrations/updateIntegration"
 import {
   contextNetlifyMapping,
-  envMapping,
   reverseContextNetlifyMapping,
-  reverseEnvMapping,
 } from "../../public/data/frequentConstants";
 
 interface Integration {
     _id: string;
     app?: string;
+    target?: string;
     environment: string;
     integration: string;
     integrationAuth: string;
@@ -35,13 +34,23 @@ interface IntegrationApp {
   siteId: string;
 }
 
-const Integration = ({ 
-  integration
-}: {
+type Props = {
   integration: Integration;
-}) => {
-    const [integrationEnvironment, setIntegrationEnvironment] = useState(
-      reverseEnvMapping[integration.environment]
+  environments: Array<{ name: string; slug: string }>;
+};
+
+const Integration = ({ 
+  integration,
+  environments = []
+}:Props ) => {
+    // set initial environment. This find will only execute when component is mounting
+    const [integrationEnvironment, setIntegrationEnvironment] = useState<
+      Props['environments'][0]
+    >(
+      environments.find(({ slug }) => slug === integration.environment) || {
+        name: '',
+        slug: '',
+      }
     );
     const [fileState, setFileState] = useState([]);
     const router = useRouter();
@@ -69,7 +78,11 @@ const Integration = ({
         
         switch (integration.integration) {
           case "vercel":
-            setIntegrationTarget("Development");
+            setIntegrationTarget(
+              integration?.target 
+              ? integration.target.charAt(0).toUpperCase() + integration.target.substring(1) 
+              : "Development"
+            );
             break;
           case "netlify":
             setIntegrationContext(integration?.context ? contextNetlifyMapping[integration.context] : "Local development");
@@ -88,17 +101,18 @@ const Integration = ({
           case "vercel":
             return (
               <div>
-                <div className="text-gray-400 text-xs font-semibold mb-2">
+                <div className="text-gray-400 text-xs font-semibold mb-2 w-60">
                     ENVIRONMENT
                 </div>
                 <ListBox
                   data={!integration.isActive ? [
-                    "Production",
+                    "Development",
                     "Preview",
-                    "Development"
+                    "Production"
                   ] : null}
-                  selected={"Production"}
+                  selected={integrationTarget}
                   onChange={setIntegrationTarget}
+                  isFull={true}
                 />
             </div>
             );
@@ -131,42 +145,47 @@ const Integration = ({
     if (!integrationApp || apps.length === 0) return <div></div>
     
     return (
-      <div className="max-w-5xl p-6 mx-6 mb-8 rounded-md bg-white/5 flex justify-between">
-        <div className="flex">
+      <div className='max-w-5xl p-6 mx-6 mb-8 rounded-md bg-white/5 flex justify-between'>
+        <div className='flex'>
           <div>
-            <p className="text-gray-400 text-xs font-semibold mb-2">ENVIRONMENT</p>
-            <ListBox data={!integration.isActive ? [
-                  "Development",
-                  "Staging",
-                  "Testing",
-                  "Production",
-                ] : null}
-              selected={integrationEnvironment}
-              onChange={(environment) => {
-                setIntegrationEnvironment(environment);
-              }}
+            <p className='text-gray-400 text-xs font-semibold mb-2'>
+              ENVIRONMENT
+            </p>
+            <ListBox
+              data={
+                !integration.isActive
+                  ? environments.map(({ name }) => name)
+                  : null
+              }
+              selected={integrationEnvironment.name}
+              onChange={(envName) =>
+                setIntegrationEnvironment(
+                  environments.find(({ name }) => envName === name) || {
+                    name: 'unknown',
+                    slug: 'unknown',
+                  }
+                )
+              }
               isFull={true}
             />
           </div>
-          <div className="pt-2">
+          <div className='pt-2'>
             <FontAwesomeIcon
               icon={faArrowRight}
-              className="mx-4 text-gray-400 mt-8"
-            /> 
+              className='mx-4 text-gray-400 mt-8'
+            />
           </div>
-          <div className="mr-2">
-            <p className="text-gray-400 text-xs font-semibold mb-2">
+          <div className='mr-2'>
+            <p className='text-gray-400 text-xs font-semibold mb-2'>
               INTEGRATION
             </p>
-            <div className="py-2.5 bg-white/[.07] rounded-md pl-4 pr-10 text-sm font-semibold text-gray-300">
+            <div className='py-2.5 bg-white/[.07] rounded-md pl-4 pr-10 text-sm font-semibold text-gray-300'>
               {integration.integration.charAt(0).toUpperCase() +
                 integration.integration.slice(1)}
             </div>
           </div>
-          <div className="mr-2">
-            <div className="text-gray-400 text-xs font-semibold mb-2">
-              APP
-            </div>
+          <div className='mr-2'>
+            <div className='text-gray-400 text-xs font-semibold mb-2'>APP</div>
             <ListBox
               data={!integration.isActive ? apps.map((app) => app.name) : null}
               selected={integrationApp}
@@ -177,52 +196,55 @@ const Integration = ({
           </div>
           {renderIntegrationSpecificParams(integration)}
         </div>
-        <div className="flex items-end">
-            {integration.isActive ? (
-              <div className="max-w-5xl flex flex-row items-center bg-white/5 p-2 rounded-md px-4">
-                <FontAwesomeIcon
-                  icon={faRotate}
-                  className="text-lg mr-2.5 text-primary animate-spin"
-                />
-                <div className="text-gray-300 font-semibold">In Sync</div>
-              </div>
-            ) : (
-              <Button
-                text="Start Integration"
-                onButtonPressed={async () => {
-                  
-                  const siteApp = apps.find((app) => app.name === integrationApp); // obj or undefined
-                  const siteId = siteApp?.siteId ? siteApp.siteId : null;
-                  
-                  const result = await updateIntegration({
-                    integrationId: integration._id,
-                    environment: envMapping[integrationEnvironment],
-                    app: integrationApp,
-                    isActive: true,
-                    target: integrationTarget ? integrationTarget.toLowerCase() : null,
-                    context: integrationContext ? reverseContextNetlifyMapping[integrationContext] : null,
-                    siteId
-                  });
-
-                  router.reload();
-                }}
-                color="mineshaft"
-                size="md"
-              />
-            )}
-            <div className="opacity-50 hover:opacity-100 duration-200 ml-2">
-              <Button
-                onButtonPressed={async () => {
-                  await deleteIntegration({
-                    integrationId: integration._id,
-                  });
-                  router.reload();
-                }}
-                color="red"
-                size="icon-md"
-                icon={faX}
+        <div className='flex items-end'>
+          {integration.isActive ? (
+            <div className='max-w-5xl flex flex-row items-center bg-white/5 p-2 rounded-md px-4'>
+              <FontAwesomeIcon
+                icon={faRotate}
+                className='text-lg mr-2.5 text-primary animate-spin'
               />
+              <div className='text-gray-300 font-semibold'>In Sync</div>
             </div>
+          ) : (
+            <Button
+              text='Start Integration'
+              onButtonPressed={async () => {
+                const siteApp = apps.find((app) => app.name === integrationApp); // obj or undefined
+                const siteId = siteApp?.siteId ? siteApp.siteId : null;
+
+                await updateIntegration({
+                  integrationId: integration._id,
+                  environment: integrationEnvironment.slug,
+                  app: integrationApp,
+                  isActive: true,
+                  target: integrationTarget
+                    ? integrationTarget.toLowerCase()
+                    : null,
+                  context: integrationContext
+                    ? reverseContextNetlifyMapping[integrationContext]
+                    : null,
+                  siteId,
+                });
+
+                router.reload();
+              }}
+              color='mineshaft'
+              size='md'
+            />
+          )}
+          <div className='opacity-50 hover:opacity-100 duration-200 ml-2'>
+            <Button
+              onButtonPressed={async () => {
+                await deleteIntegration({
+                  integrationId: integration._id,
+                });
+                router.reload();
+              }}
+              color='red'
+              size='icon-md'
+              icon={faX}
+            />
+          </div>
         </div>
       </div>
     );

frontend/components/integrations/IntegrationSection.tsx

@@ -5,7 +5,8 @@ import guidGenerator from "~/utilities/randomId";
 import Integration from "./Integration";
 
 interface Props {
-  integrations: any
+  integrations: any;
+  environments: Array<{ name: string; slug: string }>;
 }
 
 interface IntegrationType {
@@ -19,7 +20,8 @@ interface IntegrationType {
 }
 
 const ProjectIntegrationSection = ({
-  integrations
+  integrations,
+  environments = [],
 }: Props) => {
     return integrations.length > 0 ? (
       <div className="mb-12">
@@ -33,6 +35,7 @@ const ProjectIntegrationSection = ({
           <Integration
             key={guidGenerator()}
             integration={integration}
+            environments={environments}
           />
         ))}
       </div>

frontend/components/navigation/NavBarDashboard.tsx

@@ -13,6 +13,7 @@ import {
   faGear,
   faPlus,
   faRightFromBracket,
+  faUpRightFromSquare,
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { Menu, Transition } from "@headlessui/react";
@@ -107,6 +108,14 @@ export default function Navbar() {
         </div>
       </div>
       <div className="relative flex justify-start items-center mx-2 z-40">
+        <a 
+          href="https://infisical.com/docs/getting-started/introduction"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="text-gray-200 hover:bg-white/10 px-3 rounded-md duration-200 text-sm mr-4 py-2 flex items-center">
+          <FontAwesomeIcon icon={faBook} className="text-xl mr-2" />
+          Docs 
+        </a>
         <Menu as="div" className="relative inline-block text-left">
           <div className="mr-4">
             <Menu.Button className="inline-flex w-full justify-center rounded-md px-2 py-2 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">

frontend/components/signup/CodeInputStep.tsx

@@ -0,0 +1,136 @@
+import React, { useState } from "react";
+import ReactCodeInput from "react-code-input";
+import { useTranslation } from "next-i18next";
+
+import sendVerificationEmail from "~/pages/api/auth/SendVerificationEmail";
+
+import Button from "../basic/buttons/Button";
+import Error from "../basic/Error";
+
+
+// The style for the verification code input
+const props = {
+  inputStyle: {
+    fontFamily: "monospace",
+    margin: "4px",
+    MozAppearance: "textfield",
+    width: "55px",
+    borderRadius: "5px",
+    fontSize: "24px",
+    height: "55px",
+    paddingLeft: "7",
+    backgroundColor: "#0d1117",
+    color: "white",
+    border: "1px solid #2d2f33",
+    textAlign: "center",
+    outlineColor: "#8ca542",
+    borderColor: "#2d2f33"
+  },
+} as const;
+const propsPhone = {
+  inputStyle: {
+    fontFamily: "monospace",
+    margin: "4px",
+    MozAppearance: "textfield",
+    width: "40px",
+    borderRadius: "5px",
+    fontSize: "24px",
+    height: "40px",
+    paddingLeft: "7",
+    backgroundColor: "#0d1117",
+    color: "white",
+    border: "1px solid #2d2f33",
+    textAlign: "center",
+    outlineColor: "#8ca542",
+    borderColor: "#2d2f33"
+  },
+} as const;
+
+interface CodeInputStepProps {
+  email: string;
+  incrementStep: () => void;
+  setCode: (value: string) => void;
+  codeError: boolean;
+}
+
+/**
+ * This is the second step of sign up where users need to verify their email
+ * @param {object} obj 
+ * @param {string} obj.email - user's email to which we just sent a verification email
+ * @param {function} obj.incrementStep - goes to the next step of signup
+ * @param {function} obj.setCode - state updating function that set the current value of the emai verification code
+ * @param {boolean} obj.codeError - whether the code was inputted wrong or now
+ * @returns 
+ */
+export default function CodeInputStep({ email, incrementStep, setCode, codeError }: CodeInputStepProps): JSX.Element {
+  const [isLoading, setIsLoading] = useState(false);
+  const [isResendingVerificationEmail, setIsResendingVerificationEmail] =
+    useState(false);
+  const { t } = useTranslation();
+
+  const resendVerificationEmail = async () => {
+    setIsResendingVerificationEmail(true);
+    setIsLoading(true);
+    sendVerificationEmail(email);
+    setTimeout(() => {
+      setIsLoading(false);
+      setIsResendingVerificationEmail(false);
+    }, 2000);
+  };
+
+  return (
+    <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-bunker-300">
+        {t("signup:step2-message")}
+      </p>
+      <p className="text-l flex justify-center font-semibold my-2 text-bunker-300">
+        {email}{" "}
+      </p>
+      <div className="hidden md:block">
+        <ReactCodeInput
+          name=""
+          inputMode="tel"
+          type="text"
+          fields={6}
+          onChange={setCode}
+          {...props}
+          className="mt-6 mb-2"
+        />
+      </div>
+      <div className="block md:hidden">
+        <ReactCodeInput
+          name=""
+          inputMode="tel"
+          type="text"
+          fields={6}
+          onChange={setCode}
+          {...propsPhone}
+          className="mt-2 mb-6"
+        />
+      </div>
+      {codeError && <Error text={t("signup:step2-code-error")} />}
+      <div className="flex max-w-max min-w-28 flex-col items-center justify-center md:p-2 max-h-24 mx-auto text-lg px-4 mt-4 mb-2">
+        <Button
+          text={t("signup: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">
+        <div className="flex flex-row items-baseline gap-1 text-sm">
+          <span className="text-bunker-400">
+            {t("signup:step2-resend-alert")}
+          </span>
+          <u className={`font-normal ${isResendingVerificationEmail ? 'text-bunker-400' : 'text-primary-700 hover:text-primary duration-200'}`}>
+            <button disabled={isLoading} onClick={resendVerificationEmail}>
+              {isResendingVerificationEmail ? t("signup:step2-resend-progress") : t("signup:step2-resend-submit")}
+            </button>
+          </u>
+        </div>
+        <p className="text-sm text-bunker-400 pb-2">
+          {t("signup:step2-spam-alert")}
+        </p>
+      </div>
+    </div>
+  );
+}

frontend/components/signup/DonwloadBackupPDFStep.tsx

@@ -0,0 +1,60 @@
+import React from "react";
+import { useTranslation } from "next-i18next";
+import { faWarning } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import Button from "../basic/buttons/Button";
+import issueBackupKey from "../utilities/cryptography/issueBackupKey";
+
+
+interface DownloadBackupPDFStepProps {
+  incrementStep: () => void;
+  email: string; 
+  password: string;
+  name: string;
+}
+
+/**
+ * This is the step of the signup flow where the user downloads the backup pdf
+ * @param {object} obj 
+ * @param {function} obj.incrementStep - function that moves the user on to the next stage of signup
+ * @param {string} obj.email - user's email
+ * @param {string} obj.password - user's password
+ * @param {string} obj.name - user's name 
+ * @returns 
+ */
+export default function DonwloadBackupPDFStep({ incrementStep, email, password, name }: DownloadBackupPDFStepProps): JSX.Element {
+  const { t } = useTranslation();
+
+  return (
+    <div className="bg-bunker flex flex-col items-center w-full max-w-xs md:max-w-lg mx-auto h-7/12 py-8 px-4 md:px-6 mx-1 mb-36 md:mb-16 rounded-xl drop-shadow-xl">
+      <p className="text-4xl text-center font-semibold flex justify-center text-transparent bg-clip-text bg-gradient-to-br from-sky-400 to-primary">
+        {t("signup:step4-message")}
+      </p>
+      <div className="flex flex-col items-center justify-center w-full mt-4 md:mt-8 max-w-md text-gray-400 text-md rounded-md px-2">
+        <div>{t("signup:step4-description1")}</div>
+        <div className="mt-3">{t("signup:step4-description2")}</div>
+      </div>
+      <div className="w-full p-2 flex flex-row items-center bg-white/10 text-gray-400 rounded-md max-w-xs md:max-w-md mx-auto mt-4">
+        <FontAwesomeIcon icon={faWarning} className="ml-2 mr-4 text-4xl" />
+        {t("signup:step4-description3")}
+      </div>
+      <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 () => {
+            await issueBackupKey({
+              email,
+              password,
+              personalName: name,
+              setBackupKeyError: (value: boolean) => {},
+              setBackupKeyIssued: (value: boolean) => {},
+            });
+            incrementStep();
+          }}
+          size="lg"
+        />
+      </div>
+    </div>
+  );
+}

frontend/components/signup/EnterEmailStep.tsx

@@ -0,0 +1,97 @@
+import React, { useState } from "react";
+import Link from "next/link";
+import { useTranslation } from "next-i18next";
+
+import sendVerificationEmail from "~/pages/api/auth/SendVerificationEmail";
+
+import Button from "../basic/buttons/Button";
+import InputField from "../basic/InputField";
+
+
+interface DownloadBackupPDFStepProps {
+  incrementStep: () => void;
+  email: string; 
+  setEmail: (value: string) => void;
+}
+
+/**
+ * This is the first step of the sign up process - users need to enter their email
+ * @param {object} obj 
+ * @param {string} obj.email - email of a user signing up
+ * @param {function} obj.setEmail - funciton that manages the state of the email variable
+ * @param {function} obj.incrementStep - function to go to the next step of the signup flow
+ * @returns 
+ */
+export default function EnterEmailStep({ email, setEmail, incrementStep }: DownloadBackupPDFStepProps): JSX.Element {
+  const [emailError, setEmailError] = useState(false);
+  const [emailErrorMessage, setEmailErrorMessage] = useState("");
+  const { t } = useTranslation();
+
+  /**
+   * Verifies if the entered email "looks" correct
+   */
+  const emailCheck = () => {
+    let emailCheckBool = false;
+    if (!email) {
+      setEmailError(true);
+      setEmailErrorMessage("Please enter your email.");
+      emailCheckBool = true;
+    } else if (
+      !email.includes("@") ||
+      !email.includes(".") ||
+      !/[a-z]/.test(email)
+    ) {
+      setEmailError(true);
+      setEmailErrorMessage("Please enter a valid email.");
+      emailCheckBool = true;
+    } else {
+      setEmailError(false);
+    }
+
+    // If everything is correct, go to the next step
+    if (!emailCheckBool) {
+      sendVerificationEmail(email);
+      incrementStep();
+    }
+  };
+
+  return (
+    <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">
+          {t("signup:step1-start")}
+        </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={t("common:email") ?? ""}
+            onChangeHandler={setEmail}
+            type="email"
+            value={email}
+            placeholder=""
+            isRequired
+            error={emailError}
+            errorText={emailErrorMessage}
+            autoComplete="username"
+          />
+        </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">
+            {t("signup:step1-privacy")}
+          </p>
+          <div className="text-l mt-6 m-2 md:m-8 px-8 py-1 text-lg">
+            <Button text={t("signup:step1-submit") ?? ""} 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">
+              {t("signup:already-have-account")}
+            </u>
+          </button>
+        </Link>
+      </div>
+    </div>
+  );
+}

frontend/components/signup/TeamInviteStep.tsx

@@ -0,0 +1,72 @@
+import React, { useState } from "react";
+import { useRouter } from "next/router";
+import { useTranslation } from "next-i18next";
+
+import addUserToOrg from "~/pages/api/organization/addUserToOrg";
+import getWorkspaces from "~/pages/api/workspace/getWorkspaces";
+
+import Button from "../basic/buttons/Button";
+
+
+/**
+ * This is the last step of the signup flow. People can optionally invite their teammates here.
+ */
+export default function TeamInviteStep(): JSX.Element {
+  const [emails, setEmails] = useState("");
+  const { t } = useTranslation();
+  const router = useRouter();
+
+  // Redirect user to the getting started page
+  const redirectToHome = async () => {
+    const userWorkspaces = await getWorkspaces();
+    const userWorkspace = userWorkspaces[0]._id;
+    router.push("/home/" + userWorkspace);
+
+  }
+
+  const inviteUsers = async ({ emails }: { emails: string; }) => {
+    emails 
+      .split(',')
+      .map(email => email.trim())
+      .map(async (email) => await addUserToOrg(email, String(localStorage.getItem('orgData.id'))));
+
+    await redirectToHome();
+  }
+
+  return (
+    <div className="bg-bunker w-max mx-auto h-7/12 pt-6 pb-4 px-8 rounded-xl drop-shadow-xl mb-64 md:mb-32">
+      <p className="text-4xl font-semibold flex justify-center text-primary">
+        {t("signup:step5-invite-team")}
+      </p>
+      <p className="text-center flex justify-center text-bunker-300 max-w-xs md:max-w-sm md:mx-8 mb-6 mt-4">
+        {t("signup:step5-subtitle")}
+      </p>
+      <div>
+        <div className="overflow-auto bg-bunker-800">
+          <div className="whitespace-pre-wrap break-words bg-transparent">
+
+          </div>
+        </div>
+        <textarea 
+          className="bg-bunker-800 h-20 w-full placeholder:text-bunker-400 py-1 px-2 rounded-md border border-mineshaft-500 text-sm text-bunker-300 outline-none focus:ring-2 ring-primary-800 ring-opacity-70"
+          value={emails}
+          onChange={(e) => setEmails(e.target.value)}
+          placeholder="email@example.com, email2@example.com..."
+        />
+      </div>
+      <div className="flex flex-row max-w-max min-w-28 items-center justify-center md:p-2 max-h-24 mx-auto text-lg px-4 mt-4 mb-2">
+        <div 
+          className="text-md md:text-sm mx-3 text-bunker-300 bg-mineshaft-700 py-3 md:py-3.5 px-5 rounded-md cursor-pointer hover:bg-mineshaft-500 duration-200"
+          onClick={redirectToHome}
+        >
+          {t("signup:step5-skip")}
+        </div>
+        <Button
+          text={t("signup:step5-send-invites") ?? ""}
+          onButtonPressed={() => inviteUsers({ emails})}
+          size="lg"
+        />
+      </div>
+    </div>
+  );
+}

frontend/components/signup/UserInfoStep.tsx

@@ -0,0 +1,306 @@
+import React, { useState } from "react";
+import { useRouter } from "next/router";
+import { useTranslation } from "next-i18next";
+import { faCheck, faX } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import completeAccountInformationSignup from "~/pages/api/auth/CompleteAccountInformationSignup";
+
+import Button from "../basic/buttons/Button";
+import InputField from "../basic/InputField";
+import attemptLogin from "../utilities/attemptLogin";
+import passwordCheck from "../utilities/checks/PasswordCheck";
+import Aes256Gcm from "../utilities/cryptography/aes-256-gcm";
+
+const nacl = require("tweetnacl");
+const jsrp = require("jsrp");
+nacl.util = require("tweetnacl-util");
+const client = new jsrp.client();
+
+interface UserInfoStepProps {
+  verificationToken: string;
+  incrementStep: () => void;
+  email: string;
+  password: string;
+  setPassword: (value: string) => void;
+  firstName: string;
+  setFirstName: (value: string) => void;
+  lastName: string;
+  setLastName: (value: string) => void;
+}
+
+/**
+ * This is the step of the sign up flow where people provife their name/surname and password
+ * @param {object} obj
+ * @param {string} obj.verificationToken - the token which we use to verify the legitness of a user
+ * @param {string} obj.incrementStep - a function to move to the next signup step
+ * @param {string} obj.email - email of a user who is signing up
+ * @param {string} obj.password - user's password
+ * @param {string} obj.setPassword - function managing the state of user's password
+ * @param {string} obj.firstName - user's first name
+ * @param {string} obj.setFirstName  - function managing the state of user's first name
+ * @param {string} obj.lastName - user's lastName
+ * @param {string} obj.setLastName - function managing the state of user's last name
+ */
+export default function UserInfoStep({ 
+  verificationToken, 
+  incrementStep, 
+  email,
+  password,
+  setPassword, 
+  firstName, 
+  setFirstName,
+  lastName,
+  setLastName
+}: UserInfoStepProps): JSX.Element {
+  const [firstNameError, setFirstNameError] = useState(false);
+  const [lastNameError, setLastNameError] = useState(false);
+  const [passwordErrorLength, setPasswordErrorLength] = useState(false);
+  const [passwordErrorNumber, setPasswordErrorNumber] = useState(false);
+  const [passwordErrorLowerCase, setPasswordErrorLowerCase] = useState(false);
+
+  const [isLoading, setIsLoading] = useState(false);
+  const { t } = useTranslation();
+  const router = useRouter();
+
+  // Verifies if the information that the users entered (name, workspace) 
+  // is there, and if the password matches the criteria.
+  const signupErrorCheck = async () => {
+    setIsLoading(true);
+    let errorCheck = false;
+    if (!firstName) {
+      setFirstNameError(true);
+      errorCheck = true;
+    } else {
+      setFirstNameError(false);
+    }
+    if (!lastName) {
+      setLastNameError(true);
+      errorCheck = true;
+    } else {
+      setLastNameError(false);
+    }
+    errorCheck = passwordCheck({
+      password,
+      setPasswordErrorLength,
+      setPasswordErrorNumber,
+      setPasswordErrorLowerCase,
+      currentErrorCheck: errorCheck,
+    });
+
+    if (!errorCheck) {
+      // Generate a random pair of a public and a private key
+      const pair = nacl.box.keyPair();
+      const secretKeyUint8Array = pair.secretKey;
+      const publicKeyUint8Array = pair.publicKey;
+      const PRIVATE_KEY = nacl.util.encodeBase64(secretKeyUint8Array);
+      const PUBLIC_KEY = nacl.util.encodeBase64(publicKeyUint8Array);
+
+      const { ciphertext, iv, tag } = Aes256Gcm.encrypt({
+        text: PRIVATE_KEY,
+        secret: password
+          .slice(0, 32)
+          .padStart(
+            32 + (password.slice(0, 32).length - new Blob([password]).size),
+            "0"
+          ),
+      }) as { ciphertext: string; iv: string; tag: string };
+
+      localStorage.setItem("PRIVATE_KEY", PRIVATE_KEY);
+
+      client.init(
+        {
+          username: email,
+          password: password,
+        },
+        async () => {
+          client.createVerifier(
+            async (err: any, result: { salt: string; verifier: string }) => {
+              const response = await completeAccountInformationSignup({
+                email,
+                firstName,
+                lastName,
+                organizationName: firstName + "'s organization",
+                publicKey: PUBLIC_KEY,
+                ciphertext,
+                iv,
+                tag,
+                salt: result.salt,
+                verifier: result.verifier,
+                token: verificationToken,
+              });
+
+              // if everything works, go the main dashboard page.
+              if (response.status === 200) {
+                // response = await response.json();
+
+                localStorage.setItem("publicKey", PUBLIC_KEY);
+                localStorage.setItem("encryptedPrivateKey", ciphertext);
+                localStorage.setItem("iv", iv);
+                localStorage.setItem("tag", tag);
+
+                try {
+                  await attemptLogin(
+                    email,
+                    password,
+                    (value: boolean) => {},
+                    router,
+                    true,
+                    false
+                  );
+                  incrementStep();
+                } catch (error) {
+                  setIsLoading(false);
+                }
+              }
+            }
+          );
+        }
+      );
+    } else {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <div className="bg-bunker w-max mx-auto h-7/12 py-10 px-8 rounded-xl drop-shadow-xl mb-36 md:mb-16">
+      <p className="text-4xl font-bold flex justify-center mb-6 text-gray-400 mx-8 md:mx-16 text-transparent bg-clip-text bg-gradient-to-br from-sky-400 to-primary">
+        {t("signup:step3-message")}
+      </p>
+      <div className="relative z-0 flex items-center justify-end w-full md:p-2 rounded-lg max-h-24">
+        <InputField
+          label={t("common:first-name")}
+          onChangeHandler={setFirstName}
+          type="name"
+          value={firstName}
+          isRequired
+          errorText={
+            t("common:validate-required", {
+              name: t("common:first-name"),
+            }) as string
+          }
+          error={firstNameError}
+          autoComplete="given-name"
+        />
+      </div>
+      <div className="mt-2 flex items-center justify-center w-full md:p-2 rounded-lg max-h-24">
+        <InputField
+          label={t("common:last-name")}
+          onChangeHandler={setLastName}
+          type="name"
+          value={lastName}
+          isRequired
+          errorText={
+            t("common:validate-required", {
+              name: t("common:last-name"),
+            }) as string
+          }
+          error={lastNameError}
+          autoComplete="family-name"
+        />
+      </div>
+      <div className="mt-2 flex flex-col items-center justify-center w-full md:p-2 rounded-lg max-h-60">
+        <InputField
+          label={t("section-password:password")}
+          onChangeHandler={(password: string) => {
+            setPassword(password);
+            passwordCheck({
+              password,
+              setPasswordErrorLength,
+              setPasswordErrorNumber,
+              setPasswordErrorLowerCase,
+              currentErrorCheck: false,
+            });
+          }}
+          type="password"
+          value={password}
+          isRequired
+          error={
+            passwordErrorLength && passwordErrorNumber && passwordErrorLowerCase
+          }
+          autoComplete="new-password"
+          id="new-password"
+        />
+        {passwordErrorLength ||
+        passwordErrorLowerCase ||
+        passwordErrorNumber ? (
+          <div className="w-full mt-4 bg-white/5 px-2 flex flex-col items-start py-2 rounded-md">
+            <div className={`text-gray-400 text-sm mb-1`}>
+              {t("section-password:validate-base")}
+            </div>
+            <div className="flex flex-row justify-start items-center ml-1">
+              {passwordErrorLength ? (
+                <FontAwesomeIcon
+                  icon={faX}
+                  className="text-md text-red mr-2.5"
+                />
+              ) : (
+                <FontAwesomeIcon
+                  icon={faCheck}
+                  className="text-md text-primary mr-2"
+                />
+              )}
+              <div
+                className={`${
+                  passwordErrorLength ? "text-gray-400" : "text-gray-600"
+                } text-sm`}
+              >
+                {t("section-password:validate-length")}
+              </div>
+            </div>
+            <div className="flex flex-row justify-start items-center ml-1">
+              {passwordErrorLowerCase ? (
+                <FontAwesomeIcon
+                  icon={faX}
+                  className="text-md text-red mr-2.5"
+                />
+              ) : (
+                <FontAwesomeIcon
+                  icon={faCheck}
+                  className="text-md text-primary mr-2"
+                />
+              )}
+              <div
+                className={`${
+                  passwordErrorLowerCase ? "text-gray-400" : "text-gray-600"
+                } text-sm`}
+              >
+                {t("section-password:validate-case")}
+              </div>
+            </div>
+            <div className="flex flex-row justify-start items-center ml-1">
+              {passwordErrorNumber ? (
+                <FontAwesomeIcon
+                  icon={faX}
+                  className="text-md text-red mr-2.5"
+                />
+              ) : (
+                <FontAwesomeIcon
+                  icon={faCheck}
+                  className="text-md text-primary mr-2"
+                />
+              )}
+              <div
+                className={`${
+                  passwordErrorNumber ? "text-gray-400" : "text-gray-600"
+                } text-sm`}
+              >
+                {t("section-password:validate-number")}
+              </div>
+            </div>
+          </div>
+        ) : (
+          <div className="py-2"></div>
+        )}
+      </div>
+      <div className="flex flex-col items-center justify-center md:p-2 max-h-48 max-w-max mx-auto text-lg px-2 py-3">
+        <Button
+          text={t("signup:signup") ?? ""}
+          loading={isLoading}
+          onButtonPressed={signupErrorCheck}
+          size="lg"
+        />
+      </div>
+    </div>
+  )
+}

frontend/components/utilities/attemptLogin.js

@@ -1,147 +0,0 @@
-import Aes256Gcm from '~/components/utilities/cryptography/aes-256-gcm';
-import login1 from '~/pages/api/auth/Login1';
-import login2 from '~/pages/api/auth/Login2';
-import getOrganizations from '~/pages/api/organization/getOrgs';
-import getOrganizationUserProjects from '~/pages/api/organization/GetOrgUserProjects';
-
-import pushKeys from './secrets/pushKeys';
-import Telemetry from './telemetry/Telemetry';
-import { saveTokenToLocalStorage } from './saveTokenToLocalStorage';
-import SecurityClient from './SecurityClient';
-
-const nacl = require('tweetnacl');
-nacl.util = require('tweetnacl-util');
-const jsrp = require('jsrp');
-const client = new jsrp.client();
-
-/**
- * This function loggs in the user (whether it's right after signup, or a normal login)
- * @param {*} email
- * @param {*} password
- * @param {*} setErrorLogin
- * @param {*} router
- * @param {*} isSignUp
- * @returns
- */
-const attemptLogin = async (
-  email,
-  password,
-  setErrorLogin,
-  router,
-  isSignUp,
-  isLogin
-) => {
-  try {
-    const telemetry = new Telemetry().getInstance();
-
-    client.init(
-      {
-        username: email,
-        password: password
-      },
-      async () => {
-        const clientPublicKey = client.getPublicKey();
-
-        try {
-          const { serverPublicKey, salt } = await login1(email, clientPublicKey);
-
-          client.setSalt(salt);
-          client.setServerPublicKey(serverPublicKey);
-          const clientProof = client.getProof(); // called M1
-
-          // if everything works, go the main dashboard page.
-          const { token, publicKey, encryptedPrivateKey, iv, tag } =
-            await login2(email, clientProof);
-          
-          SecurityClient.setToken(token);
-
-          const privateKey = Aes256Gcm.decrypt({
-            ciphertext: encryptedPrivateKey,
-            iv,
-            tag,
-            secret: password
-              .slice(0, 32)
-              .padStart(
-                32 + (password.slice(0, 32).length - new Blob([password]).size),
-                '0'
-              )
-          });
-
-          saveTokenToLocalStorage({
-            publicKey,
-            encryptedPrivateKey,
-            iv,
-            tag,
-            privateKey
-          });
-          
-          const userOrgs = await getOrganizations();
-          const userOrgsData = userOrgs.map((org) => org._id);
-
-          let orgToLogin;
-          if (userOrgsData.includes(localStorage.getItem('orgData.id'))) {
-            orgToLogin = localStorage.getItem('orgData.id');
-          } else {
-            orgToLogin = userOrgsData[0];
-            localStorage.setItem('orgData.id', orgToLogin);
-          }
-
-          let orgUserProjects = await getOrganizationUserProjects({
-            orgId: orgToLogin
-          });
-
-          orgUserProjects = orgUserProjects?.map((project) => project._id);
-          let projectToLogin;
-          if (
-            orgUserProjects.includes(localStorage.getItem('projectData.id'))
-          ) {
-            projectToLogin = localStorage.getItem('projectData.id');
-          } else {
-            try {
-              projectToLogin = orgUserProjects[0];
-              localStorage.setItem('projectData.id', projectToLogin);
-            } catch (error) {
-              console.log('ERROR: User likely has no projects. ', error);
-            }
-          }
-
-          // If user is logging in for the first time, add the example keys
-          if (isSignUp) {
-            await pushKeys({
-              obj: {
-                sDATABASE_URL: [
-                  'mongodb+srv://${DB_USERNAME}:${DB_PASSWORD}@mongodb.net',
-                  'This is an example of secret referencing.'
-                ],
-                sDB_USERNAME: ['OVERRIDE_THIS', ''],
-                sDB_PASSWORD: ['OVERRIDE_THIS', ''],
-                pDB_USERNAME: ['user1234', 'This is an example of secret overriding. Your team can have a shared value of a secret, while you can override it to whatever value you need.'],
-                pDB_PASSWORD: ['example_password', 'This is an example of secret overriding. Your team can have a shared value of a secret, while you can override it to whatever value you need.'],
-                sTWILIO_AUTH_TOKEN: ['example_twillio_token', ''],
-                sWEBSITE_URL: ['http://localhost:3000', ''],
-              },
-              workspaceId: projectToLogin,
-              env: 'Development'
-            });
-          }
-          if (email) {
-            telemetry.identify(email);
-            telemetry.capture('User Logged In');
-          }
-
-          if (isLogin) {
-            router.push('/dashboard/');
-          }
-        } catch (error) {
-          setErrorLogin(true);
-          console.log('Login response not available');
-        }
-      }
-    );
-  } catch (error) {
-    console.log('Something went wrong during authentication');
-  }
-  return true;
-};
-
-export default attemptLogin;

frontend/components/utilities/attemptLogin.ts

@@ -0,0 +1,211 @@
+import { SecretDataProps } from 'public/data/frequentInterfaces';
+
+import Aes256Gcm from '~/components/utilities/cryptography/aes-256-gcm';
+import login1 from '~/pages/api/auth/Login1';
+import login2 from '~/pages/api/auth/Login2';
+import addSecrets from '~/pages/api/files/AddSecrets';
+import getOrganizations from '~/pages/api/organization/getOrgs';
+import getOrganizationUserProjects from '~/pages/api/organization/GetOrgUserProjects';
+import getUser from '~/pages/api/user/getUser';
+import uploadKeys from '~/pages/api/workspace/uploadKeys';
+
+import { encryptAssymmetric } from './cryptography/crypto';
+import encryptSecrets from './secrets/encryptSecrets';
+import Telemetry from './telemetry/Telemetry';
+import { saveTokenToLocalStorage } from './saveTokenToLocalStorage';
+import SecurityClient from './SecurityClient';
+
+
+const crypto = require("crypto");
+const nacl = require('tweetnacl');
+nacl.util = require('tweetnacl-util');
+const jsrp = require('jsrp');
+const client = new jsrp.client();
+
+/**
+ * This function logs in the user (whether it's right after signup, or a normal login)
+ * @param {string} email - email of the user logging in
+ * @param {string} password - password of the user logging in
+ * @param {function} setErrorLogin - function that visually dispay an error is something is wrong
+ * @param {*} router
+ * @param {boolean} isSignUp - whether this log in is a part of signup
+ * @param {boolean} isLogin - ?
+ * @returns
+ */
+const attemptLogin = async (
+  email: string,
+  password: string,
+  setErrorLogin: (value: boolean) => void,
+  router: any,
+  isSignUp: boolean,
+  isLogin: boolean
+) => {
+  try {
+    const telemetry = new Telemetry().getInstance();
+
+    client.init(
+      {
+        username: email,
+        password: password
+      },
+      async () => {
+        const clientPublicKey = client.getPublicKey();
+
+        try {
+          const { serverPublicKey, salt } = await login1(email, clientPublicKey);
+
+          client.setSalt(salt);
+          client.setServerPublicKey(serverPublicKey);
+          const clientProof = client.getProof(); // called M1
+
+          // if everything works, go the main dashboard page.
+          const { token, publicKey, encryptedPrivateKey, iv, tag } =
+            await login2(email, clientProof);
+          
+          SecurityClient.setToken(token);
+
+          const privateKey = Aes256Gcm.decrypt({
+            ciphertext: encryptedPrivateKey,
+            iv,
+            tag,
+            secret: password
+              .slice(0, 32)
+              .padStart(
+                32 + (password.slice(0, 32).length - new Blob([password]).size),
+                '0'
+              )
+          });
+
+          saveTokenToLocalStorage({
+            publicKey,
+            encryptedPrivateKey,
+            iv,
+            tag,
+            privateKey
+          });
+          
+          const userOrgs = await getOrganizations();
+          const userOrgsData = userOrgs.map((org: { _id: string; }) => org._id);
+
+          let orgToLogin;
+          if (userOrgsData.includes(localStorage.getItem('orgData.id'))) {
+            orgToLogin = localStorage.getItem('orgData.id');
+          } else {
+            orgToLogin = userOrgsData[0];
+            localStorage.setItem('orgData.id', orgToLogin);
+          }
+
+          let orgUserProjects = await getOrganizationUserProjects({
+            orgId: orgToLogin
+          });
+
+          orgUserProjects = orgUserProjects?.map((project: { _id: string; }) => project._id);
+          let projectToLogin;
+          if (
+            orgUserProjects.includes(localStorage.getItem('projectData.id'))
+          ) {
+            projectToLogin = localStorage.getItem('projectData.id');
+          } else {
+            try {
+              projectToLogin = orgUserProjects[0];
+              localStorage.setItem('projectData.id', projectToLogin);
+            } catch (error) {
+              console.log('ERROR: User likely has no projects. ', error);
+            }
+          }
+          
+          if (email) {
+            telemetry.identify(email);
+            telemetry.capture('User Logged In');
+          }
+
+          if (isSignUp) {
+            const randomBytes = crypto.randomBytes(16).toString("hex");
+            const PRIVATE_KEY = String(localStorage.getItem("PRIVATE_KEY"));
+
+            const myUser = await getUser();
+
+            const { ciphertext, nonce } = encryptAssymmetric({
+              plaintext: randomBytes,
+              publicKey: myUser.publicKey,
+              privateKey: PRIVATE_KEY,
+            }) as { ciphertext: string; nonce: string };
+
+            await uploadKeys(
+              projectToLogin,
+              myUser._id,
+              ciphertext,
+              nonce
+            );
+
+            const secretsToBeAdded: SecretDataProps[] = [{
+              pos: 0,
+              key: "DATABASE_URL",
+              value: "mongodb+srv://${DB_USERNAME}:${DB_PASSWORD}@mongodb.net",
+              valueOverride: undefined,
+              comment: "This is an example of secret referencing.",
+              id: ''
+            }, {
+              pos: 1,
+              key: "DB_USERNAME",
+              value: "OVERRIDE_THIS",
+              valueOverride: undefined,
+              comment: "This is an example of secret overriding. Your team can have a shared value of a secret, while you can override it to whatever value you need",
+              id: ''
+            }, {
+              pos: 2,
+              key: "DB_PASSWORD",
+              value: "OVERRIDE_THIS",
+              valueOverride: undefined,
+              comment: "This is an example of secret overriding. Your team can have a shared value of a secret, while you can override it to whatever value you need",
+              id: ''
+            }, {
+              pos: 3,
+              key: "DB_USERNAME",
+              value: "user1234",
+              valueOverride: "user1234",
+              comment: "",
+              id: ''
+            }, {
+              pos: 4,
+              key: "DB_PASSWORD",
+              value: "example_password",
+              valueOverride: "example_password",
+              comment: "",
+              id: ''
+            }, {
+              pos: 5,
+              key: "TWILIO_AUTH_TOKEN",
+              value: "example_twillio_token",
+              valueOverride: undefined,
+              comment: "",
+              id: ''
+            }, {
+              pos: 6,
+              key: "WEBSITE_URL",
+              value: "http://localhost:3000",
+              valueOverride: undefined,
+              comment: "",
+              id: ''
+            }]
+            const secrets = await encryptSecrets({ secretsToEncrypt: secretsToBeAdded, workspaceId: String(localStorage.getItem('projectData.id')), env: 'dev' })
+            await addSecrets({ secrets: secrets ?? [], env: "dev", workspaceId: String(localStorage.getItem('projectData.id')) });
+          }
+
+          if (isLogin) {
+            router.push('/dashboard/' + localStorage.getItem('projectData.id'));
+          }
+        } catch (error) {
+          console.log(error)
+          setErrorLogin(true);
+          console.log('Login response not available');
+        }
+      }
+    );
+  } catch (error) {
+    console.log('Something went wrong during authentication');
+  }
+  return true;
+};
+
+export default attemptLogin;

frontend/components/utilities/file.ts

@@ -1,47 +0,0 @@
-const LINE =
-  /(?:^|^)\s*(?:export\s+)?([\w.-]+)(?:\s*=\s*?|:\s+?)(\s*'(?:\\'|[^'])*'|\s*"(?:\\"|[^"])*"|\s*`(?:\\`|[^`])*`|[^#\r\n]+)?\s*(?:#.*)?(?:$|$)/gm;
-
-/**
- * Return text that is the buffer parsed
- * @param {Buffer} src - source buffer
- * @returns {String} text - text of buffer
- */
-function parse(src: Buffer) {
-  const obj: Record<string, string> = {};
-
-  // Convert buffer to string
-  let lines = src.toString();
-
-  // Convert line breaks to same format
-  lines = lines.replace(/\r\n?/gm, '\n');
-
-  let match;
-  while ((match = LINE.exec(lines)) != null) {
-    const key = match[1];
-
-    // Default undefined or null to empty string
-    let value = match[2] || '';
-
-    // Remove whitespace
-    value = value.trim();
-
-    // Check if double quoted
-    const maybeQuote = value[0];
-
-    // Remove surrounding quotes
-    value = value.replace(/^(['"`])([\s\S]*)\1$/gm, '$2');
-
-    // Expand newlines if double quoted
-    if (maybeQuote === '"') {
-      value = value.replace(/\\n/g, '\n');
-      value = value.replace(/\\r/g, '\r');
-    }
-
-    // Add to object
-    obj[key] = value;
-  }
-
-  return obj;
-}
-
-export default parse;

frontend/components/utilities/parseDotEnv.ts

@@ -0,0 +1,66 @@
+const LINE =
+  /(?:^|^)\s*(?:export\s+)?([\w.-]+)(?:\s*=\s*?|:\s+?)(\s*'(?:\\'|[^'])*'|\s*"(?:\\"|[^"])*"|\s*`(?:\\`|[^`])*`|[^#\r\n]+)?\s*(?:#.*)?(?:$|$)/gm;
+
+/**
+ * Return text that is the buffer parsed
+ * @param {ArrayBuffer} src - source buffer
+ * @returns {String} text - text of buffer
+ */
+export function parseDotEnv(src: ArrayBuffer) {
+  const object: {
+    [key: string]: { value: string; comments: string[] };
+  } = {};
+
+  // Convert buffer to string
+  let lines = src.toString();
+
+  // Convert line breaks to same format
+  lines = lines.replace(/\r\n?/gm, '\n');
+
+  let comments: string[] = [];
+
+  lines
+    .split('\n')
+    .map((line) => {
+      // collect comments of each env variable
+      if (line.startsWith('#')) {
+        comments.push(line.replace('#', '').trim());
+      } else if (line) {
+        let match;
+        let item: [string, string, string[]] | [] = [];
+
+        while ((match = LINE.exec(line)) !== null) {
+          const key = match[1];
+
+          // Default undefined or null to empty string
+          let value = match[2] || '';
+
+          // Remove whitespace
+          value = value.trim();
+
+          // Check if double quoted
+          const maybeQuote = value[0];
+
+          // Remove surrounding quotes
+          value = value.replace(/^(['"`])([\s\S]*)\1$/gm, '$2');
+
+          // Expand newlines if double quoted
+          if (maybeQuote === '"') {
+            value = value.replace(/\\n/g, '\n');
+            value = value.replace(/\\r/g, '\r');
+          }
+          item = [key, value, comments];
+        }
+        comments = [];
+        return item;
+      }
+      return [];
+    })
+    .filter((line) => line.length > 1)
+    .forEach((line) => {
+      const [key, value, comments] = line;
+      object[key as string] = { value, comments };
+    });
+
+  return object;
+}

frontend/components/utilities/secrets/checkOverrides.ts

@@ -0,0 +1,26 @@
+import { SecretDataProps } from "public/data/frequentInterfaces";
+
+/**
+ * This function downloads the secrets as a .env file
+ * @param {object} obj 
+ * @param {SecretDataProps[]} obj.data - secrets that we want to check for overrides
+ * @returns 
+ */
+const checkOverrides = async ({ data }: { data: SecretDataProps[]; }) => {
+  let secrets : SecretDataProps[] = data!.map((secret) => Object.create(secret));
+  const overridenSecrets = data!.filter(
+    (secret) => (secret.valueOverride == undefined || secret?.value != secret?.valueOverride) ? 'shared' : 'personal'
+  );
+  if (overridenSecrets.length) {
+    overridenSecrets.forEach((secret) => {
+      const index = secrets!.findIndex(
+        (_secret) => _secret.key === secret.key && (secret.valueOverride == undefined || secret?.value != secret?.valueOverride)
+      );
+      secrets![index].value = secret.value;
+    });
+    secrets = secrets!.filter((secret) => (secret.valueOverride == undefined || secret?.value != secret?.valueOverride));
+  }
+  return secrets;
+}
+
+export default checkOverrides;

frontend/components/utilities/secrets/downloadDotEnv.ts

@@ -0,0 +1,39 @@
+import { SecretDataProps } from "public/data/frequentInterfaces";
+
+import { envMapping } from "../../../public/data/frequentConstants";
+import checkOverrides from './checkOverrides';
+
+
+/**
+ * This function downloads the secrets as a .env file
+ * @param {object} obj 
+ * @param {SecretDataProps[]} obj.data - secrets that we want to download
+ * @param {string} obj.env - the environment which we're downloading (used for naming the file)
+ */
+const downloadDotEnv = async ({ data, env }: { data: SecretDataProps[]; env: string; }) => {
+  if (!data) return;
+  const secrets = await checkOverrides({ data });
+
+  const file = secrets!
+    .map(
+      (item: SecretDataProps) =>
+        `${
+          item.comment
+            ? item.comment
+                .split('\n')
+                .map((comment) => '# '.concat(comment))
+                .join('\n') + '\n'
+            : ''
+        }` + [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 = env + '.env';
+    alink.click();
+}
+
+export default downloadDotEnv;

frontend/components/utilities/secrets/downloadYaml.ts

@@ -0,0 +1,46 @@
+// import YAML from 'yaml';
+// import { YAMLSeq } from 'yaml/types';
+
+import { SecretDataProps } from "public/data/frequentInterfaces";
+
+// import { envMapping } from "../../../public/data/frequentConstants";
+// import checkOverrides from './checkOverrides';
+
+
+/**
+ * This function downloads the secrets as a .yml file
+ * @param {object} obj 
+ * @param {SecretDataProps[]} obj.data - secrets that we want to download
+ * @param {string} obj.env - used for naming the file
+ * @returns 
+ */
+const downloadYaml = async ({ data, env }: { data: SecretDataProps[]; env: string; }) => {
+  // if (!data) return;
+  // const doc = new YAML.Document();
+  // doc.contents = new YAMLSeq();
+  // const secrets = await checkOverrides({ data });
+  // secrets.forEach((secret) => {
+  //   const pair = YAML.createNode({ [secret.key]: secret.value });
+  //   pair.commentBefore = secret.comment
+  //     .split('\n')
+  //     .map((line) => (line ? ' '.concat(line) : ''))
+  //     .join('\n');
+  //   doc.add(pair);
+  // });
+
+  // const file = doc
+  //   .toString()
+  //   .split('\n')
+  //   .map((line) => (line.startsWith('-') ? line.replace('- ', '') : line))
+  //   .join('\n');
+
+  // const blob = new Blob([file]);
+  // const fileDownloadUrl = URL.createObjectURL(blob);
+  // const alink = document.createElement('a');
+  // alink.href = fileDownloadUrl;
+  // alink.download = envMapping[env] + '.yml';
+  // alink.click();
+  return;
+}
+
+export default downloadYaml;

frontend/components/utilities/secrets/encryptSecrets.ts

@@ -0,0 +1,115 @@
+import { SecretDataProps } from "public/data/frequentInterfaces";
+
+import getLatestFileKey from "~/pages/api/workspace/getLatestFileKey";
+
+const crypto = require("crypto");
+const {
+  decryptAssymmetric,
+  encryptSymmetric,
+} = require("../cryptography/crypto");
+const nacl = require("tweetnacl");
+nacl.util = require("tweetnacl-util");
+
+
+interface EncryptedSecretProps {
+  id: string;
+  createdAt: string;
+  environment: string;
+  secretCommentCiphertext: string;
+  secretCommentIV: string;
+  secretCommentTag: string;
+  secretKeyCiphertext: string;
+  secretKeyIV: string;
+  secretKeyTag: string;
+  secretValueCiphertext: string;
+  secretValueIV: string;
+  secretValueTag: string;
+  type: "personal" | "shared";
+}
+
+/**
+ * Encypt secrets before pushing the to the DB
+ * @param {object} obj 
+ * @param {object} obj.secretsToEncrypt - secrets that we want to encrypt
+ * @param {object} obj.workspaceId - the id of a project in which we are encrypting secrets
+ * @returns 
+ */
+const encryptSecrets = async ({ secretsToEncrypt, workspaceId, env }: { secretsToEncrypt: SecretDataProps[]; workspaceId: string; env: string; }) => {
+  let secrets;
+  try {
+    const sharedKey = await getLatestFileKey({ workspaceId });
+
+    const PRIVATE_KEY = localStorage.getItem("PRIVATE_KEY");
+
+    let randomBytes: string;
+    if (Object.keys(sharedKey).length > 0) {
+      // case: a (shared) key exists for the workspace
+      randomBytes = decryptAssymmetric({
+        ciphertext: sharedKey.latestKey.encryptedKey,
+        nonce: sharedKey.latestKey.nonce,
+        publicKey: sharedKey.latestKey.sender.publicKey,
+        privateKey: PRIVATE_KEY,
+      });
+    } else {
+      // case: a (shared) key does not exist for the workspace
+      randomBytes = crypto.randomBytes(16).toString("hex");
+    }
+    
+    secrets = secretsToEncrypt.map((secret) => {
+      // encrypt key
+      const {
+        ciphertext: secretKeyCiphertext,
+        iv: secretKeyIV,
+        tag: secretKeyTag,
+      } = encryptSymmetric({
+        plaintext: secret.key,
+        key: randomBytes,
+      });
+
+      // encrypt value
+      const {
+        ciphertext: secretValueCiphertext,
+        iv: secretValueIV,
+        tag: secretValueTag,
+      } = encryptSymmetric({
+        plaintext: secret.value,
+        key: randomBytes,
+      });
+
+      // encrypt comment
+      const {
+        ciphertext: secretCommentCiphertext,
+        iv: secretCommentIV,
+        tag: secretCommentTag,
+      } = encryptSymmetric({
+        plaintext: secret.comment ?? '',
+        key: randomBytes,
+      });
+
+      const result: EncryptedSecretProps = {
+        id: secret.id,
+        createdAt: '',
+        environment: env,
+        secretKeyCiphertext,
+        secretKeyIV,
+        secretKeyTag,
+        secretValueCiphertext,
+        secretValueIV,
+        secretValueTag,
+        secretCommentCiphertext,
+        secretCommentIV,
+        secretCommentTag,
+        type: (secret.valueOverride == undefined || secret?.value != secret?.valueOverride) ? 'shared' : 'personal',
+      };
+
+      return result;
+    });
+  } catch (error) {
+    console.log("Error while encrypting secrets");
+  }
+
+  return secrets;
+  
+}
+
+export default encryptSecrets;

frontend/components/utilities/secrets/getSecretsForProject.ts

@@ -1,7 +1,5 @@
 import getSecrets from '~/pages/api/files/GetSecrets';
-
-import { envMapping } from '../../../public/data/frequentConstants';
-import guidGenerator from '../randomId';
+import getLatestFileKey from '~/pages/api/workspace/getLatestFileKey';
 
 const {
   decryptAssymmetric,
@@ -10,6 +8,22 @@ const {
 const nacl = require('tweetnacl');
 nacl.util = require('tweetnacl-util');
 
+interface EncryptedSecretProps {
+  _id: string;
+  createdAt: string;
+  environment: string;
+  secretCommentCiphertext: string;
+  secretCommentIV: string;
+  secretCommentTag: string;
+  secretKeyCiphertext: string;
+  secretKeyIV: string;
+  secretKeyTag: string;
+  secretValueCiphertext: string;
+  secretValueIV: string;
+  secretValueTag: string;
+  type: "personal" | "shared";
+}
+
 interface SecretProps { 
   key: string; 
   value: string; 
@@ -18,107 +32,106 @@ interface SecretProps {
   id: string;
 }
 
-interface Props {
-  env: keyof typeof envMapping;
-  setFileState: any;
+interface FunctionProps {
+  env: string;
   setIsKeyAvailable: any;
   setData: any;
   workspaceId: string;
 }
 
+/**
+ * Gets the secrets for a certain project
+ * @param {object} obj
+ * @param {string} obj.env - environment for which we are getting secrets
+ * @param {boolean} obj.isKeyAvailable - if a person is able to create new key pairs
+ * @param {function} obj.setData - state function that manages the state of secrets in the dashboard
+ * @param {string} obj.workspaceId - id of a workspace for which we are getting secrets
+ */
 const getSecretsForProject = async ({
   env,
-  setFileState,
   setIsKeyAvailable,
   setData,
   workspaceId
-}: Props) => {
+}: FunctionProps) => {
   try {
-    let file;
+    let encryptedSecrets;
     try {
-      file = await getSecrets(workspaceId, envMapping[env]);
-
-      setFileState(file);
+      encryptedSecrets = await getSecrets(workspaceId, env);
     } catch (error) {
-      console.log('ERROR: Not able to access the latest file');
+      console.log('ERROR: Not able to access the latest version of secrets');
     }
+
+    const latestKey = await getLatestFileKey({ workspaceId })
     // 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);
+    setIsKeyAvailable(!latestKey ? encryptedSecrets.length == 0 : true);
 
     const PRIVATE_KEY = localStorage.getItem('PRIVATE_KEY');
 
-    const tempFileState: SecretProps[] = [];
-    if (file.key) {
+    const tempDecryptedSecrets: SecretProps[] = [];
+    if (latestKey) {
       // assymmetrically decrypt symmetric key with local private key
       const key = decryptAssymmetric({
-        ciphertext: file.key.encryptedKey,
-        nonce: file.key.nonce,
-        publicKey: file.key.sender.publicKey,
+        ciphertext: latestKey.latestKey.encryptedKey,
+        nonce: latestKey.latestKey.nonce,
+        publicKey: latestKey.latestKey.sender.publicKey,
         privateKey: PRIVATE_KEY
       });
 
-      file.secrets.map((secretPair: any) => {
-        // decrypt .env file with symmetric key
+      // decrypt secret keys, values, and comments
+      encryptedSecrets.map((secret: EncryptedSecretProps) => {
         const plainTextKey = decryptSymmetric({
-          ciphertext: secretPair.secretKey.ciphertext,
-          iv: secretPair.secretKey.iv,
-          tag: secretPair.secretKey.tag,
+          ciphertext: secret.secretKeyCiphertext,
+          iv: secret.secretKeyIV,
+          tag: secret.secretKeyTag,
           key
         });
 
         const plainTextValue = decryptSymmetric({
-          ciphertext: secretPair.secretValue.ciphertext,
-          iv: secretPair.secretValue.iv,
-          tag: secretPair.secretValue.tag,
+          ciphertext: secret.secretValueCiphertext,
+          iv: secret.secretValueIV,
+          tag: secret.secretValueTag,
           key
         });
 
         let plainTextComment;
-        if (secretPair.secretComment.ciphertext) {
+        if (secret.secretCommentCiphertext) {
           plainTextComment = decryptSymmetric({
-            ciphertext: secretPair.secretComment.ciphertext,
-            iv: secretPair.secretComment.iv,
-            tag: secretPair.secretComment.tag,
+            ciphertext: secret.secretCommentCiphertext,
+            iv: secret.secretCommentIV,
+            tag: secret.secretCommentTag,
             key
           });
         } else {
           plainTextComment = "";
         }
 
-        tempFileState.push({
-          id: secretPair._id,
+        tempDecryptedSecrets.push({
+          id: secret._id,
           key: plainTextKey,
           value: plainTextValue,
-          type: secretPair.type,
+          type: secret.type,
           comment: plainTextComment
         });
       });
     }
-    setFileState(tempFileState);
 
-    setData(
-      tempFileState.map((line, index) => {
-        return {
-          id: line['id'],
-          pos: index,
-          key: line['key'],
-          value: line['value'],
-          type: line['type'],
-          comment: line['comment']
-        };
-      })
-    );
+    const secretKeys = [...new Set(tempDecryptedSecrets.map(secret => secret.key))];
 
-    return tempFileState.map((line, index) => {
+    
+    const result = secretKeys.map((key, index) => {
       return {
-        id: line['id'],
+        id: tempDecryptedSecrets.filter(secret => secret.key == key && secret.type == 'shared')[0]?.id,
+        idOverride: tempDecryptedSecrets.filter(secret => secret.key == key && secret.type == 'personal')[0]?.id,
         pos: index,
-        key: line['key'],
-        value: line['value'],
-        type: line['type'],
-        comment: line['comment']
-      };
+        key: key,
+        value: tempDecryptedSecrets.filter(secret => secret.key == key && secret.type == 'shared')[0]?.value,
+        valueOverride: tempDecryptedSecrets.filter(secret => secret.key == key && secret.type == 'personal')[0]?.value,
+        comment: tempDecryptedSecrets.filter(secret => secret.key == key && secret.type == 'shared')[0]?.comment,
+      }
     });
+
+    setData(result);
+    return result;
   } catch (error) {
     console.log('Something went wrong during accessing or decripting secrets.');
   }

frontend/components/utilities/secrets/pushKeys.ts

@@ -1,126 +0,0 @@
-import uploadSecrets from "~/pages/api/files/UploadSecrets";
-import getLatestFileKey from "~/pages/api/workspace/getLatestFileKey";
-import getWorkspaceKeys from "~/pages/api/workspace/getWorkspaceKeys";
-
-import { envMapping } from "../../../public/data/frequentConstants";
-
-const crypto = require("crypto");
-const {
-  decryptAssymmetric,
-  encryptSymmetric,
-  encryptAssymmetric,
-} = require("../cryptography/crypto");
-const nacl = require("tweetnacl");
-nacl.util = require("tweetnacl-util");
-
-export interface IK {
-  publicKey: string;
-  userId: string;
-}
-
-/**
- * This function pushes the keys to the database after decrypting them end-to-end
- * @param {object} obj 
- * @param {object} obj.obj - object with all the key pairs
- * @param {object} obj.workspaceId - the id of a project to which a user is pushing
- * @param {object} obj.env - which environment a user is pushing to 
- */
-const pushKeys = async({ obj, workspaceId, env }: { obj: object; workspaceId: string; env: string; }) => {
-  const sharedKey = await getLatestFileKey({ workspaceId });
-
-  const PRIVATE_KEY = localStorage.getItem("PRIVATE_KEY");
-
-  let randomBytes: string;
-  if (Object.keys(sharedKey).length > 0) {
-    // case: a (shared) key exists for the workspace
-    randomBytes = decryptAssymmetric({
-      ciphertext: sharedKey.latestKey.encryptedKey,
-      nonce: sharedKey.latestKey.nonce,
-      publicKey: sharedKey.latestKey.sender.publicKey,
-      privateKey: PRIVATE_KEY,
-    });
-  } else {
-    // case: a (shared) key does not exist for the workspace
-    randomBytes = crypto.randomBytes(16).toString("hex");
-  }
-
-  const secrets = Object.keys(obj).map((key) => {
-    // encrypt key
-    const {
-      ciphertext: secretKeyCiphertext,
-      iv: secretKeyIV,
-      tag: secretKeyTag,
-    } = encryptSymmetric({
-      plaintext: key.slice(1),
-      key: randomBytes,
-    });
-
-    // encrypt value
-    const {
-      ciphertext: secretValueCiphertext,
-      iv: secretValueIV,
-      tag: secretValueTag,
-    } = encryptSymmetric({
-      plaintext: obj[key as keyof typeof obj][0],
-      key: randomBytes,
-    });
-
-    // 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 {
-      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,
-    };
-  });
-
-  // obtain public keys of all receivers (i.e. members in workspace)
-  const publicKeys = await getWorkspaceKeys({
-    workspaceId,
-  });
-
-  // assymmetrically encrypt key with each receiver public keys
-  const keys = publicKeys.map((k: IK) => {
-    const { ciphertext, nonce } = encryptAssymmetric({
-      plaintext: randomBytes,
-      publicKey: k.publicKey,
-      privateKey: PRIVATE_KEY,
-    });
-
-    return {
-      encryptedKey: ciphertext,
-      nonce,
-      userId: k.userId,
-    };
-  });
-
-  // send payload
-  await uploadSecrets({
-    workspaceId,
-    secrets,
-    keys,
-    environment: envMapping[env as keyof typeof envMapping],
-  });
-};
-
-export default pushKeys;

frontend/components/utilities/secrets/pushKeysIntegration.ts

@@ -1,79 +0,0 @@
-import publicKeyInfical from '~/pages/api/auth/publicKeyInfisical';
-import changeHerokuConfigVars from '~/pages/api/integrations/ChangeHerokuConfigVars';
-
-const crypto = require('crypto');
-const {
-  encryptSymmetric,
-  encryptAssymmetric
-} = require('../cryptography/crypto');
-const nacl = require('tweetnacl');
-nacl.util = require('tweetnacl-util');
-
-interface Props {
-  obj: Record<string, string>;
-  integrationId: string;
-}
-
-const pushKeysIntegration = async ({ obj, integrationId }: Props) => {
-  const PRIVATE_KEY = localStorage.getItem('PRIVATE_KEY');
-
-  const randomBytes = crypto.randomBytes(16).toString('hex');
-
-  const secrets = Object.keys(obj).map((key) => {
-    // encrypt key
-    const {
-      ciphertext: ciphertextKey,
-      iv: ivKey,
-      tag: tagKey
-    } = encryptSymmetric({
-      plaintext: key,
-      key: randomBytes
-    });
-
-    // encrypt value
-    const {
-      ciphertext: ciphertextValue,
-      iv: ivValue,
-      tag: tagValue
-    } = encryptSymmetric({
-      plaintext: obj[key],
-      key: randomBytes
-    });
-
-    const visibility = 'shared';
-
-    return {
-      ciphertextKey,
-      ivKey,
-      tagKey,
-      hashKey: crypto.createHash('sha256').update(key).digest('hex'),
-      ciphertextValue,
-      ivValue,
-      tagValue,
-      hashValue: crypto.createHash('sha256').update(obj[key]).digest('hex'),
-      type: visibility
-    };
-  });
-
-  // obtain public keys of all receivers (i.e. members in workspace)
-  const publicKeyInfisical = await publicKeyInfical();
-
-  const publicKey = (await publicKeyInfisical.json()).publicKey;
-
-  // assymmetrically encrypt key with each receiver public keys
-
-  const { ciphertext, nonce } = encryptAssymmetric({
-    plaintext: randomBytes,
-    publicKey,
-    privateKey: PRIVATE_KEY
-  });
-
-  const key = {
-    encryptedKey: ciphertext,
-    nonce
-  };
-
-  changeHerokuConfigVars({ integrationId, key, secrets });
-};
-
-export default pushKeysIntegration;

frontend/components/utilities/telemetry/Telemetry.js

@@ -29,7 +29,7 @@ class Capturer {
 
 }
 
-class Telemetry {
+export default class Telemetry {
   constructor() {
       if (!Telemetry.instance) {
         Telemetry.instance = new Capturer();
@@ -40,5 +40,3 @@ class Telemetry {
       return Telemetry.instance;
   }
 }
-
-module.exports = Telemetry;

frontend/const.js

@@ -20,4 +20,5 @@ export const publicPaths = [
 export const languageMap = {
   en: "English",
   ko: "한국어",
+  fr: "Français",
 };

frontend/ee/api/secrets/GetActionData.ts

@@ -20,7 +20,6 @@ const getActionData = async ({ actionId }: workspaceProps) => {
       }
     }
   ).then(async (res) => {
-    console.log(188, res)
     if (res && res.status == 200) {
       return (await res.json()).action;
     } else {

frontend/ee/api/secrets/PerformSecretRollback.ts

@@ -0,0 +1,30 @@
+import SecurityClient from '~/utilities/SecurityClient';
+
+/**
+ * This function performs a rollback of secrets in a certain project
+ * @param {object} obj
+ * @param {string} obj.workspaceId - id of the project for which we are rolling back data
+ * @param {number} obj.version - version to which we are rolling back
+ * @returns
+ */
+const performSecretRollback = async ({ workspaceId, version }: { workspaceId: string; version: number; }) => {
+  return SecurityClient.fetchCall(
+    '/api/v1/workspace/' + workspaceId + "/secret-snapshots/rollback", {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({
+        version
+      })
+    }
+  ).then(async (res) => {
+    if (res && res.status == 200) {
+      return (await res.json());
+    } else {
+      console.log('Failed to perform the secret rollback');
+    }
+  });
+};
+
+export default performSecretRollback;

frontend/ee/components/ActivityTable.tsx

@@ -1,5 +1,5 @@
-import React, { useEffect, useState } from 'react';
-import { useRouter } from 'next/router';
+import React, { useState } from 'react';
+import Image from 'next/image';
 import { useTranslation } from "next-i18next";
 import {
   faAngleDown,
@@ -69,23 +69,23 @@ const ActivityLogsRow = ({ row, toggleSidebar }: { row: logData, toggleSidebar:
       {payloadOpened &&
       <tr className='h-9 text-bunker-200 border-mineshaft-700 border-t text-sm'>
         <td></td>
-        <td>Timestamp</td>
+        <td>{String(t("common:timestamp"))}</td>
         <td>{row.createdAt}</td>
       </tr>}
-      {payloadOpened &&
-      row.payload?.map((action, index) => 
-      <tr key={index} className="h-9 text-bunker-200 border-mineshaft-700 border-t text-sm">
-        <td></td>
-        <td className="">{t("activity:event." + action.name)}</td>
-        <td className="text-primary-300 cursor-pointer hover:text-primary duration-200" onClick={() => toggleSidebar(action._id)}>
-          {action.secretVersions.length + (action.secretVersions.length != 1 ? " secrets" : " secret")}
-          <FontAwesomeIcon icon={faUpRightFromSquare} className="ml-2 mb-0.5 font-light w-3 h-3"/>
-        </td>
-      </tr>)}
+      {payloadOpened && row.payload?.map((action, index) => {
+        return action.secretVersions.length > 0 && <tr key={index} className="h-9 text-bunker-200 border-mineshaft-700 border-t text-sm">
+          <td></td>
+          <td className="">{t("activity:event." + action.name)}</td>
+          <td className="text-primary-300 cursor-pointer hover:text-primary duration-200" onClick={() => toggleSidebar(action._id)}>
+            {action.secretVersions.length + (action.secretVersions.length != 1 ? " secrets" : " secret")}
+            <FontAwesomeIcon icon={faUpRightFromSquare} className="ml-2 mb-0.5 font-light w-3 h-3"/>
+          </td>
+        </tr>
+      })}
       {payloadOpened &&
       <tr className='h-9 text-bunker-200 border-mineshaft-700 border-t text-sm'>
         <td></td>
-        <td>IP Address</td>
+        <td>{String(t("activity:ip-address"))}</td>
         <td>{row.ipAddress}</td>
       </tr>}
     </>
@@ -97,9 +97,12 @@ const ActivityLogsRow = ({ row, toggleSidebar }: { row: logData, toggleSidebar:
  * @param {object} obj
  * @param {logData} obj.data - data for user activity logs
  * @param {function} obj.toggleSidebar - function that opens or closes the sidebar
+ * @param {boolean} obj.isLoading - whether the log data has been loaded yet or not
  * @returns
  */
-const ActivityTable = ({ data, toggleSidebar }: { data: logData[], toggleSidebar: (value: string) => void; }) => {
+const ActivityTable = ({ data, toggleSidebar, isLoading }: { data: logData[], toggleSidebar: (value: string) => void; isLoading: boolean; }) => {
+  const { t } = useTranslation();
+
   return (
     <div className="w-full px-6 mt-8">
       <div className="table-container w-full bg-bunker rounded-md mb-6 border border-mineshaft-700 relative">
@@ -108,10 +111,10 @@ const ActivityTable = ({ data, toggleSidebar }: { data: logData[], toggleSidebar
           <thead className="text-bunker-300">
             <tr className='text-sm'>
               <th className="text-left pl-6 pt-2.5 pb-3"></th>
-              <th className="text-left font-semibold pt-2.5 pb-3">EVENT</th>
-              <th className="text-left font-semibold pl-6 pt-2.5 pb-3">USER</th>
-              <th className="text-left font-semibold pl-6 pt-2.5 pb-3">SOURCE</th>
-              <th className="text-left font-semibold pl-6 pt-2.5 pb-3">TIME</th>
+              <th className="text-left font-semibold pt-2.5 pb-3">{String(t("common:event")).toUpperCase()}</th>
+              <th className="text-left font-semibold pl-6 pt-2.5 pb-3">{String(t("common:user")).toUpperCase()}</th>
+              <th className="text-left font-semibold pl-6 pt-2.5 pb-3">{String(t("common:source")).toUpperCase()}</th>
+              <th className="text-left font-semibold pl-6 pt-2.5 pb-3">{String(t("common:time")).toUpperCase()}</th>
               <th></th>
             </tr>
           </thead>
@@ -122,6 +125,12 @@ const ActivityTable = ({ data, toggleSidebar }: { data: logData[], toggleSidebar
           </tbody>
         </table>
       </div>
+      {isLoading && <div className='w-full flex justify-center mb-8 mt-4'><Image
+        src="/images/loading/loading.gif"
+        height={60}
+        width={100}
+        alt="loading animation"
+      ></Image></div>}
     </div>
   );
 };

frontend/ee/components/PITRecoverySidebar.tsx

@@ -13,6 +13,15 @@ import { decryptAssymmetric, decryptSymmetric } from "~/components/utilities/cry
 import getLatestFileKey from "~/pages/api/workspace/getLatestFileKey";
 
 
+export interface SecretDataProps {
+  pos: number;
+  key: string;
+  value: string;
+  type: string;
+  id: string;
+  environment: string;
+}
+
 interface SideBarProps {
   toggleSidebar: (value: boolean) => void; 
   setSnapshotData: (value: any) => void;
@@ -43,8 +52,6 @@ interface EncrypetedSecretVersionListProps {
  * @param {function} obj.toggleSidebar - function that opens or closes the sidebar
  * @param {function} obj.setSnapshotData - state manager for snapshot data
  * @param {string} obj.chosenSnaphshot - the snapshot id which is currently selected
- * 
- * 
  * @returns the sidebar with the options for point-in-time recovery (commits)
  */
 const PITRecoverySidebar = ({ 
@@ -111,7 +118,21 @@ const PITRecoverySidebar = ({
       }
     })
 
-    setSnapshotData({ id: secretSnapshotData._id, createdAt: secretSnapshotData.createdAt, secretVersions: decryptedSecretVersions })
+
+    const secretKeys = [...new Set(decryptedSecretVersions.map((secret: SecretDataProps) => secret.key))];
+    
+    const result = secretKeys.map((key, index) => {
+      return {
+        id: decryptedSecretVersions.filter((secret: SecretDataProps) => secret.key == key && secret.type == 'shared')[0].id,
+        pos: index,
+        key: key,
+        environment: decryptedSecretVersions.filter((secret: SecretDataProps) => secret.key == key && secret.type == 'shared')[0].environment,
+        value: decryptedSecretVersions.filter((secret: SecretDataProps) => secret.key == key && secret.type == 'shared')[0]?.value,
+        valueOverride: decryptedSecretVersions.filter((secret: SecretDataProps) => secret.key == key && secret.type == 'personal')[0]?.value,
+      }
+    });
+
+    setSnapshotData({ id: secretSnapshotData._id, version: secretSnapshotData.version, createdAt: secretSnapshotData.createdAt, secretVersions: result, comment: '' })
   }
 
   return <div className={`absolute border-l border-mineshaft-500 ${isLoading ? "bg-bunker-800" : "bg-bunker"} fixed h-full w-96 top-14 right-0 z-40 shadow-xl flex flex-col justify-between`}>
@@ -125,31 +146,35 @@ const PITRecoverySidebar = ({
         ></Image>
       </div> 
     ) : (
-      <div className='h-min overflow-y-auto'>
+      <div className='h-min'>
         <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">{t("Point-in-time Recovery")}</p>
           <div className='p-1' onClick={() => toggleSidebar(false)}>
             <FontAwesomeIcon icon={faX} className='w-4 h-4 text-bunker-300 cursor-pointer'/>
           </div>
         </div>
-        <div className='flex flex-col px-2 py-2'>
-          {secretSnapshotsMetadata?.map((snapshot: SnaphotProps, id: number) => <div key={snapshot._id} className={`${chosenSnapshot == snapshot._id || (id == 0 && chosenSnapshot === "") ? "bg-primary text-black" : "bg-mineshaft-700"} py-3 px-4 mb-2 rounded-md flex flex-row justify-between items-center`}>
-            <div className="flex flex-row items-start">
-              <div className={`${chosenSnapshot == snapshot._id || (id == 0 && chosenSnapshot === "") ? "text-bunker-800" : "text-bunker-200"} text-sm mr-1.5`}>{timeSince(new Date(snapshot.createdAt))}</div>
-              <div className={`${chosenSnapshot == snapshot._id || (id == 0 && chosenSnapshot === "") ? "text-bunker-900" : "text-bunker-300"} text-sm `}>{" - " + snapshot.secretVersions.length + " Secrets"}</div>
-            </div>
+        <div className='flex flex-col px-2 py-2 overflow-y-auto h-[92vh]'>
+          {secretSnapshotsMetadata?.map((snapshot: SnaphotProps, id: number) => 
             <div 
-              onClick={() => exploreSnapshot({ snapshotId: snapshot._id })}
-              className={`${chosenSnapshot == snapshot._id || (id == 0 && chosenSnapshot === "") ? "text-bunker-800 pointer-events-none" : "text-bunker-200 hover:text-primary duration-200 cursor-pointer"} text-sm`}>
-              {id == 0 ? "Current Version" : chosenSnapshot == snapshot._id ? "Currently Viewing" : "Explore"}
+              key={snapshot._id} 
+              onClick={() => exploreSnapshot({ snapshotId: snapshot._id })} 
+              className={`${chosenSnapshot == snapshot._id || (id == 0 && chosenSnapshot === "") ? "bg-primary text-black pointer-events-none" : "bg-mineshaft-700 hover:bg-mineshaft-500 duration-200 cursor-pointer"} py-3 px-4 mb-2 rounded-md flex flex-row justify-between items-center`}
+            >
+              <div className="flex flex-row items-start">
+                <div className={`${chosenSnapshot == snapshot._id || (id == 0 && chosenSnapshot === "") ? "text-bunker-800" : "text-bunker-200"} text-sm mr-1.5`}>{timeSince(new Date(snapshot.createdAt))}</div>
+                <div className={`${chosenSnapshot == snapshot._id || (id == 0 && chosenSnapshot === "") ? "text-bunker-900" : "text-bunker-300"} text-sm `}>{" - " + snapshot.secretVersions.length + " Secrets"}</div>
+              </div>
+              <div 
+                className={`${chosenSnapshot == snapshot._id || (id == 0 && chosenSnapshot === "") ? "text-bunker-800 pointer-events-none" : "text-bunker-200 hover:text-primary duration-200 cursor-pointer"} text-sm`}>
+                {id == 0 ? "Current Version" : chosenSnapshot == snapshot._id ? "Currently Viewing" : "Explore"}
+              </div>
+            </div>)}
+          <div className='flex justify-center w-full mb-14'>
+            <div className='items-center w-40'>
+              <Button text="View More" textDisabled="End of History" active={secretSnapshotsMetadata.length % 15 == 0 ? true : false} onButtonPressed={loadMoreSnapshots} size="md" color="mineshaft"/>
             </div>
-          </div>)}
-        <div className='flex justify-center w-full mb-14'>
-          <div className='items-center w-40'>
-            <Button text="View More" textDisabled="End of History" active={secretSnapshotsMetadata.length % 15 == 0 ? true : false} onButtonPressed={loadMoreSnapshots} size="md" color="mineshaft"/>
           </div>
         </div>
-        </div>
       </div>
     )}
   </div>

frontend/ee/components/SecretVersionList.tsx

@@ -52,7 +52,7 @@ const SecretVersionList = ({ secretId }: { secretId: string; }) => {
           });
         }
 
-        const decryptedSecretVersions = encryptedSecretVersions.secretVersions.map((encryptedSecretVersion: EncrypetedSecretVersionListProps) => { 
+        const decryptedSecretVersions = encryptedSecretVersions?.secretVersions.map((encryptedSecretVersion: EncrypetedSecretVersionListProps) => { 
           return {
             createdAt: encryptedSecretVersion.createdAt,
             value: decryptSymmetric({
@@ -87,28 +87,33 @@ const SecretVersionList = ({ secretId }: { secretId: string; }) => {
         </div> 
       ) : (
         <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'
-                  })}
+          {secretVersions 
+          ? 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>
-                <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>
-            </div>
-          )}
+            )
+            : (
+              <div className='w-full h-full flex items-center justify-center text-bunker-400'>No version history yet.</div>
+            )
+          }
         </div>
       )}
     </div>

frontend/hooks/index.ts

@@ -0,0 +1 @@
+export { usePopUp } from './usePopUp';

frontend/hooks/usePopUp.tsx

@@ -0,0 +1,69 @@
+import { useCallback, useState } from 'react';
+
+interface usePopUpProps {
+  name: Readonly<string>;
+  isOpen: boolean;
+}
+
+/**
+ * to provide better intellisense
+ * checks which type of inputProps were given and converts them into key-names
+ * SIDENOTE: On inputting give it as const and not string with (as const)
+ */
+type usePopUpState<T extends Readonly<string[]> | usePopUpProps[]> = {
+  [P in T extends usePopUpProps[] ? T[number]['name'] : T[number]]: {
+    isOpen: boolean;
+    data?: unknown;
+  };
+};
+
+interface usePopUpReturn<T extends Readonly<string[]> | usePopUpProps[]> {
+  popUp: usePopUpState<T>;
+  handlePopUpOpen: (popUpName: keyof usePopUpState<T>, data?: unknown) => void;
+  handlePopUpClose: (popUpName: keyof usePopUpState<T>) => void;
+  handlePopUpToggle: (popUpName: keyof usePopUpState<T>) => void;
+}
+
+/**
+ * This hook is used to manage multiple popUps/modal/dialog in a page
+ * Provides api to open,close,toggle and also store temporary data for the popUp
+ * @param popUpNames: the names of popUp containers eg: ["popUp1","second"] or [{name:"popUp2",isOpen:bool}]
+ */
+export const usePopUp = <T extends Readonly<string[]> | usePopUpProps[]>(
+  popUpNames: T
+): usePopUpReturn<T> => {
+  const [popUp, setPopUp] = useState<usePopUpState<T>>(
+    Object.fromEntries(
+      popUpNames.map((popUpName) =>
+        typeof popUpName === 'string'
+          ? [popUpName, { isOpen: false }]
+          : [popUpName.name, { isOpen: popUpName.isOpen }]
+      ) // convert into an array of [[popUpName,state]] then into Object
+    ) as usePopUpState<T> // to override generic string return type of the function
+  );
+
+  const handlePopUpOpen = useCallback(
+    (popUpName: keyof usePopUpState<T>, data?: unknown) => {
+      setPopUp((popUp) => ({ ...popUp, [popUpName]: { isOpen: true, data } }));
+    },
+    []
+  );
+
+  const handlePopUpClose = useCallback((popUpName: keyof usePopUpState<T>) => {
+    setPopUp((popUp) => ({ ...popUp, [popUpName]: { isOpen: false } }));
+  }, []);
+
+  const handlePopUpToggle = useCallback((popUpName: keyof usePopUpState<T>) => {
+    setPopUp((popUp) => ({
+      ...popUp,
+      [popUpName]: { isOpen: !popUp[popUpName].isOpen },
+    }));
+  }, []);
+
+  return {
+    popUp,
+    handlePopUpOpen,
+    handlePopUpClose,
+    handlePopUpToggle,
+  };
+};

frontend/next-i18next.config.js

@@ -5,10 +5,10 @@
  */
 module.exports = {
   // https://www.i18next.com/overview/configuration-options#logging
-  debug: process.env.NODE_ENV === "development",
+  debug: false,
   i18n: {
     defaultLocale: "en",
-    locales: ["en", "ko", "pt-BR"],
+    locales: ["en", "ko", "fr", "pt-BR"],
   },
   fallbackLng: {
     default: ["en"],

frontend/package.json

@@ -19,7 +19,7 @@
     "@headlessui/react": "^1.6.6",
     "@reduxjs/toolkit": "^1.8.3",
     "@stripe/react-stripe-js": "^1.10.0",
-    "@stripe/stripe-js": "^1.35.0",
+    "@stripe/stripe-js": "^1.46.0",
     "add": "^2.0.6",
     "axios": "^0.27.2",
     "axios-auth-refresh": "^3.3.3",
@@ -53,7 +53,8 @@
     "tweetnacl": "^1.0.3",
     "tweetnacl-util": "^0.15.1",
     "uuid": "^8.3.2",
-    "uuidv4": "^6.2.13"
+    "uuidv4": "^6.2.13",
+    "yaml": "^2.2.0"
   },
   "devDependencies": {
     "@tailwindcss/typography": "^0.5.4",

frontend/pages/404.tsx

@@ -20,7 +20,7 @@ export default function Custom404() {
           src="/images/dragon-404.svg"
           height={554}
           width={942}
-          alt="google logo"
+          alt="infisical dragon - page not found"
         ></Image>
       </div>
     </div>

frontend/pages/activity/[id].tsx

@@ -51,6 +51,7 @@ export default function Activity() {
   const router = useRouter();
   const [eventChosen, setEventChosen] = useState('');
   const [logsData, setLogsData] = useState<logDataPoint[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
   const [currentOffset, setCurrentOffset] = useState(0);
   const currentLimit = 10;
   const [currentSidebarAction, toggleSidebar] = useState<string>()
@@ -60,6 +61,7 @@ export default function Activity() {
   useEffect(() => {
     setCurrentOffset(0);
     const getLogData = async () => {
+      setIsLoading(true);
       const tempLogsData = await getProjectLogs({ workspaceId: String(router.query.id), offset: 0, limit: currentLimit, userId: "", actionNames: eventChosen })
       setLogsData(tempLogsData.map((log: logData) => {
         return {
@@ -77,6 +79,7 @@ export default function Activity() {
           })
         }
       }))
+      setIsLoading(false);
     }
     getLogData();
   }, [eventChosen]);
@@ -84,6 +87,7 @@ export default function Activity() {
   // this use effect adds more data in case 'View More' button is clicked
   useEffect(() => {
     const getLogData = async () => {
+      setIsLoading(true);
       const tempLogsData = await getProjectLogs({ workspaceId: String(router.query.id), offset: currentOffset, limit: currentLimit, userId: "", actionNames: eventChosen })
       setLogsData(logsData.concat(tempLogsData.map((log: logData) => {
         return {
@@ -101,6 +105,7 @@ export default function Activity() {
           })
         }
       })))
+      setIsLoading(false);
     }
     getLogData();
   }, [currentLimit, currentOffset]);
@@ -115,10 +120,10 @@ export default function Activity() {
       {currentSidebarAction && <ActivitySideBar toggleSidebar={toggleSidebar} currentAction={currentSidebarAction} />}
       <div className="flex flex-col justify-between items-start mx-4 mt-6 mb-4 text-xl max-w-5xl px-2">
         <div className="flex flex-row justify-start items-center text-3xl">
-          <p className="font-semibold mr-4 text-bunker-100">Activity Logs</p>
+          <p className="font-semibold mr-4 text-bunker-100">{t("activity:title")}</p>
         </div>
         <p className="mr-4 text-base text-gray-400">
-          Event history for this Infisical project.
+          {t("activity:subtitle")}
         </p>
       </div>
       <div className="px-6 h-8 mt-2">
@@ -130,10 +135,11 @@ export default function Activity() {
       <ActivityTable
         data={logsData}
         toggleSidebar={toggleSidebar}
+        isLoading={isLoading}
       />
       <div className='flex justify-center w-full mb-6'>
         <div className='items-center w-60'>
-          <Button text="View More" textDisabled="End of History" active={logsData.length % 10 == 0 ? true : false} onButtonPressed={loadMoreLogs} size="md" color="mineshaft"/>
+          <Button text={String(t("common:view-more"))} textDisabled={String(t("common:end-of-history"))} active={logsData.length % 10 == 0 ? true : false} onButtonPressed={loadMoreLogs} size="md" color="mineshaft"/>
         </div>
       </div>
     </div>
@@ -142,4 +148,4 @@ export default function Activity() {
 
 Activity.requireAuth = true;
 
-export const getServerSideProps = getTranslatedServerSideProps(["activity"]);
+export const getServerSideProps = getTranslatedServerSideProps(["activity", "common"]);

frontend/pages/api/environments/createEnvironment.ts

@@ -0,0 +1,29 @@
+import SecurityClient from '~/utilities/SecurityClient';
+
+type NewEnvironmentInfo = {
+  environmentSlug: string;
+  environmentName: string;
+};
+
+/**
+ * This route deletes a specified workspace.
+ * @param {*} workspaceId
+ * @returns
+ */
+const createEnvironment = (workspaceId:string, newEnv: NewEnvironmentInfo) => {
+  return SecurityClient.fetchCall(`/api/v2/workspace/${workspaceId}/environments`, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify(newEnv)
+  }).then(async (res) => {
+    if (res && res.status == 200) {
+      return res;
+    } else {
+      console.log('Failed to create environment');
+    }
+  });
+};
+
+export default createEnvironment;

frontend/pages/api/environments/deleteEnvironment.ts

@@ -0,0 +1,26 @@
+import SecurityClient from '~/utilities/SecurityClient';
+/**
+ * This route deletes a specified env.
+ * @param {*} workspaceId
+ * @returns
+ */
+const deleteEnvironment = (workspaceId: string, environmentSlug: string) => {
+  return SecurityClient.fetchCall(
+    `/api/v2/workspace/${workspaceId}/environments`,
+    {
+      method: 'DELETE',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({ environmentSlug }),
+    }
+  ).then(async (res) => {
+    if (res && res.status == 200) {
+      return res;
+    } else {
+      console.log('Failed to delete environment');
+    }
+  });
+};
+
+export default deleteEnvironment;

frontend/pages/api/environments/updateEnvironment.ts

@@ -0,0 +1,33 @@
+import SecurityClient from '~/utilities/SecurityClient';
+
+type EnvironmentInfo = {
+  oldEnvironmentSlug: string;
+  environmentSlug: string;
+  environmentName: string;
+};
+
+/**
+ * This route updates a specified environment.
+ * @param {*} workspaceId
+ * @returns
+ */
+const updateEnvironment = (workspaceId: string, env: EnvironmentInfo) => {
+  return SecurityClient.fetchCall(
+    `/api/v2/workspace/${workspaceId}/environments`,
+    {
+      method: 'PUT',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(env),
+    }
+  ).then(async (res) => {
+    if (res && res.status == 200) {
+      return res;
+    } else {
+      console.log('Failed to update environment');
+    }
+  });
+};
+
+export default updateEnvironment;

frontend/pages/api/files/AddSecrets.ts

@@ -0,0 +1,48 @@
+import SecurityClient from '~/utilities/SecurityClient';
+
+interface EncryptedSecretProps {
+  id: string;
+  createdAt: string;
+  environment: string;
+  secretCommentCiphertext: string;
+  secretCommentIV: string;
+  secretCommentTag: string;
+  secretKeyCiphertext: string;
+  secretKeyIV: string;
+  secretKeyTag: string;
+  secretValueCiphertext: string;
+  secretValueIV: string;
+  secretValueTag: string;
+  type: "personal" | "shared";
+}
+
+/**
+ * This function adds secrets to a certain project
+ * @param {object} obj
+ * @param {EncryptedSecretProps} obj.secrets - the ids of secrets that we want to add
+ * @param {string} obj.env - the environment to which we are adding secrets
+ * @param {string} obj.workspaceId - the project to which we are adding secrets
+ * @returns
+ */
+const addSecrets = async ({ secrets, env, workspaceId }: { secrets: EncryptedSecretProps[]; env: string; workspaceId: string; }) => {
+  return SecurityClient.fetchCall('/api/v2/secrets', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({
+        environment: env,
+        workspaceId,
+        secrets
+      })
+    }
+  ).then(async (res) => {
+    if (res && res.status == 200) {
+      return await res.json();
+    } else {
+      console.log('Failed to add certain project secrets');
+    }
+  });
+};
+
+export default addSecrets;

frontend/pages/api/files/DeleteSecrets.ts

@@ -0,0 +1,27 @@
+import SecurityClient from '~/utilities/SecurityClient';
+
+/**
+ * This function deletes certain secrets from a certain project
+ * @param {string[]} secretIds - the ids of secrets that we want to be deleted
+ * @returns
+ */
+const deleteSecrets = async ({ secretIds }: { secretIds: string[] }) => {
+  return SecurityClient.fetchCall('/api/v2/secrets', {
+      method: 'DELETE',
+      headers: {
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({
+        secretIds
+      })
+    }
+  ).then(async (res) => {
+    if (res && res.status == 200) {
+      return await res.json();
+    } else {
+      console.log('Failed to delete certain project secrets');
+    }
+  });
+};
+
+export default deleteSecrets;

frontend/pages/api/files/GetSecrets.ts

@@ -1,19 +1,17 @@
 import SecurityClient from '~/utilities/SecurityClient';
 
 /**
- * This function fetches the encrypted secrets from the .env file
+ * This function fetches the encrypted secrets for a certain project
  * @param {string} workspaceId - project is for which a user is trying to get secrets
  * @param {string} env - environment of a project for which a user is trying ot get secrets
  * @returns
  */
 const getSecrets = async (workspaceId: string, env: string) => {
   return SecurityClient.fetchCall(
-    '/api/v1/secret/' +
-      workspaceId +
-      '?' +
+    '/api/v2/secrets?' +
       new URLSearchParams({
         environment: env,
-        channel: 'web'
+        workspaceId
       }),
     {
       method: 'GET',
@@ -23,7 +21,7 @@ const getSecrets = async (workspaceId: string, env: string) => {
     }
   ).then(async (res) => {
     if (res && res.status == 200) {
-      return await res.json();
+      return (await res.json()).secrets;
     } else {
       console.log('Failed to get project secrets');
     }

frontend/pages/api/files/UpdateSecrets.ts

@@ -0,0 +1,44 @@
+import SecurityClient from '~/utilities/SecurityClient';
+
+interface EncryptedSecretProps {
+  id: string;
+  createdAt: string;
+  environment: string;
+  secretCommentCiphertext: string;
+  secretCommentIV: string;
+  secretCommentTag: string;
+  secretKeyCiphertext: string;
+  secretKeyIV: string;
+  secretKeyTag: string;
+  secretValueCiphertext: string;
+  secretValueIV: string;
+  secretValueTag: string;
+  type: "personal" | "shared";
+}
+
+/**
+ * This function updates certain secrets in a certain project
+ * @param {object} obj
+ * @param {EncryptedSecretProps[]} obj.secrets - the ids of secrets that we want to update
+ * @returns
+ */
+const updateSecrets = async ({ secrets }: { secrets: EncryptedSecretProps[] }) => {
+  return SecurityClient.fetchCall('/api/v2/secrets', {
+      method: 'PATCH',
+      headers: {
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({
+        secrets
+      })
+    }
+  ).then(async (res) => {
+    if (res && res.status == 200) {
+      return await res.json();
+    } else {
+      console.log('Failed to update certain project secrets');
+    }
+  });
+};
+
+export default updateSecrets;

frontend/pages/api/workspace/getAWorkspace.ts

@@ -0,0 +1,31 @@
+import SecurityClient from '~/utilities/SecurityClient';
+
+interface Workspace {
+  __v: number;
+  _id: string;
+  name: string;
+  organization: string;
+  environments: Array<{ name: string; slug: string }>;
+}
+
+/**
+ * This route lets us get the workspaces of a certain user
+ * @returns
+ */
+const getAWorkspace = (workspaceID:string) => {
+  return SecurityClient.fetchCall(`/api/v1/workspace/${workspaceID}`, {
+    method: 'GET',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  }).then(async (res) => {
+    if (res?.status == 200) {
+      const data = (await res.json()) as unknown as { workspace: Workspace };
+      return data.workspace;
+    }
+
+    throw new Error('Failed to get workspace');
+  });
+};
+
+export default getAWorkspace;

frontend/pages/api/workspace/getWorkspaces.ts

@@ -5,6 +5,7 @@ interface Workspace {
   _id: string;
   name: string;
   organization: string;
+  environments: Array<{name:string, slug:string}>
 }
 
 /**

frontend/pages/email-not-verified.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import Head from 'next/head';
 
-export default function Activity() {
+export default function EmailNotFeriviedPage() {
   return (
     <div className="bg-bunker-800 md:h-screen flex flex-col justify-between">
       <Head>

frontend/pages/integrations/[id].js

@@ -24,6 +24,7 @@ import setBotActiveStatus from "../api/bot/setBotActiveStatus";
 import getIntegrationOptions from "../api/integrations/GetIntegrationOptions";
 import getWorkspaceAuthorizations from "../api/integrations/getWorkspaceAuthorizations";
 import getWorkspaceIntegrations from "../api/integrations/getWorkspaceIntegrations";
+import getAWorkspace from "../api/workspace/getAWorkspace";
 import getLatestFileKey from "../api/workspace/getLatestFileKey";
 const {
   decryptAssymmetric,
@@ -34,6 +35,7 @@ const crypto = require("crypto");
 export default function Integrations() {
   const [cloudIntegrationOptions, setCloudIntegrationOptions] = useState([]);
   const [integrationAuths, setIntegrationAuths] = useState([]);
+  const [environments,setEnvironments] = useState([])
   const [integrations, setIntegrations] = useState([]);
   const [bot, setBot] = useState(null);
   const [isActivateBotDialogOpen, setIsActivateBotDialogOpen] = useState(false);
@@ -41,11 +43,15 @@ export default function Integrations() {
   const [selectedIntegrationOption, setSelectedIntegrationOption] = useState(null); 
 
   const router = useRouter();
+  const workspaceId = router.query.id;
 
   const { t } = useTranslation();
 
   useEffect(async () => {
     try {
+      const workspace = await getAWorkspace(workspaceId);
+      setEnvironments(workspace.environments);
+
       // get cloud integration options
       setCloudIntegrationOptions(
         await getIntegrationOptions()
@@ -54,23 +60,19 @@ export default function Integrations() {
       // get project integration authorizations
       setIntegrationAuths(
         await getWorkspaceAuthorizations({
-          workspaceId: router.query.id,
+          workspaceId
         })
       );
 
       // get project integrations
       setIntegrations(
         await getWorkspaceIntegrations({
-          workspaceId: router.query.id,
+          workspaceId,
         })
       );
       
       // get project bot
-      setBot(
-        await getBot({
-          workspaceId: router.query.id
-        }
-      ));
+      setBot(await getBot({ workspaceId }));
       
     } catch (err) {
       console.log(err);
@@ -90,7 +92,7 @@ export default function Integrations() {
 
       if (bot) {
         // case: there is a bot
-        const key = await getLatestFileKey({ workspaceId: router.query.id });
+        const key = await getLatestFileKey({ workspaceId });
         const PRIVATE_KEY = localStorage.getItem('PRIVATE_KEY');
         
         const WORKSPACE_KEY = decryptAssymmetric({
@@ -132,9 +134,6 @@ export default function Integrations() {
    * @returns 
    */
   const handleIntegrationOption = async ({ integrationOption }) => {
-    
-    console.log('handleIntegrationOption', integrationOption);
-
     try {
       // generate CSRF token for OAuth2 code-token exchange integrations
       const state = crypto.randomBytes(16).toString("hex");
@@ -217,8 +216,8 @@ export default function Integrations() {
           handleBotActivate={handleBotActivate}
           handleIntegrationOption={handleIntegrationOption}
         /> */}
-        <IntegrationSection integrations={integrations} />
-        {cloudIntegrationOptions.length > 0 ? (
+        <IntegrationSection integrations={integrations} environments={environments} />
+        {(cloudIntegrationOptions.length > 0 && bot) ? (
           <CloudIntegrationSection 
             cloudIntegrationOptions={cloudIntegrationOptions}
             setSelectedIntegrationOption={setSelectedIntegrationOption}

frontend/pages/login.tsx

@@ -117,11 +117,15 @@ export default function Login() {
               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>
+              <Link href="/verify-email">
+                <button className="text-primary-700 hover:text-primary duration-200 font-normal text-sm underline-offset-4 ml-1.5">
+                  {t("login:forgot-password")}
+                </button>
+              </Link>
             </div>
           </div>
           {!isLoading && errorLogin && (
-            <Error text="Your email and/or password are wrong." />
+            <Error text={t("login:error-login") ?? ""} />
           )}
           <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">
@@ -160,7 +164,7 @@ export default function Login() {
           <ListBox
             selected={lang}
             onChange={setLanguage}
-            data={["en", "ko", "pt-BR"]}
+            data={["en", "ko", "fr", "pt-BR"]}
             isFull
             text={`${t("common:language")}: `}
           />

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

@@ -126,7 +126,7 @@ export default function PersonalSettings() {
                 <ListBox
                   selected={lang}
                   onChange={setLanguage}
-                  data={["en", "ko"]}
+                  data={["en", "ko", "fr"]}
                   width="full"
                   text={`${t("common:language")}: `}
                 />

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

@@ -1,306 +0,0 @@
-import { useEffect, useRef, useState } from "react";
-import Head from "next/head";
-import { useRouter } from "next/router";
-import { useTranslation } from "next-i18next";
-import { faCheck, faCopy, faPlus } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-
-import Button from "~/components/basic/buttons/Button";
-import AddServiceTokenDialog from "~/components/basic/dialog/AddServiceTokenDialog";
-import InputField from "~/components/basic/InputField";
-import ServiceTokenTable from "~/components/basic/table/ServiceTokenTable.tsx";
-import NavHeader from "~/components/navigation/NavHeader";
-import { getTranslatedServerSideProps } from "~/utilities/withTranslateProps";
-
-import getServiceTokens from "../../api/serviceToken/getServiceTokens";
-import deleteWorkspace from "../../api/workspace/deleteWorkspace";
-import getWorkspaces from "../../api/workspace/getWorkspaces";
-import renameWorkspace from "../../api/workspace/renameWorkspace";
-
-
-export default function SettingsBasic() {
-  const [buttonReady, setButtonReady] = useState(false);
-  const router = useRouter();
-  const [workspaceName, setWorkspaceName] = useState("");
-  const [serviceTokens, setServiceTokens] = useState([]);
-  const [workspaceToBeDeletedName, setWorkspaceToBeDeletedName] = useState("");
-  const [workspaceId, setWorkspaceId] = useState("");
-  const [isAddOpen, setIsAddOpen] = useState(false);
-  let [isAddServiceTokenDialogOpen, setIsAddServiceTokenDialogOpen] =
-    useState(false);
-  const [projectIdCopied, setProjectIdCopied] = useState(false);
-
-  const { t } = useTranslation();
-
-  /**
-   * This function copies the project id to the clipboard
-   */
-  function copyToClipboard() {
-    // const copyText = document.getElementById('myInput') as HTMLInputElement;
-    const copyText = document.getElementById('myInput')
-    
-    if (copyText) {
-      copyText.select();
-      copyText.setSelectionRange(0, 99999); // For mobile devices
-
-      navigator.clipboard.writeText(copyText.value);
-  
-      setProjectIdCopied(true);
-      setTimeout(() => setProjectIdCopied(false), 2000);
-    }
-  }
-
-  useEffect(async () => {
-    let userWorkspaces = await getWorkspaces();
-    userWorkspaces.map((userWorkspace) => {
-      if (userWorkspace._id == router.query.id) {
-        setWorkspaceName(userWorkspace.name);
-      }
-    });
-    let tempServiceTokens = await getServiceTokens({
-      workspaceId: router.query.id,
-    });
-    setServiceTokens(tempServiceTokens);
-  }, []);
-
-  const modifyWorkspaceName = (newName) => {
-    setButtonReady(true);
-    setWorkspaceName(newName);
-  };
-
-  const submitChanges = (newWorkspaceName) => {
-    renameWorkspace(router.query.id, newWorkspaceName);
-    setButtonReady(false);
-  };
-
-  useEffect(async () => {
-    setWorkspaceId(router.query.id);
-  }, []);
-
-  function closeAddModal() {
-    setIsAddOpen(false);
-  }
-
-  function openAddModal() {
-    setIsAddOpen(true);
-  }
-
-  const closeAddServiceTokenModal = () => {
-    setIsAddServiceTokenDialogOpen(false);
-  };
-
-  /**
-   * This function deleted a workspace.
-   * It first checks if there is more than one workspace aviable. Otherwise, it doesn't delete
-   * It then checks if the name of the workspace to be deleted is correct. Otherwise, it doesn't delete.
-   * It then deletes the workspace and forwards the user to another aviable workspace.
-   */
-  const executeDeletingWorkspace = async () => {
-    let userWorkspaces = await getWorkspaces();
-
-    if (userWorkspaces.length > 1) {
-      if (
-        userWorkspaces.filter(
-          (workspace) => workspace._id == router.query.id
-        )[0].name == workspaceToBeDeletedName
-      ) {
-        await deleteWorkspace(router.query.id);
-        let userWorkspaces = await getWorkspaces();
-        router.push("/dashboard/" + userWorkspaces[0]._id);
-      }
-    }
-  };
-
-  return (
-    <div className="bg-bunker-800 max-h-screen flex flex-col justify-between text-white">
-      <Head>
-        <title>
-          {t("common:head-title", { title: t("settings-project:title") })}
-        </title>
-        <link rel="icon" href="/infisical.ico" />
-      </Head>
-      <AddServiceTokenDialog
-        isOpen={isAddServiceTokenDialogOpen}
-        workspaceId={router.query.id}
-        closeModal={closeAddServiceTokenModal}
-        workspaceName={workspaceName}
-        serviceTokens={serviceTokens}
-        setServiceTokens={setServiceTokens}
-      />
-      <div className="flex flex-row mr-6 max-w-5xl">
-        <div className="w-full max-h-screen pb-2 overflow-y-auto">
-          <NavHeader
-            pageName={t("settings-project:title")}
-            isProjectRelated={true}
-          />
-          <div className="flex flex-row justify-between items-center ml-6 my-8 text-xl max-w-5xl">
-            <div className="flex flex-col justify-start items-start text-3xl">
-              <p className="font-semibold mr-4 text-gray-200">
-                {t("settings-project:title")}
-              </p>
-              <p className="font-normal mr-4 text-gray-400 text-base">
-                {t("settings-project:description")}
-              </p>
-            </div>
-          </div>
-          <div className="flex flex-col ml-6 text-mineshaft-50">
-            <div className="flex flex-col">
-              <div className="min-w-md mt-2 flex flex-col items-start">
-                <div className="bg-white/5 rounded-md px-6 pt-6 pb-4 flex flex-col items-start flex flex-col items-start w-full mb-6 pt-2">
-                  <p className="text-xl font-semibold mb-4 mt-2">
-                    {t("common:display-name")}
-                  </p>
-                  <div className="max-h-28 w-full max-w-md mr-auto">
-                    <InputField
-                      onChangeHandler={modifyWorkspaceName}
-                      type="varName"
-                      value={workspaceName}
-                      placeholder=""
-                      isRequired
-                    />
-                  </div>
-                  <div className="flex justify-start w-full">
-                    <div className={`flex justify-start max-w-sm mt-4 mb-2`}>
-                      <Button
-                        text={t("common:save-changes")}
-                        onButtonPressed={() => submitChanges(workspaceName)}
-                        color="mineshaft"
-                        size="md"
-                        active={buttonReady}
-                        iconDisabled={faCheck}
-                        textDisabled="Saved"
-                      />
-                    </div>
-                  </div>
-                </div>
-                <div className="bg-white/5 rounded-md px-6 pt-4 pb-2 flex flex-col items-start flex flex-col items-start w-full mb-6 mt-4">
-                  <p className="text-xl font-semibold self-start">
-                    {t("common:project-id")}
-                  </p>
-                  <p className="text-base text-gray-400 font-normal self-start mt-4">
-                    {t("settings-project:project-id-description")}
-                  </p>
-                  <p className="text-base text-gray-400 font-normal self-start">
-                    {t("settings-project:project-id-description2")}
-                    {/* eslint-disable-next-line react/jsx-no-target-blank */}
-                    <a
-                      href="https://infisical.com/docs/getting-started/introduction"
-                      target="_blank"
-                      rel="noopener"
-                      className="text-primary hover:opacity-80 duration-200"
-                    >
-                      {t("settings-project:docs")}
-                    </a>
-                  </p>
-                  <p className="mt-4 text-xs text-bunker-300">{t("settings-project:auto-generated")}</p>
-                  <div className="flex justify-end items-center bg-white/[0.07] text-base mt-2 mb-3 mr-2 rounded-md text-gray-400">
-                    <p className="mr-2 font-bold pl-4">{`${t(
-                      "common: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-bunker-800 rounded-md text-center text-gray-400 text-sm">
-                        {t("common:click-to-copy")}
-                      </span>
-                    </div>
-                  </div>
-                </div>
-                <div className="bg-white/5 rounded-md px-6 pt-4 flex flex-col items-start flex flex-col items-start w-full mt-4 mb-4 pt-2">
-                  <div className="flex flex-row justify-between w-full">
-                    <div className="flex flex-col w-full">
-                      <p className="text-xl font-semibold mb-3">
-                        {t("section-token:service-tokens")}
-                      </p>
-                      <p className="text-sm text-gray-400">
-                        {t("section-token:service-tokens-description")}
-                      </p>
-                      <p className="text-sm text-gray-400 mb-4">
-                        Please, make sure you are on the 
-                        <a 
-                          className="text-primary underline underline-offset-2 ml-1" 
-                          href="https://infisical.com/docs/cli/overview"
-                          target="_blank"
-                          rel="noreferrer"
-                        >
-                            latest version of CLI
-                        </a>.
-                      </p>
-                    </div>
-                    <div className="w-48 mt-2">
-                      <Button
-                        text={t("section-token:add-new")}
-                        onButtonPressed={() => {
-                          setIsAddServiceTokenDialogOpen(true);
-                        }}
-                        color="mineshaft"
-                        icon={faPlus}
-                        size="md"
-                      />
-                    </div>
-                  </div>
-                  <ServiceTokenTable
-                    data={serviceTokens}
-                    workspaceName={workspaceName}
-                    setServiceTokens={setServiceTokens}
-                  />
-                </div>
-              </div>
-            </div>
-            <div className="bg-white/5 rounded-md px-6 pt-4 pb-6 border-l border-red pl-6 flex flex-col items-start flex flex-col items-start w-full mb-6 mt-4 pb-4 pt-2">
-              <p className="text-xl font-bold text-red">
-                {t("settings-project:danger-zone")}
-              </p>
-              <p className="mt-2 text-md text-gray-400">
-                {t("settings-project:danger-zone-note")}
-              </p>
-              <div className="max-h-28 w-full max-w-md mr-auto mt-4">
-                <InputField
-                  label={t("settings-project:project-to-delete")}
-                  onChangeHandler={setWorkspaceToBeDeletedName}
-                  type="varName"
-                  value={workspaceToBeDeletedName}
-                  placeholder=""
-                  isRequired
-                />
-              </div>
-              <button
-                type="button"
-                className="max-w-md mt-6 w-full inline-flex justify-center rounded-md border border-transparent bg-gray-800 px-4 py-2.5 text-sm font-medium text-gray-400 hover:bg-red hover:text-white hover:font-semibold hover:text-semibold duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2"
-                onClick={executeDeletingWorkspace}
-              >
-                {t("settings-project:delete-project")}
-              </button>
-              <p className="mt-0.5 ml-1 text-xs text-gray-500">
-                {t("settings-project:delete-project-note")}
-              </p>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-SettingsBasic.requireAuth = true;
-
-export const getServerSideProps = getTranslatedServerSideProps([
-  "settings",
-  "settings-project",
-  "section-token",
-]);

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

@@ -0,0 +1,358 @@
+import { useEffect, useState } from 'react';
+import Head from 'next/head';
+import { useRouter } from 'next/router';
+import { useTranslation } from 'next-i18next';
+import { faCheck, faCopy, faPlus } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
+import Button from '~/components/basic/buttons/Button';
+import AddServiceTokenDialog from '~/components/basic/dialog/AddServiceTokenDialog';
+import InputField from '~/components/basic/InputField';
+import EnvironmentTable from '~/components/basic/table/EnvironmentsTable';
+import ServiceTokenTable from '~/components/basic/table/ServiceTokenTable';
+import NavHeader from '~/components/navigation/NavHeader';
+import deleteEnvironment from '~/pages/api/environments/deleteEnvironment';
+import updateEnvironment from '~/pages/api/environments/updateEnvironment';
+import { getTranslatedServerSideProps } from '~/utilities/withTranslateProps';
+
+import createEnvironment from '../../api/environments/createEnvironment';
+import getServiceTokens from '../../api/serviceToken/getServiceTokens';
+import deleteWorkspace from '../../api/workspace/deleteWorkspace';
+import getWorkspaces from '../../api/workspace/getWorkspaces';
+import renameWorkspace from '../../api/workspace/renameWorkspace';
+
+type EnvData = {
+  name: string;
+  slug: string;
+};
+
+export default function SettingsBasic() {
+  const [buttonReady, setButtonReady] = useState(false);
+  const router = useRouter();
+  const [workspaceName, setWorkspaceName] = useState('');
+  const [serviceTokens, setServiceTokens] = useState([]);
+  const [environments, setEnvironments] = useState<Array<EnvData>>([]);
+  const [workspaceToBeDeletedName, setWorkspaceToBeDeletedName] = useState('');
+  const [isAddOpen, setIsAddOpen] = useState(false);
+  const [isAddServiceTokenDialogOpen, setIsAddServiceTokenDialogOpen] =
+    useState(false);
+  const [projectIdCopied, setProjectIdCopied] = useState(false);
+  const workspaceId = router.query.id as string;
+
+  const { t } = useTranslation();
+
+  /**
+   * 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);
+    }
+  }
+
+  useEffect(() => {
+    const load = async () => {
+      const userWorkspaces = await getWorkspaces();
+      userWorkspaces.forEach((userWorkspace) => {
+        if (userWorkspace._id == workspaceId) {
+          setWorkspaceName(userWorkspace.name);
+          setEnvironments(userWorkspace.environments);
+        }
+      });
+      const tempServiceTokens = await getServiceTokens({
+        workspaceId,
+      });
+      setServiceTokens(tempServiceTokens);
+    };
+
+    load();
+  }, []);
+
+  const modifyWorkspaceName = (newName: string) => {
+    setButtonReady(true);
+    setWorkspaceName(newName);
+  };
+
+  const submitChanges = (newWorkspaceName: string) => {
+    renameWorkspace(workspaceId, newWorkspaceName);
+    setButtonReady(false);
+  };
+
+  const closeAddServiceTokenModal = () => {
+    setIsAddServiceTokenDialogOpen(false);
+  };
+
+  /**
+   * This function deleted a workspace.
+   * It first checks if there is more than one workspace aviable. Otherwise, it doesn't delete
+   * It then checks if the name of the workspace to be deleted is correct. Otherwise, it doesn't delete.
+   * It then deletes the workspace and forwards the user to another aviable workspace.
+   */
+  const executeDeletingWorkspace = async () => {
+    const userWorkspaces = await getWorkspaces();
+
+    if (userWorkspaces.length > 1) {
+      if (
+        userWorkspaces.filter(
+          (workspace) => workspace._id === workspaceId 
+        )[0].name == workspaceToBeDeletedName
+      ) {
+        await deleteWorkspace(workspaceId);
+        const userWorkspaces = await getWorkspaces();
+        router.push('/dashboard/' + userWorkspaces[0]._id);
+      }
+    }
+  };
+
+  const onCreateEnvironment = async ({ name, slug }: EnvData) => {
+    const res = await createEnvironment(workspaceId, {
+      environmentName: name,
+      environmentSlug: slug,
+    });
+    if (res) {
+      // TODO: on react-query migration do an api call to resync
+      setEnvironments((env) => [...env, { name, slug }]);
+    }
+  };
+
+  const onUpdateEnvironment = async (
+    oldSlug: string,
+    { name, slug }: EnvData
+  ) => {
+    const res = await updateEnvironment(workspaceId, {
+      oldEnvironmentSlug: oldSlug,
+      environmentName: name,
+      environmentSlug: slug,
+    });
+    // TODO: on react-query migration do an api call to resync
+    if (res) {
+      setEnvironments((env) =>
+        env.map((el) => (el.slug === oldSlug ? { name, slug } : el))
+      );
+    }
+  };
+
+  const onDeleteEnvironment = async (slugToBeDelete: string) => {
+    const res = await deleteEnvironment(workspaceId, slugToBeDelete);
+    // TODO: on react-query migration do an api call to resync
+    if (res) {
+      setEnvironments((env) =>
+        env.filter(({ slug }) => slug !== slugToBeDelete)
+      );
+    }
+  };
+
+  return (
+    <div className='bg-bunker-800 max-h-screen flex flex-col justify-between text-white'>
+      <Head>
+        <title>
+          {t('common:head-title', { title: t('settings-project:title') })}
+        </title>
+        <link rel='icon' href='/infisical.ico' />
+      </Head>
+      <AddServiceTokenDialog
+        isOpen={isAddServiceTokenDialogOpen}
+        workspaceId={workspaceId}
+        environments={environments}
+        closeModal={closeAddServiceTokenModal}
+        workspaceName={workspaceName}
+        serviceTokens={serviceTokens}
+        setServiceTokens={setServiceTokens}
+      />
+      <div className='flex flex-row mr-6 max-w-5xl'>
+        <div className='w-full max-h-screen pb-2 overflow-y-auto'>
+          <NavHeader
+            pageName={t('settings-project:title')}
+            isProjectRelated={true}
+          />
+          <div className='flex flex-row justify-between items-center ml-6 my-8 text-xl max-w-5xl'>
+            <div className='flex flex-col justify-start items-start text-3xl'>
+              <p className='font-semibold mr-4 text-gray-200'>
+                {t('settings-project:title')}
+              </p>
+              <p className='font-normal mr-4 text-gray-400 text-base'>
+                {t('settings-project:description')}
+              </p>
+            </div>
+          </div>
+          <div className='flex flex-col ml-6 text-mineshaft-50'>
+            <div className='flex flex-col'>
+              <div className='min-w-md mt-2 flex flex-col items-start'>
+                <div className='bg-white/5 rounded-md px-6 pt-6 pb-4 flex flex-col items-start flex flex-col items-start w-full mb-6 pt-2'>
+                  <p className='text-xl font-semibold mb-4 mt-2'>
+                    {t('common:display-name')}
+                  </p>
+                  <div className='max-h-28 w-full max-w-md mr-auto'>
+                    <InputField
+                      label=''
+                      onChangeHandler={modifyWorkspaceName}
+                      type='varName'
+                      value={workspaceName}
+                      placeholder=''
+                      isRequired
+                    />
+                  </div>
+                  <div className='flex justify-start w-full'>
+                    <div className={`flex justify-start max-w-sm mt-4 mb-2`}>
+                      <Button
+                        text={t('common:save-changes') as string}
+                        onButtonPressed={() => submitChanges(workspaceName)}
+                        color='mineshaft'
+                        size='md'
+                        active={buttonReady}
+                        iconDisabled={faCheck}
+                        textDisabled='Saved'
+                      />
+                    </div>
+                  </div>
+                </div>
+                <div className='bg-white/5 rounded-md px-6 pt-4 pb-2 flex flex-col items-start w-full mb-6 mt-4'>
+                  <p className='text-xl font-semibold self-start'>
+                    {t('common:project-id')}
+                  </p>
+                  <p className='text-base text-gray-400 font-normal self-start mt-4'>
+                    {t('settings-project:project-id-description')}
+                  </p>
+                  <p className='text-base text-gray-400 font-normal self-start'>
+                    {t('settings-project:project-id-description2')}
+                    {/* eslint-disable-next-line react/jsx-no-target-blank */}
+                    <a
+                      href='https://infisical.com/docs/getting-started/introduction'
+                      target='_blank'
+                      rel='noopener'
+                      className='text-primary hover:opacity-80 duration-200'
+                    >
+                      {t('settings-project:docs')}
+                    </a>
+                  </p>
+                  <p className='mt-4 text-xs text-bunker-300'>
+                    {t('settings-project:auto-generated')}
+                  </p>
+                  <div className='flex justify-end items-center bg-white/[0.07] text-base mt-2 mb-3 mr-2 rounded-md text-gray-400'>
+                    <p className='mr-2 font-bold pl-4'>{`${t(
+                      'common: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-bunker-800 rounded-md text-center text-gray-400 text-sm'>
+                        {t('common:click-to-copy')}
+                      </span>
+                    </div>
+                  </div>
+                </div>
+                <div className='bg-white/5 rounded-md px-6 pt-6 flex flex-col items-start w-full mt-4 mb-4'>
+                  <EnvironmentTable
+                    data={environments}
+                    onCreateEnv={onCreateEnvironment}
+                    onUpdateEnv={onUpdateEnvironment}
+                    onDeleteEnv={onDeleteEnvironment}
+                  />
+                </div>
+                <div className='bg-white/5 rounded-md px-6 flex flex-col items-start w-full mt-4 mb-4 pt-2'>
+                  <div className='flex flex-row justify-between w-full'>
+                    <div className='flex flex-col w-full'>
+                      <p className='text-xl font-semibold mb-3'>
+                        {t('section-token:service-tokens')}
+                      </p>
+                      <p className='text-sm text-gray-400'>
+                        {t('section-token:service-tokens-description')}
+                      </p>
+                      <p className='text-sm text-gray-400 mb-4'>
+                        Please, make sure you are on the
+                        <a
+                          className='text-primary underline underline-offset-2 ml-1'
+                          href='https://infisical.com/docs/cli/overview'
+                          target='_blank'
+                          rel='noreferrer'
+                        >
+                          latest version of CLI
+                        </a>
+                        .
+                      </p>
+                    </div>
+                    <div className='w-48 mt-2'>
+                      <Button
+                        text={t('section-token:add-new') as string}
+                        onButtonPressed={() => {
+                          setIsAddServiceTokenDialogOpen(true);
+                        }}
+                        color='mineshaft'
+                        icon={faPlus}
+                        size='md'
+                      />
+                    </div>
+                  </div>
+                  <ServiceTokenTable
+                    data={serviceTokens}
+                    workspaceName={workspaceName}
+                    setServiceTokens={setServiceTokens as any}
+                  />
+                </div>
+              </div>
+            </div>
+            <div className='bg-white/5 rounded-md px-6 border-l border-red pl-6 flex flex-col items-start w-full mb-6 mt-4 pb-4 pt-2'>
+              <p className='text-xl font-bold text-red'>
+                {t('settings-project:danger-zone')}
+              </p>
+              <p className='mt-2 text-md text-gray-400'>
+                {t('settings-project:danger-zone-note')}
+              </p>
+              <div className='max-h-28 w-full max-w-md mr-auto mt-4'>
+                <InputField
+                  label={t('settings-project:project-to-delete')}
+                  onChangeHandler={setWorkspaceToBeDeletedName}
+                  type='varName'
+                  value={workspaceToBeDeletedName}
+                  placeholder=''
+                  isRequired
+                />
+              </div>
+              <button
+                type='button'
+                className='max-w-md mt-6 w-full inline-flex justify-center rounded-md border border-transparent bg-gray-800 px-4 py-2.5 text-sm font-medium text-gray-400 hover:bg-red hover:text-white hover:font-semibold hover:text-semibold duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2'
+                onClick={executeDeletingWorkspace}
+              >
+                {t('settings-project:delete-project')}
+              </button>
+              <p className='mt-0.5 ml-1 text-xs text-gray-500'>
+                {t('settings-project:delete-project-note')}
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+SettingsBasic.requireAuth = true;
+
+export const getServerSideProps = getTranslatedServerSideProps([
+  'settings',
+  'settings-project',
+  'section-token',
+]);

frontend/pages/signup.tsx

@@ -1,67 +1,24 @@
 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 { useTranslation } from "next-i18next";
-import { faCheck, faWarning, faX } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
-import Button from "~/components/basic/buttons/Button";
-import Error from "~/components/basic/Error";
-import InputField from "~/components/basic/InputField";
-import Aes256Gcm from "~/components/utilities/cryptography/aes-256-gcm";
-import issueBackupKey from "~/components/utilities/cryptography/issueBackupKey";
+import CodeInputStep from "~/components/signup/CodeInputStep";
+import DownloadBackupPDF from "~/components/signup/DonwloadBackupPDFStep";
+import EnterEmailStep from "~/components/signup/EnterEmailStep";
+import TeamInviteStep from "~/components/signup/TeamInviteStep";
+import UserInfoStep from "~/components/signup/UserInfoStep";
 import { getTranslatedStaticProps } from "~/components/utilities/withTranslateProps";
-import attemptLogin from "~/utilities/attemptLogin";
-import passwordCheck from "~/utilities/checks/PasswordCheck";
 
 import checkEmailVerificationCode from "./api/auth/CheckEmailVerificationCode";
-import completeAccountInformationSignup from "./api/auth/CompleteAccountInformationSignup";
-import sendVerificationEmail from "./api/auth/SendVerificationEmail";
 import getWorkspaces from "./api/workspace/getWorkspaces";
 
-// const ReactCodeInput = dynamic(import("react-code-input"));
-const nacl = require("tweetnacl");
-const jsrp = require("jsrp");
-nacl.util = require("tweetnacl-util");
-const client = new jsrp.client();
-
-// The stye for the verification code input
-const props = {
-  inputStyle: {
-    fontFamily: "monospace",
-    margin: "4px",
-    MozAppearance: "textfield",
-    width: "55px",
-    borderRadius: "5px",
-    fontSize: "24px",
-    height: "55px",
-    paddingLeft: "7",
-    backgroundColor: "#0d1117",
-    color: "white",
-    border: "1px solid gray",
-    textAlign: "center",
-  },
-} as const;
-const propsPhone = {
-  inputStyle: {
-    fontFamily: "monospace",
-    margin: "4px",
-    MozAppearance: "textfield",
-    width: "40px",
-    borderRadius: "5px",
-    fontSize: "24px",
-    height: "40px",
-    paddingLeft: "7",
-    backgroundColor: "#0d1117",
-    color: "white",
-    border: "1px solid gray",
-    textAlign: "center",
-  },
-} as const;
 
+/**
+ * @returns the signup page
+ */
 export default function SignUp() {
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
@@ -69,25 +26,9 @@ export default function SignUp() {
   const [lastName, setLastName] = useState("");
   const [code, setCode] = useState("");
   const [codeError, setCodeError] = useState(false);
-  const [firstNameError, setFirstNameError] = useState(false);
-  const [lastNameError, setLastNameError] = useState(false);
-  const [passwordErrorLength, setPasswordErrorLength] = useState(false);
-  const [passwordErrorNumber, setPasswordErrorNumber] = useState(false);
-  const [passwordErrorUpperCase, setPasswordErrorUpperCase] = useState(false);
-  const [passwordErrorLowerCase, setPasswordErrorLowerCase] = useState(false);
-  const [passwordErrorSpecialChar, setPasswordErrorSpecialChar] =
-    useState(false);
-  const [emailError, setEmailError] = useState(false);
-  const [emailErrorMessage, setEmailErrorMessage] = useState("");
   const [step, setStep] = useState(1);
   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);
 
   const { t } = useTranslation();
 
@@ -104,458 +45,28 @@ export default function SignUp() {
   }, []);
 
   /**
-   * Goes to the following step (out of 3) of the signup process.
+   * Goes to the following step (out of 5) of the signup process.
    * Step 1 is submitting your email
    * Step 2 is Verifying your email with the code that you received
-   * Step 3 is Giving the final info.
+   * Step 3 is asking the final info.
+   * Step 4 is downloading a backup pdf
+   * Step 5 is inviting users
    */
   const incrementStep = async () => {
-    if (step == 1) {
-      setStep(2);
+    if (step == 1 || step == 3 || step == 4) {
+      setStep(step + 1);
     } else if (step == 2) {
       // Checking if the code matches the email.
       const response = await checkEmailVerificationCode({ email, code });
-      if (response.status === 200 || code == "111222") {
+      if (response.status === 200) {
         setVerificationToken((await response.json()).token);
         setStep(3);
       } else {
         setCodeError(true);
       }
-    } else if (step == 3) {
-      setStep(4);
     }
   };
 
-  /**
-   * Verifies if the entered email "looks" correct
-   */
-  const emailCheck = () => {
-    let emailCheckBool = false;
-    if (!email) {
-      setEmailError(true);
-      setEmailErrorMessage("Please enter your email.");
-      emailCheckBool = true;
-    } else if (
-      !email.includes("@") ||
-      !email.includes(".") ||
-      !/[a-z]/.test(email)
-    ) {
-      setEmailError(true);
-      setEmailErrorMessage("Please enter a valid email.");
-      emailCheckBool = true;
-    } else {
-      setEmailError(false);
-    }
-
-    // If everything is correct, go to the next step
-    if (!emailCheckBool) {
-      sendVerificationEmail(email);
-      incrementStep();
-    }
-  };
-
-  // 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;
-    if (!firstName) {
-      setFirstNameError(true);
-      errorCheck = true;
-    } else {
-      setFirstNameError(false);
-    }
-    if (!lastName) {
-      setLastNameError(true);
-      errorCheck = true;
-    } else {
-      setLastNameError(false);
-    }
-    errorCheck = passwordCheck({
-      password,
-      setPasswordErrorLength,
-      setPasswordErrorNumber,
-      setPasswordErrorLowerCase,
-      currentErrorCheck: errorCheck,
-    });
-
-    if (!errorCheck) {
-      // Generate a random pair of a public and a private key
-      const pair = nacl.box.keyPair();
-      const secretKeyUint8Array = pair.secretKey;
-      const publicKeyUint8Array = pair.publicKey;
-      const PRIVATE_KEY = nacl.util.encodeBase64(secretKeyUint8Array);
-      const PUBLIC_KEY = nacl.util.encodeBase64(publicKeyUint8Array);
-
-      const { ciphertext, iv, tag } = Aes256Gcm.encrypt({
-        text: PRIVATE_KEY,
-        secret: password
-          .slice(0, 32)
-          .padStart(
-            32 + (password.slice(0, 32).length - new Blob([password]).size),
-            "0"
-          ),
-      }) as { ciphertext: string; iv: string; tag: string };
-
-      localStorage.setItem("PRIVATE_KEY", PRIVATE_KEY);
-
-      client.init(
-        {
-          username: email,
-          password: password,
-        },
-        async () => {
-          client.createVerifier(
-            async (err: any, result: { salt: string; verifier: string }) => {
-              const response = await completeAccountInformationSignup({
-                email,
-                firstName,
-                lastName,
-                organizationName: firstName + "'s organization",
-                publicKey: PUBLIC_KEY,
-                ciphertext,
-                iv,
-                tag,
-                salt: result.salt,
-                verifier: result.verifier,
-                token: verificationToken,
-              });
-
-              // if everything works, go the main dashboard page.
-              if (response.status === 200) {
-                // response = await response.json();
-
-                localStorage.setItem("publicKey", PUBLIC_KEY);
-                localStorage.setItem("encryptedPrivateKey", ciphertext);
-                localStorage.setItem("iv", iv);
-                localStorage.setItem("tag", tag);
-
-                try {
-                  await attemptLogin(
-                    email,
-                    password,
-                    setErrorLogin,
-                    router,
-                    true,
-                    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>
-      <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">
-            {t("signup:step1-privacy")}
-          </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">
-              {t("signup:already-have-account")}
-            </u>
-          </button>
-        </Link>
-      </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{" "}
-      </p>
-      <p className="text-l flex justify-center font-semibold my-2 text-gray-400">
-        {email}{" "}
-      </p>
-      <div className="hidden md:block">
-        <ReactCodeInput
-          name=""
-          inputMode="tel"
-          type="text"
-          fields={6}
-          onChange={setCode}
-          {...props}
-          className="mt-6 mb-2"
-        />
-      </div>
-      <div className="block md:hidden">
-        <ReactCodeInput
-          name=""
-          inputMode="tel"
-          type="text"
-          fields={6}
-          onChange={setCode}
-          {...propsPhone}
-          className="mt-2 mb-6"
-        />
-      </div>
-      {codeError && <Error text={t("signup:step2-code-error")} />}
-      <div className="flex max-w-max min-w-28 flex-col items-center justify-center md:p-2 max-h-24 mx-auto text-lg px-4 mt-4 mb-2">
-        <Button
-          text={t("signup: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">
-        <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">
-          {t("signup:step2-spam-alert")}
-        </p>
-      </div>
-    </div>
-  );
-
-  // Step 3 of the signup process (enter the rest of the impformation)
-  const step3 = (
-    <div className="bg-bunker w-max mx-auto h-7/12 py-10 px-8 rounded-xl drop-shadow-xl mb-36 md:mb-16">
-      <p className="text-4xl font-bold flex justify-center mb-6 text-gray-400 mx-8 md:mx-16 text-transparent bg-clip-text bg-gradient-to-br from-sky-400 to-primary">
-        {t("signup:step3-message")}
-      </p>
-      <div className="relative z-0 flex items-center justify-end w-full md:p-2 rounded-lg max-h-24">
-        <InputField
-          label={t("common:first-name")}
-          onChangeHandler={setFirstName}
-          type="name"
-          value={firstName}
-          isRequired
-          errorText={
-            t("common:validate-required", {
-              name: t("common:first-name"),
-            }) as string
-          }
-          error={firstNameError}
-          autoComplete="given-name"
-        />
-      </div>
-      <div className="mt-2 flex items-center justify-center w-full md:p-2 rounded-lg max-h-24">
-        <InputField
-          label={t("common:last-name")}
-          onChangeHandler={setLastName}
-          type="name"
-          value={lastName}
-          isRequired
-          errorText={
-            t("common:validate-required", {
-              name: t("common:last-name"),
-            }) as string
-          }
-          error={lastNameError}
-          autoComplete="family-name"
-        />
-      </div>
-      <div className="mt-2 flex flex-col items-center justify-center w-full md:p-2 rounded-lg max-h-60">
-        <InputField
-          label={t("section-password:password")}
-          onChangeHandler={(password: string) => {
-            setPassword(password);
-            passwordCheck({
-              password,
-              setPasswordErrorLength,
-              setPasswordErrorNumber,
-              setPasswordErrorLowerCase,
-              currentErrorCheck: false,
-            });
-          }}
-          type="password"
-          value={password}
-          isRequired
-          error={
-            passwordErrorLength && passwordErrorNumber && passwordErrorLowerCase
-          }
-          autoComplete="new-password"
-          id="new-password"
-        />
-        {passwordErrorLength ||
-        passwordErrorLowerCase ||
-        passwordErrorNumber ? (
-          <div className="w-full mt-4 bg-white/5 px-2 flex flex-col items-start py-2 rounded-md">
-            <div className={`text-gray-400 text-sm mb-1`}>
-              {t("section-password:validate-base")}
-            </div>
-            <div className="flex flex-row justify-start items-center ml-1">
-              {passwordErrorLength ? (
-                <FontAwesomeIcon
-                  icon={faX}
-                  className="text-md text-red mr-2.5"
-                />
-              ) : (
-                <FontAwesomeIcon
-                  icon={faCheck}
-                  className="text-md text-primary mr-2"
-                />
-              )}
-              <div
-                className={`${
-                  passwordErrorLength ? "text-gray-400" : "text-gray-600"
-                } text-sm`}
-              >
-                {t("section-password:validate-length")}
-              </div>
-            </div>
-            <div className="flex flex-row justify-start items-center ml-1">
-              {passwordErrorLowerCase ? (
-                <FontAwesomeIcon
-                  icon={faX}
-                  className="text-md text-red mr-2.5"
-                />
-              ) : (
-                <FontAwesomeIcon
-                  icon={faCheck}
-                  className="text-md text-primary mr-2"
-                />
-              )}
-              <div
-                className={`${
-                  passwordErrorLowerCase ? "text-gray-400" : "text-gray-600"
-                } text-sm`}
-              >
-                {t("section-password:validate-case")}
-              </div>
-            </div>
-            <div className="flex flex-row justify-start items-center ml-1">
-              {passwordErrorNumber ? (
-                <FontAwesomeIcon
-                  icon={faX}
-                  className="text-md text-red mr-2.5"
-                />
-              ) : (
-                <FontAwesomeIcon
-                  icon={faCheck}
-                  className="text-md text-primary mr-2"
-                />
-              )}
-              <div
-                className={`${
-                  passwordErrorNumber ? "text-gray-400" : "text-gray-600"
-                } text-sm`}
-              >
-                {t("section-password:validate-number")}
-              </div>
-            </div>
-          </div>
-        ) : (
-          <div className="py-2"></div>
-        )}
-      </div>
-      <div className="flex flex-col items-center justify-center md:p-2 max-h-48 max-w-max mx-auto text-lg px-2 py-3">
-        <Button
-          text={t("signup:signup") ?? ""}
-          loading={isLoading}
-          onButtonPressed={signupErrorCheck}
-          size="lg"
-        />
-      </div>
-    </div>
-  );
-
-  // Step 4 of the sign up process (download the emergency kit pdf)
-  const step4 = (
-    <div className="bg-bunker flex flex-col items-center w-full max-w-xs md:max-w-lg mx-auto h-7/12 py-8 px-4 md:px-6 mx-1 mb-36 md:mb-16 rounded-xl drop-shadow-xl">
-      <p className="text-4xl text-center font-semibold flex justify-center text-transparent bg-clip-text bg-gradient-to-br from-sky-400 to-primary">
-        {t("signup:step4-message")}
-      </p>
-      <div className="flex flex-col items-center justify-center w-full mt-4 md:mt-8 max-w-md text-gray-400 text-md rounded-md px-2">
-        <div>{t("signup:step4-description1")}</div>
-        <div className="mt-3">{t("signup:step4-description2")}</div>
-      </div>
-      <div className="w-full p-2 flex flex-row items-center bg-white/10 text-gray-400 rounded-md max-w-xs md:max-w-md mx-auto mt-4">
-        <FontAwesomeIcon icon={faWarning} className="ml-2 mr-4 text-4xl" />
-        {t("signup:step4-description3")}
-      </div>
-      <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 () => {
-            await issueBackupKey({
-              email,
-              password,
-              personalName: firstName + " " + lastName,
-              setBackupKeyError,
-              setBackupKeyIssued,
-            });
-            const userWorkspaces = await getWorkspaces();
-            const userWorkspace = userWorkspaces[0]._id;
-            router.push("/home/" + userWorkspace);
-          }}
-          size="lg"
-        />
-        {/* <div
-					className="text-l mt-4 text-lg text-gray-400 hover:text-gray-300 duration-200 bg-white/5 px-8 hover:bg-white/10 py-3 rounded-md cursor-pointer"
-					onClick={() => {
-						if (localStorage.getItem("projectData.id")) {
-							router.push("/dashboard/" + localStorage.getItem("projectData.id"));
-						} else {
-							router.push("/noprojects")
-						}
-					}}
-				>
-					Later
-				</div> */}
-      </div>
-    </div>
-  );
-
   return (
     <div className="bg-bunker-800 h-screen flex flex-col items-center justify-center">
       <Head>
@@ -580,7 +91,11 @@ export default function SignUp() {
           </div>
         </Link>
         <form onSubmit={(e) => e.preventDefault()}>
-          {step == 1 ? step1 : step == 2 ? step2 : step == 3 ? step3 : step4}
+          {step == 1 ? <EnterEmailStep email={email} setEmail={setEmail} incrementStep={incrementStep} />
+          : step == 2 ? <CodeInputStep email={email} incrementStep={incrementStep} setCode={setCode} codeError={codeError}/> 
+          : step == 3 ? <UserInfoStep verificationToken={verificationToken} incrementStep={incrementStep} email={email} password={password} setPassword={setPassword} firstName={firstName} setFirstName={setFirstName} lastName={lastName} setLastName={setLastName}/> 
+          : step == 4 ? <DownloadBackupPDF incrementStep={incrementStep} email={email} password={password} name={firstName + " " + lastName} /> 
+          : <TeamInviteStep/>}
         </form>
       </div>
     </div>

frontend/pages/signupinvite.js

@@ -349,7 +349,7 @@ export default function SignupInvite() {
               setBackupKeyError,
               setBackupKeyIssued
             });
-            router.push('/dashboard/');
+            router.push('/noprojects/');
           }}
           size="lg"
         />

frontend/pages/users/[id].tsx

@@ -20,6 +20,22 @@ import addUserToWorkspace from '../api/workspace/addUserToWorkspace';
 import getWorkspaceUsers from '../api/workspace/getWorkspaceUsers';
 import uploadKeys from '../api/workspace/uploadKeys';
 
+interface UserProps {
+  firstName: string; 
+  lastName: string;
+  email: string;
+  _id: string;
+  publicKey: string;
+}
+
+interface MembershipProps {
+  user: UserProps
+  inviteEmail: string;
+  role: string;
+  status: string;
+  _id: string;
+}
+
 // #TODO: Update all the workspaceIds
 const crypto = require('crypto');
 const {
@@ -30,10 +46,10 @@ const nacl = require('tweetnacl');
 nacl.util = require('tweetnacl-util');
 
 export default function Users() {
-  let [isAddOpen, setIsAddOpen] = useState(false);
+  const [isAddOpen, setIsAddOpen] = useState(false);
   // let [isDeleteOpen, setIsDeleteOpen] = useState(false);
   // let [userIdToBeDeleted, setUserIdToBeDeleted] = useState(false);
-  let [email, setEmail] = useState('');
+  const [email, setEmail] = useState('');
   const [personalEmail, setPersonalEmail] = useState('');
   const [searchUsers, setSearchUsers] = useState('');
 
@@ -59,7 +75,7 @@ export default function Users() {
   // }
 
   async function submitAddModal() {
-    let result = await addUserToWorkspace(email, router.query.id);
+    const result = await addUserToWorkspace(email, String(router.query.id));
     if (result?.invitee && result?.latestKey) {
       const PRIVATE_KEY = localStorage.getItem('PRIVATE_KEY');
 
@@ -77,7 +93,7 @@ export default function Users() {
         privateKey: PRIVATE_KEY
       });
 
-      uploadKeys(router.query.id, result.invitee._id, ciphertext, nonce);
+      uploadKeys(String(router.query.id), result.invitee._id, ciphertext, nonce);
     }
     setEmail('');
     setIsAddOpen(false);
@@ -88,41 +104,45 @@ export default function Users() {
     setIsAddOpen(true);
   }
 
-  const [userList, setUserList] = useState();
+  const [userList, setUserList] = useState([]);
   const [orgUserList, setOrgUserList] = useState([]);
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  useEffect(async () => {
-    const user = await getUser();
-    setPersonalEmail(user.email);
 
-    workspaceId = router.query.id;
-    let workspaceUsers = await getWorkspaceUsers({
-      workspaceId
-    });
-    const tempUserList = workspaceUsers.map((user) => ({
-      key: guidGenerator(),
-      firstName: user.user?.firstName,
-      lastName: user.user?.lastName,
-      email: user.user?.email == null ? user.inviteEmail : user.user?.email,
-      role: user?.role,
-      status: user?.status,
-      userId: user.user?._id,
-      membershipId: user._id,
-      publicKey: user.user?.publicKey
-    }));
-    setUserList(tempUserList);
-    const orgUsers = await getOrganizationUsers({
-      orgId: localStorage.getItem('orgData.id')
-    });
-    setOrgUserList(orgUsers);
-    setEmail(
-      orgUsers
-        ?.filter((user) => user.status == 'accepted')
-        .map((user) => user.user.email)
-        .filter(
-          (email) => !tempUserList?.map((user1) => user1.email).includes(email)
-        )[0]
-    );
+  useEffect(() => {
+    (async () => {
+      const user = await getUser();
+      setPersonalEmail(user.email);
+
+      // This part quiries the current users of a project
+      const workspaceUsers = await getWorkspaceUsers({
+        workspaceId: String(router.query.id)
+      });
+      const tempUserList = workspaceUsers.map((membership: MembershipProps) => ({
+        key: guidGenerator(),
+        firstName: membership.user?.firstName,
+        lastName: membership.user?.lastName,
+        email: membership.user?.email == null ? membership.inviteEmail : membership.user?.email,
+        role: membership?.role,
+        status: membership?.status,
+        userId: membership.user?._id,
+        membershipId: membership._id,
+        publicKey: membership.user?.publicKey
+      }));
+      setUserList(tempUserList);
+
+      // This is needed to know wha users from an org (if any), we are able to add to a certain project
+      const orgUsers = await getOrganizationUsers({
+        orgId: String(localStorage.getItem('orgData.id'))
+      });
+      setOrgUserList(orgUsers);
+      setEmail(
+        orgUsers
+          ?.filter((membership: MembershipProps) => membership.status == 'accepted')
+          .map((membership: MembershipProps) => membership.user.email)
+          .filter(
+            (email: string) => !tempUserList?.map((user1: UserProps) => user1.email).includes(email)
+          )[0]
+      );
+    })();
   }, []);
 
   return userList ? (
@@ -151,17 +171,17 @@ export default function Users() {
         submitModal={submitAddModal}
         email={email}
         data={orgUserList
-          ?.filter((user) => user.status == 'accepted')
-          .map((user) => user.user.email)
+          ?.filter((membership: MembershipProps) => membership.status == 'accepted')
+          .map((membership: MembershipProps) => membership.user.email)
           .filter(
-            (email) => !userList?.map((user1) => user1.email).includes(email)
+            (email) => !userList?.map((user1: UserProps) => user1.email).includes(email)
           )}
         workspaceId={workspaceId}
         setEmail={setEmail}
       />
       {/* <DeleteUserDialog isOpen={isDeleteOpen} closeModal={closeDeleteModal} submitModal={deleteMembership} userIdToBeDeleted={userIdToBeDeleted}/> */}
-      <div className="px-2 pb-1 w-full flex flex-row items-start max-w-5xl">
-        <div className="h-10 w-full bg-white/5 mt-2 flex items-center rounded-md flex flex-row items-center ml-4">
+      <div className="px-6 pb-1 w-full flex flex-row items-start min-w-6xl max-w-6xl">
+        <div className="h-10 w-full bg-white/5 mt-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}
@@ -170,12 +190,12 @@ export default function Users() {
             className="pl-2 text-gray-400 rounded-r-md bg-white/5 w-full h-full outline-none"
             value={searchUsers}
             onChange={(e) => setSearchUsers(e.target.value)}
-            placeholder={t("section-members:search-members")}
+            placeholder={String(t("section-members:search-members"))}
           />
         </div>
-        <div className="mt-2 ml-2 min-w-max flex flex-row items-start justify-start mr-4">
+        <div className="mt-2 ml-2 min-w-max flex flex-row items-start justify-start">
           <Button
-            text={t("section-members:add-member")}
+            text={String(t("section-members:add-member"))}
             onButtonPressed={openAddModal}
             color="mineshaft"
             size="md"
@@ -183,7 +203,7 @@ export default function Users() {
           />
         </div>
       </div>
-      <div className="overflow-y-auto max-w-5xl mx-6">
+      <div className="block overflow-y-auto min-w-6xl max-w-6xl px-6">
         <UserTable
           userData={userList}
           changeData={setUserList}
@@ -194,7 +214,6 @@ export default function Users() {
           // onClick={openDeleteModal}
           // deleteUser={deleteMembership}
           // setUserIdToBeDeleted={setUserIdToBeDeleted}
-          className="w-full mx-6"
         />
       </div>
     </div>

frontend/public/data/frequentInterfaces.ts

@@ -0,0 +1,8 @@
+export interface SecretDataProps {
+  pos: number;
+  key: string;
+  value: string;
+  valueOverride: string | undefined;
+  id: string;
+  comment: string;
+}

frontend/public/locales/en/activity.json

@@ -1,8 +1,11 @@
 {
+  "title": "Activity Logs",
+  "subtitle": "Event history for this Infisical project.",
   "event": {
     "readSecrets": "Secrets Viewed",
     "updateSecrets": "Secrets Updated",
     "addSecrets": "Secrets Added",
     "deleteSecrets": "Secrets Deleted"
-  }
+  },
+  "ip-address": "IP Address"
 }

frontend/public/locales/en/common.json

@@ -13,8 +13,8 @@
   "project-id": "Project ID",
   "save-changes": "Save Changes",
   "saved": "Saved",
-  "drop-zone": "Drag and drop your .env file here.",
-  "drop-zone-keys": "Drag and drop your .env file here to add more keys.",
+  "drop-zone": "Drag and drop a .env or .yml file here.",
+  "drop-zone-keys": "Drag and drop a .env or .yml file here to add more keys.",
   "role": "Role",
   "role_admin": "admin",
   "display-name": "Display Name",
@@ -22,5 +22,13 @@
   "expired-in": "Expires in",
   "language": "Language",
   "search": "Search...",
-  "note": "Note"
+  "note": "Note",
+  "view-more": "View More",
+  "end-of-history": "End of History",
+  "select-event": "Select an event",
+  "event": "Event",
+  "user": "User",
+  "source": "Source", 
+  "time": "Time", 
+  "timestamp": "Timestamp"
 }

frontend/public/locales/en/dashboard.json

@@ -10,6 +10,7 @@
   "shared-description": "Shared keys are visible to your whole team",
   "make-shared": "Make Shared",
   "make-personal": "Make Personal",
+  "add-secret": "Add a new secret",
   "check-docs": {
     "button": "Check Docs",
     "title": "Good job!",
@@ -25,6 +26,11 @@
     "comments": "Comments & Notes",
     "personal-explanation": "This secret is personal. It is not shared with any of your teammates.",
     "generate-random-hex": "Generate Random Hex",
-    "digits": "digits"
+    "digits": "digits",
+    "delete-key-dialog": {
+      "title": "Delete Key",
+      "confirm-delete-message": "Are you sure you want to delete this secret? This cannot be undone."
+    }
   }
+
 }

frontend/public/locales/en/integrations.json

@@ -4,7 +4,7 @@
   "no-integrations1": "You don't have any integrations set up yet. When you do, they will appear here.",
   "no-integrations2": "To start, click on any of the options below. It takes 5 clicks to set up.",
   "available": "Platform & Cloud Integrations",
-  "available-text1": "Click on the itegration you want to connect. This will let your environment variables flow automatically into selected third-party services.",
+  "available-text1": "Click on the integration you want to connect. This will let your environment variables flow automatically into selected third-party services.",
   "available-text2": "Note: during an integration with Heroku, for security reasons, it is impossible to maintain end-to-end encryption. In theory, this lets Infisical decrypt yor environment variables. In practice, we can assure you that this will never be done, and it allows us to protect your secrets from bad actors online. The core Infisical service will always stay end-to-end encrypted. With any questions, reach out support@infisical.com.",
   "cloud-integrations": "Cloud Integrations",
   "framework-integrations": "Framework Integrations",

frontend/public/locales/en/login.json

@@ -4,5 +4,7 @@
   "og-description": "Infisical a simple end-to-end encrypted platform that enables teams to sync and manage their .env files.",
   "login": "Log In",
   "need-account": "Need an Infisical account?",
-  "create-account": "Create an account"
+  "create-account": "Create an account",
+  "forgot-password": "Forgot your password?",
+  "error-login": "Wrong credentials."
 }

frontend/public/locales/en/settings-members.json

@@ -1,4 +1,4 @@
 {
   "title": "Project Members",
-  "description": "This pages shows the members of the selected project."
+  "description": "This page shows the members of the selected project."
 }

frontend/public/locales/en/signup.json

@@ -1,7 +1,7 @@
 {
   "title": "Sign Up",
   "og-title": "Replace .env files with 1 line of code. Sign Up for Infisical in 3 minutes.",
-  "og-description": "Infisical a simple end-to-end encrypted platform that enables teams to sync and manage API-keys and environemntal variables.  Works with Node.js, Next.js, Gatsby, Nest.js...",
+  "og-description": "Infisical a simple end-to-end encrypted platform that enables teams to sync and manage API-keys and environemntal variables. Works with Node.js, Next.js, Gatsby, Nest.js...",
   "signup": "Sign Up",
   "already-have-account": "Have an account? Log in",
   "forgot-password": "Forgot your password?",
@@ -9,13 +9,20 @@
   "step1-start": "Let's get started",
   "step1-privacy": "By creating an account, you agree to our Terms and have read and acknowledged the Privacy Policy.",
   "step1-submit": "Get Started",
-  "step2-message": "<wrapper>We've sent a verification email to</wrapper><email>{{email}}</email>",
+  "step2-message": "We've sent a verification email to",
   "step2-code-error": "Oops. Your code is wrong. Please try again.",
+  "step2-resend-alert": "Don't see the email?",
+  "step2-resend-submit": "Resend",
+  "step2-resend-progress": "Resending...",
   "step2-spam-alert": "Make sure to check your spam inbox.",
   "step3-message": "Almost there!",
   "step4-message": "Save your Emergency Kit",
   "step4-description1": "If you get locked out of your account, your Emergency Kit is the only way to sign in.",
   "step4-description2": "We recommend you download it and keep it somewhere safe.",
   "step4-description3": "It contains your Secret Key which we cannot access or recover for you if you lose it.",
-  "step4-download": "Download PDF"
+  "step4-download": "Download PDF",
+  "step5-send-invites": "Send Invites",
+  "step5-invite-team": "Invite your team",
+  "step5-subtitle": "Infisical is meant to be used with your teammates. Invite them to test it out.",
+  "step5-skip": "Skip"
 }

frontend/public/locales/fr/activity.json

@@ -0,0 +1,11 @@
+{
+  "title": "Journaux d'activité",
+  "subtitle": "Historique des événements pour ce projet Infisical.",
+  "event": {
+    "readSecrets": "Secrets Visualisés",
+    "updateSecrets": "Secrets Mis à jour",
+    "addSecrets": "Secrets Ajoutés",
+    "deleteSecrets": "Secrets Supprimés"
+  },
+  "ip-address": "Adresse IP"
+}

frontend/public/locales/fr/billing.json

@@ -0,0 +1,28 @@
+{
+  "title": "Utilisation et Facturation",
+  "description": "Voir et gérer l'abonnement de votre organisation ici",
+  "subscription": "Abonnement",
+  "starter": {
+    "name": "Starter",
+    "price-explanation": "jusqu'à 5 membres de l'équipe",
+    "text": "Gérez n'importe quel projet jusqu'à 5 membres gratuitement!",
+    "subtext": "$5 par membre / mois par la suite."
+  },
+  "professional": {
+    "name": "Professionnel",
+    "price-explanation": "/membre/mois",
+    "subtext": "Comprend des projets et des membres illimités.",
+    "text": "Suivez la gestion clé à mesure que vous grandissez."
+  },
+  "enterprise": {
+    "name": "Entreprise",
+    "text": "Suivez la gestion clé à mesure que vous grandissez."
+  },
+  "current-usage": "Utilisation actuelle",
+  "free": "Gratuit",
+  "downgrade": "Rétrograder",
+  "upgrade": "Améliorer",
+  "learn-more": "En savoir plus",
+  "custom-pricing": "Prix personnalisés",
+  "schedule-demo": "Planifier une démo"
+}

frontend/public/locales/fr/common.json

@@ -0,0 +1,34 @@
+{
+  "head-title": "{{title}} | Infiscal",
+  "error_project-already-exists": "Un projet avec ce nom existe déjà.",
+  "no-mobile": " Pour utiliser Infisical, veuillez vous connecter avec un appareil avec des dimensions plus grandes. ",
+  "email": "Email",
+  "password": "Mot de passe",
+  "first-name": "Prénom",
+  "last-name": "Nom",
+  "logout": "Déconnexion",
+  "validate-required": "Veuillez saisir votre {{name}}",
+  "maintenance-alert": "Nous rencontrons des difficultés techniques mineures. Nous travaillons sur leurs résolution dès maintenant. Revenez dans quelques minutes.",
+  "click-to-copy": "Cliquez pour copiez",
+  "project-id": "Identifiant du Projet",
+  "save-changes": "Sauvegarder les modifications",
+  "saved": "Enregistrée",
+  "drop-zone": "Glissez et déposez un fichier .env ou .yml ici.",
+  "drop-zone-keys": "Glissez et déposez un fichier .env ou .yml ici pour ajouter plus de clés.",
+  "role": "Rôle",
+  "role_admin": "administrateur",
+  "display-name": "Nom d'affichage",
+  "environment": "Environnement",
+  "expired-in": "Expire dans",
+  "language": "Langue",
+  "search": "Recherche...",
+  "note": "Note",
+  "view-more": "Voir plus",
+  "end-of-history": "Fin de l'historique",
+  "select-event": "Sélectionnez un événement",
+  "event": "Événement",
+  "user": "Utilisateur",
+  "source": "Source", 
+  "time": "Heure", 
+  "timestamp": "Horodatage"
+}

frontend/public/locales/fr/dashboard.json

@@ -0,0 +1,36 @@
+{
+  "title": "Secrets",
+  "og-title": "Gérez vos fichiers .env rapidement",
+  "og-description": "Infisical une plate-forme simple et chiffré de bout en bout qui permet aux équipes de synchroniser et de gérer leurs fichiers .env.",
+  "search-keys": "Recherche les clefs...",
+  "add-key": "Ajouter une clef",
+  "personal": "Personnel",
+  "personal-description": "Les clés personnelles ne sont visibles que pour vous",
+  "shared": "Partagé",
+  "shared-description": "Les clés partagées sont visibles à toute votre équipe",
+  "make-shared": "Rendre Partagé",
+  "make-personal": "Rendre Personnel",
+  "add-secret": "Ajouter un nouveau secret",
+  "check-docs": {
+    "button": "Vérifier la documentation",
+    "title": "Bon travail!",
+    "line1": "Félicitations pour avoir ajouté plus de secrets.",
+    "line2": "Voici comment les connecter à votre base de code."
+  },
+  "sidebar": {
+    "secret": "Secret",
+    "key": "Clef",
+    "value": "Valeur",
+    "override": "Remplacer la valeur avec une valeur personnelle",
+    "version-history": "Historique des versions",
+    "comments": "Commentaires & Notes",
+    "personal-explanation": "Ce secret est personnel. Il n'est partagé avec aucun de vos coéquipiers.",
+    "generate-random-hex": "Générer un Hex aléatoire",
+    "digits": "chiffres",
+    "delete-key-dialog": {
+      "title": "Supprimer la clef",
+      "confirm-delete-message": "Êtes-vous sûr de vouloir supprimer ce secret? Cela ne peut pas être annulé."
+    }
+  }
+
+}

frontend/public/locales/fr/integrations.json

@@ -0,0 +1,16 @@
+{
+  "title": "Intégrations de Projet",
+  "description": "Gérez vos intégrations d'Infisical avec des services tiers.",
+  "no-integrations1": "Vous n'avez pas encore d'intégration. Quand vous en aurez, elles apparaîtront ici.",
+  "no-integrations2": "Pour commencer, cliquez sur l'une des options ci-dessous. La configuration se fait en 5 clics.",
+  "available": "Intégrations de plate-forme et cloud",
+  "available-text1": "Cliquez sur l'intégration que vous souhaitez connecter. Cela permettra à vos variables d'environnement de circuler automatiquement dans les services tiers sélectionnés.",
+  "available-text2": "Remarque: Lors d'une intégration avec Heroku, pour des raisons de sécurité, il est impossible de maintenir le chiffrage de bout en bout. En théorie, cela permet à Infisical de déchiffrer les variables d'environnement. En pratique, nous pouvons vous assurer que cela ne sera jamais fait, et cela nous permet de protéger vos secrets des mauvais acteurs en ligne. Le service Infisical de base restera toujours chiffré de bout en bout. Pour toutes vos intérogations, contactez support@infisical.com.",
+  "cloud-integrations": "Intégrations Cloud",
+  "framework-integrations": "Intégrations Framework",
+  "click-to-start": "Cliquez sur une intégration pour commencer à synchroniser les secrets avec elle.",
+  "click-to-setup": "Cliquez sur un framework pour obtenir les instructions de configuration.",
+  "grant-access-to-secrets": "Accordez un accès Infisical à vos secrets",
+  "why-infisical-needs-access": "La plupart des intégrations cloud nécessitent qu'Infisical puisse déchiffrer vos secrets afin qu'ils puissent être transmis.",
+  "grant-access-button": "Autoriser l'accès"
+}

frontend/public/locales/fr/login.json

@@ -0,0 +1,10 @@
+{
+  "title": "Connexion",
+  "og-title": "Connectez-vous à Infisical",
+  "og-description": "Infisical, une plate-forme simple et chiffré de bout en bout permettant aux équipes de synchroniser et de gérer leurs fichiers .env.",
+  "login": "Se connecter",
+  "need-account": "Besoin d'un compte Infisical?",
+  "create-account": "Créer un compte",
+  "forgot-password": "Mot de passe oublié?",
+  "error-login": "Mauvais identifiants."
+}

frontend/public/locales/fr/nav.json

@@ -0,0 +1,22 @@
+{
+  "support": {
+    "slack": "[NEW] Rejoignez le forum Slack",
+    "docs": "Lire les documentations",
+    "issue": "Ouvrir une issue Github",
+    "email": "Envoyez-nous un email"
+  },
+  "user": {
+    "signed-in-as": "CONNECTÉ EN TANT QUE",
+    "current-organization": "ORGANISATION ACTUELLE",
+    "usage-billing": "Utilisation & Facturation",
+    "invite": "Inviter des membres",
+    "other-organizations": "AUTRE ORGANISATION"
+  },
+  "menu": {
+    "project": "PROJET",
+    "secrets": "Secrets",
+    "members": "Membres",
+    "integrations": "Intégrations",
+    "project-settings": "Paramètres du Projet"
+  }
+}

frontend/public/locales/fr/section-incident.json

@@ -0,0 +1,11 @@
+{
+  "incident-contacts": "Contacts Incidents",
+  "incident-contacts-description": "Ces contacts seront informés dans le cas improbable d'un incident grave.",
+  "no-incident-contacts": "Aucun contact incident trouvé.",
+  "add-contact": "Ajouter un contact",
+  "add-dialog": {
+    "title": "Ajouter un contact incident",
+    "description": "Ce contact sera informé dans le cas improbable d'un incident grave.",
+    "add-incident": "Ajouter un contact incident"
+  }
+}

frontend/public/locales/fr/section-members.json

@@ -0,0 +1,14 @@
+{
+  "add-member": "Ajouter un Membre",
+  "org-members": "Membres de l'organisation",
+  "org-members-description": "Gérer les membres de votre organisation. Ces utilisateurs pourraient ensuite être répartis en projets.",
+  "search-members": "Recherche des membres...",
+  "add-dialog": {
+    "add-member-to-project": "Ajoutez un membre à votre projet",
+    "already-all-invited": "Tous les utilisateurs de votre organisation sont déjà invités.",
+    "add-user-org-first": "Ajoutez d'abord plus d'utilisateurs à l'organisation.",
+    "user-will-email": "L'utilisateur recevra un email avec les instructions.",
+    "looking-add": "<0>Si vous cherchez à ajouter des utilisateurs à votre organisation,</0><1>cliquez ici</1>",
+    "add-user-to-org": "Ajouter des Utilisateurs à l'Organisation"
+  }
+}

frontend/public/locales/fr/section-password.json

@@ -0,0 +1,11 @@
+{
+  "password": "Mot de passe",
+  "change": "Changer le mot de passe",
+  "current": "Mot de passe actuel",
+  "current-wrong": "Le mot de passe actuel peut être érroné",
+  "new": "Nouveau mot de passe",
+  "validate-base": "Le mot de passe doit contenir au moins:",
+  "validate-length": "14 caractères",
+  "validate-case": "1 caractère miniscule",
+  "validate-number": "1 chiffre"
+}

frontend/public/locales/fr/section-token.json

@@ -0,0 +1,13 @@
+{
+  "service-tokens": "Jetons de service",
+  "service-tokens-description": "Chaque jeton de service vous est spécifique, à un certain projet et à un certain environnement dans ce projet.",
+  "add-new": "Ajouter un nouveau jeton",
+  "add-dialog": {
+    "title": "Ajouter un jeton de service pour {{target}}",
+    "description": "Spécifiez le nom, l'environnement et la période d'expiration. Lorsqu'un jeton est généré, vous ne pourrez le voir qu'une seule fois avant qu'il ne disparaisse. Assurez-vous de le sauvegarder quelque part.",
+    "name": "Nom du jeton de service",
+    "add": "Ajouter un jeton de service",
+    "copy-service-token": "Copiez votre jeton de service",
+    "copy-service-token-description": "Une fois que vous aurez fermé cette fenêtre, vous ne reverrez plus jamais votre jeton de service"
+  }
+}

frontend/public/locales/fr/settings-members.json

@@ -0,0 +1,4 @@
+{
+  "title": "Membres du projet",
+  "description": "Cette page affiche les membres du projet sélectionné."
+}

frontend/public/locales/fr/settings-org.json

@@ -0,0 +1,4 @@
+{
+  "title": "Paramètres d'Organisation",
+  "description": "Gérer les membres de votre organisation. Ces utilisateurs pourraient ensuite être répartis en projets."
+}

frontend/public/locales/fr/settings-personal.json

@@ -0,0 +1,11 @@
+{
+  "title": "Paramètres Personnels",
+  "description": "Consultez et gérez vos informations personnelles ici.",
+  "emergency": {
+    "name": "Kit d'urgence",
+    "text1": "Votre kit d'urgence contient les informations dont vous aurez besoin pour vous connecter à votre compte Infisical.",
+    "text2": "Seul le dernier kit d'urgence émis reste valide. Pour obtenir un nouveau kit d'urgence, vérifiez votre mot de passe.",
+    "download": "Télécharger le kit d'urgence"
+  },
+  "change-language": "Changer de langue"
+}

frontend/public/locales/fr/settings-project.json

@@ -0,0 +1,13 @@
+{
+  "title": "Paramètres du Projet",
+  "description": "Ces paramètres ne s'appliquent qu'au Projet actuellement sélectionné.",
+  "danger-zone": "Zone de danger",
+  "delete-project": "Supprimer le Projet",
+  "project-to-delete": "Projet à Supprimer",
+  "danger-zone-note": "Dès que vous supprimez ce projet, vous ne pourrez plus revenir en arrière. Cela supprimera immédiatement toutes les clefs. Si vous voulez toujours le faire, veuillez saisir le nom du projet ci-dessous.",
+  "delete-project-note": "Remarque: Vous ne pouvez supprimer qu'un projet que si vous en avez plus d'un.",
+  "project-id-description": "Pour intégrer Infisical dans votre base de code et obtenir une injection automatique de variables d'environnement, vous devez utiliser l'ID du projet suivant.",
+  "project-id-description2": "Pour plus de conseils, y compris des extraits de code pour diverses langues et frameworks, voir ",
+  "auto-generated": "Ceci est l'identifiant unique généré automatiquement pour votre projet. Il ne peut pas être modifié.",
+  "docs": "Documentation Infisical"
+}

frontend/public/locales/fr/signup.json

@@ -0,0 +1,28 @@
+{
+  "title": "S'inscrire",
+  "og-title": "Remplacez les fichiers .env par 1 ligne de code. Inscrivez-vous à Infisical en 3 minutes.",
+  "og-description": "Infisical, une plate-forme simple et chiffré de bout en bout qui permet aux équipes de synchroniser et de gérer des clefs API et des variables d'environnement. Fonctionne avec Node.js, Next.js, Gatsby, Nest.js ...",
+  "signup": "S'inscrire",
+  "already-have-account": "Déjà inscris? Se connecter",
+  "forgot-password": "Mot de passe oublié?",
+  "verify": "Vérifier",
+  "step1-start": "Bon, on commence!",
+  "step1-privacy": "En créant votre compte, vous acceptez nos conditions et avez lu et reconnu notre politique de confidentialité.",
+  "step1-submit": "C'est parti",
+  "step2-message": "Nous avons envoyé un email de vérification à",
+  "step2-code-error": "Oops. Votre code est faux. Veuillez réessayer.",
+  "step2-resend-alert": "Vous ne voyez pas l'email?",
+  "step2-resend-submit": "Renvoyer",
+  "step2-resend-progress": "Envoie en cours...",
+  "step2-spam-alert": "Assurez-vous de vérifier vos spams.",
+  "step3-message": "Nous y sommes presque!",
+  "step4-message": "Enregistrez votre kit d'urgence",
+  "step4-description1": "Si vous n'arrivez plus à vous connecter à votre compte, votre kit d'urgence est le seul moyen d'y arriver.",
+  "step4-description2": "Nous vous recommandons de le télécharger et de le garder en sécurité.",
+  "step4-description3": "Il contient votre clef secrète que nous ne pouvons pas récupérer pour vous si vous la perdez.",
+  "step4-download": "Téléchargez le PDF",
+  "step5-send-invites": "Envoyer les invitations",
+  "step5-invite-team": "Invitez votre équipe",
+  "step5-subtitle": "Infisical a pour but d'être utilisé avec vos coéquipiers. Invitez-les à le tester.",
+  "step5-skip": "Passer"
+}