Add frontend, backend and CLI

frontend/components/RouteGuard.js

@@ -0,0 +1,82 @@
+import { useState, useEffect } from "react";
+import { useRouter } from "next/router";
+import checkAuth from "../pages/api/auth/CheckAuth";
+import Image from "next/image";
+import { publicPaths } from "../const";
+
+// #TODO: finish spinner only when the data loads fully
+// #TODO: Redirect somewhere if the page does not exist
+
+export default function RouteGuard({ children }) {
+	const router = useRouter();
+	const [authorized, setAuthorized] = useState(false);
+
+	useEffect(async () => {
+		// on initial load - run auth check
+		await authCheck(router.asPath);
+
+		// on route change start - hide page content by setting authorized to false
+		// #TODO: add the loading page when not yet authorized.
+		const hideContent = () => setAuthorized(false);
+		// const onError = () => setAuthorized(true)
+		router.events.on("routeChangeStart", hideContent);
+		// router.events.on("routeChangeError", onError);
+
+		// on route change complete - run auth check
+		router.events.on("routeChangeComplete", authCheck);
+
+		// unsubscribe from events in useEffect return function
+		return () => {
+			router.events.off("routeChangeStart", hideContent);
+			router.events.off("routeChangeComplete", authCheck);
+			// router.events.off("routeChangeError", onError);
+		};
+
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, []);
+
+	/**
+	 * redirect to login page if accessing a private page and not logged in
+	 * @param {*} url - the url of the page we are trying to go to
+	 */
+	async function authCheck(url) {
+		// Make sure that we don't redirect when the user is on the following pages.
+		const path = "/" + url.split("?")[0].split("/")[1];
+
+		// Check if the user is authenticated
+		const response = await checkAuth();
+		// #TODO: figure our why sometimes it doesn't output a response
+		if (!publicPaths.includes(path)) {
+			try {
+				if (response.status !== 200) {
+					router.push("/login");
+					console.log("Unauthorized to access.");
+					setAuthorized(false);
+				} else {
+					setAuthorized(true);
+					console.log("Authorized to access.");
+				}
+			} catch (error) {
+				console.log(
+					"Error (probably the authCheck route is stuck again...):",
+					error
+				);
+			}
+		}
+	}
+
+	if (authorized) {
+		return children;
+	} else {
+		return (
+			<div className="w-screen h-screen bg-bunker-800 flex items-center justify-center">
+				<Image
+					src="/images/loading/loading.gif"
+					height={70}
+					width={120}
+					alt="google logo"
+				></Image>
+			</div>
+		);
+	}
+}

frontend/components/aes-256-gcm.js

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

frontend/components/analytics/posthog.js

@@ -0,0 +1,13 @@
+import posthog from "posthog-js";
+
+export const initPostHog = () => {
+	if (typeof window !== "undefined") {
+		if (process.env.NEXT_PUBLIC_ENV == "production") {
+			posthog.init(process.env.NEXT_PUBLIC_POSTHOG_API_KEY, {
+				api_host: process.env.NEXT_PUBLIC_POSTHOG_HOST,
+			});
+		}
+	}
+
+	return posthog;
+};

frontend/components/basic/Error.js

@@ -0,0 +1,19 @@
+import React, { useState } from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faExclamationTriangle } from "@fortawesome/free-solid-svg-icons";
+
+export default function Error({ text }) {
+	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">
+			<FontAwesomeIcon
+				icon={faExclamationTriangle}
+				className="text-white mt-1.5 mb-2 mx-2"
+			/>
+			{text && (
+				<p className="relative top-0 text-white mr-2 text-sm py-1">
+					{text}
+				</p>
+			)}
+		</div>
+	);
+}

frontend/components/basic/InputField.js

@@ -0,0 +1,130 @@
+import React from "react";
+import Error from "./Error";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import {
+	faCircle,
+	faCircleExclamation,
+	faE,
+	faEye,
+	faEyeSlash,
+} from "@fortawesome/free-solid-svg-icons";
+import guidGenerator from "../utilities/randomId";
+import { useState } from "react";
+import { useRouter } from "next/router";
+
+const InputField = (props) => {
+	const [passwordVisible, setPasswordVisible] = useState(false);
+	const router = useRouter();
+
+	if (props.static === true) {
+		return (
+			<div className="flex flex-col my-2 md:my-4 justify-center w-full max-w-md">
+				<p className="text-sm font-semibold text-gray-400 mb-0.5">
+					{props.label}
+				</p>
+				{props.text && (
+					<p className="text-xs text-gray-400 mb-2">{props.text}</p>
+				)}
+				<input
+					onChange={(e) => props.onChangeHandler(e.target.value)}
+					type={props.type}
+					placeholder={props.placeholder}
+					value={props.value}
+					required={props.isRequired}
+					className="bg-bunker-800 text-gray-400 border border-gray-600 rounded-md text-md p-2 w-full min-w-16 outline-none"
+					name={props.name}
+					readOnly
+				/>
+			</div>
+		);
+	} else {
+		return (
+			<div className="flex-col w-full">
+				<div className="flex flex-row text-mineshaft-300 items-center mb-0.5">
+					<p className="text-sm font-semibold mr-1">{props.label}</p>
+					{/* {props.label == "Password" && router.asPath != "/login" && (
+						<div className="mb-0.5 relative inline-block text-gray-400 underline hover:text-primary duration-200">
+							<FontAwesomeIcon
+								icon={faCircleExclamation}
+								className={`text-sm peer ${
+									props.error && "text-red"
+								}`}
+							/>
+							<span className="absolute hidden peer-hover:block duration-200 w-60 -left-28 -top-2 -translate-y-full px-2 py-2 bg-gray-700 rounded-md text-center text-gray-200 text-sm after:content-[''] after:absolute after:left-1/2 after:top-[100%] after:-translate-x-1/2 after:border-8 after:border-x-transparent after:border-b-transparent after:border-t-gray-700">
+								The password should contain at least 8
+								characters including at least 1 lowercase
+								character, uppercase character, number, and a
+								special character.
+							</span>
+						</div>
+					)} */}
+				</div>
+				<div
+					className={`group relative flex flex-col justify-center w-full max-w-2xl border ${
+						props.error ? "border-red" : "border-mineshaft-500"
+					} rounded-md`}
+				>
+					<input
+						onChange={(e) => props.onChangeHandler(e.target.value)}
+						type={passwordVisible == false ? props.type : "text"}
+						placeholder={props.placeholder}
+						value={props.value}
+						required={props.isRequired}
+						className={`${
+							props.blurred
+								? "text-bunker-800 group-hover:text-gray-400 focus:text-gray-400 active:text-gray-400"
+								: ""
+						} ${
+							props.error
+								? "focus:ring-red/50"
+								: "focus:ring-primary/50"
+						} relative peer bg-bunker-800 rounded-md text-gray-400 text-md p-2 w-full min-w-16 outline-none focus:ring-4 duration-200`}
+						name={props.name}
+						spellCheck="false"
+					/>
+					{props.label?.includes("Password") && (
+						<button
+							onClick={() => {
+								setPasswordVisible(!passwordVisible);
+							}}
+							className="absolute self-end mr-3 text-gray-400 cursor-pointer"
+						>
+							{passwordVisible ? (
+								<FontAwesomeIcon icon={faEyeSlash} />
+							) : (
+								<FontAwesomeIcon icon={faEye} />
+							)}
+						</button>
+					)}
+					{props.blurred && (
+						<div className="peer group-hover:hidden peer-hover:hidden peer-focus:hidden peer-active:invisible absolute h-10 w-fit max-w-xl rounded-md flex items-center text-gray-400/50 text-clip overflow-hidden">
+							<p className="ml-2"></p>
+							{props.value
+								.split("")
+								.slice(0, 54)
+								.map(() => (
+									<FontAwesomeIcon
+										key={guidGenerator()}
+										className="text-xxs mx-0.5"
+										icon={faCircle}
+									/>
+								))}
+						</div>
+					)}
+					{/* {props.error && (
+						<div className="absolute z-20 flex items-end justify-end mt-4 mr-1.5 self-end">
+							<Error />
+						</div>
+					)} */}
+				</div>
+				{props.error && (
+					<p className="text-red text-xs mt-0.5 mx-0 mb-2 max-w-xs">
+						{props.errorText}
+					</p>
+				)}
+			</div>
+		);
+	}
+};
+
+export default React.memo(InputField);

frontend/components/basic/Listbox.js

@@ -0,0 +1,108 @@
+import React from "react";
+import { Listbox, Transition } from "@headlessui/react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faCheck, faPlus, faAngleDown } from "@fortawesome/free-solid-svg-icons";
+import { Fragment } from "react";
+import { useRouter } from "next/router";
+
+/**
+ * This is the component that we use for drop down lists.
+ * @param {*} param0
+ * @returns
+ */
+export default function ListBox({
+	selected,
+	onChange,
+	data,
+	text,
+	buttonAction,
+	width,
+	workspaceMapping = [],
+}) {
+	const router = useRouter();
+
+	return (
+		<Listbox value={selected} onChange={onChange}>
+			<div className="relative">
+				<Listbox.Button
+					className={`text-gray-400 relative ${
+						width == "full" ? "w-full" : "w-52"
+					} cursor-default rounded-md bg-white/[0.07] hover:bg-white/[0.11] duration-200 py-2.5 pl-3 pr-10 text-left shadow-md focus:outline-none focus-visible:border-indigo-500 focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-orange-300 sm:text-sm`}
+				>
+					<div className="flex flex-row">
+						{text}
+						<span className="ml-1 cursor-pointer block truncate font-semibold text-gray-300">
+							{" "}
+							{selected}
+						</span>
+					</div>
+					{data && (
+						<div className="cursor-pointer pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
+							<FontAwesomeIcon icon={faAngleDown} className="text-md mr-1.5"/>
+						</div>
+					)}
+				</Listbox.Button>
+				{data && (
+					<Transition
+						as={Fragment}
+						leave="transition ease-in duration-100"
+						leaveFrom="opacity-100"
+						leaveTo="opacity-0"
+					>
+						<Listbox.Options className="border border-mineshaft-700 z-50 p-2 absolute mt-1 max-h-60 w-full overflow-auto rounded-md bg-bunker text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
+							{data.map((person, personIdx) => (
+								<Listbox.Option
+									key={personIdx}
+									className={({ active, selected }) =>
+										`my-0.5 relative cursor-default select-none py-2 pl-10 pr-4 rounded-md ${
+											selected
+												? "bg-white/10 text-gray-400 font-bold"
+												: ""
+										} ${
+											active & !selected
+												? "bg-white/5 text-mineshaft-200 cursor-pointer"
+												: "text-gray-400"
+										} `
+									}
+									value={person}
+								>
+									{({ selected }) => (
+										<>
+											<span
+												className={`block truncate text-primary${
+													selected
+														? "font-medium"
+														: "font-normal"
+												}`}
+											>
+												{person}
+											</span>
+											{selected ? (
+												<span className="text-primary rounded-lg absolute inset-y-0 left-0 flex items-center pl-3">
+													<FontAwesomeIcon icon={faCheck} className="text-md ml-1"/>
+												</span>
+											) : null}
+										</>
+									)}
+								</Listbox.Option>
+							))}
+							{buttonAction && (
+								<button
+									onClick={buttonAction}
+									className="cursor-pointer w-full"
+								>
+									<div className="my-0.5 relative flex justify-start cursor-pointer select-none py-2 pl-10 pr-4 rounded-md text-gray-400 hover:bg-lime-300 duration-200 hover:text-black hover:font-semibold mt-2">
+										<span className="rounded-lg absolute inset-y-0 left-0 flex items-center pl-3 pr-4">
+											<FontAwesomeIcon icon={faPlus} className="text-lg"/>
+										</span>
+										Add Project
+									</div>
+								</button>
+							)}
+						</Listbox.Options>
+					</Transition>
+				)}
+			</div>
+		</Listbox>
+	);
+}

frontend/components/basic/buttons/Button.js

@@ -0,0 +1,111 @@
+import React from "react";
+import Link from "next/link";
+import Image from "next/image";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faPlus } from "@fortawesome/free-solid-svg-icons";
+
+var classNames = require("classnames");
+
+export default function Button({
+	text,
+	onButtonPressed,
+	link,
+	loading,
+	color,
+	size,
+	icon,
+	active = true,
+	iconDisabled,
+	textDisabled
+}) {
+	let styleButton = classNames(
+		"group m-auto md:m-0 inline-block rounded-md duration-200",
+
+		// Setting background colors and hover modes
+		color == "mineshaft" && active && "bg-mineshaft-700 hover:bg-primary",
+		color == "mineshaft" && !active && "bg-mineshaft",
+		(color == "primary" || !color) && active && "bg-primary hover:opacity-80",
+		(color == "primary" || !color) && !active && "bg-primary",
+		color == "red" && "bg-red",
+		
+		// Changing the opacity when active vs when not
+		active ? "opacity-100 cursor-pointer" : "opacity-40",
+
+		// Setting the button sizes
+		size == "md" && "h-10 w-full px-2 md:px-4",
+		size == "lg" && "h-12 w-full px-2 md:px-8",
+		!size && "md:py-1 px-3 md:px-8",
+		size == "icon-md" && "h-10 w-10 flex items-center justify-center",
+		size == "icon-sm" && "h-9 w-9 flex items-center justify-center",
+	);
+
+	let styleMainDiv = classNames(
+		"relative font-medium flex items-center",
+
+		// Setting the text color for the text and icon
+		color == "mineshaft" && "text-gray-400",
+		color != "mineshaft" && color != "red" && "text-black",
+		color == "red" && "text-gray-200",
+		active && color != "red" ? "group-hover:text-black" : "",
+
+		size == "icon" && "flex items-center justify-center",
+	);
+
+	let textStyle = classNames(
+		"relative duration-200",
+
+		// Show the loading sign if the loading indicator is on
+		loading == true ? "opacity-0" : "opacity-100",
+		size == "md" && "text-sm",
+		size == "lg" && "text-lg"
+	);
+
+	const button = (
+		<button 
+			disabled={!active}
+			onClick={onButtonPressed}
+			className={styleButton}
+		>
+			<div className={styleMainDiv}>
+				<div
+					className={`${
+						loading == true ? "opacity-100" : "opacity-0"
+					} absolute flex items-center px-2 duration-200`}
+				>
+					<Image
+						src="/images/loading/loadingblack.gif"
+						height={25}
+						width={42}
+						alt="loading animation"
+						className={`rounded-xl`}
+					></Image>
+				</div>
+				{icon && 
+					<FontAwesomeIcon
+						icon={icon}
+						className={`flex my-auto font-extrabold ${size == "icon-sm" ? "text-sm" : "text-md"} ${(text || textDisabled) && "mr-2"}`}
+					/>
+				}
+				{iconDisabled && 
+					<FontAwesomeIcon
+						icon={iconDisabled}
+						className={`flex my-auto font-extrabold ${size == "icon-sm" ? "text-sm" : "text-md"} ${(text || textDisabled) && "mr-2"}`}
+					/>
+				}
+				{(text || textDisabled) &&
+					<p
+						className={textStyle}
+					>
+						{active ? text : textDisabled}
+					</p>
+				}
+			</div>
+		</button>
+	);
+
+	if (link) {
+		return <Link href={link}>{button}</Link>;
+	}
+
+	return button;
+}

