adding peers approval flag to non user bound devices (#310)

src/store/account/types.ts

@@ -8,6 +8,7 @@ export interface Account {
     jwt_groups_enabled: boolean;
     groups_propagation_enabled: boolean;
     jwt_groups_claim_name: string;
+    jwt_allow_groups: string[];
     extra: {
       peer_approval_enabled: boolean;
     }
@@ -19,6 +20,7 @@ export interface FormAccount extends Account {
   jwt_groups_enabled: boolean;
   groups_propagation_enabled: boolean;
   jwt_groups_claim_name: string;
+  jwt_allow_groups: string[];
   peer_login_expiration_formatted: ExpiresInValue;
   peer_approval_enabled: boolean;
 }

src/views/Peers.tsx

@@ -679,7 +679,15 @@ export const Peers = () => {
               </Row>
             </span>
           </Button>
-          <Row>{loginExpire}</Row>
+          <Row style={{ minWidth: "195px", paddingLeft: "15px" }}>{loginExpire} <Button
+              type="text"
+              style={{ height: "auto", whiteSpace: "normal", textAlign: "center", padding: "0px", margin: "0px" }}
+              onClick={() => showConfirmApprove(peer)}
+              className={!isAdmin ? "nohover" : ""}
+          >
+            {approval}
+          </Button>
+          </Row>
         </>
       );
     }

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);
@@ -140,6 +142,8 @@ export const Settings = () => {
   const [groupsPropagationEnabled, setGroupsPropagationEnabled] =
     useState(true);
   const [jwtGroupsClaimName, setJwtGroupsClaimName] = useState("");
+  const [jwtAllowGroups, setJwtAllowGroups]  = useState<string[]>([]);
+  const [displayJWTAllowGroups, setDisplayJWTAllowGroups]  = useState(false);
   const [confirmModal, confirmModalContextHolder] = Modal.useModal();
   const { confirm } = Modal;
 
@@ -254,6 +258,7 @@ export const Settings = () => {
         account.settings.peer_login_expiration_enabled,
       jwt_groups_enabled: account.settings.jwt_groups_enabled,
       jwt_groups_claim_name: account.settings.jwt_groups_claim_name,
+      jwt_allow_groups: account.settings.jwt_allow_groups? account.settings.jwt_allow_groups : [],
       groups_propagation_enabled: account.settings.groups_propagation_enabled,
       peer_approval_enabled: account.settings.extra ? account.settings.extra.peer_approval_enabled : false,
     } as FormAccount;
@@ -263,6 +268,7 @@ export const Settings = () => {
     setJwtGroupsEnabled(fAccount.jwt_groups_enabled);
     setGroupsPropagationEnabled(fAccount.groups_propagation_enabled);
     setJwtGroupsClaimName(fAccount.jwt_groups_claim_name);
+    setJwtAllowGroups(fAccount.jwt_allow_groups);
     form.setFieldsValue(fAccount);
   }, [accounts]);
 
@@ -428,9 +434,10 @@ export const Settings = () => {
         jwt_groups_enabled: updatedAccount.data.settings.jwt_groups_enabled,
         jwt_groups_claim_name:
           updatedAccount.data.settings.jwt_groups_claim_name,
+        jwt_allow_groups: updatedAccount.data.settings.jwt_allow_groups,
         groups_propagation_enabled:
           updatedAccount.data.settings.groups_propagation_enabled,
-        peer_approval_enabled: updatedAccount.data.settings.extra.peer_approval_enabled
+        peer_approval_enabled: updatedAccount.data.settings.extra? updatedAccount.data.settings.extra.peer_approval_enabled : false,
       } as FormAccount;
       setFormAccount(fAccount);
     } else if (updatedAccount.error) {
@@ -464,6 +471,7 @@ export const Settings = () => {
           peer_login_expiration_enabled: formPeerExpirationEnabled,
           jwt_groups_enabled: jwtGroupsEnabled,
           jwt_groups_claim_name: jwtGroupsClaimName,
+          jwt_allow_groups: jwtAllowGroups,
           groups_propagation_enabled: groupsPropagationEnabled,
           peer_approval_enabled: formPeerApprovalEnabled,
         });
