requested changes

2026-09-22 13:39:35 +00:00 · 2025-08-16 00:26:06 +04:00
parent 09db98db50
commit d587e779f5
5 changed files with 103 additions and 92 deletions
--- a/frontend/src/pages/organization/SettingsPage/components/OrgSsoTab/OrgGeneralAuthSection.tsx
+++ b/frontend/src/pages/organization/SettingsPage/components/OrgSsoTab/OrgGeneralAuthSection.tsx
@@ -23,10 +23,12 @@ enum EnforceAuthType {

 export const OrgGeneralAuthSection = ({
  isSamlConfigured,
-  isOidcConfigured
+  isOidcConfigured,
+  isGoogleConfigured
 }: {
  isSamlConfigured: boolean;
  isOidcConfigured: boolean;
+  isGoogleConfigured: boolean;
 }) => {
  const { currentOrg } = useOrganization();
  const { subscription } = useSubscription();
@@ -125,8 +127,14 @@ export const OrgGeneralAuthSection = ({
  };

  return (
-    <>
-      <div className="flex flex-col gap-2">
+    <div className="rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-6">
+      <div>
+        <p className="text-xl font-semibold text-gray-200">SSO Enforcement</p>
+        <p className="mb-2 mt-1 text-gray-400">
+          Manage strict enforcement of specific authentication methods for your organization.
+        </p>
+      </div>
+      <div className="flex flex-col gap-2 py-4">
        <div className={twMerge("mt-4", !isSamlConfigured && "hidden")}>
          <div className="mb-2 flex justify-between">
            <div className="flex items-center gap-1">
@@ -147,6 +155,8 @@ export const OrgGeneralAuthSection = ({
          </div>
          <p className="text-sm text-mineshaft-300">
            Enforce users to authenticate via SAML to access this organization.
+            <br />
+            When this is enabled your organization members will only be able to login with SAML.
          </p>
        </div>

@@ -169,11 +179,13 @@ export const OrgGeneralAuthSection = ({
            </OrgPermissionCan>
          </div>
          <p className="text-sm text-mineshaft-300">
-            <span>Enforce users to authenticate via OIDC to access this organization.</span>
+            Enforce users to authenticate via OIDC to access this organization.
+            <br />
+            When this is enabled your organization members will only be able to login with OIDC.
          </p>
        </div>

-        <div className="mt-2">
+        <div className={twMerge("mt-2", !isGoogleConfigured && "hidden")}>
          <div className="mb-2 flex justify-between">
            <div className="flex items-center gap-1">
              <span className="text-md text-mineshaft-100">Enforce Google SSO</span>
@@ -193,6 +205,8 @@ export const OrgGeneralAuthSection = ({
          </div>
          <p className="text-sm text-mineshaft-300">
            Enforce users to authenticate via Google to access this organization.
+            <br />
+            When this is enabled your organization members will only be able to login with Google.
          </p>
        </div>
      </div>
@@ -263,6 +277,6 @@ export const OrgGeneralAuthSection = ({
        onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
        text="You can enforce SAML SSO if you switch to Infisical's Pro plan."
      />
-    </>
+    </div>
  );
 };
--- a/frontend/src/pages/organization/SettingsPage/components/OrgSsoTab/OrgLDAPSection.tsx
+++ b/frontend/src/pages/organization/SettingsPage/components/OrgSsoTab/OrgLDAPSection.tsx
@@ -95,43 +95,25 @@ export const OrgLDAPSection = (): JSX.Element => {
  };

  return (
-    <div className="mb-4 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-6">
+    <div className="mb-4">
      <div className="py-4">
-        <div className="mb-2 flex items-center justify-between">
-          <h2 className="text-md text-mineshaft-100">LDAP</h2>
-          <div className="flex">
-            <OrgPermissionCan I={OrgPermissionActions.Create} a={OrgPermissionSubjects.Ldap}>
-              {(isAllowed) => (
-                <Button onClick={addLDAPBtnClick} colorSchema="secondary" isDisabled={!isAllowed}>
-                  Manage
-                </Button>
-              )}
-            </OrgPermissionCan>
+        <div className="mb-4 flex items-center justify-between">
+          <div>
+            <p className="text-xl font-semibold text-gray-200">LDAP</p>
+            <p className="mb-2 text-gray-400">Manage LDAP authentication configuration</p>
          </div>
-        </div>
-        <p className="text-sm text-mineshaft-300">Manage LDAP authentication configuration</p>
-      </div>
-      <div className="py-4">
-        <div className="mb-2 flex items-center justify-between">
-          <h2 className="text-md text-mineshaft-100">LDAP Group Mappings</h2>
          <OrgPermissionCan I={OrgPermissionActions.Create} a={OrgPermissionSubjects.Ldap}>
            {(isAllowed) => (
-              <Button
-                onClick={openLDAPGroupMapModal}
-                colorSchema="secondary"
-                isDisabled={!isAllowed}
-              >
+              <Button onClick={addLDAPBtnClick} colorSchema="secondary" isDisabled={!isAllowed}>
                Manage
              </Button>
            )}
          </OrgPermissionCan>
        </div>
-        <p className="text-sm text-mineshaft-300">
-          Manage how LDAP groups are mapped to internal groups in Infisical
-        </p>
      </div>
+
      {data && (
-        <div className="py-4">
+        <div className="pt-4">
          <div className="mb-2 flex items-center justify-between">
            <h2 className="text-md text-mineshaft-100">Enable LDAP</h2>
            <OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Ldap}>
@@ -152,6 +134,27 @@ export const OrgLDAPSection = (): JSX.Element => {
          </p>
        </div>
      )}
+
+      <div className="py-4">
+        <div className="mb-2 flex items-center justify-between">
+          <h2 className="text-md text-mineshaft-100">LDAP Group Mappings</h2>
+          <OrgPermissionCan I={OrgPermissionActions.Create} a={OrgPermissionSubjects.Ldap}>
+            {(isAllowed) => (
+              <Button
+                onClick={openLDAPGroupMapModal}
+                colorSchema="secondary"
+                isDisabled={!isAllowed}
+              >
+                Configure
+              </Button>
+            )}
+          </OrgPermissionCan>
+        </div>
+        <p className="text-sm text-mineshaft-300">
+          Manage how LDAP groups are mapped to internal groups in Infisical
+        </p>
+      </div>
+
      <LDAPModal
        popUp={popUp}
        handlePopUpClose={handlePopUpClose}
--- a/frontend/src/pages/organization/SettingsPage/components/OrgSsoTab/OrgOIDCSection.tsx
+++ b/frontend/src/pages/organization/SettingsPage/components/OrgSsoTab/OrgOIDCSection.tsx
@@ -84,25 +84,22 @@ export const OrgOIDCSection = (): JSX.Element => {
  };

  return (
-    <div className="mb-4 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-6">
-      <div className="py-4">
-        <div className="mb-2 flex items-center justify-between">
-          <h2 className="text-md text-mineshaft-100">OIDC</h2>
-          {!isPending && (
-            <OrgPermissionCan I={OrgPermissionActions.Create} a={OrgPermissionSubjects.Sso}>
-              {(isAllowed) => (
-                <Button
-                  onClick={addOidcButtonClick}
-                  colorSchema="secondary"
-                  isDisabled={!isAllowed}
-                >
-                  Manage
-                </Button>
-              )}
-            </OrgPermissionCan>
-          )}
+    <div className="mb-4 rounded-lg border-mineshaft-600 bg-mineshaft-900">
+      <div className="mb-4 flex items-center justify-between">
+        <div>
+          <p className="text-xl font-semibold text-gray-200">OIDC</p>
+          <p className="mb-2 text-gray-400">Manage OIDC authentication configuration</p>
        </div>
-        <p className="text-sm text-mineshaft-300">Manage OIDC authentication configuration</p>
+
+        {!isPending && (
+          <OrgPermissionCan I={OrgPermissionActions.Create} a={OrgPermissionSubjects.Sso}>
+            {(isAllowed) => (
+              <Button onClick={addOidcButtonClick} colorSchema="secondary" isDisabled={!isAllowed}>
+                Manage
+              </Button>
+            )}
+          </OrgPermissionCan>
+        )}
      </div>
      {data && (
        <div className="py-4">
--- a/frontend/src/pages/organization/SettingsPage/components/OrgSsoTab/OrgSSOSection.tsx
+++ b/frontend/src/pages/organization/SettingsPage/components/OrgSsoTab/OrgSSOSection.tsx
@@ -80,23 +80,23 @@ export const OrgSSOSection = (): JSX.Element => {

  return (
    <div className="space-y-4">
-      <div>
-        <div className="flex items-center justify-between">
-          <h2 className="text-md text-mineshaft-100">SAML</h2>
-          {!isPending && (
-            <OrgPermissionCan I={OrgPermissionActions.Create} a={OrgPermissionSubjects.Sso}>
-              {(isAllowed) => (
-                <Button onClick={addSSOBtnClick} colorSchema="secondary" isDisabled={!isAllowed}>
-                  Manage
-                </Button>
-              )}
-            </OrgPermissionCan>
-          )}
+      <div className="mb-4 flex items-center justify-between">
+        <div>
+          <p className="text-xl font-semibold text-gray-200">SAML</p>
+          <p className="mb-2 text-gray-400">Manage SAML authentication configuration</p>
        </div>
-        <p className="text-sm text-mineshaft-300">Manage SAML authentication configuration</p>
+        {!isPending && (
+          <OrgPermissionCan I={OrgPermissionActions.Create} a={OrgPermissionSubjects.Sso}>
+            {(isAllowed) => (
+              <Button onClick={addSSOBtnClick} colorSchema="secondary" isDisabled={!isAllowed}>
+                Manage
+              </Button>
+            )}
+          </OrgPermissionCan>
+        )}
      </div>
      <div>
-        <div className="mb-2 flex items-center justify-between">
+        <div className="mb-2 flex items-center justify-between pt-4">
          <h2 className="text-md text-mineshaft-100">Enable SAML</h2>
          {!isPending && (
            <OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Sso}>
--- a/frontend/src/pages/organization/SettingsPage/components/OrgSsoTab/OrgSsoTab.tsx
+++ b/frontend/src/pages/organization/SettingsPage/components/OrgSsoTab/OrgSsoTab.tsx
@@ -61,6 +61,7 @@ export const OrgSsoTab = withPermission(
    const isSamlConfigured =
      samlConfig && (samlConfig.entryPoint || samlConfig.issuer || samlConfig.cert);
    const isLdapConfigured = ldapConfig && ldapConfig.url;
+    const isGoogleConfigured = shouldDisplaySection(LoginMethod.GOOGLE);

    const shouldShowCreateIdentityProviderView =
      !isOidcConfigured && !isSamlConfigured && !isLdapConfigured;
@@ -70,12 +71,14 @@ export const OrgSsoTab = withPermission(
      shouldDisplaySection(LoginMethod.OIDC) ||
      shouldDisplaySection(LoginMethod.LDAP) ? (
        <>
-          <div>
-            <p className="text-xl font-semibold text-gray-200">Connect an Identity Provider</p>
-            <p className="mb-2 mt-1 text-gray-400">
-              Connect your identity provider to simplify user management with options like SAML,
-              OIDC, and LDAP.
-            </p>
+          <div className="mb-4 space-y-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-6">
+            <div>
+              <p className="text-xl font-semibold text-gray-200">Connect an Identity Provider</p>
+              <p className="mb-2 mt-1 text-gray-400">
+                Connect your identity provider to simplify user management with options like SAML,
+                OIDC, and LDAP.
+              </p>
+            </div>
            {shouldDisplaySection(LoginMethod.SAML) && (
              <div
                className={twMerge(
@@ -175,33 +178,27 @@ export const OrgSsoTab = withPermission(

    return (
      <>
-        {shouldShowCreateIdentityProviderView ? (
-          <div className="mb-4 space-y-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-6">
+        <div className="space-y-4">
+          {shouldDisplaySection([LoginMethod.SAML, LoginMethod.GOOGLE]) && (
            <OrgGeneralAuthSection
              isSamlConfigured={isSamlConfigured}
              isOidcConfigured={isOidcConfigured}
+              isGoogleConfigured={isGoogleConfigured}
            />
-            <hr className="border-mineshaft-600" />
-            {createIdentityProviderView}
-          </div>
-        ) : (
-          <div className="mb-4 space-y-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-6">
-            <div>
-              {/* {shouldDisplaySection([LoginMethod.SAML, LoginMethod.GOOGLE]) && ( */}
-              <OrgGeneralAuthSection
-                isSamlConfigured={isSamlConfigured}
-                isOidcConfigured={isOidcConfigured}
-              />
-              {/* )} */}
+          )}
+
+          {shouldShowCreateIdentityProviderView ? (
+            createIdentityProviderView
+          ) : (
+            <div className="mb-4 space-y-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-6">
+              <div>
+                {isSamlConfigured && shouldDisplaySection(LoginMethod.SAML) && <OrgSSOSection />}
+                {isOidcConfigured && shouldDisplaySection(LoginMethod.OIDC) && <OrgOIDCSection />}
+                {isLdapConfigured && shouldDisplaySection(LoginMethod.LDAP) && <OrgLDAPSection />}
+              </div>
            </div>
-            <hr className="border-mineshaft-600" />
-            <div>
-              {isSamlConfigured && shouldDisplaySection(LoginMethod.SAML) && <OrgSSOSection />}
-              {isOidcConfigured && shouldDisplaySection(LoginMethod.OIDC) && <OrgOIDCSection />}
-              {isLdapConfigured && shouldDisplaySection(LoginMethod.LDAP) && <OrgLDAPSection />}
-            </div>
-          </div>
-        )}
+          )}
+        </div>
        <UpgradePlanModal
          isOpen={popUp.upgradePlan.isOpen}
          onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}