frontend/components/basic/dialog/AddIncidentContactDialog.js

@@ -0,0 +1,95 @@
+import { Dialog, Transition } from "@headlessui/react";
+import { Fragment, useState } from "react";
+import InputField from "../InputField";
+import addIncidentContact from "../../../pages/api/organization/addIncidentContact";
+import Button from "../buttons/Button";
+
+const AddIncidentContactDialog = ({
+	isOpen,
+	closeModal,
+	workspaceId,
+	incidentContacts,
+	setIncidentContacts,
+}) => {
+	let [incidentContactEmail, setIncidentContactEmail] = useState("");
+
+	const submit = () => {
+		setIncidentContacts(
+			incidentContacts?.length > 0
+				? incidentContacts.concat([incidentContactEmail])
+				: [incidentContactEmail]
+		);
+		addIncidentContact(localStorage.getItem("orgData.id"), incidentContactEmail);
+		closeModal();
+	};
+	return (
+		<div>
+			<Transition appear show={isOpen} as={Fragment}>
+				<Dialog as="div" className="relative z-10" onClose={closeModal}>
+					<Transition.Child
+						as={Fragment}
+						enter="ease-out duration-300"
+						enterFrom="opacity-0"
+						enterTo="opacity-100"
+						leave="ease-in duration-200"
+						leaveFrom="opacity-100"
+						leaveTo="opacity-0"
+					>
+						<div className="fixed inset-0 bg-black bg-opacity-70" />
+					</Transition.Child>
+
+					<div className="fixed inset-0 overflow-y-auto">
+						<div className="flex min-h-full items-center justify-center p-4 text-center">
+							<Transition.Child
+								as={Fragment}
+								enter="ease-out duration-300"
+								enterFrom="opacity-0 scale-95"
+								enterTo="opacity-100 scale-100"
+								leave="ease-in duration-200"
+								leaveFrom="opacity-100 scale-100"
+								leaveTo="opacity-0 scale-95"
+							>
+								<Dialog.Panel className="w-full max-w-md transform overflow-hidden rounded-md bg-bunker-800 border border-gray-700 p-6 text-left align-middle shadow-xl transition-all">
+									<Dialog.Title
+										as="h3"
+										className="text-lg font-medium leading-6 text-gray-400"
+									>
+										Add an Incident Contact
+									</Dialog.Title>
+									<div className="mt-2 mb-2">
+										<p className="text-sm text-gray-500">
+											This contact will be notified in the
+											unlikely event of a severe incident.
+										</p>
+									</div>
+									<div className="max-h-28">
+										<InputField
+											label="Email"
+											onChangeHandler={
+												setIncidentContactEmail
+											}
+											type="varName"
+											value={incidentContactEmail}
+											placeholder=""
+											isRequired
+										/>
+									</div>
+									<div className="mt-6 max-w-max">
+										<Button
+											onButtonPressed={submit}
+											color="mineshaft"
+											text="Add Incident Contact"
+											size="md"
+										/>
+									</div>
+								</Dialog.Panel>
+							</Transition.Child>
+						</div>
+					</div>
+				</Dialog>
+			</Transition>
+		</div>
+	);
+};
+
+export default AddIncidentContactDialog;

frontend/components/basic/dialog/AddProjectMemberDialog.js

@@ -0,0 +1,150 @@
+import { Dialog, Transition } from "@headlessui/react";
+import { Fragment, useState } from "react";
+import ListBox from "../Listbox";
+import { useRouter } from "next/router";
+import Button from "../buttons/Button";
+
+const AddProjectMemberDialog = ({
+	isOpen,
+	closeModal,
+	submitModal,
+	data,
+	email,
+	workspaceId,
+	setEmail,
+}) => {
+	const router = useRouter();
+
+	return (
+		<div className="z-50">
+			<Transition appear show={isOpen} as={Fragment}>
+				<Dialog as="div" className="relative" onClose={closeModal}>
+					<Transition.Child
+						as={Fragment}
+						enter="ease-out duration-300"
+						enterFrom="opacity-0"
+						enterTo="opacity-100"
+						leave="ease-in duration-200"
+						leaveFrom="opacity-100"
+						leaveTo="opacity-0"
+					>
+						<div className="fixed inset-0 bg-black bg-opacity-70" />
+					</Transition.Child>
+
+					<div className="fixed inset-0 overflow-y-auto">
+						<div className="flex min-h-full items-center justify-center p-4 text-center">
+							<Transition.Child
+								as={Fragment}
+								enter="ease-out duration-300"
+								enterFrom="opacity-0 scale-95"
+								enterTo="opacity-100 scale-100"
+								leave="ease-in duration-200"
+								leaveFrom="opacity-100 scale-100"
+								leaveTo="opacity-0 scale-95"
+							>
+								<Dialog.Panel className="w-full max-w-md transform rounded-md bg-bunker-800 border border-gray-700 p-6 text-left align-middle shadow-xl transition-all">
+									{data?.length > 0 ? (
+										<Dialog.Title
+											as="h3"
+											className="text-lg font-medium leading-6 text-gray-400 z-50"
+										>
+											Add a member to your project
+										</Dialog.Title>
+									) : (
+										<Dialog.Title
+											as="h3"
+											className="text-lg font-medium leading-6 text-gray-400 z-50"
+										>
+											All the users in your organization
+											are already invited.
+										</Dialog.Title>
+									)}
+									<div className="mt-2 mb-4">
+										{data?.length > 0 ? (
+											<div className="flex flex-col">
+												<p className="text-sm text-gray-500">
+													The user will receive an email
+													with the instructions.
+												</p>
+												<div className="">
+													<button
+														type="button"
+														className="inline-flex justify-center rounded-md py-1 text-sm text-gray-500 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2"
+														onClick={() =>
+															router.push(
+																"/settings/org/" +
+																	router.query.id
+															)
+														}
+													>
+														If you are looking to add users to your org, 
+													</button>
+													<button
+														type="button"
+														className="ml-1 inline-flex justify-center rounded-md py-1 text-sm text-gray-500 hover:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2"
+														onClick={() =>
+															router.push(
+																"/settings/org/" +
+																router.query.id + 
+																"?invite"
+															)
+														}
+													>
+														click here.
+													</button>
+												</div>
+											</div>
+										) : (
+											<p className="text-sm text-gray-500">
+												Add more users to the
+												organization first.
+											</p>
+										)}
+									</div>
+									<div className="max-h-28">
+										{data?.length > 0 && (
+											<ListBox
+												selected={
+													email ? email : data[0]
+												}
+												onChange={setEmail}
+												data={data}
+												width="full"
+											/>
+										)}
+									</div>
+									<div className="max-w-max">
+										{data?.length > 0 ? (
+											<div className="mt-6 flex flex-col justify-start w-max">
+												<Button
+													onButtonPressed={submitModal}
+													color="mineshaft"
+													text="Add Member"
+													size="md"
+												/>
+											</div>
+										) : (
+											<Button
+												onButtonPressed={() =>
+													router.push(
+														"/settings/org/" +
+															router.query.id
+													)
+												}
+												color="mineshaft"
+												text="Add Users to Organization"
+												size="md"
+											/>
+										)}
+									</div>
+								</Dialog.Panel>
+							</Transition.Child>
+						</div>
+					</div>
+				</Dialog>
+			</Transition>
+		</div>
+	);
+};
+
+export default AddProjectMemberDialog;

frontend/components/basic/dialog/AddServiceTokenDialog.js

@@ -0,0 +1,231 @@
+import { Dialog, Transition } from "@headlessui/react";
+import { Fragment, useState } from "react";
+import ListBox from "../Listbox";
+import { useRouter } from "next/router";
+import Button from "../buttons/Button";
+import InputField from "../InputField";
+import getLatestFileKey from "../../../pages/api/workspace/getLatestFileKey";
+import { decryptAssymmetric, encryptAssymmetric } from "../../utilities/crypto";
+import addServiceToken from "../../../pages/api/serviceToken/addServiceToken";
+import nacl from "tweetnacl";
+import { faCheck, faCopy } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+const envMapping = {
+	Development: "dev",
+	Staging: "staging",
+	Production: "prod",
+	Testing: "test",
+};
+
+const expiryMapping = {
+	"1 day": 86400,
+	"7 days": 604800,
+	"1 month": 2592000,
+};
+
+const AddServiceTokenDialog = ({
+	isOpen,
+	closeModal,
+	workspaceId,
+	workspaceName
+}) => {
+	const router = useRouter();
+	const [serviceToken, setServiceToken] = useState("");
+	const [serviceTokenName, setServiceTokenName] = useState("");
+	const [serviceTokenEnv, setServiceTokenEnv] = useState("Development");
+	const [serviceTokenExpiresIn, setServiceTokenExpiresIn] = useState("1 day");
+	const [serviceTokenCopied, setServiceTokenCopied] = useState(false);
+
+	const generateServiceToken = async () => {
+		const latestFileKey = await getLatestFileKey(workspaceId); 
+
+		const key = decryptAssymmetric({
+			ciphertext: latestFileKey.latestKey.encryptedKey,
+			nonce: latestFileKey.latestKey.nonce,
+			publicKey: latestFileKey.latestKey.sender.publicKey,
+			privateKey: localStorage.getItem("PRIVATE_KEY")
+		});
+
+		// generate new public/private key pair
+		const pair = nacl.box.keyPair();
+		const publicKey = nacl.util.encodeBase64(pair.publicKey);
+		const privateKey = nacl.util.encodeBase64(pair.secretKey);
+		
+		// encrypt workspace key under newly-generated public key
+		const { ciphertext: encryptedKey, nonce } = encryptAssymmetric({
+			plaintext: key,
+			publicKey,
+			privateKey
+		});
+
+		let newServiceToken = await addServiceToken({
+			name: serviceTokenName, 
+			workspaceId, 
+			environment: envMapping[serviceTokenEnv],
+			expiresIn: expiryMapping[serviceTokenExpiresIn], 
+			publicKey, 
+			encryptedKey,
+			nonce
+		})
+		
+		const serviceToken = newServiceToken + ',' + privateKey;
+		setServiceToken(serviceToken);
+	}
+
+	function copyToClipboard() {
+		// Get the text field
+		var copyText = document.getElementById("serviceToken");
+	  
+		// Select the text field
+		copyText.select();
+		copyText.setSelectionRange(0, 99999); // For mobile devices
+	  
+		 // Copy the text inside the text field
+		navigator.clipboard.writeText(copyText.value);
+	  
+		setServiceTokenCopied(true);
+		setTimeout(() => setServiceTokenCopied(false), 2000);
+		// Alert the copied text
+		// alert("Copied the text: " + copyText.value);
+	}
+
+	const closeAddServiceTokenModal = () => {
+		closeModal();
+		setServiceTokenName("");
+		setServiceToken("");
+	}
+
+	return (
+		<div className="z-50">
+			<Transition appear show={isOpen} as={Fragment}>
+				<Dialog as="div" className="relative" onClose={closeModal}>
+					<Transition.Child
+						as={Fragment}
+						enter="ease-out duration-300"
+						enterFrom="opacity-0"
+						enterTo="opacity-100"
+						leave="ease-in duration-200"
+						leaveFrom="opacity-100"
+						leaveTo="opacity-0"
+					>
+						<div className="fixed inset-0 bg-bunker-700 bg-opacity-80" />
+					</Transition.Child>
+
+					<div className="fixed inset-0 overflow-y-auto">
+						<div className="flex min-h-full items-center justify-center p-4 text-center">
+							<Transition.Child
+								as={Fragment}
+								enter="ease-out duration-300"
+								enterFrom="opacity-0 scale-95"
+								enterTo="opacity-100 scale-100"
+								leave="ease-in duration-200"
+								leaveFrom="opacity-100 scale-100"
+								leaveTo="opacity-0 scale-95"
+							>
+								{serviceToken == "" 
+								?	<Dialog.Panel className="w-full max-w-md transform rounded-md bg-bunker-800 border border-gray-700 p-6 text-left align-middle shadow-xl transition-all">
+										<Dialog.Title
+											as="h3"
+											className="text-lg font-medium leading-6 text-gray-400 z-50"
+										>
+											Add a service token for {workspaceName}
+										</Dialog.Title>
+										<div className="mt-2 mb-4">
+											<div className="flex flex-col">
+												<p className="text-sm text-gray-500">
+													Specify the name, environment, and expiry period. When a token is generated, you will only be able to see it once before it disappears. Make sure to save it somewhere.
+												</p>
+											</div>
+										</div>
+										<div className="max-h-28 mb-2">
+											<InputField
+												label="Service Token Name"
+												onChangeHandler={
+													setServiceTokenName
+												}
+												type="varName"
+												value={serviceTokenName}
+												placeholder=""
+												isRequired
+											/>
+										</div>
+										<div className="max-h-28 mb-2">
+											<ListBox
+												selected={serviceTokenEnv}
+												onChange={setServiceTokenEnv}
+												data={["Development", "Staging", "Production", "Testing"]}
+												width="full"
+												text="Environment: "
+											/>
+										</div>
+										<div className="max-h-28">
+											<ListBox
+												selected={serviceTokenExpiresIn}
+												onChange={setServiceTokenExpiresIn}
+												data={["1 day", "7 days", "1 month"]}
+												width="full"
+												text="Expires in: "
+											/>
+										</div>
+										<div className="max-w-max">
+											<div className="mt-6 flex flex-col justify-start w-max">
+												<Button
+													onButtonPressed={() => generateServiceToken()}
+													color="mineshaft"
+													text="Add Service Token"
+													textDisabled="Add Service Token"
+													size="md"
+													active={serviceTokenName == "" ? false : true}
+												/>
+											</div>
+										</div>
+									</Dialog.Panel>
+								:	<Dialog.Panel className="w-full max-w-md transform rounded-md bg-bunker-800 border border-gray-700 p-6 text-left align-middle shadow-xl transition-all">
+										<Dialog.Title
+											as="h3"
+											className="text-lg font-medium leading-6 text-gray-400 z-50"
+										>
+											Copy your service token
+										</Dialog.Title>
+										<div className="mt-2 mb-4">
+											<div className="flex flex-col">
+												<p className="text-sm text-gray-500">
+													Once you close this popup, you will never see your service token again
+												</p>
+											</div>
+										</div>
+										<div className="w-full">
+											<div className="flex justify-end items-center bg-white/[0.07] text-base mt-2 mr-2 rounded-md text-gray-400 w-full h-36">
+												<input type="text" value={serviceToken} id="serviceToken" className="invisible bg-white/0 text-gray-400 py-2 w-full px-2 min-w-full outline-none"></input>
+												<div className="bg-white/0 max-w-md text-sm text-gray-400 py-2 w-full pl-14 pr-2 break-words outline-none">{serviceToken}</div>
+												<div className="group font-normal h-full relative inline-block text-gray-400 underline hover:text-primary duration-200">
+													<button onClick={copyToClipboard} className="h-full pl-3.5 pr-4 border-l border-white/20 py-2 hover:bg-white/[0.12] duration-200">
+														{serviceTokenCopied ? <FontAwesomeIcon icon={faCheck} className="pr-0.5"/> : <FontAwesomeIcon icon={faCopy} />}
+													</button>
+													<span className="absolute hidden group-hover:flex group-hover:animate-popup duration-300 w-28 -left-8 -top-20 translate-y-full px-3 py-2 bg-chicago-900 rounded-md text-center text-gray-400 text-sm">
+														Click to Copy
+													</span>
+												</div>
+											</div>
+										</div>
+										<div className="mt-6 flex flex-col justify-start w-max">
+											<Button
+												onButtonPressed={() => closeAddServiceTokenModal()}
+												color="mineshaft"
+												text="Close"
+												size="md"
+											/>
+										</div>
+									</Dialog.Panel>
+									}
+							</Transition.Child>
+						</div>
+					</div>
+				</Dialog>
+			</Transition>
+		</div>
+	);
+};
+
+export default AddServiceTokenDialog;

