Merge branch 'main' into I-36-use-pre-built-frontend-image

frontend/components/context/Notifications/Notification.tsx

@@ -0,0 +1,38 @@
+import { faXmarkCircle } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import classnames from "classnames";
+
+import { Notification as NotificationType } from "./NotificationProvider";
+
+interface NotificationProps {
+  notification: NotificationType;
+  clearNotification: (text?: string) => void;
+}
+
+const Notification = ({
+  notification,
+  clearNotification,
+}: NotificationProps) => {
+  return (
+    <div
+      className={classnames(
+        "w-full flex items-center justify-between px-4 py-3 rounded pointer-events-auto",
+        {
+          "bg-green-600": notification.type === "success",
+          "bg-red-500": notification.type === "error",
+        }
+      )}
+      role="alert"
+    >
+      <p className="text-white text-sm font-bold">{notification.text}</p>
+      <button
+        className="bg-white/5 rounded-lg p-3"
+        onClick={() => clearNotification(notification.text)}
+      >
+        <FontAwesomeIcon className="text-white" icon={faXmarkCircle} />
+      </button>
+    </div>
+  );
+};
+
+export default Notification;

frontend/components/context/Notifications/NotificationProvider.tsx

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

frontend/components/context/Notifications/Notifications.tsx

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

frontend/components/utilities/attemptLogin.js

@@ -5,6 +5,7 @@ import getOrganizations from "~/pages/api/organization/getOrgs";
 import getOrganizationUserProjects from "~/pages/api/organization/GetOrgUserProjects";
 
 import pushKeys from "./secrets/pushKeys";
+import { saveTokenToLocalStorage } from "./saveTokenToLocalStorage";
 import SecurityClient from "./SecurityClient";
 import Telemetry from "./telemetry/Telemetry";
 
@@ -41,66 +42,38 @@ const attemptLogin = async (
       async () => {
         const clientPublicKey = client.getPublicKey();
 
-        let serverPublicKey, salt;
-        try {
-          let res = await login1(email, clientPublicKey);
-          res = await res.json();
-          serverPublicKey = res.serverPublicKey;
-          salt = res.salt;
-        } catch (err) {
-          setErrorLogin(true);
-          console.log("Wrong password", err);
-        }
+        const { serverPublicKey, salt } = await login1(email, clientPublicKey);
 
-        let response;
         try {
           client.setSalt(salt);
           client.setServerPublicKey(serverPublicKey);
           const clientProof = client.getProof(); // called M1
-          response = await login2(email, clientProof);
-        } catch (err) {
-          setErrorLogin(true);
-          console.log("Password verification failed");
-        }
 
-        // if everything works, go the main dashboard page.
-        try {
-          if (response.status == "200") {
-            response = await response.json();
-            SecurityClient.setToken(response["token"]);
-            const publicKey = response["publicKey"];
-            const encryptedPrivateKey = response["encryptedPrivateKey"];
-            const iv = response["iv"];
-            const tag = response["tag"];
+          // if everything works, go the main dashboard page.
+          const { token, publicKey, encryptedPrivateKey, iv, tag } =
+            await login2(email, clientProof);
+          SecurityClient.setToken(token);
 
-            const PRIVATE_KEY = Aes256Gcm.decrypt(
-              encryptedPrivateKey,
-              iv,
-              tag,
-              password
-                .slice(0, 32)
-                .padStart(
-                  32 +
-                    (password.slice(0, 32).length - new Blob([password]).size),
-                  "0"
-                )
-            );
+          const privateKey = Aes256Gcm.decrypt(
+            encryptedPrivateKey,
+            iv,
+            tag,
+            password
+              .slice(0, 32)
+              .padStart(
+                32 + (password.slice(0, 32).length - new Blob([password]).size),
+                "0"
+              )
+          );
 
-            try {
-              localStorage.setItem("publicKey", publicKey);
-              localStorage.setItem("encryptedPrivateKey", encryptedPrivateKey);
-              localStorage.setItem("iv", iv);
-              localStorage.setItem("tag", tag);
-              localStorage.setItem("PRIVATE_KEY", PRIVATE_KEY);
-            } catch (err) {
-              setErrorLogin(true);
-              console.error(
-                "Unable to send the tokens in local storage:" + err.message
-              );
-            }
-          } else {
-            setErrorLogin(true);
-          }
+          saveTokenToLocalStorage({
+            token,
+            publicKey,
+            encryptedPrivateKey,
+            iv,
+            tag,
+            privateKey,
+          });
 
           const userOrgs = await getOrganizations();
           const userOrgsData = userOrgs.map((org) => org._id);
@@ -150,7 +123,7 @@ const attemptLogin = async (
                 STRIPE_SECRET_KEY: ["sk_test_7348oyho4hfq398HIUOH78", "shared"],
               },
               workspaceId: projectToLogin,
-              env: "Development"
+              env: "Development",
             });
           }
           if (email) {

frontend/components/utilities/saveTokenToLocalStorage.ts

@@ -0,0 +1,29 @@
+interface Props {
+  publicKey: string;
+  encryptedPrivateKey: string;
+  iv: string;
+  tag: string;
+  privateTag: string;
+}
+
+export const saveTokenToLocalStorage = ({
+  publicKey,
+  encryptedPrivateKey,
+  iv,
+  tag,
+  privateTag,
+}: Props) => {
+  try {
+    localStorage.setItem("publicKey", publicKey);
+    localStorage.setItem("encryptedPrivateKey", encryptedPrivateKey);
+    localStorage.setItem("iv", iv);
+    localStorage.setItem("tag", tag);
+    localStorage.setItem("PRIVATE_KEY", privateTag);
+  } catch (err) {
+    if (err instanceof Error) {
+      throw new Error(
+        "Unable to send the tokens in local storage:" + err.message
+      );
+    }
+  }
+};