Merge branch 'main' of https://github.com/Infisical/infisical into main

2026-09-22 13:39:35 +00:00 · 2022-12-04 17:57:35 -05:00
parent 89c625750a 3de79426e2
commit 3b002abcb6
13 changed files with 853 additions and 609 deletions
--- a/.github/workflows/docker-image.yml
+++ b/.github/workflows/docker-image.yml
@@ -6,6 +6,8 @@ jobs:
  docker:
    runs-on: ubuntu-latest
    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
      -
        name: Set up QEMU
        uses: docker/setup-qemu-action@v2
@@ -23,12 +25,13 @@ jobs:
        uses: docker/build-push-action@v3
        with:
          push: true
-          context: /backend
-          tags: infisical/backend:latest
+          context: backend
+          tags: infisical/backend:test
      -
        name: Build and push frontend
        uses: docker/build-push-action@v3
        with:
          push: true
-          context: /frontend
-          tags: infisical/frontend:latest
+          file: frontend/Dockerfile.dev
+          context: frontend
+          tags: infisical/frontend:test
--- a/frontend/.eslintrc.json
+++ b/frontend/.eslintrc.json
@@ -1,8 +1,16 @@
 {
-  "extends": ["next/babel", "next/core-web-vitals"],
-  "plugins": ["simple-import-sort"],
+  "extends": [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "next",
+    "next/core-web-vitals"
+  ],
+  "parser": "@typescript-eslint/parser",
+  "plugins": ["simple-import-sort", "@typescript-eslint"],
  "rules": {
    "react-hooks/exhaustive-deps": "off",
+    "no-unused-vars": "off",
+    "@typescript-eslint/no-unused-vars": "error",
    "simple-import-sort/exports": "warn",
    "simple-import-sort/imports": [
      "warn",
--- a/frontend/components/basic/buttons/Button.tsx
+++ b/frontend/components/basic/buttons/Button.tsx
@@ -1,25 +1,28 @@
 import React from "react";
 import Image from "next/image";
 import { IconProp } from "@fortawesome/fontawesome-svg-core";
-import { FontAwesomeIcon, FontAwesomeIconProps } from "@fortawesome/react-fontawesome";
+import {
+  FontAwesomeIcon,
+  FontAwesomeIconProps,
+} from "@fortawesome/react-fontawesome";

 var classNames = require("classnames");

 type ButtonProps = {
  text: string;
  onButtonPressed: () => void;
-  loading: boolean;
+  loading?: boolean;
  color: string;
  size: string;
-  icon: IconProp;
-  active: boolean;
-  iconDisabled: string;
-  textDisabled: string;
-}
+  icon?: IconProp;
+  active?: boolean;
+  iconDisabled?: string;
+  textDisabled?: string;
+};

 /**
 * This is the main butto component in the app.
- * @param {object} props 
+ * @param {object} props
 * @param {string} props.text - text inside the button
 * @param {function} props.onButtonPressed - the action that happens when the button is clicked
 * @param {boolean} props.loading - if a button is currently in the laoding state
@@ -29,21 +32,28 @@ type ButtonProps = {
 * @param {boolean} props.active - if the button is active or disabled
 * @param {FontAwesomeIconProps} props.text - the icon inside the button when it is disabled
 * @param {string} props.textDisable - text inside the button when it is disabled
- * @returns 
+ * @returns
 */
-export default function Button (props: ButtonProps): JSX.Element {
+export default function Button(props: ButtonProps): JSX.Element {
  // Check if the button show always be 'active' - then true;
  // or if it should switch between 'active' and 'disabled' - then give the status
-  const activityStatus = props.active || (props.text != "" && props.textDisabled == undefined)
-  
+  const activityStatus =
+    props.active || (props.text != "" && props.textDisabled == undefined);
+
  let styleButton = classNames(
    "group m-auto md:m-0 inline-block rounded-md duration-200",

    // Setting background colors and hover modes
-    props.color == "mineshaft" && activityStatus && "bg-mineshaft-700 hover:bg-primary",
+    props.color == "mineshaft" &&
+      activityStatus &&
+      "bg-mineshaft-700 hover:bg-primary",
    props.color == "mineshaft" && !activityStatus && "bg-mineshaft",
-    (props.color == "primary" || !props.color) && activityStatus && "bg-primary hover:opacity-80",
-    (props.color == "primary" || !props.color) && !activityStatus && "bg-primary",
+    (props.color == "primary" || !props.color) &&
+      activityStatus &&
+      "bg-primary hover:opacity-80",
+    (props.color == "primary" || !props.color) &&
+      !activityStatus &&
+      "bg-primary",
    props.color == "red" && "bg-red",

    // Changing the opacity when active vs when not
@@ -73,7 +83,7 @@ export default function Button (props: ButtonProps): JSX.Element {
    "relative duration-200",

    // Show the loading sign if the loading indicator is on
-    props.loading == true ? "opacity-0" : "opacity-100",
+    Boolean(props.loading) ? "opacity-0" : "opacity-100",
    props.size == "md" && "text-sm",
    props.size == "lg" && "text-lg"
  );
@@ -100,7 +110,7 @@ export default function Button (props: ButtonProps): JSX.Element {
        </div>
        {props.icon && (
          <FontAwesomeIcon
-            icon={props.icon as IconProp}
+            icon={props.icon}
            className={`flex my-auto font-extrabold ${
              props.size == "icon-sm" ? "text-sm" : "text-md"
            } ${(props.text || props.textDisabled) && "mr-2"}`}
@@ -115,7 +125,9 @@ export default function Button (props: ButtonProps): JSX.Element {
          />
        )}
        {(props.text || props.textDisabled) && (
-          <p className={textStyle}>{activityStatus ? props.text : props.textDisabled}</p>
+          <p className={textStyle}>
+            {activityStatus ? props.text : props.textDisabled}
+          </p>
        )}
      </div>
    </button>
--- a/frontend/components/basic/layout.js
+++ b/frontend/components/basic/layout.js
@@ -3,8 +3,9 @@ import { useEffect, useState } from "react";
 import Link from "next/link";
 import { useRouter } from "next/router";
 import {
+  faBookOpen,
  faGear,
-  faHouse,
+  faKey,
  faMobile,
  faPlug,
  faUser,
@@ -114,7 +115,7 @@ export default function Layout({ children }) {
      href:
        "/dashboard/" + workspaceMapping[workspaceSelected] + "?Development",
      title: "Secrets",
-      emoji: <FontAwesomeIcon icon={faHouse} />,
+      emoji: <FontAwesomeIcon icon={faKey} />,
    },
    {
      href: "/users/" + workspaceMapping[workspaceSelected],
@@ -214,66 +215,88 @@ export default function Layout({ children }) {
        <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">
-            <nav>
-              <div className="py-6"></div>
-              <div className="flex justify-center w-full mt-7 mb-8 bg-bunker-600 w-full h-full flex flex-col items-center px-4">
-                <div className="text-gray-400 self-start ml-1 mb-1 text-xs font-semibold tracking-wide">
-                  PROJECT
+            <nav className="flex flex-col justify-between items-between h-full">
+              {/* <div className="py-6"></div> */}
+              <div>
+                <div className="flex justify-center w-full mt-[4.5rem] mb-6 bg-bunker-600 w-full h-20 flex flex-col items-center px-4">
+                  <div className="text-gray-400 self-start ml-1 mb-1 text-xs font-semibold tracking-wide">
+                    PROJECT
+                  </div>
+                  {workspaceList.length > 0 ? (
+                    <Listbox
+                      selected={workspaceSelected}
+                      onChange={setWorkspaceSelected}
+                      data={workspaceList}
+                      buttonAction={openModal}
+                      text=""
+                      workspaceMapping={workspaceMapping}
+                    />
+                  ) : (
+                    <Button
+                      text="Add Project"
+                      onButtonPressed={openModal}
+                      color="mineshaft"
+                      size="md"
+                      icon={faPlus}
+                    />
+                  )}
                </div>
-                {workspaceList.length > 0 ? (
-                  <Listbox
-                    selected={workspaceSelected}
-                    onChange={setWorkspaceSelected}
-                    data={workspaceList}
-                    buttonAction={openModal}
-                    text=""
-                    workspaceMapping={workspaceMapping}
-                  />
-                ) : (
-                  <Button
-                    text="Add Project"
-                    onButtonPressed={openModal}
-                    color="mineshaft"
-                    size="md"
-                    icon={faPlus}
-                  />
-                )}
-              </div>
-              <ul>
-                {workspaceList.length > 0 &&
-                  menuItems.map(({ href, title, emoji }) => (
-                    <li className="mt-0.5 mx-2" key={title}>
-                      {router.asPath.split("/")[1] === href.split("/")[1] &&
-                      (["project", "billing", "org", "personal"].includes(
-                        router.asPath.split("/")[2]
-                      )
-                        ? router.asPath.split("/")[2] === href.split("/")[2]
-                        : true) ? (
-                        <div
-                          className={`flex relative px-0.5 py-2.5 text-white text-sm rounded cursor-pointer bg-primary-50/10`}
-                        >
-                          <div className="absolute top-0 my-1 ml-1 inset-0 bg-primary w-1 rounded-xl mr-1"></div>
-                          <p className="w-6 ml-4 mr-2 flex items-center justify-center text-lg">{emoji}</p>
-                          {title}
-                        </div>
-                      ) : router.asPath == "/noprojects" ? (
-                        <div className={`flex p-2.5 text-white text-sm rounded`}>
-                          <p className="w-10 flex items-center justify-center text-lg">{emoji}</p>
-                          {title}
-                        </div>
-                      ) : (
-                        <Link href={href}>
+                <ul>
+                  {workspaceList.length > 0 &&
+                    menuItems.map(({ href, title, emoji }) => (
+                      <li className="mt-0.5 mx-2" key={title}>
+                        {router.asPath.split("/")[1] === href.split("/")[1] &&
+                        (["project", "billing", "org", "personal"].includes(
+                          router.asPath.split("/")[2]
+                        )
+                          ? router.asPath.split("/")[2] === href.split("/")[2]
+                          : true) ? (
                          <div
-                            className={`flex p-2.5 text-white text-sm rounded cursor-pointer hover:bg-primary-50/5`}
+                            className={`flex relative px-0.5 py-2.5 text-white text-sm rounded cursor-pointer bg-primary-50/10`}
                          >
+                            <div className="absolute top-0 my-1 ml-1 inset-0 bg-primary w-1 rounded-xl mr-1"></div>
+                            <p className="w-6 ml-4 mr-2 flex items-center justify-center text-lg">{emoji}</p>
+                            {title}
+                          </div>
+                        ) : router.asPath == "/noprojects" ? (
+                          <div className={`flex p-2.5 text-white text-sm rounded`}>
                            <p className="w-10 flex items-center justify-center text-lg">{emoji}</p>
                            {title}
                          </div>
-                        </Link>
-                      )}
-                    </li>
-                  ))}
-              </ul>
+                        ) : (
+                          <Link href={href}>
+                            <div
+                              className={`flex p-2.5 text-white text-sm rounded cursor-pointer hover:bg-primary-50/5`}
+                            >
+                              <p className="w-10 flex items-center justify-center text-lg">{emoji}</p>
+                              {title}
+                            </div>
+                          </Link>
+                        )}
+                      </li>
+                    ))}
+                </ul>
+              </div>
+              <div className="w-full mt-40 mb-4 px-2">
+                {router.asPath.split("/")[1] === "home" ? (
+                  <div
+                    className={`flex relative px-0.5 py-2.5 text-white text-sm rounded cursor-pointer bg-primary-50/10`}
+                  >
+                    <div className="absolute top-0 my-1 ml-1 inset-0 bg-primary w-1 rounded-xl mr-1"></div>
+                    <p className="w-6 ml-4 mr-2 flex items-center justify-center text-lg"><FontAwesomeIcon icon={faBookOpen}/></p>
+                    Infisical Guide
+                  </div>
+                ) : (
+                  <Link href={`/home/` + workspaceMapping[workspaceSelected]}>
+                    <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`}
+                    >
+                      <p className="w-10 flex items-center justify-center text-lg"><FontAwesomeIcon icon={faBookOpen}/></p>
+                      Infisical Guide
+                    </div>
+                  </Link>
+                )}
+              </div>
            </nav>
          </aside>
          <AddWorkspaceDialog
--- a/frontend/components/billing/Plan.js
+++ b/frontend/components/billing/Plan.js
@@ -61,7 +61,7 @@ export default function Plan({ plan }) {
                </button>
              </div>
            )}
-            <a href="/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>
--- a/frontend/components/dashboard/DashboardInputField.tsx
+++ b/frontend/components/dashboard/DashboardInputField.tsx
@@ -1,4 +1,4 @@
-import React, { useRef } from "react";
+import React, { SyntheticEvent, useRef } from "react";
 import { faCircle } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

@@ -6,6 +6,15 @@ import guidGenerator from "../utilities/randomId";

 const REGEX = /([$]{.*?})/g;

+interface DashboardInputFieldProps {
+  index: number;
+  onChangeHandler: (value: string, index: number) => void;
+  value: string;
+  type: "varName" | "value";
+  blurred: boolean;
+  duplicates: string[];
+}
+
 /**
 * This component renders the input fields on the dashboard
 * @param {object} obj - the order number of a keyPair
@@ -14,51 +23,60 @@ const REGEX = /([$]{.*?})/g;
 * @param {string} obj.type - whether the input field is for a Key Name or for a Key Value
 * @param {string} obj.value - value of the InputField
 * @param {boolean} obj.blurred - whether the input field should be blurred (behind the gray dots) or not; this can be turned on/off in the dashboard
- * @param {string[]} obj.duplicates - list of all the suplicated key names on the dashboard
+ * @param {string[]} obj.duplicates - list of all the duplicated key names on the dashboard
 * @returns
 */
+
 const DashboardInputField = ({
  index,
  onChangeHandler,
  type,
  value,
  blurred,
-  duplicates
-}) => {
-  const ref = useRef(null);
-  const syncScroll = (e) => {
-    ref.current.scrollTop = e.target.scrollTop;
-    ref.current.scrollLeft = e.target.scrollLeft;
+  duplicates,
+}: DashboardInputFieldProps) => {
+  const ref = useRef<HTMLDivElement | null>(null);
+  const syncScroll = (e: SyntheticEvent<HTMLDivElement>) => {
+    if (ref.current == null) return;
+
+    ref.current.scrollTop = e.currentTarget.scrollTop;
+    ref.current.scrollLeft = e.currentTarget.scrollLeft;
  };
-  
+
  if (type === "varName") {
-    const startsWithNumber = !isNaN(value.charAt(0)) && value != "";
+    const startsWithNumber = !isNaN(Number(value.charAt(0))) && value != "";
    const hasDuplicates = duplicates?.includes(value);
    const error = startsWithNumber || hasDuplicates;

    return (
      <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"} rounded-md`}
+          className={`group relative flex flex-col justify-center w-full max-w-2xl border ${
+            error ? "border-red" : "border-mineshaft-500"
+          } rounded-md`}
        >
          <input
-            onChange={(e) => onChangeHandler(e.target.value.toUpperCase(), index)}
+            onChange={(e) =>
+              onChangeHandler(e.target.value.toUpperCase(), index)
+            }
            type={type}
            value={value}
-            className={`asolute 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"} duration-200`}
+            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"
+            } duration-200`}
            spellCheck="false"
          />
        </div>
-        {startsWithNumber && 
+        {startsWithNumber && (
          <p className="text-red text-xs mt-0.5 mx-1 mb-2 max-w-xs">
            Should not start with a number
          </p>
-        }
-        {hasDuplicates && !startsWithNumber &&
+        )}
+        {hasDuplicates && !startsWithNumber && (
          <p className="text-red text-xs mt-0.5 mx-1 mb-2 max-w-xs">
            Secret names should be unique
          </p>
-        }
+        )}
      </div>
    );
  } else if (type === "value") {
@@ -78,61 +96,61 @@ const DashboardInputField = ({
            } 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"
          />
-          <div 
-            ref={ref} 
+          <div
+            ref={ref}
            className={`${
              blurred
                ? "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) => {
-                if (word.match(REGEX) !== null) {
-                  return (
-                    <span className="ph-no-capture text-yellow" key={id}>
-                      {word.slice(0, 2)}
-                      <span className="ph-no-capture text-yellow-200/80">
-                        {word.slice(2, word.length - 1)}
-                      </span>
-                      {word.slice(word.length - 1, word.length) == "}" ? (
-                        <span className="ph-no-capture text-yellow">
-                          {word.slice(word.length - 1, word.length)}
-                        </span>
-                      ) : (
-                        <span className="ph-no-capture text-yellow-400">
-                          {word.slice(word.length - 1, word.length)}
-                        </span>
-                      )}
+            {value.split(REGEX).map((word, id) => {
+              if (word.match(REGEX) !== null) {
+                return (
+                  <span className="ph-no-capture text-yellow" key={id}>
+                    {word.slice(0, 2)}
+                    <span className="ph-no-capture text-yellow-200/80">
+                      {word.slice(2, word.length - 1)}
                    </span>
-                  );
-                } else {
-                  return <span key={id} className="ph-no-capture">{word}</span>;
-                }
-              })
-            }
+                    {word.slice(word.length - 1, word.length) == "}" ? (
+                      <span className="ph-no-capture text-yellow">
+                        {word.slice(word.length - 1, word.length)}
+                      </span>
+                    ) : (
+                      <span className="ph-no-capture text-yellow-400">
+                        {word.slice(word.length - 1, word.length)}
+                      </span>
+                    )}
+                  </span>
+                );
+              } else {
+                return (
+                  <span key={id} className="ph-no-capture">
+                    {word}
+                  </span>
+                );
+              }
+            })}
          </div>
          {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(() => (
-                    <FontAwesomeIcon
-                      key={guidGenerator()}
-                      className="text-xxs mx-0.5"
-                      icon={faCircle}
-                    />
-                  ))}
+                {value.split("").map(() => (
+                  <FontAwesomeIcon
+                    key={guidGenerator()}
+                    className="text-xxs mx-0.5"
+                    icon={faCircle}
+                  />
+                ))}
              </div>
            </div>
-          )} 
+          )}
        </div>
      </div>
    );
  }
+
+  return <>Something Wrong</>;
 };

 export default React.memo(DashboardInputField);
--- a/frontend/components/dashboard/DropZone.tsx
+++ b/frontend/components/dashboard/DropZone.tsx
@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { type ChangeEvent, type DragEvent, useState } from "react";
 import Image from "next/image";
 import { faUpload } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -8,27 +8,37 @@ import Error from "../basic/Error";
 import parse from "../utilities/file";
 import guidGenerator from "../utilities/randomId";

+interface DropZoneProps {
+  // TODO: change Data type from any
+  setData: (data: any) => void;
+  setErrorDragAndDrop: (hasError: boolean) => void;
+  createNewFile: () => void;
+  errorDragAndDrop: boolean;
+  setButtonReady: (isReady: boolean) => void;
+  keysExist: boolean;
+  numCurrentRows: number;
+}
+
 const DropZone = ({
  setData,
  setErrorDragAndDrop,
  createNewFile,
  errorDragAndDrop,
-  addPresetRow,
  setButtonReady,
  keysExist,
  numCurrentRows,
-}) => {
-  const handleDragEnter = (e) => {
+}: DropZoneProps) => {
+  const handleDragEnter = (e: DragEvent) => {
    e.preventDefault();
    e.stopPropagation();
  };

-  const handleDragLeave = (e) => {
+  const handleDragLeave = (e: DragEvent) => {
    e.preventDefault();
    e.stopPropagation();
  };

-  const handleDragOver = (e) => {
+  const handleDragOver = (e: DragEvent) => {
    e.preventDefault();
    e.stopPropagation();

@@ -39,22 +49,25 @@ const DropZone = ({
  const [loading, setLoading] = useState(false);

  // This function function immediately parses the file after it is dropped
-  const handleDrop = async (e) => {
+  const handleDrop = async (e: DragEvent) => {
    setLoading(true);
    setTimeout(() => setLoading(false), 5000);
    e.preventDefault();
    e.stopPropagation();
    e.dataTransfer.dropEffect = "copy";

-    var file = e.dataTransfer.files[0],
-      reader = new FileReader();
-    reader.onload = function (event) {
-      const keyPairs = parse(event.target.result);
+    const file = e.dataTransfer.files[0];
+    const reader = new FileReader();
+
+    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) => [
        guidGenerator(),
        numCurrentRows + index,
        key,
-        keyPairs[key],
+        keyPairs[key as keyof typeof keyPairs],
        "shared",
      ]);
      setData(newData);
@@ -72,23 +85,28 @@ const DropZone = ({
  };

  // This function is used when the user manually selects a file from the in-browser dircetory (not drag and drop)
-  const handleFileSelect = (e) => {
+  const handleFileSelect = (e: ChangeEvent<HTMLInputElement>) => {
    setLoading(true);
    setTimeout(() => setLoading(false), 5000);
-    var file = e.target.files[0],
-      reader = new FileReader();
-    reader.onload = function (event) {
-      const newData = event.target.result
-        .split("\n")
-        .map((line, index) => [
-          guidGenerator(),
-          numCurrentRows + index,
-          line.split("=")[0],
-          line.split("=").slice(1, line.split("=").length).join("="),
-          "shared",
-        ]);
-      setData(newData);
-      setButtonReady(true);
+    if (e.currentTarget.files === null) return;
+    const file = e.currentTarget.files[0];
+    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) => [
+            guidGenerator(),
+            numCurrentRows + index,
+            line.split("=")[0],
+            line.split("=").slice(1, line.split("=").length).join("="),
+            "shared",
+          ]);
+        setData(newData);
+        setButtonReady(true);
+      }
    };
    reader.readAsText(file);
  };
@@ -105,17 +123,17 @@ const DropZone = ({
  ) : keysExist ? (
    <div
      className="opacity-60 hover:opacity-100 duration-200 relative bg-bunker outline max-w-[calc(100%-1rem)] w-full outline-dashed outline-gray-600 rounded-md outline-2 flex flex-col items-center justify-center mb-16 mx-auto mt-1 py-8 px-2"
-      onDragEnter={(e) => handleDragEnter(e)}
-      onDragOver={(e) => handleDragOver(e)}
-      onDragLeave={(e) => handleDragLeave(e)}
-      onDrop={(e) => handleDrop(e)}
+      onDragEnter={handleDragEnter}
+      onDragOver={handleDragOver}
+      onDragLeave={handleDragLeave}
+      onDrop={handleDrop}
    >
      <input
        id="fileSelect"
        type="file"
        className="opacity-0 absolute w-full h-full"
        accept=".txt,.env"
-        onChange={(e) => handleFileSelect(e)}
+        onChange={handleFileSelect}
      />
      {errorDragAndDrop ? (
        <div className="my-3 max-w-xl opacity-80"></div>
@@ -142,10 +160,10 @@ const DropZone = ({
  ) : (
    <div
      className="opacity-80 hover:opacity-100 duration-200 relative bg-bunker outline max-w-2xl w-full outline-dashed outline-gray-700 rounded-md outline-2 flex flex-col items-center justify-center pt-16 mb-16 px-4"
-      onDragEnter={(e) => handleDragEnter(e)}
-      onDragOver={(e) => handleDragOver(e)}
-      onDragLeave={(e) => handleDragLeave(e)}
-      onDrop={(e) => handleDrop(e)}
+      onDragEnter={handleDragEnter}
+      onDragOver={handleDragOver}
+      onDragLeave={handleDragLeave}
+      onDrop={handleDrop}
    >
      <FontAwesomeIcon icon={faUpload} className="text-7xl mb-8" />
      <p className="">Drag and drop your .env file here.</p>
@@ -154,7 +172,7 @@ const DropZone = ({
        type="file"
        className="opacity-0 absolute w-full h-full"
        accept=".txt,.env"
-        onChange={(e) => handleFileSelect(e)}
+        onChange={handleFileSelect}
      />
      <div className="flex flex-row w-full items-center justify-center mb-6 mt-5">
        <div className="border-t border-gray-700 w-1/5"></div>
--- a/frontend/components/utilities/attemptLogin.js
+++ b/frontend/components/utilities/attemptLogin.js
@@ -137,7 +137,15 @@ const attemptLogin = async (
            await pushKeys(
              {
                DATABASE_URL: [
-                  "mongodb+srv://this_is:an_example@mongodb.net",
+                  "mongodb+srv://${DB_USERNAME}:${DB_PASSWORD}@mongodb.net",
+                  "personal",
+                ],
+                DB_USERNAME: [
+                  "user1234",
+                  "personal",
+                ],
+                DB_PASSWORD: [
+                  "ah8jak3hk8dhiu4dw7whxwe1l",
                  "personal",
                ],
                TWILIO_AUTH_TOKEN: [
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -53,9 +53,12 @@
  "devDependencies": {
    "@tailwindcss/typography": "^0.5.4",
    "@types/node": "18.11.9",
+    "@typescript-eslint/eslint-plugin": "^5.45.0",
+    "@typescript-eslint/parser": "^5.45.0",
    "autoprefixer": "^10.4.7",
-    "eslint": "^8.28.0",
+    "eslint": "^8.29.0",
    "eslint-config-next": "^13.0.5",
+    "eslint-import-resolver-typescript": "^3.5.2",
    "eslint-plugin-simple-import-sort": "^8.0.0",
    "postcss": "^8.4.14",
    "prettier": "2.7.1",
--- a/frontend/pages/api/organization/GetOrgUsers.js
+++ b/frontend/pages/api/organization/GetOrgUsers.js
@@ -2,13 +2,13 @@ import SecurityClient from "~/utilities/SecurityClient";

 /**
 * This route lets us get all the users in an org.
- * @param {*} req
- * @param {*} res
+ * @param {object} obj
+ * @param {string} obj.orgId - organization Id
 * @returns
 */
-const getOrganizationUsers = (req, res) => {
+const getOrganizationUsers = ({ orgId }) => {
  return SecurityClient.fetchCall(
-    "/api/v1/organization/" + req.orgId + "/users",
+    "/api/v1/organization/" + orgId + "/users",
    {
      method: "GET",
      headers: {
--- a/frontend/pages/home/[id].tsx
+++ b/frontend/pages/home/[id].tsx
@@ -0,0 +1,142 @@
+import React, { useEffect, useState } from "react";
+import Link from "next/link";
+import { useRouter } from "next/router";
+import { IconProp } from "@fortawesome/fontawesome-svg-core";
+import { faSlack } from "@fortawesome/free-brands-svg-icons";
+import { faCheckCircle, faHandPeace, faNetworkWired, faPlug, faPlus, faStar, faUserPlus } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import getOrganizationUsers from "../api/organization/GetOrgUsers";
+import checkUserAction from "../api/userActions/checkUserAction";
+import registerUserAction from "../api/userActions/registerUserAction";
+
+type ItemProps = { 
+  text: string; 
+  subText: string; 
+  complete: boolean; 
+  icon: IconProp; 
+  time: string; 
+  userAction?: string;
+  link?: string;
+};
+
+const learningItem = ({ text, subText, complete, icon, time, userAction, link }: ItemProps): JSX.Element => {
+  if (link) {
+    return (
+      <Link href={link}>
+        <a target={`${link.includes("https") ? "_blank" : "_self"}`} rel="noopener noreferrer" className="w-full">
+          <div 
+            onClick={async () => { 
+              if (userAction) { 
+                await registerUserAction({ 
+                  action: userAction 
+                })
+              }
+            }}
+            className="relative bg-bunker-700 hover:bg-bunker-500 shadow-xl duration-200 rounded-md border border-dashed border-bunker-400 pl-2 pr-6 py-2 h-[5.5rem] w-full flex items-center justify-between overflow-hidden my-1.5 cursor-pointer">
+            <div className="flex flex-row items-center mr-4">
+              <FontAwesomeIcon icon={icon} className="text-4xl mx-2 w-16" />
+              {complete && 
+              <div className="bg-bunker-700 w-7 h-7 rounded-full absolute left-11 top-10 p-2 flex items-center justify-center">
+                <FontAwesomeIcon icon={faCheckCircle} className="text-4xl w-5 h-5 text-green" />
+              </div>}
+              <div className="flex flex-col items-start">
+                <div className="text-xl font-semibold mt-0.5">{text}</div>
+                <div className="text-sm font-normal">{subText}</div>
+              </div>
+            </div>
+            <div className={`pr-4 font-semibold text-sm w-28 text-right ${complete && "text-green"}`}>
+              {complete ? "Complete!" : "About " + time}
+            </div>
+            {complete && <div className="absolute bottom-0 left-0 h-1 w-full bg-green"></div>}
+          </div>
+        </a>
+      </Link>
+    );
+  } else {
+    return (
+      <div 
+      onClick={async () => { 
+        if (userAction) { 
+          await registerUserAction({ 
+            action: userAction 
+          })
+        }
+      }}
+        className="relative bg-bunker-700 hover:bg-bunker-500 shadow-xl duration-200 rounded-md border border-dashed border-bunker-400 pl-2 pr-6 py-2 h-[5.5rem] w-full flex items-center justify-between overflow-hidden my-1.5 cursor-pointer">
+        <div className="flex flex-row items-center mr-4">
+          <FontAwesomeIcon icon={icon} className="text-4xl mx-2 w-16" />
+          {complete && 
+          <div className="bg-bunker-700 w-7 h-7 rounded-full absolute left-11 top-10">
+            <FontAwesomeIcon icon={faCheckCircle} className="absolute text-4xl left-12 top-16 w-5 h-5 text-green" />
+          </div>}
+          <div className="flex flex-col items-start">
+            <div className="text-xl font-semibold mt-0.5">{text}</div>
+            <div className="text-sm font-normal mt-0.5">{subText}</div>
+          </div>
+        </div>
+        <div className={`pr-4 font-semibold text-sm w-28 text-right ${complete && "text-green"}`}>
+          {complete ? "Complete!" : "About " + time}
+        </div>
+        {complete && <div className="absolute bottom-0 left-0 h-1 w-full bg-green"></div>}
+      </div>
+    );
+  }
+}
+
+/**
+ * This tab is called Home because in the future it will include some company news, 
+ * updates, roadmap, relavant blogs, etc. Currently it only has the setup instruction 
+ * for the new users
+ */
+export default function Home() {
+  const router = useRouter();
+  const [hasUserClickedSlack, setHasUserClickedSlack] = useState(false);
+  const [hasUserClickedIntro, setHasUserClickedIntro] = useState(false);
+  const [hasUserStarred, setHasUserStarred] = useState(false);
+  const [usersInOrg, setUsersInOrg] = useState(false);
+
+  useEffect(() => {
+    const checkUserActionsFunction = async () => {
+      let userActionSlack = await checkUserAction({
+        action: "slack_cta_clicked",
+      });
+      setHasUserClickedSlack(userActionSlack ? true : false);
+
+      let userActionIntro = await checkUserAction({
+        action: "intro_cta_clicked",
+      });
+      setHasUserClickedIntro(userActionIntro ? true : false);
+
+      let userActionStar = await checkUserAction({
+        action: "star_cta_clicked",
+      });
+      setHasUserStarred(userActionStar ? true : false);
+
+      let orgId = localStorage.getItem("orgData.id");
+      const orgUsers = await getOrganizationUsers({
+        orgId: orgId ? orgId : "",
+      });
+      setUsersInOrg(orgUsers.length > 1)
+    };
+    checkUserActionsFunction();
+  }, []);
+
+  return (
+    <div className="mx-6 lg:mx-0 w-full overflow-y-scroll pt-28 h-screen">
+      <div className="flex flex-col items-center text-gray-300 text-lg mx-auto max-w-2xl lg:max-w-3xl xl:max-w-4xl">
+        <div className="text-3xl font-bold text-left w-full pt-6">Your quick start guide</div>
+        <div className="text-md text-left w-full pt-2 pb-4 text-bunker-300">Click on the items below and follow the instructions.</div>
+        {learningItem({ text: "Get to know Infisical", subText: "", complete: hasUserClickedIntro, icon: faHandPeace, time: "3 min", userAction: "intro_cta_clicked", link: "https://www.youtube.com/watch?v=JS3OKYU2078" })}
+        {learningItem({ text: "Add your secrets", subText: "Click to see example secrets, and add your own.", complete: false, icon: faPlus, time: "2 min", userAction: "first_time_secrets_pushed", link: "/dashboard/" + router.query.id })}
+        {learningItem({ text: "Inject secrets locally", subText: "Replace .env files with a more secure an efficient alternative.", complete: false, icon: faNetworkWired, time: "8 min", link: "https://infisical.com/docs/getting-started/quickstart" })}
+        {learningItem({ text: "Integrate Infisical with your infrastructure", subText: "Only a few integrations are currently available. Many more coming soon!", complete: false, icon: faPlug, time: "15 min", link: "https://infisical.com/docs/integrations/overview"  })}
+        {learningItem({ text: "Invite your teammates", subText: "", complete: usersInOrg, icon: faUserPlus, time: "2 min", link: "/settings/org/" + router.query.id + "?invite" })}
+        {learningItem({ text: "Join Infisical Slack", subText: "Have any questions? Ask us!", complete: hasUserClickedSlack, icon: faSlack, time: "1 min", userAction: "slack_cta_clicked", link: "https://join.slack.com/t/infisical-users/shared_invite/zt-1kdbk07ro-RtoyEt_9E~fyzGo_xQYP6g" })}
+        {learningItem({ text: "Star Infisical on GitHub", subText: "Like what we're doing? You know what to do! :)", complete: hasUserStarred, icon: faStar, time: "1 min", userAction: "star_cta_clicked", link: "https://github.com/Infisical/infisical" })}
+      </div>
+    </div>
+  );
+}
+
+Home.requireAuth = true;
--- a/frontend/pages/signup.js
+++ b/frontend/pages/signup.js
@@ -495,7 +495,9 @@ export default function SignUp() {
              setBackupKeyError,
              setBackupKeyIssued,
            });
-            router.push("/dashboard/");
+            const userWorkspaces = await getWorkspaces();
+            let userWorkspace = userWorkspaces[0]._id;
+            router.push("/home/" + userWorkspace);
          }}
          size="lg"
        />