Fix merge conflicts

2026-10-13 22:29:33 +00:00 · 2024-02-23 10:40:27 -08:00
parent 639c78358f c2d0ddb2fc
commit 97a7b66c6c
46 changed files with 728 additions and 308 deletions
@@ -1,7 +1,9 @@
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import Link from "next/link";
+import axios from "axios";

+import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
 import { useSendVerificationEmail } from "@app/hooks/api";

 import { Button, Input } from "../v2";
@@ -25,6 +27,7 @@ export default function EnterEmailStep({
  setEmail,
  incrementStep
 }: DownloadBackupPDFStepProps): JSX.Element {
+  const { createNotification } = useNotificationContext();
  const { mutateAsync } = useSendVerificationEmail();
  const [emailError, setEmailError] = useState(false);
  const { t } = useTranslation();
@@ -46,8 +49,18 @@ export default function EnterEmailStep({

    // If everything is correct, go to the next step
    if (!emailCheckBool) {
-      await mutateAsync({ email });
-      incrementStep();
+      try {
+        await mutateAsync({ email });
+        incrementStep();
+      } catch(e) {
+        if (axios.isAxiosError(e)) {
+          const { message = "Something went wrong" } = e.response?.data as { message: string};
+          createNotification({
+            type: "error",
+            text:  message
+          })
+        }
+      }
    }
  };

@@ -33,9 +33,7 @@ export const UpgradeOverlay = () => {
    return null;
  }

-  // for non admin this would throw an error
-  // so no need to render
-  return !isUpgradeStatusLoading && isUpgrading ? ( // isUpgrading
+  return !isUpgradeStatusLoading && isUpgrading ? (
    <div className="absolute top-0 left-0 z-50 flex h-screen w-screen items-center justify-center bg-bunker-500 bg-opacity-80">
      <Spinner size="lg" className="text-primary" />
      <div className="ml-4 flex flex-col space-y-1">
@@ -2,6 +2,7 @@ import { useCallback, useState } from "react";
 import { useRouter } from "next/router";
 import { faWarning } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { twMerge } from "tailwind-merge";

 import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
 import { useProjectPermission } from "@app/context";
@@ -10,6 +11,7 @@ import { Workspace } from "@app/hooks/api/types";
 import { ProjectVersion } from "@app/hooks/api/workspace/types";

 import { Button } from "../Button";
+import { Tooltip } from "../Tooltip";

 export type UpgradeProjectAlertProps = {
  project: Workspace;
@@ -83,20 +85,44 @@ export const UpgradeProjectAlert = ({ project }: UpgradeProjectAlertProps): JSX.
      projectStatus?.status !== "FAILED");

  if (project.version !== ProjectVersion.V1) return null;
-  if (membership.role !== "admin") return null;

  return (
-    <div className="mt-4 flex w-full flex-row items-center rounded-md border border-primary-600/70 bg-primary/[.07] p-4 text-base text-white">
+    <div
+      className={twMerge(
+        "mt-4 flex w-full flex-row items-center rounded-md border border-primary-600/70 bg-primary/[.07] p-4 text-base text-white",
+        membership.role !== "admin" && "opacity-80"
+      )}
+    >
      <FontAwesomeIcon icon={faWarning} className="pr-6 text-6xl text-white/80" />
      <div className="flex w-full flex-col text-sm">
        <span className="mb-2 text-lg font-semibold">Upgrade your project</span>
-        Upgrade your project version to continue receiving the latest improvements and patches.
+        {membership.role === "admin" ? (
+          <p>
+            Upgrade your project version to continue receiving the latest improvements and patches.
+          </p>
+        ) : (
+          <p>
+            <span className="font-bold">Please ask a project admin to upgrade the project.</span>
+            <br />
+            Upgrading the project version is required to continue receiving the latest improvements
+            and patches.
+          </p>
+        )}
        {currentStatus && <p className="mt-2 opacity-80">Status: {currentStatus}</p>}
      </div>
      <div className="my-2">
-        <Button isLoading={isLoading} isDisabled={isLoading} onClick={onUpgradeProject}>
-          Upgrade
-        </Button>
+        <Tooltip
+          className={twMerge(membership.role === "admin" && "hidden")}
+          content="You need to be an admin to upgrade the project."
+        >
+          <Button
+            isLoading={isLoading}
+            isDisabled={isLoading || membership.role !== "admin"}
+            onClick={onUpgradeProject}
+          >
+            Upgrade
+          </Button>
+        </Tooltip>
      </div>
    </div>
  );
@@ -1,6 +1,7 @@
 export type TServerConfig = {
  initialized: boolean;
  allowSignUp: boolean;
+  allowedSignUpDomain?: string | null;
  isMigrationModeOn?: boolean;
 };

@@ -2,7 +2,6 @@ export type ServerStatus = {
  date: string;
  message: string;
  emailConfigured: boolean;
-  inviteOnlySignup: boolean;
  secretScanningConfigured: boolean
  redisConfigured: boolean
-};
+};
@@ -2,7 +2,7 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 import crypto from "crypto";

-import { useState } from "react";
+import { useEffect, useState } from "react";
 import Head from "next/head";
 import Image from "next/image";
 import Link from "next/link";
@@ -22,6 +22,7 @@ import { deriveArgonKey } from "@app/components/utilities/cryptography/crypto";
 import issueBackupKey from "@app/components/utilities/cryptography/issueBackupKey";
 import { saveTokenToLocalStorage } from "@app/components/utilities/saveTokenToLocalStorage";
 import SecurityClient from "@app/components/utilities/SecurityClient";
+import { useServerConfig } from "@app/context";
 import { completeAccountSignupInvite, verifySignupInvite } from "@app/hooks/api/auth/queries";
 import { fetchOrganizations } from "@app/hooks/api/organization/queries";

@@ -56,6 +57,13 @@ export default function SignupInvite() {
  const token = parsedUrl.token as string;
  const organizationId = parsedUrl.organization_id as string;
  const email = (parsedUrl.to as string)?.replace(" ", "+").trim();
+  const { config } = useServerConfig();
+
+  useEffect(() => {
+    if (!config.allowSignUp) {
+      router.push("/login");
+    }
+  }, [config.allowSignUp]);

  // Verifies if the information that the users entered (name, workspace) is there, and if the password matched the criteria.
  const signupErrorCheck = async () => {
@@ -141,10 +141,10 @@ export const OrgMembersTable = ({ handlePopUpOpen, setCompleteInviteLink }: Prop
    () =>
      members?.filter(
        ({ user: u, inviteEmail }) =>
-          u?.firstName?.toLowerCase().includes(searchMemberFilter) ||
-          u?.lastName?.toLowerCase().includes(searchMemberFilter) ||
-          u?.email?.toLowerCase().includes(searchMemberFilter) ||
-          inviteEmail?.includes(searchMemberFilter)
+          u?.firstName?.toLowerCase().includes(searchMemberFilter.toLowerCase()) ||
+          u?.lastName?.toLowerCase().includes(searchMemberFilter.toLowerCase()) ||
+          u?.email?.toLowerCase().includes(searchMemberFilter.toLowerCase()) ||
+          inviteEmail?.includes(searchMemberFilter.toLowerCase())
      ),
    [members, searchMemberFilter]
  );
@@ -218,10 +218,10 @@ export const MemberListTab = () => {
    () =>
      members?.filter(
        ({ user: u, inviteEmail }) =>
-          u?.firstName?.toLowerCase().includes(searchMemberFilter) ||
-          u?.lastName?.toLowerCase().includes(searchMemberFilter) ||
-          u?.email?.toLowerCase().includes(searchMemberFilter) ||
-          inviteEmail?.includes(searchMemberFilter)
+          u?.firstName?.toLowerCase().includes(searchMemberFilter.toLowerCase()) ||
+          u?.lastName?.toLowerCase().includes(searchMemberFilter.toLowerCase()) ||
+          u?.email?.toLowerCase().includes(searchMemberFilter.toLowerCase()) ||
+          inviteEmail?.includes(searchMemberFilter.toLowerCase())
      ),
    [members, searchMemberFilter]
  );
@@ -29,7 +29,7 @@ import {
  Tooltip,
  Tr
 } from "@app/components/v2";
-// import { UpgradeProjectAlert } from "@app/components/v2/UpgradeProjectAlert";
+import { UpgradeProjectAlert } from "@app/components/v2/UpgradeProjectAlert";
 import { useOrganization, useWorkspace } from "@app/context";
 import {
  useCreateFolder,
@@ -40,8 +40,8 @@ import {
  useGetUserWsKey,
  useUpdateSecretV3
 } from "@app/hooks/api";
+import { ProjectVersion } from "@app/hooks/api/workspace/types";

-// import { ProjectVersion } from "@app/hooks/api/workspace/types";
 import { FolderBreadCrumbs } from "./components/FolderBreadCrumbs";
 import { ProjectIndexSecretsSection } from "./components/ProjectIndexSecretsSection";
 import { SecretOverviewFolderRow } from "./components/SecretOverviewFolderRow";
@@ -274,60 +274,65 @@ export const SecretOverviewPage = () => {
      <div className="relative right-5 ml-4">
        <NavHeader pageName={t("dashboard.title")} isProjectRelated />
      </div>
-      <div className="mt-6">
-        <p className="text-3xl font-semibold text-bunker-100">Secrets Overview</p>
-        <p className="text-md text-bunker-300">
-          Inject your secrets using
-          <a
-            className="ml-1 text-mineshaft-300 underline decoration-primary-800 underline-offset-4 duration-200 hover:text-mineshaft-100 hover:decoration-primary-600"
-            href="https://infisical.com/docs/cli/overview"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Infisical CLI
-          </a>
-          ,
-          <a
-            className="ml-1 text-mineshaft-300 underline decoration-primary-800 underline-offset-4 duration-200 hover:text-mineshaft-100 hover:decoration-primary-600"
-            href="https://infisical.com/docs/documentation/getting-started/api"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Infisical API
-          </a>
-          ,
-          <a
-            className="ml-1 text-mineshaft-300 underline decoration-primary-800 underline-offset-4 duration-200 hover:text-mineshaft-100 hover:decoration-primary-600"
-            href="https://infisical.com/docs/sdks/overview"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Infisical SDKs
-          </a>
-          , and
-          <a
-            className="ml-1 text-mineshaft-300 underline decoration-primary-800 underline-offset-4 duration-200 hover:text-mineshaft-100 hover:decoration-primary-600"
-            href="https://infisical.com/docs/documentation/getting-started/introduction"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            more
-          </a>
-          .
-        </p>
-      </div>
+      <div className="space-y-8">
+        <div className="mt-6">
+          <p className="text-3xl font-semibold text-bunker-100">Secrets Overview</p>
+          <p className="text-md text-bunker-300">
+            Inject your secrets using
+            <a
+              className="ml-1 text-mineshaft-300 underline decoration-primary-800 underline-offset-4 duration-200 hover:text-mineshaft-100 hover:decoration-primary-600"
+              href="https://infisical.com/docs/cli/overview"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              Infisical CLI
+            </a>
+            ,
+            <a
+              className="ml-1 text-mineshaft-300 underline decoration-primary-800 underline-offset-4 duration-200 hover:text-mineshaft-100 hover:decoration-primary-600"
+              href="https://infisical.com/docs/documentation/getting-started/api"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              Infisical API
+            </a>
+            ,
+            <a
+              className="ml-1 text-mineshaft-300 underline decoration-primary-800 underline-offset-4 duration-200 hover:text-mineshaft-100 hover:decoration-primary-600"
+              href="https://infisical.com/docs/sdks/overview"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              Infisical SDKs
+            </a>
+            , and
+            <a
+              className="ml-1 text-mineshaft-300 underline decoration-primary-800 underline-offset-4 duration-200 hover:text-mineshaft-100 hover:decoration-primary-600"
+              href="https://infisical.com/docs/documentation/getting-started/introduction"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              more
+            </a>
+            .
+          </p>
+        </div>

+        {currentWorkspace?.version === ProjectVersion.V1 && (
+          <UpgradeProjectAlert project={currentWorkspace} />
+        )}

-      <div className="mt-8 flex items-center justify-between">
-        <FolderBreadCrumbs secretPath={secretPath} onResetSearch={handleResetSearch} />
-        <div className="w-80">
-          <Input
-            className="h-[2.3rem] bg-mineshaft-800 placeholder-mineshaft-50 duration-200 focus:bg-mineshaft-700/80"
-            placeholder="Search by secret/folder name..."
-            value={searchFilter}
-            onChange={(e) => setSearchFilter(e.target.value)}
-            leftIcon={<FontAwesomeIcon icon={faMagnifyingGlass} />}
-          />
+        <div className="flex items-center justify-between">
+          <FolderBreadCrumbs secretPath={secretPath} onResetSearch={handleResetSearch} />
+          <div className="w-80">
+            <Input
+              className="h-[2.3rem] bg-mineshaft-800 placeholder-mineshaft-50 duration-200 focus:bg-mineshaft-700/80"
+              placeholder="Search by secret/folder name..."
+              value={searchFilter}
+              onChange={(e) => setSearchFilter(e.target.value)}
+              leftIcon={<FontAwesomeIcon icon={faMagnifyingGlass} />}
+            />
+          </div>
        </div>
      </div>
      <div className="thin-scrollbar mt-4" ref={parentTableRef}>
@@ -1,7 +1,24 @@
 import { useEffect } from "react";
+import { Controller, useForm } from "react-hook-form";
 import { useRouter } from "next/router";
+import { faAt } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";

-import { ContentLoader, Switch, Tab, TabList, TabPanel, Tabs } from "@app/components/v2";
+import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import {
+  Button,
+  ContentLoader,
+  FormControl,
+  Input,
+  Select,
+  SelectItem,
+  Tab,
+  TabList,
+  TabPanel,
+  Tabs
+} from "@app/components/v2";
 import { useOrganization, useServerConfig, useUser } from "@app/context";
 import { useUpdateServerConfig } from "@app/hooks/api";

@@ -9,16 +26,47 @@ enum TabSections {
  Settings = "settings"
 }

+enum SignUpModes {
+  Disabled = "disabled",
+  Anyone = "anyone"
+}
+
+const formSchema = z.object({
+  signUpMode: z.nativeEnum(SignUpModes),
+  allowedSignUpDomain: z.string().optional().nullable()
+});
+
+type TDashboardForm = z.infer<typeof formSchema>;
 export const AdminDashboardPage = () => {
  const router = useRouter();
  const data = useServerConfig();
  const { config } = data;
+
+  const {
+    control,
+    handleSubmit,
+    watch,
+    formState: { isSubmitting, isDirty }
+  } = useForm<TDashboardForm>({
+    resolver: zodResolver(formSchema),
+    values: {
+      // eslint-disable-next-line
+      signUpMode: config.allowSignUp ? SignUpModes.Anyone : SignUpModes.Disabled,
+      allowedSignUpDomain: config.allowedSignUpDomain
+    }
+  });
+
+  const signupMode = watch("signUpMode");
+
  const { user, isLoading: isUserLoading } = useUser();
  const { orgs } = useOrganization();
-  const { mutate: updateServerConfig } = useUpdateServerConfig();
+  const { mutateAsync: updateServerConfig } = useUpdateServerConfig();
+
+  const { createNotification } = useNotificationContext();

  const isNotAllowed = !user?.superAdmin;

+  // TODO(akhilmhdh): on nextjs 14 roadmap this will be properly addressed with context split
  useEffect(() => {
    if (isNotAllowed && !isUserLoading) {
      if (orgs?.length) {
@@ -28,37 +76,115 @@ export const AdminDashboardPage = () => {
    }
  }, [isNotAllowed, isUserLoading]);

+  const onFormSubmit = async (formData: TDashboardForm) => {
+    try {
+      const { signUpMode, allowedSignUpDomain } = formData;
+      await updateServerConfig({
+        allowSignUp: signUpMode !== SignUpModes.Disabled,
+        allowedSignUpDomain: signUpMode === SignUpModes.Anyone ? allowedSignUpDomain : null
+      });
+      createNotification({
+        text: "Successfully changed sign up setting.",
+        type: "success"
+      });
+    } catch (e) {
+      console.error(e);
+      createNotification({
+        type: "error",
+        text: "Failed to update sign up setting."
+      });
+    }
+  };
+
  return (
-    <div className="container mx-auto max-w-7xl pb-12 text-white dark:[color-scheme:dark]">
-      <div className="mx-auto mb-6 w-full max-w-7xl py-6 px-6">
+    <div className="container mx-auto max-w-7xl px-4 pb-12 text-white dark:[color-scheme:dark]">
+      <div className="mx-auto mb-6 w-full max-w-7xl pt-6">
        <div className="mb-8 flex flex-col items-start justify-between text-xl">
          <h1 className="text-3xl font-semibold">Admin Dashboard</h1>
          <p className="text-base text-bunker-300">Manage your Infisical instance.</p>
        </div>
-        {isUserLoading || isNotAllowed ? (
-          <ContentLoader text={isNotAllowed ? "Redirecting to org page..." : undefined} />
-        ) : (
-          <div>
-            <Tabs defaultValue={TabSections.Settings}>
-              <TabList>
-                <div className="flex w-full flex-row border-b border-mineshaft-600">
-                  <Tab value={TabSections.Settings}>General</Tab>
-                </div>
-              </TabList>
-              <TabPanel value={TabSections.Settings}>
-                <div className="flex items-center space-x-4">
-                  <Switch
-                    id="disable-invite"
-                    isChecked={Boolean(config?.allowSignUp)}
-                    onCheckedChange={(isChecked) => updateServerConfig({ allowSignUp: isChecked })}
-                  />
-                  <div className="flex-grow">Enable signup or invite</div>
-                </div>
-              </TabPanel>
-            </Tabs>
-          </div>
-        )}
      </div>
+      {isUserLoading || isNotAllowed ? (
+        <ContentLoader text={isNotAllowed ? "Redirecting to org page..." : undefined} />
+      ) : (
+        <div>
+          <Tabs defaultValue={TabSections.Settings}>
+            <TabList>
+              <div className="flex w-full flex-row border-b border-mineshaft-600">
+                <Tab value={TabSections.Settings}>General</Tab>
+              </div>
+            </TabList>
+            <TabPanel value={TabSections.Settings}>
+              <form
+                className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4"
+                onSubmit={handleSubmit(onFormSubmit)}
+              >
+                <div className="flex justify-between">
+                  <div className="mb-4 text-xl font-semibold text-mineshaft-100">
+                    Allow user sign up
+                  </div>
+                  <Controller
+                    control={control}
+                    name="signUpMode"
+                    render={({ field: { onChange, ...field }, fieldState: { error } }) => (
+                      <FormControl
+                        className="max-w-72 w-72"
+                        errorText={error?.message}
+                        isError={Boolean(error)}
+                      >
+                        <Select
+                          className="w-72 bg-mineshaft-700"
+                          dropdownContainerClassName="bg-mineshaft-700"
+                          defaultValue={field.value}
+                          onValueChange={(e) => onChange(e)}
+                          {...field}
+                        >
+                          <SelectItem value={SignUpModes.Disabled}>Disabled</SelectItem>
+                          <SelectItem value={SignUpModes.Anyone}>Anyone</SelectItem>
+                        </Select>
+                      </FormControl>
+                    )}
+                  />
+                </div>
+                {signupMode === "anyone" && (
+                  <div className="mt-4 flex items-center justify-between">
+                    <div className="mb-4 flex text-mineshaft-100">
+                      Restrict sign up by email domain(s)
+                    </div>
+                    <Controller
+                      control={control}
+                      defaultValue=""
+                      name="allowedSignUpDomain"
+                      render={({ field, fieldState: { error } }) => (
+                        <FormControl
+                          label="Leave blank to allow any email domains"
+                          className="w-72"
+                          isError={Boolean(error)}
+                          errorText={error?.message}
+                        >
+                          <Input
+                            {...field}
+                            value={field.value || ""}
+                            placeholder="gmail.com, aws.com, redhat.com"
+                            leftIcon={<FontAwesomeIcon icon={faAt} />}
+                          />
+                        </FormControl>
+                      )}
+                    />
+                  </div>
+                )}
+                <Button
+                  type="submit"
+                  isLoading={isSubmitting}
+                  isDisabled={isSubmitting || !isDirty}
+                >
+                  Save
+                </Button>
+              </form>
+            </TabPanel>
+          </Tabs>
+        </div>
+      )}
    </div>
  );
 };