Merge remote-tracking branch 'upstream/main' into feat/39

frontend/components/RouteGuard.js

@@ -1,9 +1,9 @@
-import { useEffect, useState } from "react";
-import Image from "next/image";
-import { useRouter } from "next/router";
+import { useEffect, useState } from 'react';
+import Image from 'next/image';
+import { useRouter } from 'next/router';
 
-import { publicPaths } from "~/const";
-import checkAuth from "~/pages/api/auth/CheckAuth";
+import { publicPaths } from '~/const';
+import checkAuth from '~/pages/api/auth/CheckAuth';
 
 // #TODO: finish spinner only when the data loads fully
 // #TODO: Redirect somewhere if the page does not exist
@@ -22,16 +22,16 @@ export default function RouteGuard({ children }) {
     // #TODO: add the loading page when not yet authorized.
     const hideContent = () => setAuthorized(false);
     // const onError = () => setAuthorized(true)
-    router.events.on("routeChangeStart", hideContent);
+    router.events.on('routeChangeStart', hideContent);
     // router.events.on("routeChangeError", onError);
 
     // on route change complete - run auth check
-    router.events.on("routeChangeComplete", authCheck);
+    router.events.on('routeChangeComplete', authCheck);
 
     // unsubscribe from events in useEffect return function
     return () => {
-      router.events.off("routeChangeStart", hideContent);
-      router.events.off("routeChangeComplete", authCheck);
+      router.events.off('routeChangeStart', hideContent);
+      router.events.off('routeChangeComplete', authCheck);
       // router.events.off("routeChangeError", onError);
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -43,7 +43,7 @@ export default function RouteGuard({ children }) {
    */
   async function authCheck(url) {
     // Make sure that we don't redirect when the user is on the following pages.
-    const path = "/" + url.split("?")[0].split("/")[1];
+    const path = '/' + url.split('?')[0].split('/')[1];
 
     // Check if the user is authenticated
     const response = await checkAuth();
@@ -51,16 +51,16 @@ export default function RouteGuard({ children }) {
     if (!publicPaths.includes(path)) {
       try {
         if (response.status !== 200) {
-          router.push("/login");
-          console.log("Unauthorized to access.");
+          router.push('/login');
+          console.log('Unauthorized to access.');
           setAuthorized(false);
         } else {
           setAuthorized(true);
-          console.log("Authorized to access.");
+          console.log('Authorized to access.');
         }
       } catch (error) {
         console.log(
-          "Error (probably the authCheck route is stuck again...):",
+          'Error (probably the authCheck route is stuck again...):',
           error
         );
       }

frontend/components/analytics/posthog.js

@@ -1,17 +1,13 @@
-import posthog from "posthog-js";
+import posthog from 'posthog-js';
 
-import {
-  ENV,
-  POSTHOG_API_KEY,
-  POSTHOG_HOST,
-  TELEMETRY_ENABLED,
-} from "../utilities/config";
+import { ENV, POSTHOG_API_KEY, POSTHOG_HOST } from '../utilities/config';
 
 export const initPostHog = () => {
-  if (typeof window !== "undefined") {
-    if (ENV == "production" && TELEMETRY_ENABLED) {
+  if (typeof window !== 'undefined') {
+    // eslint-disable-next-line
+    if (ENV == 'production' && TELEMETRY_CAPTURING_ENABLED) {
       posthog.init(POSTHOG_API_KEY, {
-        api_host: POSTHOG_HOST,
+        api_host: POSTHOG_HOST
       });
     }
   }

frontend/components/analytics/posthog.ts

@@ -0,0 +1,18 @@
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+/* eslint-disable no-undef */
+import posthog from 'posthog-js';
+
+import { ENV, POSTHOG_API_KEY, POSTHOG_HOST } from '../utilities/config';
+
+export const initPostHog = () => {
+  if (typeof window !== 'undefined') {
+    // @ts-ignore
+    if (ENV == 'production' && TELEMETRY_CAPTURING_ENABLED) {
+      posthog.init(POSTHOG_API_KEY, {
+        api_host: POSTHOG_HOST
+      });
+    }
+  }
+
+  return posthog;
+};

frontend/components/basic/InputField.tsx

@@ -1,9 +1,8 @@
-import React, { useState } from "react";
-import { useRouter } from "next/router";
-import { faCircle, faEye, faEyeSlash } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState } from 'react';
+import { faCircle, faEye, faEyeSlash } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
-import guidGenerator from "../utilities/randomId";
+import guidGenerator from '../utilities/randomId';
 
 interface InputFieldProps {
   static?: boolean;
@@ -21,9 +20,11 @@ interface InputFieldProps {
   onChangeHandler: (value: string) => void;
 }
 
-const InputField = (props: InputFieldProps) => {
+const InputField = (
+  props: InputFieldProps &
+    Pick<JSX.IntrinsicElements['input'], 'autoComplete' | 'id'>
+) => {
   const [passwordVisible, setPasswordVisible] = useState(false);
-  const router = useRouter();
 
   if (props.static === true) {
     return (
@@ -43,6 +44,8 @@ const InputField = (props: InputFieldProps) => {
           className="bg-bunker-800 text-gray-400 border border-gray-600 rounded-md text-md p-2 w-full min-w-16 outline-none"
           name={props.name}
           readOnly
+          autoComplete={props.autoComplete}
+          id={props.id}
         />
       </div>
     );
@@ -70,27 +73,30 @@ const InputField = (props: InputFieldProps) => {
         </div>
         <div
           className={`group relative flex flex-col justify-center w-full max-w-2xl border ${
-            props.error ? "border-red" : "border-mineshaft-500"
+            props.error ? 'border-red' : 'border-mineshaft-500'
           } rounded-md`}
         >
           <input
             onChange={(e) => props.onChangeHandler(e.target.value)}
-            type={passwordVisible === false ? props.type : "text"}
+            type={passwordVisible === false ? props.type : 'text'}
             placeholder={props.placeholder}
             value={props.value}
             required={props.isRequired}
             className={`${
               props.blurred
-                ? "text-bunker-800 group-hover:text-gray-400 focus:text-gray-400 active:text-gray-400"
-                : ""
+                ? 'text-bunker-800 group-hover:text-gray-400 focus:text-gray-400 active:text-gray-400'
+                : ''
             } ${
-              props.error ? "focus:ring-red/50" : "focus:ring-primary/50"
+              props.error ? 'focus:ring-red/50' : 'focus:ring-primary/50'
             } relative peer bg-bunker-800 rounded-md text-gray-400 text-md p-2 w-full min-w-16 outline-none focus:ring-4 duration-200`}
             name={props.name}
             spellCheck="false"
+            autoComplete={props.autoComplete}
+            id={props.id}
           />
-          {props.label?.includes("Password") && (
+          {props.label?.includes('Password') && (
             <button
+              type="button"
               onClick={() => {
                 setPasswordVisible(!passwordVisible);
               }}
@@ -107,7 +113,7 @@ const InputField = (props: InputFieldProps) => {
             <div className="peer group-hover:hidden peer-hover:hidden peer-focus:hidden peer-active:invisible absolute h-10 w-fit max-w-xl rounded-md flex items-center text-gray-400/50 text-clip overflow-hidden">
               <p className="ml-2"></p>
               {props.value
-                .split("")
+                .split('')
                 .slice(0, 54)
                 .map(() => (
                   <FontAwesomeIcon

frontend/components/basic/Layout.tsx

@@ -18,12 +18,14 @@ 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 addUserToWorkspace from "~/pages/api/workspace/addUserToWorkspace";
 import createWorkspace from "~/pages/api/workspace/createWorkspace";
 import getWorkspaces from "~/pages/api/workspace/getWorkspaces";
 import uploadKeys from "~/pages/api/workspace/uploadKeys";
 
 import NavBarDashboard from "../navigation/NavBarDashboard";
+import onboardingCheck from "../utilities/checks/OnboardingCheck";
 import { tempLocalStorage } from "../utilities/checks/tempLocalStorage";
 import {
   decryptAssymmetric,
@@ -40,12 +42,14 @@ interface LayoutProps {
 export default function Layout({ children }: LayoutProps) {
   const router = useRouter();
   const [workspaceList, setWorkspaceList] = useState([]);
-  const [workspaceMapping, setWorkspaceMapping] = useState([{ 1: 2 }]);
+  const [workspaceMapping, setWorkspaceMapping] = useState([{ "1": "2" }]);
   const [workspaceSelected, setWorkspaceSelected] = useState("∞");
   const [newWorkspaceName, setNewWorkspaceName] = useState("");
   const [isOpen, setIsOpen] = useState(false);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState(false);
+  const [totalOnboardingActionsDone, setTotalOnboardingActionsDone] =
+    useState(0);
 
   const { t } = useTranslation();
 
@@ -217,25 +221,26 @@ export default function Layout({ children }: LayoutProps) {
       }
     };
     putUserInWorkSpace();
+    onboardingCheck({ setTotalOnboardingActionsDone });
   }, []);
 
   useEffect(() => {
     try {
       if (
-        workspaceMapping[Number(workspaceSelected)] &&
-        `${workspaceMapping[Number(workspaceSelected)]}` !==
+        workspaceMapping[workspaceSelected as any] &&
+        `${workspaceMapping[workspaceSelected as any]}` !==
           router.asPath
             .split("/")
             [router.asPath.split("/").length - 1].split("?")[0]
       ) {
         router.push(
           "/dashboard/" +
-            workspaceMapping[Number(workspaceSelected)] +
+            workspaceMapping[workspaceSelected as any] +
             "?Development"
         );
         localStorage.setItem(
           "projectData.id",
-          `${workspaceMapping[Number(workspaceSelected)]}`
+          `${workspaceMapping[workspaceSelected as any]}`
         );
       }
     } catch (error) {
@@ -246,6 +251,10 @@ export default function Layout({ children }: LayoutProps) {
   return (
     <>
       <div className="fixed w-full hidden md:block flex flex-col h-screen">
+        <script
+          src="https://cdnjs.cloudflare.com/ajax/libs/alpinejs/3.2.2/cdn.js"
+          defer
+        ></script>
         <NavBarDashboard />
         <div className="flex flex-col md:flex-row flex-1">
           <aside className="bg-bunker-600 border-r border-mineshaft-500 w-full md:w-60 h-screen">
@@ -329,18 +338,44 @@ export default function Layout({ children }: LayoutProps) {
                       <FontAwesomeIcon icon={faBookOpen} />
                     </p>
                     Infisical Guide
+                    <img
+                      src={`/images/progress-${
+                        totalOnboardingActionsDone == 0 ? "0" : ""
+                      }${totalOnboardingActionsDone == 1 ? "14" : ""}${
+                        totalOnboardingActionsDone == 2 ? "28" : ""
+                      }${totalOnboardingActionsDone == 3 ? "43" : ""}${
+                        totalOnboardingActionsDone == 4 ? "57" : ""
+                      }${totalOnboardingActionsDone == 5 ? "71" : ""}.svg`}
+                      height={58}
+                      width={58}
+                      alt="progress bar"
+                      className="absolute right-2 -top-2"
+                    ></img>
                   </div>
                 ) : (
                   <Link
                     href={`/home/` + workspaceMapping[workspaceSelected as any]}
                   >
                     <div
-                      className={`flex p-2.5 text-white text-sm rounded cursor-pointer hover:bg-primary-50/5 mt-max border border-dashed border-bunker-400`}
+                      className={`relative flex p-2.5 overflow-visible text-white h-10 text-sm rounded cursor-pointer bg-white/10 hover:bg-primary-50/[0.15] mt-max`}
                     >
                       <p className="w-10 flex items-center justify-center text-lg">
                         <FontAwesomeIcon icon={faBookOpen} />
                       </p>
                       Infisical Guide
+                      <img
+                        src={`/images/progress-${
+                          totalOnboardingActionsDone == 0 ? "0" : ""
+                        }${totalOnboardingActionsDone == 1 ? "14" : ""}${
+                          totalOnboardingActionsDone == 2 ? "28" : ""
+                        }${totalOnboardingActionsDone == 3 ? "43" : ""}${
+                          totalOnboardingActionsDone == 4 ? "57" : ""
+                        }${totalOnboardingActionsDone == 5 ? "71" : ""}.svg`}
+                        height={58}
+                        width={58}
+                        alt="progress bar"
+                        className="absolute right-2 -top-2"
+                      ></img>
                     </div>
                   </Link>
                 )}

frontend/components/basic/Listbox.tsx

@@ -10,10 +10,10 @@ import { Listbox, Transition } from "@headlessui/react";
 
 interface ListBoxProps {
   selected: string;
-  onChange: () => void;
-  data: string[];
-  text: string;
-  buttonAction: () => void;
+  onChange: (arg: string) => void;
+  data: string[] | null;
+  text?: string;
+  buttonAction?: () => void;
   isFull?: boolean;
 }
 

frontend/components/basic/buttons/Button.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { ButtonHTMLAttributes } from "react";
 import Image from "next/image";
 import { IconProp } from "@fortawesome/fontawesome-svg-core";
 import {
@@ -9,7 +9,7 @@ import {
 const classNames = require("classnames");
 
 type ButtonProps = {
-  text: string;
+  text?: string;
   onButtonPressed: () => void;
   loading?: boolean;
   color?: string;
@@ -18,6 +18,7 @@ type ButtonProps = {
   active?: boolean;
   iconDisabled?: string;
   textDisabled?: string;
+  type?: ButtonHTMLAttributes<any>['type'];
 };
 
 /**
@@ -91,6 +92,7 @@ export default function Button(props: ButtonProps): JSX.Element {
   const button = (
     <button
       disabled={!activityStatus}
+      type={props.type}
       onClick={props.onButtonPressed}
       className={styleButton}
     >

frontend/components/basic/dialog/ActivateBotDialog.js

@@ -0,0 +1,92 @@
+import { Fragment } from "react";
+import { Dialog, Transition } from "@headlessui/react";
+
+import setBotActiveStatus from "../../../pages/api/bot/setBotActiveStatus";
+import getLatestFileKey from "../../../pages/api/workspace/getLatestFileKey";
+import { 
+    decryptAssymmetric,
+    encryptAssymmetric
+} from "../../utilities/cryptography/crypto";
+import Button from "../buttons/Button";
+
+const ActivateBotDialog = ({
+    isOpen,
+    closeModal,
+    selectedIntegrationOption,
+    handleBotActivate,
+    handleIntegrationOption
+}) => {
+    
+    const submit = async () => {
+        try {
+            // 1. activate bot
+            await handleBotActivate();
+            
+            // 2. start integration
+            await handleIntegrationOption({
+                integrationOption: selectedIntegrationOption
+            });
+        } catch (err) {
+            console.log(err);
+        }
+        
+        closeModal();
+    }
+
+    return (
+        <div>
+            <Transition appear show={isOpen} as={Fragment}>
+                <Dialog as="div" className="relative z-10" 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"
+                    >
+                        <div className="fixed inset-0 bg-black bg-opacity-70" />
+                    </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-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"
+                                >
+                                    Grant Infisical access to your secrets
+                                </Dialog.Title>
+                                <div className="mt-2 mb-2">
+                                    <p className="text-sm text-gray-500">
+                                        Most cloud integrations require Infisical to be able to decrypt your secrets so they can be forwarded over.
+                                    </p>
+                                </div>
+                                <div className="mt-6 max-w-max">
+                                    <Button 
+                                        onButtonPressed={submit}
+                                        color="mineshaft"
+                                        text="Grant access"
+                                        size="md"
+                                    />
+                                </div>
+                                </Dialog.Panel>
+                            </Transition.Child>
+                        </div>
+                    </div>
+                </Dialog>
+            </Transition>
+        </div>
+    );
+}
+
+export default ActivateBotDialog;

frontend/components/basic/dialog/AddServiceTokenDialog.js

@@ -1,6 +1,5 @@
 import { Fragment, useState } from "react";
-import { useRouter } from "next/router";
-import useTranslate from "next-translate/useTranslation";
+import { useTranslation } from "next-i18next";
 import { faCheck, faCopy } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { Dialog, Transition } from "@headlessui/react";
@@ -22,6 +21,8 @@ const expiryMapping = {
   "1 day": 86400,
   "7 days": 604800,
   "1 month": 2592000,
+  "6 months": 15552000,
+  "12 months": 31104000,
 };
 
 const AddServiceTokenDialog = ({
@@ -30,13 +31,12 @@ const AddServiceTokenDialog = ({
   workspaceId,
   workspaceName,
 }) => {
-  const router = useRouter();
   const [serviceToken, setServiceToken] = useState("");
   const [serviceTokenName, setServiceTokenName] = useState("");
   const [serviceTokenEnv, setServiceTokenEnv] = useState("Development");
   const [serviceTokenExpiresIn, setServiceTokenExpiresIn] = useState("1 day");
   const [serviceTokenCopied, setServiceTokenCopied] = useState(false);
-  const { t } = useTranslate();
+  const { t } = useTranslation();
 
   const generateServiceToken = async () => {
     const latestFileKey = await getLatestFileKey({ workspaceId });
@@ -169,7 +169,13 @@ const AddServiceTokenDialog = ({
                       <ListBox
                         selected={serviceTokenExpiresIn}
                         onChange={setServiceTokenExpiresIn}
-                        data={["1 day", "7 days", "1 month"]}
+                        data={[
+                          "1 day",
+                          "7 days",
+                          "1 month",
+                          "6 months",
+                          "12 months",
+                        ]}
                         width="full"
                         text={`${t("common:expired-in")}: `}
                       />
@@ -205,7 +211,7 @@ const AddServiceTokenDialog = ({
                       </div>
                     </div>
                     <div className="w-full">
-                      <div className="flex justify-end items-center bg-white/[0.07] text-base mt-2 mr-2 rounded-md text-gray-400 w-full h-36">
+                      <div className="flex justify-end items-center bg-white/[0.07] text-base mt-2 mr-2 rounded-md text-gray-400 w-full h-44">
                         <input
                           type="text"
                           value={serviceToken}

frontend/components/basic/dialog/IntegrationAccessTokenDialog.js

@@ -0,0 +1,101 @@
+import { Fragment } from "react";
+import { Dialog, Transition } from "@headlessui/react";
+
+import setBotActiveStatus from "../../../pages/api/bot/setBotActiveStatus";
+import getLatestFileKey from "../../../pages/api/workspace/getLatestFileKey";
+import { 
+    decryptAssymmetric,
+    encryptAssymmetric
+} from "../../utilities/cryptography/crypto";
+import Button from "../buttons/Button";
+import InputField from "../InputField";
+
+const IntegrationAccessTokenDialog = ({
+    isOpen,
+    closeModal,
+    selectedIntegrationOption,
+    handleBotActivate,
+    handleIntegrationOption
+}) => {
+    
+    const submit = async () => {
+        try {
+            // 1. activate bot
+            await handleBotActivate();
+            
+            // 2. start integration
+            await handleIntegrationOption({
+                integrationOption: selectedIntegrationOption
+            });
+        } catch (err) {
+            console.log(err);
+        }
+        
+        closeModal();
+    }
+
+    return (
+        <div>
+            <Transition appear show={isOpen} as={Fragment}>
+                <Dialog as="div" className="relative z-10" 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"
+                    >
+                        <div className="fixed inset-0 bg-black bg-opacity-70" />
+                    </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-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"
+                                >
+                                    Grant Infisical access to your secrets
+                                </Dialog.Title>
+                                <div className="mt-2 mb-2">
+                                    <p className="text-sm text-gray-500">
+                                        Most cloud integrations require Infisical to be able to decrypt your secrets so they can be forwarded over.
+                                    </p>
+                                </div>
+                                <div className="mt-6 max-w-max">
+                                    {/* <Button 
+                                        onButtonPressed={submit}
+                                        color="mineshaft"
+                                        text="Grant access"
+                                        size="md"
+                                    /> */}
+                                    <InputField
+                                        label="Access token"
+                                        onChangeHandler={() => {}}
+                                        type="varName"
+                                        value={"Hello"}
+                                        placeholder=""
+                                        isRequired
+                                    />
+                                </div>
+                                </Dialog.Panel>
+                            </Transition.Child>
+                        </div>
+                    </div>
+                </Dialog>
+            </Transition>
+        </div>
+    );
+}
+
+export default IntegrationAccessTokenDialog;

frontend/components/basic/table/ServiceTokenTable.js

@@ -1,10 +1,10 @@
-import React, { useEffect, useState } from "react";
-import { useRouter } from "next/router";
-import { faX } from "@fortawesome/free-solid-svg-icons";
+import React, { useEffect, useState } from 'react';
+import { useRouter } from 'next/router';
+import { faX } from '@fortawesome/free-solid-svg-icons';
 
-import { reverseEnvMapping } from "../../../public/data/frequentConstants";
-import guidGenerator from "../../utilities/randomId";
-import Button from "../buttons/Button";
+import { reverseEnvMapping } from '../../../public/data/frequentConstants';
+import guidGenerator from '../../utilities/randomId';
+import Button from '../buttons/Button';
 
 /**
  * This is the component that we utilize for the user table - in future, can reuse it for some other purposes too.

frontend/components/basic/table/UserTable.js

@@ -1,25 +1,25 @@
-import React, { useEffect, useMemo, useState } from "react";
-import { useRouter } from "next/router";
-import { faX } from "@fortawesome/free-solid-svg-icons";
+import React, { useEffect, useMemo, useState } from 'react';
+import { useRouter } from 'next/router';
+import { faX } from '@fortawesome/free-solid-svg-icons';
 
-import deleteUserFromOrganization from "~/pages/api/organization/deleteUserFromOrganization";
-import changeUserRoleInWorkspace from "~/pages/api/workspace/changeUserRoleInWorkspace";
-import deleteUserFromWorkspace from "~/pages/api/workspace/deleteUserFromWorkspace";
-import getLatestFileKey from "~/pages/api/workspace/getLatestFileKey";
-import uploadKeys from "~/pages/api/workspace/uploadKeys";
+import deleteUserFromOrganization from '~/pages/api/organization/deleteUserFromOrganization';
+import changeUserRoleInWorkspace from '~/pages/api/workspace/changeUserRoleInWorkspace';
+import deleteUserFromWorkspace from '~/pages/api/workspace/deleteUserFromWorkspace';
+import getLatestFileKey from '~/pages/api/workspace/getLatestFileKey';
+import uploadKeys from '~/pages/api/workspace/uploadKeys';
 
-import guidGenerator from "../../utilities/randomId";
-import Button from "../buttons/Button";
-import Listbox from "../Listbox";
+import guidGenerator from '../../utilities/randomId';
+import Button from '../buttons/Button';
+import Listbox from '../Listbox';
 
 const {
   decryptAssymmetric,
-  encryptAssymmetric,
-} = require("../../utilities/cryptography/crypto");
-const nacl = require("tweetnacl");
-nacl.util = require("tweetnacl-util");
+  encryptAssymmetric
+} = require('../../utilities/cryptography/crypto');
+const nacl = require('tweetnacl');
+nacl.util = require('tweetnacl-util');
 
-const roles = ["admin", "user"];
+const roles = ['admin', 'user'];
 
 /**
  * This is the component that we utilize for the user table - in future, can reuse it for some other purposes too.
@@ -36,13 +36,13 @@ const UserTable = ({
   isOrg,
   onClick,
   deleteUser,
-  setUserIdToBeDeleted,
+  setUserIdToBeDeleted
 }) => {
   const [roleSelected, setRoleSelected] = useState(
     Array(userData?.length).fill(userData.map((user) => user.role))
   );
   const router = useRouter();
-  const [myRole, setMyRole] = useState("member");
+  const [myRole, setMyRole] = useState('member');
 
   // Delete the row in the table (e.g. a user)
   // #TODO: Add a pop-up that warns you that the user is going to be deleted.
@@ -57,7 +57,7 @@ const UserTable = ({
     changeData(userData.filter((v, i) => i !== index));
     setRoleSelected([
       ...roleSelected.slice(0, index),
-      ...roleSelected.slice(index + 1, userData?.length),
+      ...roleSelected.slice(index + 1, userData?.length)
     ]);
   };
 
@@ -76,10 +76,10 @@ const UserTable = ({
           status: userData[index].status,
           userId: userData[index].userId,
           membershipId: userData[index].membershipId,
-          publicKey: userData[index].publicKey,
-        },
+          publicKey: userData[index].publicKey
+        }
       ],
-      ...userData.slice(index + 1, userData?.length),
+      ...userData.slice(index + 1, userData?.length)
     ]);
   };
 
@@ -88,22 +88,22 @@ const UserTable = ({
   }, [userData, myUser]);
 
   const grantAccess = async (id, publicKey) => {
-    let result = await getLatestFileKey({workspaceId: router.query.id});
+    let result = await getLatestFileKey({ workspaceId: router.query.id });
 
-    const PRIVATE_KEY = localStorage.getItem("PRIVATE_KEY");
+    const PRIVATE_KEY = localStorage.getItem('PRIVATE_KEY');
 
     // assymmetrically decrypt symmetric key with local private key
     const key = decryptAssymmetric({
       ciphertext: result.latestKey.encryptedKey,
       nonce: result.latestKey.nonce,
       publicKey: result.latestKey.sender.publicKey,
-      privateKey: PRIVATE_KEY,
+      privateKey: PRIVATE_KEY
     });
 
     const { ciphertext, nonce } = encryptAssymmetric({
       plaintext: key,
       publicKey: publicKey,
-      privateKey: PRIVATE_KEY,
+      privateKey: PRIVATE_KEY
     });
 
     uploadKeys(router.query.id, id, ciphertext, nonce);
@@ -158,24 +158,24 @@ const UserTable = ({
                     </td>
                     <td className="flex flex-row justify-end pr-8 py-2 border-t border-0.5 border-mineshaft-700">
                       <div className="flex justify-end mr-6 w-3/4 mx-2 w-full h-full flex flex-row items-center">
-                        {row.status == "granted" &&
-                        ((myRole == "admin" && row.role != "owner") ||
-                          myRole == "owner") &&
+                        {row.status == 'granted' &&
+                        ((myRole == 'admin' && row.role != 'owner') ||
+                          myRole == 'owner') &&
                         myUser !== row.email ? (
                           <Listbox
                             selected={row.role}
                             onChange={(e) => handleRoleUpdate(index, e)}
                             data={
-                              myRole == "owner"
-                                ? ["owner", "admin", "member"]
-                                : ["admin", "member"]
+                              myRole == 'owner'
+                                ? ['owner', 'admin', 'member']
+                                : ['admin', 'member']
                             }
                             text="Role: "
                             membershipId={row.membershipId}
                           />
                         ) : (
-                          row.status != "invited" &&
-                          row.status != "verified" && (
+                          row.status != 'invited' &&
+                          row.status != 'verified' && (
                             <Listbox
                               selected={row.role}
                               text="Role: "
@@ -183,8 +183,8 @@ const UserTable = ({
                             />
                           )
                         )}
-                        {(row.status == "invited" ||
-                          row.status == "verified") && (
+                        {(row.status == 'invited' ||
+                          row.status == 'verified') && (
                           <div className="w-full pl-9">
                             <Button
                               onButtonPressed={() =>
@@ -199,7 +199,7 @@ const UserTable = ({
                             />
                           </div>
                         )}
-                        {row.status == "completed" && myUser !== row.email && (
+                        {row.status == 'completed' && myUser !== row.email && (
                           <div className="border border-mineshaft-700 rounded-md bg-white/5 hover:bg-primary text-white hover:text-black duration-200">
                             <Button
                               onButtonPressed={() =>
@@ -214,7 +214,7 @@ const UserTable = ({
                       </div>
                       {myUser !== row.email &&
                       // row.role != "admin" &&
-                      myRole != "member" ? (
+                      myRole != 'member' ? (
                         <div className="opacity-50 hover:opacity-100 flex items-center">
                           <Button
                             onButtonPressed={(e) =>

frontend/components/billing/Plan.tsx

@@ -1,14 +1,29 @@
-import React from "react";
+import React from 'react';
 
-import StripeRedirect from "~/pages/api/organization/StripeRedirect";
+import StripeRedirect from '~/pages/api/organization/StripeRedirect';
 
-export default function Plan({ plan }) {
+import { tempLocalStorage } from '../utilities/checks/tempLocalStorage';
+
+interface Props {
+  plan: {
+    name: string;
+    price: string;
+    priceExplanation: string;
+    text: string;
+    subtext: string;
+    buttonTextMain: string;
+    buttonTextSecondary: string;
+    current: boolean;
+  };
+}
+
+export default function Plan({ plan }: Props) {
   return (
     <div
-      className={`relative flex flex-col justify-between border border-2 min-w-fit w-96 rounded-lg h-68 mr-4 bg-mineshaft-800 ${
-        (plan.name != "Starter") & (plan.current == true)
-          ? "border-primary"
-          : "border-chicago-700"
+      className={`relative flex flex-col justify-between border-2 min-w-fit w-96 rounded-lg h-68 mr-4 bg-mineshaft-800 ${
+        plan.name != 'Starter' && plan.current == true
+          ? 'border-primary'
+          : 'border-chicago-700'
       }
 			`}
     >
@@ -36,7 +51,7 @@ export default function Plan({ plan }) {
       <div className="flex flex-row items-center">
         {plan.current == false ? (
           <>
-            {plan.buttonTextMain == "Schedule a Demo" ? (
+            {plan.buttonTextMain == 'Schedule a Demo' ? (
               <a href="/scheduledemo" target='_blank rel="noopener"'>
                 <div className="relative z-10 mx-5 mt-3 mb-4 py-2 px-4 border border-1 border-gray-600 hover:text-black hover:border-primary text-gray-400 font-semibold hover:bg-primary bg-bunker duration-200 cursor-pointer rounded-md flex w-max">
                   {plan.buttonTextMain}
@@ -45,15 +60,15 @@ export default function Plan({ plan }) {
             ) : (
               <div
                 className={`relative z-10 mx-5 mt-3 mb-4 py-2 px-4 border border-1 border-gray-600 text-gray-400 font-semibold ${
-                  plan.buttonTextMain == "Downgrade"
-                    ? "hover:bg-red hover:text-white hover:border-red"
-                    : "hover:bg-primary hover:text-black hover:border-primary"
+                  plan.buttonTextMain == 'Downgrade'
+                    ? 'hover:bg-red hover:text-white hover:border-red'
+                    : 'hover:bg-primary hover:text-black hover:border-primary'
                 } bg-bunker duration-200 cursor-pointer rounded-md flex w-max`}
               >
                 <button
                   onClick={() =>
                     StripeRedirect({
-                      orgId: localStorage.getItem("orgData.id"),
+                      orgId: tempLocalStorage('orgData.id')
                     })
                   }
                 >
@@ -61,7 +76,10 @@ export default function Plan({ plan }) {
                 </button>
               </div>
             )}
-            <a href="https://infisical.com/pricing" target='_blank rel="noopener"'>
+            <a
+              href="https://infisical.com/pricing"
+              target='_blank rel="noopener"'
+            >
               <div className="relative z-10 text-gray-400 font-semibold hover:text-primary duration-200 cursor-pointer mb-0.5">
                 {plan.buttonTextSecondary}
               </div>
@@ -70,9 +88,9 @@ export default function Plan({ plan }) {
         ) : (
           <div
             className={`h-8 w-full rounded-b-md flex justify-center items-center z-10 ${
-              (plan.name != "Starter") & (plan.current == true)
-                ? "bg-primary"
-                : "bg-chicago-700"
+              plan.name != 'Starter' && plan.current == true
+                ? 'bg-primary'
+                : 'bg-chicago-700'
             }`}
           >
             <p className="text-xs text-black font-semibold">CURRENT PLAN</p>

frontend/components/context/Notifications/Notification.tsx

@@ -1,35 +1,64 @@
-import { faXmarkCircle } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import classnames from "classnames";
+import { useEffect, useRef } from 'react';
+import { faX } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
-import { Notification as NotificationType } from "./NotificationProvider";
+import { Notification as NotificationType } from './NotificationProvider';
 
 interface NotificationProps {
-  notification: NotificationType;
-  clearNotification: (text?: string) => void;
+  notification: Required<NotificationType>;
+  clearNotification: (text: string) => void;
 }
 
 const Notification = ({
   notification,
-  clearNotification,
+  clearNotification
 }: NotificationProps) => {
+  const timeout = useRef<number>();
+
+  const handleClearNotification = () => clearNotification(notification.text);
+
+  const setNotifTimeout = () => {
+    timeout.current = window.setTimeout(
+      handleClearNotification,
+      notification.timeoutMs
+    );
+  };
+
+  const cancelNotifTimeout = () => {
+    clearTimeout(timeout.current);
+  };
+
+  useEffect(() => {
+    setNotifTimeout();
+
+    return cancelNotifTimeout;
+  }, []);
+
   return (
     <div
-      className={classnames(
-        "w-full flex items-center justify-between px-4 py-3 rounded pointer-events-auto",
-        {
-          "bg-green-600": notification.type === "success",
-          "bg-red-500": notification.type === "error",
-        }
-      )}
+      className="relative w-full flex items-center justify-between px-4 py-6 rounded-md border border-bunker-500 pointer-events-auto bg-bunker-500"
       role="alert"
     >
-      <p className="text-white text-sm font-bold">{notification.text}</p>
+      {notification.type === 'error' && (
+        <div className="absolute w-full h-1 bg-red top-0 left-0 rounded-t-md"></div>
+      )}
+      {notification.type === 'success' && (
+        <div className="absolute w-full h-1 bg-green top-0 left-0 rounded-t-md"></div>
+      )}
+      {notification.type === 'info' && (
+        <div className="absolute w-full h-1 bg-yellow top-0 left-0 rounded-t-md"></div>
+      )}
+      <p className="text-bunker-200 text-sm font-semibold mt-0.5">
+        {notification.text}
+      </p>
       <button
-        className="bg-white/5 rounded-lg p-3"
+        className="rounded-lg"
         onClick={() => clearNotification(notification.text)}
       >
-        <FontAwesomeIcon className="text-white" icon={faXmarkCircle} />
+        <FontAwesomeIcon
+          className="text-white w-4 h-3 hover:text-red"
+          icon={faX}
+        />
       </button>
     </div>
   );

frontend/components/context/Notifications/NotificationProvider.tsx

@@ -1,20 +1,21 @@
-import { createContext, ReactNode, useContext, useState } from "react";
+import { createContext, ReactNode, useContext, useState } from 'react';
 
-import Notifications from "./Notifications";
+import Notifications from './Notifications';
 
-type NotificationType = "success" | "error";
+type NotificationType = 'success' | 'error' | 'info';
 
 export type Notification = {
   text: string;
-  type: NotificationType;
+  type?: NotificationType;
+  timeoutMs?: number;
 };
 
 type NotificationContextState = {
-  createNotification: ({ text, type }: Notification) => void;
+  createNotification: (newNotification: Notification) => void;
 };
 
 const NotificationContext = createContext<NotificationContextState>({
-  createNotification: () => console.log("createNotification not set!"),
+  createNotification: () => console.log('createNotification not set!')
 });
 
 export const useNotificationContext = () => useContext(NotificationContext);
@@ -24,32 +25,36 @@ interface NotificationProviderProps {
 }
 
 const NotificationProvider = ({ children }: NotificationProviderProps) => {
-  const [notifications, setNotifications] = useState<Notification[]>([]);
+  const [notifications, setNotifications] = useState<Required<Notification>[]>(
+    []
+  );
 
-  const clearNotification = (text?: string) => {
-    if (text) {
-      return setNotifications((state) =>
-        state.filter((notif) => notif.text !== text)
-      );
-    }
-
-    return setNotifications([]);
+  const clearNotification = (text: string) => {
+    return setNotifications((state) =>
+      state.filter((notif) => notif.text !== text)
+    );
   };
 
-  const createNotification = ({ text, type = "success" }: Notification) => {
+  const createNotification = ({
+    text,
+    type = 'success',
+    timeoutMs = 5000
+  }: Notification) => {
     const doesNotifExist = notifications.some((notif) => notif.text === text);
 
     if (doesNotifExist) {
       return;
     }
 
-    return setNotifications((state) => [...state, { text, type }]);
+    const newNotification: Required<Notification> = { text, type, timeoutMs };
+
+    return setNotifications((state) => [...state, newNotification]);
   };
 
   return (
     <NotificationContext.Provider
       value={{
-        createNotification,
+        createNotification
       }}
     >
       <Notifications

frontend/components/context/Notifications/Notifications.tsx

@@ -1,26 +1,28 @@
-import Notification from "./Notification";
-import { Notification as NotificationType } from "./NotificationProvider";
+import Notification from './Notification';
+import { Notification as NotificationType } from './NotificationProvider';
 
 interface NoticationsProps {
-  notifications: NotificationType[];
-  clearNotification: (text?: string) => void;
+  notifications: Required<NotificationType>[];
+  clearNotification: (text: string) => void;
 }
 
 const Notifications = ({
   notifications,
-  clearNotification,
+  clearNotification
 }: NoticationsProps) => {
+  if (!notifications.length) {
+    return null;
+  }
+
   return (
-    <div className="hidden fixed z-50 top-1 w-full inset-x-0 pointer-events-none md:flex justify-center">
-      <div className="flex flex-col gap-y-2 w-96">
-        {notifications.map((notif) => (
-          <Notification
-            key={notif.text}
-            notification={notif}
-            clearNotification={clearNotification}
-          />
-        ))}
-      </div>
+    <div className="hidden fixed z-50 md:flex md:flex-col-reverse bottom-1 gap-y-2 w-96 h-full right-2 bottom-2 pointer-events-none">
+      {notifications.map((notif) => (
+        <Notification
+          key={notif.text}
+          notification={notif}
+          clearNotification={clearNotification}
+        />
+      ))}
     </div>
   );
 };

frontend/components/dashboard/DashboardInputField.tsx

@@ -1,16 +1,16 @@
-import React, { SyntheticEvent, useRef } from "react";
-import { faCircle } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { SyntheticEvent, useRef } from 'react';
+import { faCircle } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
-import guidGenerator from "../utilities/randomId";
+import guidGenerator from '../utilities/randomId';
 
 const REGEX = /([$]{.*?})/g;
 
 interface DashboardInputFieldProps {
-  index: number;
-  onChangeHandler: (value: string, index: number) => void;
+  position: number;
+  onChangeHandler: (value: string, position: number) => void;
   value: string;
-  type: "varName" | "value";
+  type: 'varName' | 'value';
   blurred: boolean;
   duplicates: string[];
 }
@@ -18,7 +18,7 @@ interface DashboardInputFieldProps {
 /**
  * This component renders the input fields on the dashboard
  * @param {object} obj - the order number of a keyPair
- * @param {number} obj.index - the order number of a keyPair
+ * @param {number} obj.pos - the order number of a keyPair
  * @param {function} obj.onChangeHandler - what happens when the input is modified
  * @param {string} obj.type - whether the input field is for a Key Name or for a Key Value
  * @param {string} obj.value - value of the InputField
@@ -28,12 +28,12 @@ interface DashboardInputFieldProps {
  */
 
 const DashboardInputField = ({
-  index,
+  position,
   onChangeHandler,
   type,
   value,
   blurred,
-  duplicates,
+  duplicates
 }: DashboardInputFieldProps) => {
   const ref = useRef<HTMLDivElement | null>(null);
   const syncScroll = (e: SyntheticEvent<HTMLDivElement>) => {
@@ -43,8 +43,8 @@ const DashboardInputField = ({
     ref.current.scrollLeft = e.currentTarget.scrollLeft;
   };
 
-  if (type === "varName") {
-    const startsWithNumber = !isNaN(Number(value.charAt(0))) && value != "";
+  if (type === 'varName') {
+    const startsWithNumber = !isNaN(Number(value.charAt(0))) && value != '';
     const hasDuplicates = duplicates?.includes(value);
     const error = startsWithNumber || hasDuplicates;
 
@@ -52,17 +52,17 @@ const DashboardInputField = ({
       <div className="flex-col w-full">
         <div
           className={`group relative flex flex-col justify-center w-full max-w-2xl border ${
-            error ? "border-red" : "border-mineshaft-500"
+            error ? 'border-red' : 'border-mineshaft-500'
           } rounded-md`}
         >
           <input
             onChange={(e) =>
-              onChangeHandler(e.target.value.toUpperCase(), index)
+              onChangeHandler(e.target.value.toUpperCase(), position)
             }
             type={type}
             value={value}
             className={`z-10 peer font-mono ph-no-capture bg-bunker-800 rounded-md caret-white text-gray-400 text-md px-2 py-1.5 w-full min-w-16 outline-none focus:ring-2 ${
-              error ? "focus:ring-red/50" : "focus:ring-primary/50"
+              error ? 'focus:ring-red/50' : 'focus:ring-primary/50'
             } duration-200`}
             spellCheck="false"
           />
@@ -79,7 +79,7 @@ const DashboardInputField = ({
         )}
       </div>
     );
-  } else if (type === "value") {
+  } else if (type === 'value') {
     return (
       <div className="flex-col w-full">
         <div
@@ -87,12 +87,12 @@ const DashboardInputField = ({
         >
           <input
             value={value}
-            onChange={(e) => onChangeHandler(e.target.value, index)}
+            onChange={(e) => onChangeHandler(e.target.value, position)}
             onScroll={syncScroll}
             className={`${
               blurred
-                ? "text-transparent group-hover:text-transparent focus:text-transparent active:text-transparent"
-                : ""
+                ? 'text-transparent group-hover:text-transparent focus:text-transparent active:text-transparent'
+                : ''
             } z-10 peer font-mono ph-no-capture bg-transparent rounded-md caret-white text-transparent text-md px-2 py-1.5 w-full min-w-16 outline-none focus:ring-2 focus:ring-primary/50 duration-200 no-scrollbar no-scrollbar::-webkit-scrollbar`}
             spellCheck="false"
           />
@@ -100,8 +100,8 @@ const DashboardInputField = ({
             ref={ref}
             className={`${
               blurred
-                ? "text-bunker-800 group-hover:text-gray-400 peer-focus:text-gray-400 peer-active:text-gray-400"
-                : ""
+                ? 'text-bunker-800 group-hover:text-gray-400 peer-focus:text-gray-400 peer-active:text-gray-400'
+                : ''
             } absolute flex flex-row whitespace-pre font-mono z-0 ph-no-capture max-w-2xl overflow-x-scroll bg-bunker-800 h-9 rounded-md text-gray-400 text-md px-2 py-1.5 w-full min-w-16 outline-none focus:ring-2 focus:ring-primary/50 duration-100 no-scrollbar no-scrollbar::-webkit-scrollbar`}
           >
             {value.split(REGEX).map((word, id) => {
@@ -112,7 +112,7 @@ const DashboardInputField = ({
                     <span className="ph-no-capture text-yellow-200/80">
                       {word.slice(2, word.length - 1)}
                     </span>
-                    {word.slice(word.length - 1, word.length) == "}" ? (
+                    {word.slice(word.length - 1, word.length) == '}' ? (
                       <span className="ph-no-capture text-yellow">
                         {word.slice(word.length - 1, word.length)}
                       </span>
@@ -135,7 +135,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 max-w-2xl 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/DropZone.tsx

@@ -66,13 +66,15 @@ const DropZone = ({
       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) => [
-        guidGenerator(),
-        numCurrentRows + index,
-        key,
-        keyPairs[key as keyof typeof keyPairs],
-        "shared",
-      ]);
+      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",
+        };
+      });
       setData(newData);
       setButtonReady(true);
     };
@@ -100,13 +102,15 @@ const DropZone = ({
       if (typeof result === "string") {
         const newData = result
           .split("\n")
-          .map((line: string, index: number) => [
-            guidGenerator(),
-            numCurrentRows + index,
-            line.split("=")[0],
-            line.split("=").slice(1, line.split("=").length).join("="),
-            "shared",
-          ]);
+          .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);
       }

frontend/components/integrations/CloudIntegration.tsx

@@ -0,0 +1,121 @@
+import React from "react";
+import Image from "next/image";
+import { useRouter } from "next/router";
+import {
+    faCheck,
+    faX,
+  } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import deleteIntegrationAuth from "../../pages/api/integrations/DeleteIntegrationAuth";
+
+interface CloudIntegrationOption {
+    isAvailable: boolean;
+    name: string;
+    type: string;
+    clientId: string;
+    docsLink: string;
+    slug: string;
+}
+
+interface IntegrationAuth {
+    _id: string;
+    integration: string;
+}
+
+interface Props {
+    cloudIntegrationOption: CloudIntegrationOption;
+    setSelectedIntegrationOption: (cloudIntegration: CloudIntegrationOption) => void;
+    integrationOptionPress: (cloudIntegrationOption: CloudIntegrationOption) => void;
+    integrationAuths: IntegrationAuth[];
+}
+
+const CloudIntegration = ({
+    cloudIntegrationOption,
+    setSelectedIntegrationOption,
+    integrationOptionPress,
+    integrationAuths
+}: Props) => {
+    const router = useRouter();
+    return integrationAuths ? (
+        <div
+            className={`relative ${
+                cloudIntegrationOption.isAvailable
+                ? "hover:bg-white/10 duration-200 cursor-pointer"
+                : "opacity-50"
+            } flex flex-row bg-white/5 h-32 rounded-md p-4 items-center`}
+            onClick={() => {
+                if (!cloudIntegrationOption.isAvailable) return;
+                setSelectedIntegrationOption(cloudIntegrationOption);
+                integrationOptionPress(cloudIntegrationOption);
+            }}
+            key={cloudIntegrationOption.name}
+        >
+            <Image
+                src={`/images/integrations/${cloudIntegrationOption.name}.png`}
+                height={70}
+                width={70}
+                alt="integration logo"
+            />
+            {cloudIntegrationOption.name.split(" ").length > 2 ? (
+            <div className="font-semibold text-gray-300 group-hover:text-gray-200 duration-200 text-3xl ml-4 max-w-xs">
+                <div>{cloudIntegrationOption.name.split(" ")[0]}</div>
+                <div className="text-base">
+                    {cloudIntegrationOption.name.split(" ")[1]}{" "}
+                    {cloudIntegrationOption.name.split(" ")[2]}
+                </div>
+            </div>
+            ) : (
+            <div className="font-semibold text-gray-300 group-hover:text-gray-200 duration-200 text-xl ml-4 max-w-xs">
+                {cloudIntegrationOption.name}
+            </div>
+            )}
+        {cloudIntegrationOption.isAvailable &&
+            integrationAuths
+            .map((authorization) => authorization.integration)
+            .includes(cloudIntegrationOption.name.toLowerCase()) && (
+            <div className="absolute group z-50 top-0 right-0 flex flex-row">
+                <div
+                    onClick={(event) => {
+                        event.stopPropagation();
+                        deleteIntegrationAuth({
+                        integrationAuthId: integrationAuths
+                            .filter(
+                            (authorization) =>
+                                authorization.integration ==
+                                cloudIntegrationOption.name.toLowerCase()
+                            )
+                            .map((authorization) => authorization._id)[0],
+                        });
+                        
+                        router.reload();
+                    }}
+                    className="cursor-pointer w-max bg-red py-0.5 px-2 rounded-b-md text-xs flex flex-row items-center opacity-0 group-hover:opacity-100 duration-200"
+                >
+                <FontAwesomeIcon
+                    icon={faX}
+                    className="text-xs mr-2 py-px"
+                />
+                Revoke
+                </div>
+                <div className="w-max bg-primary py-0.5 px-2 rounded-bl-md rounded-tr-md text-xs flex flex-row items-center text-black opacity-90 group-hover:opacity-100 duration-200">
+                <FontAwesomeIcon
+                    icon={faCheck}
+                    className="text-xs mr-2"
+                />
+                Authorized
+                </div>
+            </div>
+            )}
+        {!cloudIntegrationOption.isAvailable && (
+            <div className="absolute group z-50 top-0 right-0 flex flex-row">
+            <div className="w-max bg-yellow py-0.5 px-2 rounded-bl-md rounded-tr-md text-xs flex flex-row items-center text-black opacity-90">
+                Coming Soon
+            </div>
+            </div>
+        )}
+        </div>
+    ) : <div></div>
+} 
+
+export default CloudIntegration;

frontend/components/integrations/CloudIntegrationSection.tsx

@@ -0,0 +1,50 @@
+import React from "react";
+
+import CloudIntegration from "./CloudIntegration";
+
+interface CloudIntegrationOption {
+    isAvailable: boolean;
+    name: string;
+    type: string;
+    clientId: string;
+    docsLink: string;
+    slug: string;
+}
+
+interface Props {
+    cloudIntegrationOptions: CloudIntegrationOption[];
+    setSelectedIntegrationOption: () => void;
+    integrationOptionPress: () => void;
+    integrationAuths: any;
+}
+
+const CloudIntegrationSection = ({ 
+    cloudIntegrationOptions,
+    setSelectedIntegrationOption,
+    integrationOptionPress,
+    integrationAuths
+}: Props) => {
+    return (
+        <>
+            <div className={`flex flex-col justify-between items-start m-4 mt-7 text-xl max-w-5xl px-2`}>
+                <h1 className="font-semibold text-3xl">Cloud Integrations</h1>
+                <p className="text-base text-gray-400">
+                    Click on an integration to begin syncing secrets to it.
+                </p>
+            </div>
+            <div className="grid gap-4 grid-cols-4 grid-rows-2 mx-6 max-w-5xl">
+                {cloudIntegrationOptions.map((cloudIntegrationOption) => (
+                    <CloudIntegration 
+                        cloudIntegrationOption={cloudIntegrationOption}
+                        setSelectedIntegrationOption={setSelectedIntegrationOption}
+                        integrationOptionPress={integrationOptionPress}
+                        integrationAuths={integrationAuths}
+                        key={`cloud-integration-${cloudIntegrationOption.slug}`}
+                    />
+                ))}
+            </div>
+        </>
+    );
+}
+
+export default CloudIntegrationSection;

frontend/components/integrations/FrameworkIntegration.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+import Image from "next/image";
+
+interface Framework {
+  name: string;
+  slug: string;
+  image: string;
+  docsLink: string;
+}
+
+const FrameworkIntegration = ({
+  framework
+}: {
+  framework: Framework;
+}) => {
+  return (
+      <a
+        href={framework.docsLink}
+        rel="noopener"
+        className={`relative flex flex-row items-center justify-center bg-bunker-500 hover:bg-gradient-to-tr  duration-200 h-32 rounded-md p-0.5 items-center cursor-pointer`}
+      >
+        <div className={`hover:bg-white/10 duration-200 cursor-pointer font-semibold bg-bunker-500 flex flex-col items-center justify-center h-full w-full rounded-md text-gray-300 group-hover:text-gray-200 duration-200 ${framework?.name?.split(" ").length > 1 ? "text-sm px-1" : "text-xl px-2"} text-center w-full max-w-xs`}>
+          {framework?.image && <Image
+            src={`/images/integrations/${framework.image}.png`}
+            height={framework?.name ? 60 : 90}
+            width={framework?.name ? 60 : 90}
+            alt="integration logo"
+          ></Image>}
+          {framework?.name && framework?.image && <div className="h-2"></div>}
+          {framework?.name && framework.name}
+        </div>
+      </a>
+  );
+}
+
+export default FrameworkIntegration;

frontend/components/integrations/FrameworkIntegrationSection.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+
+import FrameworkIntegration from "./FrameworkIntegration";
+
+interface Framework {
+    name: string;
+    image: string;
+    link: string;
+    slug: string;
+    docsLink: string;
+}
+
+interface Props {
+    frameworks: [Framework]
+}
+
+const FrameworkIntegrationSection = ({ frameworks }: Props) => {
+    return (
+      <>
+        <div className="flex flex-col justify-between items-start mx-4 mt-12 mb-4 text-xl max-w-5xl px-2">
+          <h1 className="font-semibold text-3xl">Framework Integrations</h1>
+          <p className="text-base text-gray-400">
+            Click on a framework to get the setup instructions.
+          </p>
+        </div>
+        <div className="grid gap-4 grid-cols-7 grid-rows-2 mx-6 mt-4 max-w-5xl">
+          {frameworks.map((framework) => (
+            <FrameworkIntegration 
+              framework={framework}
+              key={`framework-integration-${framework.slug}`}
+            />
+          ))}
+        </div>
+      </>
+    );
+}
+
+export default FrameworkIntegrationSection;
+

frontend/components/integrations/Integration.tsx

@@ -0,0 +1,231 @@
+import React, { useEffect, useState } from "react";
+import { useRouter } from "next/router";
+import {
+    faArrowRight,
+    faRotate,
+    faX,
+} from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import Button from "~/components/basic/buttons/Button";
+import ListBox from "~/components/basic/Listbox";
+
+import deleteIntegration from "../../pages/api/integrations/DeleteIntegration"
+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;
+    environment: string;
+    integration: string;
+    integrationAuth: string;
+    isActive: boolean;
+    context: string;
+}
+
+interface IntegrationApp {
+  name: string;
+  siteId: string;
+}
+
+const Integration = ({ 
+  integration
+}: {
+  integration: Integration;
+}) => {
+    const [integrationEnvironment, setIntegrationEnvironment] = useState(
+      reverseEnvMapping[integration.environment]
+    );
+    const [fileState, setFileState] = useState([]);
+    const router = useRouter();
+    const [apps, setApps] = useState<IntegrationApp[]>([]); // integration app objects
+    const [integrationApp, setIntegrationApp] = useState(""); // integration app name
+    const [integrationTarget, setIntegrationTarget] = useState(""); // vercel-specific integration param
+    const [integrationContext, setIntegrationContext] = useState(""); // netlify-specific integration param
+  
+    useEffect(() => {
+      
+      const loadIntegration = async () => {
+        interface App {
+          name: string;
+          siteId?: string;
+        }
+        
+        const tempApps: [IntegrationApp] = await getIntegrationApps({
+          integrationAuthId: integration.integrationAuth,
+        });
+        
+        setApps(tempApps);
+        setIntegrationApp(
+          integration.app ? integration.app : tempApps[0].name
+        );
+        
+        switch (integration.integration) {
+          case "vercel":
+            setIntegrationTarget("Development");
+            break;
+          case "netlify":
+            setIntegrationContext(integration?.context ? contextNetlifyMapping[integration.context] : "Local development");
+            break;
+          default:
+            break;
+        }
+      }
+
+      loadIntegration();
+    }, []);
+    
+    const renderIntegrationSpecificParams = (integration: Integration) => {
+      try {
+        switch (integration.integration) {
+          case "vercel":
+            return (
+              <div>
+                <div className="text-gray-400 text-xs font-semibold mb-2">
+                    ENVIRONMENT
+                </div>
+                <ListBox
+                  data={!integration.isActive ? [
+                    "Production",
+                    "Preview",
+                    "Development"
+                  ] : null}
+                  selected={"Production"}
+                  onChange={setIntegrationTarget}
+                />
+            </div>
+            );
+          case "netlify":
+            return (
+              <div>
+                <div className="text-gray-400 text-xs font-semibold mb-2">
+                  CONTEXT
+                </div>
+                <ListBox
+                  data={!integration.isActive ? [
+                    "Production",
+                    "Deploy previews",
+                    "Branch deploys",
+                    "Local development"
+                  ] : null}
+                  selected={integrationContext}
+                  onChange={setIntegrationContext}
+                />
+              </div>
+            );
+          default:
+            return <div></div>;
+        }
+      } catch (err) {
+        console.error(err);
+      }
+    }
+    
+    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>
+            <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);
+              }}
+              isFull={true}
+            />
+          </div>
+          <div className="pt-2">
+            <FontAwesomeIcon
+              icon={faArrowRight}
+              className="mx-4 text-gray-400 mt-8"
+            /> 
+          </div>
+          <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">
+              {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>
+            <ListBox
+              data={!integration.isActive ? apps.map((app) => app.name) : null}
+              selected={integrationApp}
+              onChange={(app) => {
+                setIntegrationApp(app);
+              }}
+            />
+          </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>
+        </div>
+      </div>
+    );
+  };
+
+export default Integration;

frontend/components/integrations/IntegrationSection.tsx

@@ -0,0 +1,42 @@
+import React from "react";
+
+import guidGenerator from "~/utilities/randomId";
+
+import Integration from "./Integration";
+
+interface Props {
+  integrations: any
+}
+
+interface IntegrationType {
+  _id: string;
+  app?: string;
+  environment: string;
+  integration: string;
+  integrationAuth: string;
+  isActive: boolean;
+  context: string;
+}
+
+const ProjectIntegrationSection = ({
+  integrations
+}: Props) => {
+    return integrations.length > 0 ? (
+      <div className="mb-12">
+        <div className="flex flex-col justify-between items-start mx-4 mb-4 mt-6 text-xl max-w-5xl px-2">
+          <h1 className="font-semibold text-3xl">Current Integrations</h1>
+          <p className="text-base text-gray-400">
+            Manage your integrations of Infisical with third-party services.
+          </p>
+        </div>
+        {integrations.map((integration: IntegrationType)  => ( 
+          <Integration
+            key={guidGenerator()}
+            integration={integration}
+          />
+        ))}
+      </div>
+    ) : <div></div>
+}
+
+export default ProjectIntegrationSection;

frontend/components/navigation/NavBarDashboard.tsx

@@ -23,9 +23,7 @@ import getOrganization from "../../pages/api/organization/GetOrg";
 import getOrganizations from "../../pages/api/organization/getOrgs";
 import getUser from "../../pages/api/user/getUser";
 import guidGenerator from "../utilities/randomId";
-/**
- * @param {(key: string) => string} t
- */
+
 const supportOptions = (t: TFunction) => [
   [
     <FontAwesomeIcon className="text-lg pl-1.5 pr-3" icon={faSlack} />,

frontend/components/utilities/SecurityClient.js

@@ -1,24 +0,0 @@
-import token from "~/pages/api/auth/Token";
-
-export default class SecurityClient {
-  static #token = "";
-
-  constructor() {}
-
-  static setToken(token) {
-    this.#token = token;
-  }
-
-  static async fetchCall(resource, options) {
-    let req = new Request(resource, options);
-
-    if (this.#token == "") {
-      this.setToken(await token());
-    }
-
-    if (this.#token) {
-      req.headers.set("Authorization", "Bearer " + this.#token);
-      return fetch(req);
-    }
-  }
-}

frontend/components/utilities/SecurityClient.ts

@@ -0,0 +1,27 @@
+import token from '~/pages/api/auth/Token';
+
+export default class SecurityClient {
+  static #token = '';
+
+  constructor() {}
+
+  static setToken(token: string) {
+    this.#token = token;
+  }
+
+  static async fetchCall(
+    resource: RequestInfo,
+    options?: RequestInit | undefined
+  ) {
+    const req = new Request(resource, options);
+
+    if (this.#token == '') {
+      this.setToken(await token());
+    }
+
+    if (this.#token) {
+      req.headers.set('Authorization', 'Bearer ' + this.#token);
+      return fetch(req);
+    }
+  }
+}

frontend/components/utilities/attemptLogin.js

@@ -1,18 +1,17 @@
-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 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 { initPostHog } from "../analytics/posthog";
-import pushKeys from "./secrets/pushKeys";
-import { ENV } from "./config";
-import { saveTokenToLocalStorage } from "./saveTokenToLocalStorage";
-import SecurityClient from "./SecurityClient";
+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 nacl = require('tweetnacl');
+nacl.util = require('tweetnacl-util');
+const jsrp = require('jsrp');
 const client = new jsrp.client();
 
 /**
@@ -33,17 +32,19 @@ const attemptLogin = async (
   isLogin
 ) => {
   try {
+    const telemetry = new Telemetry().getInstance();
+
     client.init(
       {
         username: email,
-        password: password,
+        password: password
       },
       async () => {
         const clientPublicKey = client.getPublicKey();
 
-        const { serverPublicKey, salt } = await login1(email, clientPublicKey);
-
         try {
+          const { serverPublicKey, salt } = await login1(email, clientPublicKey);
+
           client.setSalt(salt);
           client.setServerPublicKey(serverPublicKey);
           const clientProof = client.getProof(); // called M1
@@ -53,54 +54,53 @@ const attemptLogin = async (
             await login2(email, clientProof);
           SecurityClient.setToken(token);
 
-          const privateKey = Aes256Gcm.decrypt(
-            encryptedPrivateKey,
+          const privateKey = Aes256Gcm.decrypt({
+            ciphertext: encryptedPrivateKey,
             iv,
             tag,
-            password
+            secret: password
               .slice(0, 32)
               .padStart(
                 32 + (password.slice(0, 32).length - new Blob([password]).size),
-                "0"
+                '0'
               )
-          );
+          });
 
           saveTokenToLocalStorage({
-            token,
             publicKey,
             encryptedPrivateKey,
             iv,
             tag,
-            privateKey,
+            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");
+          if (userOrgsData.includes(localStorage.getItem('orgData.id'))) {
+            orgToLogin = localStorage.getItem('orgData.id');
           } else {
             orgToLogin = userOrgsData[0];
-            localStorage.setItem("orgData.id", orgToLogin);
+            localStorage.setItem('orgData.id', orgToLogin);
           }
 
           let orgUserProjects = await getOrganizationUserProjects({
-            orgId: orgToLogin,
+            orgId: orgToLogin
           });
 
           orgUserProjects = orgUserProjects?.map((project) => project._id);
           let projectToLogin;
           if (
-            orgUserProjects.includes(localStorage.getItem("projectData.id"))
+            orgUserProjects.includes(localStorage.getItem('projectData.id'))
           ) {
-            projectToLogin = localStorage.getItem("projectData.id");
+            projectToLogin = localStorage.getItem('projectData.id');
           } else {
             try {
               projectToLogin = orgUserProjects[0];
-              localStorage.setItem("projectData.id", projectToLogin);
+              localStorage.setItem('projectData.id', projectToLogin);
             } catch (error) {
-              console.log("ERROR: User likely has no projects. ", error);
+              console.log('ERROR: User likely has no projects. ', error);
             }
           }
 
@@ -109,45 +109,35 @@ const attemptLogin = async (
             await pushKeys({
               obj: {
                 DATABASE_URL: [
-                  "mongodb+srv://${DB_USERNAME}:${DB_PASSWORD}@mongodb.net",
-                  "personal",
+                  'mongodb+srv://${DB_USERNAME}:${DB_PASSWORD}@mongodb.net',
+                  'personal'
                 ],
-                DB_USERNAME: ["user1234", "personal"],
-                DB_PASSWORD: ["ah8jak3hk8dhiu4dw7whxwe1l", "personal"],
-                TWILIO_AUTH_TOKEN: [
-                  "hgSIwDAKvz8PJfkj6xkzYqzGmAP3HLuG",
-                  "shared",
-                ],
-                WEBSITE_URL: ["http://localhost:3000", "shared"],
-                STRIPE_SECRET_KEY: ["sk_test_7348oyho4hfq398HIUOH78", "shared"],
+                DB_USERNAME: ['user1234', 'personal'],
+                DB_PASSWORD: ['example_password', 'personal'],
+                TWILIO_AUTH_TOKEN: ['example_twillion_token', 'shared'],
+                WEBSITE_URL: ['http://localhost:3000', 'shared'],
+                STRIPE_SECRET_KEY: ['sk_test_7348oyho4hfq398HIUOH78', 'shared']
               },
               workspaceId: projectToLogin,
-              env: "Development",
+              env: 'Development'
             });
           }
-          try {
-            if (email) {
-              if (ENV == "production") {
-                const posthog = initPostHog();
-                posthog.identify(email);
-                posthog.capture("User Logged In");
-              }
-            }
-          } catch (error) {
-            console.log("posthog", error);
+          if (email) {
+            telemetry.identify(email);
+            telemetry.capture('User Logged In');
           }
 
           if (isLogin) {
-            router.push("/dashboard/");
+            router.push('/dashboard/');
           }
         } catch (error) {
           setErrorLogin(true);
-          console.log("Login response not available");
+          console.log('Login response not available');
         }
       }
     );
   } catch (error) {
-    console.log("Something went wrong during authentication");
+    console.log('Something went wrong during authentication');
   }
   return true;
 };

frontend/components/utilities/checks/OnboardingCheck.ts

@@ -0,0 +1,71 @@
+import getOrganizationUsers from '~/pages/api/organization/GetOrgUsers';
+import checkUserAction from '~/pages/api/userActions/checkUserAction';
+
+interface OnboardingCheckProps {
+  setTotalOnboardingActionsDone?: (value: number) => void;
+  setHasUserClickedSlack?: (value: boolean) => void;
+  setHasUserClickedIntro?: (value: boolean) => void;
+  setHasUserStarred?: (value: boolean) => void;
+  setHasUserPushedSecrets?: (value: boolean) => void;
+  setUsersInOrg?: (value: boolean) => void;
+}
+
+/**
+ * This function checks which onboarding steps a user has already finished.
+ */
+const onboardingCheck = async ({
+  setTotalOnboardingActionsDone,
+  setHasUserClickedSlack,
+  setHasUserClickedIntro,
+  setHasUserStarred,
+  setHasUserPushedSecrets,
+  setUsersInOrg
+}: OnboardingCheckProps) => {
+  let countActions = 0;
+  const userActionSlack = await checkUserAction({
+    action: 'slack_cta_clicked'
+  });
+  if (userActionSlack) {
+    countActions = countActions + 1;
+  }
+  setHasUserClickedSlack &&
+    setHasUserClickedSlack(userActionSlack ? true : false);
+
+  const userActionSecrets = await checkUserAction({
+    action: 'first_time_secrets_pushed'
+  });
+  if (userActionSecrets) {
+    countActions = countActions + 1;
+  }
+  setHasUserPushedSecrets &&
+    setHasUserPushedSecrets(userActionSecrets ? true : false);
+
+  const userActionIntro = await checkUserAction({
+    action: 'intro_cta_clicked'
+  });
+  if (userActionIntro) {
+    countActions = countActions + 1;
+  }
+  setHasUserClickedIntro &&
+    setHasUserClickedIntro(userActionIntro ? true : false);
+
+  const userActionStar = await checkUserAction({
+    action: 'star_cta_clicked'
+  });
+  if (userActionStar) {
+    countActions = countActions + 1;
+  }
+  setHasUserStarred && setHasUserStarred(userActionStar ? true : false);
+
+  const orgId = localStorage.getItem('orgData.id');
+  const orgUsers = await getOrganizationUsers({
+    orgId: orgId ? orgId : ''
+  });
+  if (orgUsers.length > 1) {
+    countActions = countActions + 1;
+  }
+  setUsersInOrg && setUsersInOrg(orgUsers.length > 1);
+  setTotalOnboardingActionsDone && setTotalOnboardingActionsDone(countActions);
+};
+
+export default onboardingCheck;

frontend/components/utilities/config/index.ts

@@ -4,14 +4,11 @@ const POSTHOG_HOST =
   process.env.NEXT_PUBLIC_POSTHOG_HOST! || "https://app.posthog.com";
 const STRIPE_PRODUCT_PRO = process.env.NEXT_PUBLIC_STRIPE_PRODUCT_PRO!;
 const STRIPE_PRODUCT_STARTER = process.env.NEXT_PUBLIC_STRIPE_PRODUCT_STARTER!;
-const TELEMETRY_ENABLED =
-  process.env.NEXT_PUBLIC_TELEMETRY_ENABLED! !== "false";
 
 export {
   ENV,
   POSTHOG_API_KEY,
   POSTHOG_HOST,
   STRIPE_PRODUCT_PRO,
-  STRIPE_PRODUCT_STARTER,
-  TELEMETRY_ENABLED,
-};
+  STRIPE_PRODUCT_STARTER
+};

frontend/components/utilities/cryptography/aes-256-gcm.js

@@ -1,63 +0,0 @@
-/**
- * @fileoverview Provides easy encryption/decryption methods using AES 256 GCM.
- */
-
-"use strict";
-
-const crypto = require("crypto");
-
-const ALGORITHM = "aes-256-gcm";
-const BLOCK_SIZE_BYTES = 16; // 128 bit
-
-/**
- * Provides easy encryption/decryption methods using AES 256 GCM.
- */
-class Aes256Gcm {
-  /**
-   * No need to run the constructor. The class only has static methods.
-   */
-  constructor() {}
-
-  /**
-   * Encrypts text with AES 256 GCM.
-   * @param {string} text - Cleartext to encode.
-   * @param {string} secret - Shared secret key, must be 32 bytes.
-   * @returns {object}
-   */
-  static encrypt(text, secret) {
-    const iv = crypto.randomBytes(BLOCK_SIZE_BYTES);
-    const cipher = crypto.createCipheriv(ALGORITHM, secret, iv);
-
-    let ciphertext = cipher.update(text, "utf8", "base64");
-    ciphertext += cipher.final("base64");
-    return {
-      ciphertext,
-      iv: iv.toString("base64"),
-      tag: cipher.getAuthTag().toString("base64"),
-    };
-  }
-
-  /**
-   * Decrypts AES 256 CGM encrypted text.
-   * @param {string} ciphertext - Base64-encoded ciphertext.
-   * @param {string} iv - The base64-encoded initialization vector.
-   * @param {string} tag - The base64-encoded authentication tag generated by getAuthTag().
-   * @param {string} secret - Shared secret key, must be 32 bytes.
-   * @returns {string}
-   */
-  static decrypt(ciphertext, iv, tag, secret) {
-    const decipher = crypto.createDecipheriv(
-      ALGORITHM,
-      secret,
-      Buffer.from(iv, "base64")
-    );
-    decipher.setAuthTag(Buffer.from(tag, "base64"));
-
-    let cleartext = decipher.update(ciphertext, "base64", "utf8");
-    cleartext += decipher.final("utf8");
-
-    return cleartext;
-  }
-}
-
-module.exports = Aes256Gcm;

frontend/components/utilities/cryptography/aes-256-gcm.ts

@@ -0,0 +1,82 @@
+/**
+ * @fileoverview Provides easy encryption/decryption methods using AES 256 GCM.
+ */
+
+import crypto from 'crypto';
+
+const ALGORITHM = 'aes-256-gcm';
+const BLOCK_SIZE_BYTES = 16; // 128 bit
+
+interface EncryptProps {
+  text: string;
+  secret: string;
+}
+
+interface DecryptProps {
+  ciphertext: string;
+  iv: string;
+  tag: string;
+  secret: string;
+}
+
+interface EncryptOutputProps {
+  ciphertext: string;
+  iv: string;
+  tag: string;
+}
+
+/**
+ * Provides easy encryption/decryption methods using AES 256 GCM.
+ */
+class Aes256Gcm {
+  /**
+   * No need to run the constructor. The class only has static methods.
+   */
+  constructor() {}
+
+  /**
+   * Encrypts text with AES 256 GCM.
+   * @param {object} obj
+   * @param {string} obj.text - Cleartext to encode.
+   * @param {string} obj.secret - Shared secret key, must be 32 bytes.
+   * @returns {object}
+   */
+  // { ciphertext: string; iv: string; tag: string; }
+  static encrypt({ text, secret }: EncryptProps): EncryptOutputProps {
+    const iv = crypto.randomBytes(BLOCK_SIZE_BYTES);
+    const cipher = crypto.createCipheriv(ALGORITHM, secret, iv);
+
+    let ciphertext = cipher.update(text, 'utf8', 'base64');
+    ciphertext += cipher.final('base64');
+    return {
+      ciphertext,
+      iv: iv.toString('base64'),
+      tag: cipher.getAuthTag().toString('base64')
+    };
+  }
+
+  /**
+   * Decrypts AES 256 CGM encrypted text.
+   * @param {object} obj
+   * @param {string} obj.ciphertext - Base64-encoded ciphertext.
+   * @param {string} obj.iv - The base64-encoded initialization vector.
+   * @param {string} obj.tag - The base64-encoded authentication tag generated by getAuthTag().
+   * @param {string} obj.secret - Shared secret key, must be 32 bytes.
+   * @returns {string}
+   */
+  static decrypt({ ciphertext, iv, tag, secret }: DecryptProps): string {
+    const decipher = crypto.createDecipheriv(
+      ALGORITHM,
+      secret,
+      Buffer.from(iv, 'base64')
+    );
+    decipher.setAuthTag(Buffer.from(tag, 'base64'));
+
+    let cleartext = decipher.update(ciphertext, 'base64', 'utf8');
+    cleartext += decipher.final('utf8');
+
+    return cleartext;
+  }
+}
+
+export default Aes256Gcm;

frontend/components/utilities/cryptography/changePassword.js

@@ -1,11 +1,11 @@
-import changePassword2 from "~/pages/api/auth/ChangePassword2";
-import SRP1 from "~/pages/api/auth/SRP1";
+import changePassword2 from '~/pages/api/auth/ChangePassword2';
+import SRP1 from '~/pages/api/auth/SRP1';
 
-import Aes256Gcm from "./aes-256-gcm";
+import Aes256Gcm from './aes-256-gcm';
 
-const nacl = require("tweetnacl");
-nacl.util = require("tweetnacl-util");
-const jsrp = require("jsrp");
+const nacl = require('tweetnacl');
+nacl.util = require('tweetnacl-util');
+const jsrp = require('jsrp');
 const clientOldPassword = new jsrp.client();
 const clientNewPassword = new jsrp.client();
 
@@ -34,7 +34,7 @@ const changePassword = async (
     clientOldPassword.init(
       {
         username: email,
-        password: currentPassword,
+        password: currentPassword
       },
       async () => {
         const clientPublicKey = clientOldPassword.getPublicKey();
@@ -42,13 +42,13 @@ const changePassword = async (
         let serverPublicKey, salt;
         try {
           const res = await SRP1({
-            clientPublicKey: clientPublicKey,
+            clientPublicKey: clientPublicKey
           });
           serverPublicKey = res.serverPublicKey;
           salt = res.salt;
         } catch (err) {
           setCurrentPasswordError(true);
-          console.log("Wrong current password", err, 1);
+          console.log('Wrong current password', err, 1);
         }
 
         clientOldPassword.setSalt(salt);
@@ -58,27 +58,27 @@ const changePassword = async (
         clientNewPassword.init(
           {
             username: email,
-            password: newPassword,
+            password: newPassword
           },
           async () => {
             clientNewPassword.createVerifier(async (err, result) => {
               // The Blob part here is needed to account for symbols that count as 2+ bytes (e.g., é, å, ø)
-              let { ciphertext, iv, tag } = Aes256Gcm.encrypt(
-                localStorage.getItem("PRIVATE_KEY"),
-                newPassword
+              const { ciphertext, iv, tag } = Aes256Gcm.encrypt({
+                text: localStorage.getItem('PRIVATE_KEY'),
+                secret: newPassword
                   .slice(0, 32)
                   .padStart(
                     32 +
                       (newPassword.slice(0, 32).length -
                         new Blob([newPassword]).size),
-                    "0"
+                    '0'
                   )
-              );
+              });
 
               if (ciphertext) {
-                localStorage.setItem("encryptedPrivateKey", ciphertext);
-                localStorage.setItem("iv", iv);
-                localStorage.setItem("tag", tag);
+                localStorage.setItem('encryptedPrivateKey', ciphertext);
+                localStorage.setItem('iv', iv);
+                localStorage.setItem('tag', tag);
 
                 let res;
                 try {
@@ -88,14 +88,14 @@ const changePassword = async (
                     tag,
                     salt: result.salt,
                     verifier: result.verifier,
-                    clientProof,
+                    clientProof
                   });
                   if (res.status == 400) {
                     setCurrentPasswordError(true);
                   } else if (res.status == 200) {
                     setPasswordChanged(true);
-                    setCurrentPassword("");
-                    setNewPassword("");
+                    setCurrentPassword('');
+                    setNewPassword('');
                   }
                 } catch (err) {
                   setCurrentPasswordError(true);
@@ -108,7 +108,7 @@ const changePassword = async (
       }
     );
   } catch (error) {
-    console.log("Something went wrong during changing the password");
+    console.log('Something went wrong during changing the password');
   }
   return true;
 };

frontend/components/utilities/cryptography/crypto.ts

@@ -1,12 +1,12 @@
-const nacl = require("tweetnacl");
-nacl.util = require("tweetnacl-util");
-const aes = require("./aes-256-gcm");
+const nacl = require('tweetnacl');
+nacl.util = require('tweetnacl-util');
+import aes from './aes-256-gcm';
 
 type encryptAsymmetricProps = {
   plaintext: string;
   publicKey: string;
   privateKey: string;
-}
+};
 
 /**
  * Return assymmetrically encrypted [plaintext] using [publicKey] where
@@ -19,7 +19,11 @@ type encryptAsymmetricProps = {
  * @returns {String} ciphertext - base64-encoded ciphertext
  * @returns {String} nonce - base64-encoded nonce
  */
-const encryptAssymmetric = ({ plaintext, publicKey, privateKey }: encryptAsymmetricProps): object => {
+const encryptAssymmetric = ({
+  plaintext,
+  publicKey,
+  privateKey
+}: encryptAsymmetricProps): object => {
   const nonce = nacl.randomBytes(24);
   const ciphertext = nacl.box(
     nacl.util.decodeUTF8(plaintext),
@@ -30,7 +34,7 @@ const encryptAssymmetric = ({ plaintext, publicKey, privateKey }: encryptAsymmet
 
   return {
     ciphertext: nacl.util.encodeBase64(ciphertext),
-    nonce: nacl.util.encodeBase64(nonce),
+    nonce: nacl.util.encodeBase64(nonce)
   };
 };
 
@@ -39,7 +43,7 @@ type decryptAsymmetricProps = {
   nonce: string;
   publicKey: string;
   privateKey: string;
-}
+};
 
 /**
  * Return assymmetrically decrypted [ciphertext] using [privateKey] where
@@ -49,9 +53,13 @@ type decryptAsymmetricProps = {
  * @param {String} obj.nonce - nonce
  * @param {String} obj.publicKey - base64-encoded public key of the sender
  * @param {String} obj.privateKey - base64-encoded private key of the receiver (current user)
- * @param {String} plaintext - UTF8 plaintext
  */
-const decryptAssymmetric = ({ ciphertext, nonce, publicKey, privateKey }: decryptAsymmetricProps): string => {
+const decryptAssymmetric = ({
+  ciphertext,
+  nonce,
+  publicKey,
+  privateKey
+}: decryptAsymmetricProps): string => {
   const plaintext = nacl.box.open(
     nacl.util.decodeBase64(ciphertext),
     nacl.util.decodeBase64(nonce),
@@ -65,7 +73,7 @@ const decryptAssymmetric = ({ ciphertext, nonce, publicKey, privateKey }: decryp
 type encryptSymmetricProps = {
   plaintext: string;
   key: string;
-}
+};
 
 /**
  * Return symmetrically encrypted [plaintext] using [key].
@@ -73,15 +81,18 @@ type encryptSymmetricProps = {
  * @param {String} obj.plaintext - plaintext to encrypt
  * @param {String} obj.key - 16-byte hex key
  */
-const encryptSymmetric = ({ plaintext, key }: encryptSymmetricProps): object => {
+const encryptSymmetric = ({
+  plaintext,
+  key
+}: encryptSymmetricProps): object => {
   let ciphertext, iv, tag;
   try {
-    const obj = aes.encrypt(plaintext, key);
+    const obj = aes.encrypt({ text: plaintext, secret: key });
     ciphertext = obj.ciphertext;
     iv = obj.iv;
     tag = obj.tag;
   } catch (err) {
-    console.log("Failed to perform encryption");
+    console.log('Failed to perform encryption');
     console.log(err);
     process.exit(1);
   }
@@ -89,7 +100,7 @@ const encryptSymmetric = ({ plaintext, key }: encryptSymmetricProps): object =>
   return {
     ciphertext,
     iv,
-    tag,
+    tag
   };
 };
 
@@ -98,7 +109,7 @@ type decryptSymmetricProps = {
   iv: string;
   tag: string;
   key: string;
-}
+};
 
 /**
  * Return symmetrically decypted [ciphertext] using [iv], [tag],
@@ -110,12 +121,17 @@ type decryptSymmetricProps = {
  * @param {String} obj.key - 32-byte hex key
  *
  */
-const decryptSymmetric = ({ ciphertext, iv, tag, key }: decryptSymmetricProps): string => {
+const decryptSymmetric = ({
+  ciphertext,
+  iv,
+  tag,
+  key
+}: decryptSymmetricProps): string => {
   let plaintext;
   try {
-    plaintext = aes.decrypt(ciphertext, iv, tag, key);
+    plaintext = aes.decrypt({ ciphertext, iv, tag, secret: key });
   } catch (err) {
-    console.log("Failed to perform decryption");
+    console.log('Failed to perform decryption');
     process.exit(1);
   }
 
@@ -126,5 +142,5 @@ export {
   decryptAssymmetric,
   decryptSymmetric,
   encryptAssymmetric,
-  encryptSymmetric,
+  encryptSymmetric
 };

frontend/components/utilities/cryptography/issueBackupKey.js

@@ -1,98 +0,0 @@
-import issueBackupPrivateKey from "~/pages/api/auth/IssueBackupPrivateKey";
-import SRP1 from "~/pages/api/auth/SRP1";
-
-import generateBackupPDF from "../generateBackupPDF";
-import Aes256Gcm from "./aes-256-gcm";
-
-const nacl = require("tweetnacl");
-nacl.util = require("tweetnacl-util");
-const jsrp = require("jsrp");
-const clientPassword = new jsrp.client();
-const clientKey = new jsrp.client();
-const crypto = require("crypto");
-
-/**
- * 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 issueBackupKey = async ({
-  email,
-  password,
-  personalName,
-  setBackupKeyError,
-  setBackupKeyIssued,
-}) => {
-  try {
-    setBackupKeyError(false);
-    setBackupKeyIssued(false);
-    clientPassword.init(
-      {
-        username: email,
-        password: password,
-      },
-      async () => {
-        const clientPublicKey = clientPassword.getPublicKey();
-
-        let serverPublicKey, salt;
-        try {
-          const res = await SRP1({
-            clientPublicKey: clientPublicKey,
-          });
-          serverPublicKey = res.serverPublicKey;
-          salt = res.salt;
-        } catch (err) {
-          setBackupKeyError(true);
-          console.log("Wrong current password", err, 1);
-        }
-
-        clientPassword.setSalt(salt);
-        clientPassword.setServerPublicKey(serverPublicKey);
-        const clientProof = clientPassword.getProof(); // called M1
-
-        const generatedKey = crypto.randomBytes(16).toString("hex");
-
-        clientKey.init(
-          {
-            username: email,
-            password: generatedKey,
-          },
-          async () => {
-            clientKey.createVerifier(async (err, result) => {
-              let { ciphertext, iv, tag } = Aes256Gcm.encrypt(
-                localStorage.getItem("PRIVATE_KEY"),
-                generatedKey
-              );
-
-              const res = await issueBackupPrivateKey({
-                encryptedPrivateKey: ciphertext,
-                iv,
-                tag,
-                salt: result.salt,
-                verifier: result.verifier,
-                clientProof,
-              });
-
-              if (res.status == 400) {
-                setBackupKeyError(true);
-              } else if (res.status == 200) {
-                generateBackupPDF(personalName, email, generatedKey);
-                setBackupKeyIssued(true);
-              }
-            });
-          }
-        );
-      }
-    );
-  } catch (error) {
-    setBackupKeyError(true);
-    console.log("Failed to issue a backup key");
-  }
-  return true;
-};
-
-export default issueBackupKey;

frontend/components/utilities/cryptography/issueBackupKey.ts

@@ -0,0 +1,113 @@
+import issueBackupPrivateKey from '~/pages/api/auth/IssueBackupPrivateKey';
+import SRP1 from '~/pages/api/auth/SRP1';
+
+import generateBackupPDF from '../generateBackupPDF';
+import Aes256Gcm from './aes-256-gcm';
+
+const nacl = require('tweetnacl');
+nacl.util = require('tweetnacl-util');
+const jsrp = require('jsrp');
+const clientPassword = new jsrp.client();
+const clientKey = new jsrp.client();
+const crypto = require('crypto');
+
+interface BackupKeyProps {
+  email: string;
+  password: string;
+  personalName: string;
+  setBackupKeyError: (value: boolean) => void;
+  setBackupKeyIssued: (value: boolean) => void;
+}
+
+/**
+ * This function issue a backup key for a user
+ * @param {obkect} obj
+ * @param {string} obj.email - email of a user issuing a backup key
+ * @param {string} obj.password - password of a user issuing a backup key
+ * @param {string} obj.personalName - name of a user issuing a backup key
+ * @param {function} obj.setBackupKeyError - state function that turns true if there is an erorr with a backup key
+ * @param {function} obj.setBackupKeyIssued - state function that turns true if a backup key was issued correctly
+ * @returns
+ */
+const issueBackupKey = async ({
+  email,
+  password,
+  personalName,
+  setBackupKeyError,
+  setBackupKeyIssued
+}: BackupKeyProps) => {
+  try {
+    setBackupKeyError(false);
+    setBackupKeyIssued(false);
+    clientPassword.init(
+      {
+        username: email,
+        password: password
+      },
+      async () => {
+        const clientPublicKey = clientPassword.getPublicKey();
+
+        let serverPublicKey, salt;
+        try {
+          const res = await SRP1({
+            clientPublicKey: clientPublicKey
+          });
+          serverPublicKey = res.serverPublicKey;
+          salt = res.salt;
+        } catch (err) {
+          setBackupKeyError(true);
+          console.log('Wrong current password', err, 1);
+        }
+
+        clientPassword.setSalt(salt);
+        clientPassword.setServerPublicKey(serverPublicKey);
+        const clientProof = clientPassword.getProof(); // called M1
+
+        const generatedKey = crypto.randomBytes(16).toString('hex');
+
+        clientKey.init(
+          {
+            username: email,
+            password: generatedKey
+          },
+          async () => {
+            clientKey.createVerifier(
+              async (err: any, result: { salt: string; verifier: string }) => {
+                const { ciphertext, iv, tag } = Aes256Gcm.encrypt({
+                  text: String(localStorage.getItem('PRIVATE_KEY')),
+                  secret: generatedKey
+                });
+
+                const res = await issueBackupPrivateKey({
+                  encryptedPrivateKey: ciphertext,
+                  iv,
+                  tag,
+                  salt: result.salt,
+                  verifier: result.verifier,
+                  clientProof
+                });
+
+                if (res?.status == 400) {
+                  setBackupKeyError(true);
+                } else if (res?.status == 200) {
+                  generateBackupPDF({
+                    personalName,
+                    personalEmail: email,
+                    generatedKey
+                  });
+                  setBackupKeyIssued(true);
+                }
+              }
+            );
+          }
+        );
+      }
+    );
+  } catch (error) {
+    setBackupKeyError(true);
+    console.log('Failed to issue a backup key');
+  }
+  return true;
+};
+
+export default issueBackupKey;

frontend/components/utilities/file.ts

@@ -6,21 +6,21 @@ const LINE =
  * @param {Buffer} src - source buffer
  * @returns {String} text - text of buffer
  */
-function parse(src) {
-  const obj = {};
+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");
+  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] || "";
+    let value = match[2] || '';
 
     // Remove whitespace
     value = value.trim();
@@ -29,12 +29,12 @@ function parse(src) {
     const maybeQuote = value[0];
 
     // Remove surrounding quotes
-    value = value.replace(/^(['"`])([\s\S]*)\1$/gm, "$2");
+    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");
+      value = value.replace(/\\n/g, '\n');
+      value = value.replace(/\\r/g, '\r');
     }
 
     // Add to object

frontend/components/utilities/randomId.ts

@@ -3,19 +3,19 @@
  * @returns
  */
 const guidGenerator = () => {
-  var S4 = function () {
+  const S4 = function () {
     return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
   };
   return (
     S4() +
     S4() +
-    "-" +
+    '-' +
     S4() +
-    "-" +
+    '-' +
     S4() +
-    "-" +
+    '-' +
     S4() +
-    "-" +
+    '-' +
     S4() +
     S4() +
     S4()

frontend/components/utilities/saveTokenToLocalStorage.ts

@@ -3,7 +3,7 @@ interface Props {
   encryptedPrivateKey: string;
   iv: string;
   tag: string;
-  privateTag: string;
+  privateKey: string;
 }
 
 export const saveTokenToLocalStorage = ({
@@ -11,14 +11,14 @@ export const saveTokenToLocalStorage = ({
   encryptedPrivateKey,
   iv,
   tag,
-  privateTag,
+  privateKey,
 }: Props) => {
   try {
     localStorage.setItem("publicKey", publicKey);
     localStorage.setItem("encryptedPrivateKey", encryptedPrivateKey);
     localStorage.setItem("iv", iv);
     localStorage.setItem("tag", tag);
-    localStorage.setItem("PRIVATE_KEY", privateTag);
+    localStorage.setItem("PRIVATE_KEY", privateKey);
   } catch (err) {
     if (err instanceof Error) {
       throw new Error(

frontend/components/utilities/secrets/getSecretsForProject.js

@@ -1,97 +0,0 @@
-import getSecrets from "~/pages/api/files/GetSecrets";
-
-import { envMapping } from "../../../public/data/frequentConstants";
-import guidGenerator from "../randomId";
-
-const {
-  decryptAssymmetric,
-  decryptSymmetric,
-} = require("../cryptography/crypto");
-const nacl = require("tweetnacl");
-nacl.util = require("tweetnacl-util");
-
-const getSecretsForProject = async ({
-  env,
-  setFileState,
-  setIsKeyAvailable,
-  setData,
-  workspaceId,
-}) => {
-  try {
-    let file;
-    try {
-      file = await getSecrets(workspaceId, envMapping[env]);
-
-      setFileState(file);
-    } catch (error) {
-      console.log("ERROR: Not able to access the latest file");
-    }
-    // This is called isKeyAvilable but what it really means is if a person is able to create new key pairs
-    setIsKeyAvailable(
-      !file.key ? (file.secrets.length == 0 ? true : false) : true
-    );
-
-    const PRIVATE_KEY = localStorage.getItem("PRIVATE_KEY");
-
-    let tempFileState = [];
-    if (file.key) {
-      // assymmetrically decrypt symmetric key with local private key
-      const key = decryptAssymmetric({
-        ciphertext: file.key.encryptedKey,
-        nonce: file.key.nonce,
-        publicKey: file.key.sender.publicKey,
-        privateKey: PRIVATE_KEY,
-      });
-
-      file.secrets.map((secretPair) => {
-        // decrypt .env file with symmetric key
-        const plainTextKey = decryptSymmetric({
-          ciphertext: secretPair.secretKey.ciphertext,
-          iv: secretPair.secretKey.iv,
-          tag: secretPair.secretKey.tag,
-          key,
-        });
-
-        const plainTextValue = decryptSymmetric({
-          ciphertext: secretPair.secretValue.ciphertext,
-          iv: secretPair.secretValue.iv,
-          tag: secretPair.secretValue.tag,
-          key,
-        });
-        tempFileState.push({
-          key: plainTextKey,
-          value: plainTextValue,
-          type: secretPair.type,
-        });
-      });
-    }
-    setFileState(tempFileState);
-
-    setData(
-      tempFileState.map((line, index) => [
-        guidGenerator(),
-        index,
-        line["key"],
-        line["value"],
-        line["type"],
-      ])
-      // .sort((a, b) =>
-      // 	sortMethod == "alphabetical"
-      // 		? a[2].localeCompare(b[2])
-      // 		: b[2].localeCompare(a[2])
-      // )
-    );
-    return tempFileState.map((line, index) => [
-      guidGenerator(),
-      index,
-      line["key"],
-      line["value"],
-      line["type"],
-    ]);
-  } catch (error) {
-    console.log("Something went wrong during accessing or decripting secrets.");
-  }
-  return true;
-};
-
-export default getSecretsForProject;

frontend/components/utilities/secrets/getSecretsForProject.ts

@@ -0,0 +1,103 @@
+import getSecrets from '~/pages/api/files/GetSecrets';
+
+import { envMapping } from '../../../public/data/frequentConstants';
+import guidGenerator from '../randomId';
+
+const {
+  decryptAssymmetric,
+  decryptSymmetric
+} = require('../cryptography/crypto');
+const nacl = require('tweetnacl');
+nacl.util = require('tweetnacl-util');
+
+interface Props {
+  env: keyof typeof envMapping;
+  setFileState: any;
+  setIsKeyAvailable: any;
+  setData: any;
+  workspaceId: string;
+}
+
+const getSecretsForProject = async ({
+  env,
+  setFileState,
+  setIsKeyAvailable,
+  setData,
+  workspaceId
+}: Props) => {
+  try {
+    let file;
+    try {
+      file = await getSecrets(workspaceId, envMapping[env]);
+
+      setFileState(file);
+    } catch (error) {
+      console.log('ERROR: Not able to access the latest file');
+    }
+    // This is called isKeyAvilable but what it really means is if a person is able to create new key pairs
+    setIsKeyAvailable(!file.key ? file.secrets.length == 0 : true);
+
+    const PRIVATE_KEY = localStorage.getItem('PRIVATE_KEY');
+
+    const tempFileState: { key: string; value: string; type: string }[] = [];
+    if (file.key) {
+      // assymmetrically decrypt symmetric key with local private key
+      const key = decryptAssymmetric({
+        ciphertext: file.key.encryptedKey,
+        nonce: file.key.nonce,
+        publicKey: file.key.sender.publicKey,
+        privateKey: PRIVATE_KEY
+      });
+
+      file.secrets.map((secretPair: any) => {
+        // decrypt .env file with symmetric key
+        const plainTextKey = decryptSymmetric({
+          ciphertext: secretPair.secretKey.ciphertext,
+          iv: secretPair.secretKey.iv,
+          tag: secretPair.secretKey.tag,
+          key
+        });
+
+        const plainTextValue = decryptSymmetric({
+          ciphertext: secretPair.secretValue.ciphertext,
+          iv: secretPair.secretValue.iv,
+          tag: secretPair.secretValue.tag,
+          key
+        });
+        tempFileState.push({
+          key: plainTextKey,
+          value: plainTextValue,
+          type: secretPair.type
+        });
+      });
+    }
+    setFileState(tempFileState);
+
+    setData(
+      tempFileState.map((line, index) => {
+        return {
+          id: guidGenerator(),
+          pos: index,
+          key: line['key'],
+          value: line['value'],
+          type: line['type']
+        };
+      })
+    );
+
+    return tempFileState.map((line, index) => {
+      return {
+        id: guidGenerator(),
+        pos: index,
+        key: line['key'],
+        value: line['value'],
+        type: line['type']
+      };
+    });
+  } catch (error) {
+    console.log('Something went wrong during accessing or decripting secrets.');
+  }
+  return true;
+};
+
+export default getSecretsForProject;

frontend/components/utilities/secrets/pushKeysIntegration.js

@@ -1,74 +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");
-
-const pushKeysIntegration = async ({ obj, integrationId }) => {
-  const PRIVATE_KEY = localStorage.getItem("PRIVATE_KEY");
-
-  let 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)
-  let publicKeyInfisical = await publicKeyInfical();
-
-  publicKeyInfisical = (await publicKeyInfisical.json()).publicKey;
-
-  // assymmetrically encrypt key with each receiver public keys
-
-  const { ciphertext, nonce } = encryptAssymmetric({
-    plaintext: randomBytes,
-    publicKey: publicKeyInfisical,
-    privateKey: PRIVATE_KEY,
-  });
-
-  const key = {
-    encryptedKey: ciphertext,
-    nonce,
-  };
-
-  changeHerokuConfigVars({ integrationId, key, secrets });
-};
-
-export default pushKeysIntegration;

frontend/components/utilities/secrets/pushKeysIntegration.ts

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

@@ -0,0 +1,44 @@
+/* eslint-disable */
+import { initPostHog } from "~/components/analytics/posthog";
+import { ENV } from "~/components/utilities/config";
+
+class Capturer {
+  constructor() {
+      this.api = initPostHog();
+  }
+
+  capture(item) {
+    if (ENV == "production" && TELEMETRY_CAPTURING_ENABLED) {
+      try {
+        api.capture(item);
+      } catch (error) {
+        console.error("PostHog", error);
+      }
+    }
+  }
+
+  identify(id) {
+    if (ENV == "production" && TELEMETRY_CAPTURING_ENABLED) {
+      try {
+        api.identify(id);
+      } catch (error) {
+        console.error("PostHog", error);
+      }
+    }
+  }
+
+}
+
+class Telemetry {
+  constructor() {
+      if (!Telemetry.instance) {
+        Telemetry.instance = new Capturer();
+      }
+  }
+
+  getInstance() {
+      return Telemetry.instance;
+  }
+}
+
+module.exports = Telemetry;