diff --git a/src/views/Settings.tsx b/src/views/Settings.tsx index 724b54c6..3a3edf28 100644 --- a/src/views/Settings.tsx +++ b/src/views/Settings.tsx @@ -50,6 +50,7 @@ import { actions as routeActions } from "../store/route"; import { actions as userActions } from "../store/user"; import {useOidc} from "@axa-fr/react-oidc"; import {getConfig} from "../config"; +import {Link} from "react-router-dom"; const { Title, Paragraph, Text } = Typography; @@ -76,6 +77,7 @@ export const Settings = () => { ]; const [groupsClicked, setGroupsClicked] = useState(false); + const [idpCLicked, setIdpClicked] = useState(false); const [billingClicked, setBillingClicked] = useState(false); const [authClicked, setAuthClicked] = useState(true); const [dangerClicked, setDangerClicked] = useState(false); @@ -657,24 +659,35 @@ export const Settings = () => { setGroupsClicked(false); setBillingClicked(false); setDangerClicked(false); + setIdpClicked(false); break; case "groups": setGroupsClicked(true); setBillingClicked(false); setAuthClicked(false); setDangerClicked(false); + setIdpClicked(false); break; case "billing": setBillingClicked(true); setAuthClicked(false); setGroupsClicked(false); setDangerClicked(false); + setIdpClicked(false); break; case "danger": setBillingClicked(false); setAuthClicked(false); setGroupsClicked(false); setDangerClicked(true); + setIdpClicked(false); + break; + case "idp": + setIdpClicked(true); + setBillingClicked(false); + setAuthClicked(false); + setGroupsClicked(false); + setDangerClicked(false); break; } }; @@ -702,12 +715,12 @@ export const Settings = () => { "System settings", "sub2", , - [getItem("Authentication", "auth"), getItem("Groups", "groups"), getItem("Danger zone", "danger", undefined, undefined, undefined, !isOwner)], + [getItem("Authentication", "auth"), getItem("Groups", "groups"), getItem("Identity provider", "idp"), getItem("Danger zone", "danger", undefined, undefined, undefined, !isOwner)], "group" ), ]; - useEffect(() => {}, [groupsClicked, billingClicked, authClicked, dangerClicked]); + useEffect(() => {}, [groupsClicked, billingClicked, authClicked, dangerClicked, idpCLicked]); const renderGroupsSettingForm = () => { return( <> @@ -1036,9 +1049,10 @@ export const Settings = () => { /> + Learn more about @@ -1052,6 +1066,124 @@ export const Settings = () => { + + + + + If your IdP supports MFA, it will work automatically with NetBird. Otherwise, contact us at + + {" "} + support@netbird.io + {" "} + + to enable this feature + + + + + ) + } + + const renderIdpSettingsForm = () => { + return ( + <> +
+ Identity provider +
+
+ + + + + + Sync users and groups from your IdP to use them in access control + + + + + + + + Configure your custom IdP like Okta or Jumpcloud + + + + + + To enable these features, please contact us at + + {" "} + support@netbird.io + + + +
+ ) } @@ -1127,6 +1259,9 @@ export const Settings = () => { if (dangerClicked) { loaded = renderDangerSettingsForm() } + if (idpCLicked) { + loaded = renderIdpSettingsForm() + } return (
{ > {loaded} - {!dangerClicked && ( + {!(dangerClicked || idpCLicked) && ( @@ -1568,6 +1703,11 @@ export const Settings = () => { {renderSettingForm()} )} + {idpCLicked && ( + + {renderSettingForm()} + + )}