awatertrevi/infisical
1
0
Fork 0
mirror of https://github.com/awatertrevi/infisical.git synced 2026-10-08 00:27:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

Draft revamp org auth tab

Browse Source
This commit is contained in:
Tuan Dang
2024-03-12 09:37:28 -07:00
parent 635948c4f4
commit a6d7d32156
10 changed files with 165 additions and 139 deletions
Download Patch File Download Diff File Expand all files Collapse all files
backend/src/ee/services/license/__mocks__/licence-fns.ts
+3 -3
View File
@@ -17,9 +17,9 @@ export const getDefaultOnPremFeatures = () => {
customAlerts: false, customAlerts: false,
auditLogs: false, auditLogs: false,
auditLogsRetentionDays: 0, auditLogsRetentionDays: 0,
samlSSO: false, samlSSO: true,
scim: false, scim: true,
ldap: false, ldap: true,
status: null, status: null,
trial_end: null, trial_end: null,
has_used_trial: true, has_used_trial: true,
backend/src/ee/services/license/licence-fns.ts
+3 -3
View File
@@ -23,9 +23,9 @@ export const getDefaultOnPremFeatures = (): TFeatureSet => ({
customAlerts: false, customAlerts: false,
auditLogs: false, auditLogs: false,
auditLogsRetentionDays: 0, auditLogsRetentionDays: 0,
samlSSO: false, samlSSO: true,
scim: false, scim: true,
ldap: false, ldap: true,
status: null, status: null,
trial_end: null, trial_end: null,
has_used_trial: true, has_used_trial: true,
backend/src/ee/services/license/license-types.ts
+3 -3
View File
@@ -24,9 +24,9 @@ export type TFeatureSet = {
customAlerts: false; customAlerts: false;
auditLogs: false; auditLogs: false;
auditLogsRetentionDays: 0; auditLogsRetentionDays: 0;
samlSSO: false; samlSSO: true;
scim: false; scim: true;
ldap: false; ldap: true;
status: null; status: null;
trial_end: null; trial_end: null;
has_used_trial: true; has_used_trial: true;
frontend/src/views/Settings/OrgSettingsPage/OrgSettingsPage.tsx
+1 -1
View File
@@ -7,7 +7,7 @@ export const OrgSettingsPage = () => {
return ( return (
<div className="flex justify-center bg-bunker-800 text-white w-full py-6"> <div className="flex justify-center bg-bunker-800 text-white w-full py-6">
<div className="max-w-7xl w-full px-6"> <div className="max-w-4xl w-full px-6">
<div className="mb-4"> <div className="mb-4">
<p className="text-3xl font-semibold text-gray-200">{t("settings.org.title")}</p> <p className="text-3xl font-semibold text-gray-200">{t("settings.org.title")}</p>
</div> </div>
frontend/src/views/Settings/OrgSettingsPage/components/OrgAuthTab/OrgAuthTab.tsx
+1 -1
View File
@@ -9,7 +9,7 @@ import { OrgSSOSection } from "./OrgSSOSection";
export const OrgAuthTab = withPermission( export const OrgAuthTab = withPermission(
() => { () => {
return ( return (
<div> <div className="rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-6">
<OrgGeneralAuthSection /> <OrgGeneralAuthSection />
<OrgSSOSection /> <OrgSSOSection />
<OrgLDAPSection /> <OrgLDAPSection />
frontend/src/views/Settings/OrgSettingsPage/components/OrgAuthTab/OrgGeneralAuthSection.tsx
+25 -6
View File
@@ -59,8 +59,26 @@ export const OrgGeneralAuthSection = () => {
} }
return ( return (
<div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4"> <>
<h2 className="flex-1 text-xl font-semibold text-white mb-8">Settings</h2> <div className="py-4">
<div className="mb-2 flex justify-between">
<h3 className="text-md text-mineshaft-100">Allow users to send invites</h3>
<OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Sso}>
{(isAllowed) => (
<Switch
id="allow-org-invites"
onCheckedChange={(value) => handleEnforceOrgAuthToggle(value)}
isChecked={currentOrg?.authEnforced ?? false}
isDisabled={!isAllowed}
/>
)}
</OrgPermissionCan>
</div>
<p className="text-sm text-mineshaft-300">Allow members to invite new users to this organization</p>
</div>
<div className="py-4">
<div className="mb-2 flex justify-between">
<h3 className="text-md text-mineshaft-100">Enforce SAML SSO</h3>
<OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Sso}> <OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Sso}>
{(isAllowed) => ( {(isAllowed) => (
<Switch <Switch
@@ -68,16 +86,17 @@ export const OrgGeneralAuthSection = () => {
onCheckedChange={(value) => handleEnforceOrgAuthToggle(value)} onCheckedChange={(value) => handleEnforceOrgAuthToggle(value)}
isChecked={currentOrg?.authEnforced ?? false} isChecked={currentOrg?.authEnforced ?? false}
isDisabled={!isAllowed} isDisabled={!isAllowed}
> />
Enforce SAML SSO
</Switch>
)} )}
</OrgPermissionCan> </OrgPermissionCan>
</div>
<p className="text-sm text-mineshaft-300">Enforce members to authenticate via SAML to access this organization</p>
</div>
<UpgradePlanModal <UpgradePlanModal
isOpen={popUp.upgradePlan.isOpen} isOpen={popUp.upgradePlan.isOpen}
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> </>
); );
} }
frontend/src/views/Settings/OrgSettingsPage/components/OrgAuthTab/OrgLDAPSection.tsx
+15 -15
View File
@@ -1,6 +1,3 @@
import { faPlus } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider"; import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
import { OrgPermissionCan } from "@app/components/permissions"; import { OrgPermissionCan } from "@app/components/permissions";
import { import {
@@ -27,7 +24,7 @@ export const OrgLDAPSection = (): JSX.Element => {
const { currentOrg } = useOrganization(); const { currentOrg } = useOrganization();
const { subscription } = useSubscription(); const { subscription } = useSubscription();
const { createNotification } = useNotificationContext(); const { createNotification } = useNotificationContext();
const { data, isLoading } = useGetLDAPConfig(currentOrg?.id ?? ""); const { data } = useGetLDAPConfig(currentOrg?.id ?? "");
const { mutateAsync } = useUpdateLDAPConfig(); const { mutateAsync } = useUpdateLDAPConfig();
const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([ const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([
"addLDAP", "addLDAP",
@@ -88,26 +85,28 @@ export const OrgLDAPSection = (): JSX.Element => {
}; };
return ( return (
<div className="p-4 bg-mineshaft-900 mb-6 rounded-lg border border-mineshaft-600"> <>
<div className="flex items-center mb-8"> <hr className="border-mineshaft-600" />
<h2 className="text-xl font-semibold flex-1 text-white">LDAP</h2> <div className="py-4">
{!isLoading && ( <div className="mb-2 flex items-center justify-between">
<h2 className="text-md text-mineshaft-100">LDAP</h2>
<OrgPermissionCan I={OrgPermissionActions.Create} a={OrgPermissionSubjects.Ldap}> <OrgPermissionCan I={OrgPermissionActions.Create} a={OrgPermissionSubjects.Ldap}>
{(isAllowed) => ( {(isAllowed) => (
<Button <Button
onClick={addLDAPBtnClick} onClick={addLDAPBtnClick}
colorSchema="secondary" colorSchema="secondary"
isDisabled={!isAllowed} isDisabled={!isAllowed}
leftIcon={<FontAwesomeIcon icon={faPlus} />}
> >
Configure Manage
</Button> </Button>
)} )}
</OrgPermissionCan> </OrgPermissionCan>
)}
</div> </div>
{data && ( <p className="text-sm text-mineshaft-300">Manage LDAP authentication configuration</p>
<div className="mb-4"> </div>
<div className="py-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}> <OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Ldap}>
{(isAllowed) => ( {(isAllowed) => (
<Switch <Switch
@@ -121,7 +120,8 @@ export const OrgLDAPSection = (): JSX.Element => {
)} )}
</OrgPermissionCan> </OrgPermissionCan>
</div> </div>
)} <p className="text-sm text-mineshaft-300">Allow members to authenticate into Infisical with LDAP</p>
</div>
<LDAPModal <LDAPModal
popUp={popUp} popUp={popUp}
handlePopUpClose={handlePopUpClose} handlePopUpClose={handlePopUpClose}
@@ -132,6 +132,6 @@ export const OrgLDAPSection = (): JSX.Element => {
onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)} onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
text="You can use LDAP authentication if you switch to Infisical's Enterprise plan." text="You can use LDAP authentication if you switch to Infisical's Enterprise plan."
/> />
</div> </>
); );
}; };
frontend/src/views/Settings/OrgSettingsPage/components/OrgAuthTab/OrgSCIMSection.tsx
+16 -12
View File
@@ -1,6 +1,3 @@
import { faPlus } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider"; import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
import { OrgPermissionCan } from "@app/components/permissions"; import { OrgPermissionCan } from "@app/components/permissions";
import { import {
@@ -64,22 +61,28 @@ export const OrgScimSection = () => {
} }
return ( return (
<div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4"> <>
<div className="mb-8 flex items-center"> <hr className="border-mineshaft-600" />
<h2 className="flex-1 text-xl font-semibold text-white">SCIM</h2> <div className="py-4">
<div className="mb-2 flex justify-between items-center">
<h2 className="text-md text-mineshaft-100">SCIM</h2>
<OrgPermissionCan I={OrgPermissionActions.Read} a={OrgPermissionSubjects.Scim}> <OrgPermissionCan I={OrgPermissionActions.Read} a={OrgPermissionSubjects.Scim}>
{(isAllowed) => ( {(isAllowed) => (
<Button <Button
onClick={addScimTokenBtnClick} onClick={addScimTokenBtnClick}
colorSchema="secondary" colorSchema="secondary"
isDisabled={!isAllowed} isDisabled={!isAllowed}
leftIcon={<FontAwesomeIcon icon={faPlus} />}
> >
Configure Manage
</Button> </Button>
)} )}
</OrgPermissionCan> </OrgPermissionCan>
</div> </div>
<p className="text-sm text-mineshaft-300">Manage SCIM configuration</p>
</div>
<div className="py-4">
<div className="mb-2 flex justify-between items-center">
<h2 className="text-md text-mineshaft-100">Enable SCIM</h2>
<OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Scim}> <OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Scim}>
{(isAllowed) => ( {(isAllowed) => (
<Switch <Switch
@@ -93,11 +96,12 @@ export const OrgScimSection = () => {
}} }}
isChecked={currentOrg?.scimEnabled ?? false} isChecked={currentOrg?.scimEnabled ?? false}
isDisabled={!isAllowed} isDisabled={!isAllowed}
> />
Enable
</Switch>
)} )}
</OrgPermissionCan> </OrgPermissionCan>
</div>
<p className="text-sm text-mineshaft-300">Allow member provisioning/deprovisioning with SCIM</p>
</div>
<ScimTokenModal <ScimTokenModal
popUp={popUp} popUp={popUp}
handlePopUpOpen={handlePopUpOpen} handlePopUpOpen={handlePopUpOpen}
@@ -108,6 +112,6 @@ export const OrgScimSection = () => {
onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)} onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
text="You can use SCIM Provisioning if you switch to Infisical's Enterprise plan." text="You can use SCIM Provisioning if you switch to Infisical's Enterprise plan."
/> />
</div> </>
); );
} }
frontend/src/views/Settings/OrgSettingsPage/components/OrgAuthTab/OrgSSOSection.tsx
+17 -14
View File
@@ -1,6 +1,3 @@
import { faPlus } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider"; import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
import { OrgPermissionCan } from "@app/components/permissions"; import { OrgPermissionCan } from "@app/components/permissions";
import { Button, Switch, UpgradePlanModal } from "@app/components/v2"; import { Button, Switch, UpgradePlanModal } from "@app/components/v2";
@@ -81,9 +78,11 @@ export const OrgSSOSection = (): JSX.Element => {
}; };
return ( return (
<div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4"> <>
<div className="mb-8 flex items-center"> <hr className="border-mineshaft-600" />
<h2 className="flex-1 text-xl font-semibold text-white">SAML</h2> <div className="py-4">
<div className="mb-2 flex items-center justify-between">
<h2 className="text-md text-mineshaft-100">SAML</h2>
{!isLoading && ( {!isLoading && (
<OrgPermissionCan I={OrgPermissionActions.Create} a={OrgPermissionSubjects.Sso}> <OrgPermissionCan I={OrgPermissionActions.Create} a={OrgPermissionSubjects.Sso}>
{(isAllowed) => ( {(isAllowed) => (
@@ -91,16 +90,19 @@ export const OrgSSOSection = (): JSX.Element => {
onClick={addSSOBtnClick} onClick={addSSOBtnClick}
colorSchema="secondary" colorSchema="secondary"
isDisabled={!isAllowed} isDisabled={!isAllowed}
leftIcon={<FontAwesomeIcon icon={faPlus} />}
> >
Configure Manage
</Button> </Button>
)} )}
</OrgPermissionCan> </OrgPermissionCan>
)} )}
</div> </div>
{/* {data && ( */} <p className="text-sm text-mineshaft-300">Manage SAML authentication configuration</p>
<div className="mb-4"> </div>
<div className="py-4">
<div className="mb-2 flex items-center justify-between">
<h2 className="text-md text-mineshaft-100">Enable SAML</h2>
{!isLoading && (
<OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Sso}> <OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Sso}>
{(isAllowed) => ( {(isAllowed) => (
<Switch <Switch
@@ -108,11 +110,12 @@ export const OrgSSOSection = (): JSX.Element => {
onCheckedChange={(value) => handleSamlSSOToggle(value)} onCheckedChange={(value) => handleSamlSSOToggle(value)}
isChecked={data ? data.isActive : false} isChecked={data ? data.isActive : false}
isDisabled={!isAllowed} isDisabled={!isAllowed}
> />
Enable
</Switch>
)} )}
</OrgPermissionCan> </OrgPermissionCan>
)}
</div>
<p className="text-sm text-mineshaft-300">Allow members to authenticate into Infisical with SAML</p>
</div> </div>
<SSOModal <SSOModal
popUp={popUp} popUp={popUp}
@@ -124,6 +127,6 @@ export const OrgSSOSection = (): JSX.Element => {
onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)} onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
text="You can use SAML SSO if you switch to Infisical's Pro plan." text="You can use SAML SSO if you switch to Infisical's Pro plan."
/> />
</div> </>
); );
}; };
frontend/src/views/Settings/OrgSettingsPage/components/OrgTabGroup/OrgTabGroup.tsx
+1 -1
View File
@@ -6,7 +6,7 @@ import { OrgGeneralTab } from "../OrgGeneralTab";
const tabs = [ const tabs = [
{ name: "General", key: "tab-org-general" }, { name: "General", key: "tab-org-general" },
{ name: "Authentication", key: "tab-org-auth" } { name: "Security", key: "tab-org-security" }
]; ];
export const OrgTabGroup = () => { export const OrgTabGroup = () => {
return ( return (