@@ -493,6 +501,7 @@ export const Settings = () => {
         peer_login_expiration_enabled: values.peer_login_expiration_enabled,
         jwt_groups_enabled: jwtGroupsEnabled,
         jwt_groups_claim_name: jwtGroupsClaimName,
+        jwt_allow_groups: jwtAllowGroups,
         groups_propagation_enabled: groupsPropagationEnabled,
       },
     } as Account;
@@ -530,6 +539,7 @@ export const Settings = () => {
 
   const saveAccount = (newValues: FormAccount) => {
     let accountToSave = createAccountToSave(newValues);
+
     dispatch(
       accountActions.updateAccount.request({
         getAccessTokenSilently: getTokenSilently,
@@ -657,24 +667,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 +723,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(
         <>
@@ -862,6 +883,56 @@ export const Settings = () => {
                       </Form.Item>
                     </Col>
                   </Row>
+                  <Row>
+                    <Col span={12}>
+                      <label
+                          style={{
+                            color: "rgba(0, 0, 0, 0.88)",
+                            fontSize: "14px",
+                            fontWeight: "500",
+                          }}
+                      >
+                        JWT allow group
+                      </label>
+                      <Paragraph
+                          type={"secondary"}
+                          style={{
+                            marginTop: "-2",
+                            fontWeight: "400",
+                            marginBottom: "5px",
+                          }}
+                      >
+                        Limit access to NetBird for the specified group name, e.g., NetBird users.
+                        To use the group, first you need to configure it first in your IdP.
+                      </Paragraph>
+                    </Col>
+                  </Row>
+                  <Row>
+                    <Col lg={6}>
+                      <Form.Item name="jwt_allow_groups" style={displayJWTAllowGroups ? {marginBottom: "2px",} : {}}>
+                        <Input
+                            value={jwtAllowGroups[0]}
+                            autoComplete="off"
+                            onChange={(e) => {
+                              setJwtAllowGroups([e.target.value]);
+                              setDisplayJWTAllowGroups(true);
+                            }}
+                        />
+                      </Form.Item>
+                    </Col>
+                  </Row>
+                  { displayJWTAllowGroups && (
+                      <Row>
+                        <Paragraph style={{
+                          marginTop: "-20",
+                          fontWeight: "400",
+                          marginBottom: "5px",
+                          color: "red"
+                        }}>
+                          To prevent losing access, ensure you are part of this group.
+                        </Paragraph>
+                      </Row>
+                  )}
                 </>
             )}
           </div>
@@ -909,9 +980,7 @@ export const Settings = () => {
                       >
                         Peer approval{" "}
                         <Tooltip
-                            title="Peer approval requires that every newly added peer
-                          will require approval by an administrator before it can connect to other peers.
-                          You can approve peers in the peers tab."
+                            title="When enabled, every newly added peer will require approval by an administrator before it can connect to other peers. You can approve peers in the peers tab."
                         >
                           <Text
                               style={{
@@ -1036,9 +1105,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
@@ -1052,6 +1122,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:support@netbird.io"
+                  >
+                    {" "}
+                    support@netbird.io
+                    {" "}
+                  </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:support@netbird.io"
+                >
+                  {" "}
+                  support@netbird.io
+                </a>
+              </Text>
+            </Col>
+          </div>
+
         </>
     )
   }
@@ -1127,6 +1316,9 @@ export const Settings = () => {
     if (dangerClicked) {
         loaded = renderDangerSettingsForm()
     }
+    if (idpCLicked) {
+        loaded = renderIdpSettingsForm()
+    }
 
     return (
       <Form
@@ -1137,7 +1329,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>
@@ -1568,6 +1760,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>