Merge branch 'heads/main' into overview-page-enchanced

2026-10-16 01:05:40 +00:00 · 2024-03-12 11:11:20 +05:30
parent 624fb3d46a 635948c4f4
commit e5d4328e2a
111 changed files with 2177 additions and 747 deletions
@@ -0,0 +1,229 @@
+import { useEffect } from "react";
+import { Controller, useForm } from "react-hook-form"; 
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+
+import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import {
+    Button,
+    FormControl,
+    Input,
+    Modal,
+    ModalContent,
+    TextArea
+} from "@app/components/v2";
+import { useOrganization } from "@app/context";
+import {
+    useCreateLDAPConfig,
+    useGetLDAPConfig,
+    useUpdateLDAPConfig
+} from "@app/hooks/api";
+import { UsePopUpState } from "@app/hooks/usePopUp";
+
+const LDAPFormSchema = z.object({
+    url: z.string().min(1, "URL is requiredx"),
+    bindDN: z.string().min(1, "Bind DN is requiredx"),
+    bindPass: z.string().min(1, "Bind Pass is required"),
+    searchBase: z.string().min(1, "Search Base is required"),
+    caCert: z.string().optional()
+});
+
+export type TLDAPFormData = z.infer<typeof LDAPFormSchema>;
+
+type Props = {
+  popUp: UsePopUpState<["addLDAP"]>;
+  handlePopUpClose: (popUpName: keyof UsePopUpState<["addLDAP"]>) => void;
+  handlePopUpToggle: (popUpName: keyof UsePopUpState<["addLDAP"]>, state?: boolean) => void;
+};
+
+export const LDAPModal = ({
+    popUp,
+    handlePopUpClose,
+    handlePopUpToggle
+}: Props) => {
+    const { currentOrg } = useOrganization();
+    const { createNotification } = useNotificationContext();
+    const { mutateAsync: createMutateAsync, isLoading: createIsLoading } = useCreateLDAPConfig();
+    const { mutateAsync: updateMutateAsync, isLoading: updateIsLoading } = useUpdateLDAPConfig();
+    const { data } = useGetLDAPConfig(currentOrg?.id?? "");
+    
+    const {
+        control,
+        handleSubmit,
+        reset,
+    } = useForm<TLDAPFormData>({
+        resolver: zodResolver(LDAPFormSchema)
+    })
+    
+    useEffect(() => {
+        if (data) {
+            reset({
+                url: data?.url ?? "",
+                bindDN: data?.bindDN ?? "",
+                bindPass: data?.bindPass ?? "",
+                searchBase: data?.searchBase ?? "",
+                caCert: data?.caCert ?? ""
+            });
+        }
+    }, [data]);
+    
+    const onSSOModalSubmit = async ({
+        url,
+        bindDN,
+        bindPass,
+        searchBase,
+        caCert
+    }: TLDAPFormData) => {
+        try {
+            if (!currentOrg) return;
+            
+            if (!data) {
+                await createMutateAsync({
+                    organizationId: currentOrg.id,
+                    isActive: false,
+                    url,
+                    bindDN,
+                    bindPass,
+                    searchBase,
+                    caCert
+                });
+            } else {
+                await updateMutateAsync({
+                    organizationId: currentOrg.id,
+                    isActive: false,
+                    url,
+                    bindDN,
+                    bindPass,
+                    searchBase,
+                    caCert
+                });
+            }
+
+            handlePopUpClose("addLDAP");
+
+            createNotification({
+                text: `Successfully ${!data ? "added" : "updated"} LDAP configuration`,
+                type: "success"
+            });
+        } catch (err) {
+            console.error(err);
+            createNotification({
+                text: `Failed to ${!data ? "add" : "update"} LDAP configuration`,
+                type: "error"
+            });
+        }
+    }
+
+    return (
+        <Modal
+            isOpen={popUp?.addLDAP?.isOpen}
+                onOpenChange={(isOpen) => {
+                handlePopUpToggle("addLDAP", isOpen);
+                reset();
+            }}
+        >
+            <ModalContent title="Add LDAP">
+                <form onSubmit={handleSubmit(onSSOModalSubmit)}>
+                    <Controller
+                            control={control}
+                            name="url"
+                            render={({ field, fieldState: { error } }) => (
+                                <FormControl
+                                    label="URL"
+                                    errorText={error?.message}
+                                    isError={Boolean(error)}
+                                >
+                                    <Input 
+                                        {...field} 
+                                        placeholder="ldaps://ldap.myorg.com:636"
+                                    />
+                                </FormControl>
+                            )}
+                        />
+                        <Controller
+                            control={control}
+                            name="bindDN"
+                            render={({ field, fieldState: { error } }) => (
+                                <FormControl
+                                    label="Bind DN"
+                                    errorText={error?.message}
+                                    isError={Boolean(error)}
+                                >
+                                    <Input 
+                                        {...field} 
+                                        placeholder="cn=infisical,ou=Users,dc=example,dc=com"
+                                    />
+                                </FormControl>
+                            )}
+                        />
+                        <Controller
+                            control={control}
+                            name="bindPass"
+                            render={({ field, fieldState: { error } }) => (
+                                <FormControl
+                                    label="Bind Pass"
+                                    errorText={error?.message}
+                                    isError={Boolean(error)}
+                                >
+                                    <Input 
+                                        {...field} 
+                                        type="password"
+                                        placeholder="********"
+                                    />
+                                </FormControl>
+                            )}
+                        />
+                        <Controller
+                            control={control}
+                            name="searchBase"
+                            render={({ field, fieldState: { error } }) => (
+                                <FormControl
+                                    label="Search Base / User DN"
+                                    errorText={error?.message}
+                                    isError={Boolean(error)}
+                                >
+                                    <Input 
+                                        {...field} 
+                                        placeholder="ou=people,dc=acme,dc=com"
+                                    />
+                                </FormControl>
+                            )}
+                        />
+                        <Controller
+                            control={control}
+                            name="caCert"
+                            render={({ field, fieldState: { error } }) => (
+                                <FormControl
+                                    label="CA Certificate"
+                                    errorText={error?.message}
+                                    isError={Boolean(error)}
+                                >
+                                    <TextArea 
+                                        {...field} 
+                                        placeholder="-----BEGIN CERTIFICATE----- ..."
+                                    />
+                                </FormControl>
+                            )}
+                        />
+                    <div className="mt-8 flex items-center">
+                        <Button
+                            className="mr-4"
+                            size="sm"
+                            type="submit"
+                            isLoading={createIsLoading || updateIsLoading}
+                        >
+                            {!data ? "Add" : "Update"}
+                        </Button>
+                        <Button 
+                            colorSchema="secondary" 
+                            variant="plain"
+                            onClick={() => handlePopUpClose("addLDAP")}
+                        >
+                            Cancel
+                        </Button>
+                    </div>
+                </form>
+            </ModalContent>
+        </Modal>
+    );
+}
@@ -2,6 +2,7 @@ import { OrgPermissionActions, OrgPermissionSubjects } from "@app/context";
 import { withPermission } from "@app/hoc";

 import { OrgGeneralAuthSection } from "./OrgGeneralAuthSection";