frontend/components/basic/dialog/AddUserDialog.js

@@ -0,0 +1,149 @@
+import { Dialog, Transition } from "@headlessui/react";
+import { Fragment } from "react";
+import InputField from "../InputField";
+import { useRouter } from "next/router";
+import Button from "../buttons/Button";
+
+const AddUserDialog = ({
+	isOpen,
+	closeModal,
+	submitModal,
+	email,
+	workspaceId,
+	setEmail,
+	currentPlan,
+	orgName
+}) => {
+	const submit = () => {
+		submitModal(email);
+	};
+	const router = useRouter();
+
+	return (
+		<div className="z-50">
+			<Transition appear show={isOpen} as={Fragment}>
+				<Dialog as="div" className="relative" onClose={closeModal}>
+					<Transition.Child
+						as={Fragment}
+						enter="ease-out duration-300"
+						enterFrom="opacity-0"
+						enterTo="opacity-100"
+						leave="ease-in duration-200"
+						leaveFrom="opacity-100"
+						leaveTo="opacity-0"
+					>
+						<div className="fixed inset-0 bg-black bg-opacity-70" />
+					</Transition.Child>
+
+					<div className="fixed inset-0 overflow-y-auto">
+						<div className="flex min-h-full items-center justify-center p-4 text-center">
+							<Transition.Child
+								as={Fragment}
+								enter="ease-out duration-300"
+								enterFrom="opacity-0 scale-95"
+								enterTo="opacity-100 scale-100"
+								leave="ease-in duration-200"
+								leaveFrom="opacity-100 scale-100"
+								leaveTo="opacity-0 scale-95"
+							>
+								<Dialog.Panel className="w-full max-w-lg transform overflow-hidden rounded-md bg-bunker-800 border border-gray-700 p-6 text-left align-middle shadow-xl transition-all">
+									<Dialog.Title
+										as="h3"
+										className="text-lg font-medium leading-6 text-gray-400 z-50"
+									>
+										Invite others to {orgName}
+									</Dialog.Title>
+									<div className="mt-2 mb-4">
+										<p className="text-sm text-gray-500">
+											An invite is specific to an email address 
+											and expires after 1 day. For security reasons, 
+											you will need to separately add members to projects.
+										</p>
+									</div>
+									<div className="max-h-28">
+										<InputField
+											label="Email"
+											onChangeHandler={setEmail}
+											type="varName"
+											value={email}
+											placeholder=""
+											isRequired
+										/>
+									</div>
+									{currentPlan == process.env.NEXT_PUBLIC_STRIPE_PRODUCT_STARTER && <div className="flex flex-row">
+										<button
+											type="button"
+											className="inline-flex justify-center rounded-md py-1 text-sm text-gray-500 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2"
+											onClick={() =>
+												router.push(
+													"/settings/billing/" +
+														router.query.id
+												)
+											}
+										>
+											You can add up to 5 members on a Free tier.
+										</button>
+										<button
+											type="button"
+											className="ml-1 inline-flex justify-center rounded-md py-1 text-sm text-gray-500 hover:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2"
+											onClick={() =>
+												router.push(
+													"/settings/billing/" +
+														router.query.id
+												)
+											}
+										>
+											Upgrade now.
+										</button>
+									</div>}
+									<div className="mt-4 max-w-max">
+										<Button
+											onButtonPressed={submit}
+											color="mineshaft"
+											text="Invite"
+											size="md"
+										/>
+									</div>
+								</Dialog.Panel>
+								{/* <Dialog.Panel className="w-full max-w-md transform overflow-hidden rounded-md bg-bunker-800 border border-gray-700 p-6 text-left align-middle shadow-xl transition-all">
+									<Dialog.Title
+										as="h3"
+										className="text-xl font-medium leading-6 text-gray-300 z-50"
+									>
+										Unleash Infisical's Full Power
+									</Dialog.Title>
+									<div className="mt-4 mb-4">
+										<p className="text-sm text-gray-400 mb-2">
+											You have exceeded the number of members in a free organization.
+										</p>
+										<p className="text-sm text-gray-400">
+											Upgrade now and get access to adding more members, as well as to other powerful enhancements.
+										</p>
+									</div>
+									<div className="mt-6">
+										<button
+											type="button"
+											className="inline-flex justify-center rounded-md border border-transparent bg-primary px-4 py-2 text-sm font-medium text-black hover:opacity-80 hover:text-semibold duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2"
+											onClick={() => router.push("/settings/billing/" + router.query.id)}
+										>
+											Upgrade Now
+										</button>
+										<button
+											type="button"
+											className="ml-2 inline-flex justify-center rounded-md border border-transparent bg-gray-800 px-4 py-2 text-sm font-medium text-gray-400 hover:bg-gray-500 hover:text-black hover:text-semibold duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2"
+											onClick={closeModal}
+										>
+											Maybe Later
+										</button>
+									</div>
+								</Dialog.Panel> */}
+							</Transition.Child>
+						</div>
+					</div>
+				</Dialog>
+			</Transition>
+		</div>
+	);
+};
+
+export default AddUserDialog;

frontend/components/basic/dialog/AddWorkspaceDialog.js

@@ -0,0 +1,104 @@
+import { Dialog, Transition } from "@headlessui/react";
+import { Fragment, useState } from "react";
+import InputField from "../InputField";
+import Image from "next/image";
+import { Checkbox } from "../table/Checkbox";
+import Button from "../buttons/Button";
+
+/**
+ * The dialog modal for when the user wants to create a new workspace
+ * @param {*} param0
+ * @returns
+ */
+const AddWorkspaceDialog = ({
+	isOpen,
+	closeModal,
+	submitModal,
+	workspaceName,
+	setWorkspaceName,
+	error,
+	loading,
+}) => {
+	const [addAllUsers, setAddAllUsers] = useState(true);
+	const submit = () => {
+		submitModal(workspaceName, addAllUsers);
+	};
+
+	return (
+		<div>
+			<Transition appear show={isOpen} as={Fragment}>
+				<Dialog as="div" className="relative z-20" onClose={closeModal}>
+					<Transition.Child
+						as={Fragment}
+						enter="ease-out duration-300"
+						enterFrom="opacity-0"
+						enterTo="opacity-100"
+						leave="ease-in duration-200"
+						leaveFrom="opacity-100"
+						leaveTo="opacity-0"
+					>
+						<div className="fixed inset-0 bg-black bg-opacity-70" />
+					</Transition.Child>
+
+					<div className="fixed inset-0 overflow-y-auto z-50">
+						<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-2xl bg-bunker-800 border border-gray-700 p-6 text-left align-middle shadow-xl transition-all">
+									<Dialog.Title
+										as="h3"
+										className="text-lg font-medium leading-6 text-gray-400"
+									>
+										Create a new project
+									</Dialog.Title>
+									<div className="mt-2">
+										<p className="text-sm text-gray-500">
+											This project will contain your
+											environmental variables.
+										</p>
+									</div>
+									<div className="max-h-28 mt-4">
+										<InputField
+											label="Project Name"
+											onChangeHandler={setWorkspaceName}
+											type="varName"
+											value={workspaceName}
+											placeholder=""
+											isRequired
+											error={error.length > 0}
+											errorText={error}
+										/>
+									</div>
+									<div className="mt-4 ml-1">
+										<Checkbox
+											addAllUsers={addAllUsers}
+											setAddAllUsers={setAddAllUsers}
+										/>
+									</div>
+									<div className="mt-4 max-w-min">
+										<Button
+											onButtonPressed={submit}
+											loading={loading}
+											color="mineshaft"
+											text="Create"
+											size="md"
+										/>
+									</div>
+								</Dialog.Panel>
+							</Transition.Child>
+						</div>
+					</div>
+				</Dialog>
+			</Transition>
+		</div>
+	);
+};
+
+export default AddWorkspaceDialog;

frontend/components/basic/dialog/DeleteUserDialog.js

@@ -0,0 +1,77 @@
+import { Dialog, Transition } from '@headlessui/react'
+import { Fragment, useState } from 'react'
+import InputField from '../InputField';
+
+// #TODO: USE THIS. Currently it's not. Kinda complicated to set up because of state.
+
+
+const DeleteUserDialog = ({isOpen, closeModal, submitModal, userIdToBeDeleted}) => {
+    const submit = () => {
+        submitModal(userIdToBeDeleted);
+    }
+    return (
+        <div>
+        <Transition appear show={isOpen} as={Fragment}>
+            <Dialog as="div" className="relative z-10" onClose={closeModal}>
+            <Transition.Child
+                as={Fragment}
+                enter="ease-out duration-300"
+                enterFrom="opacity-0"
+                enterTo="opacity-100"
+                leave="ease-in duration-200"
+                leaveFrom="opacity-100"
+                leaveTo="opacity-0"
+            >
+                <div className="fixed inset-0 bg-black bg-opacity-25" />
+            </Transition.Child>
+
+            <div className="fixed inset-0 overflow-y-auto">
+                <div className="flex min-h-full items-center justify-center p-4 text-center">
+                <Transition.Child
+                    as={Fragment}
+                    enter="ease-out duration-300"
+                    enterFrom="opacity-0 scale-95"
+                    enterTo="opacity-100 scale-100"
+                    leave="ease-in duration-200"
+                    leaveFrom="opacity-100 scale-100"
+                    leaveTo="opacity-0 scale-95"
+                >
+                    <Dialog.Panel className="w-full max-w-md transform overflow-hidden rounded-2xl 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"
+                    >
+                        Are you sure you want to remove this user from the workspace?
+                    </Dialog.Title>
+                    <div className="mt-2">
+                        <p className="text-sm text-gray-500">
+                            This action is irrevertible.
+                        </p>
+                    </div>
+                    <div className="mt-6">
+                        <button
+                        type="button"
+                        className="inline-flex justify-center rounded-md border border-transparent bg-gray-800 px-4 py-2 text-sm font-medium text-gray-400 hover:bg-alizarin 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={submit}
+                        >
+                            Delete
+                        </button>
+                        <button
+                        type="button"
+                        className="ml-2 inline-flex justify-center rounded-md border border-transparent bg-gray-800 px-4 py-2 text-sm font-medium text-gray-400 hover:border-white 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={submit}
+                        >
+                            Cancel
+                        </button>
+                    </div>
+                    </Dialog.Panel>
+                </Transition.Child>
+                </div>
+            </div>
+            </Dialog>
+        </Transition>
+        </div>
+    );
+};
+
+export default DeleteUserDialog;

frontend/components/basic/layout.js

