+
+ );
+ }
+ return (
+ {label}
+ {text &&{text}
} + onChangeHandler(e.target.value)} + type={type} + placeholder={placeholder} + value={value} + required={isRequired} + className="text-md w-full min-w-16 rounded-md border border-gray-600 bg-bunker-800 p-2 text-gray-400 outline-none" + name={name} + readOnly + autoComplete={autoComplete} + id={id} + /> +
+
+ );
+};
+
+export default memo(InputField);
diff --git a/frontend-v2/src/components/features/TtlFormLabel.tsx b/frontend-v2/src/components/features/TtlFormLabel.tsx
new file mode 100644
index 000000000..02f162200
--- /dev/null
+++ b/frontend-v2/src/components/features/TtlFormLabel.tsx
@@ -0,0 +1,35 @@
+import { faQuestionCircle } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { FormLabel, Tooltip } from "../v2";
+
+// To give users example of possible values of TTL
+export const TtlFormLabel = ({ label }: { label: string }) => (
+
+
+ {label}
+
+ onChangeHandler(e.target.value)}
+ type={passwordVisible === false ? type : "text"}
+ placeholder={placeholder}
+ value={value}
+ required={isRequired}
+ className={`${
+ blurred
+ ? "text-bunker-800 focus:text-gray-400 active:text-gray-400 group-hover:text-gray-400"
+ : ""
+ } ${
+ error ? "focus:ring-red/50" : "focus:ring-primary/50"
+ } text-md peer relative w-full min-w-16 rounded-md bg-mineshaft-900 p-2 text-gray-400 outline-none duration-200 focus:ring-4`}
+ name={name}
+ spellCheck="false"
+ autoComplete={autoComplete}
+ id={id}
+ />
+ {label?.includes("Password") && (
+
+ )}
+ {blurred && (
+
+ {error &&
+
+ {value
+ .split("")
+ .slice(0, 54)
+ .map(() => (
+
+ )}
+ {/* {error && (
+
+
+ )} */}
+ {errorText}
} +
+
+
+ More
+
+
+ }
+ >
+
+);
diff --git a/frontend-v2/src/components/features/index.tsx b/frontend-v2/src/components/features/index.tsx
new file mode 100644
index 000000000..f00724b65
--- /dev/null
+++ b/frontend-v2/src/components/features/index.tsx
@@ -0,0 +1 @@
+export { TtlFormLabel } from "./TtlFormLabel";
diff --git a/frontend-v2/src/components/integrations/NoEnvironmentsBanner.tsx b/frontend-v2/src/components/integrations/NoEnvironmentsBanner.tsx
new file mode 100644
index 000000000..3fe51cda8
--- /dev/null
+++ b/frontend-v2/src/components/integrations/NoEnvironmentsBanner.tsx
@@ -0,0 +1,29 @@
+import { useNavigate } from "@tanstack/react-router";
+
+import { Button } from "../v2";
+
+interface IProps {
+ projectId: string;
+}
+
+export const NoEnvironmentsBanner = ({ projectId }: IProps) => {
+ const navigate = useNavigate();
+
+ return (
+
+
+ );
+};
diff --git a/frontend-v2/src/components/license/UpgradePlanModal/UpgradePlanModal.tsx b/frontend-v2/src/components/license/UpgradePlanModal/UpgradePlanModal.tsx
new file mode 100644
index 000000000..09af0139c
--- /dev/null
+++ b/frontend-v2/src/components/license/UpgradePlanModal/UpgradePlanModal.tsx
@@ -0,0 +1,71 @@
+import { useOrganization, useSubscription } from "@app/context";
+import { useGetOrgTrialUrl } from "@app/hooks/api";
+
+import { Button } from "../../v2/Button";
+import { Modal, ModalContent } from "../../v2/Modal";
+
+type Props = {
+ isOpen?: boolean;
+ onOpenChange?: (isOpen: boolean) => void;
+ text: string;
+};
+
+export const UpgradePlanModal = ({ text, isOpen, onOpenChange }: Props): JSX.Element => {
+ const { subscription } = useSubscription();
+ const { currentOrg } = useOrganization();
+ const { mutateAsync, isLoading } = useGetOrgTrialUrl();
+ const link =
+ subscription && subscription.slug !== null
+ ? `/org/${currentOrg?.id}/billing`
+ : "https://infisical.com/scheduledemo";
+
+ const handleUpgradeBtnClick = async () => {
+ try {
+ if (!subscription || !currentOrg) return;
+
+ if (!subscription.has_used_trial) {
+ // direct user to start pro trial
+
+ const url = await mutateAsync({
+ orgId: currentOrg.id,
+ success_url: window.location.href
+ });
+
+ window.location.href = url;
+ } else {
+ // direct user to upgrade their plan
+ window.location.href = link;
+ }
+ } catch (err) {
+ console.error(err);
+ }
+ };
+
+ return (
+
+
+ No environments in your project was found
+
+
+ + In order to use integrations, you need to create at least one environment in your project. +
+
+
+
+ {text}
++ Upgrade and get access to this, as well as to other powerful enhancements. +
+
+
+
+
+
+
+ );
+};
+
+export default TotpRegistration;
diff --git a/frontend-v2/src/components/navigation/NavHeader.tsx b/frontend-v2/src/components/navigation/NavHeader.tsx
new file mode 100644
index 000000000..7c1341919
--- /dev/null
+++ b/frontend-v2/src/components/navigation/NavHeader.tsx
@@ -0,0 +1,220 @@
+import { ParsedUrlQuery } from "querystring";
+
+import { useState } from "react";
+import { Link, useLocation, useNavigate } from "@tanstack/react-router";
+import { faAngleRight, faCheck, faCopy, faLock } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { twMerge } from "tailwind-merge";
+
+import { useOrganization, useWorkspace } from "@app/context";
+import { useToggle } from "@app/hooks";
+
+import { createNotification } from "../notifications";
+import { IconButton, Select, SelectItem, Tooltip } from "../v2";
+
+type Props = {
+ pageName: string;
+ isProjectRelated?: boolean;
+ isOrganizationRelated?: boolean;
+ currentEnv?: string;
+ userAvailableEnvs?: any[];
+ onEnvChange?: (slug: string) => void;
+ secretPath?: string;
+ isFolderMode?: boolean;
+ isProtectedBranch?: boolean;
+ protectionPolicyName?: string;
+};
+
+// TODO: make links clickable and clean up
+
+/**
+ * This is the component at the top of almost every page.
+ * It shows how to navigate to a certain page.
+ * It future these links should also be clickable and hoverable
+ * @param {object} obj
+ * @param {string} obj.pageName - Name of the page
+ * @param {boolean} obj.isProjectRelated - whether or not this page is related to project (determine if it's 2 or 3 navigation steps)
+ * @param {boolean} obj.isOrganizationRelated - whether or not this page is related to organization (determine if it's 2 or 3 navigation steps)
+ * @param {string} obj.currentEnv - current environment inside a project
+ * @param {string} obj.userAvailableEnvs - environments that are available to a user in this project (used for the dropdown)
+ * @param {string} obj.onEnvChange - the action that happens when an env is changed
+ * @returns
+ */
+// TODO(akhilmhdh): simply this header and nav system later
+export default function NavHeader({
+ pageName,
+ isProjectRelated,
+ isOrganizationRelated,
+ currentEnv,
+ userAvailableEnvs = [],
+ onEnvChange,
+ isFolderMode,
+ secretPath = "/",
+ isProtectedBranch = false,
+ protectionPolicyName
+}: Props): JSX.Element {
+ const { currentWorkspace } = useWorkspace();
+ const { currentOrg } = useOrganization();
+
+ const [isCopied, { timedToggle: toggleIsCopied }] = useToggle(false);
+ const [isHoveringCopyButton, setIsHoveringCopyButton] = useState(false);
+
+ const navigate = useNavigate();
+
+ const secretPathSegments = secretPath.split("/").filter(Boolean);
+
+ return (
+
+ 1. Download a two-step verification app (Duo, Google Authenticator, etc.) and scan the QR
+ code.
+
+
+ 
+
+
+
+
+
+ )}
+
+ );
+}
diff --git a/frontend-v2/src/components/navigation/RegionSelect.tsx b/frontend-v2/src/components/navigation/RegionSelect.tsx
new file mode 100644
index 000000000..a4a8b80fc
--- /dev/null
+++ b/frontend-v2/src/components/navigation/RegionSelect.tsx
@@ -0,0 +1,148 @@
+import { faCheck } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { Modal, ModalContent, ModalTrigger, Select, SelectItem } from "@app/components/v2";
+import { useLocation, useNavigate } from "@tanstack/react-router";
+
+enum Region {
+ US = "us",
+ EU = "eu"
+}
+
+const regions = [
+ {
+ value: Region.US,
+ label: "United States",
+ location: "Virginia, USA",
+ flag: (
+
+ )
+ },
+ {
+ value: Region.EU,
+ label: "Europe",
+ location: "Frankfurt, Germany",
+ flag: (
+
+ )
+ }
+];
+
+export const RegionSelect = () => {
+ const navigate = useNavigate();
+ const location = useLocation();
+
+ const handleRegionSelect = (value: Region) => {
+ navigate({ to: `https://${value}.infisical.com/${location.pathname}` });
+ };
+
+ const shouldDisplay =
+ window.location.origin.includes("https://app.infisical.com") ||
+ window.location.origin.includes("https://us.infisical.com") ||
+ window.location.origin.includes("https://eu.infisical.com") ||
+ window.location.origin.includes("http://localhost:8080");
+
+ // only display region select for cloud
+ if (!shouldDisplay) return null;
+
+ const [subdomain] = window.location.host.split(".");
+
+ // default to US if not eu
+ const currentRegion = subdomain === Region.EU ? regions[1] : regions[0];
+
+ return (
+
+ {currentOrg?.name?.charAt(0)}
+
+
+ {currentOrg?.name}
+
+ {isProjectRelated && (
+ <>
+
+ {currentWorkspace?.name}
+
+
+ )}
+ {isOrganizationRelated && (
+ <>
+ Organization Settings
+
+ )}
+ {pageName}
+ )}
+ {currentEnv && secretPath === "/" && (
+ <>
+
+
+
+
+
+
+ )}
+ {isFolderMode && Boolean(secretPathSegments.length) && (
+
+ )}
+ {isFolderMode &&
+ secretPathSegments?.map((folderName, index) => {
+ const query: ParsedUrlQuery & { secretPath: string } = {
+ ...navigate.query,
+ secretPath: `/${secretPathSegments.slice(0, index + 1).join("/")}`
+ };
+
+ return (
+
+
+ );
+ })}
+ {isProtectedBranch && (
+
+
+ {folderName}
+
+
+ setIsHoveringCopyButton(true)}
+ onMouseLeave={() => setIsHoveringCopyButton(false)}
+ onClick={() => {
+ if (isCopied) return;
+
+ navigator.clipboard.writeText(query.secretPath);
+
+ createNotification({
+ text: "Copied secret path to clipboard",
+ type: "info"
+ });
+
+ toggleIsCopied(2000);
+ }}
+ className="hover:bg-bunker-100/10"
+ >
+
+
+
+ ) : (
+
+
+ {folderName}
+
+
+ )}
+
+
+
+
+
+
+
+ {regions.map(({ value, label, location: regionLocation, flag }) => (
+
+
+
+ );
+};
diff --git a/frontend-v2/src/components/notifications/Notifications.tsx b/frontend-v2/src/components/notifications/Notifications.tsx
new file mode 100644
index 000000000..fdc35b9af
--- /dev/null
+++ b/frontend-v2/src/components/notifications/Notifications.tsx
@@ -0,0 +1,79 @@
+import { ReactNode } from "react";
+import { Id, toast, ToastContainer, ToastOptions, TypeOptions } from "react-toastify";
+import { faCopy, IconDefinition } from "@fortawesome/free-solid-svg-icons";
+import { twMerge } from "tailwind-merge";
+
+import { CopyButton } from "../v2/CopyButton";
+
+export type TNotification = {
+ title?: string;
+ text: ReactNode;
+ children?: ReactNode;
+ callToAction?: ReactNode;
+ copyActions?: { icon?: IconDefinition; value: string; name: string; label?: string }[];
+};
+
+export const NotificationContent = ({
+ title,
+ text,
+ children,
+ callToAction,
+ copyActions
+}: TNotification) => {
+ return (
+
+
+ ))}
+ + {flag} + {value.toUpperCase()} Region +
+-
+
-
+
Fastest + option if you are based in {value === Region.US ? "the" : ""} {label} +
+ -
+
Data + storage compliance for this region +
+ -
+
Hosted + in {regionLocation} +
+
+ {title &&
+ );
+};
+
+export const createNotification = (
+ myProps: TNotification & { type?: TypeOptions },
+ toastProps: ToastOptions = {}
+): Id =>
+ toast({title}
}
+ {text}
+ {children && {children}
}
+ {(callToAction || copyActions) && (
+
+ {callToAction}
+
+ {copyActions && (
+
+ )}
+
+ {copyActions.map((action) => (
+
+ )}
+
+ {action.label && (
+ {action.label}
+ )}
+
+ ))}
+
+
+ );
+};
diff --git a/frontend-v2/src/components/permissions/OrgPermissionCan.tsx b/frontend-v2/src/components/permissions/OrgPermissionCan.tsx
new file mode 100644
index 000000000..006d43232
--- /dev/null
+++ b/frontend-v2/src/components/permissions/OrgPermissionCan.tsx
@@ -0,0 +1,49 @@
+import { FunctionComponent, ReactNode } from "react";
+import { BoundCanProps, Can } from "@casl/react";
+
+import { TOrgPermission, useOrgPermission } from "@app/context/OrgPermissionContext";
+
+import { Tooltip } from "../v2";
+
+type Props = {
+ label?: ReactNode;
+ // this prop is used when there exist already a tooltip as helper text for users
+ // so when permission is allowed same tooltip will be reused to show helpertext
+ renderTooltip?: boolean;
+ allowedLabel?: string;
+} & BoundCanPropsA glob pattern uses wildcards to match resources or paths.
+
+
+ setPattern(e.target.value)} />
+
+
+
+
+ setText(e.target.value)} />
+
+
+
+
+ );
+};
diff --git a/frontend-v2/src/components/permissions/ProjectPermissionCan.tsx b/frontend-v2/src/components/permissions/ProjectPermissionCan.tsx
new file mode 100644
index 000000000..4fc5acde9
--- /dev/null
+++ b/frontend-v2/src/components/permissions/ProjectPermissionCan.tsx
@@ -0,0 +1,52 @@
+import { FunctionComponent, ReactNode } from "react";
+import { AbilityTuple, MongoAbility } from "@casl/ability";
+import { Can } from "@casl/react";
+
+import { ProjectPermissionSet, useProjectPermission } from "@app/context/ProjectPermissionContext";
+
+import { Tooltip } from "../v2/Tooltip";
+
+type Props
+
+
+
+
+
+
+
+ Access Restricted
+ {children || (
+
+ Your role has limited permissions, please
contact your administrator to gain + access +
+ )}
+ contact your administrator to gain + access +
+
+ );
+}
diff --git a/frontend-v2/src/components/signup/DonwloadBackupPDFStep.tsx b/frontend-v2/src/components/signup/DonwloadBackupPDFStep.tsx
new file mode 100644
index 000000000..b11ca8bd2
--- /dev/null
+++ b/frontend-v2/src/components/signup/DonwloadBackupPDFStep.tsx
@@ -0,0 +1,93 @@
+import { useTranslation } from "react-i18next";
+import { faWarning } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { useToggle } from "@app/hooks";
+import { generateUserBackupKey } from "@app/lib/crypto";
+
+import { createNotification } from "../notifications";
+import { generateBackupPDFAsync } from "../utilities/generateBackupPDF";
+import { Button } from "../v2";
+
+interface DownloadBackupPDFStepProps {
+ incrementStep: () => void;
+ email: string;
+ password: string;
+ name: string;
+}
+
+/**
+ * This is the step of the signup flow where the user downloads the backup pdf
+ * @param {object} obj
+ * @param {function} obj.incrementStep - function that moves the user on to the next stage of signup
+ * @param {string} obj.email - user's email
+ * @param {string} obj.password - user's password
+ * @param {string} obj.name - user's name
+ * @returns
+ */
+export default function DonwloadBackupPDFStep({
+ incrementStep,
+ email,
+ password,
+ name
+}: DownloadBackupPDFStepProps): JSX.Element {
+ const { t } = useTranslation();
+
+ const [isLoading, setIsLoading] = useToggle();
+
+ const handleBackupKeyGenerate = async () => {
+ try {
+ setIsLoading.on();
+ const generatedKey = await generateUserBackupKey(email, password);
+ await generateBackupPDFAsync({
+ generatedKey,
+ personalEmail: email,
+ personalName: name
+ });
+ incrementStep();
+ } catch (err) {
+ console.log(err);
+ createNotification({
+ type: "error",
+ text: "Failed to generate backup key"
+ });
+ } finally {
+ setIsLoading.off();
+ }
+ };
+
+ return (
+ {t("signup.step2-message")}
+{email}
+
+
+
+
+ {codeError &&
+
+
+
+
+
+
+
+ {t("signup.step2-resend-alert")}
+
+
+
+
+ {t("signup.step2-spam-alert")}
+
+
+ );
+}
diff --git a/frontend-v2/src/components/signup/EnterEmailStep.tsx b/frontend-v2/src/components/signup/EnterEmailStep.tsx
new file mode 100644
index 000000000..689dad2f8
--- /dev/null
+++ b/frontend-v2/src/components/signup/EnterEmailStep.tsx
@@ -0,0 +1,118 @@
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Link } from "@tanstack/react-router";
+import axios from "axios";
+
+import { createNotification } from "@app/components/notifications";
+import { useSendVerificationEmail } from "@app/hooks/api";
+
+import { Button, Input } from "../v2";
+
+interface DownloadBackupPDFStepProps {
+ incrementStep: () => void;
+ email: string;
+ setEmail: (value: string) => void;
+}
+
+/**
+ * This is the first step of the sign up process - users need to enter their email
+ * @param {object} obj
+ * @param {string} obj.email - email of a user signing up
+ * @param {function} obj.setEmail - funciton that manages the state of the email variable
+ * @param {function} obj.incrementStep - function to go to the next step of the signup flow
+ * @returns
+ */
+export default function EnterEmailStep({
+ email,
+ setEmail,
+ incrementStep
+}: DownloadBackupPDFStepProps): JSX.Element {
+ const { mutateAsync, isLoading } = useSendVerificationEmail();
+ const [emailError, setEmailError] = useState(false);
+ const { t } = useTranslation();
+
+ /**
+ * Verifies if the entered email "looks" correct
+ */
+ const emailCheck = async () => {
+ let emailCheckBool = false;
+ if (!email) {
+ setEmailError(true);
+ emailCheckBool = true;
+ } else if (!email.includes("@") || !email.includes(".") || !/[a-z]/.test(email)) {
+ setEmailError(true);
+ emailCheckBool = true;
+ } else {
+ setEmailError(false);
+ }
+
+ // If everything is correct, go to the next step
+ if (!emailCheckBool) {
+ try {
+ await mutateAsync({ email: email.toLowerCase() });
+ setEmail(email.toLowerCase());
+ incrementStep();
+ } catch (e) {
+ if (axios.isAxiosError(e)) {
+ const { message = "Something went wrong" } = e.response?.data as { message: string };
+ createNotification({
+ type: "error",
+ text: message
+ });
+ }
+ }
+ }
+ };
+
+ return (
+
+
+
+
+
+ {t("signup.step4-description1")} {t("signup.step4-description3")}
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/frontend-v2/src/components/signup/InitialSignupStep.tsx b/frontend-v2/src/components/signup/InitialSignupStep.tsx
new file mode 100644
index 000000000..c4b6ce95e
--- /dev/null
+++ b/frontend-v2/src/components/signup/InitialSignupStep.tsx
@@ -0,0 +1,105 @@
+import { useTranslation } from "react-i18next";
+import { Link } from "@tanstack/react-router";
+import { faGithub, faGitlab, faGoogle } from "@fortawesome/free-brands-svg-icons";
+import { faEnvelope } from "@fortawesome/free-regular-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { RegionSelect } from "@app/components/navigation/RegionSelect";
+import { useServerConfig } from "@app/context";
+import { LoginMethod } from "@app/hooks/api/admin/types";
+
+import { Button } from "../v2";
+
+export default function InitialSignupStep({
+ setIsSignupWithEmail
+}: {
+ setIsSignupWithEmail: (value: boolean) => void;
+}) {
+ const { t } = useTranslation();
+ const { config } = useServerConfig();
+
+ const shouldDisplaySignupMethod = (method: LoginMethod) =>
+ !config.enabledLoginMethods || config.enabledLoginMethods.includes(method);
+
+ return (
+
+
+ + {t("signup.step1-start")} +
+
+ setEmail(e.target.value)}
+ value={email}
+ isRequired
+ autoComplete="username"
+ className="h-12"
+ />
+ {emailError && (
+
+ + Please enter a valid email. +
+ )} +
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/frontend-v2/src/components/signup/TeamInviteStep.tsx b/frontend-v2/src/components/signup/TeamInviteStep.tsx
new file mode 100644
index 000000000..60276d217
--- /dev/null
+++ b/frontend-v2/src/components/signup/TeamInviteStep.tsx
@@ -0,0 +1,102 @@
+import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { useRouter } from "next/router";
+
+import { useAddUsersToOrg } from "@app/hooks/api";
+import { useFetchServerStatus } from "@app/hooks/api/serverDetails";
+import { usePopUp } from "@app/hooks/usePopUp";
+
+import { Button, EmailServiceSetupModal } from "../v2";
+
+/**
+ * This is the last step of the signup flow. People can optionally invite their teammates here.
+ */
+export default function TeamInviteStep(): JSX.Element {
+ const { t } = useTranslation();
+ const router = useRouter();
+ const [emails, setEmails] = useState("");
+ const { data: serverDetails } = useFetchServerStatus();
+
+ const { mutateAsync } = useAddUsersToOrg();
+ const { handlePopUpToggle, popUp, handlePopUpOpen } = usePopUp(["setUpEmail"] as const);
+
+ // Redirect user to the getting started page
+ const redirectToHome = async () => {
+ router.push(`/org/${localStorage.getItem("orgData.id")}/overview`);
+ };
+
+ const inviteUsers = async ({ emails: inviteEmails }: { emails: string }) => {
+ inviteEmails
+ .split(",")
+ .map((email) => email.trim())
+ .map(async (email) => {
+ mutateAsync({
+ inviteeEmails: [email],
+ organizationId: String(localStorage.getItem("orgData.id")),
+ organizationRoleSlug: "member"
+ });
+ });
+
+ await redirectToHome();
+ };
+
+ return (
+ + {t("signup.initial-title")} +
+
+
+
+ )}
+ {shouldDisplaySignupMethod(LoginMethod.GITHUB) && (
+
+
+
+ )}
+ {shouldDisplaySignupMethod(LoginMethod.GITLAB) && (
+
+
+
+ )}
+ {shouldDisplaySignupMethod(LoginMethod.EMAIL) && (
+
+
+
+ )}
+
+ {t("signup.create-policy")}
+
+
+
+
+ {t("signup.already-have-account")}
+
+
+
+
+
+ {t("signup.step5-invite-team")} +
++ {t("signup.step5-subtitle")} +
+
+
+
+ Emails
+
+