Switch to activate/deactivate a user (#179)

This PR adds a switch to deactivate (or block) a user. Only admins can block/unblock users. Users can't block themselves.
netbirdio · May 15, 2023 · b595e0d · b595e0d
1 parent 33621ca
commit b595e0d
Show file tree

Hide file tree

Showing 6 changed files with 164 additions and 69 deletions.
diff --git a/src/components/UserEdit.tsx b/src/components/UserEdit.tsx
@@ -10,7 +10,7 @@ import {
     Row,
     Select,
     Skeleton,
-    Space, Table,
+    Space, Switch, Table,
     Tag, Typography
 } from "antd";
 import {useDispatch, useSelector} from "react-redux";
@@ -63,6 +63,7 @@ const UserEdit = () => {
 
     const [formUser, setFormUser] = useState({} as FormUser)
     const [form] = Form.useForm()
+    const [isAdmin, setIsAdmin] = useState(false);
 
     const [confirmModal, confirmModalContextHolder] = Modal.useModal();
 
@@ -87,10 +88,20 @@ const UserEdit = () => {
             name: values.name,
             groupsToCreate: groupsToCreate,
             auto_groups: autoGroups,
-            is_service_user: isServiceUser
+            is_service_user: isServiceUser,
+            is_blocked: !values.is_active
         } as UserToSave
     }
 
+    useEffect(() => {
+        if(users) {
+            let currentUser = users.find((user) => user.is_current)
+            if(currentUser) {
+                setIsAdmin(currentUser.role === "admin");
+            }
+        }
+    }, [users])
+
     const handleFormSubmit = () => {
         form.validateFields()
             .then((values) => {
@@ -274,6 +285,8 @@ const UserEdit = () => {
                 name: user.name,
                 role: user.role,
                 email: user.email,
+                is_blocked: user.is_blocked,
+                is_active: !user.is_blocked,
                 autoGroupsNames: currentGroups,
             })
         }
@@ -314,6 +327,8 @@ const UserEdit = () => {
                                   name: formUser.name,
                                   role: formUser.role,
                                   email: formUser.email,
+                                  is_blocked: formUser.is_blocked,
+                                  is_active:  !formUser.is_blocked,
                                   autoGroupsNames: formUser.autoGroupsNames,
                               }}
                         >
@@ -346,30 +361,45 @@ const UserEdit = () => {
                                     </Form.Item>
                                 </Col>
                             </Row>
+
                             {!user.is_service_user && <Row style={{paddingBottom: "15px"}}>
-                                <Col span={9}>
+
+                                <Col xs={24} sm={24} md={11} lg={11} xl={11} xxl={11} span={11}>
+                                        <Form.Item
+                                            name="autoGroupsNames"
+                                            label={<Text style={{}}>Auto-assigned groups</Text>}
+                                            tooltip="Every peer enrolled with this user will be automatically added to these groups"
+                                            rules={[{validator: selectValidator}]}
+                                            style={{marginRight: "70px"}}
+                                        >
+                                            <Select mode="tags"
+                                                    placeholder="Associate groups with the user"
+                                                    tagRender={tagRender}
+                                                    dropdownRender={dropDownRender}
+                                                    disabled={oidcUser && !isUserAdmin(oidcUser.sub)}
+                                            >
+                                                {
+                                                    tagGroups.map(m =>
+                                                        <Option key={m}>{optionRender(m)}</Option>
+                                                    )
+                                                }
+                                            </Select>
+                                        </Form.Item>
+                                    </Col>
+
+                                {!user.is_current && isAdmin && (
+                                <Col xs={24} sm={24} md={5} lg={5} xl={5} xxl={5} span={5}>
                                     <Form.Item
-                                        name="autoGroupsNames"
-                                        label={<Text style={{}}>Auto-assigned groups</Text>}
-                                        tooltip="Every peer enrolled with this user will be automatically added to these groups"
-                                        rules={[{validator: selectValidator}]}
+                                        valuePropName="checked"
+                                        name="is_active"
+                                        label="Active"
+                                        style={{marginRight: "50px"}}
                                     >
-                                        <Select mode="tags"
-                                                style={{width: '100%'}}
-                                                placeholder="Associate groups with the user"
-                                                tagRender={tagRender}
-                                                dropdownRender={dropDownRender}
-                                                disabled={oidcUser && !isUserAdmin(oidcUser.sub)}
-                                        >
-                                            {
-                                                tagGroups.map(m =>
-                                                    <Option key={m}>{optionRender(m)}</Option>
-                                                )
-                                            }
-                                        </Select>
+                                        <Switch/>
                                     </Form.Item>
-                                </Col>
+                                </Col>)}
                             </Row>}
+
                             <Space style={{display: 'flex', justifyContent: 'start'}}>
                                 <Button disabled={loading} onClick={onCancel}>Cancel</Button>
                                 <Button type="primary"

diff --git a/src/store/user/sagas.ts b/src/store/user/sagas.ts
@@ -5,8 +5,6 @@ import service from './service';
 import actions from './actions';
 import serviceGroup from "../group/service";
 import {Group} from "../group/types";
-import {actions as groupActions} from "../group";
-import {PersonalAccessToken} from "../personal-access-token/types";
 
 export function* getUsers(action: ReturnType<typeof actions.getUsers.request>): Generator {
     try {
@@ -74,7 +72,8 @@ export function* saveUser(action: ReturnType<typeof actions.saveUser.request>):
             email: userToSave.email,
             role: userToSave.role,
             auto_groups: newGroups,
-            is_service_user: userToSave.is_service_user
+            is_service_user: userToSave.is_service_user,
+            is_blocked: userToSave.is_blocked
         } as UserToSave
 
         let effect

diff --git a/src/store/user/types.ts b/src/store/user/types.ts
@@ -7,10 +7,12 @@ export interface User {
     auto_groups: string[];
     is_current?: boolean;
     is_service_user?: boolean;
+    is_blocked?: boolean;
 }
 
 export interface FormUser extends User {
     autoGroupsNames: string[]
+    is_active?: boolean
 }
 
 export interface UserToSave extends User {