@@ -0,0 +1,318 @@
+import Link from "next/link";
+import { useRouter } from "next/router";
+import { useEffect, useState } from "react";
+
+import NavBarDashboard from "../navigation/NavBarDashboard";
+import Listbox from "./Listbox";
+import getWorkspaces from "../../pages/api/workspace/getWorkspaces";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import {
+	faHouse,
+	faUser,
+	faGear,
+	faMobile,
+	faLink,
+} from "@fortawesome/free-solid-svg-icons";
+import AddWorkspaceDialog from "./dialog/AddWorkspaceDialog";
+import createWorkspace from "../../pages/api/workspace/createWorkspace";
+import getOrganizationUserProjects from "../../pages/api/organization/GetOrgUserProjects";
+import getOrganizationUsers from "../../pages/api/organization/GetOrgUsers";
+import addUserToWorkspace from "../../pages/api/workspace/addUserToWorkspace";
+import getOrganizations from "../../pages/api/organization/getOrgs";
+import { faPlus } from "@fortawesome/free-solid-svg-icons";
+
+import { decryptAssymmetric, encryptAssymmetric } from "../utilities/crypto";
+import Button from "./buttons/Button";
+
+export default function Layout({ children }) {
+	const router = useRouter();
+	const [workspaceList, setWorkspaceList] = useState([]);
+	const [workspaceMapping, setWorkspaceMapping] = useState([{ 1: 2 }]);
+	const [workspaceSelected, setWorkspaceSelected] = useState("∞");
+	let [newWorkspaceName, setNewWorkspaceName] = useState("");
+	let [isOpen, setIsOpen] = useState(false);
+	const [loading, setLoading] = useState(false);
+	const [error, setError] = useState(false);
+
+	function closeModal() {
+		setIsOpen(false);
+	}
+
+	// TODO: what to do about the fact that 2ids can have the same name
+
+	/**
+	 * When a user creates a new workspace, redirect them to the page of the new workspace.
+	 * @param {*} workspaceName
+	 */
+	async function submitModal(workspaceName, addAllUsers) {
+		setLoading(true);
+		setTimeout(() => setLoading(false), 1500);
+		const workspaces = await getWorkspaces();
+		const currentWorkspaces = workspaces.map(
+			(workspace) => workspace.name
+		);
+		if (!currentWorkspaces.includes(workspaceName)) {
+			const newWorkspace = await createWorkspace(
+				workspaceName,
+				localStorage.getItem("orgData.id")
+			);
+			let newWorkspaceId;
+			try {
+				newWorkspaceId = newWorkspace._id;
+			} catch (error) {
+				console.log(error);
+			}
+			if (addAllUsers) {
+				let orgUsers = await getOrganizationUsers({
+					orgId: localStorage.getItem("orgData.id"),
+				});
+				orgUsers.map(async (user) => {
+					if (user.status == "accepted") {
+						let result = await addUserToWorkspace(
+							user.user.email,
+							newWorkspaceId
+						);
+						if (result?.invitee && result?.latestKey) {
+							const PRIVATE_KEY =
+								localStorage.getItem("PRIVATE_KEY");
+
+							// assymmetrically decrypt symmetric key with local private key
+							const key = decryptAssymmetric({
+								ciphertext: result.latestKey.encryptedKey,
+								nonce: result.latestKey.nonce,
+								publicKey: result.latestKey.sender.publicKey,
+								privateKey: PRIVATE_KEY,
+							});
+
+							const { ciphertext, nonce } = encryptAssymmetric({
+								plaintext: key,
+								publicKey: result.invitee.publicKey,
+								privateKey: PRIVATE_KEY,
+							});
+
+							uploadKeys(
+								newWorkspaceId,
+								result.invitee._id,
+								ciphertext,
+								nonce
+							);
+						}
+					}
+				});
+			}
+			router.push("/dashboard/" + newWorkspaceId + "?Development");
+			setIsOpen(false);
+			setNewWorkspaceName("");
+		} else {
+			setError("A project with this name already exists.");
+			setLoading(false);
+		}
+	}
+
+	function openModal() {
+		setIsOpen(true);
+	}
+
+	const menuItems = [
+		{
+			href:
+				"/dashboard/" +
+				workspaceMapping[workspaceSelected] +
+				"?Development",
+			title: "Secrets",
+			emoji: <FontAwesomeIcon icon={faHouse} />,
+		},
+		{
+			href: "/users/" + workspaceMapping[workspaceSelected],
+			title: "Members",
+			emoji: <FontAwesomeIcon icon={faUser} />,
+		},
+		{
+			href: "/integrations/" + workspaceMapping[workspaceSelected],
+			title: "Integrations",
+			emoji: <FontAwesomeIcon icon={faLink} />,
+		},
+		{
+			href: "/settings/project/" + workspaceMapping[workspaceSelected],
+			title: "Project Settings",
+			emoji: <FontAwesomeIcon icon={faGear} />,
+		},
+	];
+
+	useEffect(async () => {
+		// Put a user in a workspace if they're not in one yet
+		if (localStorage.getItem("orgData.id") == null || localStorage.getItem("orgData.id") == "") {
+			const userOrgs = await getOrganizations();
+			localStorage.setItem("orgData.id", userOrgs[0]._id);
+		}
+
+		let orgUserProjects = await getOrganizationUserProjects({
+			orgId: localStorage.getItem("orgData.id"),
+		});
+		let userWorkspaces = orgUserProjects;
+		if (userWorkspaces.length == 0 && (router.asPath != "/noprojects" && !router.asPath.includes("settings"))) {
+			router.push("/noprojects");
+		} else if (router.asPath != "/noprojects") {
+			const intendedWorkspaceId = router.asPath
+				.split("/")
+				[router.asPath.split("/").length - 1].split("?")[0];
+
+			// If a user is not a member of a workspace they are trying to access, just push them to one of theirs
+			if (intendedWorkspaceId != "heroku" && !userWorkspaces
+					.map((workspace) => workspace._id)
+					.includes(intendedWorkspaceId)
+			) {
+				router.push(
+					"/dashboard/" + userWorkspaces[0]._id + "?Development"
+				);
+			} else {
+				setWorkspaceList(
+					userWorkspaces.map((workspace) => workspace.name)
+				);
+				setWorkspaceMapping(
+					Object.fromEntries(
+						userWorkspaces.map((workspace) => [
+							workspace.name,
+							workspace._id,
+						])
+					)
+				);
+				setWorkspaceSelected(
+					Object.fromEntries(
+						userWorkspaces.map((workspace) => [
+							workspace._id,
+							workspace.name,
+						])
+					)[
+						router.asPath
+							.split("/")
+							[router.asPath.split("/").length - 1].split("?")[0]
+					]
+				);
+			}
+		}
+	}, []);
+
+	useEffect(() => {
+		try {
+			if (
+				workspaceMapping[workspaceSelected] &&
+				workspaceMapping[workspaceSelected] !==
+					router.asPath
+						.split("/")
+						[router.asPath.split("/").length - 1].split("?")[0]
+			) {
+				router.push(
+					"/dashboard/" +
+						workspaceMapping[workspaceSelected] +
+						"?Development"
+				);
+				localStorage.setItem("projectData.id", workspaceMapping[workspaceSelected])
+			}
+		} catch (error) {
+			console.log(error);
+		}
+	}, [workspaceSelected]);
+
+	return (
+		<>
+			<div className="fixed w-full hidden md:block flex flex-col h-screen">
+				<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
+								</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-1.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 text-white text-sm rounded cursor-pointer bg-mineshaft-50/10`}
+											>
+												<div className="bg-primary w-1 rounded-xl mr-1"></div>
+												<p className="ml-2 mr-4">
+													{emoji}
+												</p>
+												{title}
+											</div>
+										) : router.asPath == "/noprojects" ? (
+											<div
+												className={`flex p-2 text-white text-sm rounded`}
+											>
+												<p className="ml-2 mr-4">
+													{emoji}
+												</p>
+												{title}
+											</div>
+										) : (
+											<Link href={href}>
+												<div
+													className={`flex p-2 text-white text-sm rounded cursor-pointer hover:bg-mineshaft-50/5`}
+												>
+													<p className="ml-2 mr-4">
+														{emoji}
+													</p>
+													{title}
+												</div>
+											</Link>
+										)}
+									</li>
+								))}
+							</ul>
+						</nav>
+					</aside>
+					<AddWorkspaceDialog
+						isOpen={isOpen}
+						closeModal={closeModal}
+						submitModal={submitModal}
+						workspaceName={newWorkspaceName}
+						setWorkspaceName={setNewWorkspaceName}
+						error={error}
+						loading={loading}
+					/>
+					<main className="flex-1 bg-bunker-800">{children}</main>
+				</div>
+			</div>
+			<div className="block md:hidden bg-bunker-800 w-screen h-screen flex flex-col justify-center items-center">
+				<FontAwesomeIcon
+					icon={faMobile}
+					className="text-gray-300 text-7xl mb-8"
+				/>
+				<p className="text-gray-200 px-6 text-center text-lg max-w-sm">
+					{" "}
+					To use Infisical, please log in through a device with larger
+					dimensions.{" "}
+				</p>
+			</div>
+		</>
+	);
+}

frontend/components/basic/popups/BottomRightPopup.js

@@ -0,0 +1,41 @@
+import React from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import {
+	faXmark,
+} from "@fortawesome/free-solid-svg-icons";
+
+export default function BottonRightPopup({
+	buttonText,
+	buttonLink,
+	titleText,
+	emoji,
+	textLine1,
+	textLine2,
+	setCheckDocsPopUpVisible
+}) {
+	return (
+		<div class="z-50 drop-shadow-xl border-gray-600/50 border flex flex-col items-start bg-bunker max-w-xl text-gray-200 pt-3 pb-4 rounded-xl absolute bottom-0 right-0 mr-6 mb-6" role="alert">
+			<div className="flex flex-row items-center justify-between w-full border-b border-gray-600/70 pb-3 px-6">
+				<div className="font-bold text-xl mr-2 mt-0.5 flex flex-row">
+					<div>{titleText}</div>
+					<div class="ml-2.5">{emoji}</div>
+				</div>
+				<button className="mt-1" onClick={() => setCheckDocsPopUpVisible(false)}>
+					<FontAwesomeIcon icon={faXmark} className="text-gray-400 text-2xl hover:text-red duration-200 cursor-pointer" />
+				</button>
+			</div>
+			<div class="block sm:inline px-6 mt-4 mb-0.5 text-gray-300">{textLine1}</div>
+			<div class="block sm:inline mb-4 px-6">{textLine2}</div>
+			<div className="flex flex-row px-6 w-full">
+				<a
+					class="font-bold p-2 bg-white/10 rounded-md w-full hover:bg-primary duration-200 hover:text-black flex justify-center"
+					href={buttonLink}
+					target="_blank"
+					rel="noopener"
+				>
+					{buttonText}
+				</a>
+			</div>
+		</div>
+	);
+}

frontend/components/basic/table/Checkbox.js

@@ -0,0 +1,28 @@
+import React from "react";
+
+export const Checkbox = ({ addAllUsers, setAddAllUsers }) => {
+	return (
+		<>
+			<div className="flex flex-row items-center">
+				{addAllUsers == true ? (
+					<input
+						type="checkbox"
+						className="accent-primary h-4 w-4"
+						checked
+						readOnly
+						onClick={() => setAddAllUsers(!addAllUsers)}
+					/>
+				) : (
+					<div
+						className="h-4 w-4 bg-bunker border border-gray-600 rounded-sm"
+						onClick={() => setAddAllUsers(!addAllUsers)}
+					></div>
+				)}
+
+				<label className="ml-2 text-gray-500 text-sm">
+					Add all members of my organization to this project.
+				</label>
+			</div>
+		</>
+	);
+};

frontend/components/basic/table/ServiceTokenTable.js

@@ -0,0 +1,81 @@
+import React, { useEffect, useState } from "react";
+import { useRouter } from "next/router";
+import { faX } from "@fortawesome/free-solid-svg-icons";
+import Button from "../buttons/Button";
+import guidGenerator from "../../utilities/randomId";
+
+const roles = ["admin", "user"];
+
+const reverseEnvMapping = {
+	"dev": "Development",
+	"staging": "Staging",
+	"prod": "Production",
+	"test": "Testing"
+}
+
+/**
+ * This is the component that we utilize for the user table - in future, can reuse it for some other purposes too.
+ * #TODO: add the possibility of choosing and doing operations on multiple users.
+ * @param {*} props
+ * @returns
+ */
+const ServiceTokenTable = ({
+	data,
+	workspaceName
+}) => {
+	const router = useRouter();
+
+	return (
+		<div className="table-container w-full bg-bunker rounded-md mb-6 border border-mineshaft-700 relative mt-1">
+			<div className="absolute rounded-t-md w-full h-12 bg-white/5"></div>
+			<table className="w-full my-1">
+				<thead className="text-bunker-300">
+					<tr>
+						<th className="text-left pl-6 pt-2.5 pb-2">Token name</th>
+						<th className="text-left pl-6 pt-2.5 pb-2">Project</th>
+						<th className="text-left pl-6 pt-2.5 pb-2">Environment</th>
+						<th className="text-left pl-6 pt-2.5 pb-2">Valid until</th>
+						<th></th>
+					</tr>
+				</thead>
+				<tbody>
+					{data?.length > 0 
+					? 	data
+							.map((row, index) => {
+								return (
+									<tr key={guidGenerator()} className="bg-bunker-800 hover:bg-bunker-800/5 duration-100">
+										<td className="pl-6 py-2 border-mineshaft-700 border-t text-gray-300">
+											{row.name}
+										</td>
+										<td className="pl-6 py-2 border-mineshaft-700 border-t text-gray-300">
+											{workspaceName}
+										</td>
+										<td className="pl-6 py-2 border-mineshaft-700 border-t text-gray-300">
+											{reverseEnvMapping[row.environment]}
+										</td>
+										<td className="pl-6 py-2 border-mineshaft-700 border-t text-gray-300">
+											{new Date(row.expiresAt).toUTCString()}
+										</td>
+										<td className="py-2 border-mineshaft-700 border-t">
+											<div className="opacity-50 hover:opacity-100 duration-200 flex items-center">
+												<Button
+													onButtonPressed={() => {}}
+													color="red"
+													size="icon-sm"
+													icon={faX}
+												/>
+											</div>
+										</td>
+									</tr>
+								);
+							})
+						: 	<tr>
+								<td colSpan="4" className="text-center pt-7 pb-4 text-bunker-400">No service tokens yet</td>
+							</tr>}
+				</tbody>
+			</table>
+		</div>
+	);
+};
+
+export default ServiceTokenTable;

frontend/components/basic/table/UserTable.js

@@ -0,0 +1,267 @@
+import React, { useEffect, useMemo, useState } from "react";
+import { useRouter } from "next/router";
+import Listbox from "../Listbox";
+import uploadKeys from "../../../pages/api/workspace/uploadKeys";
+import getLatestFileKey from "../../../pages/api/workspace/getLatestFileKey";
+import deleteUserFromWorkspace from "../../../pages/api/workspace/deleteUserFromWorkspace";
+import changeUserRoleInWorkspace from "../../../pages/api/workspace/changeUserRoleInWorkspace";
+import deleteUserFromOrganization from "../../../pages/api/organization/deleteUserFromOrganization";
+import { faX } from "@fortawesome/free-solid-svg-icons";
+import Button from "../buttons/Button";
+import guidGenerator from "../../utilities/randomId";
+
+const {
+	decryptAssymmetric,
+	encryptAssymmetric,
+} = require("../../utilities/crypto");
+const nacl = require("tweetnacl");
+nacl.util = require("tweetnacl-util");
+
+const roles = ["admin", "user"];
+
+/**
+ * This is the component that we utilize for the user table - in future, can reuse it for some other purposes too.
+ * #TODO: add the possibility of choosing and doing operations on multiple users.
+ * @param {*} props
+ * @returns
+ */
+const UserTable = ({
+	userData,
+	changeData,
+	myUser,
+	filter,
+	resendInvite,
+	isOrg,
+	onClick,
+	deleteUser,
+	setUserIdToBeDeleted,
+}) => {
+	const [roleSelected, setRoleSelected] = useState(
+		Array(userData?.length).fill(userData.map((user) => user.role))
+	);
+	const router = useRouter();
+	const [myRole, setMyRole] = useState("member");
+
+	// Delete the row in the table (e.g. a user)
+	// #TODO: Add a pop-up that warns you that the user is going to be deleted.
+	const handleDelete = (membershipId, index, e) => {
+		// setUserIdToBeDeleted(userId);
+		// onClick();
+		if (isOrg) {
+			deleteUserFromOrganization(membershipId);
+		} else {
+			deleteUserFromWorkspace(membershipId);
+		}
+		changeData(userData.filter((v, i) => i !== index));
+		setRoleSelected([
+			...roleSelected.slice(0, index),
+			...roleSelected.slice(index + 1, userData?.length),
+		]);
+	};
+
+	// Update the rold of a certain user
+	const handleRoleUpdate = (index, e) => {
+		changeUserRoleInWorkspace(userData[index].membershipId, e);
+		changeData([
+			...userData.slice(0, index),
+			...[
+				{
+					key: userData[index].key,
+					firstName: userData[index].firstName,
+					lastName: userData[index].lastName,
+					email: userData[index].email,
+					role: e,
+					status: userData[index].status,
+					userId: userData[index].userId,
+					membershipId: userData[index].membershipId,
+					publicKey: userData[index].publicKey,
+				},
+			],
+			...userData.slice(index + 1, userData?.length),
+		]);
+	};
+
+	useEffect(async () => {
+		setMyRole(userData.filter((user) => user.email == myUser)[0]?.role);
+	}, [userData, myUser]);
+
+	const grantAccess = async (id, publicKey) => {
+		let result = await getLatestFileKey(router.query.id);
+
+		const PRIVATE_KEY = localStorage.getItem("PRIVATE_KEY");
+
+		// assymmetrically decrypt symmetric key with local private key
+		const key = decryptAssymmetric({
+			ciphertext: result.latestKey.encryptedKey,
+			nonce: result.latestKey.nonce,
+			publicKey: result.latestKey.sender.publicKey,
+			privateKey: PRIVATE_KEY,
+		});
+
+		const { ciphertext, nonce } = encryptAssymmetric({
+			plaintext: key,
+			publicKey: publicKey,
+			privateKey: PRIVATE_KEY,
+		});
+
+		uploadKeys(router.query.id, id, ciphertext, nonce);
+		router.reload();
+	};
+
+	const deleteMembershipAndResendInvite = (email, membershipId) => {
+		// deleteUserFromWorkspace(membershipId);
+		resendInvite(email);
+	};
+
+	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">
+					<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></th>
+					</tr>
+				</thead>
+				<tbody>
+					{userData?.filter(
+						(user) =>
+							user.firstName?.toLowerCase().includes(filter) ||
+							user.lastName?.toLowerCase().includes(filter) ||
+							user.email?.toLowerCase().includes(filter)
+					).length > 0 &&
+						userData
+							?.filter(
+								(user) =>
+									user.firstName
+										?.toLowerCase()
+										.includes(filter) ||
+									user.lastName
+										?.toLowerCase()
+										.includes(filter) ||
+									user.email?.toLowerCase().includes(filter)
+							)
+							.map((row, index) => {
+								return (
+									<tr key={guidGenerator()} className="bg-bunker-800 hover:bg-bunker-800/5">
+										<td className="pl-6 py-2 border-mineshaft-700 border-t text-gray-300">
+											{row.firstName}
+										</td>
+										<td className="pl-6 py-2 border-mineshaft-700 border-t text-gray-300">
+											{row.lastName}
+										</td>
+										<td className="pl-6 py-2 border-mineshaft-700 border-t text-gray-300">
+											{row.email}
+										</td>
+										<td className="flex flex-row justify-end pr-8 py-2 border-t border-0.5 border-mineshaft-700">
+											<div className="flex justify-end mr-6 w-3/4 mx-2 w-full h-full flex flex-row items-center">
+												{row.status == "granted" &&
+												((myRole == "admin" &&
+													row.role != "owner") ||
+													myRole == "owner") &&
+												myUser !== row.email ? (
+													<Listbox
+														selected={row.role}
+														onChange={(e) =>
+															handleRoleUpdate(
+																index,
+																e
+															)
+														}
+														data={
+															myRole == "owner"
+																? [
+																		"owner",
+																		"admin",
+																		"member",
+																  ]
+																: [
+																		"admin",
+																		"member",
+																  ]
+														}
+														text="Role: "
+														membershipId={
+															row.membershipId
+														}
+													/>
+												) : (
+													row.status != "invited" &&
+													row.status !=
+														"verified" && (
+														<Listbox
+															selected={row.role}
+															text="Role: "
+															membershipId={
+																row.membershipId
+															}
+														/>
+													)
+												)}
+												{(row.status == "invited" ||
+													row.status ==
+														"verified") && (
+													<div className="w-full pl-12">
+														<Button
+															onButtonPressed={() =>
+																deleteMembershipAndResendInvite(
+																	row.email,
+																	row.membershipId
+																)
+															}
+															color="mineshaft"
+															text="Resend Invite"
+															size="md"
+														/>
+													</div>
+												)}
+												{row.status == "completed" &&
+													myUser !== row.email && (
+														<div className="border border-mineshaft-700 rounded-md bg-white/5 hover:bg-primary text-white hover:text-black duration-200">
+															<Button
+																onButtonPressed={() =>
+																	grantAccess(
+																		row.userId,
+																		row.publicKey
+																	)
+																}
+																color="mineshaft"
+																text="Grant Access"
+																size="md"
+															/>
+														</div>
+													)}
+											</div>
+											{myUser !== row.email &&
+											// row.role != "admin" &&
+											myRole != "member" ? (
+												<div className="opacity-50 hover:opacity-100 flex items-center">
+													<Button
+														onButtonPressed={(e) =>
+															handleDelete(
+																row.membershipId,
+																index,
+																e
+															)
+														}
+														color="red"
+														size="icon-sm"
+														icon={faX}
+													/>
+												</div>
+											) : (
+												<div className="w-9 h-9"></div>
+											)}
+										</td>
+									</tr>
+								);
+							})}
+				</tbody>
+			</table>
+		</div>
+	);
+};
+
+export default UserTable;

frontend/components/billing/Card.js

@@ -0,0 +1,72 @@
+import React from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faCheck, faQuestionCircle } from "@fortawesome/free-solid-svg-icons";
+import { faCcMastercard, faCcVisa } from "@fortawesome/free-brands-svg-icons";
+import { faCircle } from "@fortawesome/free-solid-svg-icons";
+
+export default function Card({ card, changeSelectedCard, selected }) {
+	function creditCardBrandIcon(cc) {
+		if (cc == "visa") {
+			return faCcVisa;
+		} else if ((cc = "mastercard")) {
+			return faCcMastercard;
+		} else return faQuestionCircle;
+	}
+
+	return (
+		<button onClick={() => changeSelectedCard(card.id)}>
+			<div
+				className={`flex flex-col p-3 items-start justify-between mr-2 w-52 h-28 bg-primary/5 rounded-lg duration-200 ${
+					card.id == selected
+						? "border-primary text-primary"
+						: "border-gray-500 text-gray-300"
+				} hover:border-primary border-2 hover:text-primary cursor-pointer`}
+			>
+				<div className="flex flex-row items-center justify-between w-full">
+					<FontAwesomeIcon
+						className="text-3xl mr-4"
+						icon={creditCardBrandIcon(card.card.brand)}
+					/>
+					{card.id == selected && (
+						<FontAwesomeIcon
+							className="text-xl ml-2 mr-2"
+							icon={faCheck}
+						/>
+					)}
+				</div>
+				<div className="flex flex-row items-center justify-between w-full">
+					<div className="flex flex-row items-center">
+						<p className="tracking-tighter mr-1 mt-0.5 flex">
+							{"****".split("").map(() => (
+								<FontAwesomeIcon
+									className="text-xxxs mr-0.5"
+									icon={faCircle}
+								/>
+							))}
+						</p>
+						<p className="tracking-tighter mr-1 mt-0.5 flex">
+							{"****".split("").map(() => (
+								<FontAwesomeIcon
+									className="text-xxxs mr-0.5"
+									icon={faCircle}
+								/>
+							))}
+						</p>
+						<p className="tracking-tighter mr-1 mt-0.5 flex">
+							{"****".split("").map(() => (
+								<FontAwesomeIcon
+									className="text-xxxs mr-0.5"
+									icon={faCircle}
+								/>
+							))}
+						</p>
+						<p className="text-xs">{card.card.last4}</p>
+					</div>
+					<p className="text-xs">
+						{card.card.exp_month + "/" + card.card.exp_year}
+					</p>
+				</div>
+			</div>
+		</button>
+	);
+}

frontend/components/billing/Plan.js

@@ -0,0 +1,82 @@
+import React from "react";
+import StripeRedirect from "../../pages/api/organization/StripeRedirect";
+
+export default function Plan({ plan }) {
+	return (
+		<div
+			className={`relative flex flex-col justify-between border border-2 min-w-fit w-96 rounded-lg h-68 mr-4 bg-mineshaft-800 ${
+				(plan.name != "Starter") & (plan.current == true)
+					? "border-primary"
+					: "border-chicago-700"
+			}
+			`}
+		>
+			<div className="flex flex-col">
+				<div className="flex flex-row justify-between items-center relative z-10">
+					<p
+						className={`px-6 py-4 text-3xl font-semibold text-gray-400`}
+					>
+						{plan.name}
+					</p>
+				</div>
+				<div className="flex flwx-row items-end justify-start mb-4">
+					<p className="pl-6 text-3xl font-semibold text-primary">
+						{plan.price}
+					</p>
+					<p className="pl-3 mb-1 text-lg text-gray-400">
+						{plan.priceExplanation}
+					</p>
+				</div>
+			<p className="relative z-10 max-w-fit px-6 text-base text-gray-400">
+				{plan.text}
+			</p>
+			<p className="relative z-10 max-w-fit px-6 text-base text-gray-400">
+				{plan.subtext}
+			</p>
+			</div>
+			<div className="flex flex-row items-center">
+				{plan.current == false ? (
+					<>
+						{plan.buttonTextMain == "Schedule a Demo" ? (
+							<a
+								href="/scheduledemo"
+								target='_blank rel="noopener"'
+							>
+								<div className="relative z-10 mx-5 mt-3 mb-4 py-2 px-4 border border-1 border-gray-600 hover:text-black hover:border-primary text-gray-400 font-semibold hover:bg-primary bg-bunker duration-200 cursor-pointer rounded-md flex w-max">
+									{plan.buttonTextMain}
+								</div>
+							</a>
+						) : (
+							<div
+								className={`relative z-10 mx-5 mt-3 mb-4 py-2 px-4 border border-1 border-gray-600 text-gray-400 font-semibold ${
+									plan.buttonTextMain == "Downgrade"
+										? "hover:bg-red hover:text-white hover:border-red"
+										: "hover:bg-primary hover:text-black hover:border-primary"
+								} bg-bunker duration-200 cursor-pointer rounded-md flex w-max`}
+							>
+								<button onClick={() => StripeRedirect({orgId: localStorage.getItem("orgData.id")})}>{plan.buttonTextMain}</button>
+							</div>
+						)}
+						<a href="/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>
+					</>
+				) : (
+					<div
+						className={`h-8 w-full rounded-b-md flex justify-center items-center z-10 ${
+							(plan.name != "Starter") & (plan.current == true)
+								? "bg-primary"
+								: "bg-chicago-700"
+						}`}
+					>
+						<p className="text-xs text-black font-semibold">
+							CURRENT PLAN
+						</p>
+					</div>
+				)}
+			</div>
+		</div>
+	);
+}

frontend/components/dashboard/DashboardInputField.js

@@ -0,0 +1,68 @@
+import React from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faCircle } from "@fortawesome/free-solid-svg-icons";
+import guidGenerator from "../utilities/randomId";
+
+
+const DashboardInputField = ({label, index, onChangeHandler, type, value, placeholder, isRequired, blurred, isStatic}) => {
+	if (isStatic === true) {
+		return (
+			<div className="flex flex-col my-2 md:my-4 justify-center w-full max-w-md">
+				<p className="text-sm font-semibold text-gray-400 mb-0.5">
+					{label}
+				</p>
+				{text && (
+					<p className="text-xs text-gray-400 mb-2">{text}</p>
+				)}
+				<input
+					onChange={(e) => console.log(e.target.value, index)}
+					type={type}
+					placeholder={placeholder}
+					value={value}
+					required={isRequired}
+					className="bg-bunker-800 text-gray-400 border border-gray-600 rounded-md text-md p-2 w-full min-w-16 outline-none"
+					readOnly
+				/>
+			</div>
+		);
+	} else {
+		return (
+			<div className="flex-col w-full">
+				<div
+					className={`group flex flex-col justify-center w-full max-w-2xl border border-mineshaft-500 rounded-md`}
+				>
+					<input
+						onChange={(e) => onChangeHandler(e.target.value, index)}
+						type={type}
+						placeholder={placeholder}
+						value={value}
+						required={isRequired}
+						className={`${
+							blurred
+								? "text-bunker-800 group-hover:text-gray-400 focus:text-gray-400 active:text-gray-400"
+								: ""
+						} peer ph-no-capture bg-bunker-800 rounded-md text-gray-400 text-md px-2 py-1.5 w-full min-w-16 outline-none focus:ring-4 focus:ring-primary/50 duration-200`}
+						spellCheck="false"
+					/>
+					{blurred && (
+						<div className="peer pr-24 group-hover:hidden peer-hover:hidden peer-focus:hidden peer-active:invisible absolute h-10 w-fit max-w-xl rounded-md flex items-center text-gray-400/50 text-clip overflow-hidden">
+							<p className="ml-2"></p>
+							{value
+								.split("")
+								.slice(0,42)
+								.map(() => (
+									<FontAwesomeIcon
+										key={guidGenerator()}
+										className="text-xxs mx-0.5"
+										icon={faCircle}
+									/>
+								))}
+						</div>
+					)}
+				</div>
+			</div>
+		);
+	}
+};
+
+export default React.memo(DashboardInputField);

frontend/components/dashboard/DropZone.js

@@ -0,0 +1,187 @@
+import { useState } from "react";
+
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faUpload } from "@fortawesome/free-solid-svg-icons";
+import guidGenerator from "../utilities/randomId";
+
+import Error from "../basic/Error";
+import Image from "next/image";
+import parse from "../utilities/file";
+import Button from "../basic/buttons/Button";
+
+const DropZone = ({
+	setData,
+	setErrorDragAndDrop,
+	createNewFile,
+	errorDragAndDrop,
+	addPresetRow,
+	setButtonReady,
+	keysExist,
+	numCurrentRows
+}) => {
+	const handleDragEnter = (e) => {
+		e.preventDefault();
+		e.stopPropagation();
+	};
+
+	const handleDragLeave = (e) => {
+		e.preventDefault();
+		e.stopPropagation();
+	};
+
+	const handleDragOver = (e) => {
+		e.preventDefault();
+		e.stopPropagation();
+
+		// set dropEffect to copy i.e copy of the source item
+		e.dataTransfer.dropEffect = "copy";
+	};
+
+	const [loading, setLoading] = useState(false);
+
+	// This function function immediately parses the file after it is dropped
+	const handleDrop = async (e) => {
+		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 newData = Object.keys(keyPairs)
+				.map((key, index) => [
+					guidGenerator(),
+					numCurrentRows + index, 
+					key,
+					keyPairs[key],
+					"shared",
+				]);
+			setData(newData);
+			setButtonReady(true);
+		};
+
+		// If something is wrong show an error
+		try {
+			reader.readAsText(file);
+			setLoading(false);
+		} catch (error) {
+			setErrorDragAndDrop(true);
+			setLoading(false);
+		}
+	};
+
+	// This function is used when the user manually selects a file from the in-browser dircetory (not drag and drop)
+	const handleFileSelect = (e) => {
+		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);
+		};
+		reader.readAsText(file);
+	};
+
+	return loading ? (
+		<div className="flex items-center justify-center pt-16 mb-16">
+			<Image
+				src="/images/loading/loading.gif"
+				height={70}
+				width={120}
+				alt="google logo"
+			></Image>
+		</div>
+	) : 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)}
+		>
+			<input
+				id="fileSelect"
+				type="file"
+				className="opacity-0 absolute w-full h-full"
+				accept=".txt,.env"
+				onChange={(e) => handleFileSelect(e)}
+			/>
+			{errorDragAndDrop ? (
+				<div className="my-3 max-w-xl opacity-80"></div>
+			) : (
+				<div className=""></div>
+			)}
+			<div className="flex flex-row">
+				<FontAwesomeIcon
+					icon={faUpload}
+					className="text-gray-300 text-3xl mr-6"
+				/>
+				<p className="text-gray-300 mt-1">
+					Drag and drop your .env file here to add more keys.
+				</p>
+			</div>
+			{errorDragAndDrop ? (
+				<div className="mt-8 max-w-xl opacity-80">
+					<Error text="Something went wrong! Make sure you drag the file directly from the folder in which it is located (e.g., not VS code). Tip: click 'Reveal in Finder/Explorer'" />
+				</div>
+			) : (
+				<></>
+			)}
+		</div>
+	) : (
+		<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)}
+		>
+			<FontAwesomeIcon icon={faUpload} className="text-7xl mb-8" />
+			<p className="">Drag and drop your .env file here.</p>
+			<input
+				id="fileSelect"
+				type="file"
+				className="opacity-0 absolute w-full h-full"
+				accept=".txt,.env"
+				onChange={(e) => handleFileSelect(e)}
+			/>
+			<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>
+				<p className="text-gray-400 text-xs mx-4">OR</p>
+				<div className="border-t border-gray-700 w-1/5"></div>
+			</div>
+			<div className="z-10 mb-6">
+				<Button
+					color="mineshaft"
+					text="Create a new .env file" 
+					onButtonPressed={createNewFile}
+					size="md"
+				/>
+			</div>
+			{errorDragAndDrop ? (
+				<div className="opacity-80">
+					<Error text="Something went wrong! Make sure you drag the file directly from the folder in which it is located (e.g., not VS code). Tip: click 'Reveal in Finder/Explorer'" />
+				</div>
+			) : (
+				<div className="py-3">
+					{/* <p className="text-xs text-gray-500"> If you are expecting to see a file here, contact your administrator for permission. </p> */}
+				</div>
+			)}
+		</div>
+	);
+};
+
+export default DropZone;

frontend/components/navigation/NavBarDashboard.js

@@ -0,0 +1,311 @@
+import React, { useState, Fragment, useEffect } from "react";
+import { useRouter } from "next/router";
+
+import Image from "next/image";
+
+import logout from "../../pages/api/auth/Logout";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faCircleQuestion } from "@fortawesome/free-regular-svg-icons";
+import {
+	faBook,
+	faGear,
+	faCoins,
+	faRightFromBracket,
+	faEnvelope,
+	faPlus, 
+	faAngleDown
+} from "@fortawesome/free-solid-svg-icons";
+import { faSlack, faGithub } from "@fortawesome/free-brands-svg-icons";
+import { Menu, Transition } from "@headlessui/react";
+import getUser from "../../pages/api/user/getUser";
+import getOrganizations from "../../pages/api/organization/getOrgs";
+import getOrganization from "../../pages/api/organization/GetOrg";
+import guidGenerator from "../utilities/randomId";
+
+const supportOptions = [
+	[
+		<FontAwesomeIcon className="text-lg pl-1.5 pr-3" icon={faSlack} />,
+		"[NEW] Join Slack Forum",
+		"https://join.slack.com/t/infisical/shared_invite/zt-1dgg63ln8-G7PCNJdCymAT9YF3j1ewVA",
+	],
+	[
+		<FontAwesomeIcon className="text-lg pl-1.5 pr-3" icon={faBook} />,
+		"Read Docs",
+		"https://infisical.com/docs/gettingStarted",
+	],
+	[
+		<FontAwesomeIcon className="text-lg pl-1.5 pr-3" icon={faGithub} />,
+		"Open a GitHub Issue",
+		"https://github.com/Infisical/infisical-cli/issues",
+	],
+	[
+		<FontAwesomeIcon className="text-lg pl-1.5 pr-3" icon={faEnvelope} />,
+		"Send us an Email",
+		"mailto:support@infisical.com",
+	],
+];
+
+export default function Navbar({ onButtonPressed }) {
+	const router = useRouter();
+	const [user, setUser] = useState({});
+	const [orgs, setOrgs] = useState([]);
+	const [currentOrg, setCurrentOrg] = useState([]);
+
+	useEffect(async () => {
+		const userData = await getUser();
+		setUser(userData);
+		const orgsData = await getOrganizations();
+		setOrgs(orgsData);
+		const currentOrg = await getOrganization({
+			orgId: localStorage.getItem("orgData.id"),
+		});
+		setCurrentOrg(currentOrg);
+	}, []);
+
+	const closeApp = async () => {
+		console.log("Logging out...");
+		await logout();
+		router.push("/");
+	};
+
+	return (
+		<div className="absolute flex flex-row justify-between w-full bg-bunker text-white border-b border-mineshaft-500 z-50">
+			<div className="m-auto flex justify-start items-center mx-4">
+				<div className="flex flex-row items-center">
+					<div className="flex justify-center py-4">
+						<Image
+							src="/images/logotransparent.png"
+							height={23}
+							width={57}
+							alt="logo"
+						/>
+					</div>
+					<a className="text-2xl text-white font-semibold mx-2">
+						Infisical
+					</a>
+				</div>
+			</div>
+			<div className="relative flex justify-start items-center mx-2 z-40">
+				<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">
+							<FontAwesomeIcon
+								className="text-xl"
+								icon={faCircleQuestion}
+							/>
+						</Menu.Button>
+					</div>
+					<Transition
+						as={Fragment}
+						enter="transition ease-out duration-100"
+						enterFrom="transform opacity-0 scale-95"
+						enterTo="transform opacity-100 scale-100"
+						leave="transition ease-in duration-75"
+						leaveFrom="transform opacity-100 scale-100"
+						leaveTo="transform opacity-0 scale-95"
+					>
+						<Menu.Items className="absolute right-0 mt-0.5 w-64 origin-top-right rounded-md bg-bunker border border-mineshaft-700 shadow-lg ring-1 ring-black z-20 ring-opacity-5 focus:outline-none px-2 py-1.5">
+							{supportOptions.map((option) => (
+								<a
+									key={guidGenerator()}
+									target="_blank"
+									rel="noopener"
+									href={option[2]}
+									className="font-normal text-gray-300 duration-200 rounded-md w-full flex items-center py-0.5"
+								>
+									<div className="relative flex justify-start items-center cursor-pointer select-none py-2 px-2 rounded-md text-gray-400 hover:bg-white/10 duration-200 hover:text-gray-200 w-full">
+										{option[0]}
+										<div className="text-sm">
+											{option[1]}
+										</div>
+									</div>
+								</a>
+							))}
+						</Menu.Items>
+					</Transition>
+				</Menu>
+				<Menu as="div" className="relative inline-block text-left mr-4">
+					<div>
+						<Menu.Button className="inline-flex w-full justify-center rounded-md pr-2 pl-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">
+							{user?.firstName} {user?.lastName}
+							<FontAwesomeIcon icon={faAngleDown} className="ml-2 mt-1 text-sm text-gray-300 hover:text-lime-100"/>
+						</Menu.Button>
+					</div>
+					<Transition
+						as={Fragment}
+						enter="transition ease-out duration-100"
+						enterFrom="transform opacity-0 scale-95"
+						enterTo="transform opacity-100 scale-100"
+						leave="transition ease-in duration-75"
+						leaveFrom="transform opacity-100 scale-100"
+						leaveTo="transform opacity-0 scale-95"
+					>
+						<Menu.Items className="absolute right-0 mt-0.5 w-64 origin-top-right divide-y divide-gray-700 rounded-md bg-bunker border border-mineshaft-700 shadow-lg ring-1 ring-black z-20 ring-opacity-5 focus:outline-none">
+							<div className="px-1 py-1 ">
+								<div className="text-gray-400 self-start ml-2 mt-2 text-xs font-semibold tracking-wide">
+									SIGNED IN AS
+								</div>
+								<div 
+									onClick={() =>
+										router.push(
+											"/settings/personal/" + router.query.id
+										)
+									}
+									className="flex flex-row items-center px-1 mx-1 my-1 hover:bg-white/5 cursor-pointer rounded-md">
+									<div className="bg-white/10 h-8 w-9 rounded-full flex items-center justify-center text-gray-300">
+										{user?.firstName?.charAt(0)}
+									</div>
+									<div className="flex items-center justify-between w-full">
+										<div>
+											<p className="text-gray-300 px-2 pt-1 text-sm">
+												{" "}
+												{user?.firstName} {user?.lastName}
+											</p>
+											<p className="text-gray-400 px-2 pb-1 text-xs">
+												{" "}
+												{user?.email}
+											</p>
+										</div>
+										<FontAwesomeIcon
+											icon={faGear}
+											className="text-lg text-gray-400 p-2 mr-1 rounded-md cursor-pointer hover:bg-white/10"
+										/>
+									</div>
+								</div>
+							</div>
+							<div className="px-2 pt-2">
+								<div className="text-gray-400 self-start ml-2 mt-2 text-xs font-semibold tracking-wide">
+									CURRENT ORGANIZATION
+								</div>
+								<div
+									onClick={() =>
+										router.push(
+											"/settings/org/" + router.query.id
+										)
+									}
+									className="flex flex-row items-center px-2 mt-2 py-1 hover:bg-white/5 cursor-pointer rounded-md"
+								>
+									<div className="bg-white/10 h-7 w-8 rounded-md flex items-center justify-center text-gray-300">
+										{currentOrg?.name?.charAt(0)}
+									</div>
+									<div className="flex items-center justify-between w-full">
+										<p className="text-gray-300 px-2 text-sm">
+											{currentOrg?.name}
+										</p>
+										<FontAwesomeIcon
+											icon={faGear}
+											className="text-lg text-gray-400 p-2 rounded-md cursor-pointer hover:bg-white/10"
+										/>
+									</div>
+								</div>
+								<button
+									// onClick={buttonAction}
+									className="cursor-pointer w-full"
+								>
+									<div
+										onClick={() =>
+											router.push(
+												"/settings/billing/" +
+													router.query.id
+											)
+										}
+										className="mt-1 relative flex justify-start cursor-pointer select-none py-2 px-2 rounded-md text-gray-400 hover:bg-white/5 duration-200 hover:text-gray-200"
+									>
+										<FontAwesomeIcon
+											className="text-lg pl-1.5 pr-3"
+											icon={faCoins}
+										/>
+										<div className="text-sm">
+											Usage & Billing
+										</div>
+									</div>
+								</button>
+								<button
+									// onClick={buttonAction}
+									className="cursor-pointer w-full mb-2"
+								>
+									<div
+										onClick={() =>
+											router.push(
+												"/settings/org/" +
+													router.query.id +
+													"?invite"
+											)
+										}
+										className="relative flex justify-start cursor-pointer select-none py-2 pl-10 pr-4 rounded-md text-gray-400 hover:bg-primary/100 duration-200 hover:text-black hover:font-semibold mt-1"
+									>
+										<span className="rounded-lg absolute inset-y-0 left-0 flex items-center pl-3 pr-4">
+											<FontAwesomeIcon icon={faPlus} className="ml-1" />
+										</span>
+										<div className="text-sm ml-1">
+											Invite Members
+										</div>
+									</div>
+								</button>
+							</div>
+							{orgs?.length > 1 && <div className="px-1 pt-1">
+								<div className="text-gray-400 self-start ml-2 mt-2 text-xs font-semibold tracking-wide">
+									OTHER ORGANIZATIONS
+								</div>
+								<div className="flex flex-col items-start px-1 mt-3 mb-2">
+									{orgs
+										.filter(
+											(org) =>
+												org._id !=
+												localStorage.getItem(
+													"orgData.id"
+												)
+										)
+										.map((org) => (
+											<div
+												key={guidGenerator()}
+												onClick={() => {
+													localStorage.setItem(
+														"orgData.id",
+														org._id
+													);
+													router.reload();
+												}}
+												className="flex flex-row justify-start items-center hover:bg-white/5 w-full p-1.5 cursor-pointer rounded-md"
+											>
+												<div className="bg-white/10 h-7 w-8 rounded-md flex items-center justify-center text-gray-300">
+													{org.name.charAt(0)}
+												</div>
+												<div className="flex items-center justify-between w-full">
+													<p className="text-gray-300 px-2 text-sm">
+														{org.name}
+													</p>
+												</div>
+											</div>
+										))}
+								</div>
+							</div>}
+							<div className="px-1 py-1">
+								<Menu.Item>
+									{({ active }) => (
+										<button
+											onClick={closeApp}
+											className={`${
+												active
+													? "bg-red font-semibold text-white"
+													: "text-gray-400"
+											} group flex w-full items-center rounded-md px-2 py-2 text-sm`}
+										>
+											<div className="relative flex justify-start items-center cursor-pointer select-none">
+												<FontAwesomeIcon
+													className="text-lg ml-1.5 mr-3"
+													icon={faRightFromBracket}
+												/>
+												Log Out
+											</div>
+										</button>
+									)}
+								</Menu.Item>
+							</div>
+						</Menu.Items>
+					</Transition>
+				</Menu>
+			</div>
+		</div>
+	);
+}

frontend/components/navigation/NavHeader.js

@@ -0,0 +1,47 @@
+import React, { useEffect, useState } from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faAngleRight, faQuestionCircle } from "@fortawesome/free-solid-svg-icons";
+import { faCcMastercard, faCcVisa } from "@fortawesome/free-brands-svg-icons";
+import { faCircle } from "@fortawesome/free-solid-svg-icons";
+import getOrganization from "../../pages/api/organization/GetOrg";
+import getWorkspaceInfo from "../../pages/api/workspace/getWorkspaceInfo";
+import { useRouter } from "next/router";
+
+export default function NavHeader({ pageName, isProjectRelated}) {
+    const [orgName, setOrgName] = useState("");
+    const [workspaceName, setWorkspaceName] = useState("");
+    const router = useRouter();
+
+    useEffect(async () => {
+		let org = await getOrganization({
+			orgId: localStorage.getItem("orgData.id"),
+		});
+		setOrgName(org.name);
+		let workspace = await getWorkspaceInfo({
+			workspaceId: router.query.id,
+		});
+		setWorkspaceName(workspace.name);
+    }, []);
+
+	return (
+        <div className="pt-20 ml-6 flex flex-row items-center">
+            <div className="bg-primary-900 h-6 w-6 rounded-md flex items-center justify-center text-mineshaft-100 mr-2">
+                {orgName?.charAt(0)}
+            </div>
+            <div className="text-primary text-sm font-semibold">
+                {orgName}
+            </div>
+            {isProjectRelated && <>
+                <FontAwesomeIcon icon={faAngleRight} className="ml-3 text-sm text-gray-400 mr-3" />
+                <div className="font-semibold text-primary text-sm">
+                    {workspaceName}
+                </div>
+            </>
+            }
+            <FontAwesomeIcon icon={faAngleRight} className="ml-3 text-sm text-gray-400 mr-3" />
+            <div className="text-gray-400 text-sm">
+                {pageName}
+            </div>
+        </div>
+	);
+}

frontend/components/utilities/SecurityClient.js

@@ -0,0 +1,29 @@
+import token from "../../pages/api/auth/Token"
+import { PATH } from '../../const';
+
+export default class SecurityClient {
+    static authOrigins = [PATH]
+    static #token = '';
+
+    contructor() {
+
+    }
+
+    static setToken(token) {
+        this.#token = token;
+    }
+
+    static async fetchCall(resource, options) {
+        let req = new Request(resource, options);
+        const destOrigin = new URL(req.url).origin;
+
+        if (this.#token == "") {
+            this.setToken(await token())
+        }
+
+        if (this.#token && this.authOrigins.includes(destOrigin)) {
+            req.headers.set('Authorization', "Bearer " + this.#token);
+            return fetch(req);
+        } 
+    }
+}

frontend/components/utilities/attemptLogin.js

@@ -0,0 +1,182 @@
+import login1 from "../../pages/api/auth/Login1";
+import login2 from "../../pages/api/auth/Login2";
+import Aes256Gcm from "../../components/aes-256-gcm";
+import pushKeys from "./pushKeys";
+import { initPostHog } from "../analytics/posthog";
+import getOrganizations from "../../pages/api/organization/getOrgs";
+import getOrganizationUserProjects from "../../pages/api/organization/GetOrgUserProjects";
+import SecurityClient from "./SecurityClient";
+
+const nacl = require("tweetnacl");
+nacl.util = require("tweetnacl-util");
+const jsrp = require("jsrp");
+const client = new jsrp.client();
+
+/**
+ * This function loggs in the user (whether it's right after signup, or a normal login)
+ * @param {*} email
+ * @param {*} password
+ * @param {*} setErrorLogin
+ * @param {*} router
+ * @param {*} isSignUp
+ * @returns
+ */
+const attemptLogin = async (
+	email,
+	password,
+	setErrorLogin,
+	router,
+	isSignUp,
+	isLogin
+) => {
+	try {
+		let userWorkspace, userOrg;
+		client.init(
+			{
+				username: email,
+				password: password,
+			},
+			async () => {
+				const clientPublicKey = client.getPublicKey();
+
+				let serverPublicKey, salt;
+				try {
+					const res = await login1(email, clientPublicKey);
+					res = await res.json();
+					serverPublicKey = res.serverPublicKey;
+					salt = res.salt;
+				} catch (err) {
+					setErrorLogin(true);
+					console.log("Wrong password", err);
+				}
+
+				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"];
+
+						const PRIVATE_KEY = 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);
+					}
+
+					const userOrgs = await getOrganizations();
+					const userOrgsData = userOrgs.map(org => org._id);
+					
+					let orgToLogin;
+					if (userOrgsData.includes(localStorage.getItem("orgData.id"))) {
+						orgToLogin = localStorage.getItem("orgData.id");
+					} else {
+						orgToLogin = userOrgsData[0];
+						localStorage.setItem("orgData.id", orgToLogin);
+					}
+
+					let orgUserProjects = await getOrganizationUserProjects({
+						orgId: orgToLogin,
+					});
+					
+					orgUserProjects = orgUserProjects?.map(project => project._id);
+					let projectToLogin;
+					if (orgUserProjects.includes(localStorage.getItem("projectData.id"))) {
+						projectToLogin = localStorage.getItem("projectData.id");
+					} else {
+						try {
+							projectToLogin = orgUserProjects[0];
+							localStorage.setItem("projectData.id", projectToLogin);
+						} catch (error) {
+							console.log("ERROR: User likely has no projects. ", error)
+						}
+					}
+
+					// If user is logging in for the first time, add the example keys
+					if (isSignUp) {
+						await pushKeys(
+							{
+								DATABASE_URL: [
+									"mongodb+srv://this_is:an_example@mongodb.net",
+									"personal",
+								],
+								TWILIO_AUTH_TOKEN: [
+									"hgSIwDAKvz8PJfkj6xkzYqzGmAP3HLuG",
+									"shared",
+								],
+								WEBSITE_URL: [
+									"http://localhost:3000",
+									"shared",
+								],
+								STRIPE_SECRET_KEY: [
+									"sk_test_7348oyho4hfq398HIUOH78",
+									"shared",
+								],
+							},
+							projectToLogin,
+							"Development"
+						);
+					}
+					try {
+						if (email) {
+							if (process.env.NEXT_PUBLIC_ENV == "production") {
+								const posthog = initPostHog();
+								posthog.identify(email);
+								posthog.capture("User Logged In");
+							}
+						}
+					} catch (error) {
+						console.log("posthog", error);
+					}
+
+					if (isLogin) {
+						router.push("/dashboard/");
+					}
+				} catch (error) {
+					setErrorLogin(true);
+					console.log("Login response not available");
+				}
+			}
+		);
+	} catch (error) {
+		console.log("Something went wrong during authentication");
+	}
+	return true;
+};
+
+export default attemptLogin;

frontend/components/utilities/changePassword.js

@@ -0,0 +1,109 @@
+import Aes256Gcm from "../aes-256-gcm";
+import SRP1 from "../../pages/api/auth/SRP1";
+import changePassword2 from "../../pages/api/auth/ChangePassword2";
+
+const nacl = require("tweetnacl");
+nacl.util = require("tweetnacl-util");
+const jsrp = require("jsrp");
+const clientOldPassword = new jsrp.client();
+const clientNewPassword = new jsrp.client();
+
+/**
+ * This function loggs in the user (whether it's right after signup, or a normal login)
+ * @param {*} email
+ * @param {*} password
+ * @param {*} setErrorLogin
+ * @param {*} router
+ * @param {*} isSignUp
+ * @returns
+ */
+const changePassword = async (
+	email,
+	currentPassword,
+	newPassword,
+	setCurrentPasswordError,
+	setPasswordChanged,
+	setCurrentPassword,
+	setNewPassword
+) => {
+	try {
+		setPasswordChanged(false);
+		setCurrentPasswordError(false);
+
+		clientOldPassword.init(
+			{
+				username: email,
+				password: currentPassword,
+			},
+			async () => {
+				const clientPublicKey = clientOldPassword.getPublicKey();
+
+				let serverPublicKey, salt;
+				try {
+					const res = await SRP1({
+						clientPublicKey: clientPublicKey
+					});
+					serverPublicKey = res.serverPublicKey;
+					salt = res.salt;
+				} catch (err) {
+					setCurrentPasswordError(true);
+					console.log("Wrong current password", err, 1);
+				}
+
+				clientOldPassword.setSalt(salt);
+				clientOldPassword.setServerPublicKey(serverPublicKey);
+				const clientProof = clientOldPassword.getProof(); // called M1
+
+				clientNewPassword.init({
+					username: email,
+					password: newPassword
+				}, async () => {
+					clientNewPassword.createVerifier(async (err, result) => {
+			
+						let { ciphertext, iv, tag } = Aes256Gcm.encrypt(
+							localStorage.getItem("PRIVATE_KEY"), 
+							newPassword.slice(0, 32).padStart(32 + (newPassword.slice(0, 32).length - new Blob([newPassword]).size), "0")
+						);
+
+						if (ciphertext) {
+							localStorage.setItem(
+								"encryptedPrivateKey",
+								ciphertext
+							);
+							localStorage.setItem("iv", iv);
+							localStorage.setItem("tag", tag);
+					
+							let res;
+							try {
+								res = await changePassword2({
+									encryptedPrivateKey: ciphertext,
+									iv,
+									tag,
+									salt: result.salt,
+									verifier: result.verifier,
+									clientProof
+								});
+								if (res.status == 400) {
+									setCurrentPasswordError(true);
+								} else if (res.status == 200) {
+									setPasswordChanged(true);
+									setCurrentPassword("");
+									setNewPassword("");
+								}
+							} catch (err) {
+								setCurrentPasswordError(true)
+								console.log(err);
+							}
+						}
+					});
+				});
+				
+			}
+		);
+	} catch (error) {
+		console.log("Something went wrong during changing the password", slat, serverPublicKey);
+	}
+	return true;
+};
+
+export default changePassword;

frontend/components/utilities/checks/PasswordCheck.js

@@ -0,0 +1,65 @@
+/**
+ * This function checks a user password with respect to some criteria.
+ * @param {*} password
+ * @param {*} setPasswordError
+ * @param {*} setPasswordErrorMessage
+ * @param {*} currentErrorCheck
+ * @returns
+ */
+const passwordCheck = (
+	password,
+	setPasswordErrorLength,
+	setPasswordErrorNumber,
+	setPasswordErrorLowerCase,
+	currentErrorCheck
+) => {
+	let errorCheck = currentErrorCheck;
+	if (!password || password.length < 14) {
+		setPasswordErrorLength(true);
+		errorCheck = true;
+	} else {
+		setPasswordErrorLength(false);
+	}
+	
+	if (!/\d/.test(password)) {
+		setPasswordErrorNumber(true);
+		errorCheck = true;
+	} else {
+		setPasswordErrorNumber(false);
+	}
+	
+	if (!/[a-z]/.test(password)) {
+		setPasswordErrorLowerCase(true);
+		errorCheck = true;
+		// } else if (/(.)(?:(?!\1).){1,2}/.test(password)) {
+		// 	console.log(111)
+		// 	setPasswordError(true);
+		// 	setPasswordErrorMessage("Password should not contain repeating characters.");
+		// 	errorCheck = true;
+		// } else if (RegExp(`[${email}]`).test(password)) {
+		// 	console.log(222)
+		// 	setPasswordError(true);
+		// 	setPasswordErrorMessage("Password should not contain your email.");
+		// 	errorCheck = true;
+	} else {
+		setPasswordErrorLowerCase(false);
+	}
+	
+	// if (!/[A-Z]/.test(password)) {
+	// 	setPasswordErrorUpperCase(true);
+	// 	errorCheck = true;
+	// } else {
+	// 	setPasswordErrorUpperCase(false);
+	// }
+	
+	// if (!/(?=.*[!@#$%^&*])/.test(password)) {
+	// 	setPasswordErrorSpecialChar(true);
+	// 		// "Please add at least 1 special character (*, !, #, %)."
+	// 	errorCheck = true;
+	// } else {
+	// 	setPasswordErrorSpecialChar(false);
+	// }
+	return errorCheck;
+};
+
+export default passwordCheck;

frontend/components/utilities/crypto.js

@@ -0,0 +1,105 @@
+const nacl = require("tweetnacl");
+nacl.util = require("tweetnacl-util");
+const aes = require("../aes-256-gcm");
+
+/**
+ * Return assymmetrically encrypted [plaintext] using [publicKey] where
+ * [publicKey] likely belongs to the recipient.
+ * @param {Object} obj
+ * @param {String} obj.plaintext - plaintext to encrypt
+ * @param {String} obj.publicKey - public key of the recipient
+ * @param {String} obj.privateKey - private key of the sender (current user)
+ * @returns {Object} obj
+ * @returns {String} ciphertext - base64-encoded ciphertext
+ * @returns {String} nonce - base64-encoded nonce
+ */
+const encryptAssymmetric = ({ plaintext, publicKey, privateKey }) => {
+	const nonce = nacl.randomBytes(24);
+	const ciphertext = nacl.box(
+		nacl.util.decodeUTF8(plaintext),
+		nonce,
+		nacl.util.decodeBase64(publicKey),
+		nacl.util.decodeBase64(privateKey)
+	);
+
+	return {
+		ciphertext: nacl.util.encodeBase64(ciphertext),
+		nonce: nacl.util.encodeBase64(nonce),
+	};
+};
+
+/**
+ * Return assymmetrically decrypted [ciphertext] using [privateKey] where
+ * [privateKey] likely belongs to the recipient.
+ * @param {Object} obj
+ * @param {String} obj.ciphertext - ciphertext to decrypt
+ * @param {String} obj.nonce - nonce
+ * @param {String} obj.publicKey - base64-encoded public key of the sender
+ * @param {String} obj.privateKey - base64-encoded private key of the receiver (current user)
+ * @param {String} plaintext - UTF8 plaintext
+ */
+const decryptAssymmetric = ({ ciphertext, nonce, publicKey, privateKey }) => {
+	const plaintext = nacl.box.open(
+		nacl.util.decodeBase64(ciphertext),
+		nacl.util.decodeBase64(nonce),
+		nacl.util.decodeBase64(publicKey),
+		nacl.util.decodeBase64(privateKey)
+	);
+
+	return nacl.util.encodeUTF8(plaintext);
+};
+
+/**
+ * Return symmetrically encrypted [plaintext] using [key].
+ * @param {Object} obj
+ * @param {String} obj.plaintext - plaintext to encrypt
+ * @param {String} obj.key - 16-byte hex key
+ */
+const encryptSymmetric = ({ plaintext, key }) => {
+	let ciphertext, iv, tag;
+	try {
+		const obj = aes.encrypt(plaintext, key);
+		ciphertext = obj.ciphertext;
+		iv = obj.iv;
+		tag = obj.tag;
+	} catch (err) {
+		console.log("Failed to perform encryption");
+		console.log(err);
+		process.exit(1);
+	}
+
+	return {
+		ciphertext,
+		iv,
+		tag,
+	};
+};
+
+/**
+ * Return symmetrically decypted [ciphertext] using [iv], [tag],
+ * and [key].
+ * @param {Object} obj
+ * @param {String} obj.ciphertext - ciphertext to decrypt
+ * @param {String} obj.iv - iv
+ * @param {String} obj.tag - tag
+ * @param {String} obj.key - 32-byte hex key
+ *
+ */
+const decryptSymmetric = ({ ciphertext, iv, tag, key }) => {
+	let plaintext;
+	try {
+		plaintext = aes.decrypt(ciphertext, iv, tag, key);
+	} catch (err) {
+		console.log("Failed to perform decryption");
+		process.exit(1);
+	}
+
+	return plaintext;
+};
+
+module.exports = {
+	encryptAssymmetric,
+	decryptAssymmetric,
+	encryptSymmetric,
+	decryptSymmetric,
+};

frontend/components/utilities/file.js

@@ -0,0 +1,47 @@
+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) {
+	const obj = {};
+
+	// 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;

frontend/components/utilities/getSecretsForProject.js

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

frontend/components/utilities/issueBackupKey.js

@@ -0,0 +1,96 @@
+import Aes256Gcm from "../aes-256-gcm";
+import SRP1 from "../../pages/api/auth/SRP1";
+import issueBackupPrivateKey from "../../pages/api/auth/IssueBackupPrivateKey";
+import generateBackupPDF from "./generateBackupPDF";
+
+const nacl = require("tweetnacl");
+nacl.util = require("tweetnacl-util");
+const jsrp = require("jsrp");
+const clientPassword = new jsrp.client();
+const clientKey = new jsrp.client();
+const crypto = require("crypto");
+
+/**
+ * This function loggs in the user (whether it's right after signup, or a normal login)
+ * @param {*} email
+ * @param {*} password
+ * @param {*} setErrorLogin
+ * @param {*} router
+ * @param {*} isSignUp
+ * @returns
+ */
+const issueBackupKey = async ({
+	email,
+	password,
+	personalName,
+	setBackupKeyError,
+	setBackupKeyIssued
+}) => {
+	try {
+		setBackupKeyError(false);
+		setBackupKeyIssued(false);
+		clientPassword.init(
+			{
+				username: email,
+				password: password,
+			},
+			async () => {
+				const clientPublicKey = clientPassword.getPublicKey();
+
+				let serverPublicKey, salt;
+				try {
+					const res = await SRP1({
+						clientPublicKey: clientPublicKey
+					});
+					serverPublicKey = res.serverPublicKey;
+					salt = res.salt;
+				} catch (err) {
+					setBackupKeyError(true);
+					console.log("Wrong current password", err, 1);
+				}
+
+				clientPassword.setSalt(salt);
+				clientPassword.setServerPublicKey(serverPublicKey);
+				const clientProof = clientPassword.getProof(); // called M1
+
+				const generatedKey = crypto.randomBytes(16).toString("hex");
+
+				clientKey.init({
+					username: email,
+					password: generatedKey
+				}, async () => {
+					clientKey.createVerifier(async (err, result) => {
+
+
+						let { ciphertext, iv, tag } = Aes256Gcm.encrypt(
+							localStorage.getItem("PRIVATE_KEY"), 
+							generatedKey
+						);
+
+						const res = await issueBackupPrivateKey({
+							encryptedPrivateKey: ciphertext,
+							iv,
+							tag,
+							salt: result.salt,
+							verifier: result.verifier,
+							clientProof
+						});
+
+						if (res.status == 400) {
+							setBackupKeyError(true);
+						} else if (res.status == 200) {
+							generateBackupPDF(personalName, email, generatedKey);
+							setBackupKeyIssued(true);
+						}
+					});
+				})
+			}
+		);
+	} catch (error) {
+		setBackupKeyError(true);
+		console.log("Failed to issue a backup key");
+	}
+	return true;
+};
+
+export default issueBackupKey;

frontend/components/utilities/pushKeys.js

@@ -0,0 +1,109 @@
+import getLatestFileKey from "../../pages/api/workspace/getLatestFileKey";
+import getWorkspaceKeys from "../../pages/api/workspace/getWorkspaceKeys";
+import uploadSecrets from "../../pages/api/files/UploadSecrets";
+
+const crypto = require("crypto");
+const {
+	decryptAssymmetric,
+	decryptSymmetric,
+	encryptSymmetric,
+	encryptAssymmetric,
+} = require("../../components/utilities/crypto");
+const nacl = require("tweetnacl");
+nacl.util = require("tweetnacl-util");
+
+const envMapping = {
+	Development: "dev",
+	Staging: "staging",
+	Production: "prod",
+	Testing: "test",
+};
+
+const pushKeys = async (obj, workspaceId, env) => {
+	let sharedKey = await getLatestFileKey(workspaceId);
+
+	const PRIVATE_KEY = localStorage.getItem("PRIVATE_KEY");
+
+	let randomBytes;
+	if (Object.keys(sharedKey).length > 0) {
+		// case: a (shared) key exists for the workspace
+		randomBytes = decryptAssymmetric({
+			ciphertext: sharedKey.latestKey.encryptedKey,
+			nonce: sharedKey.latestKey.nonce,
+			publicKey: sharedKey.latestKey.sender.publicKey,
+			privateKey: PRIVATE_KEY,
+		});
+	} else {
+		// case: a (shared) key does not exist for the workspace
+		randomBytes = crypto.randomBytes(16).toString("hex");
+	}
+
+	const secrets = Object.keys(obj).map((key) => {
+		// encrypt key
+		const {
+			ciphertext: ciphertextKey,
+			iv: ivKey,
+			tag: tagKey,
+		} = encryptSymmetric({
+			plaintext: key,
+			key: randomBytes,
+		});
+
+		// encrypt value
+		const {
+			ciphertext: ciphertextValue,
+			iv: ivValue,
+			tag: tagValue,
+		} = encryptSymmetric({
+			plaintext: obj[key][0],
+			key: randomBytes,
+		});
+
+		const visibility = obj[key][1] != null ? obj[key][1] : "personal";
+
+		return {
+			ciphertextKey,
+			ivKey,
+			tagKey,
+			hashKey: crypto.createHash("sha256").update(key).digest("hex"),
+			ciphertextValue,
+			ivValue,
+			tagValue,
+			hashValue: crypto
+				.createHash("sha256")
+				.update(obj[key][0])
+				.digest("hex"),
+			type: visibility,
+		};
+	});
+
+	// obtain public keys of all receivers (i.e. members in workspace)
+	const publicKeys = await getWorkspaceKeys({
+		workspaceId,
+	});
+
+	// assymmetrically encrypt key with each receiver public keys
+	const keys = publicKeys.map((k) => {
+		const { ciphertext, nonce } = encryptAssymmetric({
+			plaintext: randomBytes,
+			publicKey: k.publicKey,
+			privateKey: PRIVATE_KEY,
+		});
+
+		return {
+			encryptedKey: ciphertext,
+			nonce,
+			userId: k.userId,
+		};
+	});
+
+	// send payload
+	await uploadSecrets({
+		workspaceId,
+		secrets,
+		keys,
+		environment: envMapping[env],
+	});
+};
+
+export default pushKeys;

frontend/components/utilities/pushKeysIntegration.js

@@ -0,0 +1,77 @@
+import publicKeyInfical from "../../pages/api/auth/publicKeyInfisical"
+import changeHerokuConfigVars from "../../pages/api/integrations/ChangeHerokuConfigVars";
+
+const crypto = require("crypto");
+const {
+	encryptSymmetric,
+	encryptAssymmetric,
+} = require("./crypto");
+const nacl = require("tweetnacl");
+nacl.util = require("tweetnacl-util");
+
+const pushKeysIntegration = async ({ obj, integrationId }) => {
+	const PRIVATE_KEY = localStorage.getItem("PRIVATE_KEY");
+
+	let randomBytes = crypto.randomBytes(16).toString("hex");
+
+	const secrets = Object.keys(obj).map((key) => {
+		// encrypt key
+		const {
+			ciphertext: ciphertextKey,
+			iv: ivKey,
+			tag: tagKey,
+		} = encryptSymmetric({
+			plaintext: key,
+			key: randomBytes,
+		});
+
+		// encrypt value
+		const {
+			ciphertext: ciphertextValue,
+			iv: ivValue,
+			tag: tagValue,
+		} = encryptSymmetric({
+			plaintext: obj[key],
+			key: randomBytes,
+		});
+
+		const visibility = "shared";
+
+		return {
+			ciphertextKey,
+			ivKey,
+			tagKey,
+			hashKey: crypto.createHash("sha256").update(key).digest("hex"),
+			ciphertextValue,
+			ivValue,
+			tagValue,
+			hashValue: crypto
+				.createHash("sha256")
+				.update(obj[key])
+				.digest("hex"),
+			type: visibility,
+		};
+	});
+
+	// obtain public keys of all receivers (i.e. members in workspace)
+	let publicKeyInfisical = await publicKeyInfical();
+
+	publicKeyInfisical = (await publicKeyInfisical.json()).publicKey;
+
+	// assymmetrically encrypt key with each receiver public keys
+
+	const { ciphertext, nonce } = encryptAssymmetric({
+		plaintext: randomBytes,
+		publicKey: publicKeyInfisical,
+		privateKey: PRIVATE_KEY,
+	});
+
+	const key = {
+		encryptedKey: ciphertext,
+		nonce,
+	};
+
+	changeHerokuConfigVars({integrationId, key, secrets})
+};
+
+export default pushKeysIntegration;

frontend/components/utilities/randomId.js

@@ -0,0 +1,25 @@
+/**
+ * This function returns a random identifier.
+ * @returns
+ */
+const guidGenerator = () => {
+	var S4 = function () {
+		return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
+	};
+	return (
+		S4() +
+		S4() +
+		"-" +
+		S4() +
+		"-" +
+		S4() +
+		"-" +
+		S4() +
+		"-" +
+		S4() +
+		S4() +
+		S4()
+	);
+};
+
+export default guidGenerator;