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

frontend/pages/_app.js

@@ -2,11 +2,11 @@ import { useEffect } from "react";
 import { useRouter } from "next/router";
 import { config } from "@fortawesome/fontawesome-svg-core";
 
-import { initPostHog } from "~/components/analytics/posthog";
-import Layout from "~/components/basic/layout";
+import Layout from "~/components/basic/Layout";
+import NotificationProvider from "~/components/context/Notifications/NotificationProvider";
 import RouteGuard from "~/components/RouteGuard";
 import { publicPaths } from "~/const";
-import { ENV } from "~/utilities/config";
+import Telemetry from "~/utilities/telemetry/Telemetry";
 
 import "@fortawesome/fontawesome-svg-core/styles.css";
 import "../styles/globals.css";
@@ -15,17 +15,14 @@ config.autoAddCss = false;
 
 const App = ({ Component, pageProps, ...appProps }) => {
   const router = useRouter();
-  const posthog = initPostHog();
 
   useEffect(() => {
     // Init for auto capturing
-    const posthog = initPostHog();
+    const telemetry = new Telemetry().getInstance();
 
     const handleRouteChange = () => {
       if (typeof window !== "undefined") {
-        if (ENV == "production") {
-          posthog.capture("$pageview");
-        }
+        telemetry.capture("$pageview");
       }
     };
 
@@ -46,9 +43,11 @@ const App = ({ Component, pageProps, ...appProps }) => {
 
   return (
     <RouteGuard>
-      <Layout>
-        <Component {...pageProps} />
-      </Layout>
+      <NotificationProvider>
+        <Layout>
+          <Component {...pageProps} />
+        </Layout>
+      </NotificationProvider>
     </RouteGuard>
   );
 };

frontend/pages/api/auth/Login1.js

@@ -1,20 +0,0 @@
-/**
- * This is the first step of the login process (pake)
- * @param {*} email
- * @param {*} clientPublicKey
- * @returns
- */
-const login1 = (email, clientPublicKey) => {
-  return fetch("/api/v1/auth/login1", {
-    method: "POST",
-    headers: {
-      "Content-Type": "application/json",
-    },
-    body: JSON.stringify({
-      email: email,
-      clientPublicKey,
-    }),
-  });
-};
-
-export default login1;

frontend/pages/api/auth/Login1.ts

@@ -0,0 +1,32 @@
+interface Login1 {
+  serverPublicKey: string;
+  salt: string;
+}
+
+/**
+ * This is the first step of the login process (pake)
+ * @param {*} email
+ * @param {*} clientPublicKey
+ * @returns
+ */
+const login1 = async (email: string, clientPublicKey: string) => {
+  const response = await fetch("/api/v1/auth/login1", {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify({
+      email: email,
+      clientPublicKey,
+    }),
+  });
+  // need precise error handling about the status code
+  if (response?.status === 200) {
+    const data = (await response.json()) as unknown as Login1;
+    return data;
+  }
+
+  throw new Error("Wrong password");
+};
+
+export default login1;

frontend/pages/api/auth/Login2.js

@@ -1,28 +0,0 @@
-/**
- * This is the second step of the login process
- * @param {*} email
- * @param {*} clientPublicKey
- * @returns
- */
-const login2 = (email, clientProof) => {
-  return fetch("/api/v1/auth/login2", {
-    method: "POST",
-    headers: {
-      "Content-Type": "application/json",
-    },
-    body: JSON.stringify({
-      email: email,
-      clientProof,
-    }),
-    credentials: "include",
-  }).then((res) => {
-    if (res.status == 200) {
-      console.log("User logged in", res);
-      return res;
-    } else {
-      console.log("Failed to log in");
-    }
-  });
-};
-
-export default login2;

frontend/pages/api/auth/Login2.ts

@@ -0,0 +1,36 @@
+interface Login2Response {
+  encryptedPrivateKey: string;
+  iv: string;
+  publicKey: string;
+  tag: string;
+  token: string;
+}
+
+/**
+ * This is the second step of the login process
+ * @param {*} email
+ * @param {*} clientPublicKey
+ * @returns
+ */
+const login2 = async (email: string, clientProof: string) => {
+  const response = await fetch("/api/v1/auth/login2", {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify({
+      email: email,
+      clientProof,
+    }),
+    credentials: "include",
+  });
+  // need precise error handling about the status code
+  if (response.status == 200) {
+    const data = (await response.json()) as unknown as Login2Response;
+    return data;
+  }
+
+  throw new Error("Password verification failed");
+};
+
+export default login2;

frontend/pages/api/organization/GetOrgUserProjects.js

@@ -6,7 +6,7 @@ import SecurityClient from "~/utilities/SecurityClient";
  * @param {*} res
  * @returns
  */
-const getOrganizationUserProjects = (req, res) => {
+const getOrganizationUserProjects = (req) => {
   return SecurityClient.fetchCall(
     "/api/v1/organization/" + req.orgId + "/my-workspaces",
     {

frontend/pages/api/workspace/getWorkspaces.ts

@@ -1,5 +1,12 @@
 import SecurityClient from "~/utilities/SecurityClient";
 
+interface Workspace {
+  __v: number;
+  _id: string;
+  name: string;
+  organization: string;
+}
+
 /**
  * This route lets us get the workspaces of a certain user
  * @returns
@@ -12,10 +19,11 @@ const getWorkspaces = () => {
     },
   }).then(async (res) => {
     if (res?.status == 200) {
-      return (await res.json()).workspaces;
-    } else {
-      console.log("Failed to get projects");
+      const data = (await res.json()) as unknown as { workspaces: Workspace[] };
+      return data.workspaces;
     }
+
+    throw new Error("Failed to get projects");
   });
 };
 

frontend/pages/dashboard/[id].js

@@ -26,6 +26,7 @@ import { Menu, Transition } from "@headlessui/react";
 import Button from "~/components/basic/buttons/Button";
 import ListBox from "~/components/basic/Listbox";
 import BottonRightPopup from "~/components/basic/popups/BottomRightPopup";
+import { useNotificationContext } from "~/components/context/Notifications/NotificationProvider";
 import DashboardInputField from "~/components/dashboard/DashboardInputField";
 import DropZone from "~/components/dashboard/DropZone";
 import NavHeader from "~/components/navigation/NavHeader";
@@ -60,7 +61,7 @@ const KeyPair = ({
   modifyValue,
   modifyVisibility,
   isBlurred,
-  duplicates
+  duplicates,
 }) => {
   const [randomStringLength, setRandomStringLength] = useState(32);
 
@@ -227,6 +228,8 @@ export default function Dashboard() {
   const [checkDocsPopUpVisible, setCheckDocsPopUpVisible] = useState(false);
   const [hasUserEverPushed, setHasUserEverPushed] = useState(false);
 
+  const { createNotification } = useNotificationContext();
+
   // #TODO: fix save message for changing reroutes
   // const beforeRouteHandler = (url) => {
   // 	const warningText =
@@ -370,46 +373,61 @@ export default function Dashboard() {
     );
 
     // Checking if any of the secret keys start with a number - if so, don't do anything
-    const nameErrors = !Object.keys(obj).map(key => !isNaN(key.charAt(0))).every(v => v === false);
-    const duplicatesExist = data?.map(item => item[2]).filter((item, index) => index !== data?.map(item => item[2]).indexOf(item)).length > 0;
+    const nameErrors = !Object.keys(obj)
+      .map((key) => !isNaN(key.charAt(0)))
+      .every((v) => v === false);
+    const duplicatesExist =
+      data
+        ?.map((item) => item[2])
+        .filter(
+          (item, index) => index !== data?.map((item) => item[2]).indexOf(item)
+        ).length > 0;
 
     if (nameErrors) {
-      console.log("Solve all name errors first!");
-    } else if (duplicatesExist) {
-      console.log("Remove the duplicated entries first!");
-    } else {
-      // Once "Save changes is clicked", disable that button
-      setButtonReady(false);
-      pushKeys({obj, workspaceId: router.query.id, env});
-
-      /**
-       * Check which integrations are active for this project and environment
-       * If there are any, update environment variables for those integrations
-       */
-      let integrations = await getWorkspaceIntegrations({
-        workspaceId: router.query.id,
-      });
-      integrations.map(async (integration) => {
-        if (
-          envMapping[env] == integration.environment &&
-          integration.isActive == true
-        ) {
-          let objIntegration = Object.assign(
-            {},
-            ...data.map((row) => ({ [row[2]]: row[3] }))
-          );
-          await pushKeysIntegration({
-            obj: objIntegration,
-            integrationId: integration._id,
-          });
-        }
+      return createNotification({
+        text: "Solve all name errors first!",
+        type: "error",
       });
+    }
 
-      // If this user has never saved environment variables before, show them a prompt to read docs
-      if (!hasUserEverPushed) {
-        setCheckDocsPopUpVisible(true);
-        await registerUserAction({ action: "first_time_secrets_pushed" });
+    if (duplicatesExist) {
+      return createNotification({
+        text: "Your secrets weren't saved; please fix the conflicts first.",
+        type: "error",
+      });
+    }
+
+    // Once "Save changed is clicked", disable that button
+    setButtonReady(false);
+    pushKeys({ obj, workspaceId: router.query.id, env });
+
+    /**
+     * Check which integrations are active for this project and environment
+     * If there are any, update environment variables for those integrations
+     */
+    let integrations = await getWorkspaceIntegrations({
+      workspaceId: router.query.id,
+    });
+    integrations.map(async (integration) => {
+      if (
+        envMapping[env] == integration.environment &&
+        integration.isActive == true
+      ) {
+        let objIntegration = Object.assign(
+          {},
+          ...data.map((row) => ({ [row[2]]: row[3] }))
+        );
+        await pushKeysIntegration({
+          obj: objIntegration,
+          integrationId: integration._id,
+        });
       }
+    });
+
+    // If this user has never saved environment variables before, show them a prompt to read docs
+    if (!hasUserEverPushed) {
+      setCheckDocsPopUpVisible(true);
+      await registerUserAction({ action: "first_time_secrets_pushed" });
     }
   };
 
@@ -649,7 +667,13 @@ export default function Dashboard() {
                           modifyKey={listenChangeKey}
                           modifyVisibility={listenChangeVisibility}
                           isBlurred={blurred}
-                          duplicates={data?.map(item => item[2]).filter((item, index) => index !== data?.map(item => item[2]).indexOf(item))}
+                          duplicates={data
+                            ?.map((item) => item[2])
+                            .filter(
+                              (item, index) =>
+                                index !==
+                                data?.map((item) => item[2]).indexOf(item)
+                            )}
                         />
                       ))}
                   </div>
@@ -697,7 +721,13 @@ export default function Dashboard() {
                           modifyKey={listenChangeKey}
                           modifyVisibility={listenChangeVisibility}
                           isBlurred={blurred}
-                          duplicates={data?.map(item => item[2]).filter((item, index) => index !== data?.map(item => item[2]).indexOf(item))}
+                          duplicates={data
+                            ?.map((item) => item[2])
+                            .filter(
+                              (item, index) =>
+                                index !==
+                                data?.map((item) => item[2]).indexOf(item)
+                            )}
                         />
                       ))}
                   </div>

frontend/pages/signup.tsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useRef, useState } from "react";
+import ReactCodeInput from "react-code-input";
 import dynamic from "next/dynamic";
 import Head from "next/head";
 import Image from "next/image";
@@ -20,7 +21,7 @@ import completeAccountInformationSignup from "./api/auth/CompleteAccountInformat
 import sendVerificationEmail from "./api/auth/SendVerificationEmail";
 import getWorkspaces from "./api/workspace/getWorkspaces";
 
-const ReactCodeInput = dynamic(import("react-code-input"));
+// const ReactCodeInput = dynamic(import("react-code-input"));
 const nacl = require("tweetnacl");
 const jsrp = require("jsrp");
 nacl.util = require("tweetnacl-util");
@@ -42,7 +43,7 @@ const props = {
     border: "1px solid gray",
     textAlign: "center",
   },
-};
+} as const;
 const propsPhone = {
   inputStyle: {
     fontFamily: "monospace",
@@ -58,7 +59,7 @@ const propsPhone = {
     border: "1px solid gray",
     textAlign: "center",
   },
-};
+} as const;
 
 export default function SignUp() {
   const [email, setEmail] = useState("");
@@ -85,15 +86,16 @@ export default function SignUp() {
   const [verificationToken, setVerificationToken] = useState();
   const [backupKeyIssued, setBackupKeyIssued] = useState(false);
 
-  useEffect(async () => {
-    let userWorkspace;
-    try {
-      const userWorkspaces = await getWorkspaces();
-      userWorkspace = userWorkspaces[0]._id;
-      router.push("/dashboard/" + userWorkspace);
-    } catch (error) {
-      console.log("Error - Not logged in yet");
-    }
+  useEffect(() => {
+    const tryAuth = async () => {
+      try {
+        const userWorkspaces = await getWorkspaces();
+        router.push("/dashboard/" + userWorkspaces[0]._id);
+      } catch (error) {
+        console.log("Error - Not logged in yet");
+      }
+    };
+    tryAuth();
   }, []);
 
   /**
@@ -108,7 +110,7 @@ export default function SignUp() {
     } else if (step == 2) {
       // Checking if the code matches the email.
       const response = await checkEmailVerificationCode(email, code);
-      if (response.status == "200" || code == "111222") {
+      if (response.status === 200 || code == "111222") {
         setVerificationToken((await response.json()).token);
         setStep(3);
       } else {
@@ -123,7 +125,7 @@ export default function SignUp() {
    * Verifies if the entered email "looks" correct
    */
   const emailCheck = () => {
-    var emailCheckBool = false;
+    let emailCheckBool = false;
     if (!email) {
       setEmailError(true);
       setEmailErrorMessage("Please enter your email.");
@@ -150,7 +152,7 @@ export default function SignUp() {
   // Verifies if the imformation that the users entered (name, workspace) is there, and if the password matched the criteria.
   const signupErrorCheck = async () => {
     setIsLoading(true);
-    var errorCheck = false;
+    let errorCheck = false;
     if (!firstName) {
       setFirstNameError(true);
       errorCheck = true;
@@ -163,13 +165,13 @@ export default function SignUp() {
     } else {
       setLastNameError(false);
     }
-    errorCheck = passwordCheck(
+    errorCheck = passwordCheck({
       password,
       setPasswordErrorLength,
       setPasswordErrorNumber,
       setPasswordErrorLowerCase,
-      errorCheck
-    );
+      currentErrorCheck: errorCheck,
+    });
 
     if (!errorCheck) {
       // Generate a random pair of a public and a private key
@@ -187,7 +189,8 @@ export default function SignUp() {
             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(
@@ -196,45 +199,47 @@ export default function SignUp() {
           password: password,
         },
         async () => {
-          client.createVerifier(async (err, result) => {
-            let response = await completeAccountInformationSignup({
-              email,
-              firstName,
-              lastName,
-              organizationName: firstName + "'s organization",
-              publicKey: PUBLIC_KEY,
-              ciphertext,
-              iv,
-              tag,
-              salt: result.salt,
-              verifier: result.verifier,
-              token: verificationToken,
-            });
+          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 (!errorCheck && response.status == "200") {
-              response = await response.json();
+              // 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);
+                localStorage.setItem("publicKey", PUBLIC_KEY);
+                localStorage.setItem("encryptedPrivateKey", ciphertext);
+                localStorage.setItem("iv", iv);
+                localStorage.setItem("tag", tag);
 
-              try {
-                await attemptLogin(
-                  email,
-                  password,
-                  setErrorLogin,
-                  router,
-                  true,
-                  false
-                );
-                incrementStep();
-              } catch (error) {
-                setIsLoading(false);
+                try {
+                  await attemptLogin(
+                    email,
+                    password,
+                    setErrorLogin,
+                    router,
+                    true,
+                    false
+                  );
+                  incrementStep();
+                } catch (error) {
+                  setIsLoading(false);
+                }
               }
             }
-          });
+          );
         }
       );
     } else {
@@ -296,6 +301,8 @@ export default function SignUp() {
       </p>
       <div className="hidden md:block">
         <ReactCodeInput
+          name=""
+          inputMode="tel"
           type="text"
           fields={6}
           onChange={setCode}
@@ -305,6 +312,8 @@ export default function SignUp() {
       </div>
       <div className="block md:hidden">
         <ReactCodeInput
+          name=""
+          inputMode="tel"
           type="text"
           fields={6}
           onChange={setCode}
@@ -364,15 +373,15 @@ export default function SignUp() {
       <div className="mt-2 flex flex-col items-center justify-center w-full md:p-2 rounded-lg max-h-60">
         <InputField
           label="Password"
-          onChangeHandler={(password) => {
+          onChangeHandler={(password: string) => {
             setPassword(password);
-            passwordCheck(
+            passwordCheck({
               password,
               setPasswordErrorLength,
               setPasswordErrorNumber,
               setPasswordErrorLowerCase,
-              false
-            );
+              currentErrorCheck: false,
+            });
           }}
           type="password"
           value={password}
@@ -496,7 +505,7 @@ export default function SignUp() {
               setBackupKeyIssued,
             });
             const userWorkspaces = await getWorkspaces();
-            let userWorkspace = userWorkspaces[0]._id;
+            const userWorkspace = userWorkspaces[0]._id;
             router.push("/home/" + userWorkspace);
           }}
           size="lg"