Skip to content

Commit

Permalink
Add a settings page for custom IdP and MFA (#308)
Browse files Browse the repository at this point in the history
  • Loading branch information
@braginini
braginini authored Dec 12, 2023
1 parent 0c924f7 commit b06cb0e
Showing 1 changed file with 145 additions and 4 deletions.
149 changes: 145 additions & 4 deletions src/views/Settings.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand All @@ -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);
Expand Down Expand Up @@ -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;
}
};
Expand Down Expand Up @@ -702,12 +715,12 @@ export const Settings = () => {
"System settings",
"sub2",
<SettingOutlined />,
[getItem("Authentication", "auth"), getItem("Groups", "groups"), getItem("Danger zone", "danger", undefined, undefined, undefined, !isOwner)],
[getItem("Authentication", "auth"), getItem("Groups", "groups"), getItem("Identity provider", "idp", undefined, undefined, undefined, !(isNetBirdHosted() || isLocalDev())), getItem("Danger zone", "danger", undefined, undefined, undefined, !isOwner)],
"group"
),
];

useEffect(() => {}, [groupsClicked, billingClicked, authClicked, dangerClicked]);
useEffect(() => {}, [groupsClicked, billingClicked, authClicked, dangerClicked, idpCLicked]);
const renderGroupsSettingForm = () => {
return(
<>
Expand Down Expand Up @@ -1034,9 +1047,10 @@ export const Settings = () => {
/>
</Form.Item>
</div>

<Col
span={24}
style={{ marginTop: "10px", marginBottom: "24px" }}
style={{ marginTop: "-10px", marginBottom: "24px" }}
>
<Text type={"secondary"}>
Learn more about
Expand All @@ -1050,6 +1064,125 @@ export const Settings = () => {
</a>
</Text>
</Col>
{(isNetBirdHosted() || isLocalDev()) && (
<Col span={24}
style={{ marginTop: "10px", marginBottom: "24px" }}>
<label
style={{
color: "rgba(0, 0, 0, 0.88)",
fontSize: "14px",
fontWeight: "500",
}}
>
Multi-factor authentication (MFA)
</label>
<Paragraph
type={"secondary"}
style={{
marginTop: "-2",
fontWeight: "400",
marginBottom: "5px",
}}
>
<Text type={"secondary"}>
If your IdP supports MFA, it will work automatically with NetBird. Otherwise, contact us at
<a
target="_blank"
rel="noreferrer"
href="mailto:[email protected]"
>
{" "}
[email protected]
{" "}
</a>
to enable this feature
</Text>
</Paragraph>
</Col>)}
</>
)
}

const renderIdpSettingsForm = () => {
return (
<>
<div
style={{
color: "rgba(0, 0, 0, 0.88)",
fontWeight: "500",
fontSize: "18px",
marginBottom: "20px",
}}
>
Identity provider
</div>
<div >

<Row>
<Col span={24}>
<label
style={{
color: "rgba(0, 0, 0, 0.88)",
fontSize: "14px",
fontWeight: "500",
}}
>
User and group sync
</label>
<Paragraph
type={"secondary"}
style={{
marginTop: "-2",
fontWeight: "400",
marginBottom: "5px",
}}
>
Sync users and groups from your IdP to use them in access control
</Paragraph>
</Col>
</Row>

<Col span={24}
style={{ marginTop: "10px", marginBottom: "24px" }}>
<label
style={{
color: "rgba(0, 0, 0, 0.88)",
fontSize: "14px",
fontWeight: "500",
}}
>
Custom IdP
</label>
<Paragraph
type={"secondary"}
style={{
marginTop: "-2",
fontWeight: "400",
marginBottom: "5px",
}}
>
Configure your custom IdP like Okta or Jumpcloud
</Paragraph>
</Col>

<Col
span={24}
style={{ marginTop: "10px", marginBottom: "24px" }}
>
<Text type={"secondary"}>
To enable these features, please contact us at
<a
target="_blank"
rel="noreferrer"
href="mailto:[email protected]"
>
{" "}
[email protected]
</a>
</Text>
</Col>
</div>

</>
)
}
Expand Down Expand Up @@ -1125,6 +1258,9 @@ export const Settings = () => {
if (dangerClicked) {
loaded = renderDangerSettingsForm()
}
if (idpCLicked) {
loaded = renderIdpSettingsForm()
}

return (
<Form
Expand All @@ -1135,7 +1271,7 @@ export const Settings = () => {
>
<Card loading={loading} defaultValue={"Enabled"}>
{loaded}
{!dangerClicked && (<Form.Item style={{ marginBottom: "0" }}>
{!(dangerClicked || idpCLicked) && (<Form.Item style={{ marginBottom: "0" }}>
<Button type="primary" htmlType="submit">
Save
</Button>
Expand Down Expand Up @@ -1566,6 +1702,11 @@ export const Settings = () => {
<Col span={24}>{renderSettingForm()}</Col>
</Row>
)}
{idpCLicked && (
<Row style={{ marginTop: "0", width: "100%" }}>
<Col span={24}>{renderSettingForm()}</Col>
</Row>
)}
</Col>
</Row>
</Container>
Expand Down

0 comments on commit b06cb0e

Please sign in to comment.