Update links to docs (#182)

This PR adds a switch to deactivate (or block) a user.
Only admins can block/unblock users.
Users can't block themselves.

src/components/AccessControlNew.tsx

@@ -408,7 +408,7 @@ const AccessControlNew = () => {
                             <Col span={24}>
                                 <Divider></Divider>
                                 <Button icon={<QuestionCircleFilled/>} type="link" target="_blank"
-                                        href="https://docs.netbird.io/docs/overview/acls">Learn more about access controls</Button>
+                                        href="https://docs.netbird.io/how-to/manage-network-access">Learn more about access controls</Button>
                             </Col>
                         </Row>
                     </Form>

src/components/Banner.tsx

@@ -22,7 +22,7 @@ const Banner = () => {
 	const linkLearnMore = () => {
 		return (
 			<a
-				href="https://netbird.io/docs/how-to-guides/nameservers"
+				href="https://docs.netbird.io/how-to/manage-dns-in-your-network"
 				className="font-bold underline"
 				target="_blank"
 				rel="noreferrer"

src/components/NameServerGroupUpdate.tsx

@@ -604,7 +604,7 @@ const NameServerGroupUpdate = () => {
                                 <Col span={24}>
                                     <Divider></Divider>
                                     <Button icon={<QuestionCircleFilled/>} type="link" target="_blank"
-                                            href="https://netbird.io/docs/how-to-guides/nameservers">Learn more about nameservers</Button>
+                                            href="https://docs.netbird.io/how-to/manage-dns-in-your-network">Learn more about nameservers</Button>
                                 </Col>
                             </Row>
                         </Form>) :

src/components/RouteUpdate.tsx

@@ -458,7 +458,7 @@ const RouteUpdate = () => {
                             <Col span={24}>
                                 <Divider></Divider>
                                 <Button icon={<QuestionCircleFilled/>} type="link" target="_blank"
-                                        href="https://netbird.io/docs/how-to-guides/network-routes">Learn more about network routes</Button>
+                                        href="https://docs.netbird.io/how-to/routing-traffic-to-private-networks">Learn more about network routes</Button>
                             </Col>
                         </Row>
                     </Form>

src/components/SetupKeyNew.tsx

@@ -555,7 +555,7 @@ const SetupKeyNew = () => {
                     <Row style={{marginTop: "40px", marginBottom: "28px"}}>
                         <Text type={"secondary"}>
                             Learn more about
-                            <a target="_blank" rel="noreferrer" href="https://netbird.io/docs/overview/setup-keys">
+                            <a target="_blank" rel="noreferrer" href="https://docs.netbird.io/how-to/register-machines-using-setup-keys">
                                 {" "}
                                 setup keys
                             </a>

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_blocked
         } 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) => {
@@ -102,18 +113,6 @@ const UserEdit = () => {
                 dispatch(userActions.setEditUserPopupVisible(false));
                 dispatch(userActions.setUser(null as unknown as User))
                 dispatch(personalAccessTokenActions.resetPersonalAccessTokens(null))
-                dispatch(groupActions.getGroups.request({
-                    getAccessTokenSilently: getTokenSilently,
-                    payload: null
-                }));
-                dispatch(userActions.getServiceUsers.request({
-                    getAccessTokenSilently: getTokenSilently,
-                    payload: null
-                }))
-                dispatch(userActions.getUsers.request({
-                    getAccessTokenSilently: getTokenSilently,
-                    payload: null
-                }))
             })
             .catch((errorInfo) => {
                 console.log('errorInfo', errorInfo)
@@ -286,29 +285,12 @@ const UserEdit = () => {
                 name: user.name,
                 role: user.role,
                 email: user.email,
+                is_blocked: user.is_blocked,
                 autoGroupsNames: currentGroups,
             })
         }
     }, [form, user, currentGroups])
 
-    const menuItems = [
-        {
-            key: '1',
-            label: (
-                <Text onClick={() => onBreadcrumbUsersClick("Users")}>
-                    Users
-                </Text>
-            ),
-        },
-        {
-            key: '2',
-            label: (
-                <Text onClick={() => onBreadcrumbUsersClick("Service Users")}>
-                    Service Users
-                </Text>
-            ),
-        },
-    ];
 
     const isUserAdmin = (userId: string): boolean => {
         return users.find(u => u.id === userId)?.role === "admin"
@@ -320,10 +302,10 @@ const UserEdit = () => {
                 <Breadcrumb style={{marginBottom: "30px"}}
                             items={[
                                 {
-                                    title: <Text onClick={() => onBreadcrumbUsersClick("Users")}>All Users</Text>,
+                                    title: <a onClick={() => onBreadcrumbUsersClick("Users")}>All Users</a>,
                                 },
                                 {
-                                    title: <Text onClick={() => onBreadcrumbUsersClick(tab)}>{tab}</Text>,
+                                    title: <a onClick={() => onBreadcrumbUsersClick(tab)}>{tab}</a>,
                                     // menu: { items: menuItems },
                                 },
                                 {
@@ -344,6 +326,7 @@ const UserEdit = () => {
                                   name: formUser.name,
                                   role: formUser.role,
                                   email: formUser.email,
+                                  is_blocked: formUser.is_blocked,
                                   autoGroupsNames: formUser.autoGroupsNames,
                               }}
                         >
@@ -376,30 +359,45 @@ const UserEdit = () => {
                                     </Form.Item>
                                 </Col>
                             </Row>
+
                             {!user.is_service_user && <Row style={{paddingBottom: "15px"}}>
-                                <Col span={9}>
-                                    <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}]}
-                                    >
-                                        <Select mode="tags"
-                                                style={{width: '100%'}}
-                                                placeholder="Associate groups with the user"
-                                                tagRender={tagRender}
-                                                dropdownRender={dropDownRender}
-                                                disabled={oidcUser && !isUserAdmin(oidcUser.sub)}
+
+                                <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"}}
                                         >
-                                            {
-                                                tagGroups.map(m =>
-                                                    <Option key={m}>{optionRender(m)}</Option>
-                                                )
-                                            }
-                                        </Select>
+                                            <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
+                                        valuePropName="checked"
+                                        name="is_blocked"
+                                        label="Block user"
+                                        style={{marginRight: "50px"}}
+                                    >
+                                        <Switch/>
                                     </Form.Item>
-                                </Col>
+                                </Col>)}
                             </Row>}
+
                             <Space style={{display: 'flex', justifyContent: 'start'}}>
                                 <Button disabled={loading} onClick={onCancel}>Cancel</Button>
                                 <Button type="primary"

src/components/popups/AddPATPopup.tsx

@@ -193,10 +193,10 @@ const AddPATPopup = () => {
                                 </Form.Item>
                                 <Paragraph type={"secondary"} style={{fontSize: "14px", marginTop: "-18px"}}>Should be between 1 and 365 days</Paragraph>
                             </Col>
-                            {/*<Col span={24}>*/}
-                            {/*    <Button icon={<QuestionCircleFilled/>} type="link" target="_blank" disabled={true} style={{marginTop: "20px", marginBottom: "20px"}}*/}
-                            {/*            href="https://netbird.io/docs/overview/personal-access-tokens">Learn more about personal access tokens</Button>*/}
-                            {/*</Col>*/}
+                            <Col span={24}>
+                                <Button icon={<QuestionCircleFilled/>} type="link" target="_blank" disabled={true} style={{marginTop: "20px", marginBottom: "20px"}}
+                                        href="https://docs.netbird.io/how-to/access-netbird-public-api">Learn more about personal access tokens</Button>
+                            </Col>
                         </Row>
                     </Form>}
                     {showPlainToken &&

src/components/popups/InviteUserPopup.tsx

@@ -21,6 +21,7 @@ import {actions as groupActions} from "../../store/group";
 import {User, UserToSave} from "../../store/user/types";
 import {RuleObject} from "antd/lib/form";
 import {CustomTagProps} from "rc-select/lib/BaseSelect";
+import {QuestionCircleFilled} from "@ant-design/icons";
 
 const {Title, Text, Paragraph} = Typography;
 const {Option} = Select;
@@ -298,10 +299,10 @@ const InviteUserPopup = () => {
                                     </Select>
                                 </Form.Item>
                             </Col>
-                            {/*<Col span={24}>*/}
-                            {/*    <Button icon={<QuestionCircleFilled/>} type="link" target="_blank" disabled={true} style={{marginTop: "20px", marginBottom: "20px"}}*/}
-                            {/*            href="https://netbird.io/docs/overview/personal-access-tokens">Learn more about user</Button>*/}
-                            {/*</Col>*/}
+                            <Col span={24}>
+                                <Button icon={<QuestionCircleFilled/>} type="link" target="_blank" disabled={true} style={{marginTop: "20px", marginBottom: "20px"}}
+                                        href="https://docs.netbird.io/how-to/access-netbird-public-api">Learn more about user</Button>
+                            </Col>
                         </Row>
                     </Form>
                 </Container>

src/components/popups/addpeer/addpeer/AddPeerPopup.tsx

@@ -10,6 +10,7 @@ import WindowsTab from "./WindowsTab";
 import MacTab from "./MacTab";
 import Link from "antd/lib/typography/Link";
 import DockerTab from "./DockerTab";
+import AndroidTab from "./AndroidTab";
 
 type Props = {
     greeting?: string;
@@ -51,11 +52,11 @@ export const AddPeerPopup: React.FC<Props> = ({
             label: <span><AppleFilled/>macOS</span>,
             children: <MacTab/>,
         },
-        /*{
+        {
             key: "4",
             label: <span><AndroidFilled/>Android</span>,
-            children: <></>,
-        },*/
+            children: <AndroidTab/>,
+        },
         {
             key: "5",
             label: <span><Icon component={DockerSVG}/>Docker</span>,
@@ -91,7 +92,7 @@ export const AddPeerPopup: React.FC<Props> = ({
             After that you should be connected. Add more devices to your network or manage your existing devices in the
             admin panel.
             If you have further questions check out our {<Link target="_blank"
-                                                               href={"https://netbird.io/docs/getting-started/installation"}>installation
+                                                               href={"https://docs.netbird.io/how-to/getting-started#installation"}>installation
             guide</Link>}
         </Paragraph>
     </>

src/components/popups/addpeer/addpeer/AndroidTab.tsx

@@ -0,0 +1,51 @@
+import React, {useState} from 'react';
+
+import {Button, Image, Typography} from "antd";
+import TabSteps from "./TabSteps";
+import { StepCommand } from "./types"
+import googleplay from '../../../../assets/google-play-badge.png';
+const {Text} = Typography;
+
+export const AndroidTab = () => {
+
+    const [steps, setSteps] = useState([
+        {
+            key: 1,
+            title: 'Download and install the application from Google Play Store:',
+            commands: (
+                <a href="https://play.google.com/store/apps/details?id=io.netbird.client" target="_blank">
+                    <Image width="12em" preview={false} style={{marginTop: "5px"}} src={googleplay}/>
+                </a>
+            ),
+            copied: false
+        } as StepCommand,
+        {
+            key: 2,
+            title: 'Run the application and click on the "Connect" button in the middle of the screen',
+            commands: '',
+            copied: false,
+            showCopyButton: false
+        },
+        {
+            key: 3,
+            title: 'Sign up using your email address',
+            commands: '',
+            copied: false,
+            showCopyButton: false
+        }
+    ])
+
+    return (
+        <div style={{marginTop: 10}}>
+            <Text style={{fontWeight: "bold"}}>
+                Install on Android
+            </Text>
+            <div style={{marginTop: 5}}>
+                <TabSteps stepsItems={steps}/>
+            </div>
+
+        </div>
+    )
+}
+
+export default AndroidTab

src/components/popups/addpeer/addpeer/DockerTab.tsx

@@ -31,7 +31,7 @@ export const DockerTab = () => {
             key: 3,
             title: "Read docs",
             commands: (
-                <Link href="https://netbird.io/docs/getting-started/installation#running-netbird-in-docker" target="_blank">Running NetBird in Docker</Link>
+                <Link href="https://docs.netbird.io/how-to/getting-started#running-net-bird-in-docker" target="_blank">Running NetBird in Docker</Link>
             ),
             copied: false,
             showCopyButton: false

src/components/popups/addpeer/addpeer/LinuxTab.tsx

@@ -12,7 +12,7 @@ export const OtherTab = () => {
             key: 1,
             title: 'For other installation options check our documentation.',
             commands: (
-                <Button type="primary" href={`https://netbird.io/docs/getting-started/installation#binary-install`} target="_blank">
+                <Button type="primary" href={`https://docs.netbird.io/how-to/getting-started#binary-install`} target="_blank">
                     Documentation
                 </Button>
             ),

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
@@ -99,15 +98,6 @@ export function* saveUser(action: ReturnType<typeof actions.saveUser.request>):
             error: null,
             data: response.body
         } as CreateResponse<User | null>));
-
-        yield put(groupActions.getGroups.request({
-            getAccessTokenSilently: action.payload.getAccessTokenSilently,
-            payload: null
-        }));
-        yield put(actions.getUsers.request({
-            getAccessTokenSilently: action.payload.getAccessTokenSilently,
-            payload: null
-        }));
     } catch (err) {
         yield put(actions.saveUser.failure({
             loading: false,

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 {

src/views/AccessControl.tsx

@@ -27,7 +27,7 @@ import {Rule} from "../store/rule/types";
 import {actions as ruleActions} from "../store/rule";
 import {actions as groupActions} from "../store/group";
 import {filter, sortBy} from "lodash";
-import {CloseOutlined, ExclamationCircleOutlined} from "@ant-design/icons";
+import {CloseOutlined, EllipsisOutlined, ExclamationCircleOutlined} from "@ant-design/icons";
 import bidirect from '../assets/direct_bi.svg';
 import inbound from '../assets/direct_in.svg';
 import outbound from '../assets/direct_out.svg';
@@ -37,6 +37,7 @@ import AccessControlModalGroups from "../components/AccessControlModalGroups";
 import tableSpin from "../components/Spin";
 import {useGetTokenSilently} from "../utils/token";
 import {usePageSizeHelpers} from "../utils/pageSize";
+import {PeerDataTable} from "../store/peer/types";
 
 const {Title, Paragraph, Text} = Typography;
 const {Column} = Table;
@@ -449,11 +450,17 @@ export const AccessControl = () => {
                                     <Column title="" align="center"
                                             render={(text, record, index) => {
                                                 if (deletedRule.loading || savedRule.loading) return <></>
-                                                return <Dropdown.Button type="text" overlay={actionsMenu}
-                                                                        trigger={["click"]}
-                                                                        onOpenChange={visible => {
-                                                                            if (visible) setRuleToAction(record as RuleDataTable)
-                                                                        }}></Dropdown.Button>
+                                                return (
+                                                        <Dropdown trigger={["click"]} overlay={actionsMenu} onOpenChange={visible => {
+                                                            if (visible) setRuleToAction(record as RuleDataTable)
+                                                        }}>
+                                                            <Button type="text">
+                                                                <Space>
+                                                                    <EllipsisOutlined />
+                                                                </Space>
+                                                            </Button>
+                                                        </Dropdown>
+                                                    )
                                             }}
                                     />
                                 </Table>

src/views/Activity.tsx

@@ -212,6 +212,8 @@ export const Activity = () => {
             case "service.user.delete":
                 return renderMultiRowSpan(event.meta.name,"Service User")
             case "user.invite":
+            case "user.block":
+            case "user.unblock":
                 if (user) {
                     return renderMultiRowSpan(user.name ? user.name : user.id,user.email ? user.email : "User")
                 }
@@ -252,7 +254,7 @@ export const Activity = () => {
                                     <Row justify="end">
                                         <Col>
                                             <Button icon={<QuestionCircleFilled/>} type="link" target="_blank"
-                                                    href="https://netbird.io/docs/how-to-guides/activity-monitoring">Learn more about activity tracking</Button>
+                                                    href="https://docs.netbird.io/how-to/monitor-system-and-network-activity">Learn more about activity tracking</Button>
                                         </Col>
                                     </Row>
                                 </Col>

src/views/Nameservers.tsx

@@ -31,7 +31,7 @@ import {Group} from "../store/group/types";
 import {TooltipPlacement} from "antd/es/tooltip";
 import {NameServer, NameServerGroup} from "../store/nameservers/types";
 import NameServerGroupUpdate from "../components/NameServerGroupUpdate";
-import {ExclamationCircleOutlined} from "@ant-design/icons";
+import {EllipsisOutlined, ExclamationCircleOutlined} from "@ant-design/icons";
 import {useGetGroupTagHelpers} from "../utils/groups";
 import {usePageSizeHelpers} from "../utils/pageSize";
 
@@ -441,11 +441,16 @@ export const Nameservers = () => {
                                     <Column title="" align="center" width="30px"
                                             render={(text, record) => {
                                                 return (
-                                                    <Dropdown.Button type="text" overlay={actionsMenu}
-                                                                     trigger={["click"]}
-                                                                     onOpenChange={visible => {
-                                                                         if (visible) setNsGroupToAction(record as NameserverGroupDataTable)
-                                                                     }}></Dropdown.Button>)
+                                                    <Dropdown trigger={["click"]} overlay={actionsMenu} onOpenChange={visible => {
+                                                        if (visible) setNsGroupToAction(record as NameserverGroupDataTable)
+                                                    }}>
+                                                        <Button type="text">
+                                                            <Space>
+                                                                <EllipsisOutlined />
+                                                            </Space>
+                                                        </Button>
+                                                    </Dropdown>
+                                                )
                                             }}
                                     />
                                 </Table>

src/views/Peers.tsx

@@ -6,7 +6,7 @@ import {actions as peerActions} from '../store/peer';
 import {actions as groupActions} from '../store/group';
 import {actions as routeActions} from '../store/route';
 import {Container} from "../components/Container";
-import {ExclamationCircleOutlined, ReloadOutlined,} from '@ant-design/icons';
+import {EllipsisOutlined, ExclamationCircleOutlined, ReloadOutlined,} from '@ant-design/icons';
 import {
     Alert,
     Button,
@@ -611,11 +611,17 @@ export const Peers = () => {
                                     <Column title="Version" dataIndex="version"/>
                                     <Column title="" align="center"
                                             render={(text, record, index) => {
-                                                return <Dropdown.Button type="text" overlay={actionsMenu}
-                                                                        trigger={["click"]}
-                                                                        onOpenChange={visible => {
-                                                                            if (visible) setPeerToAction(record as PeerDataTable)
-                                                                        }}></Dropdown.Button>
+                                                return (
+                                                    <Dropdown trigger={["click"]} overlay={actionsMenu} onOpenChange={visible => {
+                                                        if (visible) setPeerToAction(record as PeerDataTable)
+                                                    }}>
+                                                        <Button type="text">
+                                                            <Space>
+                                                                <EllipsisOutlined />
+                                                            </Space>
+                                                        </Button>
+                                                    </Dropdown>
+                                                    )
                                             }}
                                     />
                                 </Table>)}

src/views/RegularUsers.tsx

@@ -1,4 +1,4 @@
-import React, {useEffect,  useState} from 'react';
+import React, {useEffect, useState} from 'react';
 import {useDispatch, useSelector} from "react-redux";
 import {RootState} from "typesafe-actions";
 import {actions as userActions} from '../store/user';
@@ -8,29 +8,33 @@ import {
     Button,
     Card,
     Col,
-    Dropdown,
+    Dropdown, Empty,
     Input,
     Menu,
     message, Modal,
     Popover,
     Row,
     Select,
-    Space,
+    Space, Switch,
     Table,
-    Tag,
+    Tag, Tooltip,
     Typography,
 } from "antd";
-import {User} from "../store/user/types";
+import {User, UserToSave} from "../store/user/types";
 import {filter} from "lodash";
 import tableSpin from "../components/Spin";
 import {useGetTokenSilently} from "../utils/token";
 import {actions as groupActions} from "../store/group";
 import {Group} from "../store/group/types";
 import {TooltipPlacement} from "antd/es/tooltip";
-import {isLocalDev, isNetBirdHosted} from "../utils/common";
+import {capitalize, isLocalDev, isNetBirdHosted} from "../utils/common";
 import {usePageSizeHelpers} from "../utils/pageSize";
 import AddServiceUserPopup from "../components/popups/AddServiceUserPopup";
 import InviteUserPopup from "../components/popups/InviteUserPopup";
+import {Peer, PeerDataTable} from "../store/peer/types";
+import {ExclamationCircleOutlined, MinusOutlined} from "@ant-design/icons";
+import {actions as peerActions} from "../store/peer";
+import {useOidcUser} from "@axa-fr/react-oidc";
 
 const {Title, Paragraph, Text} = Typography;
 const {Column} = Table;
@@ -42,10 +46,12 @@ interface UserDataTable extends User {
 const styleNotification = {marginTop: 85}
 
 export const RegularUsers = () => {
-    const {onChangePageSize,pageSizeOptions,pageSize} = usePageSizeHelpers()
+    const {onChangePageSize, pageSizeOptions, pageSize} = usePageSizeHelpers()
     const {getTokenSilently} = useGetTokenSilently()
     const dispatch = useDispatch()
 
+    const [isAdmin, setIsAdmin] = useState(false);
+
     const groups = useSelector((state: RootState) => state.group.data)
     const users = useSelector((state: RootState) => state.user.regularUsers);
     const failed = useSelector((state: RootState) => state.user.failed);
@@ -114,6 +120,7 @@ export const RegularUsers = () => {
             auto_groups: userToAction?.auto_groups ? userToAction?.auto_groups : [],
             name: userToAction?.name,
             role: userToAction?.role,
+            is_blocked: userToAction?.is_blocked,
         } as User));
     }
 
@@ -122,6 +129,15 @@ export const RegularUsers = () => {
         dispatch(userActions.setUser(null as unknown as User));
     }
 
+    useEffect(() => {
+        if(users) {
+            let currentUser = users.find((user) => user.is_current)
+            if(currentUser) {
+                setIsAdmin(currentUser.role === "admin");
+            }
+        }
+    }, [users])
+
     const renderPopoverGroups = (label: string, rowGroups: string[] | string[] | null, userToAction: UserDataTable) => {
 
         let groupsMap = new Map<string, Group>();
@@ -196,10 +212,10 @@ export const RegularUsers = () => {
             let errorMsg = "Failed to update user"
             switch (savedUser.error.statusCode) {
                 case 412:
-                    errorMsg = savedUser.error.data
-                    break
                 case 403:
-                    errorMsg = "Failed to update user. You might not have enough permissions."
+                    if (savedUser.error.data) {
+                       errorMsg = capitalize(savedUser.error.data.message)
+                    }
                     break
             }
             message.error({
@@ -243,16 +259,59 @@ export const RegularUsers = () => {
             name: user.name,
             is_current: user.is_current,
             is_service_user: user.is_service_user,
+            is_blocked: user.is_blocked
         } as User));
         dispatch(userActions.setEditUserPopupVisible(true));
     }
 
+    const handleBlockUser = (block: boolean, user: UserDataTable) => {
+        if (block) {
+            confirmModal.confirm({
+                icon: <ExclamationCircleOutlined/>,
+                title: "Are you sure you want to block " + user.name + "?",
+                width: 600,
+                content: <Space direction="vertical" size="small">
+                    <Paragraph>Blocking this user will disconnect their devices and disable dashboard access.</Paragraph>
+                </Space>,
+                onOk() {
+                    let userToSave = createUserToSave(user, block)
+                    dispatch(userActions.saveUser.request({
+                        getAccessTokenSilently: getTokenSilently,
+                        payload: userToSave
+                    }));
+                },
+                onCancel() {
+                    // noop
+                },
+            });
+        } else {
+            let userToSave = createUserToSave(user, block)
+            dispatch(userActions.saveUser.request({
+                getAccessTokenSilently: getTokenSilently,
+                payload: userToSave
+            }));
+        }
+    }
+
+    const createUserToSave = (values: UserDataTable, block: boolean): UserToSave => {
+        return {
+            id: values.id,
+            role: values.role,
+            name: values.name,
+            groupsToCreate: Array.of(),
+            auto_groups: values.auto_groups,
+            is_service_user: values.is_service_user,
+            is_blocked: block
+        } as UserToSave
+    }
+
     return (
         <>
             <Container style={{padding: "0px"}}>
                 <Row>
                     <Col span={24}>
-                        <Paragraph>Manage users and their permissions.{(window.location.hostname == "app.netbird.io") ? "Same-domain email users are added automatically on first sign-in." : ""}</Paragraph>
+                        <Paragraph>Manage users and their
+                            permissions.{(window.location.hostname == "app.netbird.io") ? "Same-domain email users are added automatically on first sign-in." : ""}</Paragraph>
                         <Space direction="vertical" size="large" style={{display: 'flex'}}>
                             <Row gutter={[16, 24]}>
                                 <Col xs={24} sm={24} md={8} lg={8} xl={8} xxl={8} span={8}>
@@ -272,15 +331,16 @@ export const RegularUsers = () => {
                                      xl={5}
                                      xxl={5} span={5}>
                                     {(isNetBirdHosted() || isLocalDev()) &&
-                                    <Row justify="end">
-                                        <Col>
-                                            <Button type="primary" onClick={onClickInviteUser}>Invite User</Button>
-                                        </Col>
-                                    </Row>}
+                                        <Row justify="end">
+                                            <Col>
+                                                <Button type="primary" onClick={onClickInviteUser}>Invite user</Button>
+                                            </Col>
+                                        </Row>}
                                 </Col>
                             </Row>
                             {failed &&
-                                <Alert message={failed.message} description={failed.data ? failed.data.message : " "} type="error" showIcon
+                                <Alert message={failed.message} description={failed.data ? failed.data.message : " "}
+                                       type="error" showIcon
                                        closable/>
                             }
                             <Card bodyStyle={{padding: 0}}>
@@ -305,6 +365,7 @@ export const RegularUsers = () => {
                                                                     className="tooltip-label">
                                                     <Text
                                                         strong>{(text && text.trim() !== "") ? text : (record as User).id}</Text>
+
                                                 </Button>
 
                                                 if ((record as User).is_current) {
@@ -313,25 +374,24 @@ export const RegularUsers = () => {
                                                     </div>
                                                 }
 
+                                                if ((record as User).status === "invited") {
+                                                    return <div>{btn}
+                                                        <Tag color="gold">invited</Tag>
+                                                    </div>
+                                                }
+
+                                                if ((record as User).status === "blocked") {
+                                                    return <div>{btn}
+                                                        <Tag color="red">blocked</Tag>
+                                                    </div>
+                                                }
+
                                                 return btn
                                             }}
                                     />
                                     <Column title="Name" dataIndex="name"
                                             onFilter={(value: string | number | boolean, record) => (record as any).name.includes(value)}
                                             sorter={(a, b) => ((a as any).name.localeCompare((b as any).name))}/>
-                                    <Column title="Status" dataIndex="status"
-                                            align="center"
-                                            onFilter={(value: string | number | boolean, record) => (record as any).status.includes(value)}
-                                            sorter={(a, b) => ((a as any).status.localeCompare((b as any).status))}
-                                            render={(text, record, index) => {
-                                                if (text == "active") {
-                                                    return <Tag color="green">{text}</Tag>
-                                                } else if (text === "invited"){
-                                                    return <Tag color="gold">{text}</Tag>
-                                                }
-                                                return <Tag color="red">{text}</Tag>
-                                            }}
-                                    />
                                     <Column title="Groups" dataIndex="groupsCount" align="center"
                                             render={(text, record: UserDataTable, index) => {
                                                 return renderPopoverGroups(text, record.auto_groups, record)
@@ -340,16 +400,27 @@ export const RegularUsers = () => {
                                     <Column title="Role" dataIndex="role"
                                             onFilter={(value: string | number | boolean, record) => (record as any).role.includes(value)}
                                             sorter={(a, b) => ((a as any).role.localeCompare((b as any).role))}/>
-                                    {/*<Column title="" align="center" width="30px"*/}
-                                    {/*        render={(text, record, index) => {*/}
-                                    {/*            return (*/}
-                                    {/*                <Dropdown.Button type="text" overlay={actionsMenu}*/}
-                                    {/*                                 trigger={["click"]}*/}
-                                    {/*                                 onVisibleChange={visible => {*/}
-                                    {/*                                     if (visible) setUserToAction(record as UserDataTable)*/}
-                                    {/*                                 }}></Dropdown.Button>)*/}
-                                    {/*        }}*/}
-                                    {/*/>*/}
+                                    {isAdmin && (
+                                        <Column title="Block user" align="center" width="150px" dataIndex="is_blocked"
+                                                render={(e, record: UserDataTable, index) => {
+                                                    let witch = <Switch size={"small"} checked={e}
+                                                                        disabled={record.is_current}
+                                                                        onClick={(active: boolean) => {
+                                                                            handleBlockUser(active, record)
+                                                                        }}
+                                                    />
+
+                                                    if (record.is_current) {
+                                                        return <Tooltip
+                                                            title="You can't block or unblock yourself">
+                                                            <Empty image={""} description={""} style={{height: "1px", width: "auto"}}/>
+                                                        </Tooltip>
+                                                    }
+
+                                                    return witch
+                                                }}
+                                        />
+                                    )}
                                 </Table>
                             </Card>
                         </Space>