requested changes

This commit is contained in:
Daniel Hougaard
2025-08-16 00:26:06 +04:00
parent 09db98db50
commit d587e779f5
5 changed files with 103 additions and 92 deletions
@@ -23,10 +23,12 @@ enum EnforceAuthType {
export const OrgGeneralAuthSection = ({ export const OrgGeneralAuthSection = ({
isSamlConfigured, isSamlConfigured,
isOidcConfigured isOidcConfigured,
isGoogleConfigured
}: { }: {
isSamlConfigured: boolean; isSamlConfigured: boolean;
isOidcConfigured: boolean; isOidcConfigured: boolean;
isGoogleConfigured: boolean;
}) => { }) => {
const { currentOrg } = useOrganization(); const { currentOrg } = useOrganization();
const { subscription } = useSubscription(); const { subscription } = useSubscription();
@@ -125,8 +127,14 @@ export const OrgGeneralAuthSection = ({
}; };
return ( return (
<> <div className="rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-6">
<div className="flex flex-col gap-2"> <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={twMerge("mt-4", !isSamlConfigured && "hidden")}>
<div className="mb-2 flex justify-between"> <div className="mb-2 flex justify-between">
<div className="flex items-center gap-1"> <div className="flex items-center gap-1">
@@ -147,6 +155,8 @@ export const OrgGeneralAuthSection = ({
</div> </div>
<p className="text-sm text-mineshaft-300"> <p className="text-sm text-mineshaft-300">
Enforce users to authenticate via SAML to access this organization. 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> </p>
</div> </div>
@@ -169,11 +179,13 @@ export const OrgGeneralAuthSection = ({
</OrgPermissionCan> </OrgPermissionCan>
</div> </div>
<p className="text-sm text-mineshaft-300"> <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> </p>
</div> </div>
<div className="mt-2"> <div className={twMerge("mt-2", !isGoogleConfigured && "hidden")}>
<div className="mb-2 flex justify-between"> <div className="mb-2 flex justify-between">
<div className="flex items-center gap-1"> <div className="flex items-center gap-1">
<span className="text-md text-mineshaft-100">Enforce Google SSO</span> <span className="text-md text-mineshaft-100">Enforce Google SSO</span>
@@ -193,6 +205,8 @@ export const OrgGeneralAuthSection = ({
</div> </div>
<p className="text-sm text-mineshaft-300"> <p className="text-sm text-mineshaft-300">
Enforce users to authenticate via Google to access this organization. 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> </p>
</div> </div>
</div> </div>
@@ -263,6 +277,6 @@ export const OrgGeneralAuthSection = ({
onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)} onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
text="You can enforce SAML SSO if you switch to Infisical's Pro plan." text="You can enforce SAML SSO if you switch to Infisical's Pro plan."
/> />
</> </div>
); );
}; };
@@ -95,43 +95,25 @@ export const OrgLDAPSection = (): JSX.Element => {
}; };
return ( 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="py-4">
<div className="mb-2 flex items-center justify-between"> <div className="mb-4 flex items-center justify-between">
<h2 className="text-md text-mineshaft-100">LDAP</h2> <div>
<div className="flex"> <p className="text-xl font-semibold text-gray-200">LDAP</p>
<OrgPermissionCan I={OrgPermissionActions.Create} a={OrgPermissionSubjects.Ldap}> <p className="mb-2 text-gray-400">Manage LDAP authentication configuration</p>
{(isAllowed) => (
<Button onClick={addLDAPBtnClick} colorSchema="secondary" isDisabled={!isAllowed}>
Manage
</Button>
)}
</OrgPermissionCan>
</div> </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}> <OrgPermissionCan I={OrgPermissionActions.Create} a={OrgPermissionSubjects.Ldap}>
{(isAllowed) => ( {(isAllowed) => (
<Button <Button onClick={addLDAPBtnClick} colorSchema="secondary" isDisabled={!isAllowed}>
onClick={openLDAPGroupMapModal}
colorSchema="secondary"
isDisabled={!isAllowed}
>
Manage Manage
</Button> </Button>
)} )}
</OrgPermissionCan> </OrgPermissionCan>
</div> </div>
<p className="text-sm text-mineshaft-300">
Manage how LDAP groups are mapped to internal groups in Infisical
</p>
</div> </div>
{data && ( {data && (
<div className="py-4"> <div className="pt-4">
<div className="mb-2 flex items-center justify-between"> <div className="mb-2 flex items-center justify-between">
<h2 className="text-md text-mineshaft-100">Enable LDAP</h2> <h2 className="text-md text-mineshaft-100">Enable LDAP</h2>
<OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Ldap}> <OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Ldap}>
@@ -152,6 +134,27 @@ export const OrgLDAPSection = (): JSX.Element => {
</p> </p>
</div> </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 <LDAPModal
popUp={popUp} popUp={popUp}
handlePopUpClose={handlePopUpClose} handlePopUpClose={handlePopUpClose}
@@ -84,25 +84,22 @@ export const OrgOIDCSection = (): JSX.Element => {
}; };
return ( return (
<div className="mb-4 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-6"> <div className="mb-4 rounded-lg border-mineshaft-600 bg-mineshaft-900">
<div className="py-4"> <div className="mb-4 flex items-center justify-between">
<div className="mb-2 flex items-center justify-between"> <div>
<h2 className="text-md text-mineshaft-100">OIDC</h2> <p className="text-xl font-semibold text-gray-200">OIDC</p>
{!isPending && ( <p className="mb-2 text-gray-400">Manage OIDC authentication configuration</p>
<OrgPermissionCan I={OrgPermissionActions.Create} a={OrgPermissionSubjects.Sso}>
{(isAllowed) => (
<Button
onClick={addOidcButtonClick}
colorSchema="secondary"
isDisabled={!isAllowed}
>
Manage
</Button>
)}
</OrgPermissionCan>
)}
</div> </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> </div>
{data && ( {data && (
<div className="py-4"> <div className="py-4">
@@ -80,23 +80,23 @@ export const OrgSSOSection = (): JSX.Element => {
return ( return (
<div className="space-y-4"> <div className="space-y-4">
<div> <div className="mb-4 flex items-center justify-between">
<div className="flex items-center justify-between"> <div>
<h2 className="text-md text-mineshaft-100">SAML</h2> <p className="text-xl font-semibold text-gray-200">SAML</p>
{!isPending && ( <p className="mb-2 text-gray-400">Manage SAML authentication configuration</p>
<OrgPermissionCan I={OrgPermissionActions.Create} a={OrgPermissionSubjects.Sso}>
{(isAllowed) => (
<Button onClick={addSSOBtnClick} colorSchema="secondary" isDisabled={!isAllowed}>
Manage
</Button>
)}
</OrgPermissionCan>
)}
</div> </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> <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> <h2 className="text-md text-mineshaft-100">Enable SAML</h2>
{!isPending && ( {!isPending && (
<OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Sso}> <OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Sso}>
@@ -61,6 +61,7 @@ export const OrgSsoTab = withPermission(
const isSamlConfigured = const isSamlConfigured =
samlConfig && (samlConfig.entryPoint || samlConfig.issuer || samlConfig.cert); samlConfig && (samlConfig.entryPoint || samlConfig.issuer || samlConfig.cert);
const isLdapConfigured = ldapConfig && ldapConfig.url; const isLdapConfigured = ldapConfig && ldapConfig.url;
const isGoogleConfigured = shouldDisplaySection(LoginMethod.GOOGLE);
const shouldShowCreateIdentityProviderView = const shouldShowCreateIdentityProviderView =
!isOidcConfigured && !isSamlConfigured && !isLdapConfigured; !isOidcConfigured && !isSamlConfigured && !isLdapConfigured;
@@ -70,12 +71,14 @@ export const OrgSsoTab = withPermission(
shouldDisplaySection(LoginMethod.OIDC) || shouldDisplaySection(LoginMethod.OIDC) ||
shouldDisplaySection(LoginMethod.LDAP) ? ( shouldDisplaySection(LoginMethod.LDAP) ? (
<> <>
<div> <div className="mb-4 space-y-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-6">
<p className="text-xl font-semibold text-gray-200">Connect an Identity Provider</p> <div>
<p className="mb-2 mt-1 text-gray-400"> <p className="text-xl font-semibold text-gray-200">Connect an Identity Provider</p>
Connect your identity provider to simplify user management with options like SAML, <p className="mb-2 mt-1 text-gray-400">
OIDC, and LDAP. Connect your identity provider to simplify user management with options like SAML,
</p> OIDC, and LDAP.
</p>
</div>
{shouldDisplaySection(LoginMethod.SAML) && ( {shouldDisplaySection(LoginMethod.SAML) && (
<div <div
className={twMerge( className={twMerge(
@@ -175,33 +178,27 @@ export const OrgSsoTab = withPermission(
return ( return (
<> <>
{shouldShowCreateIdentityProviderView ? ( <div className="space-y-4">
<div className="mb-4 space-y-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-6"> {shouldDisplaySection([LoginMethod.SAML, LoginMethod.GOOGLE]) && (
<OrgGeneralAuthSection <OrgGeneralAuthSection
isSamlConfigured={isSamlConfigured} isSamlConfigured={isSamlConfigured}
isOidcConfigured={isOidcConfigured} isOidcConfigured={isOidcConfigured}
isGoogleConfigured={isGoogleConfigured}
/> />
<hr className="border-mineshaft-600" /> )}
{createIdentityProviderView}
</div> {shouldShowCreateIdentityProviderView ? (
) : ( createIdentityProviderView
<div className="mb-4 space-y-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-6"> ) : (
<div> <div className="mb-4 space-y-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-6">
{/* {shouldDisplaySection([LoginMethod.SAML, LoginMethod.GOOGLE]) && ( */} <div>
<OrgGeneralAuthSection {isSamlConfigured && shouldDisplaySection(LoginMethod.SAML) && <OrgSSOSection />}
isSamlConfigured={isSamlConfigured} {isOidcConfigured && shouldDisplaySection(LoginMethod.OIDC) && <OrgOIDCSection />}
isOidcConfigured={isOidcConfigured} {isLdapConfigured && shouldDisplaySection(LoginMethod.LDAP) && <OrgLDAPSection />}
/> </div>
{/* )} */}
</div> </div>
<hr className="border-mineshaft-600" /> )}
<div> </div>
{isSamlConfigured && shouldDisplaySection(LoginMethod.SAML) && <OrgSSOSection />}
{isOidcConfigured && shouldDisplaySection(LoginMethod.OIDC) && <OrgOIDCSection />}
{isLdapConfigured && shouldDisplaySection(LoginMethod.LDAP) && <OrgLDAPSection />}
</div>
</div>
)}
<UpgradePlanModal <UpgradePlanModal
isOpen={popUp.upgradePlan.isOpen} isOpen={popUp.upgradePlan.isOpen}
onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)} onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}