Added JWT allow groups support in account settings

netbirdio · Dec 12, 2023 · dd35270 · dd35270
1 parent 5f8579b
commit dd35270
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 0 deletions.
diff --git a/src/store/account/types.ts b/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;
 }
diff --git a/src/views/Settings.tsx b/src/views/Settings.tsx
@@ -140,6 +140,7 @@ export const Settings = () => {
   const [groupsPropagationEnabled, setGroupsPropagationEnabled] =
     useState(true);
   const [jwtGroupsClaimName, setJwtGroupsClaimName] = useState("");
+  const [jwtAllowGroups, setJwtAllowGroups ]  = useState<string[]>([]);
   const [confirmModal, confirmModalContextHolder] = Modal.useModal();
   const { confirm } = Modal;
 
@@ -254,6 +255,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[0]],
       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 +265,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,6 +431,7 @@ 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
@@ -464,6 +468,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 +498,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 +536,7 @@ export const Settings = () => {
 
   const saveAccount = (newValues: FormAccount) => {
     let accountToSave = createAccountToSave(newValues);
+
     dispatch(
       accountActions.updateAccount.request({
         getAccessTokenSilently: getTokenSilently,
@@ -862,6 +869,47 @@ 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",
+                          }}
+                      >
+                        Specify the JWT allow group name for allowing access, e.g., VPN user.
+                      </Paragraph>
+                    </Col>
+                  </Row>
+                  <Row>
+
+
+                    <Col lg={6}>
+                      <Form.Item name="jwt_allow_groups">
+                        <Input
+                            value={jwtAllowGroups[0]}
+                            autoComplete="off"
+                            onKeyDown={(event) => {
+                              if (event.code === "Space") event.preventDefault();
+                            }}
+                            onChange={(e) => {
+                              setJwtAllowGroups([e.target.value]);
+                            }}
+                        />
+                      </Form.Item>
+                    </Col>
+                  </Row>
                 </>
             )}
           </div>