+import { OrgLDAPSection } from "./OrgLDAPSection";
 import { OrgScimSection } from "./OrgSCIMSection";
 import { OrgSSOSection } from "./OrgSSOSection";

@@ -11,6 +12,7 @@ export const OrgAuthTab = withPermission(
      <div>
        <OrgGeneralAuthSection />
        <OrgSSOSection />
+        <OrgLDAPSection />
        <OrgScimSection />
      </div>
    );
@@ -0,0 +1,137 @@
+import { faPlus } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import { OrgPermissionCan } from "@app/components/permissions";
+import {
+  Button,
+  Switch,
+  UpgradePlanModal
+} from "@app/components/v2";
+import {
+  OrgPermissionActions,
+  OrgPermissionSubjects,
+  useOrganization,
+  useSubscription
+} from "@app/context";
+import { 
+    useCreateLDAPConfig,
+    useGetLDAPConfig,
+    useUpdateLDAPConfig
+} from "@app/hooks/api";
+import { usePopUp } from "@app/hooks/usePopUp";
+
+import { LDAPModal } from "./LDAPModal";
+
+export const OrgLDAPSection = (): JSX.Element => {
+  const { currentOrg } = useOrganization();
+  const { subscription } = useSubscription();
+  const { createNotification } = useNotificationContext();
+  const { data, isLoading } = useGetLDAPConfig(currentOrg?.id ?? "");
+  const { mutateAsync } = useUpdateLDAPConfig();
+  const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([
+    "addLDAP",
+    "upgradePlan"
+  ] as const);
+  
+  const { mutateAsync: createMutateAsync } = useCreateLDAPConfig();
+
+  const handleLDAPToggle = async (value: boolean) => {
+    try {
+      if (!currentOrg?.id) return;
+      if (!subscription?.ldap) {
+        handlePopUpOpen("upgradePlan");
+        return;
+      }
+
+      await mutateAsync({
+        organizationId: currentOrg?.id,
+        isActive: value
+      });
+
+      createNotification({
+        text: `Successfully ${value ? "enabled" : "disabled"} LDAP`,
+        type: "success"
+      });
+    } catch (err) {
+      console.error(err);
+      createNotification({
+        text: `Failed to ${value ? "enable" : "disable"} LDAP`,
+        type: "error"
+      });
+    }
+  };
+
+  const addLDAPBtnClick = async () => {
+    try {
+      if (subscription?.ldap && currentOrg) {
+        if (!data) {
+          // case: LDAP is not configured
+          // -> initialize empty LDAP configuration
+          await createMutateAsync({
+            organizationId: currentOrg.id,
+            isActive: false,
+            url: "",
+            bindDN: "",
+            bindPass: "",
+            searchBase: "",
+          });
+        }
+
+        handlePopUpOpen("addLDAP");
+      } else {
+        handlePopUpOpen("upgradePlan");
+      }
+    } catch (err) {
+      console.error(err);
+    }
+  };
+
+  return (
+    <div className="p-4 bg-mineshaft-900 mb-6 rounded-lg border border-mineshaft-600">
+      <div className="flex items-center mb-8">
+        <h2 className="text-xl font-semibold flex-1 text-white">LDAP</h2>
+        {!isLoading && (
+          <OrgPermissionCan I={OrgPermissionActions.Create} a={OrgPermissionSubjects.Ldap}>
+            {(isAllowed) => (
+              <Button
+                onClick={addLDAPBtnClick}
+                colorSchema="secondary"
+                isDisabled={!isAllowed}
+                leftIcon={<FontAwesomeIcon icon={faPlus} />}
+              >
+                Configure
+              </Button>
+            )}
+          </OrgPermissionCan>
+        )}
+      </div>
+      {data && (
+        <div className="mb-4">
+          <OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Ldap}>
+            {(isAllowed) => (
+              <Switch
+                id="enable-saml-sso"
+                onCheckedChange={(value) => handleLDAPToggle(value)}
+                isChecked={data ? data.isActive : false}
+                isDisabled={!isAllowed}
+              >
+                Enable
+              </Switch>
+            )}
+          </OrgPermissionCan>
+        </div>
+      )}
+      <LDAPModal
+        popUp={popUp}
+        handlePopUpClose={handlePopUpClose}
+        handlePopUpToggle={handlePopUpToggle}
+      />
+      <UpgradePlanModal
+          isOpen={popUp.upgradePlan.isOpen}
+          onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
+          text="You can use LDAP authentication if you switch to Infisical's Enterprise plan."
+      />
+    </div>
+  );
+};
@@ -66,7 +66,7 @@ export const OrgScimSection = () => {
    return (
        <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
            <div className="mb-8 flex items-center">
-                <h2 className="flex-1 text-xl font-semibold text-white">SCIM Configuration</h2>
+                <h2 className="flex-1 text-xl font-semibold text-white">SCIM</h2>
                <OrgPermissionCan I={OrgPermissionActions.Read} a={OrgPermissionSubjects.Scim}>
                    {(isAllowed) => (
                        <Button
@@ -75,7 +75,7 @@ export const OrgScimSection = () => {
                            isDisabled={!isAllowed}
                            leftIcon={<FontAwesomeIcon icon={faPlus} />}
                        >
-                            Manage SCIM Tokens
+                            Configure
                        </Button>
                    )}
                </OrgPermissionCan>
@@ -94,7 +94,7 @@ export const OrgScimSection = () => {
                        isChecked={currentOrg?.scimEnabled ?? false}
                        isDisabled={!isAllowed}
                    >
-                        Enable SCIM Provisioning
+                        Enable
                    </Switch>
                )}
            </OrgPermissionCan>
@@ -1,6 +1,5 @@
 import { faPlus } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { format } from "date-fns";

 import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
 import { OrgPermissionCan } from "@app/components/permissions";
@@ -16,13 +15,6 @@ import { usePopUp } from "@app/hooks/usePopUp";

 import { SSOModal } from "./SSOModal";

-const ssoAuthProviderMap: { [key: string]: string } = {
-  "okta-saml": "Okta SAML",
-  "azure-saml": "Azure SAML",
-  "jumpcloud-saml": "JumpCloud SAML",
-  "google-saml": "Google SAML"
-};
-
 export const OrgSSOSection = (): JSX.Element => {
  const { currentOrg } = useOrganization();
  const { subscription } = useSubscription();
@@ -39,6 +31,11 @@ export const OrgSSOSection = (): JSX.Element => {
  const handleSamlSSOToggle = async (value: boolean) => {
    try {
      if (!currentOrg?.id) return;
+      
+      if (!subscription?.samlSSO) {
+        handlePopUpOpen("upgradePlan");
+        return;
+      }

      await mutateAsync({
        organizationId: currentOrg?.id,
@@ -86,7 +83,7 @@ export const OrgSSOSection = (): JSX.Element => {
  return (
    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
      <div className="mb-8 flex items-center">
-        <h2 className="flex-1 text-xl font-semibold text-white">SAML SSO Configuration</h2>
+        <h2 className="flex-1 text-xl font-semibold text-white">SAML</h2>
        {!isLoading && (
          <OrgPermissionCan I={OrgPermissionActions.Create} a={OrgPermissionSubjects.Sso}>
            {(isAllowed) => (
@@ -96,13 +93,13 @@ export const OrgSSOSection = (): JSX.Element => {
                isDisabled={!isAllowed}
                leftIcon={<FontAwesomeIcon icon={faPlus} />}
              >
-                {data ? "Update SAML SSO" : "Set up SAML SSO"}
+                Configure
              </Button>
            )}
          </OrgPermissionCan>
        )}
      </div>
-      {data && (
+      {/* {data && ( */}
        <div className="mb-4">
          <OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Sso}>
            {(isAllowed) => (
@@ -112,36 +109,11 @@ export const OrgSSOSection = (): JSX.Element => {
                isChecked={data ? data.isActive : false}
                isDisabled={!isAllowed}
              >
-                Enable SAML SSO
+                Enable
              </Switch>
            )}
          </OrgPermissionCan>
        </div>
-      )}
-      <div className="mb-4">
-        <h3 className="text-sm text-mineshaft-400">SSO identifier</h3>
-        <p className="text-md text-gray-400">{data && data.id !== "" ? data.id : "-"}</p>
-      </div>
-      <div className="mb-4">
-        <h3 className="text-sm text-mineshaft-400">Type</h3>
-        <p className="text-md text-gray-400">
-          {data && data.authProvider !== "" ? ssoAuthProviderMap[data.authProvider] : "-"}
-        </p>
-      </div>
-      <div className="mb-4">
-        <h3 className="text-sm text-mineshaft-400">Entrypoint</h3>
-        <p className="text-md text-gray-400">
-          {data && data.entryPoint !== "" ? data.entryPoint : "-"}
-        </p>
-      </div>
-      <div className="mb-4">
-        <h3 className="text-sm text-mineshaft-400">Issuer</h3>
-        <p className="text-md text-gray-400">{data && data.issuer !== "" ? data.issuer : "-"}</p>
-      </div>
-      <div className="mb-4">
-        <h3 className="text-sm text-mineshaft-400">Last Logged In</h3>
-        <p className="text-md text-gray-400">{data?.lastUsed ? format(new Date(data?.lastUsed), "yyyy-MM-dd HH:mm:ss") : "-"}</p>
-      </div>
      <SSOModal
        popUp={popUp}
        handlePopUpClose={handlePopUpClose}
@@ -48,8 +48,6 @@ export const ChangePasswordSection = () => {

  const onFormSubmit = async ({ oldPassword, newPassword }: FormData) => {
    try {
-      if (!user?.email) return;
-
      const errorCheck = await checkPassword({
        password: newPassword,
        setErrors
@@ -59,7 +57,7 @@ export const ChangePasswordSection = () => {

      setIsLoading(true);
      await attemptChangePassword({
-        email: user.email,
+        email: user.username,
        currentPassword: oldPassword,
        newPassword
      });
@@ -1,12 +1,22 @@
+import {
+    useGetUser
+} from "@app/hooks/api";
+import { AuthMethod } from "@app/hooks/api/users/types";
+
 import { AuthMethodSection } from "../AuthMethodSection";
 import { ChangePasswordSection } from "../ChangePasswordSection";
 import { MFASection } from "../SecuritySection";

 export const PersonalAuthTab = () => {
+    const { data: user } = useGetUser();
    return (
        <div>
-            <MFASection />
-            <AuthMethodSection />
+            {user && !user.authMethods.includes(AuthMethod.LDAP) && (
+                <>
+                    <MFASection />
+                    <AuthMethodSection />
+                </>
+            )}
            <ChangePasswordSection />
        </div>
    );
@@ -4,6 +4,7 @@ import {
  useGetUser,
  useUpdateMfaEnabled} from "@app/hooks/api";
 import { useFetchServerStatus } from "@app/hooks/api/serverDetails";
+import { AuthMethod } from "@app/hooks/api/users/types";
 import { usePopUp } from "@app/hooks/usePopUp";

 export const MFASection = () => {
@@ -18,6 +19,15 @@ export const MFASection = () => {
  
  const toggleMfa = async (state: boolean) => {
    try {
+      if (!user) return;
+      if (user.authMethods.includes(AuthMethod.LDAP)) {
+        createNotification({
+          text: "Two-factor authentication is not available for LDAP users.",
+          type: "error"
+        });
+        return;
+      }
+      
      const newUser = await mutateAsync({
        isMfaEnabled: state
      });