Merge branch 'main' into ph-telemetry

2026-10-14 09:30:09 +00:00 · 2023-01-09 13:26:55 -08:00
parent 933fed5da6 f9e6ac2496
commit ce7d411f29
42 changed files with 6035 additions and 2913 deletions
@@ -4,13 +4,13 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

 export default function Error({ text }: { text: string }): JSX.Element {
  return (
-    <div className="relative bg-red-500 opacity-100 border flex flex-row justify-center m-auto items-center w-fit rounded-full mb-4">
+    <div className="relative flex flex-row justify-center m-auto items-center w-fit rounded-full">
      <FontAwesomeIcon
        icon={faExclamationTriangle}
-        className="text-white mt-1.5 mb-2 mx-2"
+        className="text-red mt-1.5 mb-2 mx-2"
      />
      {text && (
-        <p className="relative top-0 text-white mr-2 text-sm py-1">{text}</p>
+        <p className="relative top-0 text-red mr-2 text-sm py-1">{text}</p>
      )}
    </div>
  );
@@ -55,7 +55,7 @@ export default function EventFilter({
          {selected != '' ? (
            <p className="select-none text-bunker-100">{t("activity:event." + selected)}</p>
          ) : (
-            <p className="select-none">Select an event</p>
+            <p className="select-none">{String(t("common:select-event"))}</p>
          )}
          {selected != '' ? (
            <FontAwesomeIcon
@@ -11,7 +11,6 @@ import {
  faKey,
  faMobile,
  faPlug,
-  faTimeline,
  faUser,
 } from "@fortawesome/free-solid-svg-icons";
 import { faPlus } from "@fortawesome/free-solid-svg-icons";
@@ -184,6 +183,7 @@ export default function Layout({ children }: LayoutProps) {
      if (
        userWorkspaces.length == 0 &&
        router.asPath != "/noprojects" &&
+        !router.asPath.includes("home")&&
        !router.asPath.includes("settings")
      ) {
        router.push("/noprojects");
@@ -109,7 +109,7 @@ const AddProjectMemberDialog = ({
                        selected={email ? email : data[0]}
                        onChange={setEmail}
                        data={data}
-                        width="full"
+                        isFull={true}
                      />
                    )}
                  </div>
@@ -0,0 +1,77 @@
+import { Fragment } from "react";
+import { useTranslation } from "react-i18next";
+import { Dialog, Transition } from "@headlessui/react";
+
+// #TODO: USE THIS. Currently it's not. Kinda complicated to set up because of state.
+
+type Props = {
+  isOpen: boolean
+  onClose: () => void
+  onSubmit: () => void 
+}
+
+export const DeleteEnvVar = ({ isOpen, onClose, onSubmit }: Props) => {
+  const { t } = useTranslation()
+  return (
+    <div>
+      <Transition appear show={isOpen} as={Fragment}>
+        <Dialog as="div" className="relative z-10" onClose={() => {}}>
+          <div className="fixed inset-0 overflow-y-auto">
+            <Transition.Child
+              as={Fragment}
+              enter="ease-out duration-300"
+              enterFrom="opacity-0"
+              enterTo="opacity-100"
+              leave="ease-in duration-200"
+              leaveFrom="opacity-100"
+              leaveTo="opacity-0"
+            >
+              <div className="fixed inset-0 bg-black bg-opacity-70" onClick={onClose} />
+            </Transition.Child>
+            <div className="flex min-h-full items-center justify-center p-4 text-center">
+              <Transition.Child
+                as={Fragment}
+                enter="ease-out duration-300"
+                enterFrom="opacity-0 scale-95"
+                enterTo="opacity-100 scale-100"
+                leave="ease-in duration-200"
+                leaveFrom="opacity-100 scale-100"
+                leaveTo="opacity-0 scale-95"
+              >
+                <Dialog.Panel className="w-full max-w-md transform overflow-hidden rounded-md bg-grey border border-gray-700 p-6 text-left align-middle shadow-xl transition-all">
+                  <Dialog.Title
+                    as="h3"
+                    className="text-lg font-medium leading-6 text-gray-400"
+                  >
+                    {t('dashboard:sidebar.delete-key-dialog.title')}
+                  </Dialog.Title>
+                  <div className="mt-2">
+                    <p className="text-sm text-gray-500">
+                      {t('dashboard:sidebar.delete-key-dialog.confirm-delete-message')}
+                    </p>
+                  </div>
+                  <div className="mt-6 flex justify-start">
+                    <button
+                      type="button"
+                      className="inline-flex justify-center rounded-md border border-transparent bg-red-700 hover:bg-red-600 px-4 py-2 text-sm font-medium text-bunker-200 hover:text-white text-semibold duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2"
+                      onClick={onSubmit}
+                    >
+                      Delete
+                    </button>
+                    <button
+                      type="button"
+                      className="ml-2 inline-flex justify-center rounded-md border border-transparent bg-bunker-500 px-4 py-2 text-sm font-medium text-gray-400 hover:bg-mineshaft-500 hover:text-white hover:text-semibold duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2"
+                      onClick={onClose}
+                    >
+                      Cancel
+                    </button>
+                  </div>
+                </Dialog.Panel>
+              </Transition.Child>
+            </div>
+          </div>
+        </Dialog>
+      </Transition>
+    </div>
+  );
+};
@@ -117,13 +117,13 @@ const UserTable = ({

  return (
    <div className="table-container bg-bunker rounded-md mb-6 border border-mineshaft-700 relative mt-1">
-      <div className="absolute rounded-t-md w-full h-14 bg-white/5"></div>
-      <table className="w-full my-1">
-        <thead className="text-gray-400">
+      <div className="absolute rounded-t-md w-full h-[3.25rem] bg-white/5"></div>
+      <table className="w-full my-0.5">
+        <thead className="text-gray-400 text-sm font-light">
          <tr>
-            <th className="text-left pl-6 py-3.5">First Name</th>
-            <th className="text-left pl-6 py-3.5">Last Name</th>
-            <th className="text-left pl-6 py-3.5">Email</th>
+            <th className="text-left pl-6 py-3.5">FIRST NAME</th>
+            <th className="text-left pl-6 py-3.5">LAST NAME</th>
+            <th className="text-left pl-6 py-3.5">EMAIL</th>
            <th></th>
          </tr>
        </thead>
@@ -0,0 +1,33 @@
+import React, { useState } from 'react'
+import { useTranslation } from 'react-i18next';
+
+import Button from '../basic/buttons/Button';
+import { DeleteEnvVar } from '../basic/dialog/DeleteEnvVar';
+
+type Props = {
+  onSubmit: () => void
+}
+
+export function DeleteActionButton({ onSubmit }: Props) {
+  const { t } = useTranslation();
+  const [open, setOpen] = useState(false)
+
+  return (
+    <div className="bg-[#9B3535] opacity-70 hover:opacity-100 w-[4.5rem] h-[2.5rem] rounded-md duration-200 ml-2">
+      <Button
+        text={String(t("Delete"))}
+        // onButtonPressed={onSubmit}
+        color="red"
+        size="md"
+        onButtonPressed={() => setOpen(true)}
+      />
+      <DeleteEnvVar 
+        isOpen={open}
+        onClose={() => {
+          setOpen(false)
+        }}
+        onSubmit={onSubmit}
+      />
+    </div>
+  )
+}
@@ -3,10 +3,11 @@ import Image from "next/image";
 import { useTranslation } from "next-i18next";
 import { faUpload } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { parseDocument, Scalar, YAMLMap } from 'yaml';

 import Button from "../basic/buttons/Button";
 import Error from "../basic/Error";
-import parse from "../utilities/file";
+import { parseDotEnv } from '../utilities/parseDotEnv';
 import guidGenerator from "../utilities/randomId";

 interface DropZoneProps {
@@ -51,6 +52,53 @@ const DropZone = ({

  const [loading, setLoading] = useState(false);

+  const getSecrets = (file: ArrayBuffer, fileType: string) => {
+    let secrets;
+    switch (fileType) {
+      case 'env': {
+        const keyPairs = parseDotEnv(file);
+        secrets = Object.keys(keyPairs).map((key, index) => {
+          return {
+            id: guidGenerator(),
+            pos: numCurrentRows + index,
+            key: key,
+            value: keyPairs[key as keyof typeof keyPairs].value,
+            comment: keyPairs[key as keyof typeof keyPairs].comments.join('\n'),
+            type: 'shared',
+          };
+        });
+        break;
+      }
+      case 'yml': {
+        const parsedFile = parseDocument(file.toString());
+        const keyPairs = parsedFile.contents!.toJSON();
+
+        secrets = Object.keys(keyPairs).map((key, index) => {
+          const fileContent = parsedFile.contents as YAMLMap<Scalar, Scalar>;
+          const comment =
+            fileContent!.items
+              .find((item) => item.key.value === key)
+              ?.key?.commentBefore?.split('\n')
+              .map((comment) => comment.trim())
+              .join('\n') ?? '';
+          return {
+            id: guidGenerator(),
+            pos: numCurrentRows + index,
+            key: key,
+            value: keyPairs[key as keyof typeof keyPairs]?.toString() ?? '',
+            comment,
+            type: 'shared',
+          };
+        });
+        break;
+      }
+      default:
+        secrets = '';
+        break;
+    }
+    return secrets;
+  };
+
  // This function function immediately parses the file after it is dropped
  const handleDrop = async (e: DragEvent) => {
    setLoading(true);
@@ -61,20 +109,12 @@ const DropZone = ({

    const file = e.dataTransfer.files[0];
    const reader = new FileReader();
+    const fileType = file.name.split('.')[1];

    reader.onload = (event) => {
      if (event.target === null || event.target.result === null) return;
      // parse function's argument looks like to be ArrayBuffer
-      const keyPairs = parse(event.target.result as Buffer);
-      const newData = Object.keys(keyPairs).map((key, index) => {
-        return {
-          id: guidGenerator(),
-          pos: numCurrentRows + index,
-          key: key,
-          value: keyPairs[key as keyof typeof keyPairs],
-          type: "shared",
-        };
-      });
+      const newData = getSecrets(event.target.result as ArrayBuffer, fileType);
      setData(newData);
      setButtonReady(true);
    };
@@ -95,25 +135,14 @@ const DropZone = ({
    setTimeout(() => setLoading(false), 5000);
    if (e.currentTarget.files === null) return;
    const file = e.currentTarget.files[0];
+    const fileType = file.name.split('.')[1];
    const reader = new FileReader();
    reader.onload = (event) => {
      if (event.target === null || event.target.result === null) return;
      const { result } = event.target;
-      if (typeof result === "string") {
-        const newData = result
-          .split("\n")
-          .map((line: string, index: number) => {
-            return {
-              id: guidGenerator(),
-              pos: numCurrentRows + index,
-              key: line.split("=")[0],
-              value: line.split("=").slice(1, line.split("=").length).join("="),
-              type: "shared",
-            };
-          });
-        setData(newData);
-        setButtonReady(true);
-      }
+      const newData = getSecrets(result as ArrayBuffer, fileType);
+      setData(newData);
+      setButtonReady(true);
    };
    reader.readAsText(file);
  };
@@ -139,7 +168,7 @@ const DropZone = ({
        id="fileSelect"
        type="file"
        className="opacity-0 absolute w-full h-full"
-        accept=".txt,.env"
+        accept=".txt,.env,.yml"
        onChange={handleFileSelect}
      />
      {errorDragAndDrop ? (
@@ -176,7 +205,7 @@ const DropZone = ({
        id="fileSelect"
        type="file"
        className="opacity-0 absolute w-full h-full"
-        accept=".txt,.env"
+        accept=".txt,.env,.yml"
        onChange={handleFileSelect}
      />
      <div className="flex flex-row w-full items-center justify-center mb-6 mt-5">
@@ -187,7 +216,7 @@ const DropZone = ({
      <div className="z-10 mb-6">
        <Button
          color="mineshaft"
-          text="Create a new .env file"
+          text={String(t("dashboard:add-secret"))}
          onButtonPressed={createNewFile}
          size="md"
        />
@@ -9,6 +9,7 @@ import Button from '../basic/buttons/Button';
 import Toggle from '../basic/Toggle';
 import CommentField from './CommentField';
 import DashboardInputField from './DashboardInputField';
+import { DeleteActionButton } from './DeleteActionButton';
 import GenerateSecretMenu from './GenerateSecretMenu';


@@ -28,6 +29,10 @@ interface OverrideProps {
  pos: number;
  comment: string;
 }
+export interface DeleteRowFunctionProps { 
+  ids: string[]; 
+  secretName: string; 
+}

 interface SideBarProps {
  toggleSidebar: (value: string) => void; 
@@ -41,7 +46,7 @@ interface SideBarProps {
  savePush: () => void;
  sharedToHide: string[];
  setSharedToHide: (values: string[]) => void;
-  deleteRow: any;
+  deleteRow: (props: DeleteRowFunctionProps) => void;
 }

 /**
@@ -170,14 +175,9 @@ const SideBar = ({
        active={buttonReady}
        textDisabled="Saved"
      />
-      <div className="bg-[#9B3535] opacity-70 hover:opacity-100 w-[4.5rem] h-[2.5rem] rounded-md duration-200 ml-2">
-        <Button
-          text={String(t("Delete"))}
-          onButtonPressed={() => deleteRow({ ids: overrideEnabled ? data.map(secret => secret.id) : [data.filter(secret => secret.type == "shared")[0]?.id], secretName: data[0]?.key })}
-          color="red"
-          size="md"
-        />
-      </div>
+      <DeleteActionButton 
+        onSubmit={() => deleteRow({ ids: overrideEnabled ? data.map(secret => secret.id) : [data.filter(secret => secret.type == "shared")[0]?.id], secretName: data[0]?.key })}
+      />
    </div>
  </div>
 };
@@ -13,6 +13,7 @@ import {
  faGear,
  faPlus,
  faRightFromBracket,
+  faUpRightFromSquare,
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { Menu, Transition } from "@headlessui/react";
@@ -107,6 +108,14 @@ export default function Navbar() {
        </div>
      </div>
      <div className="relative flex justify-start items-center mx-2 z-40">
+        <a 
+          href="https://infisical.com/docs/getting-started/introduction"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="text-gray-200 hover:text-primary duration-200">
+          Docs 
+          <FontAwesomeIcon icon={faUpRightFromSquare} className="text-xs mb-[0.1rem] mr-5 ml-1.5" />
+        </a>
        <Menu as="div" className="relative inline-block text-left">
          <div className="mr-4">
            <Menu.Button className="inline-flex w-full justify-center rounded-md px-2 py-2 text-sm font-medium text-gray-200 rounded-md hover:bg-white/10 duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75">
@@ -0,0 +1,136 @@
+import React, { useState } from "react";
+import ReactCodeInput from "react-code-input";
+import { useTranslation } from "next-i18next";
+
+import sendVerificationEmail from "~/pages/api/auth/SendVerificationEmail";
+
+import Button from "../basic/buttons/Button";
+import Error from "../basic/Error";
+
+
+// The style for the verification code input
+const props = {
+  inputStyle: {
+    fontFamily: "monospace",
+    margin: "4px",
+    MozAppearance: "textfield",
+    width: "55px",
+    borderRadius: "5px",
+    fontSize: "24px",
+    height: "55px",
+    paddingLeft: "7",
+    backgroundColor: "#0d1117",
+    color: "white",
+    border: "1px solid #2d2f33",
+    textAlign: "center",
+    outlineColor: "#8ca542",
+    borderColor: "#2d2f33"
+  },
+} as const;
+const propsPhone = {
+  inputStyle: {
+    fontFamily: "monospace",
+    margin: "4px",
+    MozAppearance: "textfield",
+    width: "40px",
+    borderRadius: "5px",
+    fontSize: "24px",
+    height: "40px",
+    paddingLeft: "7",
+    backgroundColor: "#0d1117",
+    color: "white",
+    border: "1px solid #2d2f33",
+    textAlign: "center",
+    outlineColor: "#8ca542",
+    borderColor: "#2d2f33"
+  },
+} as const;
+
+interface CodeInputStepProps {
+  email: string;
+  incrementStep: () => void;
+  setCode: (value: string) => void;
+  codeError: boolean;
+}
+
+/**
+ * This is the second step of sign up where users need to verify their email
+ * @param {object} obj 
+ * @param {string} obj.email - user's email to which we just sent a verification email
+ * @param {function} obj.incrementStep - goes to the next step of signup
+ * @param {function} obj.setCode - state updating function that set the current value of the emai verification code
+ * @param {boolean} obj.codeError - whether the code was inputted wrong or now
+ * @returns 
+ */
+export default function CodeInputStep({ email, incrementStep, setCode, codeError }: CodeInputStepProps): JSX.Element {
+  const [isLoading, setIsLoading] = useState(false);
+  const [isResendingVerificationEmail, setIsResendingVerificationEmail] =
+    useState(false);
+  const { t } = useTranslation();
+
+  const resendVerificationEmail = async () => {
+    setIsResendingVerificationEmail(true);
+    setIsLoading(true);
+    sendVerificationEmail(email);
+    setTimeout(() => {
+      setIsLoading(false);
+      setIsResendingVerificationEmail(false);
+    }, 2000);
+  };
+
+  return (
+    <div className="bg-bunker w-max mx-auto h-7/12 pt-10 pb-4 px-8 rounded-xl drop-shadow-xl mb-64 md:mb-16">
+      <p className="text-l flex justify-center text-bunker-300">
+        {"We've"} sent a verification email to{" "}
+      </p>
+      <p className="text-l flex justify-center font-semibold my-2 text-bunker-300">
+        {email}{" "}
+      </p>
+      <div className="hidden md:block">
+        <ReactCodeInput
+          name=""
+          inputMode="tel"
+          type="text"
+          fields={6}
+          onChange={setCode}
+          {...props}
+          className="mt-6 mb-2"
+        />
+      </div>
+      <div className="block md:hidden">
+        <ReactCodeInput
+          name=""
+          inputMode="tel"
+          type="text"
+          fields={6}
+          onChange={setCode}
+          {...propsPhone}
+          className="mt-2 mb-6"
+        />
+      </div>
+      {codeError && <Error text={t("signup:step2-code-error")} />}
+      <div className="flex max-w-max min-w-28 flex-col items-center justify-center md:p-2 max-h-24 mx-auto text-lg px-4 mt-4 mb-2">
+        <Button
+          text={t("signup:verify") ?? ""}
+          onButtonPressed={incrementStep}
+          size="lg"
+        />
+      </div>
+      <div className="flex flex-col items-center justify-center w-full max-h-24 max-w-md mx-auto pt-2">
+        <div className="flex flex-row items-baseline gap-1 text-sm">
+          <span className="text-bunker-400">
+            Not seeing an email?
+          </span>
+          <u className={`font-normal ${isResendingVerificationEmail ? 'text-bunker-400' : 'text-primary-700 hover:text-primary duration-200'}`}>
+            <button disabled={isLoading} onClick={resendVerificationEmail}>
+              {isResendingVerificationEmail ? "Resending..." : "Resend"}
+            </button>
+          </u>
+        </div>
+        <p className="text-sm text-bunker-400 pb-2">
+          {t("signup:step2-spam-alert")}
+        </p>
+      </div>
+    </div>
+  );
+}
@@ -0,0 +1,60 @@
+import React from "react";
+import { useTranslation } from "next-i18next";
+import { faWarning } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import Button from "../basic/buttons/Button";
+import issueBackupKey from "../utilities/cryptography/issueBackupKey";
+
+
+interface DownloadBackupPDFStepProps {
+  incrementStep: () => void;
+  email: string; 
+  password: string;
+  name: string;
+}
+
+/**
+ * This is the step of the signup flow where the user downloads the backup pdf
+ * @param {object} obj 
+ * @param {function} obj.incrementStep - function that moves the user on to the next stage of signup
+ * @param {string} obj.email - user's email
+ * @param {string} obj.password - user's password
+ * @param {string} obj.name - user's name 
+ * @returns 
+ */
+export default function DonwloadBackupPDFStep({ incrementStep, email, password, name }: DownloadBackupPDFStepProps): JSX.Element {
+  const { t } = useTranslation();
+
+  return (
+    <div className="bg-bunker flex flex-col items-center w-full max-w-xs md:max-w-lg mx-auto h-7/12 py-8 px-4 md:px-6 mx-1 mb-36 md:mb-16 rounded-xl drop-shadow-xl">
+      <p className="text-4xl text-center font-semibold flex justify-center text-transparent bg-clip-text bg-gradient-to-br from-sky-400 to-primary">
+        {t("signup:step4-message")}
+      </p>
+      <div className="flex flex-col items-center justify-center w-full mt-4 md:mt-8 max-w-md text-gray-400 text-md rounded-md px-2">
+        <div>{t("signup:step4-description1")}</div>
+        <div className="mt-3">{t("signup:step4-description2")}</div>
+      </div>
+      <div className="w-full p-2 flex flex-row items-center bg-white/10 text-gray-400 rounded-md max-w-xs md:max-w-md mx-auto mt-4">
+        <FontAwesomeIcon icon={faWarning} className="ml-2 mr-4 text-4xl" />
+        {t("signup:step4-description3")}
+      </div>
+      <div className="flex flex-col items-center justify-center md:px-4 md:py-5 mt-2 px-2 py-3 max-h-24 max-w-max mx-auto text-lg">
+        <Button
+          text="Download PDF"
+          onButtonPressed={async () => {
+            await issueBackupKey({
+              email,
+              password,
+              personalName: name,
+              setBackupKeyError: (value: boolean) => {},
+              setBackupKeyIssued: (value: boolean) => {},
+            });
+            incrementStep();
+          }}
+          size="lg"
+        />
+      </div>
+    </div>
+  );
+}
@@ -0,0 +1,97 @@
+import React, { useState } from "react";
+import Link from "next/link";
+import { useTranslation } from "next-i18next";
+
+import sendVerificationEmail from "~/pages/api/auth/SendVerificationEmail";
+
+import Button from "../basic/buttons/Button";
+import InputField from "../basic/InputField";
+
+
+interface DownloadBackupPDFStepProps {
+  incrementStep: () => void;
+  email: string; 
+  setEmail: (value: string) => void;
+}
+
+/**
+ * This is the first step of the sign up process - users need to enter their email
+ * @param {object} obj 
+ * @param {string} obj.email - email of a user signing up
+ * @param {function} obj.setEmail - funciton that manages the state of the email variable
+ * @param {function} obj.incrementStep - function to go to the next step of the signup flow
+ * @returns 
+ */
+export default function EnterEmailStep({ email, setEmail, incrementStep }: DownloadBackupPDFStepProps): JSX.Element {
+  const [emailError, setEmailError] = useState(false);
+  const [emailErrorMessage, setEmailErrorMessage] = useState("");
+  const { t } = useTranslation();
+
+  /**
+   * Verifies if the entered email "looks" correct
+   */
+  const emailCheck = () => {
+    let emailCheckBool = false;
+    if (!email) {
+      setEmailError(true);
+      setEmailErrorMessage("Please enter your email.");
+      emailCheckBool = true;
+    } else if (
+      !email.includes("@") ||
+      !email.includes(".") ||
+      !/[a-z]/.test(email)
+    ) {
+      setEmailError(true);
+      setEmailErrorMessage("Please enter a valid email.");
+      emailCheckBool = true;
+    } else {
+      setEmailError(false);
+    }
+
+    // If everything is correct, go to the next step
+    if (!emailCheckBool) {
+      sendVerificationEmail(email);
+      incrementStep();
+    }
+  };
+
+  return (
+    <div>
+      <div className="bg-bunker w-full max-w-md mx-auto h-7/12 py-8 md:px-6 mx-1 rounded-xl drop-shadow-xl">
+        <p className="text-4xl font-semibold flex justify-center text-primary">
+          {'Let\''}s get started
+        </p>
+        <div className="flex items-center justify-center w-5/6 md:w-full m-auto md:p-2 rounded-lg max-h-24 mt-4">
+          <InputField
+            label="Email"
+            onChangeHandler={setEmail}
+            type="email"
+            value={email}
+            placeholder=""
+            isRequired
+            error={emailError}
+            errorText={emailErrorMessage}
+            autoComplete="username"
+          />
+        </div>
+        <div className="flex flex-col items-center justify-center w-5/6 md:w-full md:p-2 max-h-28 max-w-xs md:max-w-md mx-auto mt-4 md:mt-4 text-sm text-center md:text-left">
+          <p className="text-gray-400 mt-2 md:mx-0.5">
+            {t("signup:step1-privacy")}
+          </p>
+          <div className="text-l mt-6 m-2 md:m-8 px-8 py-1 text-lg">
+            <Button text="Get Started" type="submit" onButtonPressed={emailCheck} size="lg" />
+          </div>
+        </div>
+      </div>
+      <div className="flex flex-col items-center justify-center w-full md:pb-2 max-w-md mx-auto pt-2 mb-48 md:mb-16 mt-2">
+        <Link href="/login">
+          <button type="button" className="w-max pb-3 hover:opacity-90 duration-200">
+            <u className="font-normal text-sm text-primary-500">
+              {t("signup:already-have-account")}
+            </u>
+          </button>
+        </Link>
+      </div>
+    </div>
+  );
+}
@@ -0,0 +1,72 @@
+import React, { useState } from "react";
+import { useRouter } from "next/router";
+import { useTranslation } from "next-i18next";
+
+import addUserToOrg from "~/pages/api/organization/addUserToOrg";
+import getWorkspaces from "~/pages/api/workspace/getWorkspaces";
+
+import Button from "../basic/buttons/Button";
+
+
+/**
+ * This is the last step of the signup flow. People can optionally invite their teammates here.
+ */
+export default function TeamInviteStep(): JSX.Element {
+  const [emails, setEmails] = useState("");
+  const { t } = useTranslation();
+  const router = useRouter();
+
+  // Redirect user to the getting started page
+  const redirectToHome = async () => {
+    const userWorkspaces = await getWorkspaces();
+    const userWorkspace = userWorkspaces[0]._id;
+    router.push("/home/" + userWorkspace);
+
+  }
+
+  const inviteUsers = async ({ emails }: { emails: string; }) => {
+    emails 
+      .split(',')
+      .map(email => email.trim())
+      .map(async (email) => await addUserToOrg(email, String(localStorage.getItem('orgData.id'))));
+
+    await redirectToHome();
+  }
+
+  return (
+    <div className="bg-bunker w-max mx-auto h-7/12 pt-6 pb-4 px-8 rounded-xl drop-shadow-xl mb-64 md:mb-32">
+      <p className="text-4xl font-semibold flex justify-center text-primary">
+        {t("signup:step5-invite-team")}
+      </p>
+      <p className="text-center flex justify-center text-bunker-300 max-w-xs md:max-w-sm md:mx-8 mb-6 mt-4">
+        {t("signup:step5-subtitle")}
+      </p>
+      <div>
+        <div className="overflow-auto bg-bunker-800">
+          <div className="whitespace-pre-wrap break-words bg-transparent">
+
+          </div>
+        </div>
+        <textarea 
+          className="bg-bunker-800 h-20 w-full placeholder:text-bunker-400 py-1 px-2 rounded-md border border-mineshaft-500 text-sm text-bunker-300 outline-none focus:ring-2 ring-primary-800 ring-opacity-70"
+          value={emails}
+          onChange={(e) => setEmails(e.target.value)}
+          placeholder="[email protected], [email protected]..."
+        />
+      </div>
+      <div className="flex flex-row max-w-max min-w-28 items-center justify-center md:p-2 max-h-24 mx-auto text-lg px-4 mt-4 mb-2">
+        <div 
+          className="text-md md:text-sm mx-3 text-bunker-300 bg-mineshaft-700 py-3 md:py-3.5 px-5 rounded-md cursor-pointer hover:bg-mineshaft-500 duration-200"
+          onClick={redirectToHome}
+        >
+          {t("signup:step5-skip")}
+        </div>
+        <Button
+          text={t("signup:step5-send-invites") ?? ""}
+          onButtonPressed={() => inviteUsers({ emails})}
+          size="lg"
+        />
+      </div>
+    </div>
+  );
+}
@@ -0,0 +1,306 @@
+import React, { useState } from "react";
+import { useRouter } from "next/router";
+import { useTranslation } from "next-i18next";
+import { faCheck, faX } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import completeAccountInformationSignup from "~/pages/api/auth/CompleteAccountInformationSignup";
+
+import Button from "../basic/buttons/Button";
+import InputField from "../basic/InputField";
+import attemptLogin from "../utilities/attemptLogin";
+import passwordCheck from "../utilities/checks/PasswordCheck";
+import Aes256Gcm from "../utilities/cryptography/aes-256-gcm";
+
+const nacl = require("tweetnacl");
+const jsrp = require("jsrp");
+nacl.util = require("tweetnacl-util");
+const client = new jsrp.client();
+
+interface UserInfoStepProps {
+  verificationToken: string;
+  incrementStep: () => void;
+  email: string;
+  password: string;
+  setPassword: (value: string) => void;
+  firstName: string;
+  setFirstName: (value: string) => void;
+  lastName: string;
+  setLastName: (value: string) => void;
+}
+
+/**
+ * This is the step of the sign up flow where people provife their name/surname and password
+ * @param {object} obj
+ * @param {string} obj.verificationToken - the token which we use to verify the legitness of a user
+ * @param {string} obj.incrementStep - a function to move to the next signup step
+ * @param {string} obj.email - email of a user who is signing up
+ * @param {string} obj.password - user's password
+ * @param {string} obj.setPassword - function managing the state of user's password
+ * @param {string} obj.firstName - user's first name
+ * @param {string} obj.setFirstName  - function managing the state of user's first name
+ * @param {string} obj.lastName - user's lastName
+ * @param {string} obj.setLastName - function managing the state of user's last name
+ */
+export default function UserInfoStep({ 
+  verificationToken, 
+  incrementStep, 
+  email,
+  password,
+  setPassword, 
+  firstName, 
+  setFirstName,
+  lastName,
+  setLastName
+}: UserInfoStepProps): JSX.Element {
+  const [firstNameError, setFirstNameError] = useState(false);
+  const [lastNameError, setLastNameError] = useState(false);
+  const [passwordErrorLength, setPasswordErrorLength] = useState(false);
+  const [passwordErrorNumber, setPasswordErrorNumber] = useState(false);
+  const [passwordErrorLowerCase, setPasswordErrorLowerCase] = useState(false);
+
+  const [isLoading, setIsLoading] = useState(false);
+  const { t } = useTranslation();
+  const router = useRouter();
+
+  // Verifies if the information that the users entered (name, workspace) 
+  // is there, and if the password matches the criteria.
+  const signupErrorCheck = async () => {
+    setIsLoading(true);
+    let errorCheck = false;
+    if (!firstName) {
+      setFirstNameError(true);
+      errorCheck = true;
+    } else {
+      setFirstNameError(false);
+    }
+    if (!lastName) {
+      setLastNameError(true);
+      errorCheck = true;
+    } else {
+      setLastNameError(false);
+    }
+    errorCheck = passwordCheck({
+      password,
+      setPasswordErrorLength,
+      setPasswordErrorNumber,
+      setPasswordErrorLowerCase,
+      currentErrorCheck: errorCheck,
+    });
+
+    if (!errorCheck) {
+      // Generate a random pair of a public and a private key
+      const pair = nacl.box.keyPair();
+      const secretKeyUint8Array = pair.secretKey;
+      const publicKeyUint8Array = pair.publicKey;
+      const PRIVATE_KEY = nacl.util.encodeBase64(secretKeyUint8Array);
+      const PUBLIC_KEY = nacl.util.encodeBase64(publicKeyUint8Array);
+
+      const { ciphertext, iv, tag } = Aes256Gcm.encrypt({
+        text: PRIVATE_KEY,
+        secret: password
+          .slice(0, 32)
+          .padStart(
+            32 + (password.slice(0, 32).length - new Blob([password]).size),
+            "0"
+          ),
+      }) as { ciphertext: string; iv: string; tag: string };
+
+      localStorage.setItem("PRIVATE_KEY", PRIVATE_KEY);
+
+      client.init(
+        {
+          username: email,
+          password: password,
+        },
+        async () => {
+          client.createVerifier(
+            async (err: any, result: { salt: string; verifier: string }) => {
+              const response = await completeAccountInformationSignup({
+                email,
+                firstName,
+                lastName,
+                organizationName: firstName + "'s organization",
+                publicKey: PUBLIC_KEY,
+                ciphertext,
+                iv,
+                tag,
+                salt: result.salt,
+                verifier: result.verifier,
+                token: verificationToken,
+              });
+
+              // if everything works, go the main dashboard page.
+              if (response.status === 200) {
+                // response = await response.json();
+
+                localStorage.setItem("publicKey", PUBLIC_KEY);
+                localStorage.setItem("encryptedPrivateKey", ciphertext);
+                localStorage.setItem("iv", iv);
+                localStorage.setItem("tag", tag);
+
+                try {
+                  await attemptLogin(
+                    email,
+                    password,
+                    (value: boolean) => {},
+                    router,
+                    true,
+                    false
+                  );
+                  incrementStep();
+                } catch (error) {
+                  setIsLoading(false);
+                }
+              }
+            }
+          );
+        }
+      );
+    } else {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <div className="bg-bunker w-max mx-auto h-7/12 py-10 px-8 rounded-xl drop-shadow-xl mb-36 md:mb-16">
+      <p className="text-4xl font-bold flex justify-center mb-6 text-gray-400 mx-8 md:mx-16 text-transparent bg-clip-text bg-gradient-to-br from-sky-400 to-primary">
+        {t("signup:step3-message")}
+      </p>
+      <div className="relative z-0 flex items-center justify-end w-full md:p-2 rounded-lg max-h-24">
+        <InputField
+          label={t("common:first-name")}
+          onChangeHandler={setFirstName}
+          type="name"
+          value={firstName}
+          isRequired
+          errorText={
+            t("common:validate-required", {
+              name: t("common:first-name"),
+            }) as string
+          }
+          error={firstNameError}
+          autoComplete="given-name"
+        />
+      </div>
+      <div className="mt-2 flex items-center justify-center w-full md:p-2 rounded-lg max-h-24">
+        <InputField
+          label={t("common:last-name")}
+          onChangeHandler={setLastName}
+          type="name"
+          value={lastName}
+          isRequired
+          errorText={
+            t("common:validate-required", {
+              name: t("common:last-name"),
+            }) as string
+          }
+          error={lastNameError}
+          autoComplete="family-name"
+        />
+      </div>
+      <div className="mt-2 flex flex-col items-center justify-center w-full md:p-2 rounded-lg max-h-60">
+        <InputField
+          label={t("section-password:password")}
+          onChangeHandler={(password: string) => {
+            setPassword(password);
+            passwordCheck({
+              password,
+              setPasswordErrorLength,
+              setPasswordErrorNumber,
+              setPasswordErrorLowerCase,
+              currentErrorCheck: false,
+            });
+          }}
+          type="password"
+          value={password}
+          isRequired
+          error={
+            passwordErrorLength && passwordErrorNumber && passwordErrorLowerCase
+          }
+          autoComplete="new-password"
+          id="new-password"
+        />
+        {passwordErrorLength ||
+        passwordErrorLowerCase ||
+        passwordErrorNumber ? (
+          <div className="w-full mt-4 bg-white/5 px-2 flex flex-col items-start py-2 rounded-md">
+            <div className={`text-gray-400 text-sm mb-1`}>
+              {t("section-password:validate-base")}
+            </div>
+            <div className="flex flex-row justify-start items-center ml-1">
+              {passwordErrorLength ? (
+                <FontAwesomeIcon
+                  icon={faX}
+                  className="text-md text-red mr-2.5"
+                />
+              ) : (
+                <FontAwesomeIcon
+                  icon={faCheck}
+                  className="text-md text-primary mr-2"
+                />
+              )}
+              <div
+                className={`${
+                  passwordErrorLength ? "text-gray-400" : "text-gray-600"
+                } text-sm`}
+              >
+                {t("section-password:validate-length")}
+              </div>
+            </div>
+            <div className="flex flex-row justify-start items-center ml-1">
+              {passwordErrorLowerCase ? (
+                <FontAwesomeIcon
+                  icon={faX}
+                  className="text-md text-red mr-2.5"
+                />
+              ) : (
+                <FontAwesomeIcon
+                  icon={faCheck}
+                  className="text-md text-primary mr-2"
+                />
+              )}
+              <div
+                className={`${
+                  passwordErrorLowerCase ? "text-gray-400" : "text-gray-600"
+                } text-sm`}
+              >
+                {t("section-password:validate-case")}
+              </div>
+            </div>
+            <div className="flex flex-row justify-start items-center ml-1">
+              {passwordErrorNumber ? (
+                <FontAwesomeIcon
+                  icon={faX}
+                  className="text-md text-red mr-2.5"
+                />
+              ) : (
+                <FontAwesomeIcon
+                  icon={faCheck}
+                  className="text-md text-primary mr-2"
+                />
+              )}
+              <div
+                className={`${
+                  passwordErrorNumber ? "text-gray-400" : "text-gray-600"
+                } text-sm`}
+              >
+                {t("section-password:validate-number")}
+              </div>
+            </div>
+          </div>
+        ) : (
+          <div className="py-2"></div>
+        )}
+      </div>
+      <div className="flex flex-col items-center justify-center md:p-2 max-h-48 max-w-max mx-auto text-lg px-2 py-3">
+        <Button
+          text={t("signup:signup") ?? ""}
+          loading={isLoading}
+          onButtonPressed={signupErrorCheck}
+          size="lg"
+        />
+      </div>
+    </div>
+  )
+}
@@ -1,47 +0,0 @@
-const LINE =
-  /(?:^|^)\s*(?:export\s+)?([\w.-]+)(?:\s*=\s*?|:\s+?)(\s*'(?:\\'|[^'])*'|\s*"(?:\\"|[^"])*"|\s*`(?:\\`|[^`])*`|[^#\r\n]+)?\s*(?:#.*)?(?:$|$)/gm;
-
-/**
- * Return text that is the buffer parsed
- * @param {Buffer} src - source buffer
- * @returns {String} text - text of buffer
- */
-function parse(src: Buffer) {
-  const obj: Record<string, string> = {};
-
-  // Convert buffer to string
-  let lines = src.toString();
-
-  // Convert line breaks to same format
-  lines = lines.replace(/\r\n?/gm, '\n');
-
-  let match;
-  while ((match = LINE.exec(lines)) != null) {
-    const key = match[1];
-
-    // Default undefined or null to empty string
-    let value = match[2] || '';
-
-    // Remove whitespace
-    value = value.trim();
-
-    // Check if double quoted
-    const maybeQuote = value[0];
-
-    // Remove surrounding quotes
-    value = value.replace(/^(['"`])([\s\S]*)\1$/gm, '$2');
-
-    // Expand newlines if double quoted
-    if (maybeQuote === '"') {
-      value = value.replace(/\\n/g, '\n');
-      value = value.replace(/\\r/g, '\r');
-    }
-
-    // Add to object
-    obj[key] = value;
-  }
-
-  return obj;
-}
-
-export default parse;
@@ -0,0 +1,66 @@
+const LINE =
+  /(?:^|^)\s*(?:export\s+)?([\w.-]+)(?:\s*=\s*?|:\s+?)(\s*'(?:\\'|[^'])*'|\s*"(?:\\"|[^"])*"|\s*`(?:\\`|[^`])*`|[^#\r\n]+)?\s*(?:#.*)?(?:$|$)/gm;
+
+/**
+ * Return text that is the buffer parsed
+ * @param {ArrayBuffer} src - source buffer
+ * @returns {String} text - text of buffer
+ */
+export function parseDotEnv(src: ArrayBuffer) {
+  const object: {
+    [key: string]: { value: string; comments: string[] };
+  } = {};
+
+  // Convert buffer to string
+  let lines = src.toString();
+
+  // Convert line breaks to same format
+  lines = lines.replace(/\r\n?/gm, '\n');
+
+  let comments: string[] = [];
+
+  lines
+    .split('\n')
+    .map((line) => {
+      // collect comments of each env variable
+      if (line.startsWith('#')) {
+        comments.push(line.replace('#', '').trim());
+      } else if (line) {
+        let match;
+        let item: [string, string, string[]] | [] = [];
+
+        while ((match = LINE.exec(line)) !== null) {
+          const key = match[1];
+
+          // Default undefined or null to empty string
+          let value = match[2] || '';
+
+          // Remove whitespace
+          value = value.trim();
+
+          // Check if double quoted
+          const maybeQuote = value[0];
+
+          // Remove surrounding quotes
+          value = value.replace(/^(['"`])([\s\S]*)\1$/gm, '$2');
+
+          // Expand newlines if double quoted
+          if (maybeQuote === '"') {
+            value = value.replace(/\\n/g, '\n');
+            value = value.replace(/\\r/g, '\r');
+          }
+          item = [key, value, comments];
+        }
+        comments = [];
+        return item;
+      }
+      return [];
+    })
+    .filter((line) => line.length > 1)
+    .forEach((line) => {
+      const [key, value, comments] = line;
+      object[key as string] = { value, comments };
+    });
+
+  return object;
+}
@@ -29,7 +29,7 @@ class Capturer {

 }

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